From 5b92962624161788202c0c602f199f3f856b2ee6 Mon Sep 17 00:00:00 2001
From: Bill Richardson <william.richardson@safelite.com>
Date: Mon, 1 Apr 2024 08:37:09 -0400
Subject: [PATCH 1/2] add in PIA alert to payment-method page

---
 src/layouts/payment-method/payment-method.vue | 17 +++++++++++++++--
 1 file changed, 15 insertions(+), 2 deletions(-)

diff --git a/src/layouts/payment-method/payment-method.vue b/src/layouts/payment-method/payment-method.vue
index 34e1ed67..db73e424 100644
--- a/src/layouts/payment-method/payment-method.vue
+++ b/src/layouts/payment-method/payment-method.vue
@@ -26,7 +26,12 @@
                     servicePackageTitleWidgetName="ServicePackageTitle"
                     :availableVaps="availableVaps" />
                 <hr class="mt-0 mb-5" />
-                <div>Pia Alert Placeholder</div>
+                <alert
+                    v-if="displayPayInAdvanceAlert"
+                    class="my-4"
+                    cmsWidgetName="PayInAdvanceErrorAlertWidget"
+                    alertClass="alert-danger"
+                    :isDismissible="false" />
                 <paymentMethodQuestion
                         v-model="paymentMethodInternalModel"
                         cmsWidgetName="PaymentMethodWidget"
@@ -53,12 +58,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 +82,8 @@ export default {
         siteFooter,
         reviewDropdown,
         cartDropdown,
-        paymentMethodQuestion
+        paymentMethodQuestion,
+        alert
     },
     mixins: [baseFormMixin],
     async beforeRouteEnter(to, from, next) {
@@ -155,6 +163,11 @@ export default {
         },
         paymentMethod() {
             return this.paymentMethodInternalModel;
+        },
+        displayPayInAdvanceAlert() {
+            return (
+                this.$route.query[queryStrings.DISPLAY_PAY_IN_ADVANCE_ALERT]
+            );
         }
     },
     watch: {

From 64bf1f4ddb5942283044198133dbf205252bf92f Mon Sep 17 00:00:00 2001
From: Bill Richardson <william.richardson@safelite.com>
Date: Mon, 1 Apr 2024 14:56:28 -0400
Subject: [PATCH 2/2] Update tests and add tests for alert

---
 .../payment-method/payment-method.spec.js     | 71 +++++++++++++------
 src/layouts/payment-method/payment-method.vue |  1 +
 2 files changed, 52 insertions(+), 20 deletions(-)

diff --git a/src/layouts/payment-method/payment-method.spec.js b/src/layouts/payment-method/payment-method.spec.js
index 01e06a1e..476c9f59 100644
--- a/src/layouts/payment-method/payment-method.spec.js
+++ b/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() {
-    const mountOptions = getMountOptions();
+function setupMocks({ customMountOptions = {}, queryString }) {
+    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 payLaterPaymentMethod = paymentMethods.PAY_AT_TIME_OF_SERVICE;
-        useMainStore().savePaymentMethodChoice(payLaterPaymentMethod);
+            const wrapper = setupMocks({});
+            const payLaterPaymentMethod = paymentMethods.PAY_AT_TIME_OF_SERVICE;
+            useMainStore().savePaymentMethodChoice(payLaterPaymentMethod);
 
-        // Act
-        const paymethod = wrapper.vm.getPaymentMethodFromStore();
+            // Act
+            const paymethod = wrapper.vm.getPaymentMethodFromStore();
 
-        // Assert
-        expect(paymethod).toBe(payLaterPaymentMethod);
+            // Assert
+            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
-        const paymethod = wrapper.vm.getPaymentMethodFromStore();
+    describe('Pay In Advance Error Alert', () => {
+        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
-        expect(paymethod).not.toBe(payInAdvancePaymentMethod);
+            // Assert
+            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();
+        });
     });
 });
diff --git a/src/layouts/payment-method/payment-method.vue b/src/layouts/payment-method/payment-method.vue
index db73e424..a3f97d78 100644
--- a/src/layouts/payment-method/payment-method.vue
+++ b/src/layouts/payment-method/payment-method.vue
@@ -28,6 +28,7 @@
                 <hr class="mt-0 mb-5" />
                 <alert
                     v-if="displayPayInAdvanceAlert"
+                    name="payInAdvanceErrorAlert"
                     class="my-4"
                     cmsWidgetName="PayInAdvanceErrorAlertWidget"
                     alertClass="alert-danger"