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/dialogs/payment-complete.vue

@@ -53,9 +53,9 @@
 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, PaymentStatus, SbcPaymentStatus } from '@/enums'
 import { CommonMixin, PaymentMixin, PaymentSessionMixin } from '@/mixins'
 import { ActionBindingIF } from '@/interfaces/store-interfaces'
 import { NameChoicesIF } from '@/interfaces'
@@ -85,6 +85,8 @@
 
   /** 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 +111,20 @@
   }
 
   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 +137,18 @@
     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/mixins/payment-mixin.ts

@@ -536,7 +536,8 @@ 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 was broken for a while. It was fixed by adding [0] to the response.
+      const { payment, sbcPayment = { receipts: [], status_code: '' }, statusCode, completionDate } = paymentResponse[0]
 
       await this.setPayment(payment)
       await this.setSbcPayment(sbcPayment)