Merge pull request #605 from Safelite/feature/richardson/SSR-1149

add in PIA alert to payment-method page

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

@@ -5,39 +5,70 @@ import paymentMethod from '@/layouts/payment-method/payment-method.vue';
 import { shallowMount } from '@vue/test-utils';
 import { getMountOptions } from '@/helpers/unit-test-helper.js';
 import { useMainStore } from '@/store';
+import issPageValues from '@/router/router-constants/issPage-values';
 import { paymentMethods } from '@/constants/payment-method-constants';
+import queryStrings from '@/constants/query-strings';
 
-function setupMocks() {
+function setupMocks({ customMountOptions = {}, queryString }) {
-    const mountOptions = getMountOptions();
+    const mountOptions = getMountOptions({
+        ...customMountOptions,
+        route: { query: { issPage: issPageValues.PAYMENT_METHOD, ...queryString }, params: {} }
+    });
 
     const wrapper = shallowMount(paymentMethod, mountOptions);
 
-    return { wrapper };
+    return wrapper;
 }
 
 describe('payment-method.vue', () => {
-    test('getting payment method when method is pay later', async () => {
+    describe('Payment Method Type', () => {
+        test('getting payment method when method is pay later', async () => {
         // Arrange
-        const { wrapper } = setupMocks();
+            const wrapper = setupMocks({});
-        const payLaterPaymentMethod = paymentMethods.PAY_AT_TIME_OF_SERVICE;
+            const payLaterPaymentMethod = paymentMethods.PAY_AT_TIME_OF_SERVICE;
-        useMainStore().savePaymentMethodChoice(payLaterPaymentMethod);
+            useMainStore().savePaymentMethodChoice(payLaterPaymentMethod);
 
-        // Act
+            // Act
-        const paymethod = wrapper.vm.getPaymentMethodFromStore();
+            const paymethod = wrapper.vm.getPaymentMethodFromStore();
 
-        // Assert
+            // Assert
-        expect(paymethod).toBe(payLaterPaymentMethod);
+            expect(paymethod).toBe(payLaterPaymentMethod);
+        });
+        test('getting payment method when method is pay in advance', async () => {
+        // Arrange
+            const wrapper = setupMocks({});
+            const payInAdvancePaymentMethod = paymentMethods.CREDIT_CARD;
+            useMainStore().savePaymentMethodChoice(payInAdvancePaymentMethod);
+
+            // Act
+            const paymethod = wrapper.vm.getPaymentMethodFromStore();
+
+            // Assert
+            expect(paymethod).not.toBe(payInAdvancePaymentMethod);
+        });
     });
-    test('getting payment method when method is pay in advance', async () => {
-        // Arrange
-        const { wrapper } = setupMocks();
-        const payInAdvancePaymentMethod = paymentMethods.CREDIT_CARD;
-        useMainStore().savePaymentMethodChoice(payInAdvancePaymentMethod);
 
-        // Act
+    describe('Pay In Advance Error Alert', () => {
-        const paymethod = wrapper.vm.getPaymentMethodFromStore();
+        test('show pay in advance error alert when contained in querystring', () => {
+            // Arrange
+            const queryString = {
+                [queryStrings.DISPLAY_PAY_IN_ADVANCE_ALERT]: paymentMethods.AFTERPAY
+            };
+            const wrapper = setupMocks({ queryString });
 
-        // Assert
+            // Assert
-        expect(paymethod).not.toBe(payInAdvancePaymentMethod);
+            const payInAdvanceErrorAlert = wrapper.find('[name="payInAdvanceErrorAlert"]');
+            expect(payInAdvanceErrorAlert.exists()).toBeTruthy();
+            expect(payInAdvanceErrorAlert.isVisible()).toBeTruthy();
+        });
+
+        test('hide pay in advance error alert when not contained in querystring', () => {
+            // Arrange
+            const wrapper = setupMocks({});
+
+            // Assert
+            const payInAdvanceErrorAlert = wrapper.find('[name="payInAdvanceErrorAlert"]');
+            expect(payInAdvanceErrorAlert.exists()).toBeFalsy();
+        });
     });
 });

src/layouts/payment-method/payment-method.vue

@@ -26,7 +26,13 @@
                     servicePackageTitleWidgetName="ServicePackageTitle"
                     :availableVaps="availableVaps" />
                 <hr class="mt-0 mb-5" />
-                <div>Pia Alert Placeholder</div>
+                <alert
+                    v-if="displayPayInAdvanceAlert"
+                    name="payInAdvanceErrorAlert"
+                    class="my-4"
+                    cmsWidgetName="PayInAdvanceErrorAlertWidget"
+                    alertClass="alert-danger"
+                    :isDismissible="false" />
                 <paymentMethodQuestion
                         v-model="paymentMethodInternalModel"
                         cmsWidgetName="PaymentMethodWidget"
@@ -53,12 +59,14 @@ import siteSubHeader from '@/iss-components/site-sub-header/site-sub-header.vue'
 import reviewDropdown from '@/layouts/payment-method/review-dropdown/review-dropdown.vue';
 import cartDropdown from '@/iss-components/cart-dropdown/cart-dropdown.vue';
 import paymentMethodQuestion from '@/layouts/payment-method/payment-method-question/payment-method-question.vue';
+import alert from '@/ux-components/alert/alert.vue';
 
 // Supporting Items
 import settleAllPromises from '@/helpers/layout-helper';
 import { useMainStore } from '@/store';
 import { fetchCmsContentForPage } from '@/helpers/cms-content-helper';
 import { paymentMethods } from '@/constants/payment-method-constants';
+import queryStrings from '@/constants/query-strings';
 import globalRules from '@/constants/global-rules';
 import { Form } from 'vee-validate';
 import issPageValues from '@/router/router-constants/issPage-values';
@@ -75,7 +83,8 @@ export default {
         siteFooter,
         reviewDropdown,
         cartDropdown,
-        paymentMethodQuestion
+        paymentMethodQuestion,
+        alert
     },
     mixins: [baseFormMixin],
     async beforeRouteEnter(to, from, next) {
@@ -155,6 +164,11 @@ export default {
         },
         paymentMethod() {
             return this.paymentMethodInternalModel;
+        },
+        displayPayInAdvanceAlert() {
+            return (
+                this.$route.query[queryStrings.DISPLAY_PAY_IN_ADVANCE_ALERT]
+            );
         }
     },
     watch: {