From d1eda98385a0ee66d24f027086f67c0f73337da0 Mon Sep 17 00:00:00 2001
From: Chloe Herd <chloe.herd@safelite.com>
Date: Tue, 9 Jan 2024 17:34:48 -0500
Subject: [PATCH 1/3] Basic banner with cms content

---
 .../afterpay-modal-banner.vue                 | 103 ++++++++++++++++++
 src/layouts/quote/quote.vue                   |   6 +
 2 files changed, 109 insertions(+)
 create mode 100644 src/layouts/quote/afterpay-modal-banner/afterpay-modal-banner.vue

diff --git a/src/layouts/quote/afterpay-modal-banner/afterpay-modal-banner.vue b/src/layouts/quote/afterpay-modal-banner/afterpay-modal-banner.vue
new file mode 100644
index 000000000..b26b9f3c2
--- /dev/null
+++ b/src/layouts/quote/afterpay-modal-banner/afterpay-modal-banner.vue
@@ -0,0 +1,103 @@
+<template>
+    <div class="alert fade show my-2 py-2 border-0 alert-info" role="alert">
+        <div class="mx-4 my-0 fw-bold alert-heading">
+            <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>
+        </div>
+        <div class="mx-4 my-0 fw-bold alert-heading">
+            {{ modalCopy }}
+        </div>
+    </div>
+</template>
+
+<script>
+import { splitCopyOnCMSPlaceHolder } from "@/helpers/cms-content-helper";
+import baseMixin from "@/mixins/base-mixin.js";
+
+const INLINE_IMAGE_TOKEN = "custom:inlineImage";
+const AFTERPAY_PRICE_TOKEN = "custom:afterpayPrice";
+
+function isInlineImageToken(token) {
+    return token.includes(INLINE_IMAGE_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",
+    props: {
+        cmsWidgetName: String,
+        lineItems: Array,
+    },
+    data() {
+        return {};
+    },
+    methods: {
+        isInlineImageToken,
+        isAfterpayPriceToken,
+        getInlineAltText,
+    },
+    computed: {
+        nullSafeLineItems() {
+            return this.lineItems ?? [];
+        },
+        imageUrl() {
+            return this.getCmsContent(this.cmsWidgetName, "Image");
+        },
+        hasImage() {
+            return !!this.imageUrl;
+        },
+        afterpayCopyTokens() {
+            return splitCopyOnCMSPlaceHolder(this.getCmsContent(this.cmsWidgetName, "HeaderText"));
+        },
+        modalCopy() {
+            return this.getCmsContent(this.cmsWidgetName, "SubheaderText");
+        },
+        afterpayPrice() {
+            const price = baseMixin.methods.getTierOnePackagePrice(
+                baseMixin.methods.filterOutFees(this.nullSafeLineItems)
+            );
+
+            const adjusted = (price / 4).toFixed(2);
+
+            return `$${adjusted}`;
+        },
+    },
+    components: {},
+};
+</script>
+
+<style lang="scss" scoped>
+.alert {
+    padding: 0.675rem 0;
+    &.alert-info {
+        background-color: $blue-100;
+        .alert-heading {
+            color: $blue-700;
+        }
+        svg {
+            fill: $blue-700;
+            width: 1rem;
+            height: 1rem;
+        }
+    }
+    & p {
+        font-size: 0.875rem;
+    }
+}
+</style>
diff --git a/src/layouts/quote/quote.vue b/src/layouts/quote/quote.vue
index e48e8fff8..73fc42266 100644
--- a/src/layouts/quote/quote.vue
+++ b/src/layouts/quote/quote.vue
@@ -34,6 +34,10 @@
                         validationRules="option-required"
                         isRequired />
 
+                    <afterpayModalBanner
+                        cmsWidgetName="AfterpayModalWidget"
+                        :lineItems="availableLineItems" />
+
                     <textBlock
                         cmsWidgetName="quoteDisclaimer"
                         justifyText="left"
@@ -68,6 +72,7 @@ import servicePackageQuestion from "./service-package-question/service-package-q
 import textBlock from "@/digital-components/text-block/text-block";
 import contentGroupModal from "@/fmg-components/content-group-modal/content-group-modal";
 import loadingModal from "@/fmg-components/loading-modal/loading-modal.vue";
+import afterpayModalBanner from "@/layouts/quote/afterpay-modal-banner/afterpay-modal-banner";
 import baseMixin from "@/mixins/base-mixin.js";
 import vehicleQuestionsMixin from "../../mixins/vehicle-questions-mixin";
 import { settleAllPromises } from "@/helpers/layout-helper";
@@ -315,6 +320,7 @@ export default {
         servicePackageQuestion,
         contentGroupModal,
         loadingModal,
+        afterpayModalBanner,
     },
 };
 </script>

From a359d2773158955b4147317e1257332a96094445 Mon Sep 17 00:00:00 2001
From: Chloe Herd <chloe.herd@safelite.com>
Date: Wed, 10 Jan 2024 11:24:10 -0500
Subject: [PATCH 2/3] Add afterpay script + modal

---
 .../afterpay-modal-banner/afterpay-modal-banner.vue  | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 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 b26b9f3c2..6eb8a5a87 100644
--- a/src/layouts/quote/afterpay-modal-banner/afterpay-modal-banner.vue
+++ b/src/layouts/quote/afterpay-modal-banner/afterpay-modal-banner.vue
@@ -1,5 +1,7 @@
 <template>
     <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">
             <span v-for="token in afterpayCopyTokens" :key="token">
                 <span v-if="isAfterpayPriceToken(token)">{{ afterpayPrice }}</span>
@@ -13,7 +15,13 @@
             </span>
         </div>
         <div class="mx-4 my-0 fw-bold alert-heading">
-            {{ modalCopy }}
+            <a
+                id="afterpay-learnmore"
+                href="#"
+                data-afterpay-modal="en_US-safelite"
+                data-bind="click:afterpayLearnMore">
+                {{ modalCopy }}
+            </a>
         </div>
     </div>
 </template>
@@ -96,7 +104,7 @@ export default {
             height: 1rem;
         }
     }
-    & p {
+    & .alert-heading {
         font-size: 0.875rem;
     }
 }

From 356ffe6e455d8293768ac9cc7f92a4d3c3f2afd2 Mon Sep 17 00:00:00 2001
From: Chloe Herd <chloe.herd@safelite.com>
Date: Wed, 10 Jan 2024 12:48:17 -0500
Subject: [PATCH 3/3] Only display if cash is selected

---
 src/layouts/quote/quote.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/layouts/quote/quote.vue b/src/layouts/quote/quote.vue
index 73fc42266..5c6b2d744 100644
--- a/src/layouts/quote/quote.vue
+++ b/src/layouts/quote/quote.vue
@@ -35,6 +35,7 @@
                         isRequired />
 
                     <afterpayModalBanner
+                        v-if="!isInsuranceSelected"
                         cmsWidgetName="AfterpayModalWidget"
                         :lineItems="availableLineItems" />