Merge pull request #139 from dimak1/feat/breadcrumb

Add Breadcrumb Across the App

strr-web/app.config.ts

@@ -87,6 +87,10 @@ export default defineAppConfig({
         ring: 'before:ring-1 before:ring-gray-700',
         background: 'before:bg-gray-700'
       }
+    },
+    breadcrumb: {
+      label: 'text-white font-normal text-decoration-line',
+      base: 'text-white font-normal hover:text-white'
     }
   }
 })

strr-web/components/Breadcrumb.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+const { getBreadcrumbLinks, isDashboardButtonDisabled, isBreadcrumbVisible, dashboardButtonLink } = useBreadcrumb()
+</script>
+
+<template>
+  <div
+    v-if="isBreadcrumbVisible"
+    class="flex justify-center min-h-[52px] bg-bcGovColor-nonClickable"
+    data-test-id="breadcrumb-trail"
+  >
+    <div class="flex max-w-[1360px] grow px-4 items-center gap-3">
+      <router-link
+        :to="isDashboardButtonDisabled ? '' : dashboardButtonLink"
+        class="flex"
+        :class="{ 'pointer-events-none': isDashboardButtonDisabled }"
+      >
+        <UIcon
+          name="i-mdi-arrow-left-circle"
+          class="size-7"
+          :class="isDashboardButtonDisabled ? 'text-blue-200' : 'text-white'"
+        />
+      </router-link>
+      <UDivider orientation="vertical" class="h-6" />
+      <UBreadcrumb :links="getBreadcrumbLinks" class="flex" />
+    </div>
+  </div>
+</template>

strr-web/composables/useBreadcrumb.ts

@@ -0,0 +1,110 @@
+import {
+  hostBreadcrumbs,
+  examinerBreadcrumbs
+} from '~/page-data/breadcrumbs'
+
+export const useBreadcrumb = () => {
+  const route = useRoute()
+  const strrStore = useStrrStore()
+  const { getApplicationId, getApplicationNickname, getRegistrationNumber } = storeToRefs(strrStore)
+  const { isExaminer } = useBcrosKeycloak()
+  const { t } = useTranslation()
+
+  const { setApplicationId, setApplicationNickname, setRegistrationNumber } = useStrrStore()
+
+  const NO_BREADCRUMB_ROUTES = [
+    RouteNamesE.TERMS_OF_SERVICE,
+    RouteNamesE.FINALIZATION,
+    RouteNamesE.ACCOUNT_SELECT,
+    RouteNamesE.APPLICATION_SUBMITTED
+  ]
+
+  // set store values for breadcrumb
+  const setupBreadcrumbData = (application: ApplicationI) => {
+    setApplicationId(application?.header.id.toString())
+    setApplicationNickname(application?.registration.unitAddress.nickname)
+    setRegistrationNumber(application?.header.registrationNumber)
+  }
+
+  // Remove '-id' suffix and language codes (e.g., '___en') from route names to match RouteNamesE enum values
+  const cleanupRoute = (routeName: string) => {
+    return routeName?.replace(/(-id|___\w{2}$)/g, '') as RouteNamesE
+  }
+
+  /**
+   * Create breadcrumb links for the current route, including dynamic labels based on
+   * application or registration details.
+   *
+   * @returns {BreadcrumbI[]} An array of breadcrumb objects for the current route
+   */
+  const getBreadcrumbLinks = computed((): BreadcrumbI[] => {
+    const routeName = route.name?.toString()
+
+    // cleanup route from locale and id suffix
+    const currentRouteName = cleanupRoute(routeName as RouteNamesE)
+
+    // get nickname or set as empty string
+    const nickname = getApplicationNickname.value ? `${getApplicationNickname.value}, ` : ''
+
+    // set base Breadcrumb based on role
+    const breadcrumbLinks = isExaminer
+      ? [...(examinerBreadcrumbs[currentRouteName] || [])]
+      : [...(hostBreadcrumbs[currentRouteName] || [])]
+
+    // add custom Breadcrumb info based on current route
+    switch (currentRouteName) {
+      case RouteNamesE.APPLICATION_DETAILS:
+        breadcrumbLinks[1] = {
+          label: `${nickname}Application #${getApplicationId.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}`
+        }
+        breadcrumbLinks[2] = {
+          label:
+            currentRouteName === RouteNamesE.APPLICATION_DETAILS_LTSA
+              ? t('ltsa.ltsaDetails')
+              : t('autoApproval.automaticDetails')
+        }
+        break
+      case RouteNamesE.REGISTRATION_DETAILS:
+        breadcrumbLinks[1] = {
+          label: `${nickname}Registration #${getRegistrationNumber.value}`
+        }
+        break
+    }
+
+    return breadcrumbLinks
+  })
+
+  // Disable Dashboard Back Button when already at top route (eg Dashboard route)
+  const isDashboardButtonDisabled = computed((): boolean => {
+    return [RouteNamesE.REGISTRY_DASHBOARD, RouteNamesE.APPLICATION_STATUS].includes(
+      cleanupRoute(route.name?.toString() ?? '')
+    )
+  })
+
+  // Check if breadcrumbs should be visible on certain routes
+  const isBreadcrumbVisible = computed((): boolean =>
+    NO_BREADCRUMB_ROUTES.every(routeName => !route.name?.toString().startsWith(routeName))
+  )
+
+  // Set the back button link to navigate one level up in breadcrumb
+  const dashboardButtonLink = computed(():string => {
+    const breadcrumbLinks = getBreadcrumbLinks.value
+    // return second to last link for one level up
+    return breadcrumbLinks[breadcrumbLinks.length - 2]?.to || ''
+  })
+
+  return {
+    setupBreadcrumbData,
+    getBreadcrumbLinks,
+    isDashboardButtonDisabled,
+    dashboardButtonLink,
+    isBreadcrumbVisible
+  }
+}

strr-web/enums/route-names-e.ts

@@ -0,0 +1,15 @@
+export enum RouteNamesE {
+  CREATE_ACCOUNT = 'create-account',
+  APPLICATION_DETAILS = 'application-details',
+  APPLICATION_STATUS = 'application-status',
+  REGISTRY_DASHBOARD = 'registry-dashboard',
+  REGISTRATION_DETAILS = 'registration-details',
+  APPLICATION_DETAILS_LTSA = 'application-details-ltsa',
+  APPLICATION_DETAILS_AUTO_APPROVAL = 'application-details-auto-approval',
+
+  // No Breadcrumb routes
+  ACCOUNT_SELECT = 'account-select',
+  TERMS_OF_SERVICE = 'terms-of-service',
+  FINALIZATION = 'finalization',
+  APPLICATION_SUBMITTED = 'success'
+}

strr-web/interfaces/breadcrumb-i.ts

@@ -0,0 +1,8 @@
+export interface BreadcrumbI {
+  label: string
+  to?: string
+}
+
+export type BreadcrumbsI = {
+  [key in RouteNamesE]: BreadcrumbI[]
+}

strr-web/lang/en.json

@@ -57,6 +57,7 @@
   "autoApproval": {
     "autoApprovalDetails": "Automatic Approval Details",
     "automaticLogic": "Automatic Approval Logic",
+    "automaticDetails": "Automatic Approval Details",
     "provisionalLogic": "Provisional Approval Logic",
     "renting": "Renting",
     "accommodationSelected": "Accommodation Service Provider Selected",
@@ -175,8 +176,6 @@
       "links": "Helpful Links",
       "status": "View your application status",
       "dashboard": "in your dashboard",
-      "bcrosLink": "Visit your BC Registries Online Services profile page",
-      "update": "to update your profile information",
       "haveAnotherProperty": "Have another rental property?",
       "startNewApplication": "Start a new application"
     },

strr-web/layouts/default.vue

@@ -2,6 +2,7 @@
   <div data-test-id="default-layout">
     <div class="flex justify-between flex-col min-h-screen">
       <BcrosHeader />
+      <Breadcrumb />
       <div class="flex grow justify-center relative">
         <div class="w-[848px] py-[75px] mobile:py-[20px]">
           <NuxtPage />

strr-web/layouts/wide.vue

@@ -2,6 +2,7 @@
   <div data-test-id="default-layout">
     <div class="flex justify-between flex-col min-h-screen">
       <BcrosHeader />
+      <Breadcrumb />
       <div class="flex grow justify-center">
         <div class="grow pt-[75px] mobile:pt-[20px]">
           <NuxtPage />

strr-web/layouts/wideNoSpace.vue

@@ -2,6 +2,7 @@
   <div data-test-id="default-layout">
     <div class="flex justify-between flex-col min-h-screen">
       <BcrosHeader />
+      <Breadcrumb />
       <div class="flex grow justify-center">
         <div class="grow px-4 pt-[75px] mobile:pt-[20px] max-w-[1360px]">
           <NuxtPage />

strr-web/page-data/breadcrumbs.ts

@@ -0,0 +1,65 @@
+import { RouteNamesE } from '~/enums/route-names-e'
+import { BreadcrumbsI } from '~/interfaces/breadcrumb-i'
+
+export const hostDashboardBreadcrumb: Array<BreadcrumbI> = [
+  {
+    label: 'My STR Registry Dashboard'
+  }
+]
+
+export const examinerDashboardBreadcrumb: Array<BreadcrumbI> = [
+  {
+    label: 'My CEU STR Registry Dashboard'
+  }
+]
+
+export const strRegistrationBreadcrumb: Array<BreadcrumbI> = [
+  {
+    label: 'My STR Registry Dashboard',
+    to: '/' + RouteNamesE.APPLICATION_STATUS
+  },
+  {
+    label: 'Short-Term Rental Registration'
+  }
+]
+
+export const applicationDetailsBreadcrumb: Array<BreadcrumbI> = [
+  {
+    label: 'My STR Registry Dashboard',
+    to: '/' + RouteNamesE.APPLICATION_STATUS
+  }
+]
+
+export const examinerApplicationDetailsBreadcrumb: Array<BreadcrumbI> = [
+  {
+    label: 'My CEU STR Registry Dashboard',
+    to: '/' + RouteNamesE.REGISTRY_DASHBOARD
+  }
+]
+
+export const examinerStrRegistrationBreadcrumb: Array<BreadcrumbI> = [
+  {
+    label: 'My CEU STR Registry Dashboard',
+    to: '/' + RouteNamesE.REGISTRY_DASHBOARD
+  },
+  {
+    label: 'Short-Term Rental Registration'
+  }
+]
+
+export const hostBreadcrumbs: Partial<BreadcrumbsI> = {
+  [RouteNamesE.APPLICATION_STATUS]: hostDashboardBreadcrumb,
+  [RouteNamesE.APPLICATION_DETAILS]: applicationDetailsBreadcrumb,
+  [RouteNamesE.CREATE_ACCOUNT]: strRegistrationBreadcrumb,
+  [RouteNamesE.REGISTRATION_DETAILS]: applicationDetailsBreadcrumb
+}
+
+export const examinerBreadcrumbs: Partial<BreadcrumbsI> = {
+  [RouteNamesE.APPLICATION_STATUS]: examinerDashboardBreadcrumb,
+  [RouteNamesE.REGISTRY_DASHBOARD]: examinerDashboardBreadcrumb,
+  [RouteNamesE.APPLICATION_DETAILS]: examinerApplicationDetailsBreadcrumb,
+  [RouteNamesE.APPLICATION_DETAILS_LTSA]: examinerApplicationDetailsBreadcrumb,
+  [RouteNamesE.APPLICATION_DETAILS_AUTO_APPROVAL]: examinerApplicationDetailsBreadcrumb,
+  [RouteNamesE.CREATE_ACCOUNT]: examinerStrRegistrationBreadcrumb,
+  [RouteNamesE.REGISTRATION_DETAILS]: examinerDashboardBreadcrumb
+}

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

@@ -56,13 +56,16 @@ const automaticRows = ref<{ [key: string]: string }[]>([])
 const provisionalRows = ref<{ [key: string]: string }[]>([])
 
 const { getAutoApproval, getApplication } = useApplications()
+const { setupBreadcrumbData } = useBreadcrumb()
 
 const applicationId = route.params.id.toString()
 
 const application = await getApplication(applicationId)
 const data: AutoApprovalDataI[] = await getAutoApproval(applicationId) || {} as AutoApprovalDataI[]
 const applicationDetails: ApplicationDetailsI = application.registration
 
+setupBreadcrumbData(application)
+
 const buildAutomaticRows = (rowsData: AutoApprovalDataI[]) => {
   if (!rowsData.length || !rowsData[0].record) {
     return

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

@@ -230,11 +230,17 @@ const {
   getDocument
 } = useApplications()
 
+const {
+  setupBreadcrumbData
+} = useBreadcrumb()
+
 const [application, applicationHistory]: [ApplicationI, FilingHistoryEventI[]] = await Promise.all([
   getApplication(applicationId),
   getApplicationHistory(applicationId)
 ])
 
+setupBreadcrumbData(application)
+
 const applicationDetails: ApplicationDetailsI = application.registration
 
 // Get Supporting Documents from the Application response

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

@@ -136,12 +136,15 @@ const tLtsa = (translationKey: string) => t(`ltsa.${translationKey}`)
 const applicationId = route.params.id.toString()
 
 const { getLtsa, getApplication } = useApplications()
+const { setupBreadcrumbData } = useBreadcrumb()
 
 const application = await getApplication(applicationId)
 const formatDate = (date: Date) => date.toLocaleDateString('en-US')
 const data: LtsaDataI[] = await getLtsa(applicationId) || {} as LtsaDataI[]
 const applicationDetails: ApplicationDetailsI = application.registration
 
+setupBreadcrumbData(application)
+
 const ownerRows = data.length > 0
   ? [{
       'Given Name': data[0].record.ownershipGroups[0].titleOwners[0].givenName,

strr-web/pages/listing-details/[listingId].vue

@@ -29,10 +29,6 @@
         <!-- eslint-disable-next-line max-len -->
         <a @click="navigateTo('/application-status')">{{ tApplicationConfirm('status') }}</a> {{ tApplicationConfirm('dashboard') }}
       </p>
-      <p class="mb-[24px]">
-        <!-- eslint-disable-next-line max-len -->
-        <a @click="goToAccountInfo">{{ tApplicationConfirm('bcrosLink') }}</a> {{ tApplicationConfirm('update') }}
-      </p>
       <p class="mb-[24px]">
         {{ tApplicationConfirm('haveAnotherProperty') }}
       </p>

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

@@ -232,6 +232,11 @@ const regionNamesInEnglish = new Intl.DisplayNames(['en'], { type: 'region' })
 
 const registrationId = route.params.id.toString()
 
+const {
+  setRegistrationNumber,
+  setApplicationNickname
+} = useStrrStore()
+
 const downloadEventTypes = ['CERTIFICATE_ISSUED']
 
 const {
@@ -282,6 +287,9 @@ const [application, history]: [RegistrationI, FilingHistoryEventI[]] = await Pro
   getRegistrationHistory(registrationId)
 ])
 
+setApplicationNickname(application.unitAddress.nickname)
+setRegistrationNumber(application.registration_number || '')
+
 // Get Supporting Documents from the Application response
 const documents: DocumentUploadI[] = application.documents || []
 

strr-web/pages/success/[id].vue

@@ -29,10 +29,6 @@
         <!-- eslint-disable-next-line max-len -->
         <a @click="navigateTo('/application-status')">{{ tApplicationConfirm('status') }}</a> {{ tApplicationConfirm('dashboard') }}
       </p>
-      <p class="mb-[24px]">
-        <!-- eslint-disable-next-line max-len -->
-        <a @click="goToAccountInfo">{{ tApplicationConfirm('bcrosLink') }}</a> {{ tApplicationConfirm('update') }}
-      </p>
       <p class="mb-[24px]">
         {{ tApplicationConfirm('haveAnotherProperty') }}
       </p>
@@ -53,10 +49,6 @@ const fetchedRegistration = ref()
 const { t } = useTranslation()
 const tApplicationConfirm = (translationKey: string) => t(`createAccount.applicationConfirm.${translationKey}`)
 
-const {
-  goToAccountInfo
-} = useBcrosNavigate()
-
 const id = route.params.id
 
 const apiURL = useRuntimeConfig().public.strrApiURL