From 6965437137303799723a9effc305078c21800e0f Mon Sep 17 00:00:00 2001
From: Chris Redelinghuys <chris.redelinghuys@safelite.com>
Date: Thu, 10 Apr 2025 14:11:55 -0400
Subject: [PATCH] CASH-203: Add Afterpay breakout display

---
 src/constants/experiments.js                  |   2 +
 .../service-package-radio-for-afterpay.vue    | 474 ++++++++++++++++++
 .../afterpay-modal-banner.vue                 |  26 +-
 src/layouts/quote/quote.spec.js               |   6 +
 src/layouts/quote/quote.vue                   |  40 ++
 .../service-package-question.vue              |  23 +-
 6 files changed, 565 insertions(+), 6 deletions(-)
 create mode 100644 src/experiment-components/service-package-radio-for-afterpay.vue

diff --git a/src/constants/experiments.js b/src/constants/experiments.js
index d64849466..c5c24536d 100644
--- a/src/constants/experiments.js
+++ b/src/constants/experiments.js
@@ -3,6 +3,7 @@ const experimentUniverses = {
     RECAL_PRICE_REMOVAL: "NextGen_RecalPriceRemoval",
     MSR: "MSR",
     IGQ_SkipQuote: "NextGen_IGQSkipToInsurance",
+    AFTERPAY_BREAKOUT_DISPLAY: "AfterpayBreakoutDisplay",
 };
 
 const experimentSettings = {
@@ -24,6 +25,7 @@ const experimentSettings = {
     PRICING_BY_DAY: "DisplayPricingByDay",
     FOSTER_LOVE: "DisplayFosterLove",
     SKIP_TO_INSURANCE: "SkipToInsurance",
+    DISPLAY_AFTERPAY_BREAKOUT_DISPLAY: "Display_AfterpayBreakoutDisplay",
 };
 
 const experimentTriggers = {
diff --git a/src/experiment-components/service-package-radio-for-afterpay.vue b/src/experiment-components/service-package-radio-for-afterpay.vue
new file mode 100644
index 000000000..3356ee225
--- /dev/null
+++ b/src/experiment-components/service-package-radio-for-afterpay.vue
@@ -0,0 +1,474 @@
+<template>
+    <baseInputButton v-bind="$props" @buttonClicked="handleAnswerChange" v-model="selectedValue">
+        <div
+            class="package-label"
+            :class="[
+                this.buttonLabelSubCopy ? 'has-subheader' : '',
+                this.additionalButtonData.isInsuranceSelected ? 'is-insurance' : '',
+            ]"
+            for="testradio">
+            <div class="package-specs">
+                <div>
+                    <p class="m-0">
+                        <span v-html="this.buttonLabel"></span>
+                    </p>
+                    <p
+                        class="sub-label m-0"
+                        v-if="this.buttonLabelSubCopy"
+                        v-html="this.buttonLabelSubCopy"></p>
+                </div>
+                <div class="hide-when-closed">
+                    <!-- Parse the body text containing <ul> with logic -->
+                    <ul>
+                        <li v-for="listItem in this.arrayOfListItemsFromBodyText" :key="listItem">
+                            <!-- no textLink -->
+                            <span
+                                v-if="!doesCopyContainTextLink(listItem)"
+                                v-html="listItem"></span>
+                            <!-- with textLink -->
+                            <template
+                                v-else
+                                v-for="copy in splitCopyOnCMSPlaceHolder(listItem)"
+                                :key="copy">
+                                <span v-if="!doesCopyContainTextLink(copy)" v-html="copy"></span>
+                                <span v-else>
+                                    <textLink
+                                        linkType="text"
+                                        :text="getRouterLinkDisplayTextFromCopy(copy)"
+                                        href="#!"
+                                        @click-event="
+                                            $emit('buttonEvent', {
+                                                eventName: 'openModal',
+                                                args: getRouterLinkRouteFromCopy(copy),
+                                            })
+                                        "
+                                        :data-bs-target="'#' + getRouterLinkRouteFromCopy(copy)" />
+                                </span>
+                            </template>
+                        </li>
+                    </ul>
+                    <!-- End of body text parsing -->
+                    <div
+                        class="package-footer fw-bold caption ms-n4 mt-4"
+                        v-if="this.buttonFooterCopy"
+                        v-html="this.buttonFooterCopy"></div>
+                </div>
+
+                <div
+                    v-if="
+                        this.additionalButtonData.servicePackageDiscount &&
+                        this.additionalButtonData.Text
+                    "
+                    class="special-save-box">
+                    <span v-html="this.additionalButtonData.Text"></span>
+                </div>
+                <span class="pricing-info">
+                    <div
+                        class="insurance-pricing"
+                        v-if="this.additionalButtonData.isInsuranceSelected">
+                        <span
+                            class="strikethrough-price"
+                            v-if="shouldDisplayStrikeThroughPrice"
+                            v-html="this.additionalButtonData.strikeThroughPrice"></span>
+                        <span v-html="this.buttonAuxillaryCopy"></span>
+                    </div>
+                    <div v-else>
+                        <span v-html="afterpayPrice()"></span>
+                        <span class="afterpay-breakout">
+                            <span>in 4 interest-free payments</span>
+                            <div>
+                                or
+                                <span v-html="this.buttonAuxillaryCopy"></span>
+                                <span
+                                    class="strikethrough-price"
+                                    v-if="shouldDisplayStrikeThroughPrice"
+                                    v-html="this.additionalButtonData.strikeThroughPrice"></span>
+                                in single payment
+                            </div>
+                        </span>
+                    </div>
+                </span>
+            </div>
+        </div>
+    </baseInputButton>
+</template>
+
+<script>
+import baseInputButton from "@/digital-components/base-input-button/base-input-button";
+import textLink from "@/ux-components/text-link/text-link";
+import inputButtonWrapperMixin from "@/mixins/input-button-wrapper-mixin";
+import {
+    getRouterLinkDisplayTextFromCopy,
+    getRouterLinkRouteFromCopy,
+    splitCopyOnCMSPlaceHolder,
+    doesCopyContainTextLink,
+} from "@/helpers/cms-content-helper";
+
+export default {
+    name: "servicePackageRadio",
+    mixins: [inputButtonWrapperMixin],
+    components: {
+        baseInputButton,
+        textLink,
+    },
+    computed: {
+        arrayOfListItemsFromBodyText() {
+            return this.getArrayOfListItemsFromRawCmsCopy(this.buttonBodyCopy);
+        },
+        shouldDisplayStrikeThroughPrice() {
+            const displayPrice = this.buttonAuxillaryCopy.substring(
+                this.buttonAuxillaryCopy.indexOf("$")
+            );
+            return displayPrice != this.additionalButtonData.strikeThroughPrice;
+        },
+    },
+    methods: {
+        getRouterLinkDisplayTextFromCopy,
+        getRouterLinkRouteFromCopy,
+        splitCopyOnCMSPlaceHolder,
+        doesCopyContainTextLink,
+        stripUlTagFromCopy(copy) {
+            const regex = /(?:<ul(?:.*?)>)|(?:<\/ul>)/g;
+            return copy.replace(regex, "");
+        },
+        getArrayOfListItemsFromRawCmsCopy(copy) {
+            const withoutUlTags = this.stripUlTagFromCopy(copy);
+            return withoutUlTags
+                .split(/(?:<li(?:.*?)>)|(?:<\/li>)/g)
+                .filter((lineItem) => lineItem);
+        },
+        afterpayPrice() {
+            const decimalPrice = parseFloat(this.buttonAuxillaryCopy.replace("$", ""));
+            return "$" + (decimalPrice / 4).toFixed(2);
+        },
+    },
+};
+</script>
+
+<style lang="scss" scoped>
+.package-main {
+    .package-wrapper {
+        margin: 1rem 0;
+        &:first-child {
+            margin: 1rem 0 0 0;
+        }
+        &:last-child {
+            margin: 1rem 0 0 0;
+        }
+        @include media-breakpoint-up(md) {
+            margin: 1rem 0.5rem 0 0.5rem;
+            display: flex;
+            flex-direction: column;
+            &:first-child {
+                margin: 1rem 0.5rem 0 0;
+            }
+            &:last-child {
+                margin: 1rem 0 0 0.5rem;
+            }
+        }
+
+        label {
+            display: block;
+            @include media-breakpoint-up(md) {
+                display: flex;
+                height: 100%;
+            }
+        }
+
+        input[type="radio"] {
+            opacity: 0;
+            position: absolute;
+            left: -9999px;
+
+            + .package-label {
+                display: flex;
+                align-items: flex-start;
+                position: relative;
+                cursor: pointer;
+                width: 100%;
+                padding: 0.75rem;
+                border: 1px solid $gray-300;
+                box-shadow:
+                    0px 4px 8px -4px rgba(0, 0, 0, 0.15),
+                    0px 4px 24px -8px rgba(0, 0, 0, 0.2);
+                border-radius: 0.5rem;
+                overflow: hidden;
+                min-height: 52px;
+                max-height: 126px;
+                @include media-breakpoint-up(md) {
+                    max-height: 500px;
+                    padding-bottom: 4.75rem;
+                }
+                @include media-breakpoint-down(md) {
+                    padding-bottom: 4rem;
+                }
+                transition: max-height 0.25s ease-in;
+
+                &.is-insurance {
+                    padding-bottom: 3rem;
+                }
+
+                &.has-subheader {
+                    min-height: 150px;
+
+                    &.is-insurance {
+                        min-height: 72px;
+                    }
+
+                    & > .package-specs {
+                        & > div:first-of-type {
+                            display: flex;
+                        }
+                    }
+                }
+
+                &:before {
+                    content: "";
+                    position: relative;
+                    top: 5px;
+                    margin-right: 0.5rem;
+                    border-radius: 50%;
+                    border: 1px solid $gray-500;
+                    width: 16px;
+                    height: 16px;
+                    min-width: 16px;
+                }
+
+                &:after {
+                    content: "";
+                    position: absolute;
+                    left: 15px;
+                    top: 20px;
+                    border-radius: 50%;
+                    width: 10px;
+                    height: 10px;
+                    min-width: 10px;
+                }
+            }
+
+            &:hover {
+                + .package-label {
+                    &:before {
+                        border: 1px solid #8e9292;
+                        box-shadow:
+                            0px 0px 0px 4px #9fcee6,
+                            0px 1px 4px rgba(0, 0, 0, 0.2);
+                    }
+                }
+            }
+
+            &:checked {
+                + .package-label {
+                    .package-specs {
+                        max-height: 1000px;
+
+                        .sub-label {
+                            background-color: $green-200;
+                        }
+                    }
+                }
+                + .package-label {
+                    .package-specs {
+                        .hide-when-closed {
+                            display: block;
+                        }
+                    }
+                }
+                + .package-label {
+                    background-color: $blue-100;
+                    border: 1px solid $blue;
+                    max-height: 500px;
+                    .special-save-box {
+                        background-color: $green-200;
+                    }
+                }
+                + .package-label {
+                    &:before {
+                        box-shadow: 0px 0px 0px 1px $blue;
+                    }
+                }
+                + .package-label {
+                    &:after {
+                        background: $blue;
+                    }
+                }
+            }
+
+            &:focus {
+                + .package-label {
+                    &:before {
+                        border: 2px solid $blue;
+                    }
+                }
+            }
+        }
+
+        .package-footer {
+            color: $red;
+            font-weight: 600;
+        }
+
+        .package-specs {
+            display: flex;
+            flex-direction: column;
+            width: 100%;
+            transition: all 0.5s ease;
+            @include media-breakpoint-up(md) {
+                max-height: 500px;
+            }
+
+            .row {
+                align-items: center;
+            }
+
+            p {
+                font-weight: 600;
+                display: flex;
+                justify-content: space-between;
+                align-items: center;
+                white-space: nowrap;
+
+                &.sub-label {
+                    color: $green;
+                    background-color: $green-100;
+                    padding: 0.25rem 0.5rem;
+                    border-radius: 0.75rem;
+                    text-transform: uppercase;
+                    font-size: 0.75rem;
+                    margin-left: auto;
+                }
+            }
+            span {
+                &.service-package-discount {
+                    color: $green;
+                    text-align: end;
+                    font-weight: 600;
+                    font-size: 0.875rem;
+                    display: flex;
+                    justify-content: flex-end;
+                    align-items: center;
+                    align-self: flex-start;
+                    div.strikethrough-discount-price {
+                        text-decoration: line-through;
+                        margin-right: 0.5rem;
+                        font-weight: 400;
+                        font-size: 0.75rem;
+                        line-height: 20px;
+                        color: $gray-550;
+                        @include media-breakpoint-up(md) {
+                            margin-right: 0.5rem;
+                            font-size: 0.75rem;
+                        }
+                    }
+                    div.discount-price {
+                        color: $green;
+                    }
+                    @include media-breakpoint-up(md) {
+                        position: absolute;
+                        bottom: 0.75rem;
+                        left: 0.5rem;
+                        display: flex;
+                        align-items: center;
+                        justify-content: flex-start;
+                    }
+                }
+            }
+            ul {
+                margin: 1rem 0 0 -5px;
+                padding: 0;
+                li {
+                    font-size: 0.875rem;
+                    line-height: 1.714;
+                    color: $gray-550;
+                    a {
+                        line-height: 1.714;
+                        padding: 0;
+                    }
+                }
+            }
+
+            @keyframes slideaway {
+                from {
+                    display: block;
+                }
+                to {
+                    transform: translateY(40px);
+                    opacity: 0;
+                }
+            }
+
+            .hide-when-closed {
+                display: none;
+                @include media-breakpoint-up(md) {
+                    display: flex;
+                    flex-direction: column;
+                }
+            }
+        }
+        .discount-text {
+            height: 2rem;
+            display: flex;
+            border-top-right-radius: 0.5rem;
+            border-top-left-radius: 0.5rem;
+            background-color: $green;
+            align-items: center;
+            justify-content: center;
+            width: 100%;
+            color: white;
+            text-transform: uppercase;
+            font-size: 0.875rem;
+            font-weight: 600;
+            letter-spacing: 0.75px;
+        }
+        .special-save-box {
+            background-color: $green-100;
+            display: flex;
+            flex-direction: row;
+            margin: 0.5rem auto 1rem -1.25rem;
+            padding: 0.5rem 1rem;
+            border-radius: 0.25rem;
+            span {
+                color: $green;
+                font-size: 0.875rem;
+                font-weight: 600;
+            }
+        }
+        .pricing-info {
+            color: $green;
+            position: absolute;
+            bottom: 0.75rem;
+            left: 0;
+            width: calc(100% - 1.25rem);
+            margin-left: 1.25rem;
+            font-weight: 600;
+            line-height: 20px;
+
+            span.strikethrough-price {
+                text-decoration: line-through;
+                font-size: 0.75rem;
+                font-weight: 400;
+                color: $gray-550;
+                margin-left: 0.25rem;
+            }
+            span.afterpay-breakout {
+                color: $gray-550;
+                font-weight: initial;
+                font-size: 0.875rem;
+
+                & > span {
+                    margin-left: 0.25rem;
+                }
+
+                & > div {
+                    font-size: 0.625rem;
+
+                    & > span:first-of-type {
+                        font-size: 0.75rem;
+                        font-weight: 600;
+                    }
+                }
+            }
+        }
+    }
+}
+</style>
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 9f393e260..3b682e52b 100644
--- a/src/layouts/quote/afterpay-modal-banner/afterpay-modal-banner.vue
+++ b/src/layouts/quote/afterpay-modal-banner/afterpay-modal-banner.vue
@@ -2,16 +2,16 @@
     <div class="alert fade show my-2 py-2 border-0 alert-info" role="alert">
         <component :is="'script'" src="https://js.afterpay.com/afterpay-1.x.js" async></component>
 
-        <div class="mx-4 my-0 fw-bold alert-heading text-center">
+        <div
+            class="mx-4 my-0 alert-heading text-center"
+            :class="[isAfterpayBreakoutDisplay ? 'fw-bolder' : 'fw-bold']">
             <span v-for="token in afterpayCopyTokens" :key="token">
                 <span v-if="isAfterpayPriceToken(token)">{{ afterpayPrice }}</span>
                 <span v-else-if="isInlineImageToken(token)">
                     <img v-if="hasImage" :src="imageUrl" :alt="getInlineAltText(token)" />
                     <span v-else>{{ getInlineAltText(token) }}</span>
                 </span>
-                <span v-else>
-                    {{ token }}
-                </span>
+                <span v-else v-html="token"></span>
             </span>
             &nbsp;
             <a
@@ -52,6 +52,7 @@ export default {
     props: {
         cmsWidgetName: String,
         lineItems: Array,
+        isAfterpayBreakoutDisplay: Boolean,
     },
     data() {
         return {};
@@ -69,7 +70,16 @@ export default {
             return !!this.imageUrl;
         },
         afterpayCopyTokens() {
-            return splitCopyOnCMSPlaceHolder(this.getCmsContent(this.cmsWidgetName, "HeaderText"));
+            if (this.isAfterpayBreakoutDisplay) {
+                // Text for Afterpay Breakout experiment
+                return splitCopyOnCMSPlaceHolder(
+                    this.getCmsContent(this.cmsWidgetName, "BodyText2")
+                );
+            } else {
+                return splitCopyOnCMSPlaceHolder(
+                    this.getCmsContent(this.cmsWidgetName, "HeaderText")
+                );
+            }
         },
         modalCopy() {
             return this.getCmsContent(this.cmsWidgetName, "BodyText");
@@ -117,6 +127,12 @@ export default {
         .alert-heading {
             color: $blue-700;
         }
+        &.fw-bolder {
+            font-weight: 600;
+        }
+        img {
+            vertical-align: text-top;
+        }
         svg {
             fill: $blue-700;
             width: 1rem;
diff --git a/src/layouts/quote/quote.spec.js b/src/layouts/quote/quote.spec.js
index 9602780db..fccb49432 100644
--- a/src/layouts/quote/quote.spec.js
+++ b/src/layouts/quote/quote.spec.js
@@ -87,6 +87,12 @@ jest.mock("@/mixins/experiment-mixin.js", () => ({
             }
             return "test";
         },
+        hasSettingEqualTo(settingName) {
+            if (settingName === mockExperimentSettings.DISPLAY_AFTERPAY_BREAKOUT_DISPLAY) {
+                return false;
+            }
+            return "test";
+        },
     },
 }));
 
diff --git a/src/layouts/quote/quote.vue b/src/layouts/quote/quote.vue
index b02b0d807..42ccfb09a 100644
--- a/src/layouts/quote/quote.vue
+++ b/src/layouts/quote/quote.vue
@@ -46,6 +46,7 @@
                     <afterpayModalBanner
                         v-if="showAfterpayBanner"
                         cmsWidgetName="AfterpayModalWidget"
+                        :isAfterpayBreakoutDisplay="isAfterpayBreakoutDisplay"
                         :lineItems="lineItems" />
 
                     <!-- If vehicle requires recal AND we are hiding recal pricing info, then show recal disclaimer banner. -->
@@ -221,6 +222,36 @@ export default {
             );
         }
 
+        // AfterpayBreakoutDisplay Custom Exposure
+        const IGQExperiment = store.getters.applicationUser.experiments.find(
+            (e) => e.universeName === experimentUniverses.RECAL_PRICE_REMOVAL
+        );
+        const hasExposedIGQExperiment = IGQExperiment?.isExposed;
+
+        const afterpayBreakoutDisplayExperiment = store.getters.applicationUser.experiments.find(
+            (e) => e.universeName === experimentUniverses.AFTERPAY_BREAKOUT_DISPLAY
+        );
+        const hasExposedAfterpayBreakoutDisplay = afterpayBreakoutDisplayExperiment?.isExposed;
+        const shouldSendAfterpayBreakoutDisplayExposeRequest =
+            afterpayBreakoutDisplayExperiment &&
+            !hasExposedAfterpayBreakoutDisplay &&
+            !hasExposedIGQExperiment;
+
+        if (shouldSendAfterpayBreakoutDisplayExposeRequest) {
+            baseMixin.methods.dispatchStoreActionWithLogging(
+                storeActions.LOG_EXPERIMENT_EXPOSURE_AND_UPDATE_STORE,
+                {
+                    userId: getUserIdValue(),
+                    deviceId: getDeviceIdValue(),
+                    sessionKey: getSessionKeyValue(),
+                    pageName: to.query.fmgPage,
+                    experiment: afterpayBreakoutDisplayExperiment,
+                },
+                "quote",
+                false
+            );
+        }
+
         const promiseResultMap = [
             {
                 resultKey: "cmsContent",
@@ -571,6 +602,15 @@ export default {
         showRecalDisclaimer() {
             return this.isRecalibrationOnOrder && this.isRecalPriceRemove;
         },
+        isAfterpayBreakoutDisplay() {
+            return (
+                (!this.isRecalPriceRemove || !this.isRecalibrationOnOrder) &&
+                experimentMixin.methods.hasSettingEqualTo(
+                    experimentSettings.DISPLAY_AFTERPAY_BREAKOUT_DISPLAY,
+                    "true"
+                )
+            );
+        },
     },
     methods: {
         getColCount() {
diff --git a/src/layouts/quote/service-package-question/service-package-question.vue b/src/layouts/quote/service-package-question/service-package-question.vue
index 68f031768..64c075408 100644
--- a/src/layouts/quote/service-package-question/service-package-question.vue
+++ b/src/layouts/quote/service-package-question/service-package-question.vue
@@ -4,7 +4,7 @@
         :answers="servicePackageAnswers"
         :groupName="groupName"
         buttonTypeString="servicePackageRadio"
-        :buttonTypeObject="hasPricingByDay() ? servicePackageRadioExperiment : servicePackageRadio"
+        :buttonTypeObject="getButtonTypeObject()"
         v-model="selectedPackageName"
         :validationRules="validationRules"
         :isRequired="isRequired"
@@ -18,6 +18,7 @@ import baseMixin from "@/mixins/base-mixin.js";
 import { processIfStatements } from "@/helpers/cms-content-helper";
 import servicePackageRadio from "./service-package-radio/service-package-radio";
 import servicePackageRadioExperiment from "@/experiment-components/service-package-radio";
+import servicePackageRadioAfterpayExperiment from "@/experiment-components/service-package-radio-for-afterpay";
 import { partTypeStrings } from "@/constants/part-type-strings";
 import { packageNames } from "@/constants/package-names";
 import {
@@ -61,6 +62,7 @@ export default {
         return {
             servicePackageRadio: servicePackageRadio,
             servicePackageRadioExperiment: servicePackageRadioExperiment,
+            servicePackageRadioAfterpayExperiment: servicePackageRadioAfterpayExperiment,
             selectedPackageName: null,
         };
     },
@@ -156,6 +158,7 @@ export default {
                     Text: this.isInsuranceSelected
                         ? false
                         : "Special: Save $" + this.getServicePackageDiscountPrice(),
+                    isInsuranceSelected: this.isInsuranceSelected,
                 },
             }));
             this.$emit("currentNumberOfPackages", modifiedAnswers.length);
@@ -237,6 +240,24 @@ export default {
                 "true"
             );
         },
+        isAfterpayBreakoutDisplay() {
+            return (
+                (!this.shouldHideRecalibration || !this.isRecalibrationOnOrder) &&
+                experimentMixin.methods.hasSettingEqualTo(
+                    experimentSettings.DISPLAY_AFTERPAY_BREAKOUT_DISPLAY,
+                    "true"
+                )
+            );
+        },
+        getButtonTypeObject() {
+            if (this.isAfterpayBreakoutDisplay()) {
+                return this.servicePackageRadioAfterpayExperiment;
+            }
+            if (this.hasPricingByDay()) {
+                return this.servicePackageRadioExperiment;
+            }
+            return this.servicePackageRadio;
+        },
         getHeaderTextFromCms(cmsWidgetName) {
             return this.getCmsContent(cmsWidgetName, "HeaderText");
         },