UI - account/permit dashboard load data updates (#307)

Signed-off-by: Kial Jinnah <[email protected]>

strr-base-web/app/composables/useStrrApi.ts

@@ -3,7 +3,7 @@ export const useStrrApi = () => {
   const { $strrApi } = useNuxtApp()
 
   const getAccountRegistrations = async <T extends ApiBaseRegistration>(
-    id?: string,
+    id?: number | string,
     type?: ApplicationType
   ) => {
     if (id) {

strr-base-web/app/composables/useStrrBasePermit.ts

@@ -28,34 +28,25 @@ export const useStrrBasePermit = <R extends ApiRegistrationResp, A extends ApiAp
   const showPermitDetails = computed(() => !!registration.value ||
     (!!application.value && !isApplicationStatus([ApplicationStatus.DECLINED, ApplicationStatus.DRAFT])))
 
-  const loadPermitData = async (id?: string) => {
-    if (id) {
-      // check if the id matches a registration under this account
-      registration.value = await getAccountRegistrations<R>(id) as R
-      if (!registration.value) {
-        // No registrations under the account so get by application
-        application.value = await getAccountApplications<A>(id) as A
+  const loadPermitData = async (applicationId?: string, applicationType?: ApplicationType) => {
+    if (applicationId) {
+      // Get specific application
+      application.value = await getAccountApplications<A>(applicationId) as A
+      if (application.value?.header.registrationId) {
+        // Get linked registration if applicable
+        registration.value = await getAccountRegistrations<R>(
+          application.value.header.registrationId) as R
       }
     } else {
-      const applications = await getAccountApplications<A>() as A[]
+      // Get most recent application
+      const applications = await getAccountApplications<A>(undefined, applicationType) as A[]
       if (applications.length) {
-        // set active strata to the most recent application (ordered by api: newest to oldest)
+        // Set active strata to the most recent application (ordered by api: newest to oldest)
         application.value = applications[0]
-        if (isApprovedApplication.value) {
-          // TODO: should be able to get a registration based on the application number and vice versa?
-          // get registrations under this account
-          const registrations = await getAccountRegistrations<R>() as R[]
-          if (
-            registrations.length &&
-            // NOTE: below line is just for ts
-            (registrations[0] && application.value) &&
-            registrations[0].startDate > application.value.header.applicationDateTime
-          ) {
-            // set active platform to the most recent registration
-            registration.value = registrations.sort(
-              // TODO: update once api allows sorting
-              (a, b) => new Date(b.startDate).getTime() - new Date(a.startDate).getTime())[0]
-          }
+        if (application.value?.header.registrationId) {
+          // Get linked registration if applicable
+          registration.value = await getAccountRegistrations<R>(
+            application.value.header.registrationId) as R
         }
       }
     }

strr-base-web/app/enums/registration-status.ts

@@ -0,0 +1,6 @@
+export enum RegistrationStatus {
+  ACTIVE = 'ACTIVE',
+  CANCELLED = 'CANCELLED',
+  EXPIRED = 'EXPIRED',
+  SUSPENDED = 'SUSPENDED'
+}

strr-base-web/app/interfaces/strr-api.ts

@@ -52,7 +52,7 @@ export interface ApiExtraRegistrationDetails {
   registration_number: string
   sbc_account_id: number
   startDate: Date
-  status: 'ACTIVE' | 'CANCELLED' | 'EXPIRED' | 'SUSPENDED',
+  status: RegistrationStatus,
   updatedDate: Date
   user_id: number
 }
@@ -71,6 +71,12 @@ export interface ApplicationHeader {
   paymentStatus: string
   paymentToken: string // invoice id
   status: ApplicationStatus
+  // below will only exist for applications that have a linked registration
+  registrationEndDate?: Date
+  registrationId?: number
+  registrationNumber?: string
+  registrationStartDate?: Date
+  registrationStatus?: RegistrationStatus
 }
 
 export interface ApiRegistrationResp extends ApiBaseRegistration, ApiExtraRegistrationDetails { }

strr-base-web/app/utils/dashboardHelpers.ts

@@ -1,13 +1,43 @@
-export const setApplicationHeaderDetails = (receiptAction?: Function, hostStatus?: string) => {
+export const setHeaderDetails = (
+  status?: string | RegistrationStatus,
+  expiryDate?: string,
+  receiptAction?: Function
+) => {
   // NOTE: even though this function is called within 'setup', useNuxtApp is required for the app context
   const { t } = useNuxtApp().$i18n
   const { details, bottomButtons } = storeToRefs(useConnectDetailsHeaderStore())
 
-  if (hostStatus) {
-    details.value = [{ text: hostStatus, chip: true, chipColour: 'yellow' }]
+  if (status) {
+    const red = [
+      RegistrationStatus.CANCELLED,
+      RegistrationStatus.EXPIRED,
+      RegistrationStatus.SUSPENDED].includes(status as RegistrationStatus)
+
+    const yellow = status !== RegistrationStatus.ACTIVE
+
+    details.value = [{
+      text: status,
+      chip: true,
+      chipColour: red ? 'red' : yellow ? 'yellow' : undefined
+    }]
+  }
+  if (expiryDate) {
+    details.value.push({ text: `${t('label.expiryDate')} - ${expiryDate}` })
   }
   if (receiptAction) {
     bottomButtons.value = [
+      // TODO: add in later
+      // {
+      //   action: () => { console.info('View and Change') },
+      //   label: 'View and Change Platform Information',
+      //   icon: 'i-mdi-file-document-edit-outline'
+      // },
+      // FUTURE: add back in once certificate is built
+      // {
+      //   action: () => { console.info('Certificate') },
+      //   label: 'Certificate',
+      //   icon: 'i-mdi-file-download-outline'
+      // },
       {
         action: receiptAction,
         label: t('word.Receipt'),
@@ -18,43 +48,6 @@ export const setApplicationHeaderDetails = (receiptAction?: Function, hostStatus
   }
 }
 
-export const setRegistrationHeaderDetails = (
-  status: ApplicationStatus,
-  expiryDate?: string,
-  receiptAction?: Function
-) => {
-  // NOTE: even though this function is called within 'setup', useNuxtApp is required for the app context
-  const { t } = useNuxtApp().$i18n
-  const { details, bottomButtons } = storeToRefs(useConnectDetailsHeaderStore())
-
-  details.value = [{ text: status, chip: true }]
-  if (expiryDate) {
-    details.value.push({ text: `${t('label.expiryDate')} - ${expiryDate}` })
-  }
-  bottomButtons.value = [
-    // TODO: determine if this is a valid action / add label to locales
-    // {
-    //   action: () => { console.info('View and Change') },
-    //   label: 'View and Change Platform Information',
-    //   icon: 'i-mdi-file-document-edit-outline'
-    // },
-    // FUTURE: add back in once certificate is built
-    // {
-    //   action: () => { console.info('Certificate') },
-    //   label: 'Certificate',
-    //   icon: 'i-mdi-file-download-outline'
-    // },
-    ...(receiptAction
-      ? [{
-          action: receiptAction,
-          label: t('word.Receipt'),
-          // TODO: find/replace with correct icon
-          icon: 'i-mdi-file-download-outline'
-        }]
-      : [])
-  ]
-}
-
 export const setSideHeaderDetails = (
   business: StrrBusiness,
   registration?: ApiExtraRegistrationDetails,

strr-platform-web/app/locales/en-CA.ts

@@ -56,7 +56,8 @@ export default {
       listingSize: {
         THOUSAND_AND_ABOVE: '1000 or more listings',
         BETWEEN_250_AND_999: '250-999 listings',
-        LESS_THAN_250: 'Less than 250 listings'
+        LESS_THAN_250: 'Less than 250 listings',
+        null: 'No Listings'
       },
       noncomplianceEmail: 'Non-compliance Email',
       registeredOfficeAttorney: 'Registered Office / Attorney',

strr-platform-web/app/pages/platform/dashboard.vue

@@ -46,18 +46,15 @@ onMounted(async () => {
       { text: t(`strr.label.listingSize.${platformDetails.value.listingSize}`) }
     ]
     if (!registration.value) {
-      setApplicationHeaderDetails(
-        isPaidApplication.value ? downloadApplicationReceipt : undefined,
-        application.value?.header.hostStatus)
+      setHeaderDetails(
+        application.value?.header.hostStatus,
+        undefined,
+        isPaidApplication.value ? downloadApplicationReceipt : undefined)
     } else {
-      const registrationDetails = permitDetails.value as ApiExtraRegistrationDetails
-      setRegistrationHeaderDetails(
-        registrationDetails.status as ApplicationStatus,
-        registrationDetails.expiryDate
-          ? dateToStringPacific(registrationDetails.expiryDate, 'MMMM Do, YYYY')
-          : undefined,
-        downloadApplicationReceipt
-      )
+      setHeaderDetails(
+        permitDetails.value.status,
+        permitDetails.value.expiryDate,
+        downloadApplicationReceipt)
     }
     // add common side details
     setSideHeaderDetails(

strr-platform-web/app/stores/platform.ts

@@ -14,7 +14,7 @@ export const useStrrPlatformStore = defineStore('strr/platform', () => {
   } = useStrrBasePermit<PlatformRegistrationResp, PlatformApplicationResp>()
 
   const loadPlatform = async () => {
-    await loadPermitData()
+    await loadPermitData(undefined, ApplicationType.PLATFORM)
     if (application.value) {
       // set completing party info (this data is only in the application)
       completingParty.value = formatPartyUI(application.value.registration.completingParty)

strr-strata-web/app/pages/strata-hotel/dashboard/[registrationId].vue → strr-strata-web/app/pages/strata-hotel/dashboard/[applicationId].vue

@@ -26,8 +26,8 @@ const completingParty = ref<ConnectAccordionItem | undefined>(undefined)
 
 onMounted(async () => {
   loading.value = true
-  const registrationId = route.params.registrationId as string
-  await loadStrata(registrationId)
+  const applicationId = route.params.applicationId as string
+  await loadStrata(applicationId)
   // set header stuff
   if (!permitDetails.value || !showPermitDetails.value) {
     // TODO: probably not ever going to get here? Filing would launch from the other account dashboard?
@@ -48,11 +48,15 @@ onMounted(async () => {
       }
     ]
     if (!registration.value) {
-      setApplicationHeaderDetails(
-        isPaidApplication.value ? downloadApplicationReceipt : undefined,
-        application.value?.header.hostStatus)
+      setHeaderDetails(
+        application.value?.header.hostStatus,
+        undefined,
+        isPaidApplication.value ? downloadApplicationReceipt : undefined)
     } else {
-      setRegistrationHeaderDetails(permitDetails.value.status)
+      setHeaderDetails(
+        permitDetails.value.status,
+        permitDetails.value.expiryDate,
+        downloadApplicationReceipt)
     }
     // strata side details
     setSideHeaderDetails(
@@ -127,7 +131,7 @@ setBreadcrumbs([
       </ConnectDashboardSection>
     </div>
     <div class="space-y-10 sm:w-[300px]">
-      <ConnectDashboardSection v-if="!registration" :title="$t('label.completingParty')" :loading="loading">
+      <ConnectDashboardSection :title="$t('label.completingParty')" :loading="loading">
         <ConnectAccordion v-if="showPermitDetails && completingParty" :items="[completingParty]" />
         <div v-else-if="!showPermitDetails" class="bg-white p-5 opacity-50">
           <p class="text-sm">

strr-strata-web/app/pages/strata-hotel/dashboard/index.vue

@@ -69,8 +69,7 @@ const { data: strataHotelList, status } = await useAsyncData(
 )
 
 async function handleItemSelect (row: any) {
-  const identifier = row.id ?? row.number // id only exists in the registration objects
-  await navigateTo(localePath('/strata-hotel/dashboard/' + identifier))
+  await navigateTo(localePath('/strata-hotel/dashboard/' + row.applicationNumber))
 }
 </script>
 <template>

strr-strata-web/app/stores/strata.ts

@@ -2,7 +2,7 @@ import { formatBusinessDetailsUI, formatStrataDetailsUI } from '~/utils/strata-f
 
 export const useStrrStrataStore = defineStore('strr/strata', () => {
   // TODO: move common pieces of strata and platform to base layer composable
-  const { getAccountApplications, getAccountRegistrations } = useStrrApi()
+  const { getAccountApplications } = useStrrApi()
   const { completingParty, primaryRep, secondaryRep } = storeToRefs(useStrrContactStore())
   const { strataBusiness } = storeToRefs(useStrrStrataBusinessStore())
   const { strataDetails } = storeToRefs(useStrrStrataDetailsStore())
@@ -18,8 +18,8 @@ export const useStrrStrataStore = defineStore('strr/strata', () => {
     downloadApplicationReceipt
   } = useStrrBasePermit<StrataRegistrationResp, StrataApplicationResp>()
 
-  const loadStrata = async (id: string) => {
-    await loadPermitData(id)
+  const loadStrata = async (applicationId: string) => {
+    await loadPermitData(applicationId)
     if (application.value) {
       // set completing party info (this data is only in the application)
       completingParty.value = formatPartyUI(application.value.registration.completingParty)
@@ -37,48 +37,25 @@ export const useStrrStrataStore = defineStore('strr/strata', () => {
   }
 
   const loadStrataHotelList = async () => {
-    const regs = await getAccountRegistrations<StrataRegistrationResp>()
-      .catch((e) => {
-        logFetchError(e, 'Unable to load account registrations')
-        return undefined
-      })
-      .then((response) => {
-        if (response) {
-          return (response as StrataRegistrationResp[]).filter(
-            item => item.registrationType === ApplicationType.STRATA_HOTEL
-          ).map(reg => ({
-            id: reg.id,
-            hotelName: reg.strataHotelDetails.brand.name,
-            number: reg.registration_number,
-            type: t('label.registration'),
-            date: reg.startDate,
-            status: reg.status
-          }))
-        }
-        return []
-      })
-
-    const apps = await getAccountApplications<StrataApplicationResp>()
+    // Load the full list of strata hotel applications
+    return await getAccountApplications<StrataApplicationResp>(undefined, ApplicationType.STRATA_HOTEL)
       .catch((e) => {
         logFetchError(e, 'Unable to load account applications')
         return undefined
       })
       .then((response) => {
         if (response) {
-          return (response as StrataApplicationResp[]).filter(
-            item => item.registration.registrationType === ApplicationType.STRATA_HOTEL
-          ).map(app => ({
+          return (response as StrataApplicationResp[]).map(app => ({
             hotelName: app.registration.strataHotelDetails.brand.name,
-            number: app.header.applicationNumber,
-            type: t('label.application'),
-            date: app.header.applicationDateTime,
-            status: app.header.status
+            number: app.header.registrationNumber || app.header.applicationNumber,
+            type: app.header.registrationNumber ? t('label.registration') : t('label.application'),
+            date: app.header.registrationStartDate || app.header.applicationDateTime,
+            status: app.header.registrationStatus || app.header.hostStatus,
+            applicationNumber: app.header.applicationNumber // always used for view action
           }))
         }
         return []
       })
-
-    return [...apps, ...regs]
   }
 
   return {