Add Previous Home Owners to Re-Registration flow (#1934)

* Create a new common CollapsibleCard component * Add PreviousHomeOwners to ReRegistrations flow * Add unit tests for PreviousHomeOwners in Re-Registration flow * Fix to show Group Headers for Previous Owners in Re-Registration flow
bcgov · Jun 14, 2024 · 80d8df8 · 80d8df8
1 parent ab49e52
commit 80d8df8
Show file tree

Hide file tree

Showing 19 changed files with 325 additions and 37 deletions.
diff --git a/ppr-ui/package-lock.json b/ppr-ui/package-lock.json
diff --git a/ppr-ui/package.json b/ppr-ui/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ppr-ui",
-  "version": "3.2.21",
+  "version": "3.2.22",
   "private": true,
   "appName": "Assets UI",
   "sbcName": "SBC Common Components",

diff --git a/ppr-ui/src/components/common/CollapsibleCard.vue b/ppr-ui/src/components/common/CollapsibleCard.vue
@@ -0,0 +1,77 @@
+<template>
+  <v-card
+    flat
+    class="collapsible-card"
+  >
+    <header class="review-header">
+      <label
+        class="font-weight-bold d-flex"
+        data-test-id="card-header-label"
+      >
+        <img
+          class="mr-1"
+          width="25"
+          src="@/assets/svgs/homeownersicon_reviewscreen.svg"
+        >
+        {{ headerLabel }}
+      </label>
+
+      <v-btn
+        variant="plain"
+        color="primary"
+        class="hide-help-btn px-0"
+        data-test-id="card-toggle-label"
+        :ripple="false"
+        @click="toggleCardOpen"
+      >
+        <v-icon
+          :icon="state.isCardOpen ? 'mdi-eye-off' : 'mdi-eye'"
+          class="mr-1"
+          size="20"
+        />
+        {{ state.isCardOpen ? 'Hide' : 'Show' }} {{ toggleLabel }}
+      </v-btn>
+    </header>
+    <v-expand-transition>
+      <div
+        v-if="state.isCardOpen"
+        data-test-id="card-slots"
+      >
+        <!-- Information/Description text slot -->
+        <slot name="infoSlot" />
+
+        <slot name="mainSlot" />
+      </div>
+    </v-expand-transition>
+  </v-card>
+</template>
+
+<script setup lang="ts">
+import { reactive } from 'vue';
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const props = defineProps<{
+  headerLabel: string,
+  toggleLabel: string
+}>()
+
+const state = reactive({
+  isCardOpen: true
+})
+
+const toggleCardOpen = () => {
+  state.isCardOpen = !state.isCardOpen;
+}
+
+</script>
+
+<style lang="scss" scoped>
+.collapsible-card {
+  .review-header {
+    background-color: white;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+}
+</style>
diff --git a/ppr-ui/src/components/common/index.ts b/ppr-ui/src/components/common/index.ts
@@ -38,3 +38,4 @@ export { default as ReviewCard } from './ReviewCard.vue'
 export { default as LienAlert } from './LienAlert.vue'
 export { default as UpdatedBadge } from './UpdatedBadge.vue'
 export { default as StaffPayment } from './StaffPayment.vue'
+export { default as CollapsibleCard } from './CollapsibleCard.vue'
diff --git a/ppr-ui/src/components/mhrRegistration/HomeOwners/HomeOwnersTable.vue b/ppr-ui/src/components/mhrRegistration/HomeOwners/HomeOwnersTable.vue
@@ -3,7 +3,7 @@
     id="home-owner-table-card"
     flat
     rounded
-    :class="{ 'border-error-left': showTableError }"
+    :class="{ 'border-error-left': showTableError && !hideTableErrors }"
   >
     <BaseDialog
       :setOptions="mhrDeceasedOwnerChanges"
@@ -68,7 +68,8 @@
             </div>
 
             <div
-              v-if="showGroups && !(disableGroupHeader(group.groupId) && (hideRemovedOwners || isReadonlyTable))"
+              v-if="(forceShowGroups || showGroups) &&
+                !(disableGroupHeader(group.groupId) && (hideRemovedOwners || isReadonlyTable))"
               :colspan="4"
               class="py-3 group-header-slot"
               :class="{
@@ -80,6 +81,7 @@
                 :groupId="group.groupId"
                 :groupNumber="getGroupNumberById(group.groupId)"
                 :owners="hasActualOwners(group.owners) ? group.owners : []"
+                :ownerGroups="homeOwnerGroups"
                 :showEditActions="showEditActions && enableTransferOwnerGroupActions()"
                 :disableGroupHeader="disableGroupHeader(group.groupId)"
                 :isMhrTransfer="isMhrTransfer"
@@ -780,7 +782,9 @@ export default defineComponent({
     isMhrTransfer: { type: Boolean, default: false },
     hideRemovedOwners: { type: Boolean, default: false },
     showChips: { type: Boolean, default: false },
-    validateTransfer: { type: Boolean, default: false }
+    validateTransfer: { type: Boolean, default: false },
+    hideTableErrors: { type: Boolean, default: false },
+    forceShowGroups: { type: Boolean, default: undefined } // used in Mhr Re-Registration flow for Previous Owners
   },
   emits: ['isValidTransferOwners', 'handleUndo'],
   setup (props, context) {

diff --git a/ppr-ui/src/components/mhrRegistration/HomeOwners/PreviousHomeOwners.vue b/ppr-ui/src/components/mhrRegistration/HomeOwners/PreviousHomeOwners.vue
@@ -0,0 +1,58 @@
+<template>
+  <div
+    class="mt-5"
+    data-test-id="previous-home-owners"
+  >
+    <v-divider class="my-15" />
+
+    <CollapsibleCard
+      headerLabel="Previous Home Owners"
+      toggleLabel="Previous Owners"
+    >
+      <template #infoSlot>
+        <p class="px-6 mb-6">
+          These were the homeowners at the time of the exemption or cancellation and will not
+          appear on the re-registration of this manufactured home.
+        </p>
+        <v-divider class="mx-6" />
+      </template>
+      <template #mainSlot>
+        <div class="mx-6 my-7">
+          <span class="generic-label mr-5">
+            Home Tenancy Type
+          </span>
+          <span data-test-id="home-owner-tenancy-type">
+            {{ getMhrReRegistrationPreviousTenancyType }}
+          </span>
+        </div>
+        <v-divider class="mx-6" />
+
+        <HomeOwnersTable
+          :homeOwnerGroups="getMhrReRegistrationPreviousOwnerGroups"
+          isReadonlyTable
+          hideTableErrors
+          :forceShowGroups="getMhrReRegistrationPreviousTenancyType === HomeTenancyTypes.COMMON"
+          class="mx-6 mb-1"
+        />
+      </template>
+    </CollapsibleCard>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { CollapsibleCard } from '@/components/common'
+import { HomeOwnersTable } from '@/components/mhrRegistration/HomeOwners'
+import { useStore } from '@/store/store'
+import { storeToRefs } from 'pinia'
+import { HomeTenancyTypes } from '@/enums'
+
+const {
+  getMhrReRegistrationPreviousOwnerGroups,
+  getMhrReRegistrationPreviousTenancyType
+} = storeToRefs(useStore())
+
+</script>
+
+<style lang="scss" scoped>
+@import '@/assets/styles/theme.scss';
+</style>
diff --git a/ppr-ui/src/components/mhrRegistration/HomeOwners/TableGroupHeader.vue b/ppr-ui/src/components/mhrRegistration/HomeOwners/TableGroupHeader.vue
@@ -407,7 +407,8 @@ import {
   FormIF,
   MhrRegistrationFractionalOwnershipIF,
   MhrHomeOwnerGroupIF,
-  MhrRegistrationHomeOwnerIF
+  MhrRegistrationHomeOwnerIF,
+  MhrRegistrationHomeOwnerGroupIF
 } from '@/interfaces/'
 import { ActionTypes } from '@/enums'
 import { toTitleCase } from '@/utils'
@@ -432,6 +433,10 @@ export default defineComponent({
       type: Array as () => MhrRegistrationHomeOwnerIF[],
       default: () => []
     },
+    ownerGroups: {
+      type: Array as () => MhrRegistrationHomeOwnerGroupIF[],
+      default: () => []
+    },
     showEditActions: {
       type: Boolean,
       default: true
@@ -460,7 +465,6 @@ export default defineComponent({
       markGroupForRemoval,
       undoGroupChanges,
       hasUndefinedGroupInterest,
-      getTransferOrRegistrationHomeOwnerGroups,
       getHomeTenancyType,
       getGroupTenancyType,
       getCurrentGroupById,
@@ -483,13 +487,13 @@ export default defineComponent({
       isHomeFractionalOwnershipValid: false,
       fractionalData: {} as MhrRegistrationFractionalOwnershipIF,
       group: computed((): MhrHomeOwnerGroupIF => {
-        return find(getTransferOrRegistrationHomeOwnerGroups(), { groupId: props.groupId })
+        return find(props.ownerGroups, { groupId: props.groupId })
       }),
       ownersCount: computed((): number => {
         return props.owners.filter(owner => owner.action !== ActionTypes.REMOVED && !!owner.ownerId).length
       }),
       hasUndefinedInterest: computed((): boolean => {
-        return hasUndefinedGroupInterest(getTransferOrRegistrationHomeOwnerGroups()) &&
+        return hasUndefinedGroupInterest(props.ownerGroups) &&
           !(localState.group.interestNumerator && localState.group.interestDenominator)
       }),
       previousOwnersLabel: computed((): string => {

diff --git a/ppr-ui/src/components/mhrRegistration/HomeOwners/index.ts b/ppr-ui/src/components/mhrRegistration/HomeOwners/index.ts
@@ -5,3 +5,4 @@ export { default as HomeOwnerGroups } from './HomeOwnerGroups.vue'
 export { default as TableGroupHeader } from './TableGroupHeader.vue'
 export { default as FractionalOwnership } from './FractionalOwnership.vue'
 export { default as HomeOwnersMixedRolesError } from './HomeOwnersMixedRolesError.vue'
+export { default as PreviousHomeOwners } from './PreviousHomeOwners.vue'
diff --git a/ppr-ui/src/composables/mhrRegistration/useHomeOwners.ts b/ppr-ui/src/composables/mhrRegistration/useHomeOwners.ts
@@ -42,7 +42,8 @@ export function useHomeOwners (isMhrTransfer: boolean = false, isMhrCorrection:
     getMhrTransferHomeOwnerGroups,
     getMhrTransferHomeOwners,
     getMhrTransferCurrentHomeOwnerGroups,
-    getMhrTransferType
+    getMhrTransferType,
+    isMhrReRegistration
   } = storeToRefs(useStore())
 
   // Get Transfer or Registration Home Owners
@@ -115,7 +116,8 @@ export function useHomeOwners (isMhrTransfer: boolean = false, isMhrCorrection:
 
     // Variable to track if owners has a valid combination of Executor/Trustee/Admin (ETA) Owners
     const hasETA = getTransferOrRegistrationHomeOwnerGroups().some(group => hasExecutorTrusteeAdmin(group))
-    const commonCondition = (isMhrTransfer || isMhrCorrection) ? groups.length > 1 : showGroups.value
+    const commonCondition =
+      (isMhrTransfer || isMhrCorrection || isMhrReRegistration.value) ? groups.length > 1 : showGroups.value
 
     // Special case where a defined Group is orphaned using remove functionality, we want to preserve the Group Type.
     const isSingleInvalidGroup = !!groups[0]?.interestNumerator && !!groups[0]?.interestDenominator

diff --git a/ppr-ui/src/composables/mhrRegistration/useMhrReRegistration.ts b/ppr-ui/src/composables/mhrRegistration/useMhrReRegistration.ts
@@ -1,16 +1,28 @@
 import { HomeCertificationOptions } from '@/enums'
-import { MhRegistrationSummaryIF } from '@/interfaces'
+import { MhRegistrationSummaryIF, MhrRegistrationHomeOwnerGroupIF } from '@/interfaces'
 import { MhrReRegistrationType } from '@/resources'
 import { useStore } from '@/store/store'
 import { fetchMhRegistration, getMhrDraft } from '@/utils'
 import { useNewMhrRegistration } from './useNewMhrRegistration'
 import { cloneDeep } from 'lodash'
 import { useMhrInformation } from '../mhrInformation'
+import { useHomeOwners } from './useHomeOwners'
+import { storeToRefs } from 'pinia'
 
 export const useMhrReRegistration = () => {
-  const { setMhrBaseline, setRegistrationType, setMhrDraftNumber } = useStore()
+  const {
+    setMhrBaseline,
+    setRegistrationType,
+    setMhrDraftNumber,
+    setMhrRegistrationHomeOwnerGroups,
+    setMhrReRegistrationPreviousOwnerGroups,
+    setMhrReRegistrationPreviousTenancyType,
+    setMhrNumber,
+    setMhrStatusType
+  } = useStore()
+
+  const { getMhrRegistrationHomeOwnerGroups } = storeToRefs(useStore())
 
-  const { setMhrNumber, setMhrStatusType } = useStore()
   const { parseMhrPermitData } = useMhrInformation()
 
   const initMhrReRegistration = async (mhrSummary: MhRegistrationSummaryIF): Promise<void> =>
@@ -43,6 +55,9 @@ export const useMhrReRegistration = () => {
       null
 
     if (!isDraft) {
+      // set previous owners to be displayed on Home Owners step of Re-Registration
+      setupPreviousOwners(data.ownerGroups)
+
       // remove props that should not be pre-populated into Re-Registration
       data.documentId = ''
       data.ownerGroups = []
@@ -74,8 +89,27 @@ export const useMhrReRegistration = () => {
     }
   }
 
+  /**
+   * Function to setup previous home owners' information for Home Owners step.
+   * To reuse existing functionality of getHomeTenancyType() we set Mhr Registrations state
+   * and then capture the Home Tenancy Type.
+   *
+   * @param {MhrRegistrationHomeOwnerGroupIF[]} ownerGroups - An array of owner groups.
+   * @returns {void}
+   */
+  const setupPreviousOwners = (ownerGroups: MhrRegistrationHomeOwnerGroupIF[]): void => {
+    setMhrRegistrationHomeOwnerGroups(cloneDeep(ownerGroups))
+
+    const prevOwnersTenancyType: string = useHomeOwners().getHomeTenancyType()
+    const prevOwnerGroups: MhrRegistrationHomeOwnerGroupIF[] = getMhrRegistrationHomeOwnerGroups.value
+
+    setMhrReRegistrationPreviousTenancyType(prevOwnersTenancyType)
+    setMhrReRegistrationPreviousOwnerGroups(cloneDeep(prevOwnerGroups))
+  }
+
   return {
     initMhrReRegistration,
-    initDraftMhrReRegistration
+    initDraftMhrReRegistration,
+    setupPreviousOwners
   }
 }
diff --git a/ppr-ui/src/interfaces/mhr-registration-interfaces/MhrRegistrationIF.ts b/ppr-ui/src/interfaces/mhr-registration-interfaces/MhrRegistrationIF.ts
@@ -26,10 +26,10 @@ export interface NewMhrRegistrationApiIF {
   documentId?: string
   documentType?: string
   mhrNumber?: string
-  registrationType?: APIRegistrationTypes,
+  registrationType?: APIRegistrationTypes
   clientReferenceId?: string
   declaredValue?: string
-  submittingParty: SubmittingPartyIF,
+  submittingParty: SubmittingPartyIF
   ownerGroups: MhrRegistrationHomeOwnerGroupIF[]
   location: MhrRegistrationHomeLocationIF
   description: MhrRegistrationDescriptionIF

diff --git a/ppr-ui/src/interfaces/store-interfaces/state-model-interface.ts b/ppr-ui/src/interfaces/store-interfaces/state-model-interface.ts
@@ -33,7 +33,8 @@ import {
   ExemptionValidationIF,
   StaffPaymentIF,
   MhrTransportPermitIF,
-  AddEditSaNoticeIF
+  AddEditSaNoticeIF,
+  MhrRegistrationHomeOwnerGroupIF
 } from '@/interfaces'
 import { UnitNoteIF } from '@/interfaces/unit-note-interfaces/unit-note-interface'
 
@@ -42,7 +43,7 @@ export interface StateModelIF {
   accountInformation: AccountInformationIF
   accountProductSubscriptions: AccountProductSubscriptionIF
   userProductSubscriptions: Array<UserProductSubscriptionIF>
-  userProductSubscriptionsCodes: Array<ProductCode>,
+  userProductSubscriptionsCodes: Array<ProductCode>
   authorization: AuthorizationIF
   certifyInformation: CertifyIF
   folioOrReferenceNumber: string
@@ -90,6 +91,8 @@ export interface StateModelIF {
   userInfo: UserInfoIF
   mhrInformation: MhRegistrationSummaryIF
   mhrRegistration: MhrRegistrationIF
+  mhrReRegistrationPreviousOwnerGroups?: MhrRegistrationHomeOwnerGroupIF[]
+  mhrReRegistrationPreviousTenancyType?: string
   mhrBaseline?: MhrRegistrationIF
   mhrUnitNotes?: Array<UnitNoteIF>
   mhrUnitNote: UnitNoteRegistrationIF // used for Unit Note filing/registration
@@ -102,7 +105,7 @@ export interface StateModelIF {
   mhrValidationState?: MhrValidationStateIF
   mhrValidationManufacturerState?: MhrValidationManufacturerStateIF
   mhrTransfer: MhrTransferIF
-  mhrInfoValidationState: mhrInfoValidationStateIF,
+  mhrInfoValidationState: mhrInfoValidationStateIF
   mhrTransportPermit: MhrTransportPermitIF
   mhrOriginalTransportPermit?: MhrTransportPermitIF // original Transport Permit filing when working with Amendments
 }