CASH-3049 | Add promo banner to quote page

src/constants/experiments.js

@@ -61,6 +61,9 @@ const experimentSettings = {
 
     // YMM
     BAILOUT_VIN_REQUIRED_VEHICLES: "BailoutVINRequiredVehicles",
+
+    // Promo Banner
+    SHOW_PROMO_BANNER: "ShowQuotePageRegionalPromoBanner",
 };
 
 const experimentTriggers = {

src/layouts/quote/promo-banner/promo-banner.vue

@@ -0,0 +1,59 @@
+<template>
+    <div class="promo-banner" role="note">
+        <img class="promo-banner__icon" :src="promoTagIcon" alt="" width="31" height="36" />
+        <p class="promo-banner__copy mb-0" v-html="promoBannerBodyText"></p>
+    </div>
+</template>
+
+<script>
+export default {
+    name: "promo-banner",
+    props: {
+        cmsWidgetName: String,
+    },
+    computed: {
+        promoTagIcon() {
+            return this.getCmsContent(this.cmsWidgetName, "Image");
+        },
+        promoBannerBodyText() {
+            return this.getCmsContent(this.cmsWidgetName, "BodyText");
+        },
+    },
+};
+</script>
+
+<style lang="scss" scoped>
+.promo-banner {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    gap: 1rem;
+    width: 100%;
+    padding: 1rem 1.25rem;
+    background-color: $gray-100;
+    border-radius: 1rem;
+    text-align: left;
+
+    @include media-breakpoint-up(md) {
+        justify-content: center;
+        text-align: center;
+    }
+
+    &__icon {
+        flex-shrink: 0;
+        width: 31px;
+        height: 36px;
+    }
+
+    &__copy {
+        color: $gray-650;
+        font-size: $font-size-14;
+        line-height: 1.5;
+
+        :deep(strong) {
+            font-family: UrbanistSemibold, Arial, Helvetica, sans-serif;
+            color: $black;
+        }
+    }
+}
+</style>

src/layouts/quote/quote.vue

@@ -5,6 +5,14 @@
         <div
             class="container quote position-relative"
             :class="[showSaveProgressPopup ? 'initial-popup-open' : '']">
+            <div class="row justify-content-center">
+                <div class="col-12">
+                    <promoBanner
+                        v-if="showPromoBanner"
+                        cmsWidgetName="PromoBannerWidget"
+                        class="mb-4" />
+                </div>
+            </div>
             <div class="row justify-content-center">
                 <div class="col-12">
                     <funnelSubHeader class="mb-5" cmsWidgetName="FunnelSubHeaderWidget" />
@@ -102,7 +110,12 @@
                     <textBlock
                         cmsWidgetName="quoteDisclaimer"
                         typeStyle="caption"
-                        class="mb-5 quote-disclaimer text-left text-md-center" />
+                        class="quote-disclaimer text-left text-md-center" />
+                    <textBlock
+                        v-if="showPromoBanner"
+                        cmsWidgetName="PromoBannerDisclaimerWidget"
+                        typeStyle="caption"
+                        class="quote-disclaimer text-left text-md-center" />
                 </div>
             </div>
 
@@ -133,6 +146,7 @@ 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 promoBanner from "@/layouts/quote/promo-banner/promo-banner";
 import recalDisclaimer from "@/layouts/quote/recal-disclaimer/recal-disclaimer.vue";
 import saveProgressModalQuestion from "@/fmg-components/save-progress-modal-question/save-progress-modal-question";
 import saveProgressPopupQuestion from "@/fmg-components/save-progress-popup-question/save-progress-popup-question";
@@ -683,6 +697,12 @@ export default {
         showAfterpayBanner() {
             return !this.isRecalibrationOnOrder || !this.shouldHideRecalibration;
         },
+        showPromoBanner() {
+            return experimentMixin.methods.hasSettingEqualTo(
+                experimentSettings.SHOW_PROMO_BANNER,
+                "true"
+            );
+        },
         isRecalPriceRemove() {
             return (
                 experimentMixin.methods
@@ -1034,6 +1054,7 @@ export default {
         contentGroupModal,
         loadingModal,
         afterpayModalBanner,
+        promoBanner,
         promoModalQuestion,
         recalDisclaimer,
         saveProgressModalQuestion,
@@ -1159,4 +1180,7 @@ export default {
 :deep(.promo-modal-question a) {
     @include responsive-font-size-md(0.875rem, 1rem);
 }
+.quote-disclaimer:last-child {
+    margin-bottom: 1.5rem;
+}
 </style>