Merge pull request #3273 from Safelite/feature/CASH-3031

Feature/CASH 3031

src/layouts/quote/afterpay-modal-banner/afterpay-modal-banner.vue

@@ -1,5 +1,9 @@
 <template>
     <div class="afterpay-modal-banner" role="alert">
+        <component
+            :is="'script'"
+            src="https://js.squarecdn.com/square-marketplace.js"
+            async></component>
         <div>
             <span
                 class="callout"
@@ -17,52 +21,19 @@
                 <span v-else v-html="token"></span>
             </span>
             <span class="nbsp">&ensp;</span>
-            <textLink
+            <a
-                linkType="text"
+                href="#"
-                :text="bannerCta"
+                class="text-link"
-                href="javascript:void(0)"
+                data-afterpay-modal="en_US"
-                @click-event="openModal" />
+                @click.prevent="onLearnMoreClick">
+                {{ bannerCta }}
+            </a>
         </div>
     </div>
-    <modal
-        :ref="modalName"
-        class="afterpay-modal"
-        :headerText="modalHeaderText"
-        :isFooterButtonSuppressed="true">
-        <template v-slot:modal-header-slot>
-            <span>{{ modalSubHeaderText }}</span>
-        </template>
-        <template v-slot>
-            <span class="afterpay-sections">
-                <span
-                    v-for="section in afterpaySectionsContent"
-                    :key="section"
-                    class="afterpay-section">
-                    <span class="section-header">
-                        <img v-if="section.AnswerImageUrl" :src="section.AnswerImageUrl" />
-                        <h3 v-if="section.Text" v-html="section.Text"></h3>
-                    </span>
-                    <span v-html="section.content"></span>
-                </span>
-            </span>
-        </template>
-        <template v-slot:modal-footer-slot>
-            <p class="modal-disclaimer" v-html="modalDisclaimerText"></p>
-        </template>
-    </modal>
 </template>
 
 <script>
-import {
+import { splitCopyOnCMSPlaceHolder, splitCMSCopyOnBR } from "@/helpers/cms-content-helper";
-    doesCopyContainTextLink,
-    splitCopyOnCMSPlaceHolder,
-    getRouterLinkRouteFromCopy,
-    getRouterLinkDisplayTextFromCopy,
-    getExternalLink,
-    splitCMSCopyOnBR,
-} from "@/helpers/cms-content-helper";
-import textLink from "@/ux-components/text-link/text-link";
-import modal from "@/digital-components/modal/modal";
 
 const INLINE_IMAGE_TOKEN = "custom:inlineImage";
 const AFTERPAY_PRICE_TOKEN = "custom:afterpayPrice";
@@ -82,25 +53,18 @@ export default {
     name: "afterpay-banner",
     props: {
         cmsWidgetName: String,
-        modalWidgetName: String,
-    },
-    data() {
-        return {};
     },
     methods: {
         isInlineImageToken,
         isAfterpayPriceToken,
         getInlineAltText,
-        doesCopyContainTextLink,
+        onLearnMoreClick() {
-        splitCopyOnCMSPlaceHolder,
+            this.pushEventToGA(
-        getRouterLinkRouteFromCopy,
+                this.$route.query[this.queryStrings.FMG_PAGE],
-        getRouterLinkDisplayTextFromCopy,
+                this.GaActions.CLICKED,
-        getExternalLink,
+                this.bannerCta,
-        openModal() {
+                true
-            this.modal?.openModal();
+            );
-        },
-        closeModal() {
-            this.modal?.closeModal();
         },
     },
     computed: {
@@ -119,31 +83,6 @@ export default {
         bannerCta() {
             return this.getCmsContent(this.cmsWidgetName, "FooterText");
         },
-        modalHeaderText() {
-            return this.getCmsContent(this.modalWidgetName, "HeaderText");
-        },
-        modalDisclaimerText() {
-            return this.getCmsContent(this.modalWidgetName, "BodyText2");
-        },
-        modalName() {
-            return this.modalWidgetName;
-        },
-        modal() {
-            return this.$refs[this.modalName];
-        },
-        afterpaySectionsContent() {
-            const sections = this.getCmsContent("AfterpayModalSectionsWidget", "Answers");
-            if (!sections) return [];
-            sections.forEach((section) => {
-                const sectionContent = this.getCmsContent(section.Name, "BodyText");
-                section["content"] = sectionContent;
-            });
-            return sections;
-        },
-    },
-    components: {
-        textLink,
-        modal,
     },
 };
 </script>
@@ -198,117 +137,9 @@ export default {
         @include media-breakpoint-up(md) {
             padding-left: 1rem;
         }
-    }
-}
-
-.afterpay-modal {
-    &.modal.modal-component {
-        :deep(.modal-dialog) {
-            margin: 0 1rem;
-            top: 0;
-
-            @include media-breakpoint-up(md) {
-                width: 100%;
-                max-width: 840px;
-                top: 3.4rem;
-                right: 0;
-                left: 0;
-                transform: none;
-                margin: 0 auto;
-                padding: 0 1rem;
-            }
-            .modal-content {
-                border-radius: 0.5rem;
-                margin: 1.5rem 0;
-
-                .modal-header.mt-6 {
-                    background-color: $blue-100;
-                    margin-top: 0;
-                    padding: 1.5rem 2rem 1.5rem 1.5rem;
-                    font-family: UrbanistSemibold;
-
-                    .modal-title.justify-content-center {
-                        // OVERRIDE
-                        justify-content: flex-start;
-                    }
-                    .btn-close {
-                        top: 1.25rem;
-                        right: 1.5rem;
-                    }
-                }
-                .afterpay-section {
-                    display: block;
-                    border: 1px solid $gray-200;
-                    border-radius: 0.25rem;
-                    padding: 1rem;
-
-                    .section-header {
-                        display: flex;
-                        align-items: center;
-                        margin-bottom: 1rem;
 
         img {
-                            width: 40px;
+            transform: translateY(-0.1rem);
-                            height: 40px;
-                        }
-                        h3 {
-                            font-family: UrbanistBold;
-                            font-size: 1rem;
-                            margin: 0 0 0 0.5rem;
-                            color: $black;
-                        }
-                    }
-                    p {
-                        font-size: 0.75rem;
-                    }
-                    strong {
-                        font-family: UrbanistSemibold;
-                        font-size: 0.875rem;
-                    }
-                }
-
-                .modal-body {
-                    padding: 1.5rem;
-
-                    .afterpay-sections {
-                        @include media-breakpoint-up(md) {
-                            display: flex;
-                            column-gap: 1rem;
-                            align-items: stretch;
-                        }
-                        .afterpay-section {
-                            margin-bottom: 1rem;
-
-                            @include media-breakpoint-up(md) {
-                                flex: 0 1 33%;
-                                margin-bottom: 0;
-                            }
-
-                            &:last-of-type {
-                                margin-bottom: 0;
-                            }
-                        }
-                    }
-                }
-            }
-            &.modal-dialog-centered {
-                height: auto;
-                min-height: auto;
-            }
-        }
-    }
-
-    :deep(.modal-footer) {
-        position: relative;
-        background: $gray-100;
-
-        .modal-disclaimer {
-            font-style: italic;
-            font-size: 0.75rem;
-            a {
-                padding: 0;
-                line-height: 1.625;
-            }
         }
     }
 }

src/layouts/quote/quote.vue

@@ -47,8 +47,7 @@
                     <!-- If Cash AND vehicle does not require recal OR if Cash AND State requires showing recal, then show Afterpay banner -->
                     <afterpayModalBanner
                         v-if="showAfterpayBanner"
-                        cmsWidgetName="AfterpayBannerWidget"
+                        cmsWidgetName="AfterpayBannerWidget" />
-                        modalWidgetName="AfterpayModalWidget" />
 
                     <!-- If vehicle requires recal AND we are hiding recal pricing info, then show recal disclaimer banner. -->
                     <recalDisclaimer