@sbc-connect/nuxt-auth 0.16.7 → 0.17.0

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @sbc-connect/nuxt-auth
 
+## 0.17.0
+
+### Minor Changes
+
+- [#201](https://github.com/bcgov/connect-nuxt/pull/201) [`0d043ed`](https://github.com/bcgov/connect-nuxt/commit/0d043ed037473ff381e0d3ca17065f11ca3b89d2) Thanks [@sumesh85](https://github.com/sumesh85)! - Account selector: existing-account rows now show the org's mailing address, a payment-method badge, and an NSF/statement-overdue status badge. NSF-suspended accounts are selectable (instead of disabled); clicking one takes the user straight to their account info page instead of into the app.
+  
+  - `ConnectAccount` receives optional `address`, `paymentMethod`, `hasNsfInvoices`, and `hasOverdueInvoices` fields.
+  - `ConnectAccountExistingList`/`ConnectAccountExistingListItem` receives `showAddress`, `showPaymentMethodBadge`, and `showStatusBadge` props, all defaulting to `false` — existing consumers see no change on upgrade unless they opt in. The layer's own `/auth/account/select` page opts in to `showStatusBadge` so it keeps showing the NSF indicator.
+
+- [#203](https://github.com/bcgov/connect-nuxt/pull/203) [`fedf109`](https://github.com/bcgov/connect-nuxt/commit/fedf109afdefa2869325afb9c7a268767c0e3d38) Thanks [@deetz99](https://github.com/deetz99)! - Update dependencies
+
+### Patch Changes
+
+- Updated dependencies [[`fedf109`](https://github.com/bcgov/connect-nuxt/commit/fedf109afdefa2869325afb9c7a268767c0e3d38), [`fedf109`](https://github.com/bcgov/connect-nuxt/commit/fedf109afdefa2869325afb9c7a268767c0e3d38)]:
+  - @sbc-connect/nuxt-base@0.14.0
+  - @sbc-connect/nuxt-forms@0.8.0
+
 ## 0.16.7
 
 ### Patch Changes

package/app/components/Connect/Account/Existing/List/Item.vue

@@ -1,11 +1,51 @@
 <script setup lang="ts">
-defineProps<{
+const {
+  account,
+  showPaymentMethodBadge = false,
+  showStatusBadge = false,
+  showAddress = false
+} = defineProps<{
   account: ConnectAccount
+  showPaymentMethodBadge?: boolean
+  showStatusBadge?: boolean
+  showAddress?: boolean
 }>()
 
-defineEmits<{
+const emit = defineEmits<{
   select: [id: number]
 }>()
+
+// ACTIVE is always selectable. Of the non-active statuses, only NSF_SUSPENDED also stays
+// enabled (it redirects below instead of emitting select) - everything else stays disabled.
+const isNsfSuspended = computed(() => account.accountStatus === AccountStatus.NSF_SUSPENDED)
+const isUnusable = computed(() => account.accountStatus !== AccountStatus.ACTIVE && !isNsfSuspended.value)
+
+function handleSelect() {
+  if (isNsfSuspended.value) {
+    useConnectAccountStore().redirectToAccountInfo(account)
+    return
+  }
+  emit('select', account.id)
+}
+
+const statusBadgeLabel = computed(() => {
+  if (!isNsfSuspended.value) {
+    return undefined
+  }
+  if (account.hasOverdueInvoices) {
+    return 'connect.badge.statementOverdue'
+  }
+  return 'connect.badge.nonSufficientFunds'
+})
+
+const address = computed(() => account.address)
+const addressLine = computed(() => {
+  const addr = address.value
+  if (!addr) {
+    return undefined
+  }
+  return [addr.street, addr.city, addr.region, addr.postalCode, addr.country].filter(Boolean).join(', ')
+})
 </script>
 
 <template>
@@ -13,7 +53,7 @@ defineEmits<{
     <div
       class="flex flex-row items-center gap-4 sm:gap-6"
       :class="{
-        'opacity-50': account.accountStatus !== AccountStatus.ACTIVE,
+        'opacity-50': isUnusable,
       }"
     >
       <UAvatar
@@ -27,13 +67,31 @@ defineEmits<{
         <span class="text-lg font-bold text-neutral-highlighted">
           {{ account.label }}
         </span>
+        <span v-if="showAddress && addressLine" class="text-sm text-neutral">
+          {{ addressLine }}
+        </span>
+        <div class="mt-1 flex flex-wrap gap-2">
+          <UBadge
+            v-if="showPaymentMethodBadge && account.paymentMethod"
+            :label="$t(`connect.badge.paymentMethod.${account.paymentMethod}`)"
+            variant="subtle"
+            color="neutral"
+            class="px-3 text-center font-bold"
+          />
+          <UBadge
+            v-if="showStatusBadge && statusBadgeLabel"
+            :label="$t(statusBadgeLabel)"
+            color="error"
+            class="px-3 text-center font-bold"
+          />
+        </div>
       </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')"
+          v-if="isUnusable"
+          :label="$t('connect.badge.inactiveAccount')"
           class="bg-[#fff7e3] px-3 text-center font-bold text-neutral"
         />
       </div>
@@ -43,11 +101,11 @@ defineEmits<{
         :aria-label="$t('connect.label.useThisAccountAria', { name: account.label })"
         :icon="'i-mdi-chevron-right'"
         trailing
-        :disabled="account.accountStatus !== AccountStatus.ACTIVE"
+        :disabled="isUnusable"
         size="xl"
         data-testid="choose-existing-account-button"
         class="w-full justify-center sm:w-min sm:justify-normal"
-        @click="$emit('select', account.id)"
+        @click="handleSelect"
       />
     </div>
   </li>

package/app/components/Connect/Account/Existing/List/index.vue

@@ -1,6 +1,14 @@
 <script setup lang="ts">
-defineProps<{
+const {
+  accounts,
+  showPaymentMethodBadge = false,
+  showStatusBadge = false,
+  showAddress = false
+} = defineProps<{
   accounts: ConnectAccount[]
+  showPaymentMethodBadge?: boolean
+  showStatusBadge?: boolean
+  showAddress?: boolean
 }>()
 
 defineEmits<{
@@ -23,6 +31,9 @@ defineEmits<{
         v-for="account in accounts"
         :key="account.id"
         :account
+        :show-payment-method-badge="showPaymentMethodBadge"
+        :show-status-badge="showStatusBadge"
+        :show-address="showAddress"
         @select="$emit('select', $event)"
       />
     </ul>

package/app/interfaces/connect-account.ts

@@ -7,6 +7,10 @@ export interface ConnectAccount {
   type: UserSettingsType.ACCOUNT
   urlpath: string
   urlorigin: string
+  address?: ConnectAccountAddress
+  paymentMethod?: string
+  hasNsfInvoices?: string
+  hasOverdueInvoices?: string
 }
 
 export interface ConnectCreateAccount {

package/app/interfaces/connect-user-settings.ts

@@ -7,4 +7,5 @@ export interface ConnectUserSettings {
   accountStatus?: AccountStatus
   additionalLabel?: string
   label?: string
+  address?: ConnectAccountAddress
 }

package/app/pages/auth/account/select.vue

@@ -90,6 +90,7 @@ onBeforeMount(() => {
       <ConnectAccountExistingList
         v-if="showAccountList"
         :accounts="store.userAccounts"
+        :show-status-badge="true"
         @select="selectAndRedirect"
       />
 
@@ -113,7 +114,7 @@ onBeforeMount(() => {
         trailing
         size="xl"
         class="w-full justify-center sm:w-min sm:justify-normal"
-        @click="addNew = true"
+        @click="() => { addNew = true }"
       />
       <UButton
         v-else
@@ -142,7 +143,7 @@ onBeforeMount(() => {
         trailing
         size="xl"
         class="w-full justify-center sm:w-min sm:justify-normal"
-        @click="addNew = false"
+        @click="() => { addNew = false }"
       />
       <UButton
         :label="$t('connect.label.saveAndContinue')"

package/app/plugins/auth-api.ts

@@ -2,7 +2,7 @@ export default defineNuxtPlugin({
   name: 'auth-api',
   order: -20,
   parallel: true,
-  setup(nuxtApp) {
+  setup(nuxtApp): { provide: { authApi: ReturnType<typeof $fetch.create> } } {
     const rtc = nuxtApp.$config.public
     const authApiUrl = rtc.authApiUrl + rtc.authApiVersion
     const appName = rtc.appName

package/app/plugins/connect-auth.client.ts

@@ -5,7 +5,7 @@ export default defineNuxtPlugin({
   name: 'connect-auth',
   order: -20,
   parallel: true,
-  async setup(nuxtApp) {
+  async setup(nuxtApp): Promise<{ provide: { connectAuth: Keycloak } }> {
     const rtc = nuxtApp.$config.public
 
     // define new keycloak

package/app/services/auth/query.ts

@@ -62,7 +62,7 @@ export const useConnectAuthQuery = () => {
   function userSettingsOptions(options?: DefineOptions<ConnectUserSettings[]>) {
     const keycloakGuid = useConnectAuth().authUser.value?.keycloakGuid
     return defineQueryOptions({
-      query: () => $authApi<ConnectUserSettings[]>(`/users/${keycloakGuid}/settings`),
+      query: () => $authApi<ConnectUserSettings[]>(`/users/${keycloakGuid}/settings`, { query: { expand: 'address' } }),
       staleTime: DEFAULT_STALE_TIME,
       enabled: !!keycloakGuid,
       ...options,

package/app/stores/connect-account.ts

@@ -74,12 +74,21 @@ export const useConnectAccountStore = defineStore('connect-auth-account-store',
     const accounts = await service.getUserAccounts(force).catch(() => undefined)
     if (accounts && accounts[0]) {
       userAccounts.value = accounts
-      if (!currentAccount.value.id || !userAccounts.value.some(account => account.id === currentAccount.value.id)) {
-        currentAccount.value = accounts[0]
-      }
+      // Always resync from the fresh list so a persisted currentAccount never keeps a stale status.
+      currentAccount.value = accounts.find(account => account.id === currentAccount.value.id) ?? accounts[0]
     }
   }
 
+  /**
+   * Sets `account` as current and navigates to its own info/settings page. Used both when a
+   * user clicks a visibly NSF/overdue account, and when a consumer's own backend rejects an
+   * action (e.g. payment redemption) for an account that wasn't flagged yet on the client.
+   */
+  function redirectToAccountInfo(account: ConnectAccount) {
+    currentAccount.value = account
+    return navigateTo(`${account.urlorigin}${account.urlpath}`, { external: true })
+  }
+
   /** Switch the current account to the given account ID if it exists in the user's account list */
   function switchCurrentAccount(accountId: number) {
     const account = userAccounts.value.find(account => account.id === accountId)
@@ -90,11 +99,16 @@ export const useConnectAccountStore = defineStore('connect-auth-account-store',
   }
 
   function checkAccountStatus() {
-    // redirect if account status is suspended or in review
-    if ([AccountStatus.NSF_SUSPENDED, AccountStatus.SUSPENDED].includes(currentAccount.value?.accountStatus)) {
-      // Avoid redirecting when navigating back from PAYBC for NSF or signout.
-      const endPath = useRoute().path.split('/').pop() as string
-      const isAllowedPath = ['return-cc-payment', 'signout'].includes(endPath)
+    const status = currentAccount.value?.accountStatus
+    if ([AccountStatus.SUSPENDED, AccountStatus.NSF_SUSPENDED].includes(status)) {
+      // Plain SUSPENDED has no self-serve resolution anywhere, so only the base paths are
+      // exempt. NSF_SUSPENDED additionally owns its own handling on the account selector and
+      // anywhere in a pay-link flow (dynamic /pay/{token}/... routes).
+      const path = useRoute().path
+      const endPath = path.split('/').pop() as string
+      const isNsfException = status === AccountStatus.NSF_SUSPENDED
+        && (path.includes('/pay/') || ['select', 'create'].includes(endPath))
+      const isAllowedPath = ['return-cc-payment', 'signout'].includes(endPath) || isNsfException
       if (!isAllowedPath) {
         // URL not allowed so redirect
         const redirectUrl = `${rtc.authWebUrl}account-freeze`
@@ -150,6 +164,7 @@ export const useConnectAccountStore = defineStore('connect-auth-account-store',
     initAccountStore,
     isCurrentAccount,
     loadUserAccounts,
+    redirectToAccountInfo,
     syncUserProfile,
     switchCurrentAccount,
     userAccounts,

package/i18n/locales/en-CA.ts

@@ -2,6 +2,22 @@
 export default {
   /* Ordering should be alphabetical unless otherwise specified */
   connect: {
+    badge: {
+      inactiveAccount: 'Inactive',
+      nonSufficientFunds: 'Non-Sufficient Funds',
+      paymentMethod: {
+        CASH: 'Cash',
+        CC: 'Credit Card',
+        CHEQUE: 'Cheque',
+        DIRECT_PAY: 'Credit Card',
+        DRAWDOWN: 'BC Online',
+        EFT: 'Electronic Funds Transfer',
+        EJV: 'Electronic Journal Voucher',
+        ONLINE_BANKING: 'Online Banking',
+        PAD: 'Pre-Authorized Debit'
+      },
+      statementOverdue: 'Statement Overdue'
+    },
     label: {
       accept: 'Accept',
       accountInfo: 'Account Info',

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sbc-connect/nuxt-auth",
   "type": "module",
-  "version": "0.16.7",
+  "version": "0.17.0",
   "repository": {
     "type": "git",
     "url": "github:bcgov/connect-nuxt"
@@ -9,24 +9,24 @@
   "license": "BSD-3-Clause",
   "main": "./nuxt.config.ts",
   "devDependencies": {
-    "@axe-core/playwright": "4.11.3",
-    "dotenv": "17.4.2",
-    "nuxt": "4.4.8",
+    "@axe-core/playwright": "4.13.0",
+    "dotenv": "18.0.4",
+    "nuxt": "4.5.2",
     "typescript": "6.0.3",
-    "vue-tsc": "3.3.1",
+    "vue-tsc": "3.3.11",
     "@sbc-connect/eslint-config": "0.0.8",
-    "@sbc-connect/playwright-config": "0.2.1",
-    "@sbc-connect/vitest-config": "0.2.0"
+    "@sbc-connect/vitest-config": "0.2.0",
+    "@sbc-connect/playwright-config": "0.2.1"
   },
   "dependencies": {
-    "@pinia/colada": "1.3.0",
-    "@pinia/colada-nuxt": "1.0.1",
-    "@pinia/nuxt": "0.11.3",
+    "@pinia/colada": "1.4.6",
+    "@pinia/colada-nuxt": "1.2.0",
+    "@pinia/nuxt": "1.0.2",
     "keycloak-js": "26.2.4",
-    "pinia": "3.0.4",
+    "pinia": "4.0.3",
     "pinia-plugin-persistedstate": "4.7.1",
-    "@sbc-connect/nuxt-base": "0.13.3",
-    "@sbc-connect/nuxt-forms": "0.7.12"
+    "@sbc-connect/nuxt-base": "0.14.0",
+    "@sbc-connect/nuxt-forms": "0.8.0"
   },
   "scripts": {
     "preinstall": "npx only-allow pnpm",

package/testMocks/mock-helpers.ts

@@ -9,7 +9,7 @@ export const mockApiCallsForSetAccount = async (
   page.route('**/users/@me', async (route) => {
     await route.fulfill({ json: getUserProfileMock() })
   })
-  page.route('**/users/**/settings', async (route) => {
+  page.route('**/users/**/settings**', async (route) => {
     await route.fulfill({ json: getUserSettingsMock(accountType) })
   })
 }