From 7a3dabec4320e1895f8be3311015f3d6964835e7 Mon Sep 17 00:00:00 2001
From: Katie Kroell <Katie.Kroell@safelite.com>
Date: Wed, 18 Feb 2026 14:39:08 -0500
Subject: [PATCH 1/8] afterpay modal WIP

---
 .../afterpay-modal-banner.vue                 | 257 ++++++++++++++++++
 .../coverage-statement/coverage-statement.vue |  12 +-
 2 files changed, 268 insertions(+), 1 deletion(-)
 create mode 100644 src/layouts/coverage-statement/afterpay-modal-banner/afterpay-modal-banner.vue

diff --git a/src/layouts/coverage-statement/afterpay-modal-banner/afterpay-modal-banner.vue b/src/layouts/coverage-statement/afterpay-modal-banner/afterpay-modal-banner.vue
new file mode 100644
index 00000000..54ecc441
--- /dev/null
+++ b/src/layouts/coverage-statement/afterpay-modal-banner/afterpay-modal-banner.vue
@@ -0,0 +1,257 @@
+<template>
+    <div class="afterpay-modal-banner" role="alert">
+        <component
+            :is="'script'">
+            src="https://js.squarecdn.com/square-marketplace.js"
+            async></component>
+        <div class="afterpay-content">
+            <span class="afterpay-header" v-html="afterpayHeaderCopy"></span>
+            <span class="afterpay-amount">{{ afterpayPaymentAmount }}</span>
+            <span class="afterpay-subheader" v-html="afterpaySubheaderCopy"></span>
+            <img :src="imageUrl" class="image"/>
+            <span>. &nbsp;</span>
+            <a
+                id="afterpay-learnmore"
+                href="#"
+                data-afterpay-modal="en_US"
+                data-bind="click:afterpayLearnMore"
+                class="afterpay-learn-more"
+                >Learn more
+            </a>
+        </div>
+    </div>
+</template>
+
+<script>
+import {
+    doesCopyContainTextLink,
+    splitCopyOnCMSPlaceHolder,
+    getRouterLinkRouteFromCopy,
+    getRouterLinkDisplayTextFromCopy,
+    getExternalLink,
+    setupModalLinks
+} from "@/helpers/cms-content-helper";
+import { formatAmountInDollars } from '@/helpers/text-helper.js';
+import textLink from "@/ux-components/text-link/text-link";
+import modal from "@/digital-components/modal/modal";
+import widgetFields from '@/constants/cms-widget-fields.js'; import { useMainStore } from '@/store/index.js';
+
+export default {
+    name: "afterpay-banner",
+    components: {
+    },
+    props: {
+        cmsWidgetName: String,
+        modalWidgetName: String,
+        totalServicePrice: String
+    },
+    setup() {
+        const mainStore = useMainStore();
+        return { mainStore };
+    },
+    data() {
+        return {};
+    },
+    mounted() {
+        setupModalLinks(this);
+    },
+    methods: {
+        doesCopyContainTextLink,
+        splitCopyOnCMSPlaceHolder,
+        getRouterLinkRouteFromCopy,
+        getRouterLinkDisplayTextFromCopy,
+        getExternalLink,
+        openModal() {
+            this.modal?.openModal();
+        },
+        closeModal() {
+            this.modal?.closeModal();
+        },
+    },
+    computed: {
+        imageUrl() {
+            return this.getCmsContent(this.cmsWidgetName, widgetFields.CONTENT_GROUP_WIDGET.IMAGE);
+        },
+        afterpayHeaderCopy() {
+            return this.getCmsContent(this.cmsWidgetName, widgetFields.CONTENT_GROUP_WIDGET.HEADER_TEXT);
+        },
+        afterpaySubheaderCopy() {
+            return this.getCmsContent(this.cmsWidgetName, widgetFields.CONTENT_GROUP_WIDGET.SUBHEADER_TEXT);
+        },
+        modalName() {
+            return this.modalWidgetName;
+        },
+        modal() {
+            return this.$refs[this.modalName];
+        },
+        deductibleValue() {
+            return this.mainStore.currentDeductible;
+        },
+        afterpayPaymentAmount() {
+            return this.calculateAfterpayPaymentAmount;
+        },
+        isDeductibleScenario() {
+            return this.mainStore.isVerified && this.mainStore.isDeductible;
+        },
+        calculateAfterpayPaymentAmount() {
+            const totalAmount = this.isDeductibleScenario ? this.deductibleValue : this.totalServicePrice;
+            const afterpayAmount = (totalAmount / 4).toFixed(2);
+            return formatAmountInDollars(afterpayAmount);
+        }
+
+    }
+};
+</script>
+
+<style lang="scss" scoped>
+.afterpay-modal-banner {
+    background-color: $blue-100;
+    justify-content: center;
+    align-items: center;
+    padding: 0.5rem 1rem 0.5rem 1rem;
+    border-radius: 0.25rem;
+    margin-top: 20px;
+}
+
+.afterpay-content {
+    display: flex;
+    flex-direction: column;
+}
+
+.afterpay-copy {
+    font-size: 0.875rem;
+    color: $blue-700;
+    font-weight: $font-weight-bold;
+    text-align: center;
+    flex-direction: column;
+}
+
+.image-and-link {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.image {
+    flex-direction: column;
+    border: 0;
+}
+
+:deep(a.learn-more-link) {
+    color: $blue-700;
+    fill: $blue-700;
+    text-decoration: underline;
+}
+
+.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;
+                            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;
+            }
+        }
+    }
+}
+</style>
\ No newline at end of file
diff --git a/src/layouts/coverage-statement/coverage-statement.vue b/src/layouts/coverage-statement/coverage-statement.vue
index c1c7abbd..1d46973c 100644
--- a/src/layouts/coverage-statement/coverage-statement.vue
+++ b/src/layouts/coverage-statement/coverage-statement.vue
@@ -69,6 +69,10 @@
                         class="d-flex justify-content-center cost mb-0 cost-underline">
                         {{ formatAmountInDollars(totalServicePrice) }}
                     </div>
+                    <afterpayModalBanner
+                        v-if="displayAfterpayBanner"
+                        cmsWidgetName="AfterpayModalWidget"
+                        :totalServicePrice="totalServicePrice" />
                     <buttonMain
                         ref="buttonMain"
                         class="full-width-button mt-5 mb-5"
@@ -117,6 +121,7 @@ import textBlock from '@/digital-components/text-block/text-block.vue';
 import textLink from '@/ux-components/text-link/text-link.vue';
 import buttonMain from '@/ux-components/button-main/button-main.vue';
 import siteFooter from '@/iss-components/site-footer/site-footer.vue';
+import afterpayModalBanner from '@/layouts/coverage-statement/afterpay-modal-banner/afterpay-modal-banner.vue';
 // Import Supporting Files
 import {
     fetchCmsContentForPage,
@@ -151,7 +156,8 @@ export default {
         textBlock,
         textLink,
         siteFooter,
-        cancelClaimModal
+        cancelClaimModal,
+        afterpayModalBanner
     },
     mixins: [baseFormMixin, vehicleQuestionsMixin],
     async beforeRouteEnter(to, from, next) {
@@ -337,6 +343,10 @@ export default {
                 return 'centered-back-button';
             }
             return '';
+        },
+        displayAfterpayBanner() {
+            return true;
+            // return (this.isITACQuoteVisible || this.isNoCompQuoteVisible) && this.totalServicePrice > 0;
         }
     },
     watch: {

From aa4f9c2dc7a4e2f4b223b072723318ab98cf61bd Mon Sep 17 00:00:00 2001
From: Katie Kroell <Katie.Kroell@safelite.com>
Date: Wed, 18 Feb 2026 16:19:22 -0500
Subject: [PATCH 2/8] banner styling updates

---
 .../afterpay-modal-banner.vue                 | 31 +++++++++----------
 1 file changed, 15 insertions(+), 16 deletions(-)

diff --git a/src/layouts/coverage-statement/afterpay-modal-banner/afterpay-modal-banner.vue b/src/layouts/coverage-statement/afterpay-modal-banner/afterpay-modal-banner.vue
index 54ecc441..a56de829 100644
--- a/src/layouts/coverage-statement/afterpay-modal-banner/afterpay-modal-banner.vue
+++ b/src/layouts/coverage-statement/afterpay-modal-banner/afterpay-modal-banner.vue
@@ -3,20 +3,20 @@
         <component
             :is="'script'">
             src="https://js.squarecdn.com/square-marketplace.js"
-            async></component>
+            async>
+        </component>
         <div class="afterpay-content">
-            <span class="afterpay-header" v-html="afterpayHeaderCopy"></span>
-            <span class="afterpay-amount">{{ afterpayPaymentAmount }}</span>
-            <span class="afterpay-subheader" v-html="afterpaySubheaderCopy"></span>
+            <span class="afterpay-copy" v-html="afterpayCopy"></span>
+            <span class="afterpay-copy">{{ afterpayPaymentAmount }}</span>
+            <span class="afterpay-copy" v-html="afterpayCopyTwo"></span>
             <img :src="imageUrl" class="image"/>
-            <span>. &nbsp;</span>
+            <span class="afterpay-copy">. &nbsp;</span>
             <a
                 id="afterpay-learnmore"
                 href="#"
                 data-afterpay-modal="en_US"
                 data-bind="click:afterpayLearnMore"
-                class="afterpay-learn-more"
-                >Learn more
+                class="afterpay-learn-more">Learn more
             </a>
         </div>
     </div>
@@ -72,10 +72,10 @@ export default {
         imageUrl() {
             return this.getCmsContent(this.cmsWidgetName, widgetFields.CONTENT_GROUP_WIDGET.IMAGE);
         },
-        afterpayHeaderCopy() {
+        afterpayCopy() {
             return this.getCmsContent(this.cmsWidgetName, widgetFields.CONTENT_GROUP_WIDGET.HEADER_TEXT);
         },
-        afterpaySubheaderCopy() {
+        afterpayCopyTwo() {
             return this.getCmsContent(this.cmsWidgetName, widgetFields.CONTENT_GROUP_WIDGET.SUBHEADER_TEXT);
         },
         modalName() {
@@ -114,33 +114,32 @@ export default {
 }
 
 .afterpay-content {
-    display: flex;
-    flex-direction: column;
+    display: block;
+    text-align: center;
 }
 
 .afterpay-copy {
     font-size: 0.875rem;
     color: $blue-700;
     font-weight: $font-weight-bold;
-    text-align: center;
-    flex-direction: column;
 }
 
 .image-and-link {
-    display: flex;
     justify-content: center;
     align-items: center;
 }
 
 .image {
-    flex-direction: column;
     border: 0;
+    height: 20px;
+    width: 83px;
 }
 
-:deep(a.learn-more-link) {
+:deep(a.afterpay-learn-more) {
     color: $blue-700;
     fill: $blue-700;
     text-decoration: underline;
+    font-size: 0.875rem;
 }
 
 .afterpay-modal {

From 299985afefcf525b8d0ec3ba6d52fb0fb9d2ccbf Mon Sep 17 00:00:00 2001
From: Katie Kroell <Katie.Kroell@safelite.com>
Date: Wed, 18 Feb 2026 16:24:52 -0500
Subject: [PATCH 3/8] change prop type

---
 .../afterpay-modal-banner/afterpay-modal-banner.vue        | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/src/layouts/coverage-statement/afterpay-modal-banner/afterpay-modal-banner.vue b/src/layouts/coverage-statement/afterpay-modal-banner/afterpay-modal-banner.vue
index a56de829..50893471 100644
--- a/src/layouts/coverage-statement/afterpay-modal-banner/afterpay-modal-banner.vue
+++ b/src/layouts/coverage-statement/afterpay-modal-banner/afterpay-modal-banner.vue
@@ -16,7 +16,8 @@
                 href="#"
                 data-afterpay-modal="en_US"
                 data-bind="click:afterpayLearnMore"
-                class="afterpay-learn-more">Learn more
+                class="afterpay-learn-more">
+                <span>Learn more</span>
             </a>
         </div>
     </div>
@@ -32,8 +33,6 @@ import {
     setupModalLinks
 } from "@/helpers/cms-content-helper";
 import { formatAmountInDollars } from '@/helpers/text-helper.js';
-import textLink from "@/ux-components/text-link/text-link";
-import modal from "@/digital-components/modal/modal";
 import widgetFields from '@/constants/cms-widget-fields.js'; import { useMainStore } from '@/store/index.js';
 
 export default {
@@ -43,7 +42,7 @@ export default {
     props: {
         cmsWidgetName: String,
         modalWidgetName: String,
-        totalServicePrice: String
+        totalServicePrice: Number
     },
     setup() {
         const mainStore = useMainStore();

From ac498f17bc2c55bbf7670aa4ee4d38cd39ed8b03 Mon Sep 17 00:00:00 2001
From: Katie Kroell <Katie.Kroell@safelite.com>
Date: Thu, 19 Feb 2026 10:06:33 -0500
Subject: [PATCH 4/8] final updates

---
 .../afterpay-modal-banner/afterpay-modal-banner.vue          | 5 +++--
 src/layouts/coverage-statement/coverage-statement.vue        | 3 +--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/layouts/coverage-statement/afterpay-modal-banner/afterpay-modal-banner.vue b/src/layouts/coverage-statement/afterpay-modal-banner/afterpay-modal-banner.vue
index 50893471..a8a57239 100644
--- a/src/layouts/coverage-statement/afterpay-modal-banner/afterpay-modal-banner.vue
+++ b/src/layouts/coverage-statement/afterpay-modal-banner/afterpay-modal-banner.vue
@@ -1,9 +1,9 @@
 <template>
     <div class="afterpay-modal-banner" role="alert">
         <component
-            :is="'script'">
             src="https://js.squarecdn.com/square-marketplace.js"
-            async>
+            async
+            :is="'script'">
         </component>
         <div class="afterpay-content">
             <span class="afterpay-copy" v-html="afterpayCopy"></span>
@@ -121,6 +121,7 @@ export default {
     font-size: 0.875rem;
     color: $blue-700;
     font-weight: $font-weight-bold;
+    line-height: 1.5rem;
 }
 
 .image-and-link {
diff --git a/src/layouts/coverage-statement/coverage-statement.vue b/src/layouts/coverage-statement/coverage-statement.vue
index 1d46973c..38505c3a 100644
--- a/src/layouts/coverage-statement/coverage-statement.vue
+++ b/src/layouts/coverage-statement/coverage-statement.vue
@@ -345,8 +345,7 @@ export default {
             return '';
         },
         displayAfterpayBanner() {
-            return true;
-            // return (this.isITACQuoteVisible || this.isNoCompQuoteVisible) && this.totalServicePrice > 0;
+            return this.isITACQuoteVisible || this.isNoCompQuoteVisible || (this.isDeductibleVisible && this.deductibleValue > 0);
         }
     },
     watch: {

From d828fc45a9b8988a804b4299351657fe72d3faca Mon Sep 17 00:00:00 2001
From: Katie Kroell <Katie.Kroell@safelite.com>
Date: Thu, 19 Feb 2026 10:19:40 -0500
Subject: [PATCH 5/8] remove unneeded styling

---
 .../afterpay-modal-banner.vue                 | 112 ------------------
 1 file changed, 112 deletions(-)

diff --git a/src/layouts/coverage-statement/afterpay-modal-banner/afterpay-modal-banner.vue b/src/layouts/coverage-statement/afterpay-modal-banner/afterpay-modal-banner.vue
index a8a57239..97ad9269 100644
--- a/src/layouts/coverage-statement/afterpay-modal-banner/afterpay-modal-banner.vue
+++ b/src/layouts/coverage-statement/afterpay-modal-banner/afterpay-modal-banner.vue
@@ -141,116 +141,4 @@ export default {
     text-decoration: underline;
     font-size: 0.875rem;
 }
-
-.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;
-                            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;
-            }
-        }
-    }
-}
 </style>
\ No newline at end of file

From b50d8d5f88aac5da6ea2b7348355e533b9c7a862 Mon Sep 17 00:00:00 2001
From: Katie Kroell <Katie.Kroell@safelite.com>
Date: Thu, 19 Feb 2026 10:31:25 -0500
Subject: [PATCH 6/8] copilot fixes

---
 .../afterpay-modal-banner.vue                 | 30 ++++---------------
 1 file changed, 6 insertions(+), 24 deletions(-)

diff --git a/src/layouts/coverage-statement/afterpay-modal-banner/afterpay-modal-banner.vue b/src/layouts/coverage-statement/afterpay-modal-banner/afterpay-modal-banner.vue
index 97ad9269..b3f6696b 100644
--- a/src/layouts/coverage-statement/afterpay-modal-banner/afterpay-modal-banner.vue
+++ b/src/layouts/coverage-statement/afterpay-modal-banner/afterpay-modal-banner.vue
@@ -9,14 +9,15 @@
             <span class="afterpay-copy" v-html="afterpayCopy"></span>
             <span class="afterpay-copy">{{ afterpayPaymentAmount }}</span>
             <span class="afterpay-copy" v-html="afterpayCopyTwo"></span>
-            <img :src="imageUrl" class="image"/>
+            <img :src="imageUrl" class="image" alt="Afterpay logo"/>
             <span class="afterpay-copy">. &nbsp;</span>
             <a
                 id="afterpay-learnmore"
                 href="#"
                 data-afterpay-modal="en_US"
                 data-bind="click:afterpayLearnMore"
-                class="afterpay-learn-more">
+                class="afterpay-learn-more"
+                @click.prevent>
                 <span>Learn more</span>
             </a>
         </div>
@@ -24,16 +25,10 @@
 </template>
 
 <script>
-import {
-    doesCopyContainTextLink,
-    splitCopyOnCMSPlaceHolder,
-    getRouterLinkRouteFromCopy,
-    getRouterLinkDisplayTextFromCopy,
-    getExternalLink,
-    setupModalLinks
-} from "@/helpers/cms-content-helper";
+import { setupModalLinks } from "@/helpers/cms-content-helper";
 import { formatAmountInDollars } from '@/helpers/text-helper.js';
-import widgetFields from '@/constants/cms-widget-fields.js'; import { useMainStore } from '@/store/index.js';
+import widgetFields from '@/constants/cms-widget-fields.js';
+import { useMainStore } from '@/store/index.js';
 
 export default {
     name: "afterpay-banner",
@@ -54,19 +49,6 @@ export default {
     mounted() {
         setupModalLinks(this);
     },
-    methods: {
-        doesCopyContainTextLink,
-        splitCopyOnCMSPlaceHolder,
-        getRouterLinkRouteFromCopy,
-        getRouterLinkDisplayTextFromCopy,
-        getExternalLink,
-        openModal() {
-            this.modal?.openModal();
-        },
-        closeModal() {
-            this.modal?.closeModal();
-        },
-    },
     computed: {
         imageUrl() {
             return this.getCmsContent(this.cmsWidgetName, widgetFields.CONTENT_GROUP_WIDGET.IMAGE);

From 0384723fc2ee3672a45e4d070f124286e81dbf16 Mon Sep 17 00:00:00 2001
From: katiekroell <100247286+katiekroell@users.noreply.github.com>
Date: Thu, 19 Feb 2026 10:53:09 -0500
Subject: [PATCH 7/8] Update
 src/layouts/coverage-statement/coverage-statement.vue

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
---
 src/layouts/coverage-statement/coverage-statement.vue | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/layouts/coverage-statement/coverage-statement.vue b/src/layouts/coverage-statement/coverage-statement.vue
index 9cc28958..13ecac57 100644
--- a/src/layouts/coverage-statement/coverage-statement.vue
+++ b/src/layouts/coverage-statement/coverage-statement.vue
@@ -347,7 +347,9 @@ export default {
             return '';
         },
         displayAfterpayBanner() {
-            return this.isITACQuoteVisible || this.isNoCompQuoteVisible || (this.isDeductibleVisible && this.deductibleValue > 0);
+            return this.isITACQuoteVisible
+                || this.isNoCompQuoteVisible
+                || (this.showDeductibleOnly && this.deductibleValue > 0);
         }
     },
     watch: {

From ba66b40e1e18a0689509c471460200821c339cc1 Mon Sep 17 00:00:00 2001
From: Katie Kroell <Katie.Kroell@safelite.com>
Date: Thu, 19 Feb 2026 10:58:12 -0500
Subject: [PATCH 8/8] copilot - add unit tests / remove unneeded code

---
 .../afterpay-modal-banner.vue                 |  10 --
 .../coverage-statement.spec.js                | 103 ++++++++++++++++++
 2 files changed, 103 insertions(+), 10 deletions(-)

diff --git a/src/layouts/coverage-statement/afterpay-modal-banner/afterpay-modal-banner.vue b/src/layouts/coverage-statement/afterpay-modal-banner/afterpay-modal-banner.vue
index b3f6696b..232cf329 100644
--- a/src/layouts/coverage-statement/afterpay-modal-banner/afterpay-modal-banner.vue
+++ b/src/layouts/coverage-statement/afterpay-modal-banner/afterpay-modal-banner.vue
@@ -36,7 +36,6 @@ export default {
     },
     props: {
         cmsWidgetName: String,
-        modalWidgetName: String,
         totalServicePrice: Number
     },
     setup() {
@@ -46,9 +45,6 @@ export default {
     data() {
         return {};
     },
-    mounted() {
-        setupModalLinks(this);
-    },
     computed: {
         imageUrl() {
             return this.getCmsContent(this.cmsWidgetName, widgetFields.CONTENT_GROUP_WIDGET.IMAGE);
@@ -59,12 +55,6 @@ export default {
         afterpayCopyTwo() {
             return this.getCmsContent(this.cmsWidgetName, widgetFields.CONTENT_GROUP_WIDGET.SUBHEADER_TEXT);
         },
-        modalName() {
-            return this.modalWidgetName;
-        },
-        modal() {
-            return this.$refs[this.modalName];
-        },
         deductibleValue() {
             return this.mainStore.currentDeductible;
         },
diff --git a/src/layouts/coverage-statement/coverage-statement.spec.js b/src/layouts/coverage-statement/coverage-statement.spec.js
index ea913872..854a5368 100644
--- a/src/layouts/coverage-statement/coverage-statement.spec.js
+++ b/src/layouts/coverage-statement/coverage-statement.spec.js
@@ -439,6 +439,109 @@ describe('coverageStatement.vue', () => {
                 expect(result).toBe(expected);
             });
         });
+        describe('displayAfterpayBanner', () => {
+            test('returns true if ITAC', () => {
+                // Arrange
+                const mainInitialState = {
+                    order: {
+                        insuranceCoverage: {
+                            coverageStatus: coverageStatuses.VERIFIED,
+                            coverageType: coverageType.ITAC
+                        }
+                    }
+                };
+                const { wrapper } = getMountedComponent(mainInitialState);
+
+                // Act
+                const result = wrapper.vm.displayAfterpayBanner;
+
+                // Assert
+                expect(result).toBeTruthy();
+            });
+            test('returns true if No Comp', () => {
+                // Arrange
+                const mainInitialState = {
+                    order: {
+                        insuranceCoverage: {
+                            coverageStatus: coverageStatuses.VERIFIED,
+                            coverageType: coverageType.NO_COMP
+                        }
+                    }
+                };
+                const { wrapper } = getMountedComponent(mainInitialState);
+                
+                // Act
+                const result = wrapper.vm.displayAfterpayBanner;
+
+                // Assert
+                expect(result).toBeTruthy();
+            });
+            test('returns true if deductible is > $0', () => {
+                // Arrange
+                const mainInitialState = {
+                    order: {
+                        insuranceCoverage: {
+                            coverageStatus: coverageStatuses.VERIFIED,
+                            coverageType: coverageType.Deductible
+                        },
+                        damage: {
+                            isRepair: false
+                        },
+                        currentDeductible: {
+                            replace: 500
+                        }
+                    }
+                };
+                const { wrapper } = getMountedComponent(mainInitialState);
+                
+                // Act
+                const result = wrapper.vm.displayAfterpayBanner;
+
+                // Assert
+                expect(result).toBeTruthy();
+            });
+            test('returns false if deductible is <= $0', () => {
+                // Arrange
+                const mainInitialState = {
+                    order: {
+                        insuranceCoverage: {
+                            coverageStatus: coverageStatuses.VERIFIED,
+                            coverageType: coverageType.Deductible
+                        },
+                        damage: {
+                            isRepair: false
+                        },
+                        currentDeductible: {
+                            replace: 0
+                        }
+                    }
+                };
+                const { wrapper } = getMountedComponent(mainInitialState);
+                
+                // Act
+                const result = wrapper.vm.displayAfterpayBanner;
+
+                // Assert
+                expect(result).toBeFalsy();
+            });
+            test('returns false if Unverified', () => {
+                // Arrange
+                const mainInitialState = {
+                    order: {
+                        insuranceCoverage: {
+                            coverageStatus: coverageStatuses.UNVERIFIED,
+                        }
+                    }
+                };
+                const { wrapper } = getMountedComponent(mainInitialState);
+                
+                // Act
+                const result = wrapper.vm.displayAfterpayBanner;
+
+                // Assert
+                expect(result).toBeFalsy();
+            });
+        });
     });
     describe('methods', () => {
         describe('arePagePrerequisitesValid', () => {