Merge pull request #1666 from Safelite/feature/CSR-1852

Feature/csr 1852

src/layouts/payment-pia-return/payment-pia-return.vue

@@ -24,9 +24,26 @@ export default {
 
         if (piaError) {
             console.log("Error during payment: " + piaError);
-            this.$router.navigateWithoutSaving(this.navigationScenarios.PIA_ERROR, this.$route, {
-                [queryStrings.DISPLAY_PIA_ALERT]: true,
-            });
+            const paymentPageNavScenario =
+                store.getters.order.payment.piaType === paymentMethods.CREDIT_CARD ||
+                store.getters.order.payment.piaType === paymentMethods.AFTERPAY;
+            if (paymentPageNavScenario) {
+                this.$router.navigateWithoutSaving(
+                    this.navigationScenarios.PIA_CC_ERROR,
+                    this.$route,
+                    {
+                        [queryStrings.DISPLAY_PIA_ALERT]: store.getters.order.payment.piaType,
+                    }
+                );
+            } else {
+                this.$router.navigateWithoutSaving(
+                    this.navigationScenarios.PIA_ERROR,
+                    this.$route,
+                    {
+                        [queryStrings.DISPLAY_PIA_ALERT]: true,
+                    }
+                );
+            }
         } else {
             switch (store.getters.order.payment.piaType) {
                 case paymentMethods.CREDIT_CARD:

src/layouts/payment/payment.vue

@@ -10,6 +10,26 @@
 
             <div class="row justify-content-center">
                 <div class="col-md-6 col-xl-4 p-0">
+                    <div>
+                        <alert
+                            ref="piaCCErrorAlert"
+                            class="my-4"
+                            v-if="shouldDisplayPiaCCAlert"
+                            cmsWidgetName="PIACCErrorAlertWidget"
+                            alertClass="alert-danger"
+                            v-bind:isDismissible="false" />
+                    </div>
+
+                    <div>
+                        <alert
+                            ref="piaAPErrorAlert"
+                            class="my-4"
+                            v-if="shouldDisplayPiaAPAlert"
+                            cmsWidgetName="PIAAPErrorAlertWidget"
+                            alertClass="alert-danger"
+                            v-bind:isDismissible="false" />
+                    </div>
+
                     <div id="card-container">
                         <iframe
                             v-resize
@@ -176,6 +196,7 @@ import funnelHeader from "@/fmg-components/funnel-header/funnel-header";
 import navbar from "@/fmg-components/nav-bar/nav-bar";
 import loadingModal from "@/fmg-components/loading-modal/loading-modal.vue";
 import cart from "@/fmg-components/cart/cart";
+import alert from "@/ux-components/alert/alert";
 
 import { storeActions } from "@/constants/store-actions";
 import store from "@/store";
@@ -197,6 +218,7 @@ import { getQuerystringParameter } from "@/helpers/querystring-helper";
 import { deepClone } from "@/helpers/object-helper";
 
 import iframeResize from "../../../node_modules/iframe-resizer/js/iframeResizer.js";
+import { routerParams } from "@/router/router-constants/router-params";
 
 export default {
     name: "payment",
@@ -406,6 +428,12 @@ export default {
             }
             return false;
         },
+        shouldDisplayPiaCCAlert() {
+            return this.shouldDisplayPiaAlert(paymentMethods.CREDIT_CARD);
+        },
+        shouldDisplayPiaAPAlert() {
+            return this.shouldDisplayPiaAlert(paymentMethods.AFTERPAY);
+        },
     },
     methods: {
         arePagePrerequisitesValid() {
@@ -607,12 +635,19 @@ export default {
                 event.stopPropagation();
             }
         },
+        shouldDisplayPiaAlert(payMethod) {
+            return (
+                this.$route.query[queryStrings.DISPLAY_PIA_ALERT] === payMethod ||
+                this.$route.params[routerParams.DISPLAY_PIA_ALERT] === payMethod
+            );
+        },
     },
     components: {
         funnelHeader,
         navbar,
         loadingModal,
         cart,
+        alert,
     },
 };
 </script>

src/router/index.js

@@ -171,10 +171,15 @@ router.beforeEach(async (to, from, next) => {
     }
 
     const toQueryPage = to.query?.fmgPage;
-    const notToPIAReturn = toQueryPage != "payment-pia-return";
+    const notToPIAReturn = toQueryPage != fmgPageValues.PAYMENT_PIA_RETURN;
     const isInIframe = window !== window.top;
 
-    if (isInIframe && notToPIAReturn) {
+    // fromPaymentToConfirmation workaround for navigating from an iframe but
+    // isInIframe evaluates to false for some reason when navigating from payment to confirmation
+    const fromPaymentToConfirmation =
+        fromQueryPage === fmgPageValues.PAYMENT && toQueryPage === fmgPageValues.CONFIRMATION;
+
+    if ((isInIframe && notToPIAReturn) || fromPaymentToConfirmation) {
         const newUrl = `${window.top.location.origin}${to.href}`;
         window.top.location.href = newUrl;
         // Refresh page if navigating to self to prevent locking.

src/router/router-constants/navigation-scenarios.js

@@ -47,6 +47,7 @@ const navigationScenarios = {
     // Payment
     CLICKED_PAY_NOW: "CLICKED_PAY_NOW",
     PIA_ERROR: "PIA_ERROR",
+    PIA_CC_ERROR: "PIA_CC_ERROR",
     PIA_SUCCESS: "PIA_SUCCESS",
 };
 

src/router/router-constants/routing-table.js

@@ -471,6 +471,10 @@ const routingTable = function (store) {
                     scenario: navigationScenarios.PIA_ERROR,
                     destinationFmgPageValue: fmgPageValues.PAYMENT_METHOD,
                 },
+                {
+                    scenario: navigationScenarios.PIA_CC_ERROR,
+                    destinationFmgPageValue: fmgPageValues.PAYMENT,
+                },
                 {
                     scenario: navigationScenarios.PIA_SUCCESS,
                     destinationFmgPageValue: fmgPageValues.CONFIRMATION,