20907 - Error handling updates / loaders (#2912)

bcgov · Jul 15, 2024 · c286045 · c286045
1 parent b0a2ff7
commit c286045
Show file tree

Hide file tree

Showing 4 changed files with 97 additions and 64 deletions.
diff --git a/auth-web/package-lock.json b/auth-web/package-lock.json
diff --git a/auth-web/package.json b/auth-web/package.json
@@ -1,6 +1,6 @@
 {
   "name": "auth-web",
-  "version": "2.6.46",
+  "version": "2.6.47",
   "appName": "Auth Web",
   "sbcName": "SBC Common Components",
   "private": true,

diff --git a/auth-web/src/components/pay/OutstandingBalances.vue b/auth-web/src/components/pay/OutstandingBalances.vue
@@ -10,7 +10,14 @@
       outlined
       flat
       class="amount-owing-details-card mb-8 mt-8"
+      :loading="loading"
     >
+      <template #progress>
+        <v-progress-linear
+          color="red"
+          indeterminate
+        />
+      </template>
       <v-card-text class="py-2 px-6">
         <v-row>
           <v-col cols="9">
@@ -21,54 +28,66 @@
           </v-col>
         </v-row>
         <v-divider class="my-2 mt-1" />
-        <v-row
-          v-for="statement in statementsOwing"
-          :key="statement.id"
-          data-test="statement-row"
-        >
-          <v-col
-            cols="9"
-            class="statement-col"
-            data-test="statement-label"
-          >
-            <a
-              class="link"
-              @click="downloadStatement(statement)"
-            >{{ formatStatementString(statement.fromDate, statement.toDate) }}</a>
-          </v-col>
-          <v-col
-            class="text-end statement-col"
-            data-test="statement-owing-value"
-          >
-            {{ formatCurrency(statement.amountOwing) }}
-          </v-col>
-        </v-row>
-        <v-row>
-          <v-col
-            cols="9"
-            class="statement-col"
-          >
-            Other unpaid transactions
-          </v-col>
-          <v-col
-            class="text-end statement-col"
-            data-test="total-other-owing"
-          >
-            {{ formatCurrency(invoicesOwing) }}
-          </v-col>
-        </v-row>
-        <v-divider class="my-2 mt-1" />
-        <v-row class="font-weight-bold">
-          <v-col cols="9">
-            Total Amount Due
-          </v-col>
-          <v-col
-            class="text-end"
-            data-test="total-amount-due"
+        <template v-if="!loading && !statementOwingError">
+          <v-row
+            v-for="statement in statementsOwing"
+            :key="statement.id"
+            data-test="statement-row"
           >
-            {{ formatCurrency(totalAmountDue) }}
-          </v-col>
-        </v-row>
+            <v-col
+              cols="9"
+              class="statement-col"
+              data-test="statement-label"
+            >
+              <a
+                class="link"
+                @click="downloadStatement(statement)"
+              >{{ formatStatementString(statement.fromDate, statement.toDate) }}</a>
+            </v-col>
+            <v-col
+              class="text-end statement-col"
+              data-test="statement-owing-value"
+            >
+              {{ formatCurrency(statement.amountOwing) }}
+            </v-col>
+          </v-row>
+          <v-row>
+            <v-col
+              cols="9"
+              class="statement-col"
+            >
+              Other unpaid transactions
+            </v-col>
+            <v-col
+              class="text-end statement-col"
+              data-test="total-other-owing"
+            >
+              {{ formatCurrency(invoicesOwing) }}
+            </v-col>
+          </v-row>
+          <v-divider class="my-2 mt-1" />
+          <v-row class="font-weight-bold">
+            <v-col cols="9">
+              Total Amount Due
+            </v-col>
+            <v-col
+              class="text-end"
+              data-test="total-amount-due"
+            >
+              {{ formatCurrency(totalAmountDue) }}
+            </v-col>
+          </v-row>
+        </template>
+        <template v-if="statementOwingError">
+          <div class="pt-4 pb-4">
+            <CautionBox
+              data-test="caution-box-details"
+              setImportantWord="Error"
+              :setAlert="true"
+              :setMsg="'An error has occurred fetching amount owing details.'"
+            />
+          </div>
+        </template>
       </v-card-text>
     </v-card>
     <div>
@@ -129,6 +148,7 @@
         </v-btn>
         <v-spacer />
         <v-btn
+          :loading="handlingPayment"
           large
           color="primary"
           :disabled="!totalAmountDue"
@@ -146,7 +166,7 @@
 
 <script lang="ts">
 
-import { PropType, computed, defineComponent, onMounted, reactive, toRefs, watch } from '@vue/composition-api'
+import { PropType, computed, defineComponent, onMounted, reactive, toRefs } from '@vue/composition-api'
 import CautionBox from '@/components/auth/common/CautionBox.vue'
 import CommonUtils from '@/util/common-util'
 import ConfigHelper from 'sbc-common-components/src/util/config-helper'
@@ -179,10 +199,14 @@ export default defineComponent({
     const orgStore = useOrgStore()
     const state = reactive({
       statementsOwing: [],
-      invoicesOwing: 0
+      invoicesOwing: 0,
+      loading: false,
+      handlingPayment: false,
+      statementOwingError: false
     })
 
     const handlePayment = async () => {
+      state.handlingPayment = true
       const payment: Payment = await orgStore.createOutstandingAccountPayment()
       const baseUrl = ConfigHelper.getAuthContextPath()
       const queryParams = `?paymentId=${payment?.id}&changePaymentType=${props.changePaymentType}`
@@ -191,6 +215,7 @@ export default defineComponent({
 
       // redirect to make payment UI
       await root.$router.push(`${Pages.MAKE_PAD_PAYMENT}${payment.id}/transactions/${encodedUrl}`)
+      state.handlingPayment = false
     }
 
     function goBack () {
@@ -214,8 +239,16 @@ export default defineComponent({
     }
 
     onMounted(async () => {
-      await getStatementsOwing()
-      state.invoicesOwing = statementSummary.value.totalInvoiceDue
+      state.loading = true
+      state.statementOwingError = false
+      try {
+        await getStatementsOwing()
+        state.invoicesOwing = statementSummary.value.totalInvoiceDue
+      } catch (error) {
+        state.statementOwingError = true
+        console.error('Error fetching statements owing.', error)
+      }
+      state.loading = false
     })
 
     const totalAmountDue = computed<number>(() => {
@@ -245,11 +278,6 @@ export default defineComponent({
           'or wait until all unpaid transactions are settled by your current method.'
     }
 
-    watch([statementSummary], ([newStatementSummary]) => {
-      // Perform actions when any of the watched props change
-      console.log('statementSummary changed to:', newStatementSummary)
-    })
-
     return {
       ...toRefs(state),
       goBack,

diff --git a/auth-web/src/views/pay/PayOutstandingBalanceView.vue b/auth-web/src/views/pay/PayOutstandingBalanceView.vue
@@ -85,11 +85,16 @@ export default defineComponent({
     }
 
     onMounted(async () => {
-      await getStatementSummary()
-      const isOwing = (statementSummary.value?.totalDue + statementSummary.value?.totalInvoiceDue) > 0
-      // Go to step two on the redirect back and payment has been completed
-      if (props.paymentId && props.changePaymentType && !isOwing) {
-        stepper.value.jumpToStep(2)
+      try {
+        await getStatementSummary()
+        const isOwing = (statementSummary.value?.totalDue + statementSummary.value?.totalInvoiceDue) > 0
+        // Go to step two on the redirect back and payment has been completed
+        if (props.paymentId && props.changePaymentType && !isOwing) {
+          stepper.value.jumpToStep(2)
+        }
+      } catch (error) {
+        // Failed to retrieve statement summary, so we should stay step 1
+        console.error('Failed getting statement summary', error)
       }
     })