Merge pull request bcgov#173 from shaangill025/fix_23418

UI: Replace Application ID with Application Number

strr-web/components/bcros/banner/banner.vue

@@ -13,16 +13,16 @@
       <div v-if="!hideButtons">
         <div class="mobile:hidden">
           <BcrosButtonsPrimary
-            v-if="applicationId"
+            v-if="applicationNumber"
             :label="tBanner('approve')"
-            :action="() => applicationId && approveApplication(applicationId)"
+            :action="() => applicationNumber && approveApplication(applicationNumber)"
             variant="outline"
             class-name="ml-[16px]"
           />
           <BcrosButtonsPrimary
-            v-if="applicationId"
+            v-if="applicationNumber"
             :label="tBanner('reject')"
-            :action="() => applicationId && rejectApplication(applicationId)"
+            :action="() => applicationNumber && rejectApplication(applicationNumber)"
             variant="outline"
             class-name="ml-[16px]"
           />
@@ -36,16 +36,16 @@
         </div>
         <div class="desktop:hidden flex">
           <a
-            v-if="applicationId"
+            v-if="applicationNumber"
             class="mr-[16px] py-[10px]"
-            :on-click="() => applicationId && approveApplication(applicationId)"
+            :on-click="() => applicationNumber && approveApplication(applicationNumber)"
           >
             {{ tBanner('approve') }}
           </a>
           <a
-            v-if="applicationId"
+            v-if="applicationNumber"
             class="mr-[16px] py-[10px]"
-            :on-click="() => applicationId && rejectApplication(applicationId)"
+            :on-click="() => applicationNumber && rejectApplication(applicationNumber)"
           >
             {{ tBanner('reject') }}
           </a>
@@ -65,7 +65,7 @@
 <script setup lang="ts">
 const { hideButtons = true } = defineProps<{
   hideButtons?: boolean
-  applicationId?: string
+  applicationNumber?: string
   registrationId?: string
 }>()
 const { t } = useTranslation()

strr-web/components/bcros/status-card/StatusCard.vue

@@ -24,7 +24,7 @@
     </div>
     <div class="flex flex-row text-bcGovColor-activeBlue justify-start">
       <BcrosButtonsPrimary
-        :action="() => navigateTo(`/application-details/${applicationId}`, { open: { target: '_blank' } })"
+        :action="() => navigateTo(`/application-details/${applicationNumber}`, { open: { target: '_blank' } })"
         :label="tRegistrationStatus('view')"
         class-name="px-4 py-1 mobile:grow-0"
         variant="ghost"
@@ -72,7 +72,7 @@ const {
 }>()
 
 const { registrationId, registrationNumber, status, hostStatus, examinerStatus, registrationStatus } = applicationHeader
-const applicationId = applicationHeader.id.toString()
+const applicationNumber = applicationHeader.applicationNumber
 const flavour = computed(() => {
   if (isExaminer) {
     return getChipFlavour(examinerStatus || status)

strr-web/composables/useApplications.ts

@@ -43,8 +43,8 @@ export const useApplications = () => {
         throw new Error('Invalid AUTH API response')
       }
 
-      const { paymentToken, id } = data.header
-      handlePaymentRedirect(paymentToken, id)
+      const { paymentToken, applicationNumber } = data.header
+      handlePaymentRedirect(paymentToken, applicationNumber)
 
       return data
     } catch (error) {
@@ -65,10 +65,10 @@ export const useApplications = () => {
   /**
    * Retrieves STR Application by Id.
    *
-   * @param {string} id - The Id of the application to retrieve.
+   * @param {string} appNum - The application number to retrieve.
    */
-  const getApplication = async (id: string): Promise<ApplicationI> => {
-    const { data } = await axiosInstance.get(`${apiURL}/applications/${id}`)
+  const getApplication = async (appNum: string): Promise<ApplicationI> => {
+    const { data } = await axiosInstance.get(`${apiURL}/applications/${appNum}`)
     return data
   }
 
@@ -103,74 +103,74 @@ export const useApplications = () => {
     return data
   }
 
-  const getApplicationHistory = async (id: string): Promise<FilingHistoryEventI[]> => {
-    const { data } = await axiosInstance.get(`${apiURL}/applications/${id}/events`)
+  const getApplicationHistory = async (appNum: string): Promise<FilingHistoryEventI[]> => {
+    const { data } = await axiosInstance.get(`${apiURL}/applications/${appNum}/events`)
     return data
   }
 
   /**
    * Get/Download Supporting Document file for Application.
    *
-   * @param {string} applicationId - The id of the application to which the document belongs.
+   * @param {string} applicationNumber - The application number to which the document belongs.
    * @param {string} fileKey - The key of the document to be retrieved.
    * @returns The file/document
    */
-  const getDocument = async (applicationId: string, fileKey: string): Promise<Blob> => {
-    const { data } = await axiosInstance.get<Blob>(`${apiURL}/applications/${applicationId}/documents/${fileKey}`, {
+  const getDocument = async (applicationNumber: string, fileKey: string): Promise<Blob> => {
+    const { data } = await axiosInstance.get<Blob>(`${apiURL}/applications/${applicationNumber}/documents/${fileKey}`, {
       responseType: 'blob'
     })
     return data
   }
 
   /**
    * Approve an Application by setting its status to APPROVED.
-   * @param id - The id of the Application to approve.
+   * @param appNum - The application number.
    */
-  const approveApplication = async (id: string) => {
+  const approveApplication = async (appNum: string) => {
     try {
-      await updateApplicationStatus(id, ApplicationStatusE.FULL_REVIEW_APPROVED)
+      await updateApplicationStatus(appNum, ApplicationStatusE.FULL_REVIEW_APPROVED)
     } catch (error) {
       console.error(error)
     }
   }
 
   /**
    * Reject an application by setting its status to REJECTED.
-   * @param id - The id of the Application to reject.
+   * @param appNum - The application number.
    */
-  const rejectApplication = async (id: string) => {
+  const rejectApplication = async (appNum: string) => {
     try {
-      await updateApplicationStatus(id, ApplicationStatusE.DECLINED)
+      await updateApplicationStatus(appNum, ApplicationStatusE.DECLINED)
     } catch (error) {
       console.error(error)
     }
   }
 
   /**
    * Update the status of an application.
-   * @param id - The id of the Application.
+   * @param appNum - The application number.
    * @param status - The status to set for the Application.
    */
-  const updateApplicationStatus = async (id: string, status: ApplicationStatusE) => {
-    await axiosInstance.put(`${apiURL}/applications/${id}/status`, { status: `${status}` })
+  const updateApplicationStatus = async (appNum: string, status: ApplicationStatusE) => {
+    await axiosInstance.put(`${apiURL}/applications/${appNum}/status`, { status: `${status}` })
     window.location.reload()
   }
 
   /**
    * Get LTSA records application.
-   * @param id - The id of the Application.
+   * @param appNum - The application number.
    */
-  const getLtsa = async (id: string): Promise<LtsaDataI[]> => {
-    const res = await axiosInstance.get(`${apiURL}/applications/${id}/ltsa`)
+  const getLtsa = async (appNum: string): Promise<LtsaDataI[]> => {
+    const res = await axiosInstance.get(`${apiURL}/applications/${appNum}/ltsa`)
     return res.data
   }
 
   /**
    * Update the status of an application.
-   * @param id - The id of the Application.
+   * @param appNum - The application number.
    */
-  const getAutoApproval = async (id: string): Promise<AutoApprovalDataI[]> => {
-    const res = await axiosInstance.get(`${apiURL}/applications/${id}/auto-approval-records`)
+  const getAutoApproval = async (appNum: string): Promise<AutoApprovalDataI[]> => {
+    const res = await axiosInstance.get(`${apiURL}/applications/${appNum}/auto-approval-records`)
     return res.data
   }
 

strr-web/composables/useBreadcrumb.ts

@@ -7,11 +7,11 @@ import {
 export const useBreadcrumb = () => {
   const route = useRoute()
   const strrStore = useStrrStore()
-  const { getApplicationId, getApplicationNickname, getRegistrationNumber } = storeToRefs(strrStore)
+  const { getApplicationNumber, getApplicationNickname, getRegistrationNumber } = storeToRefs(strrStore)
   const { isExaminer } = useBcrosKeycloak()
   const { t } = useTranslation()
 
-  const { setApplicationId, setApplicationNickname, setRegistrationNumber } = useStrrStore()
+  const { setApplicationNumber, setApplicationNickname, setRegistrationNumber } = useStrrStore()
 
   const NO_BREADCRUMB_ROUTES = [
     RouteNamesE.TERMS_OF_SERVICE,
@@ -22,7 +22,7 @@ export const useBreadcrumb = () => {
 
   // set store values for breadcrumb
   const setupBreadcrumbData = (application: ApplicationI) => {
-    setApplicationId(application?.header.id.toString())
+    setApplicationNumber(application?.header.applicationNumber)
     setApplicationNickname(application?.registration.unitAddress.nickname)
     setRegistrationNumber(application?.header.registrationNumber)
   }
@@ -56,14 +56,14 @@ export const useBreadcrumb = () => {
     switch (currentRouteName) {
       case RouteNamesE.APPLICATION_DETAILS:
         breadcrumbLinks[1] = {
-          label: `${nickname}Application #${getApplicationId.value}`
+          label: `${nickname}Application #${getApplicationNumber.value}`
         }
         break
       case RouteNamesE.APPLICATION_DETAILS_LTSA:
       case RouteNamesE.APPLICATION_DETAILS_AUTO_APPROVAL:
         breadcrumbLinks[1] = {
-          label: `${nickname}Application #${getApplicationId.value}`,
-          to: `/${RouteNamesE.APPLICATION_DETAILS}/${getApplicationId.value}`
+          label: `${nickname}Application #${getApplicationNumber.value}`,
+          to: `/${RouteNamesE.APPLICATION_DETAILS}/${getApplicationNumber.value}`
         }
         breadcrumbLinks[2] = {
           label:

strr-web/composables/useFees.ts

@@ -42,16 +42,17 @@ export const useFees = () => {
   // Wrapper function to get Application fee for Large Platform (>1000 listings)
   const getLargePlatformApplicationFee = () => getPlatformApplicationFee('LG')
 
-  const createInvoiceRecord = (invoiceId: string, applicationId: string) => {
-    axiosInstance.post(`${apiURL}/registrations/${applicationId}/invoice/${invoiceId}/paid`)
+  // TODO: Needs to removed
+  const createInvoiceRecord = (invoiceId: string, applicationNumber: string) => {
+    axiosInstance.post(`${apiURL}/registrations/${applicationNumber}/invoice/${invoiceId}/paid`)
   }
 
-  const handlePaymentRedirect = async (invoiceId: number, applicationId: number) => {
+  const handlePaymentRedirect = async (invoiceId: number, applicationNumber: string) => {
     const paymentUrl = config.public.authWebURL + 'makepayment'
-    const returnUrl = encodeURIComponent(
-      `${window.location.href.replace('create-account', `success/${applicationId}/invoice/${invoiceId}`)}`
-    )
-    const payUrl = `${paymentUrl}/${invoiceId}/${returnUrl}`
+    const currentUrl = window.location.href
+    const successPath = 'success/' + applicationNumber + '/invoice/' + invoiceId
+    const returnUrl = encodeURIComponent(currentUrl.replace('create-account', successPath))
+    const payUrl = paymentUrl + '/' + invoiceId + '/' + returnUrl
     await navigateTo(payUrl, { external: true })
   }
 

strr-web/interfaces/application-i.ts

@@ -8,7 +8,6 @@ import {
 export interface ApplicationHeaderI {
   applicationDateTime: string
   decisionDate: string | null
-  id: number
   applicationNumber: string
   name: string
   paymentAccount: string

strr-web/interfaces/auto-approval-data-i.ts

@@ -1,7 +1,7 @@
 export interface AutoApprovalDataI {
   record: {
     id: number,
-    applicationId: number,
+    applicationNumber: string,
     creationDate: string,
     record: {
       renting?: boolean,

strr-web/interfaces/ltsa-data-i.ts

@@ -1,7 +1,7 @@
 export interface LtsaDataI {
   record: {
     id: number,
-    applicationId: number,
+    applicationNumber: string,
     creationDate: string,
     record: {
       titleStatus: string,

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

@@ -57,10 +57,10 @@ const provisionalRows = ref<{ [key: string]: string }[]>([])
 const { getAutoApproval, getApplication } = useApplications()
 const { setupBreadcrumbData } = useBreadcrumb()
 
-const applicationId = route.params.id.toString()
+const applicationNumber = route.params.id.toString()
 
-const application = await getApplication(applicationId)
-const data: AutoApprovalDataI[] = await getAutoApproval(applicationId) || {} as AutoApprovalDataI[]
+const application = await getApplication(applicationNumber)
+const data: AutoApprovalDataI[] = await getAutoApproval(applicationNumber) || {} as AutoApprovalDataI[]
 const applicationDetails: ApplicationDetailsI = application.registration
 
 setupBreadcrumbData(application)
@@ -145,6 +145,6 @@ const headerLabel =
   `${applicationDetails.unitAddress.city} ` +
   `${applicationDetails.unitAddress.province} ` +
   `${applicationDetails.unitAddress.postalCode}` +
-  `, Application #${applicationId}`
+  `, Application #${applicationNumber}`
 
 </script>

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

@@ -2,7 +2,7 @@
   <div data-test-id="application-details">
     <BcrosBanner
       :hide-buttons="!isExaminer"
-      :application-id="isApprovedOrRejected ? '' : applicationId"
+      :application-number="isApprovedOrRejected ? '' : applicationNumber"
       :registration-id="registrationId"
       class="mobile:h-auto"
     >
@@ -11,7 +11,7 @@
           <BcrosTypographyH1
             :text="
               `${applicationDetails?.unitAddress.nickname ?? ''} ${tApplicationDetails('applicationTitle')}
-              #${application?.header.id ?? '-'}`
+              #${application?.header.applicationNumber ?? '-'}`
             "
             class="mobile:text-6 mobile:col-span-7"
             no-spacing
@@ -282,7 +282,7 @@
             </p>
             <a
               class="mobile:mx-2"
-              :href="`/application-details/${applicationId}/ltsa`"
+              :href="`/application-details/${applicationNumber}/ltsa`"
               target="_blank"
               rel="noopener"
               data-test-id="ltsa-details-link"
@@ -296,7 +296,7 @@
             </p>
             <a
               class="mobile:mx-2"
-              :href="`/application-details/${applicationId}/auto-approval`"
+              :href="`/application-details/${applicationNumber}/auto-approval`"
               target="_blank"
               rel="noopener"
               data-test-id="auto-approval-details-link"
@@ -336,7 +336,7 @@ const { getChipFlavour } = useChipFlavour()
 
 const regionNamesInEnglish = new Intl.DisplayNames(['en'], { type: 'region' })
 
-const applicationId = route.params.id.toString()
+const applicationNumber = route.params.id.toString()
 
 const {
   getApplication,
@@ -349,8 +349,8 @@ const {
 } = useBreadcrumb()
 
 const [application, applicationHistory]: [ApplicationI, FilingHistoryEventI[]] = await Promise.all([
-  getApplication(applicationId),
-  getApplicationHistory(applicationId)
+  getApplication(applicationNumber),
+  getApplicationHistory(applicationNumber)
 ])
 
 setupBreadcrumbData(application)
@@ -409,7 +409,7 @@ const displayApplicationStatus = () => {
 }
 
 const downloadDocument = async (supportingDocument: DocumentUploadI) => {
-  const file = await getDocument(applicationId, supportingDocument.fileKey)
+  const file = await getDocument(applicationNumber, supportingDocument.fileKey)
   const link = document.createElement('a')
 
   link.href = URL.createObjectURL(file)

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

@@ -132,14 +132,14 @@ const route = useRoute()
 const { t } = useTranslation()
 const tLtsa = (translationKey: string) => t(`ltsa.${translationKey}`)
 
-const applicationId = route.params.id.toString()
+const applicationNumber = route.params.id.toString()
 
 const { getLtsa, getApplication } = useApplications()
 const { setupBreadcrumbData } = useBreadcrumb()
 
-const application = await getApplication(applicationId)
+const application = await getApplication(applicationNumber)
 const formatDate = (date: Date) => date.toLocaleDateString('en-US')
-const data: LtsaDataI[] = await getLtsa(applicationId) || {} as LtsaDataI[]
+const data: LtsaDataI[] = await getLtsa(applicationNumber) || {} as LtsaDataI[]
 const applicationDetails: ApplicationDetailsI = application.registration
 
 setupBreadcrumbData(application)
@@ -176,6 +176,6 @@ const headerLabel =
   `${applicationDetails.unitAddress.city} ` +
   `${applicationDetails.unitAddress.province} ` +
   `${applicationDetails.unitAddress.postalCode}` +
-  `, Application #${applicationId}`
+  `, Application #${applicationNumber}`
 
 </script>