From 19fd8457ed2aa369e97fbf4e41b37e054f43ebca Mon Sep 17 00:00:00 2001
From: cameron-eyds <cameron.bowler@ca.ey.com>
Date: Mon, 11 Dec 2023 14:17:24 -0800
Subject: [PATCH] PPR Functionality / Transfer Updates

---
 ppr-ui/package-lock.json                      | 147 +++++++++++++++++-
 ppr-ui/package.json                           |   3 +-
 .../common/InputFieldDatePicker.vue           |  12 +-
 ppr-ui/src/components/common/index.ts         |   3 +
 .../dialogs/ChangeSecuredPartyDialog.vue      |   2 +-
 .../HomeOwners/HomeOwnersTable.vue            |  10 +-
 .../mhrTransfers/DeathCertificate.vue         |  10 +-
 .../mhrTransfers/SupportingDocuments.vue      |  80 +++++-----
 .../components/mhrTransfers/TransferType.vue  |  30 ++--
 .../parties/party/SecuredParties.vue          |  52 +++++--
 10 files changed, 254 insertions(+), 95 deletions(-)

diff --git a/ppr-ui/package-lock.json b/ppr-ui/package-lock.json
index 90b1d1f49..0c5577df3 100644
--- a/ppr-ui/package-lock.json
+++ b/ppr-ui/package-lock.json
@@ -1,13 +1,14 @@
 {
   "name": "ppr-ui",
-  "version": "3.0.7",
+  "version": "3.0.8",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "ppr-ui",
-      "version": "3.0.7",
+      "version": "3.0.8",
       "dependencies": {
+        "@bcrs-shared-components/input-field-date-picker": "^1.0.0",
         "@lemoncode/fonk": "^1.5.1",
         "@lemoncode/fonk-range-number-validator": "^1.1.0",
         "@sentry/vue": "^7.50.0",
@@ -452,6 +453,72 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/@bcrs-shared-components/base-date-picker": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@bcrs-shared-components/base-date-picker/-/base-date-picker-1.0.0.tgz",
+      "integrity": "sha512-ei4K+9X8MJRX7tK2EjaMEQ/ZtSv/EUj+ERF2/r2MICM0MS9Mt4C3tCPHoa4OxDsWQaVXVKJPDHJckwqp7alWhw==",
+      "dependencies": {
+        "@vuepic/vue-datepicker": "^7.2.2",
+        "vue": "^3.3.4"
+      }
+    },
+    "node_modules/@bcrs-shared-components/corp-type-module": {
+      "version": "1.0.14",
+      "resolved": "https://registry.npmjs.org/@bcrs-shared-components/corp-type-module/-/corp-type-module-1.0.14.tgz",
+      "integrity": "sha512-SZhJw4hpqQT2BL3RuVB0Z1hmShhrv5byhH4gnaF1fVl9jsUGkjC/Ytic08UnEX4DIyR1/VWNyjTclNgxi9+0Bw=="
+    },
+    "node_modules/@bcrs-shared-components/enums": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@bcrs-shared-components/enums/-/enums-2.0.0.tgz",
+      "integrity": "sha512-Ed3aX+nGzT02SFmM0RDc7WpDhKjkMhv9EEklPPso9q2YYHQwm7H9BoK9O14gs+UbvfZsTkSeufWKofLGQiXJQw==",
+      "dependencies": {
+        "@bcrs-shared-components/corp-type-module": "^1.0.13"
+      }
+    },
+    "node_modules/@bcrs-shared-components/input-field-date-picker": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@bcrs-shared-components/input-field-date-picker/-/input-field-date-picker-1.0.0.tgz",
+      "integrity": "sha512-PYv2k9QMYAEXL1bFdmHqIDx7W3v9HGnvvdKsJ26A1R3O9as7znzXFFOWsZDNUeerOdqQGncHeiK9/f1xrHX61w==",
+      "dependencies": {
+        "@bcrs-shared-components/base-date-picker": "^1.0.0",
+        "@bcrs-shared-components/interfaces": "^2.0.0",
+        "vue": "^3.3.4",
+        "vue-router": "^3.6.5"
+      }
+    },
+    "node_modules/@bcrs-shared-components/input-field-date-picker/node_modules/vue-router": {
+      "version": "3.6.5",
+      "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.6.5.tgz",
+      "integrity": "sha512-VYXZQLtjuvKxxcshuRAwjHnciqZVoXAjTjcqBTz4rKc8qih9g9pI3hbDjmqXaHdgL3v8pV6P8Z335XvHzESxLQ=="
+    },
+    "node_modules/@bcrs-shared-components/interfaces": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@bcrs-shared-components/interfaces/-/interfaces-2.0.0.tgz",
+      "integrity": "sha512-4LMlLKho7spE6IjQpiyHLShF2bw44wSeGimRdOST6wmMB0UbQw5fghUaU++KYrF/MLmBMo1q2lV6YdJw4f7DbA==",
+      "dependencies": {
+        "@bcrs-shared-components/enums": "^2.0.0",
+        "vue": "^2.7.14"
+      }
+    },
+    "node_modules/@bcrs-shared-components/interfaces/node_modules/@vue/compiler-sfc": {
+      "version": "2.7.15",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-2.7.15.tgz",
+      "integrity": "sha512-FCvIEevPmgCgqFBH7wD+3B97y7u7oj/Wr69zADBf403Tui377bThTjBvekaZvlRr4IwUAu3M6hYZeULZFJbdYg==",
+      "dependencies": {
+        "@babel/parser": "^7.18.4",
+        "postcss": "^8.4.14",
+        "source-map": "^0.6.1"
+      }
+    },
+    "node_modules/@bcrs-shared-components/interfaces/node_modules/vue": {
+      "version": "2.7.15",
+      "resolved": "https://registry.npmjs.org/vue/-/vue-2.7.15.tgz",
+      "integrity": "sha512-a29fsXd2G0KMRqIFTpRgpSbWaNBK3lpCTOLuGLEDnlHWdjB8fwl6zyYZ8xCrqkJdatwZb4mGHiEfJjnw0Q6AwQ==",
+      "dependencies": {
+        "@vue/compiler-sfc": "2.7.15",
+        "csstype": "^3.1.0"
+      }
+    },
     "node_modules/@esbuild/android-arm": {
       "version": "0.18.20",
       "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.18.20.tgz",
@@ -8127,8 +8194,6 @@
       "version": "0.6.1",
       "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
       "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-      "devOptional": true,
-      "peer": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -9758,6 +9823,76 @@
         "to-fast-properties": "^2.0.0"
       }
     },
+    "@bcrs-shared-components/base-date-picker": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@bcrs-shared-components/base-date-picker/-/base-date-picker-1.0.0.tgz",
+      "integrity": "sha512-ei4K+9X8MJRX7tK2EjaMEQ/ZtSv/EUj+ERF2/r2MICM0MS9Mt4C3tCPHoa4OxDsWQaVXVKJPDHJckwqp7alWhw==",
+      "requires": {
+        "@vuepic/vue-datepicker": "^7.2.2",
+        "vue": "^3.3.4"
+      }
+    },
+    "@bcrs-shared-components/corp-type-module": {
+      "version": "1.0.14",
+      "resolved": "https://registry.npmjs.org/@bcrs-shared-components/corp-type-module/-/corp-type-module-1.0.14.tgz",
+      "integrity": "sha512-SZhJw4hpqQT2BL3RuVB0Z1hmShhrv5byhH4gnaF1fVl9jsUGkjC/Ytic08UnEX4DIyR1/VWNyjTclNgxi9+0Bw=="
+    },
+    "@bcrs-shared-components/enums": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@bcrs-shared-components/enums/-/enums-2.0.0.tgz",
+      "integrity": "sha512-Ed3aX+nGzT02SFmM0RDc7WpDhKjkMhv9EEklPPso9q2YYHQwm7H9BoK9O14gs+UbvfZsTkSeufWKofLGQiXJQw==",
+      "requires": {
+        "@bcrs-shared-components/corp-type-module": "^1.0.13"
+      }
+    },
+    "@bcrs-shared-components/input-field-date-picker": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@bcrs-shared-components/input-field-date-picker/-/input-field-date-picker-1.0.0.tgz",
+      "integrity": "sha512-PYv2k9QMYAEXL1bFdmHqIDx7W3v9HGnvvdKsJ26A1R3O9as7znzXFFOWsZDNUeerOdqQGncHeiK9/f1xrHX61w==",
+      "requires": {
+        "@bcrs-shared-components/base-date-picker": "^1.0.0",
+        "@bcrs-shared-components/interfaces": "^2.0.0",
+        "vue": "^3.3.4",
+        "vue-router": "^3.6.5"
+      },
+      "dependencies": {
+        "vue-router": {
+          "version": "3.6.5",
+          "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.6.5.tgz",
+          "integrity": "sha512-VYXZQLtjuvKxxcshuRAwjHnciqZVoXAjTjcqBTz4rKc8qih9g9pI3hbDjmqXaHdgL3v8pV6P8Z335XvHzESxLQ=="
+        }
+      }
+    },
+    "@bcrs-shared-components/interfaces": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@bcrs-shared-components/interfaces/-/interfaces-2.0.0.tgz",
+      "integrity": "sha512-4LMlLKho7spE6IjQpiyHLShF2bw44wSeGimRdOST6wmMB0UbQw5fghUaU++KYrF/MLmBMo1q2lV6YdJw4f7DbA==",
+      "requires": {
+        "@bcrs-shared-components/enums": "^2.0.0",
+        "vue": "^2.7.14"
+      },
+      "dependencies": {
+        "@vue/compiler-sfc": {
+          "version": "2.7.15",
+          "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-2.7.15.tgz",
+          "integrity": "sha512-FCvIEevPmgCgqFBH7wD+3B97y7u7oj/Wr69zADBf403Tui377bThTjBvekaZvlRr4IwUAu3M6hYZeULZFJbdYg==",
+          "requires": {
+            "@babel/parser": "^7.18.4",
+            "postcss": "^8.4.14",
+            "source-map": "^0.6.1"
+          }
+        },
+        "vue": {
+          "version": "2.7.15",
+          "resolved": "https://registry.npmjs.org/vue/-/vue-2.7.15.tgz",
+          "integrity": "sha512-a29fsXd2G0KMRqIFTpRgpSbWaNBK3lpCTOLuGLEDnlHWdjB8fwl6zyYZ8xCrqkJdatwZb4mGHiEfJjnw0Q6AwQ==",
+          "requires": {
+            "@vue/compiler-sfc": "2.7.15",
+            "csstype": "^3.1.0"
+          }
+        }
+      }
+    },
     "@esbuild/android-arm": {
       "version": "0.18.20",
       "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.18.20.tgz",
@@ -15235,9 +15370,7 @@
     "source-map": {
       "version": "0.6.1",
       "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-      "devOptional": true,
-      "peer": true
+      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
     },
     "source-map-js": {
       "version": "1.0.2",
diff --git a/ppr-ui/package.json b/ppr-ui/package.json
index f2cb1196e..9c1bda4df 100644
--- a/ppr-ui/package.json
+++ b/ppr-ui/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ppr-ui",
-  "version": "3.0.7",
+  "version": "3.0.8",
   "private": true,
   "appName": "Assets UI",
   "sbcName": "SBC Common Components",
@@ -13,6 +13,7 @@
     "test:coverage": "vitest run --coverage"
   },
   "dependencies": {
+    "@bcrs-shared-components/input-field-date-picker" : "^1.0.0",
     "@lemoncode/fonk": "^1.5.1",
     "@lemoncode/fonk-range-number-validator": "^1.1.0",
     "@sentry/vue": "^7.50.0",
diff --git a/ppr-ui/src/components/common/InputFieldDatePicker.vue b/ppr-ui/src/components/common/InputFieldDatePicker.vue
index fef258f60..bcffed9a2 100644
--- a/ppr-ui/src/components/common/InputFieldDatePicker.vue
+++ b/ppr-ui/src/components/common/InputFieldDatePicker.vue
@@ -49,7 +49,7 @@
             id="btn-done"
             variant="plain"
             color="primary"
-            @click="emitDate(dateText)"
+            @click="emitDate"
           >
             <strong>OK</strong>
           </v-btn>
@@ -57,7 +57,7 @@
             id="btn-cancel"
             variant="plain"
             color="primary"
-            @click="emitCancel()"
+            @click="emitCancel"
           >
             Cancel
           </v-btn>
@@ -70,7 +70,7 @@
 <script lang="ts">
 import { defineComponent, reactive, ref, toRefs, watch } from 'vue'
 import { useRoute } from 'vue-router'
-import { shortPacificDate } from '@/utils'
+import { dateToYyyyMmDd, shortPacificDate } from '@/utils'
 import { FormIF } from '@/interfaces'
 import BaseDatePicker from '@/components/common/BaseDatePicker.vue'
 
@@ -96,7 +96,7 @@ export default defineComponent({
     const form = ref(null) as FormIF
     const dateTextField = ref(null)
     const localState = reactive({
-      defaultDate: null,
+      defaultDate: null as Date,
       dateText: props.initialValue || null,
       displayPicker: false
     })
@@ -124,8 +124,8 @@ export default defineComponent({
     }
 
     /** Emit date to add or remove. */
-    const emitDate = (date: Date): void => {
-      context.emit('emitDate', date)
+    const emitDate = (): void => {
+      context.emit('emitDate', dateToYyyyMmDd(localState.defaultDate))
       localState.displayPicker = false
     }
 
diff --git a/ppr-ui/src/components/common/index.ts b/ppr-ui/src/components/common/index.ts
index d0e258efd..31f6a7f92 100644
--- a/ppr-ui/src/components/common/index.ts
+++ b/ppr-ui/src/components/common/index.ts
@@ -37,3 +37,6 @@ export { default as OrgNameLookup } from './OrgNameLookup.vue'
 export { default as ReviewCard } from './ReviewCard.vue'
 export { default as LienAlert } from './LienAlert.vue'
 export { default as StaffPayment } from './StaffPayment.vue'
+
+// Shared Components from https://github.com/bcgov/bcrs-shared-components/tree/feature-vue3/src/components
+// export { InputFieldDatePicker } from '@bcrs-shared-components/input-field-date-picker'
diff --git a/ppr-ui/src/components/dialogs/ChangeSecuredPartyDialog.vue b/ppr-ui/src/components/dialogs/ChangeSecuredPartyDialog.vue
index cf669fdd0..f67dec8d7 100644
--- a/ppr-ui/src/components/dialogs/ChangeSecuredPartyDialog.vue
+++ b/ppr-ui/src/components/dialogs/ChangeSecuredPartyDialog.vue
@@ -33,7 +33,7 @@
           <v-row noGutters>
             <v-btn
               color="primary"
-              icon
+              variant="plain"
               :ripple="false"
               @click="proceed(false)"
             >
diff --git a/ppr-ui/src/components/mhrRegistration/HomeOwners/HomeOwnersTable.vue b/ppr-ui/src/components/mhrRegistration/HomeOwners/HomeOwnersTable.vue
index e92a448c4..66f598309 100644
--- a/ppr-ui/src/components/mhrRegistration/HomeOwners/HomeOwnersTable.vue
+++ b/ppr-ui/src/components/mhrRegistration/HomeOwners/HomeOwnersTable.vue
@@ -437,6 +437,7 @@
                 v-else-if="isRemovedHomeOwner(item) &&
                   (showDeathCertificate() || showSupportingDocuments()) &&
                   isReadonlyTable"
+                class="owner-info"
               >
                 <td
                   v-if="item.supportingDocument"
@@ -445,7 +446,7 @@
                 >
                   <v-row
                     noGutters
-                    class="ml-8 my-n3"
+                    class="ml-8"
                   >
                     <v-col cols="12">
                       <div
@@ -463,7 +464,7 @@
                           Death Certificate Registration Number:
                           <span class="font-light mx-1">{{ item.deathCertificateNumber }}</span>
                         </p>
-                        <p class="generic-label fs-14 mt-n4">
+                        <p class="generic-label fs-14">
                           Date of Death:
                           <span class="font-light mx-1">{{ yyyyMmDdToPacificDate(item.deathDateTime, true) }}</span>
                         </p>
@@ -509,7 +510,7 @@
               >
                 <td
                   :colspan="homeOwnersTableHeaders.length"
-                  class="pl-14 d-block"
+                  class="px-14 d-block"
                   :class="{ 'border-error-left': isInvalidOwnerGroup(group.groupId) }"
                 >
                   <v-expand-transition>
@@ -1138,6 +1139,9 @@ export default defineComponent({
         vertical-align: top;
       }
     }
+    .deceased-review-info {
+      width: 100%;
+    }
   }
 
   .owner-icon-name {
diff --git a/ppr-ui/src/components/mhrTransfers/DeathCertificate.vue b/ppr-ui/src/components/mhrTransfers/DeathCertificate.vue
index d0fda626a..28f10167a 100644
--- a/ppr-ui/src/components/mhrTransfers/DeathCertificate.vue
+++ b/ppr-ui/src/components/mhrTransfers/DeathCertificate.vue
@@ -2,7 +2,7 @@
   <v-card
     id="death-certificate"
     flat
-    class="rounded death-certificate"
+    class="rounded death-certificate pt-4"
   >
     <v-form
       ref="deathCertificateForm"
@@ -53,7 +53,7 @@
             title="Date of Death"
             :errorMsg="validate && !deathDateTime ? 'Enter date of death' : ''"
             :initialValue="deathDateTime"
-            :maxDate="localTodayDate(maxDeathDate)"
+            :maxDate="localTodayDate()"
             :disablePicker="isDisabled"
             data-test-id="death-date-time"
             @emitDate="deathDateTime = $event"
@@ -137,12 +137,6 @@ export default defineComponent({
       showFormError: computed(() => {
         return props.validate && !localState.isDeathCertificateFormValid
       }),
-      maxDeathDate: computed((): Date => {
-        const dateOffset = 24 * 60 * 60 * 1000 // 1 day in milliseconds
-        const maxDate = new Date()
-        maxDate.setTime(maxDate.getTime() - dateOffset)
-        return maxDate
-      }),
       deathCertificateNumberRules: computed((): Array<()=>string|boolean> => {
         return customRules(
           maxLength(20),
diff --git a/ppr-ui/src/components/mhrTransfers/SupportingDocuments.vue b/ppr-ui/src/components/mhrTransfers/SupportingDocuments.vue
index 82735d0bd..d7829c100 100644
--- a/ppr-ui/src/components/mhrTransfers/SupportingDocuments.vue
+++ b/ppr-ui/src/components/mhrTransfers/SupportingDocuments.vue
@@ -148,55 +148,53 @@ export default defineComponent({
 <style lang="scss" scoped>
 @import '@/assets/styles/theme.scss';
 .supporting-docs-options {
-    display: flex;
-
-    .v-radio {
-      flex: 1;
-      background-color: rgba(0, 0, 0, 0.06);
-      height: 60px;
-      padding-left: 24px;
-      margin-right: 20px;
-    }
-
-    .v-radio:last-of-type {
-      margin-right: 0;
-    }
-
-    .v-radio--is-disabled {
-      opacity: 0.4;
-    }
+  .v-radio {
+    flex: 1;
+    background-color: rgba(0, 0, 0, 0.06);
+    height: 60px;
+    padding-left: 24px;
+    margin-right: 20px;
+  }
 
-    .invalid-selection {
-      border: 1px solid $error;
-      background-color: white;
-      .error--text {
-        color: $error;
-      }
-    }
+  .v-radio:last-of-type {
+    margin-right: 0;
+  }
 
-    .selected-radio {
-      border: 1px solid $app-blue;
-      background-color: white;
-    }
+  .v-radio--is-disabled {
+    opacity: 0.4;
+  }
 
-    .selected-radio.invalid-selection {
-      border: 1px solid $error;
+  .invalid-selection {
+    border: 1px solid $error;
+    background-color: white;
+    .error--text {
+      color: $error;
     }
+  }
 
+  .selected-radio {
+    border: 1px solid $app-blue;
+    background-color: white;
   }
 
-  .supporting-doc-one,
-  .supporting-doc-two {
-    border-top: 1px solid $gray3;
-    margin-top: 35px;
-    padding-top: 35px;
-    white-space: normal;
+  .selected-radio.invalid-selection {
+    border: 1px solid $error;
   }
 
-  .supporting-doc-two {
-    padding-top: 22px;
-    .death-certificate {
-      margin-bottom: 0;
-    }
+}
+
+.supporting-doc-one,
+.supporting-doc-two {
+  border-top: 1px solid $gray3;
+  margin-top: 35px;
+  padding-top: 35px;
+  white-space: normal;
+}
+
+.supporting-doc-two {
+  padding-top: 22px;
+  .death-certificate {
+    margin-bottom: 0;
   }
+}
 </style>
diff --git a/ppr-ui/src/components/mhrTransfers/TransferType.vue b/ppr-ui/src/components/mhrTransfers/TransferType.vue
index f0b79cb8e..6fcca66ea 100644
--- a/ppr-ui/src/components/mhrTransfers/TransferType.vue
+++ b/ppr-ui/src/components/mhrTransfers/TransferType.vue
@@ -40,7 +40,7 @@
               :disabled="disableSelect"
               returnObject
             >
-              <template #item="{ item }">
+              <template #item="{ props, item }">
                 <!-- Type Header -->
                 <template v-if="item.raw.class === 'transfer-type-list-header'">
                   <v-list-item
@@ -57,9 +57,13 @@
                     </v-row>
                   </v-list-item>
                 </template>
-
-                <!-- Type Selections -->
-                <template v-else>
+                <v-list-item
+                  v-else
+                  :id="`list-${item.raw.transferType}`"
+                  class="copy-normal gray7"
+                  v-bind="props"
+                  :title="null"
+                >
                   <v-tooltip
                     location="right"
                     contentClass="right-tooltip pa-5"
@@ -67,16 +71,13 @@
                     data-test-id="suffix-tooltip"
                   >
                     <template #activator="{ props }">
-                      <v-list-item
-                        :id="`list-${item.raw.transferType}`"
-                        class="copy-normal gray7"
+                      <v-list-item-title
+                        class="pl-5"
                         v-bind="props"
                         @click="handleTypeChange(item.raw)"
                       >
-                        <v-list-item-title class="pl-5">
-                          {{ item.raw.textLabel }}
-                        </v-list-item-title>
-                      </v-list-item>
+                        {{ item.raw.textLabel }}
+                      </v-list-item-title>
                     </template>
                     <span class="font-weight-bold">{{ item.raw.tooltip.title }}:</span><br>
                     <li
@@ -91,7 +92,7 @@
                       {{ item.raw.tooltip.note }}
                     </div>
                   </v-tooltip>
-                </template>
+                </v-list-item>
               </template>
             </v-select>
           </v-col>
@@ -227,15 +228,20 @@ export default defineComponent({
         (hasUnsavedChanges.value || !!getMhrTransferDeclaredValue.value)) {
         localState.showTransferChangeDialog = true
       } else {
+        console.log(item)
+        console.log(localState.selectedTransferType)
         localState.previousType = cloneDeep(item)
         selectTransferType(item)
       }
     }
 
     const handleTypeChangeDialogResp = (val: boolean): void => {
+      console.log(val)
       if (!val) {
+        console.log(localState.previousType)
         selectTransferType(cloneDeep(localState.previousType))
       } else {
+        console.log(localState.selectedTransferType)
         selectTransferType(cloneDeep(localState.selectedTransferType))
       }
       localState.showTransferChangeDialog = false
diff --git a/ppr-ui/src/components/parties/party/SecuredParties.vue b/ppr-ui/src/components/parties/party/SecuredParties.vue
index abffd9217..cb8bda97d 100644
--- a/ppr-ui/src/components/parties/party/SecuredParties.vue
+++ b/ppr-ui/src/components/parties/party/SecuredParties.vue
@@ -30,14 +30,13 @@
     >
       <v-col
         cols="12"
-        class="party-search"
+        class="party-search bg-white"
       >
         <v-autocomplete
           id="secured-party-autocomplete"
           v-model="searchValue"
           variant="filled"
           hideDetails
-          :customFilter="filterList"
           :loading="loading"
           :items="partyResults"
           itemTitle="businessName"
@@ -50,26 +49,47 @@
           class="mx-7 my-8"
         >
           <template #selection="{ item }">
-            <span v-text="item.code" />
+            <span v-text="item.value" />
             <span
               class="ml-4"
-              v-text="item.businessName"
+              v-text="item.title"
             />
           </template>
-          <template #item="{ item }">
-            <v-list-item @click="selectResult(item)">
-              <v-row class="auto-complete-row">
+          <template #item="{ props, item }">
+<!--            <v-list-item-->
+<!--              v-bind="props"-->
+<!--              class="auto-complete-row fs-14 py-2"-->
+<!--              :title="item?.title"-->
+<!--              @click="selectResult(item.raw)"-->
+<!--            >-->
+<!--              <template #prepend>-->
+<!--                <span class="mr-4">{{ item.value }}</span>-->
+<!--              </template>-->
+<!--              <div class="pt-2">-->
+<!--                {{ item.raw.address.street }},-->
+<!--                {{ item.raw.address.city }}-->
+<!--                {{ item.raw.address.region }}-->
+<!--                {{ getCountryName(item.raw.address.country) }},-->
+<!--                {{ item.raw.address.postalCode }}-->
+<!--              </div>-->
+<!--            </v-list-item>-->
+            <v-list-item
+              v-bind="props"
+              :title="null"
+              @click="selectResult(item.raw)"
+            >
+              <v-row class="auto-complete-row fs-14 py-2">
                 <v-col cols="1">
-                  {{ item.code }}
+                  {{ item.value }}
                 </v-col>
                 <v-col cols="9">
-                  {{ item.businessName }}<br>
+                  {{ item.title }}<br>
                   <div class="pt-2">
-                    {{ item.address.street }},
-                    {{ item.address.city }}
-                    {{ item.address.region }}
-                    {{ getCountryName(item.address.country) }},
-                    {{ item.address.postalCode }}
+                    {{ item.raw.address.street }},
+                    {{ item.raw.address.city }}
+                    {{ item.raw.address.region }}
+                    {{ getCountryName(item.raw.address.country) }},
+                    {{ item.raw.address.postalCode }}
                   </div>
                 </v-col>
               </v-row>
@@ -674,8 +694,8 @@ export default defineComponent({
       item: SearchPartyIF,
       queryText: string
     ) => {
-      const textOne = item.businessName.toLowerCase()
-      const searchText = queryText.toLowerCase()
+      const textOne = item.businessName?.toLowerCase()
+      const searchText = queryText?.toLowerCase()
       return (
         textOne.startsWith(searchText) || item.code.startsWith(searchText)
       )