Re-Registration Updates (#1947)

ppr-ui/package.json

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

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

@@ -77,7 +77,7 @@
                   color="primary"
                   label="Middle Name (Optional)"
                   data-test-id="middle-name"
-                  :rules="maxLength(15)"
+                  :rules="maxLength(50)"
                   :disabled="disableNameFields"
                   :readonly="disableNameFields"
                 />

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

@@ -68,7 +68,7 @@
             </div>
 
             <div
-              v-if="(forceShowGroups || showGroups) &&
+              v-if="(forceShowGroups === undefined ? showGroups : forceShowGroups) &&
                 !(disableGroupHeader(group.groupId) && (hideRemovedOwners || isReadonlyTable))"
               :colspan="4"
               class="py-3 group-header-slot"

ppr-ui/src/composables/mhrRegistration/useHomeOwners.ts

@@ -199,7 +199,8 @@ export function useHomeOwners (isMhrTransfer: boolean = false, isMhrCorrection:
     const groups = getTransferOrRegistrationHomeOwnerGroups().filter(group => group.action !== ActionTypes.REMOVED)
     const hasNoGroups = [HomeTenancyTypes.SOLE, HomeTenancyTypes.JOINT].includes(getHomeTenancyType()) ||
       groups.length === 0
-    return hasNoGroups || !groups || groups.length >= 2 ||
+
+    return !hasNoGroups || !groups || groups.length >= 2 ||
       (!showGroups.value && groups.length === 1)
   }
 

ppr-ui/src/composables/mhrRegistration/useMhrCorrections.ts

@@ -39,6 +39,7 @@ export const useMhrCorrections = () => {
     getMhrBaseline,
     getMhrHomeSections,
     isRoleStaffReg,
+    isMhrReRegistration,
     getMhrTransportPermit,
     getMhrAccountSubmittingParty,
     getMhrTransportPermitPreviousLocation,
@@ -213,8 +214,12 @@ export const useMhrCorrections = () => {
     // HomeSection: Leveraging section applied actions for correction identification
     homeSections: computed ((): boolean => getMhrHomeSections.value?.some(section => !!section.action)),
     // HomeOwners: Leveraging group and owner applied actions for correction identification
-    ownerGroups: computed ((): boolean => getMhrRegistrationHomeOwnerGroups.value?.some(group =>
-      !!group.action || group.owners.some(owner => !!owner.action))
+    ownerGroups: computed ((): boolean => isMhrReRegistration.value ||
+      getMhrRegistrationHomeOwnerGroups.value?.some(group =>
+        !!group.action || group.owners.some(owner =>
+          !!owner.action
+        )
+      )
     )
   })
 

ppr-ui/src/composables/mhrRegistration/useMhrReRegistration.ts

@@ -60,9 +60,9 @@ export const useMhrReRegistration = () => {
 
       // remove props that should not be pre-populated into Re-Registration
       data.documentId = ''
-      data.ownerGroups = []
       data.attentionReference = ''
       data.submittingParty = {}
+
       // parse Transport Permit data to correctly show Location of Home step
       parseMhrPermitData(data)
     } else {
@@ -85,6 +85,8 @@ export const useMhrReRegistration = () => {
     )
 
     if (!isDraft) {
+      // Remove owners after setting Mhr Baseline
+      data.ownerGroups = []
       await useNewMhrRegistration().initDraftOrCurrentMhr(data)
     }
   }

ppr-ui/tests/unit/MhrInformation.spec.ts

@@ -55,6 +55,7 @@ import {
 import { TransferDetails, TransferDetailsReview, TransferType } from '@/components/mhrTransfers'
 
 import { defaultFlagSet, toDisplayPhone } from '@/utils'
+import { setupCurrentHomeOwners, setupCurrentMultipleHomeOwnersGroups, triggerUnsavedChange } from './utils'
 import { QualifiedSupplierTransferTypes, StaffTransferTypes, StaffTransferTypesOrg, UnitNotesInfo } from '@/resources'
 import { useTransportPermits } from '@/composables'
 
@@ -64,47 +65,6 @@ const TRANSFER_DECLARED_VALUE = '123'
 const TRANSFER_CONSIDERATION = `$${TRANSFER_DECLARED_VALUE}.00`
 const TRANSFER_DATE = '2020-10-10'
 
-// TODO: Remove after API updates to include the ID for Owners
-function addIDsForOwners (ownersGroups): Array<any> {
-  // Create an ID to each individual owner for UI Tracking
-  ownersGroups.forEach(ownerGroup => {
-    for (const [index, owner] of ownerGroup.owners.entries()) {
-      owner.ownerId = ownerGroup.groupId + (index + 1)
-    }
-  })
-
-  return ownersGroups
-}
-
-async function setupCurrentHomeOwners (): Promise<void> {
-  await store.setMhrTransferCurrentHomeOwnerGroups([mockMhrTransferCurrentHomeOwner])
-  // TODO: Remove after API updates to include the ID for Owners
-  const homeOwnerWithIdsArray = addIDsForOwners([mockMhrTransferCurrentHomeOwner])
-  await store.setMhrTransferHomeOwnerGroups(homeOwnerWithIdsArray)
-}
-
-async function setupCurrentMultipleHomeOwnersGroups (): Promise<void> {
-  // setup two groups so they can be shown in the table
-  const currentHomeOwnersGroups = [
-    mockMhrTransferCurrentHomeOwner,
-    {
-      ...mockMhrTransferCurrentHomeOwner,
-      groupId: 2
-    }
-  ]
-
-  await store.setMhrTransferCurrentHomeOwnerGroups(currentHomeOwnersGroups)
-  // TODO: Remove after API updates to include the ID for Owners
-  const homeOwnerWithIdsArray = addIDsForOwners(currentHomeOwnersGroups)
-  await store.setMhrTransferHomeOwnerGroups(homeOwnerWithIdsArray)
-}
-
-async function triggerUnsavedChange (): Promise<void> {
-  // set unsaved changes to make Transfer Details visible
-  await store.setUnsavedChanges(true)
-  await nextTick()
-}
-
 // For future use when Transfer Details will be required to go to Review
 async function enterTransferDetailsFields (transferDetailsWrapper): Promise<void> {
   transferDetailsWrapper.find(getTestId('consideration')).find('input').trigger('mousedown')

ppr-ui/tests/unit/MhrInformationQsTransfers.spec.ts

@@ -0,0 +1,78 @@
+import { defaultFlagSet } from '@/utils'
+import { mockMhrTransferCurrentHomeOwner } from './test-data'
+import { createComponent, mapMhrTypeToProductCode, setupCurrentHomeOwners, setupMockUser } from './utils'
+import { HomeOwners, MhrInformation } from '@/views'
+import { MhrSubTypes, ProductCode, RouteNames } from '@/enums'
+import { nextTick } from 'vue'
+import { LienAlert } from '@/components/common'
+import { TransferType } from '@/components/mhrTransfers'
+import { HomeOwnersTable } from '@/components/mhrRegistration'
+import { useStore } from '@/store/store'
+import { beforeAll } from 'vitest'
+import { useUserAccess } from '@/composables'
+import flushPromises from 'flush-promises'
+
+
+const store = useStore()
+
+//TODO:  Work in progress to test the variations between QS Type in Transfers
+const subProducts: MhrSubTypes[] = [MhrSubTypes.DEALERS, MhrSubTypes.LAWYERS_NOTARIES, MhrSubTypes.MANUFACTURER]
+for (const subProduct of subProducts) {
+  describe(`MhrInformation: ${subProduct}`, () => {
+    let wrapper
+    const { setQsInformationModel } = useUserAccess()
+
+    beforeAll(async () => {
+      // Setup User
+      await setupMockUser()
+
+      // Setup QS
+      await store.setMhrSubProduct(subProduct)
+      await setQsInformationModel(subProduct)
+      await store.setUserProductSubscriptionsCodes([ProductCode.MHR, mapMhrTypeToProductCode(subProduct)])
+
+      await flushPromises()
+      await nextTick()
+    })
+
+    beforeEach(async () => {
+      defaultFlagSet['mhr-transfer-enabled'] = true
+      wrapper = await createComponent(
+        MhrInformation,
+        { appReady: true, isMhrTransfer: true },
+        RouteNames.MHR_INFORMATION
+      )
+
+      await setupCurrentHomeOwners()
+      wrapper.vm.dataLoaded = true
+      await nextTick()
+    })
+
+    it('renders and displays the Mhr Information View for this QS type', async () => {
+      // Verify Base Wrapper
+      expect(wrapper.findComponent(MhrInformation).exists()).toBe(true)
+      expect(wrapper.find('#mhr-information-header').text()).toContain('Manufactured Home Information')
+
+      // Verify Lien Messaging
+      expect(wrapper.findComponent(LienAlert).exists()).toBe(false)
+
+      // Verify Transfer Type Selector
+      expect(wrapper.findComponent(TransferType).exists()).toBe(false)
+
+      // Verify Home Owners
+      const homeOwnersTable = await wrapper.findComponent(HomeOwnersTable)
+      expect(wrapper.findComponent(HomeOwners).exists()).toBeTruthy()
+      expect(wrapper.vm.getMhrTransferCurrentHomeOwnerGroups.length).toBe(1)
+      expect(wrapper.vm.getMhrTransferHomeOwners.length).toBe(1)
+
+      expect(homeOwnersTable.exists()).toBeTruthy()
+      expect(homeOwnersTable.text()).toContain(mockMhrTransferCurrentHomeOwner.owners[0].organizationName)
+      expect(homeOwnersTable.text()).toContain(mockMhrTransferCurrentHomeOwner.owners[0].address.city)
+    })
+
+    it('renders change owners button conditionally', async () => {
+      expect(wrapper.find('#home-owners-header').exists()).toBe(true)
+      expect(wrapper.vm.enableHomeOwnerChanges).toBe(true)
+    })
+  })
+}

ppr-ui/tests/unit/utils/helper-functions.ts

@@ -1,10 +1,15 @@
 import { mount, VueWrapper } from '@vue/test-utils'
 import { useStore } from '@/store/store'
-import { MhApiStatusTypes, ProductCode, RouteNames } from '@/enums'
+import { MhApiStatusTypes, MhrSubTypes, ProductCode, RouteNames } from '@/enums'
 import { createRouterMock, injectRouterMock, RouterMock } from 'vue-router-mock'
 import { routes } from '@/router'
 import { SessionStorageKeys } from 'sbc-common-components/src/util/constants'
-import { mockTransportPermitNewLocation, mockTransportPermitPreviousLocation } from '../test-data'
+import {
+  mockMhrTransferCurrentHomeOwner,
+  mockTransportPermitNewLocation,
+  mockTransportPermitPreviousLocation
+} from '../test-data'
+import { nextTick } from 'vue'
 
 const store = useStore()
 
@@ -133,3 +138,92 @@ export async function setupActiveTransportPermit (): Promise<void> {
   await store.setMhrTransportPermitPreviousLocation(mockTransportPermitPreviousLocation)
   await store.setTransportPermitChangeAllowed(true)
 }
+
+/**
+ * Adds a unique ID to each individual owner within the provided owner groups for UI tracking purposes.
+ *
+ * @param {Array} ownersGroups - An array of owner groups, where each group contains multiple owners.
+ * @returns {Array<any>} The modified array of owner groups with unique IDs assigned to each owner.
+ */
+export function addIDsForOwners (ownersGroups): Array<any> {
+  // Create an ID to each individual owner for UI Tracking
+  ownersGroups.forEach(ownerGroup => {
+    for (const [index, owner] of ownerGroup.owners.entries()) {
+      owner.ownerId = ownerGroup.groupId + (index + 1)
+    }
+  })
+
+  return ownersGroups
+}
+
+/**
+ * Sets up the current home owners by first storing the provided mock data,
+ * and then adding unique IDs to each owner for UI tracking. This function
+ * waits for the store operations to complete.
+ *
+ * @returns {Promise<void>} A promise that resolves when the setup is complete.
+ */
+export async function setupCurrentHomeOwners (): Promise<void> {
+  await store.setMhrTransferCurrentHomeOwnerGroups([mockMhrTransferCurrentHomeOwner])
+  const homeOwnerWithIdsArray = addIDsForOwners([mockMhrTransferCurrentHomeOwner])
+  await store.setMhrTransferHomeOwnerGroups(homeOwnerWithIdsArray)
+}
+
+/**
+ * Sets up the current multiple home owners groups.
+ *
+ * This function creates two groups of mock home owner data and stores them
+ * in the application state. It temporarily adds IDs to each owner for
+ * compatibility with the current API requirements until the API updates
+ * to include these IDs.
+ *
+ * @returns {Promise<void>} A promise that resolves when the setup is complete.
+ */
+export async function setupCurrentMultipleHomeOwnersGroups (): Promise<void> {
+  // setup two groups so they can be shown in the table
+  const currentHomeOwnersGroups = [
+    mockMhrTransferCurrentHomeOwner,
+    {
+      ...mockMhrTransferCurrentHomeOwner,
+      groupId: 2
+    }
+  ]
+
+  await store.setMhrTransferCurrentHomeOwnerGroups(currentHomeOwnersGroups)
+  const homeOwnerWithIdsArray = addIDsForOwners(currentHomeOwnersGroups)
+  await store.setMhrTransferHomeOwnerGroups(homeOwnerWithIdsArray)
+}
+
+/**
+ * Triggers unsaved changes in the application state.
+ *
+ * This function sets the unsaved changes flag to true in the store to
+ * make the Transfer Details section visible, and waits for the next
+ * DOM update cycle.
+ *
+ * @returns {Promise<void>} A promise that resolves when the unsaved changes flag is set.
+ */
+export async function triggerUnsavedChange (): Promise<void> {
+  // set unsaved changes to make Transfer Details visible
+  await store.setUnsavedChanges(true)
+  await nextTick()
+}
+
+/**
+ * Maps specific MHR subtypes to their corresponding product codes.
+ *
+ * @param {MhrSubTypes} subtype - The MHR subtype to be mapped.
+ * @returns {ProductCode | undefined} The corresponding product code, or undefined if the subtype does not have a mapping.
+ */
+export function mapMhrTypeToProductCode(subtype: MhrSubTypes): ProductCode | undefined {
+  switch (subtype) {
+    case MhrSubTypes.LAWYERS_NOTARIES:
+      return ProductCode.LAWYERS_NOTARIES;
+    case MhrSubTypes.MANUFACTURER:
+      return ProductCode.MANUFACTURER;
+    case MhrSubTypes.DEALERS:
+      return ProductCode.DEALERS;
+    default:
+      return undefined;
+  }
+}