Parity experience for failed payments.

src/layouts/payment-adyen/payment-adyen.vue

@@ -4,6 +4,16 @@
         <div class="container">
             <div class="row">
                 <div class="col-12">
+                    <div>
+                        <alert
+                            ref="piaErrorAlert"
+                            class="my-4"
+                            v-if="hasPaymentFailureError"
+                            cmsWidgetName="PIAErrorAlertWidget"
+                            alertClass="alert-danger"
+                            @textLinkClicked="paymentFailedPayLater"
+                            v-bind:isDismissable="false" />
+                    </div>
                     <div id="card-container">
                         <div id="payment-container">
                             <funnelSubHeader class="py-5" cmsWidgetName="FunnelSubHeaderWidget" />
@@ -45,6 +55,7 @@ import Form from "vee-validate";
 import funnelHeader from "@/fmg-components/funnel-header/funnel-header";
 import navbar from "@/fmg-components/nav-bar/nav-bar";
 import funnelSubHeader from "@/fmg-components/funnel-sub-header/funnel-sub-header";
+import alert from "@/ux-components/alert/alert";
 
 import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
 import { settleAllPromises } from "@/helpers/layout-helper";
@@ -75,6 +86,8 @@ export default {
     data() {
         return {
             sessionId: String,
+            dropinComponent: null,
+            hasPaymentFailureError: false,
         };
     },
 
@@ -292,7 +305,11 @@ export default {
                         name: "Credit or debit card",
                     },
                 },
-            }).mount("#adyen-container");
+            });
+
+            this.dropinComponent = dropin;
+
+            dropin.mount("#adyen-container");
         },
 
         async handleCompletedPayment(result) {
@@ -378,13 +395,17 @@ export default {
 
             await this.saveAndSubmitWorkOrder();
         },
-        handleFailedPayment(result) {
+        async handleFailedPayment(result) {
             console.log(`Result =`);
             console.log(result);
 
             const stringToLog = `ADYEN PAYMENT NOT AUTHORIZED. Code = ${result?.resultCode}. Id = ${this.sessionId}`;
 
-            global.$logger.logError(stringToLog);
+            await global.$logger.logError(stringToLog);
+
+            this.hasPaymentFailureError = true;
+
+            this.dropinComponent?.update();
         },
         handleError(error) {
             const stringToLog = `ADYEN ERROR. Name = ${error.name}. Details = ${error.message}.`;
@@ -423,6 +444,37 @@ export default {
                 this.pageName
             );
         },
+
+        async paymentFailedPayLater() {
+            console.log(`Doing final work order submission...`);
+            showFmgLoadingModal(true);
+
+            await this.dispatchStoreAction(
+                storeActions.SAVE_PAYMENT_METHOD_CHOICE,
+                paymentMethods.PAY_LATER,
+                false
+            );
+
+            await this.dispatchStoreAction(storeActions.RESET_SAVE_SESSION_PROMISE);
+
+            try {
+                await submitWorkOrder({
+                    pageNameToLog: this.pageName,
+                    submitAfterSave: true,
+                });
+
+                await baseMixin.methods.dispatchStoreAction(storeActions.CREATE_SUBMITTED_STATE);
+
+                this.$router.navigateWithoutSaving(
+                    this.navigationScenarios.CLICKED_FORWARD,
+                    this.pageName
+                );
+            } catch (error) {
+                console.log(`Final submission failed after failed payment.`);
+                this.$router.handleSoftError();
+                return;
+            }
+        },
     },
 
     computed: {
@@ -563,6 +615,7 @@ export default {
         funnelSubHeader,
         navbar,
         cart,
+        alert,
     },
 };
 </script>