Strata - UI: Strata dashboard list

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

@@ -1,5 +1,9 @@
 /* eslint-disable max-len */
 export default {
+  badge: {
+    basicAccount: 'BASIC ACCOUNT',
+    inactiveAccount: 'INACTIVE ACCOUNT'
+  },
   btn: {
     getStarted: 'Get Started',
     goHome: 'Go Home',

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

@@ -1,9 +1,5 @@
 /* eslint-disable max-len */
 export default {
-  badge: {
-    basicAccount: 'BASIC ACCOUNT',
-    inactiveAccount: 'INACTIVE ACCOUNT'
-  },
   feeSummary: {
     itemLabels: {
       PLATREG_SM: 'Platform Application Fee',

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

@@ -1,3 +1,14 @@
 export default defineAppConfig({
+  strrBaseLayer: {
+    page: {
+      login: {
+        redirectPath: '/auth/account/choose-existing'
+        // options: { // allow all options?
+        //   createAccount: false,
+        //   idps: () => ['bceid', 'bcsc'] // function required to overwrite default value, will merge if no function
+        // }
+      }
+    }
+  },
   ui: {}
 })

strr-strata-web/app/composables/useStrataModals.ts

@@ -0,0 +1,24 @@
+// https://ui.nuxt.com/components/modal#control-programmatically
+import { ModalBase } from '#components'
+
+export const useStrataModals = () => {
+  const modal = useModal()
+  const { t } = useI18n()
+
+  function openhelpRegisteringStrataModal () {
+    modal.open(ModalBase, {
+      title: t('modal.helpRegisteringStrata.title'),
+      content: t('modal.helpRegisteringStrata.content'),
+      actions: [{ label: t('btn.close'), handler: () => close() }]
+    })
+  }
+
+  function close () {
+    modal.close()
+  }
+
+  return {
+    openhelpRegisteringStrataModal,
+    close
+  }
+}

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

@@ -70,5 +70,35 @@ export default {
         site: 'Strata Hotel Brand Website | Strata Hotel Brand {count} Website'
       }
     }
+  },
+  btn: {
+    addStrataHotel: 'Add a Strata Hotel',
+    view: 'View'
+  },
+  label: {
+    hotelName: 'Hotel Name',
+    expiryDate: 'Expiry Date',
+    application: 'Application',
+    registration: 'Registration'
+  },
+  modal: {
+    helpRegisteringStrata: {
+      triggerBtn: 'Help with registering and managing short-term rentals',
+      title: 'Short Term Rental Help',
+      content: 'Help Text Here'
+    }
+  },
+  table: {
+    strataHotelList: {
+      title: '{boldStart}My Strata Hotel List{boldEnd} ({count})',
+      emptyText: "You don't have any strata hotels yet. Add a strata hotel above."
+    }
+  },
+  page: {
+    dashboardList: {
+      title: 'Dashboard - My Short Term Rental Registry',
+      h1: 'My Short Term Rental Registry',
+      subtitle: 'Register and keep short-term rental unit information up to date.'
+    }
   }
 }

strr-strata-web/app/middleware/require-account.ts

@@ -0,0 +1,8 @@
+export default defineNuxtRouteMiddleware((to) => {
+  const accountStore = useConnectAccountStore()
+  const localePath = useLocalePath()
+
+  if (!accountStore.currentAccount.id) {
+    return navigateTo({ path: localePath('/auth/account/choose-existing'), query: { return: to.fullPath } })
+  }
+})

strr-strata-web/app/pages/application.vue

@@ -174,7 +174,7 @@ useHead({
 
 definePageMeta({
   layout: 'connect-form',
-  middleware: ['auth'],
+  middleware: ['auth', 'require-account'],
   path: '/strata-hotel/application'
 })
 

strr-strata-web/app/pages/auth/account/choose-existing.vue

@@ -0,0 +1,146 @@
+<script setup lang="ts">
+// import { isoCountriesList } from '~/utils/isoCountriesList'
+const localePath = useLocalePath()
+const { t } = useI18n()
+const isSmallScreen = useMediaQuery('(max-width: 640px)')
+const strrModal = useStrrModals()
+const accountStore = useConnectAccountStore()
+
+useHead({
+  title: t('strr.title.chooseAccount')
+})
+
+definePageMeta({
+  middleware: ['auth', 'check-tos']
+})
+
+function handleAccountSwitch (id: string) {
+  const route = useRoute()
+  accountStore.switchCurrentAccount(id)
+
+  if (route.query.return) {
+    return navigateTo(route.query.return as string)
+  } else {
+    return navigateTo(localePath('/strata-hotel/dashboard'))
+  }
+}
+</script>
+<template>
+  <div class="space-y-8 py-8 sm:py-10">
+    <ConnectTypographyH1 :text="$t('label.selectAccount')" />
+
+    <p>What subtitle/text should go here?</p>
+    <!-- <p>{{ $t('strr.text.selectAccountForStrr') }}</p> -->
+
+    <UAlert
+      color="yellow"
+      icon="i-mdi-alert"
+      :close-button="null"
+      variant="subtle"
+      :ui="{
+        inner: 'pt-0',
+      }"
+    >
+      <template #description>
+        <span class="text-gray-900">Some warning here maybe</span>
+        <!-- eslint-disable-next-line -->
+        <!-- <ConnectI18nBold class="text-bcGovColor-darkGray" translation-path="strr.text.onlyPremiumAccountWarning" /> -->
+      </template>
+    </UAlert>
+
+    <ConnectTypographyH2
+      :text="$t('label.yourExistingAccounts', { count: accountStore.userAccounts.length })"
+    />
+
+    <section
+      :aria-label="$t('label.yourExistingAccounts', { count: accountStore.userAccounts.length })"
+      class="max-h-96 w-full overflow-y-auto rounded bg-white px-8 shadow"
+    >
+      <div
+        v-if="accountStore.userAccounts.length === 0"
+        class="flex h-36 flex-col items-center justify-center gap-4 text-center sm:h-48"
+      >
+        <UIcon name="i-mdi-database" class="size-6" />
+        <span>{{ $t('text.noAccountsFound') }}</span>
+      </div>
+
+      <ul
+        v-else
+        class="flex flex-col divide-y"
+      >
+        <li
+          v-for="account in accountStore.userAccounts"
+          :key="account.id"
+          class="flex flex-col items-start justify-between gap-4 py-8 sm:flex-row sm:items-center"
+        >
+          <div
+            class="flex flex-row items-center gap-4 sm:gap-6"
+            :class="(account.accountStatus !== AccountStatus.ACTIVE)
+              ? 'opacity-50' : ''"
+          >
+            <UAvatar
+              :alt="account.label[0]"
+              :ui="{
+                background: 'bg-blue-300 dark:bg-[#E0E7ED]',
+                text: 'font-semibold leading-none text-white dark:text-bcGovColor-darkGray truncate',
+                placeholder: 'font-semibold leading-none text-white truncate dark:text-bcGovColor-darkGray text-xl',
+                rounded: 'rounded-sm'
+              }"
+            />
+            <div class="flex w-full flex-col text-left">
+              <span class="text-lg font-semibold text-bcGovColor-darkGray">
+                {{ account.label }}
+              </span>
+              <!-- TODO: Add mailing address ? -->
+              <!-- <span
+                v-if="Array.isArray(account.contacts) && account.contacts.length !== 0 &&
+                 'street' in account.contacts[0]"
+                :id="`account-address-${account.id}`"
+                class="text-bcGovColor-midGray dark:text-gray-300"
+              >
+                {{ account.contacts[0].street }},
+                {{ account.contacts[0].city }},
+                {{ account.contacts[0].region }}
+                {{ account.contacts[0].postalCode }},
+                {{ isoCountriesList.find((country: SbcCountry) => country.alpha_2 ===
+                 account.contacts[0].country)?.name || account.contacts[0].country }}
+              </span> -->
+            </div>
+          </div>
+          <div class="flex w-full flex-col gap-4 sm:w-fit sm:flex-row">
+            <div class="my-auto flex gap-2">
+              <UBadge
+                v-if="account.accountStatus !== AccountStatus.ACTIVE"
+                :label="$t('badge.inactiveAccount')"
+                class="bg-[#fff7e3] px-3 text-center font-bold text-bcGovColor-midGray"
+              />
+            </div>
+
+            <UButton
+              :label="$t('btn.useThisAccount.main')"
+              :aria-label="$t('btn.useThisAccount.aria', { name: account.label })"
+              :icon="'i-mdi-chevron-right'"
+              trailing
+              size="bcGov"
+              :block="isSmallScreen"
+              :disabled="account.accountStatus !== AccountStatus.ACTIVE"
+              data-testid="choose-existing-account-button"
+              @click="handleAccountSwitch(account.id)"
+            />
+          </div>
+        </li>
+      </ul>
+    </section>
+    <div class="flex justify-center">
+      <UButton
+        variant="outline"
+        size="bcGov"
+        :label="$t('btn.createNewAccount')"
+        icon="i-mdi-chevron-right"
+        trailing
+        :block="isSmallScreen"
+        @click="strrModal.openCreateAccountModal()"
+      />
+    </div>
+  </div>
+</template>

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

@@ -68,7 +68,7 @@ useHead({
 
 definePageMeta({
   layout: 'connect-dashboard',
-  middleware: ['auth']
+  middleware: ['auth', 'require-account']
 })
 
 setBreadcrumbs([