@sbc-connect/nuxt-pay 0.1.6 → 0.1.8

package/.env.example

@@ -1,16 +1,29 @@
 # Web Urls
 NUXT_PUBLIC_BASE_URL="http://localhost:3000/"
 NUXT_PUBLIC_REGISTRY_HOME_URL="https://dev.bcregistry.gov.bc.ca/"
+NUXT_PUBLIC_AUTH_WEB_URL="https://dev.account.bcregistry.gov.bc.ca/"
+
+# API Key
+NUXT_PUBLIC_X_API_KEY=""
 
 # API Urls
 # Status API
 NUXT_PUBLIC_STATUS_API_URL="https://status-api-dev.apps.gold.devops.gov.bc.ca"
 NUXT_PUBLIC_STATUS_API_VERSION="/api/v1"
 
+# Auth API
+NUXT_PUBLIC_AUTH_API_URL="https://test.api.connect.gov.bc.ca/auth-dev"
+NUXT_PUBLIC_AUTH_API_VERSION="/api/v1"
+
+# Pay API
+NUXT_PUBLIC_PAY_API_URL="https://test.api.connect.gov.bc.ca/pay-dev"
+NUXT_PUBLIC_PAY_API_VERSION="/api/v1"
+
 # LaunchDarkly
 NUXT_PUBLIC_LD_CLIENT_ID=""
 
 # Identity Provider
 NUXT_PUBLIC_IDP_URL="https://dev.loginproxy.gov.bc.ca/auth"
 NUXT_PUBLIC_IDP_REALM="bcregistry"
-NUXT_PUBLIC_IDP_CLIENTID="connect-web"
+NUXT_PUBLIC_IDP_CLIENTID="connect-web"
+NUXT_PUBLIC_SITEMINDER_LOGOUT_URL="https://logontest7.gov.bc.ca/clp-cgi/logoff.cgi"

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # @sbc-connect/nuxt-pay
 
+## 0.1.8
+
+### Patch Changes
+
+- [#36](https://github.com/bcgov/connect-nuxt/pull/36) [`a9176be`](https://github.com/bcgov/connect-nuxt/commit/a9176be460388cba2df53cdfb49e4fd2dfd3d324) Thanks [@kialj876](https://github.com/kialj876)! - Pay Layer fee options update
+  Pay Layer documentation
+  bcgov/entity#29337
+
+- [#32](https://github.com/bcgov/connect-nuxt/pull/32) [`66d83d1`](https://github.com/bcgov/connect-nuxt/commit/66d83d14b2ec7950057dd39a4d876a8c4096923f) Thanks [@kialj876](https://github.com/kialj876)! - Pay layer cleanup bcgov/entity#29337
+
+- Updated dependencies [[`b2a0458`](https://github.com/bcgov/connect-nuxt/commit/b2a04587d5408d213d463ef6161b701ca597ef86), [`66d83d1`](https://github.com/bcgov/connect-nuxt/commit/66d83d14b2ec7950057dd39a4d876a8c4096923f)]:
+  - @sbc-connect/nuxt-auth@0.1.8
+
+## 0.1.7
+
+### Patch Changes
+
+- [#28](https://github.com/bcgov/connect-nuxt/pull/28) [`68af125`](https://github.com/bcgov/connect-nuxt/commit/68af1259b87846f42010026977411481e53ca8fb) Thanks [@kialj876](https://github.com/kialj876)! - Filling out the pay layer. Ticket bcgov/entity#29337
+
+- Updated dependencies [[`68af125`](https://github.com/bcgov/connect-nuxt/commit/68af1259b87846f42010026977411481e53ca8fb)]:
+  - @sbc-connect/nuxt-auth@0.1.7
+
 ## 0.1.6
 
 ### Patch Changes

package/README.md

@@ -15,7 +15,7 @@ This package provides the necessary components, composables, and service integra
 - Composables for interacting with the payment API.
 - Pre-configured for handling different payment methods (Credit Card, PAD, etc.).
 
-For detailed usage and documentation, please see the [Pay Layer Docs](../../../docs/packages/layers/pay/intro.md).
+For detailed usage and documentation, please see the [Pay Layer Docs](../../../docs/packages/layers/pay/overview.md).
 
 ## Usage
 
@@ -49,8 +49,9 @@ For local development, you will need credentials for the interacting with the Pa
 
 ```
 # .env
-NUXT_PUBLIC_PAY_API_URL="https://pay-api-dev.pathfinder.gov.bc.ca/api/v1"
-NUXT_PUBLIC_PAY_API_KEY="your-dev-api-key"
+NUXT_PUBLIC_PAY_API_URL="https://test.api.connect.gov.bc.ca/pay-dev"
+NUXT_PUBLIC_PAY_API_VERSION="/api/v1"
+NUXT_PUBLIC_X_API_KEY="your-dev-api-key"
 ```
 
 ### Production Environments

package/app/app.config.ts

@@ -0,0 +1,2 @@
+/* eslint-disable max-len */
+export default defineAppConfig({})

package/app/components/Connect/Fee/ExtraFee.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+defineProps<{ description: string, fee: number, showFeeValue: boolean }>()
+</script>
+
+<template>
+  <div class="flex justify-between pl-9 pr-4 py-3">
+    <p class="font-bold">
+      {{ description }}
+    </p>
+    <p>{{ showFeeValue ? `$${fee.toFixed(2)}`: '$ -' }}</p>
+  </div>
+</template>

package/app/components/Connect/Fee/Widget.vue

@@ -0,0 +1,197 @@
+<script setup lang="ts">
+const { t } = useI18n()
+const {
+  feeOptions,
+  fees,
+  placeholderFeeItem,
+  total,
+  totalServiceFees,
+  totalFutureEffectiveFees,
+  totalPriorityFees,
+  totalProcessingFees,
+  totalGst,
+  totalPst,
+  userSelectedPaymentMethod,
+  allowedPaymentMethods,
+  userPaymentAccount,
+  allowAlternatePaymentMethod
+} = storeToRefs(useConnectFeeStore())
+
+const isPlaceholderActive = ref(false)
+
+watch(fees, (v) => {
+  if (v && (Object.keys(v).length > 0)) {
+    isPlaceholderActive.value = false
+  } else {
+    isPlaceholderActive.value = true
+  }
+}, { immediate: true, deep: true })
+
+const feeItems = computed<ConnectFeeItem[]>(() => {
+  if (!isPlaceholderActive.value) {
+    return Object.values(fees.value)
+  }
+  return [placeholderFeeItem.value]
+})
+
+const serviceFee = computed(() => {
+  return isPlaceholderActive.value
+    ? placeholderFeeItem.value.serviceFees
+    : totalServiceFees.value
+})
+
+// folding stuff
+const folded = ref(false)
+
+const isFoldable = useMediaQuery('(max-width: 1024px)')
+watch(isFoldable, (val) => {
+  if (!val) {
+    folded.value = false
+  }
+})
+
+const toggleFolded = () => {
+  if (isFoldable.value) {
+    folded.value = !folded.value
+  }
+}
+
+const getItemFee = (feeItem: ConnectFeeItem) => {
+  if (feeItem.isPlaceholder) {
+    return '$ -'
+  }
+  if (feeItem.waived) {
+    return t('connect.label.noFee')
+  }
+  return `$${(feeItem.filingFees * (feeItem.quantity || 1)).toFixed(2)}`
+}
+</script>
+
+<template>
+  <div
+    data-testid="fee-widget"
+    class="z-10 rounded bg-white lg:shadow-sm"
+  >
+    <UButton
+      :tabindex="isFoldable ? 0 : -1"
+      :role="isFoldable ? 'button' : 'title'"
+      class="flex w-full bg-brand py-2 pl-4 text-lg lg:text-3xl font-bold transition-all"
+      :class="[folded ? 'rounded' : 'rounded-b-none rounded-t', isFoldable ? '' : 'pointer-events-none']"
+      :aria-label="$t('connect.label.feeSummary')"
+      :label="$t('connect.label.feeSummary')"
+      @click="toggleFolded"
+    >
+      <template #trailing>
+        <div class="flex grow justify-end pr-1">
+          <UIcon
+            v-if="isFoldable"
+            class="size-7"
+            :name="folded ? 'i-mdi-chevron-down' : 'i-mdi-chevron-up'"
+          />
+        </div>
+      </template>
+    </UButton>
+    <ConnectTransitionCollapse>
+      <div v-if="!folded">
+        <div class="divide-y divide-line-muted pt-1 text-sm">
+          <div
+            v-for="feeItem in feeItems"
+            :key="feeItem.filingTypeCode"
+            data-testid="fee-item"
+            class="flex justify-between px-4 py-3"
+          >
+            <div>
+              <p class="flex items-center gap-1 font-bold">
+                <span>{{ feeItem.label }}</span>
+              </p>
+              <p
+                v-if="feeItem.quantity !== undefined && feeItem.quantityDesc"
+                class="pl-4 text-neutral-toned"
+              >
+                x {{ feeItem.quantity }} {{ feeItem.quantityDesc }}
+              </p>
+            </div>
+            <p>{{ getItemFee(feeItem) }}</p>
+          </div>
+          <ConnectFeeExtraFee
+            v-if="!!feeOptions.showFutureEffectiveFee || (!!feeOptions.showAllActiveFees && totalFutureEffectiveFees)"
+            data-testid="future-effective-fee"
+            :description="$t('connect.label.futureEffectiveFee')"
+            :fee="totalFutureEffectiveFees"
+            show-fee-value
+          />
+          <ConnectFeeExtraFee
+            v-if="!!feeOptions.showPriorityFee || (!!feeOptions.showAllActiveFees && totalPriorityFees)"
+            data-testid="priority-fee"
+            :description="$t('connect.label.priorityFee')"
+            :fee="totalPriorityFees"
+            show-fee-value
+          />
+          <ConnectFeeExtraFee
+            v-if="!!feeOptions.showProcessingFee || (!!feeOptions.showAllActiveFees && totalProcessingFees)"
+            data-testid="processing-fee"
+            :description="$t('connect.label.processingFee')"
+            :fee="totalProcessingFees"
+            show-fee-value
+          />
+          <ConnectFeeExtraFee
+            v-if="!!feeOptions.showServiceFee || (!!feeOptions.showAllActiveFees && serviceFee)"
+            data-testid="service-fee"
+            :description="$t('connect.label.serviceFee')"
+            :fee="serviceFee"
+            show-fee-value
+          />
+          <ConnectFeeExtraFee
+            v-if="!!feeOptions.showPst || (!!feeOptions.showAllActiveFees && totalPst)"
+            data-testid="pst-fee"
+            :description="$t('connect.label.pst')"
+            :fee="totalPst"
+            show-fee-value
+          />
+          <ConnectFeeExtraFee
+            v-if="!!feeOptions.showGst || (!!feeOptions.showAllActiveFees && totalGst)"
+            data-testid="gst-fee"
+            :description="$t('connect.label.gst')"
+            :fee="totalGst"
+            show-fee-value
+          />
+        </div>
+        <div
+          data-testid="total-fee"
+          class="flex flex-row items-end justify-between border-t border-line-muted p-3"
+        >
+          <p class="mb-1 font-bold">
+            {{ $t("connect.label.totalFees") }}
+          </p>
+          <p class="flex items-end text-sm text-neutral">
+            <span class="mb-1">{{ $t("connect.label.cad") }}</span>
+            <b class="ml-[5px] flex items-end text-2xl text-black">
+              {{ !isPlaceholderActive ? `$${total.toFixed(2)}` : '$ -' }}
+            </b>
+          </p>
+        </div>
+        <USelect
+          v-if="allowAlternatePaymentMethod && allowedPaymentMethods.length > 1"
+          v-model="userSelectedPaymentMethod"
+          :items="allowedPaymentMethods"
+          variant="none"
+          :content="{ sideOffset: -1 }"
+          :ui="{
+            base: 'rounded-none px-4 py-2 w-full focus-visible:ring-2 focus-visible:ring-primary',
+            content: 'rounded-t-none',
+            trailingIcon: 'ml-auto',
+            itemTrailingIcon: 'hidden',
+          }"
+        >
+          <span class="text-xs text-left">
+            {{
+              $t(`connect.payMethod.text.${userSelectedPaymentMethod}`, {
+                account: userPaymentAccount?.cfsAccount?.bankAccountNumber },
+              )
+            }}
+          </span>
+        </USelect>
+      </div>
+    </ConnectTransitionCollapse>
+  </div>
+</template>

package/app/enums/connect-pay-cfs-status.ts

@@ -0,0 +1,6 @@
+export enum ConnectPayCfsStatus {
+  ACTIVE = 'ACTIVE',
+  PENDING = 'PENDING',
+  PENDING_PAD_ACTIVATION = 'PENDING_PAD_ACTIVATION'
+  // TODO: fill these out as needed
+}

package/app/enums/connect-pay-method.ts

@@ -0,0 +1,6 @@
+export enum ConnectPayMethod {
+  DIRECT_PAY = 'DIRECT_PAY',
+  PAD = 'PAD',
+  BCOL = 'BCOL',
+  JV = 'JV'
+}

package/app/interfaces/connect-fees.ts

@@ -0,0 +1,35 @@
+export interface ConnectTax {
+  gst: number
+  pst: number
+}
+
+export interface ConnectFeeItem {
+  filingFees: number
+  filingType: string
+  filingTypeCode: string
+  futureEffectiveFees: number
+  priorityFees: number
+  processingFees: number
+  serviceFees: number
+  tax: ConnectTax
+  total: number
+  label?: string
+  isPlaceholder?: boolean
+  quantity?: number
+  quantityDesc?: string
+  waived?: boolean
+}
+
+export interface ConnectFeeOptions {
+  showAllActiveFees?: boolean
+  showFutureEffectiveFee?: boolean
+  showPriorityFee?: boolean
+  showProcessingFee?: boolean
+  showGst?: boolean
+  showPst?: boolean
+  showServiceFee?: boolean
+}
+
+export interface ConnectFees { // this could have multiple mapped feeItems
+  [key: string]: ConnectFeeItem
+}

package/app/interfaces/connect-pay-account.ts

@@ -0,0 +1,21 @@
+export interface ConnectPayAccount {
+  accountId: string
+  accountName: string
+  billable: boolean
+  cfsAccount: {
+    bankAccountNumber: string
+    bankInstitutionNumber: string
+    bankTransitNumber: string
+    cfsAccountNumber: string
+    cfsPartyNumber: string
+    cfsSiteNumber: string
+    paymentMethod: ConnectPayMethod
+    status: ConnectPayCfsStatus
+  }
+  credit: number
+  id: number
+  padTosAcceptedBy: string
+  padTosAcceptedDate: string
+  paymentMethod: ConnectPayMethod
+  version: number
+}

package/app/layouts/ConnectPay.vue

@@ -0,0 +1,19 @@
+<template>
+  <ConnectLayout>
+    <template #header>
+      <ConnectHeaderAuth />
+    </template>
+
+    <template #body>
+      <div class="flex flex-col lg:flex-row lg:gap-6 grow">
+        <div class="grow max-w-full overflow-hidden">
+          <slot />
+        </div>
+
+        <div class="shrink-0 lg:w-[300px] lg:static sticky lg:mt-10">
+          <ConnectFeeWidget class="sticky lg:top-10" />
+        </div>
+      </div>
+    </template>
+  </ConnectLayout>
+</template>

package/app/plugins/pay-api.ts

@@ -0,0 +1,28 @@
+export default defineNuxtPlugin((nuxtApp) => {
+  const rtc = nuxtApp.$config.public
+  const payApiUrl = rtc.payApiUrl + rtc.payApiVersion
+  const appName = rtc.appName
+  const xApiKey = rtc.xApiKey
+
+  const api = $fetch.create({
+    baseURL: payApiUrl,
+    async onRequest({ options }) {
+      const auth = useConnectAuth()
+      const accountStore = useConnectAccountStore()
+
+      const token = await auth.getToken()
+      const accountId = accountStore.currentAccount.id
+
+      options.headers.set('Authorization', `Bearer ${token}`)
+      options.headers.set('App-Name', appName)
+      options.headers.set('X-Apikey', xApiKey)
+      options.headers.set('Account-Id', String(accountId))
+    }
+  })
+
+  return {
+    provide: {
+      payApi: api
+    }
+  }
+})

package/app/stores/connect-fee.ts

@@ -0,0 +1,276 @@
+export const useConnectFeeStore = defineStore('connect-pay-fee-store', () => {
+  const { $payApi } = useNuxtApp()
+  const { t } = useI18n()
+  const { baseModal } = useConnectModal()
+
+  const defaultFeeOptions = {
+    showAllActiveFees: true,
+    showFutureEffectiveFee: false,
+    showPriorityFee: false,
+    showProcessingFee: false,
+    showGst: false,
+    showPst: false,
+    showServiceFee: false
+  }
+  const feeOptions = ref<ConnectFeeOptions>(defaultFeeOptions)
+
+  const fees = ref<ConnectFees>({})
+  const feesCached = ref<ConnectFees>({})
+
+  const defaultPlaceholder = {
+    isPlaceholder: true,
+    filingFees: 0,
+    filingType: 'placeholder',
+    filingTypeCode: 'PLACEHOLDER',
+    futureEffectiveFees: 0,
+    label: '',
+    priorityFees: 0,
+    processingFees: 0,
+    serviceFees: 0,
+    tax: {
+      gst: 0,
+      pst: 0
+    },
+    total: 0
+  }
+  const placeholderFeeItem = ref<ConnectFeeItem>(defaultPlaceholder)
+
+  const initFees = async (
+    feeCodes: { code: string, entityType: string, label: string, quantityDesc?: string }[],
+    placeholder: { label: string, matchServiceFeeToCode?: string },
+    options?: ConnectFeeOptions
+  ) => {
+    // Get all the fee information for each fee code from the pay api
+    const feePromises = []
+    for (const feeInfo of feeCodes) {
+      feePromises.push(getFee(feeInfo.entityType, feeInfo.code))
+    }
+    const feesResolved = (await Promise.all(feePromises)).filter(fee => !!fee)
+
+    // Add all fee information for each code to the store
+    feesCached.value = feesResolved.reduce((reducedFees, fee) => {
+      return {
+        ...reducedFees,
+        [fee.filingTypeCode]: {
+          ...fee,
+          label: (feeCodes.find(feeInfo => feeInfo.code === fee.filingTypeCode))?.label,
+          quantityDesc: (feeCodes.find(feeInfo => feeInfo.code === fee.filingTypeCode))?.quantityDesc
+        }
+      }
+    }, feesCached.value)
+
+    // set the placeholder values
+    placeholderFeeItem.value.label = placeholder.label
+    if (placeholder.matchServiceFeeToCode) {
+      placeholderFeeItem.value.serviceFees = feesCached.value[placeholder.matchServiceFeeToCode]?.serviceFees || 0
+    }
+
+    // set fee options
+    if (options) {
+      feeOptions.value = {
+        ...feeOptions.value,
+        ...options
+      }
+    }
+  }
+
+  const getTotalFromFees = (feeValue: string, isTax = false) => {
+    let total = 0
+    for (const key of Object.keys(fees.value)) {
+      if (fees.value[key]?.waived) {
+        // if waived then total value for is 0
+        continue
+      }
+      const quantity = fees.value[key]?.quantity ?? 1
+      // @ts-expect-error - string cant index
+      if (isTax && fees.value[key].tax[feeValue]) {
+        // @ts-expect-error - string cant index
+        total += fees.value[key].tax[feeValue] * quantity
+        // @ts-expect-error - string cant index
+      } else if (fees.value[key][feeValue]) {
+        if (feeValue === 'total') {
+          // @ts-expect-error - string cant index
+          // ignore service fee and processing fee
+          // - (otherwise incorrectly adding it for each item instead of once at the end)
+          total += (fees.value[key].total - fees.value[key].serviceFees - fees.value[key].processingFees) * quantity
+        } else {
+          // @ts-expect-error - string cant index
+          total += fees.value[key][feeValue] * quantity
+        }
+      }
+    }
+    return total
+  }
+
+  const getMaxFromFees = (feeValue: string) => {
+    let maxFee = 0
+    for (const key of Object.keys(fees.value)) {
+      // @ts-expect-error - string cant index
+      const itemFee = fees.value[key][feeValue]
+      if (itemFee && (itemFee > maxFee)) {
+        maxFee = itemFee
+      }
+    }
+    return maxFee
+  }
+
+  const totalFutureEffectiveFees = computed(() => getTotalFromFees('futureEffectiveFees'))
+  const totalPriorityFees = computed(() => getTotalFromFees('priorityFees'))
+  const totalProcessingFees = computed(() => getMaxFromFees('processingFees'))
+  const totalServiceFees = computed(() => getMaxFromFees('serviceFees'))
+  const totalGst = computed(() => getTotalFromFees('gst', true))
+  const totalPst = computed(() => getTotalFromFees('pst', true))
+  const total = computed(() => getTotalFromFees('total') + totalServiceFees.value + totalProcessingFees.value)
+
+  /**
+   * Fetches the Fee info for the given entity type / fee code combination.
+   *
+   * @returns {Promise<Fee | undefined>} Fee data or undefined if an error occurs.
+   */
+  const getFee = async (
+    entityType: string,
+    code: string
+  ): Promise<ConnectFeeItem | undefined> => {
+    try {
+      const params = {
+        priority: true,
+        futureEffective: true
+      }
+      return await $payApi<ConnectFeeItem>(`/fees/${entityType}/${code}`, { params })
+    } catch (error) {
+      console.error('Error fetching Fee: ', error)
+    }
+  }
+
+  const addReplaceFee = (
+    code: string,
+    options?: {
+      futureEffective?: boolean
+      priority?: boolean
+      quantity?: number
+      quantityDesc?: string
+      waived?: boolean
+    }
+  ) => {
+    const fee = feesCached.value?.[code]
+    if (fee) {
+      const futureEffectiveFee = options?.futureEffective ? fee.futureEffectiveFees : 0
+      const priorityFee = options?.priority ? fee.priorityFees : 0
+      const total = fee.total - (fee.futureEffectiveFees - futureEffectiveFee) - (fee.priorityFees - priorityFee)
+      const extraFees = {
+        futureEffectiveFees: options?.futureEffective ? fee.futureEffectiveFees : 0,
+        priorityFees: options?.priority ? fee.priorityFees : 0,
+        total
+      }
+      fees.value[code] = {
+        ...fee,
+        ...extraFees,
+        ...(options || {})
+      }
+      return
+    }
+    console.error(`Error adding ${code}. Please use initFees to initialize this fee code before adding it.`)
+  }
+
+  const removeFee = (code: string) => {
+    /* eslint-disable-next-line */
+    delete fees.value[code]
+  }
+
+  // alternate payment option stuff
+  const PAD_PENDING_STATES = [ConnectPayCfsStatus.PENDING, ConnectPayCfsStatus.PENDING_PAD_ACTIVATION]
+  const userPaymentAccount = shallowRef<ConnectPayAccount>({} as ConnectPayAccount)
+  const userSelectedPaymentMethod = ref<ConnectPayMethod>(ConnectPayMethod.DIRECT_PAY)
+  const allowAlternatePaymentMethod = ref<boolean>(false)
+  const allowedPaymentMethods = ref<{ label: string, value: ConnectPayMethod }[]>([])
+
+  watch(userSelectedPaymentMethod, () => {
+    // if pad in confirmation period then set selected payment to CC
+    if (PAD_PENDING_STATES.includes(userPaymentAccount.value?.cfsAccount?.status)) {
+      userSelectedPaymentMethod.value = ConnectPayMethod.DIRECT_PAY
+      // show modal for user
+      baseModal.open({
+        title: t('connect.label.padAccountInConfirmationPeriod'),
+        description: t('connect.text.padAccountInConfirmationPeriod'),
+        dismissible: true,
+        buttons: [
+          { label: t('connect.label.close'), variant: 'outline', shouldClose: true }
+        ]
+      })
+    }
+  })
+
+  const $resetAlternatePayOptions = () => {
+    userPaymentAccount.value = {} as ConnectPayAccount
+    userSelectedPaymentMethod.value = ConnectPayMethod.DIRECT_PAY
+    allowAlternatePaymentMethod.value = false
+    allowedPaymentMethods.value = []
+  }
+
+  const initAlternatePaymentMethod = async () => {
+    $resetAlternatePayOptions()
+    const accountId = useConnectAccountStore().currentAccount.id
+    try {
+      // get payment account
+      const res = await $payApi<ConnectPayAccount>(`/accounts/${accountId}`)
+      userPaymentAccount.value = res
+
+      // add options to allowedPaymentMethods
+      let defaultMethod = userPaymentAccount.value.paymentMethod
+      if (defaultMethod !== undefined) {
+        const accountNum = userPaymentAccount.value.cfsAccount?.bankAccountNumber ?? ''
+        allowedPaymentMethods.value.push({
+          label: t(`connect.payMethod.label.${defaultMethod}`, { account: accountNum }),
+          value: defaultMethod
+        })
+
+        // only add direct pay if not default option
+        if (defaultMethod !== ConnectPayMethod.DIRECT_PAY) {
+          allowedPaymentMethods.value.push({
+            label: t(`connect.payMethod.label.${ConnectPayMethod.DIRECT_PAY}`),
+            value: ConnectPayMethod.DIRECT_PAY
+          })
+          // if pad in confirmation period then set default payment to CC
+          if (PAD_PENDING_STATES.includes(res.cfsAccount?.status)) {
+            defaultMethod = ConnectPayMethod.DIRECT_PAY
+          }
+        }
+      }
+      userSelectedPaymentMethod.value = defaultMethod
+
+      // only set allowed flag to true if previous steps didnt cause an error
+      allowAlternatePaymentMethod.value = true
+    } catch (e) {
+      logFetchError(e, 'Error initializing user payment account')
+    }
+  }
+
+  const $reset = () => {
+    feeOptions.value = defaultFeeOptions
+    fees.value = {}
+    placeholderFeeItem.value = defaultPlaceholder
+    $resetAlternatePayOptions()
+  }
+
+  return {
+    feeOptions,
+    fees,
+    placeholderFeeItem,
+    totalFutureEffectiveFees,
+    totalPriorityFees,
+    totalProcessingFees,
+    totalGst,
+    totalPst,
+    totalServiceFees,
+    total,
+    initFees,
+    addReplaceFee,
+    removeFee,
+    initAlternatePaymentMethod,
+    userPaymentAccount,
+    userSelectedPaymentMethod,
+    allowedPaymentMethods,
+    allowAlternatePaymentMethod,
+    $reset
+  }
+})

package/i18n/locales/en-CA.ts

@@ -0,0 +1,43 @@
+/* eslint-disable max-len */
+export default {
+  connect: {
+    label: {
+      cad: 'CAD',
+      close: 'Close',
+      feeSummary: 'Fee Summary',
+      futureEffectiveFee: 'Future Effective Fee',
+      gst: 'GST',
+      noFee: 'No Fee',
+      priorityFee: 'Priority Fee',
+      processingFee: 'Processing Fee',
+      pst: 'PST',
+      serviceFee: 'Service Fee',
+      totalFees: 'Total Fees',
+      padAccountInConfirmationPeriod: 'PAD Account in Confirmation Period'
+    },
+    payMethod: {
+      // These are used dynamically with the ConnectPayMethod enum
+      label: {
+        BCOL: 'BC Online Account',
+        DIRECT_PAY: 'Credit Card',
+        EFT: 'Electronic Funds Transfer',
+        EJV: 'Electronic Journal Voucher',
+        ONLINE_BANKING: 'Online Banking',
+        PAD: 'Pre-authorized Debit (PAD) {account}',
+        undefined: 'Default'
+      },
+      text: {
+        BCOL: 'Paying with BC Online Account',
+        DIRECT_PAY: 'Paying with Credit Card',
+        EFT: 'Paying with Electronic Funds Transfer',
+        EJV: 'Paying with Electronic Journal Voucher',
+        ONLINE_BANKING: 'Paying with Online Banking',
+        PAD: 'Paying with Pre-authorized Debit (PAD) {account}',
+        undefined: 'Paying with default method'
+      }
+    },
+    text: {
+      padAccountInConfirmationPeriod: 'This account will not be able to perform any PAD transactions until the mandatory (3) day confirmation period has ended. Until then you may continue to pay using credit card.'
+    }
+  }
+}

package/i18n/locales/fr-CA.ts

@@ -0,0 +1,2 @@
+export default {
+}

package/modules/pay-assets/index.ts

@@ -0,0 +1,15 @@
+import { defineNuxtModule, createResolver } from 'nuxt/kit'
+
+export default defineNuxtModule({
+  meta: {
+    name: 'pay-assets',
+    configKey: 'payAssets'
+  },
+  defaults: {},
+  async setup(_options, _nuxt) {
+    console.info('Setting up **pay** assets module')
+    const resolver = createResolver(import.meta.url)
+
+    _nuxt.options.css.push(resolver.resolve('./runtime/assets/connect-pay-tw.css'))
+  }
+})

package/modules/pay-assets/runtime/assets/connect-pay-tw.css

@@ -0,0 +1,2 @@
+@import "#connect-theme";
+@source "../../../../app";

package/nuxt.config.ts

@@ -12,9 +12,37 @@ export default defineNuxtConfig({
 
   extends: ['@sbc-connect/nuxt-auth'],
 
+  imports: {
+    dirs: ['interfaces', 'enums', 'stores']
+  },
+
   alias: {
     '#pay': resolve('./')
   },
 
-  css: [resolve('./app/assets/css/tw-pay.css')]
+  i18n: {
+    locales: [
+      {
+        name: 'English',
+        code: 'en-CA',
+        language: 'en-CA',
+        dir: 'ltr',
+        file: 'en-CA.ts'
+      },
+      {
+        name: 'Français',
+        code: 'fr-CA',
+        language: 'fr-CA',
+        dir: 'ltr',
+        file: 'fr-CA.ts'
+      }
+    ]
+  },
+
+  runtimeConfig: {
+    public: {
+      payApiUrl: '',
+      payApiVersion: ''
+    }
+  }
 })

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sbc-connect/nuxt-pay",
   "type": "module",
-  "version": "0.1.6",
+  "version": "0.1.8",
   "repository": "github:bcgov/connect-nuxt",
   "license": "BSD-3-Clause",
   "main": "./nuxt.config.ts",
@@ -12,19 +12,19 @@
     "nuxt": "^4.0.2",
     "typescript": "^5.8.3",
     "vue-tsc": "^3.0.4",
-    "@sbc-connect/eslint-config": "0.0.5",
-    "@sbc-connect/playwright-config": "0.0.4",
-    "@sbc-connect/vitest-config": "0.0.5"
+    "@sbc-connect/playwright-config": "0.0.6",
+    "@sbc-connect/eslint-config": "0.0.6",
+    "@sbc-connect/vitest-config": "0.0.6"
   },
   "dependencies": {
-    "@sbc-connect/nuxt-auth": "0.1.6"
+    "@sbc-connect/nuxt-auth": "0.1.8"
   },
   "scripts": {
     "preinstall": "npx only-allow pnpm",
-    "dev": "nuxi dev .playground",
+    "dev": "nuxi dev .playground --dotenv ../.env",
     "build": "nuxt build .playground",
     "build:test": "pnpm generate && npx serve .playground/.output/public",
-    "generate": "nuxt generate .playground",
+    "generate": "nuxt generate .playground --dotenv ../.env",
     "preview": "npx serve .playground/.output/public",
     "lint": "eslint .",
     "lint:fix": "eslint --fix .",

package/app/assets/css/tw-pay.css

@@ -1,2 +0,0 @@
-@import "#auth/app/assets/css/tw-auth.css";
-@source "../../../app/";