From 059c5bc25a700c8674f864fcca40bbbb27a8feaf Mon Sep 17 00:00:00 2001
From: Chris Redelinghuys <chris.redelinghuys@safelite.com>
Date: Wed, 25 Jun 2025 14:57:02 -0400
Subject: [PATCH 1/4] CASH-952: Afterpay banner update

---
 src/constants/experiments.js                  |   1 +
 src/helpers/cms-content-helper.js             |   4 +
 .../afterpay-modal-banner.vue                 | 110 ++++++++++++------
 src/layouts/quote/quote.vue                   |  19 ++-
 src/styles/ux-variables.scss                  |   8 +-
 5 files changed, 91 insertions(+), 51 deletions(-)

diff --git a/src/constants/experiments.js b/src/constants/experiments.js
index 871c6fd24..6a2796da9 100644
--- a/src/constants/experiments.js
+++ b/src/constants/experiments.js
@@ -26,6 +26,7 @@ const experimentSettings = {
     FOSTER_LOVE: "DisplayFosterLove",
     SKIP_TO_INSURANCE: "SkipToInsurance",
     DISPLAY_AFTERPAY_BREAKOUT_DISPLAY: "Display_AfterpayBreakoutDisplay",
+    AFTERPAY_EXTENDED_PAY_OPTION_THRESHOLD: "AfterPayExtendedPayOptionThreshold",
     DYNAMO_LOGGING: "DynamoLogging",
 };
 
diff --git a/src/helpers/cms-content-helper.js b/src/helpers/cms-content-helper.js
index c1d28097a..727add296 100644
--- a/src/helpers/cms-content-helper.js
+++ b/src/helpers/cms-content-helper.js
@@ -339,3 +339,7 @@ export function splitCMSCopyOnParagraphTag(copy) {
     // filter removes empty strings that are a result of string.split with regex
     return copy.split(/(?:<p(?:.*?)>)|(?:<\/p>)/g).filter((paragraph) => paragraph !== "");
 }
+
+export function splitCMSCopyOnBR(copy) {
+    return copy.split("<br>");
+}
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 4c3644cac..32960509c 100644
--- a/src/layouts/quote/afterpay-modal-banner/afterpay-modal-banner.vue
+++ b/src/layouts/quote/afterpay-modal-banner/afterpay-modal-banner.vue
@@ -1,13 +1,14 @@
 <template>
-    <div class="alert fade show my-2 py-2 border-0 alert-info" role="alert">
+    <div id="afterpay-banner" role="alert">
         <component
             :is="'script'"
             src="https://js.squarecdn.com/square-marketplace.js"
             async></component>
 
-        <div
-            class="mx-4 my-0 alert-heading text-center"
-            :class="[isAfterpayBreakoutDisplay ? 'fw-bolder' : 'fw-bold']">
+        <div>
+            <span v-for="token in headerCopyTokens" :key="token" v-html="token"></span>
+        </div>
+        <div :id="showAfterpayExtendedPayOption ? 'extended-pay-option' : ''">
             <span v-for="token in afterpayCopyTokens" :key="token">
                 <span v-if="isAfterpayPriceToken(token)">{{ afterpayPrice }}</span>
                 <span v-else-if="isInlineImageToken(token)">
@@ -29,7 +30,7 @@
 </template>
 
 <script>
-import { splitCopyOnCMSPlaceHolder } from "@/helpers/cms-content-helper";
+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";
@@ -55,8 +56,8 @@ export default {
     props: {
         cmsWidgetName: String,
         lineItems: Array,
-        isAfterpayBreakoutDisplay: Boolean,
         isInsuranceSelected: Boolean,
+        afterpayExtendedPayOptionThreshold: Number,
     },
     data() {
         return {};
@@ -73,27 +74,24 @@ export default {
         hasImage() {
             return !!this.imageUrl;
         },
+        headerCopyTokens() {
+            return splitCMSCopyOnBR(this.getCmsContent(this.cmsWidgetName, "HeaderText"));
+        },
         afterpayCopyTokens() {
-            if (this.isAfterpayBreakoutDisplay) {
-                // Text for Afterpay Breakout experiment
-                var afterpayBannerCopy = this.getCmsContent(this.cmsWidgetName, "BodyText2");
-                afterpayBannerCopy =
-                    afterpayBannerCopy &&
-                    afterpayBannerCopy.replaceAll(
-                        "{custom:paymentType}",
-                        this.isInsuranceSelected ? "deductible" : "spending"
-                    );
-                return splitCopyOnCMSPlaceHolder(afterpayBannerCopy);
+            if (this.showAfterpayExtendedPayOption) {
+                return splitCopyOnCMSPlaceHolder(
+                    this.getCmsContent(this.cmsWidgetName, "BodyText")
+                );
             } else {
                 return splitCopyOnCMSPlaceHolder(
-                    this.getCmsContent(this.cmsWidgetName, "HeaderText")
+                    this.getCmsContent(this.cmsWidgetName, "BodyText2")
                 );
             }
         },
         modalCopy() {
-            return this.getCmsContent(this.cmsWidgetName, "BodyText");
+            return this.getCmsContent(this.cmsWidgetName, "FooterText");
         },
-        afterpayPrice() {
+        getTierOnePackagePrice() {
             let allLineItems = getArrayOfAllLineItemsAndChildParts(this.lineItems);
             if (this.lineItems.promos) {
                 allLineItems = allLineItems?.filter((item) => item.partType !== "PROMO_DISCOUNT");
@@ -119,38 +117,76 @@ export default {
                 });
             }
 
+            return price;
+        },
+        afterpayPrice() {
+            let price = this.getTierOnePackagePrice;
             const adjusted = (price / 4).toFixed(2);
 
             return `$${adjusted}`;
         },
+        showAfterpayExtendedPayOption() {
+            return (
+                this.afterpayExtendedPayOptionThreshold &&
+                this.getTierOnePackagePrice >= this.afterpayExtendedPayOptionThreshold
+            );
+        },
     },
     components: {},
 };
 </script>
 
 <style lang="scss" scoped>
-.alert {
-    padding: 0.675rem 0;
-    &.alert-info {
-        background-color: $blue-100;
-        .alert-heading {
-            color: $blue-700;
+#afterpay-banner {
+    display: flex;
+    flex-direction: column;
+    background-color: $blue-150;
+    justify-content: center;
+    align-items: center;
+    padding: 1rem;
+    border-radius: 1rem;
+    @include media-breakpoint-up(md) {
+        flex-direction: row;
+    }
+
+    > div:first-of-type {
+        display: flex;
+        color: $black;
+        font-size: $font-size-20;
+        font-weight: $font-weight-600;
+        line-height: 2rem;
+        @include media-breakpoint-down(md) {
+            border-bottom: 1px solid;
+            padding-bottom: 1rem;
+            width: 100%;
+            justify-content: center;
+
+            > span:first-of-type {
+                margin-right: 0.25rem;
+            }
         }
-        &.fw-bolder {
-            font-weight: 600;
-        }
-        img {
-            vertical-align: text-top;
-        }
-        svg {
-            fill: $blue-700;
-            width: 1rem;
-            height: 1rem;
+        @include media-breakpoint-up(md) {
+            flex-direction: column;
+            border-right: 1px solid;
+            padding-right: 1rem;
         }
     }
-    & .alert-heading {
-        font-size: 0.875rem;
+
+    > div:last-of-type {
+        color: $gray-650;
+        text-align: left;
+        @include media-breakpoint-down(md) {
+            padding-top: 1rem;
+        }
+        @include media-breakpoint-up(md) {
+            padding-left: 1rem;
+
+            &#extended-pay-option {
+                max-width: 28rem;
+            }
+        }
     }
+
     #afterpay-learnmore {
         white-space: nowrap;
     }
diff --git a/src/layouts/quote/quote.vue b/src/layouts/quote/quote.vue
index e7039da54..be85a5dab 100644
--- a/src/layouts/quote/quote.vue
+++ b/src/layouts/quote/quote.vue
@@ -46,7 +46,7 @@
                     <afterpayModalBanner
                         v-if="showAfterpayBanner"
                         cmsWidgetName="AfterpayModalWidget"
-                        :isAfterpayBreakoutDisplay="isAfterpayBreakoutDisplay"
+                        :afterpayExtendedPayOptionThreshold="afterpayExtendedPayOptionThreshold"
                         :isInsuranceSelected="isInsuranceSelected"
                         :lineItems="lineItems" />
 
@@ -591,10 +591,7 @@ export default {
             );
         },
         showAfterpayBanner() {
-            return (
-                (this.isAfterpayBreakoutDisplay || !this.isInsuranceSelected) &&
-                (!this.isRecalibrationOnOrder || !this.shouldHideRecalibration)
-            );
+            return !this.isRecalibrationOnOrder || !this.shouldHideRecalibration;
         },
         isRecalPriceRemove() {
             return (
@@ -606,14 +603,12 @@ export default {
         showRecalDisclaimer() {
             return this.isRecalibrationOnOrder && this.isRecalPriceRemove;
         },
-        isAfterpayBreakoutDisplay() {
-            return (
-                (!this.isRecalPriceRemove || !this.isRecalibrationOnOrder) &&
-                experimentMixin.methods.hasSettingEqualTo(
-                    experimentSettings.DISPLAY_AFTERPAY_BREAKOUT_DISPLAY,
-                    "true"
-                )
+        afterpayExtendedPayOptionThreshold() {
+            let thresholdAmount = experimentMixin.methods.getSettingValue(
+                experimentSettings.AFTERPAY_EXTENDED_PAY_OPTION_THRESHOLD
             );
+            thresholdAmount && (thresholdAmount = parseInt(thresholdAmount));
+            return thresholdAmount;
         },
     },
     methods: {
diff --git a/src/styles/ux-variables.scss b/src/styles/ux-variables.scss
index 69ba0d7ac..178d50d35 100644
--- a/src/styles/ux-variables.scss
+++ b/src/styles/ux-variables.scss
@@ -7,6 +7,7 @@ $black-100: #0a0a0a;
 
 // Blues
 $blue-100: #e4f1f7; // Used in theme
+$blue-150: #e5f1fa;
 $blue-200: #c1dfee;
 $blue-300: #9fcee6;
 $blue-400: #69adcf; // Used in theme
@@ -59,6 +60,7 @@ $gray: #b0b3b3; // Default Gray
 $gray-500: #8e9292; // Used in theme
 $gray-550: #727676; // Used in theme
 $gray-600: #4d5151; // Used in theme
+$gray-650: #525656;
 $gray-700: #303333; // Used in theme
 $gray-800: #222424; // Used in theme
 $gray-900: #181a1a; // Used in theme
@@ -121,13 +123,15 @@ $body-color: $gray-600;
 
 //Fonts
 $font-family-sans-serif: UrbanistRegular, Arial, Helvetica, sans-serif;
-$font-family-monospace: UrbanistRegular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New",
-    monospace;
+$font-family-monospace:
+    UrbanistRegular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
 // stylelint-enable value-keyword-case
 $font-family-base: $font-family-sans-serif;
 $font-family-code: $font-family-monospace;
 $font-size-base: 1rem; // Assumes the browser default, typically `16px`
 
+$font-size-20: $font-size-base * 1.25; // 20px
+
 //Custom Font size (extra small)
 $font-size-xsm: $font-size-base * 0.75;
 $font-sizes: (

From aafc3d15df65c7f7ba82103478212d70b00e0f58 Mon Sep 17 00:00:00 2001
From: Scott Kiener <scott.kiener@safelite.com>
Date: Thu, 26 Jun 2025 09:37:35 -0400
Subject: [PATCH 2/4] CASH-814 | Combine drop-off and in-shop time slots

Changed name of component because it was named based on functionality that no longer exists (no-modal is a confusing way to name everything that isn't a modal)
Cleaned up references to DROP_OFF that are obsolete
---
 .../time-slot-question/time-slot-question.vue | 50 +++++++++----------
 1 file changed, 23 insertions(+), 27 deletions(-)

diff --git a/src/layouts/schedule/time-slot-question/time-slot-question.vue b/src/layouts/schedule/time-slot-question/time-slot-question.vue
index 58648746e..bba09e785 100644
--- a/src/layouts/schedule/time-slot-question/time-slot-question.vue
+++ b/src/layouts/schedule/time-slot-question/time-slot-question.vue
@@ -14,7 +14,6 @@
             class="mt-4"
             :class="[
                 isMobileAppointment ? 'is-mobile-appointment' : '',
-                isDropOffAppointment ? 'is-drop-off-appointment' : '',
             ]"
             :answers="availableTimeSlots"
             groupName="chooseTimeSlot"
@@ -97,7 +96,7 @@ const cmsWidgetFieldMappings = {
 defineRule("time-slot-required", required(errorMessages.OPTION_REQUIRED));
 
 export default {
-    name: "time-slot-no-modal-question",
+    name: "time-slot-question",
     emits: ["update:modelValue", "TimeSlotSelected", "click-event"],
     props: {
         modelValue: {
@@ -240,7 +239,10 @@ export default {
             );
         },
         disclaimerTextBlockCopy() {
-            if (this.appointmentType === AppointmentTypeStrings.DROP_OFF) {
+            /* AppointmentTypeStrings.DROP_OFF should never be used per CASH-803 epic
+                but I'm leaving this in assuming that a future card  in this epic 
+                will handle disclaimers in a different way */
+            if (this.appointmentType === AppointmentTypeStrings.DROP_OFF) { 
                 if (this.selectedRouteCode?.includes(RouteCodeFlags.ALL_DAY_DROP_OFF)) {
                     if (this.isSameDay) {
                         return this.sameDayDropOffDisclaimerText;
@@ -329,11 +331,7 @@ export default {
                 return null;
             }
 
-            if (this.appointmentType === AppointmentTypeStrings.DROP_OFF) {
-                return this.getAvailableTimeSlotsForDropOff(
-                    this.timeSlotsForSelectedDate.timeSlots
-                );
-            } else if (this.appointmentType === AppointmentTypeStrings.MOBILE) {
+            if (this.appointmentType === AppointmentTypeStrings.MOBILE) {
                 return this.getAvailableTimeSlotsForMobile(this.timeSlotsForSelectedDate.timeSlots);
             } else {
                 return this.getAvailableTimeSlotsForInshop(this.timeSlotsForSelectedDate.timeSlots);
@@ -356,10 +354,7 @@ export default {
         },
         isMobileAppointment() {
             return this.appointmentType === AppointmentTypeStrings.MOBILE;
-        },
-        isDropOffAppointment() {
-            return this.appointmentType === AppointmentTypeStrings.DROP_OFF;
-        },
+        }
     },
     methods: {
         async setSelectedTimeSlot() {
@@ -382,23 +377,20 @@ export default {
             }
         },
         getAvailableTimeSlotsForInshop(timeSlotsForSelectedDate) {
-            return timeSlotsForSelectedDate.map((timeSlot) => {
+            let dropOffIndex = -1;
+            const availableTimeSlots = timeSlotsForSelectedDate.map((timeSlot, index) => {
                 const readableTime = militaryToTwelveHourTime(timeSlot.startTime);
-                return {
-                    value: timeSlot.id,
-                    buttonLabel: readableTime,
-                };
-            });
-        },
-        getAvailableTimeSlotsForDropOff(timeSlotsForSelectedDate) {
-            const availableTimeSlots = timeSlotsForSelectedDate.map((timeSlot) => {
-                let buttonLabelValue;
-                if (timeSlot.id.includes(RouteCodeFlags.OVERNIGHT_DROP_OFF)) {
+                let buttonLabelValue = readableTime;
+                if (timeSlot.id.includes(RouteCodeFlags.ALL_DAY_DROP_OFF)) {
+                    dropOffIndex = index;
+                    if (this.isSameDay) {
+                        buttonLabelValue = this.sameDayDropoffButtonText;
+                    } else {
+                        buttonLabelValue = this.dropoffButtonText;
+                    }
+                } else if (timeSlot.id.includes(RouteCodeFlags.OVERNIGHT_DROP_OFF)) {
+                    dropOffIndex = index;
                     buttonLabelValue = this.overnightDropoffButtonText;
-                } else if (this.isSameDay) {
-                    buttonLabelValue = this.sameDayDropoffButtonText;
-                } else {
-                    buttonLabelValue = this.dropoffButtonText;
                 }
                 return {
                     value: timeSlot.id,
@@ -406,6 +398,10 @@ export default {
                 };
             });
 
+            if (dropOffIndex) {
+                const dropOffTimeSlot = availableTimeSlots.splice(dropOffIndex, 1)[0];
+                availableTimeSlots.unshift(dropOffTimeSlot);
+            }
             return availableTimeSlots;
         },
         getAvailableTimeSlotsForMobile(timeSlotsForSelectedDate) {

From b7b0f388f72121a07bef1c541871074ebcde4dcb Mon Sep 17 00:00:00 2001
From: Scott Kiener <scott.kiener@safelite.com>
Date: Thu, 26 Jun 2025 09:42:05 -0400
Subject: [PATCH 3/4] CASH-814 | Formatting

---
 .../schedule/time-slot-question/time-slot-question.vue    | 8 +++-----
 src/styles/ux-variables.scss                              | 4 ++--
 2 files changed, 5 insertions(+), 7 deletions(-)

diff --git a/src/layouts/schedule/time-slot-question/time-slot-question.vue b/src/layouts/schedule/time-slot-question/time-slot-question.vue
index bba09e785..f0499e11a 100644
--- a/src/layouts/schedule/time-slot-question/time-slot-question.vue
+++ b/src/layouts/schedule/time-slot-question/time-slot-question.vue
@@ -12,9 +12,7 @@
             buttonTypeString="timeSlotModalListButton"
             :buttonTypeObject="timeSlotModalListButton"
             class="mt-4"
-            :class="[
-                isMobileAppointment ? 'is-mobile-appointment' : '',
-            ]"
+            :class="[isMobileAppointment ? 'is-mobile-appointment' : '']"
             :answers="availableTimeSlots"
             groupName="chooseTimeSlot"
             textPosition="text-center"
@@ -242,7 +240,7 @@ export default {
             /* AppointmentTypeStrings.DROP_OFF should never be used per CASH-803 epic
                 but I'm leaving this in assuming that a future card  in this epic 
                 will handle disclaimers in a different way */
-            if (this.appointmentType === AppointmentTypeStrings.DROP_OFF) { 
+            if (this.appointmentType === AppointmentTypeStrings.DROP_OFF) {
                 if (this.selectedRouteCode?.includes(RouteCodeFlags.ALL_DAY_DROP_OFF)) {
                     if (this.isSameDay) {
                         return this.sameDayDropOffDisclaimerText;
@@ -354,7 +352,7 @@ export default {
         },
         isMobileAppointment() {
             return this.appointmentType === AppointmentTypeStrings.MOBILE;
-        }
+        },
     },
     methods: {
         async setSelectedTimeSlot() {
diff --git a/src/styles/ux-variables.scss b/src/styles/ux-variables.scss
index 69ba0d7ac..01b122b31 100644
--- a/src/styles/ux-variables.scss
+++ b/src/styles/ux-variables.scss
@@ -121,8 +121,8 @@ $body-color: $gray-600;
 
 //Fonts
 $font-family-sans-serif: UrbanistRegular, Arial, Helvetica, sans-serif;
-$font-family-monospace: UrbanistRegular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New",
-    monospace;
+$font-family-monospace:
+    UrbanistRegular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
 // stylelint-enable value-keyword-case
 $font-family-base: $font-family-sans-serif;
 $font-family-code: $font-family-monospace;

From a736f9395408258fc528b1036cae41dcbb1bd73f Mon Sep 17 00:00:00 2001
From: Chris Redelinghuys <chris.redelinghuys@safelite.com>
Date: Thu, 26 Jun 2025 10:50:11 -0400
Subject: [PATCH 4/4] CASH-955: Add copy to Afterpay calculator

---
 .../afterpay-breakout/afterpay-breakout.vue               | 8 ++++++++
 src/styles/ux-variables.scss                              | 1 +
 2 files changed, 9 insertions(+)

diff --git a/src/layouts/payment-method/afterpay-breakout/afterpay-breakout.vue b/src/layouts/payment-method/afterpay-breakout/afterpay-breakout.vue
index 9e98eb9c3..68d9baf2f 100644
--- a/src/layouts/payment-method/afterpay-breakout/afterpay-breakout.vue
+++ b/src/layouts/payment-method/afterpay-breakout/afterpay-breakout.vue
@@ -82,6 +82,8 @@
                             <span>Amount Due</span>
                         </div>
                     </div>
+
+                    <p>6 or 12 monthly payment plans available</p>
                 </div>
             </div>
         </div>
@@ -208,6 +210,12 @@ export default {
             overflow: hidden;
             opacity: 0;
             visibility: hidden;
+
+            > p {
+                padding-top: 1rem;
+                font-size: $font-size-12;
+                margin: 0;
+            }
         }
     }
     .payment-section {
diff --git a/src/styles/ux-variables.scss b/src/styles/ux-variables.scss
index 178d50d35..22e17e3b7 100644
--- a/src/styles/ux-variables.scss
+++ b/src/styles/ux-variables.scss
@@ -130,6 +130,7 @@ $font-family-base: $font-family-sans-serif;
 $font-family-code: $font-family-monospace;
 $font-size-base: 1rem; // Assumes the browser default, typically `16px`
 
+$font-size-12: $font-size-base * 0.75; // 12px
 $font-size-20: $font-size-base * 1.25; // 20px
 
 //Custom Font size (extra small)