UI - Payment Fail Banner and ApplicationDetails Unit Test

strr-web/lang/en.json

@@ -153,6 +153,8 @@
     "principalResidenceNotApplies": "Principal residence does not apply or my property is exempt",
     "principalResidenceApplies": "Principal residence does apply",
     "proof": "Proof of Principal Residence",
+    "paymentDueBannerMessage": "Payment has failed. Submit payment to complete your registration application.",
+    "paymentDueBannerTitle": "Important",
     "ltsaInfo": "LTSA Information",
     "ltsaDetails": "View LTSA Details",
     "autoApprovalLogic": "Auto-Approval Logic",

strr-web/pages/application-details/[id]/index.vue

@@ -28,7 +28,22 @@
         </div>
       </div>
     </BcrosBanner>
-    <div class="mt-[104px] mobile:pt-[70px]">
+    <div
+      v-if="isPaymentDue"
+      class="bg-red-50 border border-red-200 mt-[104px] mobile:pt-[70px]"
+      data-test-id="payment-due-banner"
+    >
+      <div class="flex items-center py-5">
+        <UIcon name="i-mdi-alert" class="text-red-500 ml-5" />
+        <span class="font-bold ml-2">{{ tApplicationDetails('paymentDueBannerTitle') }}:</span>
+        <span class="ml-1">{{ tApplicationDetails('paymentDueBannerMessage') }}</span>
+      </div>
+    </div>
+    <div
+      :class="[
+        isPaymentDue ? 'mt-10 mobile:pt-7' : 'mt-[104px] mobile:pt-[70px]'
+      ]"
+    >
       <div data-test-id="application-status">
         <h2 class="font-bold mb-6 mobile:mx-2 text-xl">
           {{ tApplicationDetails('applicationStatus') }}
@@ -353,22 +368,21 @@ const tApplicationDetails = (translationKey: string) => t(`applicationDetails.${
 const tStatuses = (translationKey: string) => t(`statuses.${translationKey}`)
 const tPropertyForm = (translationKey: string) => t(`createAccount.propertyForm.${translationKey}`)
 const tReview = (translationKey: string) => t(`createAccount.review.${translationKey}`)
-const { isExaminer } = useBcrosKeycloak()
+const { isExaminer } = storeToRefs(useBcrosKeycloak())
 const { getChipFlavour } = useChipFlavour()
 
 const regionNamesInEnglish = new Intl.DisplayNames(['en'], { type: 'region' })
 
-const applicationNumber = route.params.id.toString()
+// Modified for unit tests, unable to mock route params in tests
+const applicationNumber = route.params.id?.toString() || ''
 
 const {
   getApplication,
   getApplicationHistory,
   getDocument
 } = useApplications()
 
-const {
-  setupBreadcrumbData
-} = useBreadcrumb()
+const { setupBreadcrumbData } = useBreadcrumb()
 
 const [application, applicationHistory]: [ApplicationI, FilingHistoryEventI[]] = await Promise.all([
   getApplication(applicationNumber),
@@ -382,14 +396,15 @@ const applicationDetails: HostApplicationDetailsI = application.registration
 // Get Supporting Documents from the Application response
 const documents: DocumentUploadI[] = applicationDetails.documents || []
 const examinerOrHostStatus = computed(() => {
-  if (isExaminer) {
+  if (isExaminer.value) {
     return application?.header.examinerStatus
   } else {
     return application?.header.hostStatus
   }
 })
 const applicationStatus = application?.header.status
 const flavour = application ? getChipFlavour(examinerOrHostStatus.value || applicationStatus) : null
+const isPaymentDue = computed(() => applicationStatus === ApplicationStatusE.PAYMENT_DUE)
 
 const getApplicationStatusTranslation = (status) => {
   const commonStatusMap = {

strr-web/tests/mocks/mockApplication.ts

@@ -94,75 +94,111 @@ export const mockApplicationDetails: HostApplicationDetailsI = {
   },
   unitDetails: {
     ownershipType: 'OWN',
-    propertyType: 'SECONDARY',
-    rentalUnitSpaceType: '',
-    isUnitOnPrincipalResidenceProperty: false,
-    hostResidence: undefined,
-    numberOfRoomsForRent: 0
+    propertyType: 'SINGLE_FAMILY_HOME',
+    rentalUnitSpaceType: 'ENTIRE_HOME',
+    isUnitOnPrincipalResidenceProperty: true,
+    hostResidence: 'SAME_UNIT',
+    numberOfRoomsForRent: 1
   },
   registrationType: RegistrationTypeE.HOST,
   propertyManager: mockPropertyManager
 }
 
-export const mockApplicationApproved: ApplicationI = {
-  header: {
-    applicationNumber: '41447512384286',
-    applicationDateTime: '2024-08-14T22:24:42.006030+00:00',
-    decisionDate: '2024-08-16T11:08:40.948148+00:00',
-    name: 'registration',
-    paymentAccount: '1699',
-    paymentStatus: 'CREATED',
-    paymentToken: 39363,
-    registrationEndDate: '2025-08-16T11:08:40.935161',
-    registrationId: 1,
-    registrationNumber: 'BCH24527283787',
-    registrationStartDate: '2024-08-16T11:08:40.935161+00:00',
-    registrationStatus: RegistrationStatusE.ACTIVE,
-    isCertificateIssued: true,
-    reviewer: {
-      displayName: 'Joe Smith',
-      username: 'joes@idir'
-    },
-    status: ApplicationStatusE.AUTO_APPROVED,
-    submitter: {
-      displayName: 'BCREGTEST TWENTYFIVE',
-      username: 'bcsc/sdfasdfasdf'
-    },
-    hostActions: [],
-    examinerActions: [ExaminerActionsE.ISSUE_CERTIFICATE],
-    hostStatus: HostApplicationStatusE.AUTO_APPROVED,
-    examinerStatus: ExaminerApplicationStatusE.FULL_REVIEW_APPROVED
+const mockApplicationHeader: ApplicationHeaderI = {
+  applicationNumber: '41447512384286',
+  applicationDateTime: '2024-08-14T22:24:42.006030+00:00',
+  decisionDate: '2024-08-16T11:08:40.948148+00:00',
+  name: 'registration',
+  paymentAccount: '1699',
+  paymentStatus: 'CREATED',
+  paymentToken: 39363,
+  registrationEndDate: '2025-08-16T11:08:40.935161',
+  registrationId: 1,
+  registrationNumber: 'BCH24527283787',
+  registrationStartDate: '2024-08-16T11:08:40.935161+00:00',
+  reviewer: {
+    displayName: 'Joe Smith',
+    username: 'joes@idir'
   },
+  submitter: {
+    displayName: 'BCREGTEST TWENTYFIVE',
+    username: 'bcsc/sdfasdfasdf'
+  },
+  registrationStatus: RegistrationStatusE.ACTIVE,
+  status: ApplicationStatusE.AUTO_APPROVED,
+  isCertificateIssued: true,
+  hostActions: [],
+  examinerActions: [ExaminerActionsE.ISSUE_CERTIFICATE],
+  hostStatus: HostApplicationStatusE.AUTO_APPROVED,
+  examinerStatus: ExaminerApplicationStatusE.FULL_REVIEW_APPROVED
+}
+
+export const mockApplicationApproved: ApplicationI = {
+  header: mockApplicationHeader,
   registration: mockApplicationDetails,
   selectedAccount: {
     sbc_account_id: '12345'
   }
 }
 
+export const mockApplicationApprovedWithSecondaryContact: ApplicationI = {
+  header: mockApplicationHeader,
+  registration: {
+    ...mockApplicationDetails,
+    secondaryContact: {
+      details: {
+        emailAddress: '[email protected]',
+        faxNumber: '',
+        phoneNumber: '2505551234',
+        preferredName: 'Jane Smith',
+        extension: ''
+      },
+      name: {
+        firstName: 'Jane',
+        lastName: 'Smith',
+        middleName: ''
+      },
+      socialInsuranceNumber: '',
+      businessNumber: '',
+      dateOfBirth: '1990-01-01',
+      mailingAddress: {
+        address: '789 Test',
+        addressLineTwo: '',
+        city: 'Victoria',
+        country: 'CA',
+        postalCode: 'V8V3V3',
+        province: 'BC'
+      }
+    }
+  },
+  selectedAccount: {
+    sbc_account_id: '12345'
+  }
+}
+
+export const mockApplicationApprovedWithDocuments: ApplicationI = {
+  header: mockApplicationHeader,
+  registration: {
+    ...mockApplicationDetails,
+    documents: [
+      {
+        fileKey: '809bf24f-a2b9-4740-af84-8297bc346f1d',
+        fileName: 'Test_test',
+        fileType: 'application/octet-stream'
+      }
+    ]
+  },
+  selectedAccount: {
+    sbc_account_id: '12345'
+  }
+}
+
 export const mockApplicationPaymentDue: ApplicationI = {
   header: {
-    applicationNumber: '41447512384286',
-    applicationDateTime: '2024-08-14T22:24:42.006030+00:00',
-    decisionDate: '2024-08-16T11:08:40.948148+00:00',
-    name: 'registration',
-    paymentAccount: '1699',
-    paymentStatus: 'CREATED',
-    paymentToken: 39363,
-    registrationEndDate: '2025-08-16T11:08:40.935161',
-    registrationId: 1,
-    registrationNumber: 'BCH24527283787',
-    registrationStartDate: '2024-08-16T11:08:40.935161+00:00',
+    ...mockApplicationHeader,
     registrationStatus: RegistrationStatusE.ACTIVE,
-    isCertificateIssued: false,
-    reviewer: {
-      displayName: 'Joe Smith',
-      username: 'joes@idir'
-    },
     status: ApplicationStatusE.PAYMENT_DUE,
-    submitter: {
-      displayName: 'BCREGTEST TWENTYFIVE',
-      username: 'bcsc/sdfasdfasdf'
-    },
+    isCertificateIssued: false,
     hostActions: [HostActionsE.SUBMIT_PAYMENT],
     examinerActions: [],
     hostStatus: HostApplicationStatusE.PAYMENT_DUE,
@@ -176,28 +212,10 @@ export const mockApplicationPaymentDue: ApplicationI = {
 
 export const mockApplicationFullReview: ApplicationI = {
   header: {
-    applicationNumber: '41447512384286',
-    applicationDateTime: '2024-08-14T22:24:42.006030+00:00',
-    decisionDate: '2024-08-16T11:08:40.948148+00:00',
-    name: 'registration',
-    paymentAccount: '1699',
-    paymentStatus: 'COMPLETED',
-    paymentToken: 34253,
-    registrationEndDate: '2025-08-16T11:08:40.935161',
-    registrationId: 1,
-    registrationNumber: 'BCH24527283787',
-    registrationStartDate: '2024-08-16T11:08:40.935161+00:00',
+    ...mockApplicationHeader,
     registrationStatus: RegistrationStatusE.ACTIVE,
+    status: ApplicationStatusE.FULL_REVIEW,
     isCertificateIssued: false,
-    reviewer: {
-      displayName: 'Joe Smith',
-      username: 'joes@idir'
-    },
-    status: ApplicationStatusE.PAYMENT_DUE,
-    submitter: {
-      displayName: 'BCREGTEST TWENTYFIVE',
-      username: 'bcsc/sdfasdfasdf'
-    },
     hostActions: [],
     examinerActions: [ExaminerActionsE.APPROVE, ExaminerActionsE.REJECT],
     hostStatus: HostApplicationStatusE.FULL_REVIEW,