@sbc-connect/nuxt-base 0.1.2 → 0.1.4

package/app/components/Connect/Slideover/WhatsNew.vue

@@ -0,0 +1,61 @@
+<script setup lang="ts">
+const { $sanitize } = useNuxtApp()
+
+defineProps<{
+  items: ConnectWhatsNewItem[]
+}>()
+</script>
+
+<template>
+  <USlideover
+    :title="$t('connect.label.whatsNewSlideover')"
+    :description="$t('connect.text.whatsNewSlideoverDescription')"
+    :overlay="false"
+    :close="{
+      color: 'neutral',
+      variant: 'ghost',
+      class: 'cursor-pointer hover:bg-gray-100/50 focus-visible:bg-transparent focus-visible:ring-2 rounded-full',
+    }"
+    :ui="{
+      header: 'bg-brandLight',
+      title: 'text-brandDark',
+      body: 'flex-1 overflow-y-auto p-0 sm:p-0',
+      description: 'sr-only',
+    }"
+  >
+    <template #body>
+      <div class="overflow-y-auto text-neutral">
+        <div class="flex-1">
+          <ol v-if="items.length">
+            <li
+              v-for="item, i in items"
+              :key="i"
+              class="flex flex-col border-b border-gray-500 p-4 last:border-0"
+            >
+              <h3 class="text-lg font-bold">
+                {{ item.title }}
+              </h3>
+              <time class="text-sm">{{ item.date }}</time>
+              <!-- eslint-disable vue/no-v-html -->
+              <div
+                class="pt-3 vhtml"
+                v-html="$sanitize(item.description)"
+              />
+            </li>
+          </ol>
+          <div v-else class="flex justify-center py-10">
+            <span>{{ $t('connect.text.whatsNewSlideoverEmpty') }}</span>
+          </div>
+        </div>
+      </div>
+    </template>
+  </USlideover>
+</template>
+
+<!-- must style globally for vhtml style to work  -->
+<style>
+.vhtml a {
+  color: var(--ui-markBlue);
+  text-decoration: underline;
+}
+</style>

package/app/components/Connect/SystemBanner.vue

@@ -0,0 +1,50 @@
+<script setup lang="ts">
+const ld = useConnectLaunchDarkly()
+const { $sanitize } = useNuxtApp()
+
+defineProps({
+  dismissible: { type: Boolean, default: false },
+  icon: { type: String, default: 'i-mdi-information' }
+})
+
+const close = ref(false)
+const message = ref('')
+onMounted(async () => {
+  message.value = $sanitize(await ld.getStoredFlag('banner-text', '', 'await'))
+})
+</script>
+
+<template>
+  <div class="bg-brandLight px-2">
+    <UAlert
+      v-show="!!message && !close"
+      class="py-0"
+      :description="message"
+      :close="dismissible"
+      close-icon="i-mdi-close"
+      :ui="{
+        root: 'rounded-none bg-brandLight p-0 app-inner-container',
+        wrapper: 'bg-brandLight',
+        close: 'mt-2 text-neutralDark',
+      }"
+      @update:open="close = true"
+    >
+      <!-- dismissible ? { class: 'pr-2 text-neutralDark' } : null -->
+      <template #description>
+        <div class="flex gap-2 items-center py-2">
+          <UIcon class="size-7 shrink-0 text-neutralDark self-start" :name="icon" />
+          <!-- eslint-disable vue/no-v-html tailwindcss/no-custom-classname -->
+          <p class="vhtml text-neutralDark" v-html="message" />
+        </div>
+      </template>
+    </UAlert>
+  </div>
+</template>
+
+<!-- must style globally for vhtml style to work  -->
+<style>
+.vhtml > a {
+  color: var(--ui-neutralDark);
+  text-decoration: underline;
+}
+</style>

package/app/components/HelloWorld/Index.vue

@@ -7,8 +7,8 @@ const { myLayer } = useAppConfig()
     Should have bg-primary
     <h1>Hello World!</h1>
     <pre>{{ myLayer }}</pre>
-    <p class="text-bcGovGray-900">
-      Hello World text base should be bcGovGray-900
+    <p class="text-gray-900">
+      Hello World text base should be gray-900
     </p>
   </div>
 </template>

package/app/composables/useConnectLaunchDarkly.ts

@@ -0,0 +1,177 @@
+import { initialize } from 'launchdarkly-js-client-sdk'
+import type { LDClient, LDFlagSet, LDOptions, LDContext } from 'launchdarkly-js-client-sdk'
+
+// state
+// Defined outside of composable, so they are created only once and shared
+const ldClient = shallowRef<LDClient | null>(null)
+const ldFlagSet = shallowRef<LDFlagSet>({})
+const ldInitialized = ref(false)
+const isInitializing = ref(false)
+
+/**
+ * Initializes the LaunchDarkly client with an anonymous context.
+*/
+function init(): void {
+  const rtc = useRuntimeConfig().public
+
+  // Prevent re-initialization
+  if (ldInitialized.value || isInitializing.value) {
+    return
+  }
+  // Prevent initialization if missing client ID
+  if (!rtc.ldClientId) {
+    console.error('LaunchDarkly: ldClientId is not configured.')
+    return
+  }
+
+  isInitializing.value = true
+
+  const ldContext: LDContext = {
+    kind: 'user',
+    key: 'anonymous',
+    anonymous: true,
+    appSource: rtc.appName
+  }
+
+  const options: LDOptions = {
+    streaming: false,
+    useReport: false,
+    diagnosticOptOut: true
+  }
+
+  try {
+    ldClient.value = initialize(rtc.ldClientId, ldContext, options)
+
+    ldClient.value.on('initialized', () => {
+      ldFlagSet.value = ldClient.value?.allFlags() || {}
+      ldInitialized.value = true
+      isInitializing.value = false
+      console.info('LaunchDarkly: Anonymous initialization complete.')
+    })
+
+    ldClient.value.on('error', (error) => {
+      console.error('LaunchDarkly: Initialization error.', error)
+      isInitializing.value = false
+    })
+  } catch (error) {
+    console.error('LaunchDarkly: Failed to initialize.', error)
+    isInitializing.value = false
+  }
+}
+
+/**
+ * Composable for the LaunchDarkly service.
+*/
+export const useConnectLaunchDarkly = () => {
+  // initialize only once
+  if (!ldInitialized.value && !isInitializing.value && import.meta.client) {
+    init()
+  }
+
+  /**
+   * Returns a flag's value. Can operate in two modes.
+   * @param name The name of the feature flag.
+   * @param defaultValue The value to use until the flag is loaded.
+   * @param mode - 'reactive' (default) returns a ref that updates automatically.
+   * 'await' returns a promise that resolves when the client is ready.
+   * @returns A readonly ref or a promise resolving to the flag's value.
+   */
+  function getFeatureFlag<T>(
+    name: string,
+    defaultValue: T,
+    mode: 'await'
+  ): Promise<T>
+  function getFeatureFlag<T>(
+    name: string,
+    defaultValue?: T,
+    mode?: 'reactive'
+  ): Readonly<Ref<T>>
+  function getFeatureFlag<T>(
+    name: string,
+    defaultValue: T,
+    mode: 'reactive' | 'await' = 'reactive'
+  ): Readonly<Ref<T>> | Promise<T> {
+    if (mode === 'await') {
+      if (!ldClient.value) {
+        return Promise.resolve(defaultValue)
+      }
+      return ldClient.value.waitUntilReady()
+        .then(() => ldClient.value ? ldClient.value.variation(name, defaultValue) : defaultValue)
+        .catch((error) => {
+          console.error(`LaunchDarkly: Error waiting for client while getting flag "${name}".`, error)
+          return defaultValue
+        })
+    }
+
+    // reactive mode
+    return readonly(computed(() => {
+      if (!ldClient.value || !ldInitialized.value) {
+        return defaultValue
+      }
+      return ldClient.value.variation(name, defaultValue)
+    }))
+  }
+
+  /**
+   * Returns a flag's value from the locally stored flag set. Can operate in two modes.
+   * @param name The name of the feature flag.
+   * @param defaultValue The value to use until the flag is loaded.
+   * @param mode - 'reactive' (default) returns a ref that updates automatically.
+   * 'await' returns a promise that resolves when the client is ready.
+   * @returns A readonly ref or a promise resolving to the flag's value.
+   */
+  async function getStoredFlag<T>(name: string, defaultValue: T, mode: 'await'): Promise<T>
+  function getStoredFlag<T>(name: string, defaultValue?: T, mode?: 'reactive'): Readonly<Ref<T>>
+  function getStoredFlag<T>(
+    name: string,
+    defaultValue: T,
+    mode: 'reactive' | 'await' = 'reactive'
+  ): Readonly<Ref<T>> | Promise<T> {
+    if (mode === 'await') {
+      if (!ldClient.value) {
+        return Promise.resolve(defaultValue)
+      }
+      return ldClient.value.waitUntilReady()
+        .then(() => ldFlagSet.value[name] ?? defaultValue)
+        .catch((error) => {
+          console.error(`LaunchDarkly: Error waiting for client while getting stored flag "${name}".`, error)
+          return defaultValue
+        })
+    }
+
+    // reactive mode
+    return readonly(computed(() => {
+      if (!ldInitialized.value) {
+        return defaultValue
+      }
+      return ldFlagSet.value[name] ?? defaultValue
+    }))
+  }
+
+  // TODO: or do we do this and then everytime the fn is called its required to use await?
+  // TODO: returning the computed means we dont need to add LD to middleware
+  // async function getStoredFlag(name: string): Promise<unknown> {
+  //   await ldClient.value?.waitUntilReady()
+  //   return ldFlagSet.value[name]
+  // }
+
+  /**
+   * Resets the LaunchDarkly state and closes the client connection.
+   */
+  const $reset = () => {
+    ldInitialized.value = false
+    isInitializing.value = false
+    ldClient.value?.close()
+    ldClient.value = null
+    ldFlagSet.value = {}
+  }
+
+  return {
+    getFeatureFlag,
+    getStoredFlag,
+    ldInitialized: readonly(ldInitialized),
+    ldFlagSet: readonly(ldFlagSet),
+    ldClient: readonly(ldClient),
+    $reset
+  }
+}

package/app/error.vue

@@ -0,0 +1,53 @@
+<script setup lang="ts">
+import type { NuxtError } from '#app'
+
+const { t } = useI18n()
+const localePath = useLocalePath()
+
+const props = defineProps({
+  error: { type: Object as () => NuxtError, default: undefined }
+})
+
+// TODO: update with other error codes?
+const errorKey: string | number = props.error?.statusCode === 404 ? 404 : 'unknown'
+
+// cant use definePageMeta in error.vue
+useRoute().meta.hideBreadcrumbs = true
+
+useHead({
+  title: errorKey === 404 ? t('connect.page.error.404.title') : t('connect.page.error.unknown.title')
+})
+
+const errorObj = {
+  name: props.error?.name || '',
+  cause: props.error?.cause || '',
+  message: props.error?.message || '',
+  statusCode: props.error?.statusCode || '',
+  statusMessage: props.error?.statusMessage || '',
+  stack: props.error?.stack || '',
+  data: props.error?.data || ''
+}
+
+onMounted(() => {
+  console.error('Application Error: ', errorObj)
+})
+</script>
+
+<template>
+  <UApp :toaster="{ position: 'bottom-center' }">
+    <NuxtLayout name="connect-base">
+      <div class="m-auto flex flex-col items-center gap-4 h-full justify-center">
+        <h1>
+          {{ $t(`connect.page.error.${errorKey}.h1`) }}
+        </h1>
+        <p>{{ $t(`connect.page.error.${errorKey}.content`) }}</p>
+        <UButton
+          :label="$t('connect.label.goHome')"
+          icon="i-mdi-home"
+          size="xl"
+          :to="localePath('/')"
+        />
+      </div>
+    </NuxtLayout>
+  </UApp>
+</template>

package/app/interfaces/connect-breadcrumb.ts

@@ -0,0 +1,5 @@
+import type { BreadcrumbItem } from '#ui/types'
+
+export interface ConnectBreadcrumb extends BreadcrumbItem {
+  appendAccountId?: boolean
+}

package/app/interfaces/connect-whatsnew.ts

@@ -0,0 +1,14 @@
+export interface ConnectWhatsNewItem {
+  app: string
+  date: string
+  description: string
+  id: number
+  priority: boolean
+  read: boolean
+  title: string
+}
+
+export interface ConnectWhatsNewState {
+  viewed: boolean
+  items: ConnectWhatsNewItem[]
+}

package/app/layouts/{default.vue → ConnectBase.vue}

@@ -1,5 +1,8 @@
 <template>
   <div class="app-container">
+    <ConnectHeader />
+    <ConnectSystemBanner />
+    <ConnectBreadcrumb />
     <div class="app-inner-container app-body">
       <div class="flex flex-col lg:flex-row lg:gap-6 grow">
         <div class="grow max-w-full overflow-hidden">
@@ -7,5 +10,6 @@
         </div>
       </div>
     </div>
+    <ConnectFooter />
   </div>
 </template>

package/app/plugins/launchdarkly.client.ts

@@ -0,0 +1,9 @@
+// import { LDPlugin } from 'launchdarkly-vue-client-sdk'
+
+// export default defineNuxtPlugin({
+//   name: 'connect-launchdarkly-plugin',
+//   parallel: true,
+//   setup(nuxtApp) {
+//     nuxtApp.vueApp.use(LDPlugin, { deferInitialization: true })
+//   }
+// })

package/app/plugins/sanitize.client.ts

@@ -0,0 +1,13 @@
+import DOMPurify from 'dompurify'
+
+export default defineNuxtPlugin({
+  name: 'connect-sanitize-plugin',
+  parallel: true,
+  setup() {
+    return {
+      provide: {
+        sanitize: DOMPurify.sanitize
+      }
+    }
+  }
+})

package/app/plugins/whats-new.client.ts

@@ -0,0 +1,45 @@
+import { useStorage } from '@vueuse/core'
+import isEqual from 'lodash-es/isEqual'
+
+export default defineNuxtPlugin({
+  name: 'connect-whats-new-plugin',
+  parallel: true,
+  setup(nuxtApp) {
+    // exit early if whats new === false
+    const whatsNew = useAppConfig().connect.header.whatsNew
+    if (!whatsNew) {
+      return
+    }
+    const rtc = useRuntimeConfig().public
+    const url = rtc.statusApiUrl + rtc.statusApiVersion
+
+    // load whats new only once when app mounts
+    nuxtApp.hook('app:mounted', async () => {
+    // set default localStorage state
+      const state = useStorage<ConnectWhatsNewState>(
+        'connect-whats-new', // storage key
+        { viewed: false, items: [] }, // default value
+        localStorage, // could change this to sessionStorage
+        { mergeDefaults: true } // merge anything already in localStorage with default value
+      )
+
+      try {
+        // fetch items
+        const res = await $fetch<ConnectWhatsNewItem[]>(`${url}/whatsnew`, {
+          parseResponse: JSON.parse, // required to parse JSON correctly
+          headers: {
+            'App-Name': rtc.appName
+          }
+        })
+
+        // only update value if new items exist
+        if (!isEqual(state.value.items, res) && res.length > 0) {
+          state.value.items = res
+          state.value.viewed = false
+        }
+      } catch {
+      // silently handle errors
+      }
+    })
+  }
+})

package/app/spa-loading-template.html

@@ -0,0 +1,39 @@
+<div class="loader"></div>
+<style>
+.loader {
+  display: block;
+  position: fixed;
+  z-index: 1031;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 50px;
+  height: 50px;
+  box-sizing: border-box;
+  border: solid 5px transparent;
+  border-top-color: #1669bb;
+  border-left-color: #1669bb;
+  border-bottom-color: #efefef;
+  border-right-color: #efefef;
+  border-radius: 50%;
+  -webkit-animation: loader 400ms linear infinite;
+  animation: loader 400ms linear infinite;
+}
+
+@-webkit-keyframes loader {
+  0% {
+    -webkit-transform: translate(-50%, -50%) rotate(0deg);
+  }
+  100% {
+    -webkit-transform: translate(-50%, -50%) rotate(360deg);
+  }
+}
+@keyframes loader {
+  0% {
+    transform: translate(-50%, -50%) rotate(0deg);
+  }
+  100% {
+    transform: translate(-50%, -50%) rotate(360deg);
+  }
+}
+</style>

package/app/utils/appendUrlParam.ts

@@ -0,0 +1,4 @@
+export function appendUrlParam(url: string, key: string, value: string | number) {
+  const separator = url.includes('?') ? '&' : '?'
+  return `${url}${separator}${key}=${value}`
+}

package/i18n/locales/en-CA.ts

@@ -0,0 +1,63 @@
+export default {
+  /* Ordering should be alphabetical unless otherwise specified */
+  connect: {
+    breadcrumb: {
+      /* Only include breadcrumb values that extended apps may overwrite */
+      arialabel: 'Breadcrumb',
+      default: 'Service BC Connect'
+    },
+    footer: {
+      /* Only include footer values that extended apps may overwrite */
+      navLabel: 'Useful Links' // <nav> aria-label
+    },
+    header: {
+      /* Only include header values that extended apps may overwrite */
+      homeLink: 'Home', // aria-label
+      navLabel: 'Main Navigation', // <nav> aria-label
+      title: 'Service BC Connect'
+    },
+    label: {
+      accessibility: 'Accessibility',
+      appVersion: 'App Version',
+      bcApp: 'A BC Online Application',
+      bcGovLogo: 'Government of British Columbia Logo',
+      copyright: 'Copyright',
+      disclaimer: 'Disclaimer',
+      fees: 'Fees',
+      goBack: 'Go Back',
+      goHome: 'Go Home',
+      home: 'Home',
+      localeSelect: 'Select a Language, current language: English',
+      privacy: 'Privacy',
+      releaseNotes: 'Release Notes',
+      whatsNew: "What's New",
+      whatsNewAria: "What's New, {count} unread",
+      whatsNewSlideover: "What's New at BC Registries"
+    },
+    page: {
+      error: {
+        404: {
+          title: 'Page Not Found - Service BC Connect',
+          h1: '404 Page Not Found',
+          content: 'This page could not be found or does not exist.'
+        },
+        unknown: {
+          title: 'Unknown Error - Service BC Connect',
+          h1: 'Unknown Error',
+          content: 'An unknown error occured, please refresh the page or try again later.'
+        }
+      }
+    },
+    text: {
+      whatsNewSlideoverDescription: ' ',
+      whatsNewSlideoverEmpty: 'No new items.'
+    }
+  },
+  test: {
+    i18nBold: {
+      strong: 'This should have {boldStart} bold {boldEnd} text',
+      strongWithProps: 'This should have {boldStart} bold {boldEnd} text and allow a {prop}',
+      italic: 'Italic test {italicStart} goes here {italicEnd}.'
+    }
+  }
+}

package/i18n/locales/fr-CA.ts

@@ -0,0 +1,91 @@
+/* eslint-disable max-len */
+export default {
+  /* Ordering should be alphabetical unless otherwise specified */
+  connect: {
+    breadcrumb: {
+      /* Only include breadcrumb values that extended apps may overwrite */
+      arialabel: "Fil d'Ariane",
+      default: 'Service Connect CB'
+    },
+    footer: {
+      /* Only include footer values that extended apps may overwrite */
+      navLabel: 'Liens utiles' // <nav> aria-label
+    },
+    header: {
+      /* Only include header values that extended apps may overwrite */
+      homeLink: 'Accueil', // aria-label
+      navLabel: 'Navigation principale', // <nav> aria-label
+      title: 'Service Connect CB'
+    },
+    label: {
+      accessibility: 'Accessibilité',
+      appVersion: "Version de l'Application",
+      bcApp: 'Une application en ligne CB',
+      bcGovLogo: 'Logo du gouvernement de la Colombie-Britannique',
+      copyright: "Droits d'auteur",
+      disclaimer: 'Clause de non-responsabilité',
+      fees: 'Frais',
+      goBack: 'Retour',
+      home: 'Accueil',
+      localeSelect: 'Sélectionnez une langue, langue courante: Français',
+      privacy: 'Confidentialité',
+      releaseNotes: 'Notes de Version'
+    },
+    text: {}
+  },
+  btn: {
+    bcRegHome: 'Accueil des Registres de la CB',
+    createAccount: 'Créer un Compte',
+    editProfile: 'Editer le Profil',
+    logout: 'Se déconnecter',
+    login: 'Se connecter',
+    accountInfo: 'Infos Compte',
+    teamMembers: 'Membres Équipe',
+    transactions: 'Transactions',
+    notifications: {
+      main: 'Notifications',
+      aria: 'Notifications, {count} Nouveau'
+    },
+    accountOptionsMenu: 'Menu Options du Compte',
+    whatsNew: 'Quoi de Neuf',
+    mainMenu: 'Menu principal',
+    goHome: "Retour à l'Accueil"
+  },
+  label: {
+    accountSettings: 'Paramètres Compte',
+    bcRegOLServices: 'Registres et Services en ligne de la CB',
+    switchAccount: 'Changer de Compte',
+    selectLoginMethod: 'Sélectionnez la méthode de connexion',
+    bcsc: 'BC Services Card',
+    bceid: 'BCeID',
+    idir: 'IDIR',
+    whatsNewSlideover: 'Nouveautés aux Registres de la CB'
+  },
+  notifications: {
+    none: 'Aucune Notification',
+    teamMemberApproval: "{count} membre de l'équipe doit être approuvé pour accéder à ce compte. | {count} membres de l'équipe doivent être approuvés pour accéder à ce compte."
+  },
+  ConnectPage: {
+    error: {
+      404: {
+        title: 'Page Introuvable - Service Connect CB',
+        h1: '404 Page Introuvable',
+        content: 'Cette page est introuvable ou n’existe pas.'
+      },
+      unknown: {
+        title: 'Erreur Inconnue - Service Connect CB',
+        h1: 'Erreur Inconnue',
+        content: 'Une erreur inconnue s’est produite, veuillez actualiser la page ou réessayer plus tard.'
+      }
+    }
+  },
+  ConnectModalSessionExpiring: {
+    title: "Session Sur Le Point D'Expirer",
+    content: "Votre session est sur le point d'expirer en raison d'inactivité. Vous serez déconnecté dans {boldStart}0{boldEnd} secondes. Appuyez sur n’importe quelle touche pour continuer votre session. | Votre session est sur le point d'expirer en raison d'inactivité. Vous serez déconnecté dans {boldStart}1{boldEnd} seconde. Appuyez sur n’importe quelle touche pour continuer votre session. | Votre session est sur le point d'expirer en raison d'inactivité. Vous serez déconnecté dans {boldStart}{count}{boldEnd} secondes. Appuyez sur n’importe quelle touche pour continuer votre session.",
+    sessionExpired: 'Session Expirée',
+    continueBtn: {
+      main: 'Continuer la Session',
+      aria: "Votre session est sur le point d'expirer, appuyez sur n'importe quelle touche pour continuer votre session."
+    }
+  }
+}

package/modules/assets/index.ts

@@ -13,12 +13,12 @@ export default defineNuxtModule<ModuleOptions>({
   // Default configuration options of the Nuxt module
   defaults: {},
   async setup(_options, _nuxt) {
-    console.info('setting up assets module')
+    console.info('Setting up assets module')
     const resolver = createResolver(import.meta.url)
 
     _nuxt.options.css.push(resolver.resolve('./runtime/assets/core-tw.css'))
     _nuxt.options.css.push(resolver.resolve('./runtime/assets/core-layout.css'))
-    _nuxt.options.css.push(resolver.resolve('./runtime/assets/core-main.css'))
+    // _nuxt.options.css.push(resolver.resolve('./runtime/assets/core-main.css'))
     await installModule('@nuxt/ui')
   }
 })