From d1fea91e3012dba029d5e943b11d672031288a1f Mon Sep 17 00:00:00 2001
From: AdamCaouetteSafelite <adam.caouette@safelite.com>
Date: Fri, 14 Nov 2025 03:35:13 -0500
Subject: [PATCH 1/3] CASH-1757: changed afterpay banner and modal

---
 src/digital-components/modal/modal.vue        |   2 +
 .../afterpay-modal-banner.vue                 | 247 ++++++++++++++----
 src/layouts/quote/quote.vue                   |   6 +-
 3 files changed, 197 insertions(+), 58 deletions(-)

diff --git a/src/digital-components/modal/modal.vue b/src/digital-components/modal/modal.vue
index 867e73c75..3c3efd05b 100644
--- a/src/digital-components/modal/modal.vue
+++ b/src/digital-components/modal/modal.vue
@@ -33,6 +33,7 @@
                 <div class="modal-footer">
                     <slot name="modal-footer-slot"></slot>
                     <modalButtonMain
+                        v-if="!isFooterButtonSuppressed"
                         :isPrimary="isFooterButtonPrimary"
                         class="w-100 modal-footer-button"
                         :id="modalId + '-modalbtn'"
@@ -67,6 +68,7 @@ export default {
         staticBackdrop: Boolean,
         footerButtonDisabled: Boolean,
         isFooterButtonPrimary: Boolean,
+        isFooterButtonSuppressed: Boolean,
         onModalOpenedCallback: {
             type: Function,
         },
diff --git a/src/layouts/quote/afterpay-modal-banner/afterpay-modal-banner.vue b/src/layouts/quote/afterpay-modal-banner/afterpay-modal-banner.vue
index 3b0e0042a..8dda8d949 100644
--- a/src/layouts/quote/afterpay-modal-banner/afterpay-modal-banner.vue
+++ b/src/layouts/quote/afterpay-modal-banner/afterpay-modal-banner.vue
@@ -1,10 +1,5 @@
 <template>
-    <div id="afterpay-banner" role="alert">
-        <component
-            :is="'script'"
-            src="https://js.squarecdn.com/square-marketplace.js"
-            async></component>
-
+    <div class="afterpay-modal-banner" role="alert">
         <div>
             <span
                 class="callout"
@@ -22,22 +17,53 @@
                 <span v-else v-html="token"></span>
                 <span class="nbsp">&nbsp;</span>
             </span>
-            <a
-                id="afterpay-learnmore"
-                href="#"
-                data-afterpay-modal="en_US"
-                data-bind="click:afterpayLearnMore">
-                {{ modalCopy }}
-            </a>
+            <textLink
+                linkType="text"
+                :text="bannerCta"
+                href="javascript:void(0)"
+                @click-event="openModal" />
         </div>
     </div>
+    <modal
+        :ref="modalName"
+        class="afterpay-modal"
+        :headerText="modalHeaderText"
+        :onModalOpenedCallback="openModal"
+        :isFooterButtonSuppressed="true">
+        <template v-slot:modal-header-slot>
+            <span>{{ modalSubHeaderText }}</span>
+        </template>
+        <template v-slot>
+            <span class="afterpay-sections">
+                <span
+                    v-for="section in afterpaySectionsContent"
+                    :key="section"
+                    class="afterpay-section">
+                    <span class="section-header">
+                        <img v-if="section.AnswerImageUrl" :src="section.AnswerImageUrl" />
+                        <h3 v-if="section.Text" v-html="section.Text"></h3>
+                    </span>
+                    <span v-html="section.content"></span>
+                </span>
+            </span>
+        </template>
+        <template v-slot:modal-footer-slot>
+            <p class="modal-disclaimer" v-html="modalDisclaimerText"></p>
+        </template>
+    </modal>
 </template>
 
 <script>
-import { splitCopyOnCMSPlaceHolder, splitCMSCopyOnBR } from "@/helpers/cms-content-helper";
-import baseMixin from "@/mixins/base-mixin.js";
-import { getPromosThatMatchLineItemsOnOrder } from "@/helpers/promotions-helper";
-import { getArrayOfAllLineItemsAndChildParts } from "@/store";
+import {
+    doesCopyContainTextLink,
+    splitCopyOnCMSPlaceHolder,
+    getRouterLinkRouteFromCopy,
+    getRouterLinkDisplayTextFromCopy,
+    getExternalLink,
+    splitCMSCopyOnBR,
+} from "@/helpers/cms-content-helper";
+import textLink from "@/ux-components/text-link/text-link";
+import modal from "@/digital-components/modal/modal";
 
 const INLINE_IMAGE_TOKEN = "custom:inlineImage";
 const AFTERPAY_PRICE_TOKEN = "custom:afterpayPrice";
@@ -48,20 +74,16 @@ function isInlineImageToken(token) {
 function isAfterpayPriceToken(token) {
     return token.includes(AFTERPAY_PRICE_TOKEN);
 }
-
 function getInlineAltText(token) {
     const innerTokens = token.split(",");
-
     return innerTokens[1] ?? "";
 }
 
 export default {
-    name: "afterpay-modal-banner",
+    name: "afterpay-banner",
     props: {
         cmsWidgetName: String,
-        lineItems: Array,
-        isInsuranceSelected: Boolean,
-        afterpayExtendedPayOptionThreshold: Number,
+        modalWidgetName: String,
     },
     data() {
         return {};
@@ -70,6 +92,17 @@ export default {
         isInlineImageToken,
         isAfterpayPriceToken,
         getInlineAltText,
+        doesCopyContainTextLink,
+        splitCopyOnCMSPlaceHolder,
+        getRouterLinkRouteFromCopy,
+        getRouterLinkDisplayTextFromCopy,
+        getExternalLink,
+        openModal() {
+            this.modal.openModal();
+        },
+        closeModal() {
+            this.modal.closeModal();
+        },
     },
     computed: {
         imageUrl() {
@@ -84,39 +117,41 @@ export default {
         afterpayCopyTokens() {
             return splitCopyOnCMSPlaceHolder(this.getCmsContent(this.cmsWidgetName, "BodyText"));
         },
-        modalCopy() {
+        bannerCta() {
             return this.getCmsContent(this.cmsWidgetName, "FooterText");
         },
-        getTierOnePackagePrice() {
-            let allLineItems = getArrayOfAllLineItemsAndChildParts(this.lineItems);
-            if (this.lineItems.promos) {
-                allLineItems = allLineItems?.filter((item) => item.partType !== "PROMO_DISCOUNT");
-            }
-
-            let price = baseMixin.methods.getTierOnePackagePrice(
-                baseMixin.methods.filterOutFees(allLineItems)
-            );
-
-            if (this.lineItems.promos) {
-                let allLineItems = getArrayOfAllLineItemsAndChildParts(this.lineItems);
-                const promos = getPromosThatMatchLineItemsOnOrder(
-                    this.lineItems.promos,
-                    allLineItems
-                );
-                promos.forEach((promo) => {
-                    price += baseMixin.methods.getTotalLineItemPrice(promo);
-                });
-            }
-
-            return price;
+        modalHeaderText() {
+            return this.getCmsContent(this.modalWidgetName, "HeaderText");
+        },
+        modalDisclaimerText() {
+            return this.getCmsContent(this.modalWidgetName, "BodyText2");
+        },
+        modalName() {
+            return this.modalWidgetName;
+        },
+        modal() {
+            return this.$refs[this.modalName];
+        },
+        afterpaySectionsContent() {
+            const sections = this.getCmsContent("AfterpayModalSectionsWidget", "Answers");
+            if (!sections) return;
+            sections.forEach((section) => {
+                const sectionContent = this.getCmsContent(section.Name, "BodyText");
+                section["content"] = sectionContent;
+                console.log("section: ", section);
+            });
+            return sections;
         },
     },
-    components: {},
+    components: {
+        textLink,
+        modal,
+    },
 };
 </script>
 
 <style lang="scss" scoped>
-#afterpay-banner {
+.afterpay-modal-banner {
     display: flex;
     flex-direction: column;
     background-color: $blue-150;
@@ -166,12 +201,116 @@ export default {
             max-width: 32rem;
         }
     }
-    & .alert-heading {
-        font-size: 0.875rem;
+}
+
+.afterpay-modal {
+    &.modal.modal-component {
+        :deep(.modal-dialog) {
+            margin: 0 1rem;
+            top: 0;
+
+            @include media-breakpoint-up(md) {
+                width: 100%;
+                max-width: 840px;
+                top: 3.4rem;
+                right: 0;
+                left: 0;
+                transform: none;
+                margin: 0 auto;
+                padding: 0 1rem;
+            }
+            .modal-content {
+                border-radius: 0.5rem;
+                margin: 1.5rem 0;
+
+                .modal-header.mt-6 {
+                    background-color: $blue-100;
+                    margin-top: 0;
+                    padding: 1.5rem 2rem 1.5rem 1.5rem;
+                    font-family: UrbanistSemibold;
+
+                    .modal-title.justify-content-center {
+                        // OVERRIDE
+                        justify-content: left;
+                    }
+                    .btn-close {
+                        top: 1.25rem;
+                        right: 1.5rem;
+                    }
+                }
+                .afterpay-section {
+                    display: block;
+                    border: 1px solid $gray-200;
+                    border-radius: 0.25rem;
+                    padding: 1rem;
+
+                    .section-header {
+                        display: flex;
+                        align-items: center;
+                        margin-bottom: 1rem;
+
+                        img {
+                            width: 40px;
+                            height: 40px;
+                        }
+                        h3 {
+                            font-family: UrbanistSemibold;
+                            font-size: 1rem;
+                            margin: 0 0 0 0.5rem;
+                        }
+                    }
+                    p {
+                        font-size: 0.75rem;
+                    }
+                    strong {
+                        font-family: UrbanistSemibold;
+                        font-size: 0.875rem;
+                    }
+                }
+
+                .modal-body {
+                    padding: 1.5rem;
+
+                    .afterpay-sections {
+                        @include media-breakpoint-up(md) {
+                            display: flex;
+                            column-gap: 1rem;
+                            align-items: stretch;
+                        }
+                        .afterpay-section {
+                            margin-bottom: 1rem;
+
+                            @include media-breakpoint-up(md) {
+                                flex: 0 1 33%;
+                                margin-bottom: 0;
+                            }
+
+                            &:last-of-type {
+                                margin-bottom: 0;
+                            }
+                        }
+                    }
+                }
+            }
+            &.modal-dialog-centered {
+                height: auto;
+                min-height: auto;
+            }
+        }
+    }
+
+    :deep(.modal-footer) {
+        position: relative;
+        background: $gray-100;
+
+        .modal-disclaimer {
+            font-style: italic;
+            font-size: 0.75rem;
+            a {
+                padding: 0;
+                line-height: 1.625;
+            }
+        }
     }
 }
-#afterpay-learnmore {
-    font-weight: 600;
-    font-size: 0.875rem;
-}
 </style>
diff --git a/src/layouts/quote/quote.vue b/src/layouts/quote/quote.vue
index 78d6c24ff..17326ec8e 100644
--- a/src/layouts/quote/quote.vue
+++ b/src/layouts/quote/quote.vue
@@ -46,10 +46,8 @@
                     <!-- If Cash AND vehicle does not require recal OR if Cash AND State requires showing recal, then show Afterpay banner -->
                     <afterpayModalBanner
                         v-if="showAfterpayBanner"
-                        cmsWidgetName="AfterpayModalWidget"
-                        :afterpayExtendedPayOptionThreshold="afterpayExtendedPayOptionThreshold"
-                        :isInsuranceSelected="isInsuranceSelected"
-                        :lineItems="lineItems" />
+                        cmsWidgetName="AfterpayBannerWidget"
+                        modalWidgetName="AfterpayModalWidget" />
 
                     <!-- If vehicle requires recal AND we are hiding recal pricing info, then show recal disclaimer banner. -->
                     <recalDisclaimer

From a20b40781450377aa6e4012b253b7dd581a944d0 Mon Sep 17 00:00:00 2001
From: AdamCaouetteSafelite <adam.caouette@safelite.com>
Date: Fri, 14 Nov 2025 03:47:58 -0500
Subject: [PATCH 2/3] CASH-1757: minor suggestion fixes from copilot again

---
 .../quote/afterpay-modal-banner/afterpay-modal-banner.vue     | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/layouts/quote/afterpay-modal-banner/afterpay-modal-banner.vue b/src/layouts/quote/afterpay-modal-banner/afterpay-modal-banner.vue
index 8dda8d949..a580e1006 100644
--- a/src/layouts/quote/afterpay-modal-banner/afterpay-modal-banner.vue
+++ b/src/layouts/quote/afterpay-modal-banner/afterpay-modal-banner.vue
@@ -28,7 +28,6 @@
         :ref="modalName"
         class="afterpay-modal"
         :headerText="modalHeaderText"
-        :onModalOpenedCallback="openModal"
         :isFooterButtonSuppressed="true">
         <template v-slot:modal-header-slot>
             <span>{{ modalSubHeaderText }}</span>
@@ -138,7 +137,6 @@ export default {
             sections.forEach((section) => {
                 const sectionContent = this.getCmsContent(section.Name, "BodyText");
                 section["content"] = sectionContent;
-                console.log("section: ", section);
             });
             return sections;
         },
@@ -231,7 +229,7 @@ export default {
 
                     .modal-title.justify-content-center {
                         // OVERRIDE
-                        justify-content: left;
+                        justify-content: flex-start;
                     }
                     .btn-close {
                         top: 1.25rem;

From 3710a5a692217c014843c415e9f84a097584a2ed Mon Sep 17 00:00:00 2001
From: AdamCaouetteSafelite <adam.caouette@safelite.com>
Date: Fri, 14 Nov 2025 03:52:09 -0500
Subject: [PATCH 3/3] CASH-1757: even more copilot suggestions

---
 .../quote/afterpay-modal-banner/afterpay-modal-banner.vue   | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/layouts/quote/afterpay-modal-banner/afterpay-modal-banner.vue b/src/layouts/quote/afterpay-modal-banner/afterpay-modal-banner.vue
index a580e1006..0e6cde03d 100644
--- a/src/layouts/quote/afterpay-modal-banner/afterpay-modal-banner.vue
+++ b/src/layouts/quote/afterpay-modal-banner/afterpay-modal-banner.vue
@@ -97,10 +97,10 @@ export default {
         getRouterLinkDisplayTextFromCopy,
         getExternalLink,
         openModal() {
-            this.modal.openModal();
+            this.modal?.openModal();
         },
         closeModal() {
-            this.modal.closeModal();
+            this.modal?.closeModal();
         },
     },
     computed: {
@@ -133,7 +133,7 @@ export default {
         },
         afterpaySectionsContent() {
             const sections = this.getCmsContent("AfterpayModalSectionsWidget", "Answers");
-            if (!sections) return;
+            if (!sections) return [];
             sections.forEach((section) => {
                 const sectionContent = this.getCmsContent(section.Name, "BodyText");
                 section["content"] = sectionContent;