CSR-1852 router and alert logic for CC and AP declined

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, {
+            const paymentPageNavScenario =
-                [queryStrings.DISPLAY_PIA_ALERT]: true,
+                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

@@ -5,6 +5,26 @@
             <div class="row justify-content-center">
                 <div class="col-md-6">
                     <funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
+
+                    <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>
             </div>
 
@@ -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/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,