Basic banner with cms content

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>

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>