SSR-1081 credit card error alert

src/layouts/payment-page/payment-page.spec.js

@@ -6,6 +6,7 @@ import { shallowMount } from '@vue/test-utils';
 import { getMountOptions } from '@/helpers/unit-test-helper';
 import { useMainStore } from '@/store';
 import { paymentMethods, hopPaymentMethods } from '@/constants/payment-method-constants.js';
+import queryStrings from '@/constants/query-strings';
 
 // Constants
 const parts = {
@@ -116,10 +117,10 @@ jest.mock('@/helpers/cms-content-helper', () => ({
     fetchCmsContentForPage: () => Promise.resolve('content')
 }));
 
-function setupMocks({ customMountOptions }) {
+function setupMocks({ customMountOptions = {}, queryString }) {
     const mountOptions = getMountOptions({
         ...customMountOptions,
-        route: { query: { issPage: 'page-name' }, params: {} }
+        route: { query: { issPage: 'page-name', ...queryString }, params: {} }
     });
 
     // set all mock stuff
@@ -450,4 +451,21 @@ describe('payment-page.vue', () => {
             expect(clickFn).not.toBeCalled();
         });
     });
+
+    describe('Credit Card Error Alert', () => {
+        test('show credit card error alert', () => {
+            // Arrange
+            const queryString = {
+                [queryStrings.DISPLAY_PAY_IN_ADVANCE_ALERT]: paymentMethods.CREDIT_CARD
+            };
+            const wrapper = setupMocks({ queryString });
+
+            // Act
+
+            // Assert
+            const creditCardErrorAlert = wrapper.findComponent({ ref: 'payInAdvanceCreditCardErrorAlert' });
+            expect(creditCardErrorAlert.exists()).toBeTruthy();
+            expect(creditCardErrorAlert.isVisible()).toBeTruthy();
+        });
+    });
 });

src/layouts/payment-page/payment-page.vue

@@ -4,6 +4,15 @@
             <div class="fade-on-route-transition position-relative">
                 <siteHeader cmsWidgetName="SiteHeaderWidget" />
                 <div class="container-fluid pb-2 payment">
+                    <alert
+                        v-if="displayPayInAdvanceCreditCardAlert"
+                        ref="payInAdvanceCreditCardErrorAlert"
+                        class="my-4"
+                        cmsWidgetName="PayInAdvanceCreditCardErrorAlertWidget"
+                        alertClass="alert-danger"
+                        @textLinkClicked="paymentFailedPayLater"
+                        :isDismissible="false" />
+
                     <div id="card-container">
                         <iframe
                             id="card-frame"
@@ -371,6 +380,8 @@ import externalUrls from '@/router/router-constants/externalUrl-values.js';
 import widgetFields from '@/constants/cms-widget-fields.js';
 import { hopPaymentMethods, paymentMethods } from '@/constants/payment-method-constants.js';
 import { AppointmentTypeStrings } from '@/constants/schedule-constants.js';
+import queryStrings from '@/constants/query-strings';
+import alert from '@/ux-components/alert/alert.vue';
 
 export default {
     name: 'payment-page',
@@ -378,7 +389,8 @@ export default {
         siteHeader,
         siteFooter,
         // eslint-disable-next-line vue/no-reserved-component-names
-        Form
+        Form,
+        alert
     },
     directives: {
         resize: {
@@ -522,6 +534,9 @@ export default {
         },
         isPaypal() {
             return this.paymentType === hopPaymentMethods.PAYPAL;
+        },
+        displayPayInAdvanceCreditCardAlert() {
+            return this.displayPayInAdvanceAlert(paymentMethods.CREDIT_CARD);
         }
     },
     methods:
@@ -708,6 +723,17 @@ export default {
                 event.stopPropagation();
             }
         },
+        displayPayInAdvanceAlert(payMethod) {
+            return (
+                this.$route.query[queryStrings.DISPLAY_PAY_IN_ADVANCE_ALERT] === payMethod
+            );
+        },
+        paymentFailedPayLater() {
+            this.$router.navigate(
+                this.navigationScenarios.CLICKED_FORWARD,
+                this.$route
+            );
+        },
         backButtonAction() {
             // page will not render with normal navigation due to navigating from the iframe
             window.location = this.payInAdvanceCancelUrl;

src/router/index.js

@@ -136,7 +136,7 @@ router.beforeEach(async (to, from) => {
 
     const toQueryPage = to.query?.issPage;
     const notToPayInAdvanceReturn = toQueryPage !== issPageValues.PAYMENT_RETURN;
-    const isInIframe = fromQueryPage === issPageValues.PAYMENT_PAGE;
+    const isInIframe = window !== window.top || fromQueryPage === issPageValues.PAYMENT_PAGE;
 
     // isFromPaymentPageToOrderConfirmation workaround for navigating from an iframe but
     // isInIframe evaluates to false for some reason when navigating from payment to confirmation