Consideration Review and History UXA (#1972)

* Consideration Review and History UXA

* remove dev code

ppr-ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ppr-ui",
-  "version": "3.2.33",
+  "version": "3.2.34",
   "private": true,
   "appName": "Assets UI",
   "sbcName": "SBC Common Components",

ppr-ui/src/assets/svgs/ExecutorPersonIcon.vue

@@ -2,7 +2,7 @@
   <svg
     width="22"
     height="16"
-    viewBox="0 0 22 16"
+    viewBox="0 0 26 16"
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
   >

ppr-ui/src/components/common/SimpleTable.vue

@@ -21,7 +21,6 @@
             v-for="(header, colIndex) in tableHeaders"
             :key="`cell-${rowIndex}-${colIndex}`"
             :class="{
-              'pt-1' : colIndex === 0,
               'font-weight-bold gray9' : colIndex === 1,
               'expanded-row-cell' : expandRow[rowIndex]
             }"
@@ -149,9 +148,6 @@ const getItemValue = (item: object, valuePaths: Array<string> | string): string
 </script>
 <style lang="scss" scoped>
 @import '@/assets/styles/theme';
-:deep(td) {
-  align-content: flex-start;
-}
 .gray9 {
   color: $gray9 !important;
 }

ppr-ui/src/components/common/TabbedContainer.vue

@@ -13,7 +13,7 @@
         v-for="(tabContent, index) in tabConfig"
         :key="`${tabContent.label}-${index}`"
         :value="index"
-        class="tab upper-border mt-1"
+        class="tab upper-border mt-1 pb-1"
         :ripple="false"
       >
         <v-icon

ppr-ui/src/components/mhrHistory/MhrHistoryLocations.vue

@@ -17,7 +17,7 @@
         <p>{{ content?.locationType || '(Not Entered)' }}</p>
       </v-col>
 
-      <template v-if="content.locationType === HomeLocationTypes.LOT">
+      <template v-if="content.locationType === HomeLocationUiTypes.LOT">
         <v-col
           cols="3"
         >
@@ -32,26 +32,35 @@
       </template>
 
       <!-- Park Type -->
-      <template v-if="content.locationType === HomeLocationTypes.HOME_PARK">
+      <template v-if="content.locationType === HomeLocationUiTypes.HOME_PARK">
         <v-col cols="3">
           <h4>Park Name</h4>
         </v-col>
-        <v-col cols="9">
+        <v-col
+          cols="6"
+          class="pl-3"
+        >
           <p>{{ content.parkName || '(Not Entered)' }}</p>
         </v-col>
-        <v-col cols="3">
+        <v-col
+          cols="3"
+          class="mt-n2"
+        >
           <h4>Pad</h4>
         </v-col>
-        <v-col cols="9">
+        <v-col
+          cols="6"
+          class="pl-3 mt-n2"
+        >
           <p>{{ content.pad || '(Not Entered)' }}</p>
         </v-col>
       </template>
 
       <template
         v-if="
-          [HomeLocationTypes.OTHER_RESERVE,
-           HomeLocationTypes.OTHER_STRATA,
-           HomeLocationTypes.OTHER_LAND].includes(content.locationType)"
+          [HomeLocationUiTypes.OTHER_RESERVE,
+           HomeLocationUiTypes.OTHER_STRATA,
+           HomeLocationUiTypes.OTHER_TYPE].includes(content.locationType)"
       >
         <v-row
           noGutters
@@ -314,7 +323,7 @@
 <script setup lang="ts">
 import { ref } from 'vue'
 import { LocationIF, RegistrationIF } from '@/interfaces'
-import { HomeLocationTypes } from '@/enums'
+import { HomeLocationUiTypes } from '@/enums'
 import { useCountriesProvinces } from '@/composables/address/factories'
 import { multipleWordsToTitleCase, pacificDate } from '@/utils'
 

ppr-ui/src/components/mhrTransfers/TransferDetailsReview.vue

@@ -20,7 +20,7 @@
         cols="9"
         class="gray7"
       >
-        {{ getMhrTransferConsideration ? formatCurrency(getMhrTransferConsideration) : '(Not Entered)' }}
+        {{ getMhrTransferConsideration || '(Not Entered)' }}
       </v-col>
     </v-row>
     <v-row v-if="!isTransferDueToDeath && !isTransferWithoutBillOfSale">

ppr-ui/src/enums/homeLocationTypes.ts

@@ -6,3 +6,12 @@ export enum HomeLocationTypes {
   OTHER_STRATA = 'STRATA',
   OTHER_TYPE = 'OTHER'
 }
+
+export enum HomeLocationUiTypes {
+  LOT = "Dealer's / Manufacturer's lot",
+  HOME_PARK = 'Manufactured home park (other than a strata park)',
+  OTHER_TYPE = 'Other',
+  OTHER_RESERVE = 'Indian Reserve',
+  OTHER_STRATA = 'Strata',
+  NOT_ENTERED = '(Not Entered)'
+}

ppr-ui/src/views/mhrInformation/MhrHistory.vue

@@ -51,7 +51,7 @@
         <template #tab-1>
           <SimpleTable
             :tableHeaders="homeLocationHeaders"
-            :tableData="mhrHistory.locations"
+            :tableData="mapLocationsApiToUi(mhrHistory.locations)"
           >
             <template #content-slot="{ content }">
               <MhrHistoryLocations
@@ -68,10 +68,12 @@
           >
             <template #cell-slot-1="{ content }: { content: OwnerIF }">
               <div class="icon-text">
-                <v-icon class="mt-n1">
+                <v-icon
+                  class="mt-n1"
+                >
                   {{ getHomeOwnerIcon(content.partyType, !content?.individualName) }}
                 </v-icon>
-                <span class="align-bottom pl-2">
+                <span class="pl-2">
                   <template v-if="content?.individualName">
                     {{ content.individualName.first }}
                     {{ content.individualName.middle }}
@@ -80,7 +82,7 @@
                   <template v-else>
                     {{ content.organizationName }}
                   </template>
-                  <template v-if="content.partyType === HomeOwnerPartyTypes.EXECUTOR">
+                  <template v-if="content.description">
                     <br>
                     <span class="fs-14 font-weight-regular gray7">{{ content.description }}</span>
                   </template>
@@ -136,7 +138,13 @@ import {
   mhHistoryTabConfig
 } from '@/resources/mhr-history'
 import { MhrHistoryDescription, MhrHistoryLocations, MhrHistoryOwners } from '@/components/mhrHistory'
-import { ApiHomeTenancyTypes, HomeOwnerPartyTypes, HomeTenancyTypes } from '@/enums'
+import {
+  ApiHomeTenancyTypes,
+  HomeLocationTypes,
+  HomeLocationUiTypes,
+  HomeOwnerPartyTypes,
+  HomeTenancyTypes
+} from '@/enums'
 import { OwnerIF } from '@/interfaces'
 
 /** Composables **/
@@ -190,6 +198,42 @@ const getHomeOwnerIcon = (partyType: HomeOwnerPartyTypes, isBusiness = false): s
   }
 }
 
+/**
+ * Maps an API home location type to a UI home location type.
+ *
+ * @param {HomeLocationTypes} apiType - The API home location type to map.
+ * @returns {HomeLocationUiTypes} The corresponding UI home location type.
+ */
+function mapApiToUiLocationType(apiType: HomeLocationTypes): HomeLocationUiTypes {
+  switch (apiType) {
+    case HomeLocationTypes.LOT:
+      return HomeLocationUiTypes.LOT
+    case HomeLocationTypes.HOME_PARK:
+      return HomeLocationUiTypes.HOME_PARK
+    case HomeLocationTypes.OTHER_RESERVE:
+      return HomeLocationUiTypes.OTHER_RESERVE
+    case HomeLocationTypes.OTHER_STRATA:
+      return HomeLocationUiTypes.OTHER_STRATA
+    case HomeLocationTypes.OTHER_TYPE:
+      return HomeLocationUiTypes.OTHER_TYPE
+    default:
+      return HomeLocationUiTypes.NOT_ENTERED
+  }
+}
+
+/**
+ * Maps the `locationType` and `otherType` properties in each location object to the UI location types.
+ *
+ * @param {Array<any>} locations - The array of location objects.
+ * @returns {Array<any>} The new array with updated location types.
+ */
+function mapLocationsApiToUi(locations: Array<any>): Array<any> {
+  return locations.map(location => ({
+    ...location,
+    locationType: mapApiToUiLocationType(location.locationType)
+  }))
+}
+
 /**
  * Maps an API home tenancy type to a UI home tenancy type.
  *
@@ -246,9 +290,6 @@ function mapOwnersApiToUi(owners: Array<any>): Array<any> {
 </script>
 <style lang="scss" scoped>
 @import '@/assets/styles/theme';
-.align-bottom {
-  vertical-align: bottom;
-}
 .person-executor-icon {
   margin-top: -3px !important;
   height: 22px !important;