CASH-952: Afterpay banner update

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",
 };
 

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>");
+}

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
+        <div>
-            class="mx-4 my-0 alert-heading text-center"
+            <span v-for="token in headerCopyTokens" :key="token" v-html="token"></span>
-            :class="[isAfterpayBreakoutDisplay ? 'fw-bolder' : 'fw-bold']">
+        </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) {
+            if (this.showAfterpayExtendedPayOption) {
-                // Text for Afterpay Breakout experiment
+                return splitCopyOnCMSPlaceHolder(
-                var afterpayBannerCopy = this.getCmsContent(this.cmsWidgetName, "BodyText2");
+                    this.getCmsContent(this.cmsWidgetName, "BodyText")
-                afterpayBannerCopy =
+                );
-                    afterpayBannerCopy &&
-                    afterpayBannerCopy.replaceAll(
-                        "{custom:paymentType}",
-                        this.isInsuranceSelected ? "deductible" : "spending"
-                    );
-                return splitCopyOnCMSPlaceHolder(afterpayBannerCopy);
             } 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 {
+#afterpay-banner {
-    padding: 0.675rem 0;
+    display: flex;
-    &.alert-info {
+    flex-direction: column;
-        background-color: $blue-100;
+    background-color: $blue-150;
-        .alert-heading {
+    justify-content: center;
-            color: $blue-700;
+    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 {
+        @include media-breakpoint-up(md) {
-            font-weight: 600;
+            flex-direction: column;
-        }
+            border-right: 1px solid;
-        img {
+            padding-right: 1rem;
-            vertical-align: text-top;
-        }
-        svg {
-            fill: $blue-700;
-            width: 1rem;
-            height: 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;
     }

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 (
+            return !this.isRecalibrationOnOrder || !this.shouldHideRecalibration;
-                (this.isAfterpayBreakoutDisplay || !this.isInsuranceSelected) &&
-                (!this.isRecalibrationOnOrder || !this.shouldHideRecalibration)
-            );
         },
         isRecalPriceRemove() {
             return (
@@ -606,14 +603,12 @@ export default {
         showRecalDisclaimer() {
             return this.isRecalibrationOnOrder && this.isRecalPriceRemove;
         },
-        isAfterpayBreakoutDisplay() {
+        afterpayExtendedPayOptionThreshold() {
-            return (
+            let thresholdAmount = experimentMixin.methods.getSettingValue(
-                (!this.isRecalPriceRemove || !this.isRecalibrationOnOrder) &&
+                experimentSettings.AFTERPAY_EXTENDED_PAY_OPTION_THRESHOLD
-                experimentMixin.methods.hasSettingEqualTo(
-                    experimentSettings.DISPLAY_AFTERPAY_BREAKOUT_DISPLAY,
-                    "true"
-                )
             );
+            thresholdAmount && (thresholdAmount = parseInt(thresholdAmount));
+            return thresholdAmount;
         },
     },
     methods: {

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",
+$font-family-monospace:
-    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: (