From c4d3de73b2ad03e154dc10e75680970e70a62778 Mon Sep 17 00:00:00 2001
From: Bill Richardson <william.richardson@safelite.com>
Date: Tue, 12 Mar 2024 16:39:41 -0400
Subject: [PATCH 1/7] Updates for Mobile and Mobile ITAC

---
 src/layouts/payment-page/payment-page.vue     |  7 +--
 .../service-location/service-location.vue     | 45 +++++++++++++++----
 .../shop-question/shop-question.vue           |  8 +++-
 src/store/index.js                            |  3 +-
 4 files changed, 49 insertions(+), 14 deletions(-)

diff --git a/src/layouts/payment-page/payment-page.vue b/src/layouts/payment-page/payment-page.vue
index e2e24d52..5f1306ff 100644
--- a/src/layouts/payment-page/payment-page.vue
+++ b/src/layouts/payment-page/payment-page.vue
@@ -10,8 +10,8 @@
                         class="my-4"
                         cmsWidgetName="PayInAdvanceCreditCardErrorAlertWidget"
                         alertClass="alert-danger"
-                        @textLinkClicked="paymentFailedPayLater"
-                        :isDismissible="false" />
+                        :isDismissible="false"
+                        @textLinkClicked="paymentFailedPayLater" />
 
                     <div id="card-container">
                         <iframe
@@ -562,7 +562,8 @@ export default {
                 && providerLocation.zipCode
             );
 
-            const isMobile = serviceLocation.appointmentType === AppointmentTypeStrings.MOBILE;
+            const isMobile = (serviceLocation.appointmentType === AppointmentTypeStrings.MOBILE
+                || serviceLocation.appointmentType === AppointmentTypeStrings.MOBILE_NOT_ITAC_AND_NOT_NOCOMP);
 
             const serviceLocationReqs =
                 (isMobile && mobileReqs) || (!isMobile && dropOffInshopReqs);
diff --git a/src/layouts/service-location/service-location.vue b/src/layouts/service-location/service-location.vue
index 5571c571..20db5481 100644
--- a/src/layouts/service-location/service-location.vue
+++ b/src/layouts/service-location/service-location.vue
@@ -77,7 +77,8 @@
                     v-model="selectedProvider"
                     :selectedAppointmentType="selectedAppointmentType"
                     :isDisplayed="isShopQuestionDisplayed"
-                    cmsWidgetName="ShopQuestionWidget" />
+                    cmsWidgetName="ShopQuestionWidget"
+                    @updatedMobileProviderNumber="setMobileProviderNumber" />
                 <contentGroupModal
                     ref="RecalModal"
                     cmsWidgetName="RecalModal" />
@@ -183,7 +184,12 @@ export default {
         const resultMap = await settleAllPromises(promiseResultMap);
         next((vm) => {
             vm.setCmsContent(resultMap.cmsContent);
-            vm.setData(resultMap.zipCodeData, resultMap.serviceabilityDetails, resultMap.mobileFeePart);
+            vm.setData(
+                resultMap.zipCodeData,
+                resultMap.serviceabilityDetails,
+                resultMap.mobileFeePart,
+                resultMap.shopQuestionInitialData?.mobileProviderNumber
+            );
             vm.$refs.shopQuestion.initializeComponent(resultMap.shopQuestionInitialData);
         });
     },
@@ -206,6 +212,7 @@ export default {
             selectedAppointmentType: this.getSelectedAppointmentType(),
             selectedProvider: this.getSelectedProvider(),
             mobileFeePart: null,
+            mobileProviderNumber: null,
             zipContainsMilitaryBase: false,
             zipCodeCtu: null
         };
@@ -333,6 +340,19 @@ export default {
             await this.$refs.shopQuestion.reloadShopData(zipCode);
         },
         async forwardButtonAction() {
+            const providerToUse = this.isMobileLocationDisplayed
+                ? {
+                    providerNumber: this.mobileProviderNumber,
+                    address: {
+                        streetAddress: null,
+                        city: null,
+                        state: null,
+                        zipCode: null,
+                        zipCodeCtu: null
+                    }
+                }
+                : this.selectedProvider;
+
             useMainStore().saveServiceLocation({
                 address: this.streetAddress,
                 address2: this.streetAddress2,
@@ -343,13 +363,13 @@ export default {
                 appointmentType: this.selectedAppointmentType,
                 isVehicleProtected: this.isVehicleProtected,
                 provider: {
-                    providerNumber: this.selectedProvider?.providerNumber,
+                    providerNumber: providerToUse?.providerNumber,
                     address: {
-                        streetAddress: this.selectedProvider?.address?.streetAddress,
-                        city: this.selectedProvider?.address?.city,
-                        state: this.selectedProvider?.address?.state,
-                        zipCode: this.selectedProvider?.address?.zipCode,
-                        zipCodeCtu: this.selectedProvider?.address?.zipCodeCtu
+                        streetAddress: providerToUse?.address?.streetAddress,
+                        city: providerToUse?.address?.city,
+                        state: providerToUse?.address?.state,
+                        zipCode: providerToUse?.address?.zipCode,
+                        zipCodeCtu: providerToUse?.address?.zipCodeCtu
                     }
                 }
             });
@@ -386,7 +406,7 @@ export default {
         getSelectedProvider() {
             return useMainStore().order.serviceLocation.provider;
         },
-        setData(zipCodeData, serviceabilityDetails, mobileFeePart) {
+        setData(zipCodeData, serviceabilityDetails, mobileFeePart, mobileProviderNumber) {
             if (zipCodeData) {
                 this.zipContainsMilitaryBase = zipCodeData.containsMilitaryBase;
                 this.zipCodeCtu = zipCodeData.zipCodeCtu;
@@ -399,6 +419,10 @@ export default {
             if (mobileFeePart) {
                 this.mobileFeePart = mobileFeePart;
             }
+
+            if (mobileProviderNumber) {
+                this.mobileProviderNumber = mobileProviderNumber;
+            }
         },
         setContainsMilitaryBase(val) {
             if (this.zipContainsMilitaryBase !== val) {
@@ -408,6 +432,9 @@ export default {
         setMobileFeePart(mobileFeePart) {
             this.mobileFeePart = mobileFeePart;
         },
+        setMobileProviderNumber(providerNumber) {
+            this.mobileProviderNumber = providerNumber;
+        },
         resetMobileLocation() {
             this.streetAddress = '';
             this.streetAddress2 = '';
diff --git a/src/layouts/service-location/shop-question/shop-question.vue b/src/layouts/service-location/shop-question/shop-question.vue
index d5fc9da5..47a71198 100644
--- a/src/layouts/service-location/shop-question/shop-question.vue
+++ b/src/layouts/service-location/shop-question/shop-question.vue
@@ -78,7 +78,7 @@ export default {
         validationRules: String,
         isDisplayed: Boolean
     },
-    emits: ['update:modelValue'],
+    emits: ['update:modelValue', 'updatedMobileProviderNumber'],
     data() {
         return {
             shopProviders: [],
@@ -237,6 +237,12 @@ export default {
             const result = await this.loadData(serviceZipCode);
             this.initializeComponent(result.data);
 
+            if (result.data?.mobileProviderNumber
+                && (this.selectedAppointmentType === AppointmentTypeStrings.MOBILE
+                    || this.selectedAppointmentType === AppointmentTypeStrings.MOBILE_NOT_ITAC_AND_NOT_NOCOMP)) {
+                this.$emit('updatedMobileProviderNumber', result.data.mobileProviderNumber);
+            }
+
             this.resetAnswers();
 
             await nextTick();
diff --git a/src/store/index.js b/src/store/index.js
index 7f0a595b..09c18a81 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -1869,7 +1869,8 @@ export const useMainStore = defineStore({
             );
 
             let queryString = '';
-            if (appointmentType === 'Mobile') {
+            if (appointmentType === AppointmentTypeStrings.MOBILE
+                || appointmentType === AppointmentTypeStrings.MOBILE_NOT_ITAC_AND_NOT_NOCOMP) {
                 queryString =
                 `ParentAccountNumber=${applicationConfig.CASH_PARENT_ACCOUNT_NUMBER}`
                 + `&BillToAccountNumber=${billToAccountNumber}`

From 267500b1158cb6ce934731e2c9c55c8f3fe6268e Mon Sep 17 00:00:00 2001
From: Bill Richardson <william.richardson@safelite.com>
Date: Wed, 13 Mar 2024 11:12:05 -0400
Subject: [PATCH 2/7] pr updates

---
 src/layouts/payment-page/payment-page.vue         | 4 ++--
 src/layouts/service-location/service-location.vue | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/layouts/payment-page/payment-page.vue b/src/layouts/payment-page/payment-page.vue
index 5f1306ff..1ad52fd2 100644
--- a/src/layouts/payment-page/payment-page.vue
+++ b/src/layouts/payment-page/payment-page.vue
@@ -562,8 +562,8 @@ export default {
                 && providerLocation.zipCode
             );
 
-            const isMobile = (serviceLocation.appointmentType === AppointmentTypeStrings.MOBILE
-                || serviceLocation.appointmentType === AppointmentTypeStrings.MOBILE_NOT_ITAC_AND_NOT_NOCOMP);
+            const isMobile = serviceLocation.appointmentType === AppointmentTypeStrings.MOBILE
+                || serviceLocation.appointmentType === AppointmentTypeStrings.MOBILE_NOT_ITAC_AND_NOT_NOCOMP;
 
             const serviceLocationReqs =
                 (isMobile && mobileReqs) || (!isMobile && dropOffInshopReqs);
diff --git a/src/layouts/service-location/service-location.vue b/src/layouts/service-location/service-location.vue
index 20db5481..5fbb91c6 100644
--- a/src/layouts/service-location/service-location.vue
+++ b/src/layouts/service-location/service-location.vue
@@ -421,7 +421,7 @@ export default {
             }
 
             if (mobileProviderNumber) {
-                this.mobileProviderNumber = mobileProviderNumber;
+                this.setMobileProviderNumber(mobileProviderNumber);
             }
         },
         setContainsMilitaryBase(val) {

From 1e871812d6894b71bc56f7c2c89a8a6727f54872 Mon Sep 17 00:00:00 2001
From: Bill Richardson <william.richardson@safelite.com>
Date: Mon, 11 Mar 2024 15:26:34 -0400
Subject: [PATCH 3/7] Recyling Fee Modal

Stub for Link inside cart
Modal
CMS updated
Noticed the modal overlay doesnt cover the whole app, looked weird.
Added slot to content group modal
---
 .../cart-dropdown/cart-dropdown.vue           | 43 +++++++++++++++++--
 .../content-group-modal.vue                   |  1 +
 src/layouts/payment-method/payment-method.vue |  3 +-
 src/styles/common-styles.scss                 |  1 -
 4 files changed, 42 insertions(+), 6 deletions(-)

diff --git a/src/iss-components/cart-dropdown/cart-dropdown.vue b/src/iss-components/cart-dropdown/cart-dropdown.vue
index 774cdf3b..e160f425 100644
--- a/src/iss-components/cart-dropdown/cart-dropdown.vue
+++ b/src/iss-components/cart-dropdown/cart-dropdown.vue
@@ -38,12 +38,30 @@
                     <span id="base-price-value">{{ getDisplayed(baseServicePrice) }}</span>
                 </div>
             </div>
+            <!-- This next block of code will go inside the cart -->
+            <!-- *********************************************** -->
+            <br />
+            <textLink
+                linkType="text"
+                text="Recycling"
+                href="javascript:void(0)"
+                @clickEvent="openModal(recyclingModalCmsWidgetName)" />
+            <!-- *********************************************** -->
+            <!-- This block of code above, will go inside the cart -->
+            <contentGroupModal
+                ref="RecycleModal"
+                cmsWidgetName="RecycleModal">
+                <textBlock cmsWidgetName="RecycleTextBlock" />
+            </contentGroupModal>
         </div>
     </div>
 </template>
 
 <script>
 import { useMainStore } from '@/store';
+import contentGroupModal from '@/iss-components/content-group-modal/content-group-modal.vue';
+import textBlock from '@/digital-components/text-block/text-block.vue';
+import textLink from '@/ux-components/text-link/text-link.vue';
 import getPriceOfLineItems from '@/helpers/price-calculator.js';
 import { formatAmountInDollars } from '@/helpers/text-helper.js';
 
@@ -51,12 +69,12 @@ const VERIFYING_COVERAGE = 'Verifying coverage';
 
 export default {
     name: 'cart-dropdown',
-    components: {},
+    components: { contentGroupModal,
+        textBlock,
+        textLink },
     props: {
         showAsPaid: Boolean,
-        amountDueLabel: String,
-        deductibleLabel: String,
-        basePriceLabel: String
+        amountDueLabel: String
     },
     data() {
         const { currentDeductible } = useMainStore().order;
@@ -97,6 +115,9 @@ export default {
         }
     },
     methods: {
+        openModal(modalName) {
+            this.$refs[modalName].openModal();
+        },
         toggleIsExpanded() {
             this.isExpanded = !this.isExpanded;
         },
@@ -131,6 +152,20 @@ export default {
     visibility: hidden;
 }
 
+:deep(.modal-content a.external-text) {
+    text-underline-offset: 0.25rem;
+    line-height: 2;
+    padding: 0 0 0.25rem 0;
+    font-weight: 500;
+    max-width: -webkit-fit-content;
+    max-width: -moz-fit-content;
+    max-width: fit-content;
+}
+
+:deep(#RecycleModal h5) {
+    text-align: center;
+}
+
 .cart-toggle {
     &:after {
         content: "";
diff --git a/src/iss-components/content-group-modal/content-group-modal.vue b/src/iss-components/content-group-modal/content-group-modal.vue
index 020d69c1..b66a5113 100644
--- a/src/iss-components/content-group-modal/content-group-modal.vue
+++ b/src/iss-components/content-group-modal/content-group-modal.vue
@@ -21,6 +21,7 @@
             v-if="ModalSubBodyText"
             class="my-4 caption modal-sub-body"
             v-html="ModalSubBodyText"></p>
+        <slot></slot>
     </modal>
 </template>
 
diff --git a/src/layouts/payment-method/payment-method.vue b/src/layouts/payment-method/payment-method.vue
index 6f8a6010..0052026e 100644
--- a/src/layouts/payment-method/payment-method.vue
+++ b/src/layouts/payment-method/payment-method.vue
@@ -23,7 +23,8 @@
                     :showAsPaid="false"
                     :amountDueLabel="amountDueText"
                     :deductibleLabel="deductibleLabel"
-                    :basePriceLabel="basePriceLabel" />
+                    :basePriceLabel="basePriceLabel"
+                    recyclingModalCmsWidgetName="RecycleModal" />
                 <hr class="mt-0 mb-5" />
                 <div>Pia Alert Placeholder</div>
                 <paymentMethodQuestion
diff --git a/src/styles/common-styles.scss b/src/styles/common-styles.scss
index afbb0049..9cd9ef86 100644
--- a/src/styles/common-styles.scss
+++ b/src/styles/common-styles.scss
@@ -64,7 +64,6 @@ body {
         left: 50%;
         transform: translateX(-50%);
         max-width: 576px;
-        height: calc(100% - 72px);
 
         &.show {
             opacity: 0.4;

From 8d29cfb79779dde53eafa82e085340698253aa5c Mon Sep 17 00:00:00 2001
From: Bill Richardson <william.richardson@safelite.com>
Date: Wed, 13 Mar 2024 11:22:52 -0400
Subject: [PATCH 4/7] place recycle link roughly where it will go in the cart.

patch an issue found with scrolling when modal open
---
 .../cart-dropdown/cart-dropdown.vue           | 40 +++++++++++--------
 src/styles/common-styles.scss                 |  4 ++
 2 files changed, 27 insertions(+), 17 deletions(-)

diff --git a/src/iss-components/cart-dropdown/cart-dropdown.vue b/src/iss-components/cart-dropdown/cart-dropdown.vue
index e160f425..e8018229 100644
--- a/src/iss-components/cart-dropdown/cart-dropdown.vue
+++ b/src/iss-components/cart-dropdown/cart-dropdown.vue
@@ -16,6 +16,7 @@
         <div
             id="cart-table"
             class="cart-table">
+            <!-- Deductible Line Item -->
             <div
                 id="cart-deductible-or-base-price"
                 class="mt-4 cart-line-item color-gray-100 px-5 py-1">
@@ -38,22 +39,26 @@
                     <span id="base-price-value">{{ getDisplayed(baseServicePrice) }}</span>
                 </div>
             </div>
-            <!-- This next block of code will go inside the cart -->
-            <!-- *********************************************** -->
-            <br />
-            <textLink
-                linkType="text"
-                text="Recycling"
-                href="javascript:void(0)"
-                @clickEvent="openModal(recyclingModalCmsWidgetName)" />
-            <!-- *********************************************** -->
-            <!-- This block of code above, will go inside the cart -->
-            <contentGroupModal
-                ref="RecycleModal"
-                cmsWidgetName="RecycleModal">
-                <textBlock cmsWidgetName="RecycleTextBlock" />
-            </contentGroupModal>
+
+            <!-- Packaged Cart Items -->
+
+            <!-- Nonpackaged Cart Items -->
+            <!-- This will be a loop when this is implemented -->
+            <div class="non-packaged-cart-item">
+                <textLink
+                    linkType="text"
+                    text="Recycling"
+                    href="javascript:void(0)"
+                    @clickEvent="openModal(recyclingModalCmsWidgetName)" />
+            </div>
+
+            <!-- Sub total, sales tax, total columns -->
         </div>
+        <contentGroupModal
+            ref="RecycleModal"
+            cmsWidgetName="RecycleModal">
+            <textBlock cmsWidgetName="RecycleTextBlock" />
+        </contentGroupModal>
     </div>
 </template>
 
@@ -73,8 +78,9 @@ export default {
         textBlock,
         textLink },
     props: {
-        showAsPaid: Boolean,
-        amountDueLabel: String
+        amountDueLabel: String,
+        recyclingModalCmsWidgetName: String,
+        showAsPaid: Boolean
     },
     data() {
         const { currentDeductible } = useMainStore().order;
diff --git a/src/styles/common-styles.scss b/src/styles/common-styles.scss
index 9cd9ef86..357c14d1 100644
--- a/src/styles/common-styles.scss
+++ b/src/styles/common-styles.scss
@@ -78,6 +78,10 @@ body {
 
     // Prevent scroll when modal is open
     &.modal-open {
+        div.page-container-grouped-styles {
+            overflow: hidden;
+        }
+
         .fade-on-route-transition {
             overflow: hidden;
         }

From 6245afaca70e0c27ed693802f55e9c830453dda4 Mon Sep 17 00:00:00 2001
From: Bill Richardson <william.richardson@safelite.com>
Date: Wed, 13 Mar 2024 11:29:50 -0400
Subject: [PATCH 5/7] add props removed on merge

---
 src/iss-components/cart-dropdown/cart-dropdown.vue | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/iss-components/cart-dropdown/cart-dropdown.vue b/src/iss-components/cart-dropdown/cart-dropdown.vue
index e8018229..f636e511 100644
--- a/src/iss-components/cart-dropdown/cart-dropdown.vue
+++ b/src/iss-components/cart-dropdown/cart-dropdown.vue
@@ -79,6 +79,8 @@ export default {
         textLink },
     props: {
         amountDueLabel: String,
+        basePriceLabel: String,
+        deductibleLabel: String,
         recyclingModalCmsWidgetName: String,
         showAsPaid: Boolean
     },

From 1371f9856bac70ea27b7a316c8c2faf6dc6599db Mon Sep 17 00:00:00 2001
From: Bill Richardson <william.richardson@safelite.com>
Date: Wed, 13 Mar 2024 13:41:01 -0400
Subject: [PATCH 6/7] display error message on failure

---
 src/layouts/payment-page/payment-page.vue | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/src/layouts/payment-page/payment-page.vue b/src/layouts/payment-page/payment-page.vue
index 1ad52fd2..3c0c8913 100644
--- a/src/layouts/payment-page/payment-page.vue
+++ b/src/layouts/payment-page/payment-page.vue
@@ -12,6 +12,14 @@
                         alertClass="alert-danger"
                         :isDismissible="false"
                         @textLinkClicked="paymentFailedPayLater" />
+                    <alert
+                        v-if="displayPayInAdvanceAfterPayAlert"
+                        name="payInAdvanceAfterPayErrorAlert"
+                        class="my-4"
+                        cmsWidgetName="PayInAdvanceAfterpayErrorAlertWidget"
+                        alertClass="alert-danger"
+                        :isDismissible="false"
+                        @textLinkClicked="paymentFailedPayLater" />
 
                     <div id="card-container">
                         <iframe
@@ -537,6 +545,9 @@ export default {
         },
         displayPayInAdvanceCreditCardAlert() {
             return this.displayPayInAdvanceAlert(paymentMethods.CREDIT_CARD);
+        },
+        displayPayInAdvanceAfterPayAlert() {
+            return this.displayPayInAdvanceAlert(paymentMethods.AFTERPAY);
         }
     },
     methods:

From 3c6740e665d1a14879a84f9fbe8dafc61039ef00 Mon Sep 17 00:00:00 2001
From: Bill Richardson <william.richardson@safelite.com>
Date: Wed, 13 Mar 2024 14:01:05 -0400
Subject: [PATCH 7/7] Add Test for Afterpay alert

---
 src/layouts/payment-page/payment-page.spec.js | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)

diff --git a/src/layouts/payment-page/payment-page.spec.js b/src/layouts/payment-page/payment-page.spec.js
index 04d62db0..2e2f62ef 100644
--- a/src/layouts/payment-page/payment-page.spec.js
+++ b/src/layouts/payment-page/payment-page.spec.js
@@ -468,4 +468,21 @@ describe('payment-page.vue', () => {
             expect(creditCardErrorAlert.isVisible()).toBeTruthy();
         });
     });
+
+    describe('AfterPay Error Alert', () => {
+        test('show after pay error alert', () => {
+            // Arrange
+            const queryString = {
+                [queryStrings.DISPLAY_PAY_IN_ADVANCE_ALERT]: paymentMethods.AFTERPAY
+            };
+            const wrapper = setupMocks({ queryString });
+
+            // Act
+
+            // Assert
+            const afterPayErrorAlert = wrapper.find('[name="payInAdvanceAfterPayErrorAlert"]');
+            expect(afterPayErrorAlert.exists()).toBeTruthy();
+            expect(afterPayErrorAlert.isVisible()).toBeTruthy();
+        });
+    });
 });