Feat: Dashboard Page (#185)

* done dashboard page layout
* add loading state and fix hydration errors
* add i18n and minor fixes

app/app.config.ts

@@ -65,8 +65,12 @@ export default defineAppConfig({
       }
     },
     card: {
+      base: '',
+      background: 'bg-white dark:bg-gray-900',
       ring: 'ring-1 ring-gray-200 dark:ring-gray-300/50',
-      divide: 'divide-y divide-gray-200 dark:divide-gray-300/50'
+      divide: 'divide-y divide-gray-200 dark:divide-gray-300/50',
+      rounded: 'rounded',
+      shadow: 'shadow-md hover:shadow-[1px_1px_6px_0_#868e96] focus-within:shadow-[1px_1px_6px_0_#868e96]'
     },
     checkbox: {
       wrapper: 'flex items-start',
@@ -75,6 +79,7 @@ export default defineAppConfig({
       label: 'text-base text-bcGovColor-midGray font-normal'
     },
     container: {
+      strategy: 'override',
       base: 'mx-auto',
       padding: 'px-4 sm:px-6 lg:px-8',
       constrained: 'max-w-bcGovLg'

app/components/Dashboard/UserProduct.vue

@@ -0,0 +1,48 @@
+<script setup lang="ts">
+const isSmallScreen = useMediaQuery('(max-width: 640px)')
+
+const props = defineProps<{
+  product: Product
+}>()
+
+function goToItem () {
+  return navigateTo(props.product.link, { external: true })
+}
+</script>
+<template>
+  <UCard
+    as="li"
+    :ui="{ base: 'border-l-[3px] border-transparent hover:border-blue-500 focus-within:border-blue-500 cursor-pointer' }"
+    @click="goToItem"
+  >
+    <div class="flex flex-col gap-6 sm:flex-row sm:gap-8">
+      <img
+        v-if="product.image"
+        class="mx-auto h-[183px] w-[244px]"
+        :src="`/${product.image}`"
+      >
+      <div class="flex flex-col justify-between">
+        <div class="space-y-4 pb-4">
+          <a
+            :href="product.link"
+            :aria-describedby="product.text"
+            class="text-2xl font-semibold text-bcGovColor-darkGray no-underline focus:outline-none"
+          >
+            {{ product.title }}
+          </a>
+          <p class="text-lg text-bcGovColor-midGray">
+            {{ product.text }}
+          </p>
+        </div>
+        <UButton
+          tabindex="-1"
+          label="Open"
+          class="pointer-events-none self-start px-5 py-3"
+          trailing
+          :block="isSmallScreen"
+          icon="i-mdi-chevron-right"
+        />
+      </div>
+    </div>
+  </UCard>
+</template>

app/components/Sbc/I18nBold.vue

@@ -6,13 +6,14 @@ const props = defineProps({
 const attrs = useAttrs()
 const { t } = useI18n()
 
-const translationProps = {
-  ...attrs,
-  boldStart: '<strong>',
-  boldEnd: '</strong>'
-}
-
-const textToDisplay = t(props.translationPath, translationProps)
+const textToDisplay = computed(() => {
+  const translationProps = {
+    ...attrs,
+    boldStart: '<strong>',
+    boldEnd: '</strong>'
+  }
+  return t(props.translationPath, translationProps)
+})
 </script>
 <template>
   <!-- eslint-disable-next-line -->

app/components/Sbc/ProductCard.vue

@@ -51,15 +51,16 @@ const hasLinkStyle = 'cursor-pointer transition-transform focus-within:-translat
     @click="goToItem"
   >
     <div class="z-0 relative flex w-[105%] -ml-2 items-center bg-blue-350 px-4 py-3.5 font-semibold tracking-wide text-white lg:px-7 dark:border-b dark:border-gray-300/50 dark:bg-bcGovColor-darkGray">
-      <a
-        v-if="content?.link"
-        :href="resolvePath()"
-        :target="content?.link?.target"
-        class="text-left font-semibold text-white no-underline focus:outline-none"
-        :class="{ 'w-4/5': content?.badge }"
-      >
-        {{ content?.name }}
-      </a>
+      <ClientOnly v-if="content?.link">
+        <a
+          :href="resolvePath()"
+          :target="content?.link?.target"
+          class="text-left font-semibold text-white no-underline focus:outline-none"
+          :class="{ 'w-4/5': content?.badge }"
+        >
+          {{ content?.name }}
+        </a>
+      </ClientOnly>
       <span v-else>{{ content?.name }}</span>
       <span v-if="content?.badge" class="absolute right-2 top-0 rounded-b bg-bcGovColor-navDivider px-2 py-1 text-sm text-blue-600 sm:right-7">{{ content?.badge }}</span>
     </div>

app/composables/useProductInfo.ts

@@ -0,0 +1,121 @@
+export function useProductInfo () {
+  const config = useRuntimeConfig().public
+  const accountStore = useConnectAccountStore()
+  const { t } = useI18n()
+
+  function appendAccountId (url: string): string {
+    return url ? `${url}?accountid=${accountStore.currentAccount.id}` : 'link_not_configured'
+  }
+
+  /**
+    * Returns product info object for specified type.
+  */
+  function getProductInfo (type: ProductCode): Product {
+    switch (type) {
+      case ProductCode.BUSINESS:
+        return {
+          image: 'img/BCRS_dashboard_thumbnail_image.jpg',
+          link: config.myBusinessRegistryDashboard.replace('{accountId}', accountStore.currentAccount.id) || 'link_not_configured',
+          text: t('page.dashboard.products.business.text'),
+          title: t('page.dashboard.products.business.title')
+        } as Product
+      case ProductCode.BUSINESS_SEARCH:
+        return {
+          image: 'img/business_search_product_image.jpg',
+          link: appendAccountId(config.businessSearchUrl),
+          text: t('page.dashboard.products.busSearch.text'),
+          title: t('page.dashboard.products.busSearch.title')
+        } as Product
+      case ProductCode.BCA:
+        return {
+          image: 'img/BCA_dashboard_thumbnail_image.jpg',
+          link: appendAccountId(config.bcaURL),
+          text: t('page.dashboard.products.bca.text'),
+          title: t('page.dashboard.products.bca.title')
+        } as Product
+      case ProductCode.CSO:
+        return {
+          image: 'img/CSO_dashboard_thumbnail_image.jpg',
+          link: appendAccountId(config.csoURL),
+          text: t('page.dashboard.products.cso.text'),
+          title: t('page.dashboard.products.cso.title')
+        } as Product
+      case ProductCode.MHR:
+        return {
+          image: 'img/MHR_dashboard_thumbnail_image.jpg',
+          link: appendAccountId(config.pprDashboard),
+          text: t('page.dashboard.products.mhr.text'),
+          title: t('page.dashboard.products.mhr.title')
+        } as Product
+      case ProductCode.NDS:
+        return {
+          image: 'img/NDS_dashboard_thumbnail_image.jpg',
+          link: appendAccountId(config.ndsUrl),
+          text: t('page.dashboard.products.nds.text'),
+          title: t('page.dashboard.products.nds.title')
+        } as Product
+      case ProductCode.PPR:
+        return {
+          image: 'img/PPR_dashboard_thumbnail_image.jpg',
+          link: appendAccountId(config.pprDashboard),
+          text: t('page.dashboard.products.ppr.text'),
+          title: t('page.dashboard.products.ppr.title')
+        } as Product
+      case ProductCode.RPT:
+        return {
+          image: 'img/RPT_dashboard_thumbnail_image.jpg',
+          link: config.rptURL,
+          text: t('page.dashboard.products.rpt.text'),
+          title: t('page.dashboard.products.rpt.title')
+        } as Product
+      case ProductCode.ESRA:
+        return {
+          image: 'img/ESRA_dashboard_thumbnail_image.jpg',
+          link: appendAccountId(config.siteRegistryURL),
+          text: t('page.dashboard.products.esra.text'),
+          title: t('page.dashboard.products.esra.title')
+        } as Product
+      case ProductCode.VS:
+        return {
+          image: 'img/VS_dashboard_thumbnail_image.jpg',
+          link: appendAccountId(config.willsURL),
+          text: t('page.dashboard.products.vs.text'),
+          title: t('page.dashboard.products.vs.title')
+        } as Product
+      default:
+        return {
+          image: 'placeholder_image',
+          link: 'placeholder_link',
+          text: 'placeholder_text',
+          title: 'placeholder_title'
+        } as Product
+    }
+  }
+
+  /**
+    * Get info for My Asset Registries tile (that replaces MHR and PPR products)
+  */
+  function getMhrPprTileInfo (): Product {
+    return {
+      image: 'img/My_Asset_Registries_dashboard_thumbnail_image.jpg',
+      link: appendAccountId(config.pprDashboard) || 'link_not_configured',
+      text: t('page.dashboard.products.mar.text'),
+      title: t('page.dashboard.products.mar.title')
+    }
+  }
+
+  /**
+    * Check if products array has MHR and PPR
+  */
+  function hasMhrAndPprProducts (products: Array<APIProduct>): boolean {
+    return products
+      .filter(product => product.code === ProductCode.MHR || product.code === ProductCode.PPR)
+      .length === 2
+  }
+
+  return {
+    getProductInfo,
+    getMhrPprTileInfo,
+    hasMhrAndPprProducts
+  }
+}

app/enums/product-code.ts

@@ -0,0 +1,12 @@
+export enum ProductCode {
+  BUSINESS = 'BUSINESS',
+  BUSINESS_SEARCH = 'BUSINESS_SEARCH',
+  CSO = 'CSO',
+  PPR = 'PPR',
+  MHR = 'MHR',
+  RPT = 'RPT',
+  VS = 'VS',
+  BCA = 'BCA',
+  ESRA = 'ESRA',
+  NDS = 'NDS'
+}

app/enums/product-status.ts

@@ -0,0 +1,4 @@
+export enum ProductStatus {
+  ACTIVE = 'ACTIVE',
+  NOT_SUBSCRIBED = 'NOT_SUBSCRIBED'
+}

app/interfaces/product.ts

@@ -0,0 +1,12 @@
+export interface APIProduct {
+  code: ProductCode
+  subscriptionStatus: ProductStatus
+  // more unused vars in api response that we don't use
+}
+
+export interface Product {
+  image: string
+  link: string
+  text: string
+  title: string
+}

app/locales/en-CA.ts

@@ -199,6 +199,69 @@ export default {
           }
         }
       }
+    },
+    dashboard: {
+      title: 'BC Registries and Online Services',
+      h1: 'BC Registries Dashboard',
+      intro: 'Access to your BC Registries account product and services',
+      products: {
+        heading: '{boldStart}My Products and Services{boldEnd} ({count})',
+        business: {
+          text: 'Register or incorporate a business, manage name requests and keep business records up to date.',
+          title: 'My Business Registry'
+        },
+        busSearch: {
+          text: 'Search for businesses registered in B.C. and access business documents.',
+          title: 'Business Search'
+        },
+        bca: {
+          text: 'Generate a BC Assessment report to find real property ownership or location information, obtain property assessment information or obtain residential property inventory details for properties within British Columbia.',
+          title: 'BC Assessment'
+        },
+        cso: {
+          text: 'Make applications or file other court documents, browse daily court listings, and search court file information.',
+          title: 'Court Services Online'
+        },
+        mhr: {
+          text: 'Search for manufactured homes, and search for personal property legal claims on manufactured homes.',
+          title: 'My Manufactured Home Registry'
+        },
+        nds: {
+          text: 'Search for the names and addresses of people associated with businesses in B.C.',
+          title: 'Director Search'
+        },
+        ppr: {
+          text: 'Register or search for legal claims on personal property in British Columbia.',
+          title: 'My Personal Property Registry'
+        },
+        rpt: {
+          text: 'Search property tax records for rural properties or leased crown land in B.C., excluding municipal and Indigenous lands.',
+          title: 'Rural Property Tax Search'
+        },
+        esra: {
+          text: 'Search for B.C. government information on the environmental condition of land.',
+          title: 'Site Registry'
+        },
+        vs: {
+          text: 'File a wills notice or search for an existing wills notice.',
+          title: 'Wills Registry'
+        },
+        mar: {
+          text: 'Search for manufactured homes, and register or search for legal claims on personal property.',
+          title: 'My Asset Registries'
+        }
+      },
+      help: {
+        addProds: {
+          title: 'Add Product and Services',
+          p1: 'To request access to additional products and services, contact the account Administrator of your BC Registries account.'
+        },
+        howToUse: {
+          title: 'Help with How to Use BC Registries Products and Services',
+          p1: 'Learn about the registries and how to use the applications through step-by-step guides, online videos, and downloadable quick guides.',
+          link: 'Go to the Registry Application Help Page'
+        }
+      }
     }
   },
   // components