@sbc-connect/nuxt-pay 0.1.16 → 0.1.18

package/.env.example

@@ -2,6 +2,7 @@
 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/"
+NUXT_PUBLIC_PAYMENT_PORTAL_URL="https://dev.account.bcregistry.gov.bc.ca/makepayment/"
 
 # API Key
 NUXT_PUBLIC_X_API_KEY=""

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @sbc-connect/nuxt-pay
 
+## 0.1.18
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @sbc-connect/nuxt-auth@0.1.18
+
+## 0.1.17
+
+### Patch Changes
+
+- [#58](https://github.com/bcgov/connect-nuxt/pull/58) [`a98c264`](https://github.com/bcgov/connect-nuxt/commit/a98c2647e041061223d504c8e974670148c08c0b) Thanks [@deetz99](https://github.com/deetz99)! - Fix base layout, add loading state to fee widget
+
+- Updated dependencies []:
+  - @sbc-connect/nuxt-auth@0.1.17
+
 ## 0.1.16
 
 ### Patch Changes

package/app/app.config.ts

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

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

@@ -1,12 +1,24 @@
 <script setup lang="ts">
-defineProps<{ description: string, fee: number, showFeeValue: boolean }>()
+const { t } = useI18n()
+
+const props = defineProps<{ description: string, fee: number, showFeeValue: boolean }>()
+
+const itemFee = computed(() => {
+  const total = props.fee.toFixed(2)
+  if (total === '0.00') {
+    return t('connect.label.noFee')
+  }
+  return `$${total}`
+})
 </script>
 
 <template>
-  <div class="flex justify-between pl-9 pr-4 py-3">
-    <p class="font-bold">
+  <div class="flex justify-between pl-9 pr-3 py-3">
+    <p class="font-bold text-highlighted">
       {{ description }}
     </p>
-    <p>{{ showFeeValue ? `$${fee.toFixed(2)}`: '$ -' }}</p>
+    <p class="text-highlighted">
+      {{ showFeeValue ? itemFee: '$ -' }}
+    </p>
   </div>
 </template>

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

@@ -14,7 +14,8 @@ const {
   userSelectedPaymentMethod,
   allowedPaymentMethods,
   userPaymentAccount,
-  allowAlternatePaymentMethod
+  allowAlternatePaymentMethod,
+  loading
 } = storeToRefs(useConnectFeeStore())
 
 const isPlaceholderActive = ref(false)
@@ -60,10 +61,11 @@ const getItemFee = (feeItem: ConnectFeeItem) => {
   if (feeItem.isPlaceholder) {
     return '$ -'
   }
-  if (feeItem.waived) {
+  const total = (feeItem.filingFees * (feeItem.quantity || 1)).toFixed(2)
+  if (feeItem.waived || total === '0.00') {
     return t('connect.label.noFee')
   }
-  return `$${(feeItem.filingFees * (feeItem.quantity || 1)).toFixed(2)}`
+  return `$${total}`
 }
 </script>
 
@@ -75,7 +77,7 @@ const getItemFee = (feeItem: ConnectFeeItem) => {
     <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="flex w-full bg-brand py-2 pl-3 text-lg 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')"
@@ -93,16 +95,20 @@ const getItemFee = (feeItem: ConnectFeeItem) => {
     </UButton>
     <ConnectTransitionCollapse>
       <div v-if="!folded">
-        <div class="divide-y divide-line-muted pt-1 text-sm">
+        <div v-if="loading && !isPlaceholderActive" class="flex justify-between p-3">
+          <USkeleton class="h-5 w-1/2 max-w-[150px]" />
+          <USkeleton class="h-5 w-1/4 max-w-[100px]" />
+        </div>
+        <div v-else class="divide-y divide-line-muted text-sm">
           <div
             v-for="feeItem in feeItems"
             :key="feeItem.filingTypeCode"
             data-testid="fee-item"
-            class="flex justify-between px-4 py-3"
+            class="flex justify-between p-3"
           >
             <div>
               <p class="flex items-center gap-1 font-bold">
-                <span>{{ feeItem.label }}</span>
+                <span class="text-highlighted">{{ feeItem.label }}</span>
               </p>
               <p
                 v-if="feeItem.quantity !== undefined && feeItem.quantityDesc"
@@ -111,7 +117,9 @@ const getItemFee = (feeItem: ConnectFeeItem) => {
                 x {{ feeItem.quantity }} {{ feeItem.quantityDesc }}
               </p>
             </div>
-            <p>{{ getItemFee(feeItem) }}</p>
+            <p class="text-highlighted">
+              {{ getItemFee(feeItem) }}
+            </p>
           </div>
           <ConnectFeeExtraFee
             v-if="!!feeOptions.showFutureEffectiveFee || (!!feeOptions.showAllActiveFees && totalFutureEffectiveFees)"
@@ -160,10 +168,13 @@ const getItemFee = (feeItem: ConnectFeeItem) => {
           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">
+          <USkeleton v-if="loading && !isPlaceholderActive" class="h-8 w-1/3 max-w-[100px]" />
+          <p v-else class="mb-1 font-bold text-highlighted">
             {{ $t("connect.label.totalFees") }}
           </p>
-          <p class="flex items-end text-sm text-neutral">
+
+          <USkeleton v-if="loading && !isPlaceholderActive" class="h-8 w-1/3 max-w-[100px]" />
+          <p v-else 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)}` : '$ -' }}

package/app/components/Connect/Layout/PayBody.vue

@@ -1,6 +1,6 @@
 <template>
-  <div class="flex flex-col lg:flex-row lg:gap-6 grow">
-    <div class="grow max-w-full overflow-hidden">
+  <div class="flex flex-col lg:flex-row lg:gap-6 grow app-inner-container">
+    <div class="grow overflow-hidden">
       <slot />
     </div>
 

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

@@ -0,0 +1,7 @@
+export enum ConnectPayStatus {
+  CREATED = 'CREATED',
+  COMPLETED = 'COMPLETED',
+  DELETED = 'DELETED',
+  REFUNDED = 'REFUNDED',
+  FAILED = 'FAILED'
+}

package/app/stores/connect-fee.ts

@@ -34,12 +34,14 @@ export const useConnectFeeStore = defineStore('connect-pay-fee-store', () => {
     total: 0
   }
   const placeholderFeeItem = ref<ConnectFeeItem>(defaultPlaceholder)
+  const loading = ref<boolean>(false)
 
   const initFees = async (
     feeCodes: { code: string, entityType: string, label: string, quantityDesc?: string }[],
     placeholder: { label: string, matchServiceFeeToCode?: string },
     options?: ConnectFeeOptions
   ) => {
+    loading.value = true
     // Get all the fee information for each fee code from the pay api
     const feePromises = []
     for (const feeInfo of feeCodes) {
@@ -72,6 +74,7 @@ export const useConnectFeeStore = defineStore('connect-pay-fee-store', () => {
         ...options
       }
     }
+    loading.value = false
   }
 
   const getTotalFromFees = (feeValue: string, isTax = false) => {
@@ -249,6 +252,7 @@ export const useConnectFeeStore = defineStore('connect-pay-fee-store', () => {
     feeOptions.value = defaultFeeOptions
     fees.value = {}
     placeholderFeeItem.value = defaultPlaceholder
+    loading.value = false
     $resetAlternatePayOptions()
   }
 
@@ -263,6 +267,7 @@ export const useConnectFeeStore = defineStore('connect-pay-fee-store', () => {
     totalPst,
     totalServiceFees,
     total,
+    loading,
     initFees,
     addReplaceFee,
     removeFee,

package/nuxt.config.ts

@@ -42,7 +42,8 @@ export default defineNuxtConfig({
   runtimeConfig: {
     public: {
       payApiUrl: '',
-      payApiVersion: ''
+      payApiVersion: '',
+      paymentPortalUrl: ''
     }
   }
 })

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sbc-connect/nuxt-pay",
   "type": "module",
-  "version": "0.1.16",
+  "version": "0.1.18",
   "repository": "github:bcgov/connect-nuxt",
   "license": "BSD-3-Clause",
   "main": "./nuxt.config.ts",
@@ -17,7 +17,7 @@
     "@sbc-connect/vitest-config": "0.0.6"
   },
   "dependencies": {
-    "@sbc-connect/nuxt-auth": "0.1.16"
+    "@sbc-connect/nuxt-auth": "0.1.18"
   },
   "scripts": {
     "preinstall": "npx only-allow pnpm",
@@ -31,6 +31,7 @@
     "test": "pnpm run test:unit; pnpm run test:e2e",
     "test:unit": "vitest run",
     "test:e2e": "npx playwright test",
+    "test:e2e:ui": "npx playwright test --ui",
     "typecheck": "npx nuxt typecheck"
   }
 }