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] 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;
     }
 }