General MHR Items + Misc PPR QA items

ppr-ui/package.json

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

ppr-ui/src/assets/styles/base.scss

@@ -78,7 +78,7 @@ body {
 }
 
 .footer-view-container {
-  margin-bottom: 140px; // Applied for views with footers to prevent margin bottoms on each End/Bottom components.
+  margin-bottom: 180px; // Applied for views with footers to prevent margin bottoms on each End/Bottom components.
 }
 
 .scroll-container {

ppr-ui/src/components/collateral/Collateral.vue

@@ -26,7 +26,7 @@
       </v-row>
       <v-container
         v-if="!valid && registrationFlowType === RegistrationFlowType.NEW"
-        :class="{ 'invalid-message': !valid }"
+        :class="{ 'border-error-left': !valid }"
       >
         <v-row
           noGutters
@@ -36,7 +36,7 @@
             <v-icon color="error">
               mdi-information-outline
             </v-icon>&nbsp;
-            <span class="invalid-message">This step is unfinished. </span>
+            <span class="error-text">This step is unfinished. </span>
             <span
               id="router-link-collateral"
               class="generic-link"
@@ -231,7 +231,8 @@ export default defineComponent({
 
     onUnmounted(() => {
       // clear general collateral description if there is no valid text left in editor (html tags not included)
-      if (getAddCollateral.value?.generalCollateral[0]?.description?.replace(/(<([^>]+)>)/ig, '').trim().length === 0) {
+      if (!!getAddCollateral.value?.generalCollateral?.length &&
+        getAddCollateral.value?.generalCollateral[0]?.description?.replace(/(<([^>]+)>)/ig, '')?.trim().length === 0) {
         setGeneralCollateral([])
         // clear collateral step check mark if there are no vehicles
         // (this resets check mark that was set by general collateral description)

ppr-ui/src/components/collateral/generalCollateral/GenColAmend.vue

@@ -137,7 +137,7 @@ export default defineComponent({
       }),
       cardClass: computed((): string => {
         if (localState.showErrorComponent) {
-          return 'invalid-message'
+          return 'border-error-left'
         }
         if (localState.showErrorBar) {
           return 'border-over'

ppr-ui/src/components/collateral/generalCollateral/GenColEdit.vue

@@ -1,7 +1,7 @@
 <template>
   <v-card
     id="general-collateral"
-    :class="{ 'invalid-message': showErrorComponent }"
+    :class="{ 'border-error-left': showErrorComponent }"
     class="pa-4"
     flat
   >

ppr-ui/src/components/collateral/vehicleCollateral/VehicleCollateral.vue

@@ -156,7 +156,7 @@
       <v-col :class="{ 'box-shadow-left': showErrorBar && activeIndex >= 0 }">
         <v-table
           class="collateral-table vehicle-data-table"
-          :class="{ 'invalid-message': showErrorComponent }"
+          :class="{ 'border-error-left': showErrorComponent }"
         >
           <template #default>
             <!-- Table Headers -->

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

@@ -10,21 +10,23 @@
     class="mb-7"
     toggleButtonTitle="Need Help? Contact Us"
   >
-    <h3 class="text-center mb-2">
-      Contact BC Registries
-    </h3>
-    <div class="ml-7">
-      <DialogContent
-        :setBaseText="helpText"
-        :setHasContactInfo="true"
-      />
-      <div class="mt-3">
-        <h4>Hours of Operation:</h4>
-        <p class="mb-0">
-          Monday to Friday, 8:30 am - 4:30 pm Pacific time
-        </p>
+    <template #content>
+      <h3 class="text-center mb-2">
+        Contact BC Registries
+      </h3>
+      <div class="ml-7">
+        <DialogContent
+          :setBaseText="helpText"
+          :setHasContactInfo="true"
+        />
+        <div class="mt-3">
+          <h4>Hours of Operation:</h4>
+          <p class="mb-0">
+            Monday to Friday, 8:30 am - 4:30 pm Pacific time
+          </p>
+        </div>
       </div>
-    </div>
+    </template>
   </SimpleHelpToggle>
 </template>
 

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

@@ -275,7 +275,7 @@ import {
 } from '@/resources/dialogOptions'
 import { StatusCodes } from 'http-status-codes'
 import { cloneDeep } from 'lodash'
-import { useExemptions, useNewMhrRegistration } from '@/composables'
+import { useExemptions, useNavigation, useNewMhrRegistration } from '@/composables'
 
 export default defineComponent({
   name: 'RegistrationsWrapper',
@@ -310,6 +310,7 @@ export default defineComponent({
   emits: ['error', 'haveData', 'snackBarMsg'],
   setup (props, context) {
     const router = useRouter()
+    const { goToRoute } = useNavigation()
     const {
       // Actions
       resetNewRegistration, setRegistrationType, setRegTableCollapsed, setRegTableNewItem, setLengthTrust,
@@ -468,7 +469,7 @@ export default defineComponent({
       }
 
       const route = isMhrRegistration.value ? RouteNames.YOUR_HOME : RouteNames.LENGTH_TRUST
-      await router.replace({ name: route })
+      await goToRoute(route)
     }
 
     const findRegistration = async (regNum: string): Promise<void> => {
@@ -1055,6 +1056,8 @@ export default defineComponent({
               setRegTableTotalRowCount(getRegTableTotalRowCount.value + 1)
             }
           }
+        } else {
+          await fetchMhRegistrations()
         }
 
         localState.myRegDataAdding = false
@@ -1065,6 +1068,7 @@ export default defineComponent({
 
         // trigger snackbar
         context.emit('snackBarMsg', 'Registration was successfully added to your table.')
+
         // set to empty strings after 6 seconds
         setTimeout(() => {
           // only reset if it hasn't changed since

ppr-ui/src/components/dialogs/SecuredPartyDialog.vue

@@ -51,7 +51,7 @@
           >
             <v-btn
               color="primary"
-              icon
+              variant="plain"
               :ripple="false"
               @click="exit()"
             >

ppr-ui/src/components/mhrRegistration/HomeLocation/HomeLandOwnership.vue

@@ -151,7 +151,7 @@ export default defineComponent({
 
     watch(() => localState.isValidHomeLandOwnership, async (val: boolean) => {
       setValidation(MhrSectVal.LOCATION_VALID, MhrCompVal.LAND_DETAILS_VALID, val)
-    })
+    }, { immediate: true })
 
     watch(() => props.validate, () => {
       validateForm()

ppr-ui/src/components/mhrRegistration/HomeLocation/HomeLocationDescription.vue

@@ -139,15 +139,13 @@
 </template>
 
 <script lang="ts">
-
 import { defineComponent, computed, reactive, toRefs, watch, onMounted } from 'vue'
 import { HomeLocationInfo } from '@/components/common'
 import { useStore } from '@/store/store'
 import { useInputRules, useNewMhrRegistration } from '@/composables'
 import { MhrLocationInfoIF } from '@/interfaces'
 import { storeToRefs } from 'pinia'
 
-
 export default defineComponent({
   name: 'HomeLocationDescription',
   components: {
@@ -174,7 +172,7 @@ export default defineComponent({
       additionalDescription: getMhrRegistrationLocation.value?.additionalDescription || '',
       isHomeLocationDescriptionValid: false,
       isValidDescription: computed((): boolean => {
-        return localState.isHomeLocationDescriptionValid &&
+        return (props.isReserve || localState.isHomeLocationDescriptionValid) &&
           ((!localState.showLocationInfo && !props.isReserve) || localState.isValidLocationInfo)
       }),
       isValidOtherType: computed((): boolean => {

ppr-ui/src/components/mhrRegistration/HomeOwners/AddEditHomeOwner.vue

@@ -434,9 +434,8 @@ import { useStore } from '@/store/store'
 import { find } from 'lodash'
 import { useMhrInformation, useTransferOwners } from '@/composables'
 import { ActionTypes, HomeOwnerPartyTypes } from '@/enums'
-import { AdditionalNameConfig, transfersContent } from '@/resources'
+import { AdditionalNameConfig, phoneMask, transfersContent } from '@/resources'
 import { storeToRefs } from 'pinia'
-import { phoneMask } from '@/resources'
 
 interface FractionalOwnershipWithGroupIdIF extends MhrRegistrationFractionalOwnershipIF {
   groupId: number
@@ -673,7 +672,13 @@ export default defineComponent({
       addHomeOwnerForm.value.validate()
       await nextTick()
 
-      if (localState.isHomeOwnerFormValid && localState.isAddressFormValid) {
+      // validate additional name field as part of add/edit own submission
+      const isValidAdditionalName =
+        [HomeOwnerPartyTypes.OWNER_IND, HomeOwnerPartyTypes.OWNER_BUS].includes(localState.owner.partyType)
+          ?  true
+          : !!localState.owner[getSuffixOrDesc(localState.owner)]
+
+      if (localState.isHomeOwnerFormValid && localState.isAddressFormValid && isValidAdditionalName) {
         setValidation(MhrSectVal.ADD_EDIT_OWNERS_VALID, MhrCompVal.OWNERS_VALID, true)
         if (props.editHomeOwner) {
           const updatedOwner = isCurrentOwner(localState.owner)
@@ -720,12 +725,15 @@ export default defineComponent({
 
           setGroupFractionalInterest(localState.ownerGroupId || 1, fractionalData)
         } else if (localState.group) {
+          // Dev Note: Left this code in but commented, currently this is deleting group data on edits
+          // Not sure of initial purpose of implementation. Need to research
+
           // this condition should only occur when trying to delete a group
           // clear out any fractional info
-          delete localState.group.type
-          delete localState.group.interest
-          delete localState.group.interestNumerator
-          delete localState.group.interestDenominator
+          // delete localState.group.type
+          // delete localState.group.interest
+          // delete localState.group.interestNumerator
+          // delete localState.group.interestDenominator
         }
 
         if (props.isMhrTransfer) setUnsavedChanges(props.editHomeOwner !== localState.owner)
@@ -772,20 +780,17 @@ export default defineComponent({
         : 'description'
     }
 
-    watch(
-      () => localState.searchValue,
-      (val: string) => {
-        if (val?.length >= 3) {
-          localState.autoCompleteSearchValue = val
-          // show autocomplete results when there is a searchValue
-          localState.autoCompleteIsActive = val !== ''
-        } else {
-          localState.autoCompleteSearchValue = val
-          localState.autoCompleteIsActive = false
-        }
-        localState.owner.organizationName = val
+    watch(() => localState.searchValue, (val: string) => {
+      if (val?.length >= 3) {
+        localState.autoCompleteSearchValue = val
+        // show autocomplete results when there is a searchValue
+        localState.autoCompleteIsActive = val !== ''
+      } else {
+        localState.autoCompleteSearchValue = val
+        localState.autoCompleteIsActive = false
       }
-    )
+      localState.owner.organizationName = val
+    })
 
     return {
       phoneMask,

ppr-ui/src/components/mhrRegistration/HomeOwners/HomeOwnersTable.vue

@@ -722,7 +722,7 @@ export default defineComponent({
         return groups.some(group => group.owners.filter(owner => owner.action !== ActionTypes.REMOVED).length === 0)
       }),
       isValidAllocation: computed((): boolean => {
-        return !showGroups.value || !getTotalOwnershipAllocationStatus().hasTotalAllocationError ||
+        return !showGroups.value || !getTotalOwnershipAllocationStatus.hasTotalAllocationError ||
           [HomeTenancyTypes.SOLE, HomeTenancyTypes.JOINT].includes(getHomeTenancyType())
       })
     })

ppr-ui/src/components/mhrRegistration/ReviewConfirm/HomeOwnersReview.vue

@@ -53,7 +53,7 @@
               <span class="generic-label">Total Ownership Allocated </span>
             </v-col>
             <v-col class="pl-1 gray7">
-              {{ getTotalOwnershipAllocationStatus().totalAllocation }}
+              {{ getTotalOwnershipAllocationStatus.totalAllocation }}
             </v-col>
           </v-row>
         </article>

ppr-ui/src/components/mhrRegistration/YourHome/HomeSections.vue

@@ -6,7 +6,7 @@
     >
       <v-btn
         variant="outlined"
-        class="mt-1 add-home-section-btn"
+        class="mt-3 add-home-section-btn"
         color="primary"
         :ripple="false"
         :disabled="showAddEditHomeSections || isEditingHomeSection"

ppr-ui/src/components/parties/debtor/Debtors.vue

@@ -72,7 +72,7 @@
       <v-col>
         <v-table
           class="debtor-table debtor-data-table"
-          :class="{ 'invalid-message': showErrorDebtors && !getDebtorValidity() }"
+          :class="{ 'border-error-left': showErrorDebtors && !getDebtorValidity() }"
         >
           <template #default>
             <!-- Table Headers -->

ppr-ui/src/components/parties/party/EditParty.vue

@@ -85,7 +85,7 @@
                       ref="partyNameSearchField"
                       v-model="searchValue"
                       variant="filled"
-color="primary"
+                      color="primary"
                       label="Find or enter the Full Legal Name of the Business"
                       :errorMessages="
                         errors.businessName.message
@@ -132,7 +132,7 @@ color="primary"
                       id="txt-first-party"
                       v-model="currentSecuredParty.personName.first"
                       variant="filled"
-color="primary"
+                      color="primary"
                       label="First Name"
                       persistentHint
                       :errorMessages="
@@ -149,7 +149,7 @@ color="primary"
                       id="txt-middle-party"
                       v-model="currentSecuredParty.personName.middle"
                       variant="filled"
-color="primary"
+                      color="primary"
                       label="Middle Name (Optional)"
                       persistentHint
                       :errorMessages="
@@ -163,7 +163,7 @@ color="primary"
                       id="txt-last-party"
                       v-model="currentSecuredParty.personName.last"
                       variant="filled"
-color="primary"
+                      color="primary"
                       label="Last Name"
                       persistentHint
                       :errorMessages="
@@ -187,7 +187,7 @@ color="primary"
                       id="txt-email-party"
                       v-model="currentSecuredParty.emailAddress"
                       variant="filled"
-color="primary"
+                      color="primary"
                       :label="isRegisteringParty ? 'Email Address' : 'Email Address (Optional)'"
                       :errorMessages="
                         errors.emailAddress.message

ppr-ui/src/components/parties/party/SecuredParties.vue

@@ -137,8 +137,8 @@
         <v-table
           class="party-table party-data-table"
           :class="{
-            'invalid-message': showErrorSecuredParties && !getSecuredPartyValidity(),
-            'border-error-left': setShowErrorBar
+            'border-error-left': (showErrorSecuredParties && !getSecuredPartyValidity()) ||
+              (setShowErrorBar || (isSecuredPartiesRestricted && securedParties.length >= 2))
           }"
         >
           <template #default>

ppr-ui/src/components/parties/summaries/BasePartySummary.vue

@@ -108,12 +108,12 @@
               <tr>
                 <td
                   :colspan="2"
-                  class="border-error-left text-center"
+                  class="error-text text-center"
                 >
                   <v-icon color="error">
                     mdi-information-outline
                   </v-icon>
-                  <span class="invalid-message fs-16">This step is unfinished.</span>
+                  <span class="error-text fs-16">This step is unfinished.</span>
                   <span
                     class="generic-link fs-16"
                     @click="noDataAction()"