21397 - Build in a refetch mechanism for PENDING_PAYMENT

package.json

@@ -1,6 +1,6 @@
 {
   "name": "name-request",
-  "version": "5.5.1",
+  "version": "5.5.2",
   "private": true,
   "appName": "Name Request UI",
   "sbcName": "SBC Common Components",
@@ -91,4 +91,4 @@
   "overrides": {
     "webpack": "5.78"
   }
-}
+}

src/components/advanced-search/advanced-search-table.vue

@@ -28,7 +28,7 @@
             v-for="(applicant, index) in item.applicants"
             :key="`applicant-${index}`"
           >
-            {{ applicant.lastName }}, {{ applicant.firstName }} {{applicant.middleName}}
+            {{ applicant.lastName }}, {{ applicant.firstName }} {{ applicant.middleName }}
           </span>
         </td>
         <td>

src/components/dialogs/payment-complete.vue

@@ -53,9 +53,7 @@
 import { Component, Mixins, Watch } from 'vue-property-decorator'
 import { Action, Getter } from 'vuex-class'
 import PaymentConfirm from '@/components/payment/payment-confirm.vue'
-import { NameRequestPayment } from '@/modules/payment/models'
-import errorModule from '@/modules/error'
-import { PaymentStatus, SbcPaymentStatus } from '@/enums'
+import { NrState } from '@/enums'
 import { CommonMixin, PaymentMixin, PaymentSessionMixin } from '@/mixins'
 import { ActionBindingIF } from '@/interfaces/store-interfaces'
 import { NameChoicesIF } from '@/interfaces'
@@ -85,6 +83,8 @@ export default class PaymentCompleteDialog extends Mixins(
 
   /** Used to show loading state on button. */
   loading = false
+  incompletePaymentRetries = 5
+  isRetrying = false
 
   /** Whether this modal should be shown (per store property). */
   get showModal (): boolean {
@@ -109,7 +109,20 @@ export default class PaymentCompleteDialog extends Mixins(
   }
 
   async fetchNr (): Promise<void> {
-    const nrData = await NamexServices.getNameRequest(true)
+    let nrData = await NamexServices.getNameRequest(true)
+    if (nrData.state === NrState.PENDING_PAYMENT && this.incompletePaymentRetries > 0) {
+      this.incompletePaymentRetries--
+      this.isRetrying = true
+      setTimeout(async () => {
+        await this.fetchData()
+      }, 2000)
+      // Retry at least once before showing pending payment, this should cover most of the cases.
+      if (this.incompletePaymentRetries === 4) {
+        nrData = null
+      }
+    } else {
+      this.isRetrying = false
+    }
     if (nrData) {
       await this.loadExistingNameRequest(nrData)
     }
@@ -122,33 +135,18 @@ export default class PaymentCompleteDialog extends Mixins(
     const { sessionPaymentId, sessionNrId } = this
     await this.fetchNr()
     await this.fetchPaymentData(sessionPaymentId, +sessionNrId)
-    sessionStorage.removeItem('payment')
-    sessionStorage.removeItem('paymentInProgress')
-    sessionStorage.removeItem('paymentId')
-    sessionStorage.removeItem('paymentToken')
-    sessionStorage.removeItem('nrId')
+    if (!this.isRetrying) {
+      this.cleanUpSessionStorage()
+    }
+  }
+
+  cleanUpSessionStorage () {
+    ['payment', 'paymentInProgress', 'paymentId', 'paymentToken', 'nrId'].forEach(key => sessionStorage.removeItem(key))
   }
 
   async fetchPaymentData (paymentId: number, nameReqId: number) {
     if (nameReqId && paymentId) {
       await this.fetchNrPayment(nameReqId, paymentId)
-      const { paymentStatus, sbcPaymentStatus } = this
-      if (sbcPaymentStatus === SbcPaymentStatus.COMPLETED && paymentStatus === PaymentStatus.CREATED) {
-        await this.setCompletePayment(nameReqId, paymentId, this.sessionPaymentAction)
-      }
-    }
-  }
-
-  async setCompletePayment (nrId: number, paymentId: number, action: string) {
-    const result: NameRequestPayment = await NamexServices.completePayment(nrId, paymentId, action)
-    const paymentSuccess = result?.paymentSuccess
-
-    if (paymentSuccess) {
-      this.$root.$emit('paymentComplete', true)
-      await this.toggleReceiptModal(true)
-    } else if (!paymentSuccess && result?.paymentErrors) {
-      // Setting the errors to state will update any subscribing components, like the main ErrorModal
-      await errorModule.setAppErrors(result.paymentErrors)
     }
   }
 

src/interfaces/store-interfaces/action-interface.ts

@@ -1,5 +1,3 @@
-import { ActionContext } from 'vuex'
-
 // Interface to define a Vuex Action
 export interface ActionIF {
   (x: any, y?: any | null): void

src/mixins/payment-mixin.ts

@@ -536,7 +536,9 @@ export class PaymentMixin extends Mixins(ActionMixin) {
       if (!paymentResponse) throw new Error('Got error from getNameRequestPayment()')
 
       // eslint-disable-next-line @typescript-eslint/no-unused-vars
-      const { payment, sbcPayment = { receipts: [], status_code: '' }, statusCode, completionDate } = paymentResponse
+      // Note this is broken the true response should be paymentResponse[0]
+      // but this is called by many different pathways will need to fix in the future.
+      const { payment, sbcPayment = { receipts: [], status_code: '' } } = paymentResponse
 
       await this.setPayment(payment)
       await this.setSbcPayment(sbcPayment)

tests/unit/analyze-pending.spec.ts

@@ -1,10 +1,8 @@
-import { createLocalVue, mount } from '@vue/test-utils'
+import { createLocalVue } from '@vue/test-utils'
 import Vuetify from 'vuetify'
-import AnalyzePending from '@/components/new-request/analyze-pending.vue'
 // import newReqModule from '@/store/new-request-module'
 
 const localVue = createLocalVue()
-const vuetify = new Vuetify()
 
 localVue.use(Vuetify)