From 1a8b7c2a2dd722f621a981c06f59e50207cc4108 Mon Sep 17 00:00:00 2001
From: Katie Kroell <Katie.Kroell@safelite.com>
Date: Wed, 17 Jan 2024 09:25:37 -0500
Subject: [PATCH 01/22] tpa-conf WIP

---
 .../tpa-confirmation/tpa-confirmation.vue     | 35 +++++++++++++++----
 1 file changed, 29 insertions(+), 6 deletions(-)

diff --git a/src/layouts/tpa-confirmation/tpa-confirmation.vue b/src/layouts/tpa-confirmation/tpa-confirmation.vue
index 5a0cf4d2..23817e5b 100644
--- a/src/layouts/tpa-confirmation/tpa-confirmation.vue
+++ b/src/layouts/tpa-confirmation/tpa-confirmation.vue
@@ -8,13 +8,19 @@
             <div class="fade-on-route-transition position-relative">
                 <siteHeader cmsWidgetName="SiteHeaderWidget" />
                 <div class="container-fluid pb-2 confirmation">
-                    <p>Placeholder for tpa-confirmation page</p>
+                    <vehicleBanner
+                        class="mb-4"
+                        cmsWidgetName="VehicleBannerWidget"
+                        :displayGenericVehicleImage="false" />
+                    <siteSubHeader cmsWidgetName="SiteSubHeaderWidget" />
+                    <textBlock
+                        :customText="tpaConfirmationBody" />
                     <siteFooter
-                    ref="siteFooter"
-                    cmsWidgetName="SiteFooterWidget"
-                    :isForwardActionDisabled="!meta.valid"
-                    @ForwardClicked="forwardButtonAction"
-                    @backClicked="navigateBack" />
+                        ref="siteFooter"
+                        cmsWidgetName="SiteFooterWidget"
+                        :isForwardActionDisabled="!meta.valid"
+                        @ForwardClicked="forwardButtonAction"
+                        @backClicked="navigateBack" />
                 </div>
             </div>
         </div>
@@ -23,19 +29,26 @@
 <script>
 // Components
 import siteHeader from '@/iss-components/site-header/site-header.vue';
+import vehicleBanner from '@/iss-components/vehicle-banner/vehicle-banner.vue';
+import siteSubHeader from '@/iss-components/site-sub-header/site-sub-header.vue';
 import siteFooter from '@/iss-components/site-footer/site-footer.vue';
+import textBlock from '@/digital-components/text-block/text-block.vue';
 // Supporting files
 import { fetchCmsContentForPage } from '@/helpers/cms-content-helper';
 import settleAllPromises from '@/helpers/layout-helper';
 import { Form } from 'vee-validate';
 import BaseFormMixin from '@/mixins/base-form-mixin.js';
 import { useMainStore } from '@/store';
+import widgetFields from '@/constants/cms-widget-fields';
 
 export default {
     name: 'tpa-confirmation',
     components: {
         siteHeader,
         siteFooter,
+        vehicleBanner,
+        siteSubHeader,
+        textBlock,
         // eslint-disable-next-line vue/no-reserved-component-names
         Form
     },
@@ -60,6 +73,16 @@ export default {
         return { mainStore };
     },
     data() {
+        return {
+            widget: {
+                tpaConfirmation: 'TPAConfirmationContent'
+            }
+        };
+    },
+    computed: {
+        tpaConfirmationBody() {
+            return this.getCmsContent(this.widget.tpaConfirmation, widgetFields.CONTENT_GROUP_WIDGET.BODY_TEXT);
+        }
     },
     methods:
         {

From 0fdc6c54e7548103273d8a9675069e72491db938 Mon Sep 17 00:00:00 2001
From: Katie Kroell <Katie.Kroell@safelite.com>
Date: Fri, 19 Jan 2024 17:10:55 -0500
Subject: [PATCH 02/22] tpa-conf WIP

---
 .../tpa-confirmation/tpa-confirmation.vue     | 68 ++++++++++++++++---
 .../router-constants/navigation-scenarios.js  |  3 +
 src/router/router-constants/routing-table.js  |  4 ++
 3 files changed, 67 insertions(+), 8 deletions(-)

diff --git a/src/layouts/tpa-confirmation/tpa-confirmation.vue b/src/layouts/tpa-confirmation/tpa-confirmation.vue
index 23817e5b..9eabddb5 100644
--- a/src/layouts/tpa-confirmation/tpa-confirmation.vue
+++ b/src/layouts/tpa-confirmation/tpa-confirmation.vue
@@ -7,14 +7,25 @@
         <div class="page-container-grouped-styles">
             <div class="fade-on-route-transition position-relative">
                 <siteHeader cmsWidgetName="SiteHeaderWidget" />
-                <div class="container-fluid pb-2 confirmation">
+                <div class="container-fluid px-5 pb-2 confirmation">
                     <vehicleBanner
                         class="mb-4"
                         cmsWidgetName="VehicleBannerWidget"
                         :displayGenericVehicleImage="false" />
                     <siteSubHeader cmsWidgetName="SiteSubHeaderWidget" />
                     <textBlock
+                        ref="tpaConfirmationBody"
                         :customText="tpaConfirmationBody" />
+                    <div>
+                        <textBlock
+                            id="tpaConfirmationOrderDetailsTitle"
+                            ref="tpaConfirmationOrderDetailsTitle"
+                            :customText="orderDetailsTitle"
+                            :marginTopSizeOverride="4"
+                            class="fw-bold text-color--black"
+                            @click-event="navigateWithScenario()" />
+                        <deductibleBox ref="deductibleBox" :value="deductibleBoxValue" />
+                    </div>
                     <siteFooter
                         ref="siteFooter"
                         cmsWidgetName="SiteFooterWidget"
@@ -33,6 +44,8 @@ import vehicleBanner from '@/iss-components/vehicle-banner/vehicle-banner.vue';
 import siteSubHeader from '@/iss-components/site-sub-header/site-sub-header.vue';
 import siteFooter from '@/iss-components/site-footer/site-footer.vue';
 import textBlock from '@/digital-components/text-block/text-block.vue';
+import deductibleBox from '@/layouts/tpa-submit/deductible-box/deductible-box.vue';
+
 // Supporting files
 import { fetchCmsContentForPage } from '@/helpers/cms-content-helper';
 import settleAllPromises from '@/helpers/layout-helper';
@@ -40,6 +53,9 @@ import { Form } from 'vee-validate';
 import BaseFormMixin from '@/mixins/base-form-mixin.js';
 import { useMainStore } from '@/store';
 import widgetFields from '@/constants/cms-widget-fields';
+import { toTitleCase, toDisplayPhoneNumber, formatAmountInDollars } from '@/helpers/text-helper.js';
+
+const VERIFYING_COVERAGE = 'Verifying coverage';
 
 export default {
     name: 'tpa-confirmation',
@@ -49,6 +65,7 @@ export default {
         vehicleBanner,
         siteSubHeader,
         textBlock,
+        deductibleBox,
         // eslint-disable-next-line vue/no-reserved-component-names
         Form
     },
@@ -73,15 +90,37 @@ export default {
         return { mainStore };
     },
     data() {
+        const { companyName } = useMainStore().order.serviceLocation.provider;
         return {
             widget: {
-                tpaConfirmation: 'TPAConfirmationContent'
+                tpaConfirmation: 'TPAConfirmationContent',
+                orderDetails: 'OrderDetailsContent'
+            },
+            companyName,
+            customValueMap: {
+                glassShop: companyName
             }
         };
     },
     computed: {
         tpaConfirmationBody() {
-            return this.getCmsContent(this.widget.tpaConfirmation, widgetFields.CONTENT_GROUP_WIDGET.BODY_TEXT);
+            return this.getCmsContent(this.widget.tpaConfirmation, widgetFields.CONTENT_GROUP_WIDGET.BODY_TEXT)
+                .replaceAll('{custom:phoneNumber}', this.preferredShopPhoneNumber);
+        },
+        preferredShopPhoneNumber() {
+            return this.toDisplayPhoneNumber(useMainStore().order.serviceLocation.provider.phoneNumber);
+        },
+        orderDetailsTitle() {
+            return this.getCmsContent(this.widget.orderDetails, widgetFields.TEXT_BLOCK_WIDGET.TEXT);
+        },
+        isVerified() {
+            return useMainStore().order.payment.insuranceCoverage.isVerified;
+        },
+        currentDeductible() {
+            return useMainStore().order.currentDeductible;
+        },
+        deductibleBoxValue() {
+            return this.isVerified ? this.formatAmountInDollars(this.currentDeductible) : VERIFYING_COVERAGE;
         }
     },
     methods:
@@ -89,19 +128,32 @@ export default {
             async forwardButtonAction() {
                 return this.navigateForward();
             },
-
             navigateForward() {
                 this.$router.navigate(
                     this.navigationScenarios.CLICKED_FORWARD,
                     this.$route
                 );
-            }
+            },
+            getBodyTextFromCms(cmsWidgetName) {
+                return this.getCmsContent(cmsWidgetName, 'BodyText');
+            },
+            getCustomValueFromString(str) {
+                switch (str) {
+                    case 'verifyingCoverage':
+                        return !this.isVerified;
+                    default:
+                        return null;
+                }
+            },
+            navigate(scenario) {
+                this.$router.navigate(scenario, this.$route);
+            },
+            toDisplayPhoneNumber,
+            toTitleCase,
+            formatAmountInDollars
         }
 };
 </script>
 <style lang="scss" scoped>
-.confirmation p{
-    margin-bottom:0.75rem;
 
-}
 </style>
diff --git a/src/router/router-constants/navigation-scenarios.js b/src/router/router-constants/navigation-scenarios.js
index 0d4376aa..142aa087 100644
--- a/src/router/router-constants/navigation-scenarios.js
+++ b/src/router/router-constants/navigation-scenarios.js
@@ -74,6 +74,9 @@ const navigationScenarios = Object.freeze({
     EDIT_PREFERRED_SHOP: 'EDIT_PREFERRED_SHOP',
     EDIT_CONTACT_DETAILS: 'EDIT_CONTACT_DETAILS',
 
+    // TPA Confirmation
+    REQUEST_CALLBACK: 'REQUEST_CALLBACK',
+
     // Provider Preference
     CLICKED_FORWARD_WITH_SAFELITE: 'CLICKED_FORWARD_WITH_SAFELITE',
     CLICKED_FORWARD_WITH_TPA_ENABLED: 'CLICKED_FORWARD_WITH_TPA_ENABLED',
diff --git a/src/router/router-constants/routing-table.js b/src/router/router-constants/routing-table.js
index 2cded6f6..365a6dd0 100644
--- a/src/router/router-constants/routing-table.js
+++ b/src/router/router-constants/routing-table.js
@@ -659,6 +659,10 @@ const routingTable = () => [
             {
                 scenario: navigationScenarios.CLICKED_FORWARD,
                 destinationIssPageValue: issPageValues.WELCOME_PAGE
+            },
+            {
+                scenario: navigationScenarios.REQUEST_CALLBACK,
+                destinationIssPageValue: issPageValues.BAILOUT_PAGE
             }
         ]
     },

From 3278437d292e0969948b0e004d83363049cc7bc7 Mon Sep 17 00:00:00 2001
From: Katie Kroell <Katie.Kroell@safelite.com>
Date: Mon, 22 Jan 2024 17:01:01 -0500
Subject: [PATCH 03/22] tpa-conf styling and routing WIP

---
 .../tpa-confirmation/tpa-confirmation.vue     | 136 ++++++++++++++++--
 1 file changed, 124 insertions(+), 12 deletions(-)

diff --git a/src/layouts/tpa-confirmation/tpa-confirmation.vue b/src/layouts/tpa-confirmation/tpa-confirmation.vue
index 9eabddb5..689a1e5f 100644
--- a/src/layouts/tpa-confirmation/tpa-confirmation.vue
+++ b/src/layouts/tpa-confirmation/tpa-confirmation.vue
@@ -12,17 +12,47 @@
                         class="mb-4"
                         cmsWidgetName="VehicleBannerWidget"
                         :displayGenericVehicleImage="false" />
-                    <siteSubHeader cmsWidgetName="SiteSubHeaderWidget" />
+                    <div class="header-container">
+                        <img :src="tpaConfirmationImage" />
+                        <span v-html="tpaConfirmationHeaderText"></span>
+                    </div>
+                    <div class="subheader-container">
+                        <span v-html="tpaConfirmationSubheaderText"></span>
+                    </div>
                     <textBlock
-                        ref="tpaConfirmationBody"
-                        :customText="tpaConfirmationBody" />
+                        id="tpaConfirmationBodyOne"
+                        ref="tpaConfirmationBodyOne"
+                        :customText="tpaConfirmationBodyOne" />
+                    <textBlock
+                        id="tpaConfirmationBodyTwo"
+                        ref="tpaConfirmationBodyTwo"
+                        :customText="tpaConfirmationBodyTwo"
+                        class="small text-color--darker-gray" />
+                    <div class="contact-carrier">
+                        <span
+                                v-for="copy in splitContactCarrierText"
+                                :key="copy">
+                            <span
+                                v-if="doesCopyContainRouterLink(copy)">
+                                <routerLink
+                                    :to="{
+                                        query: { issPage: `${getRouterLinkRouteFromCopy(copy)}` },
+                                        name: 'root',
+                                }">{{ getRouterLinkDisplayTextFromCopy(copy) }}</routerLink>
+                        </span>
+                        <span
+                            v-else
+                            v-html="copy">
+                        </span>
+                    </span>
+                    </div>
                     <div>
                         <textBlock
                             id="tpaConfirmationOrderDetailsTitle"
                             ref="tpaConfirmationOrderDetailsTitle"
                             :customText="orderDetailsTitle"
                             :marginTopSizeOverride="4"
-                            class="fw-bold text-color--black"
+                            class="order-details"
                             @click-event="navigateWithScenario()" />
                         <deductibleBox ref="deductibleBox" :value="deductibleBoxValue" />
                     </div>
@@ -41,13 +71,16 @@
 // Components
 import siteHeader from '@/iss-components/site-header/site-header.vue';
 import vehicleBanner from '@/iss-components/vehicle-banner/vehicle-banner.vue';
-import siteSubHeader from '@/iss-components/site-sub-header/site-sub-header.vue';
 import siteFooter from '@/iss-components/site-footer/site-footer.vue';
 import textBlock from '@/digital-components/text-block/text-block.vue';
 import deductibleBox from '@/layouts/tpa-submit/deductible-box/deductible-box.vue';
 
 // Supporting files
-import { fetchCmsContentForPage } from '@/helpers/cms-content-helper';
+import { doesCopyContainRouterLink,
+    fetchCmsContentForPage,
+    splitCopyOnCMSPlaceHolder,
+    getRouterLinkRouteFromCopy,
+    getRouterLinkDisplayTextFromCopy } from '@/helpers/cms-content-helper';
 import settleAllPromises from '@/helpers/layout-helper';
 import { Form } from 'vee-validate';
 import BaseFormMixin from '@/mixins/base-form-mixin.js';
@@ -63,7 +96,7 @@ export default {
         siteHeader,
         siteFooter,
         vehicleBanner,
-        siteSubHeader,
+        // siteSubHeader,
         textBlock,
         deductibleBox,
         // eslint-disable-next-line vue/no-reserved-component-names
@@ -90,11 +123,12 @@ export default {
         return { mainStore };
     },
     data() {
-        const { companyName } = useMainStore().order.serviceLocation.provider;
+        const { companyName } = toTitleCase(useMainStore().order.serviceLocation.provider.companyName ?? '');
         return {
             widget: {
                 tpaConfirmation: 'TPAConfirmationContent',
-                orderDetails: 'OrderDetailsContent'
+                orderDetails: 'OrderDetailsContent',
+                contactCarrier: 'ContactCarrierContent'
             },
             companyName,
             customValueMap: {
@@ -103,9 +137,16 @@ export default {
         };
     },
     computed: {
-        tpaConfirmationBody() {
+        tpaConfirmationBodyOne() {
             return this.getCmsContent(this.widget.tpaConfirmation, widgetFields.CONTENT_GROUP_WIDGET.BODY_TEXT)
-                .replaceAll('{custom:phoneNumber}', this.preferredShopPhoneNumber);
+                .replaceAll('{custom:phoneNumber}', this.preferredShopPhoneNumber)
+                .replaceAll('{custom:glassShop}', this.preferredShopName);
+        },
+        tpaConfirmationBodyTwo() {
+            return this.getCmsContent(this.widget.tpaConfirmation, widgetFields.CONTENT_GROUP_WIDGET.BODY_TEXT_2);
+        },
+        preferredShopName() {
+            return toTitleCase(useMainStore().order.serviceLocation.provider.companyName);
         },
         preferredShopPhoneNumber() {
             return this.toDisplayPhoneNumber(useMainStore().order.serviceLocation.provider.phoneNumber);
@@ -121,6 +162,22 @@ export default {
         },
         deductibleBoxValue() {
             return this.isVerified ? this.formatAmountInDollars(this.currentDeductible) : VERIFYING_COVERAGE;
+        },
+        tpaConfirmationHeaderText() {
+            return this.getCmsContent('TPAConfirmationContent', 'HeaderText');
+        },
+        tpaConfirmationSubheaderText() {
+            return this.getCmsContent('TPAConfirmationContent', 'SubheaderText')
+                .replaceAll('{custom:glassShop}', this.preferredShopName);
+        },
+        tpaConfirmationImage() {
+            return this.getCmsContent('TPAConfirmationContent', 'Image');
+        },
+        contactCarrierText() {
+            return this.getCmsContent(this.widget.contactCarrier, widgetFields.TEXT_BLOCK_WIDGET.TEXT);
+        },
+        splitContactCarrierText() {
+            return this.splitCopyOnCMSPlaceHolder(this.contactCarrierText);
         }
     },
     methods:
@@ -150,10 +207,65 @@ export default {
             },
             toDisplayPhoneNumber,
             toTitleCase,
-            formatAmountInDollars
+            formatAmountInDollars,
+            splitCopyOnCMSPlaceHolder,
+            doesCopyContainRouterLink,
+            getRouterLinkRouteFromCopy,
+            getRouterLinkDisplayTextFromCopy
         }
 };
 </script>
 <style lang="scss" scoped>
+.header-container {
+    text-align: center;
+    padding-bottom: 0.75rem;
+    font-size: 1.25rem;
+    color: $black;
 
+    span {
+        margin-left: 0.5rem;
+    }
+}
+
+.subheader-container {
+    text-align: center;
+    padding-bottom: 1rem;
+    font-weight: 500;
+    color: $black;
+}
+
+#tpaConfirmationBodyOne {
+    margin-top: 0;
+
+    :deep(p) {
+        color: $darker-gray;
+        line-height: 1.5rem;
+        font-size: 14px;
+        margin-bottom: 1rem;
+
+        strong {
+            color: $black;
+        }
+    }
+}
+
+#tpaConfirmationBodyTwo {
+    line-height: 1.5rem;
+    margin-top: 0;
+}
+
+#tpaConfirmationOrderDetailsTitle {
+    font-weight: 500;
+    line-height: 1.25rem;
+    color: $black;
+    margin-bottom: 1rem;
+    margin-top: 2rem;
+}
+
+.contact-carrier {
+    font-size: 14px;
+    line-height: 1.5rem;
+    color: $darker-gray;
+    margin-top: 1rem;
+}
 </style>

From 73f42613ce049e331755d85489c69f839fde5143 Mon Sep 17 00:00:00 2001
From: Katie Kroell <Katie.Kroell@safelite.com>
Date: Tue, 23 Jan 2024 16:45:20 -0500
Subject: [PATCH 04/22] change router link setup for text-block component

---
 src/digital-components/text-block/text-block.vue | 11 +++++------
 1 file changed, 5 insertions(+), 6 deletions(-)

diff --git a/src/digital-components/text-block/text-block.vue b/src/digital-components/text-block/text-block.vue
index 2d8c6add..c9c98e7b 100644
--- a/src/digital-components/text-block/text-block.vue
+++ b/src/digital-components/text-block/text-block.vue
@@ -6,12 +6,11 @@
         v-for="copy in splitCopyOnCMSPlaceHolder(textBlockCopy)"
         :key="copy">
             <span v-if="doesCopyContainRouterLink(copy)">
-                <textLink
-                    linkType="text"
-                    :text="getRouterLinkDisplayTextFromCopy(copy)"
-                    href="javascript:void(0)"
-                    useLoadingModal
-                    @click-event="navigateWithScenario(getRouterLinkRouteFromCopy(copy))" />
+                <routerLink
+                    :to="{
+                        query: { issPage: `${getRouterLinkRouteFromCopy(copy)}` },
+                        name: 'root',
+                    }">{{ getRouterLinkDisplayTextFromCopy(copy) }}</routerLink>
             </span>
             <span v-else-if="doesCopyContainTextLink(copy)">
                 <textLink

From ade55f6e3dbde98fecedc5d29ea10d52a71796b7 Mon Sep 17 00:00:00 2001
From: Katie Kroell <Katie.Kroell@safelite.com>
Date: Tue, 23 Jan 2024 16:45:36 -0500
Subject: [PATCH 05/22] add bailout info

---
 src/constants/bailoutCode.js    | 3 ++-
 src/constants/bailoutMessage.js | 4 ++++
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/constants/bailoutCode.js b/src/constants/bailoutCode.js
index 5ec4d476..6e4dd986 100644
--- a/src/constants/bailoutCode.js
+++ b/src/constants/bailoutCode.js
@@ -6,7 +6,8 @@ const bailoutCode = Object.freeze({
     CoverageStatementInvalidState: 4,
     DoNotSeeMyShop: 5,
     PricingResponseError: 6,
-    TPANotEnabled: 7
+    TPANotEnabled: 7,
+    RequestCallback: 8
 });
 
 export default bailoutCode;
diff --git a/src/constants/bailoutMessage.js b/src/constants/bailoutMessage.js
index f4d204b6..5d8df6be 100644
--- a/src/constants/bailoutMessage.js
+++ b/src/constants/bailoutMessage.js
@@ -44,6 +44,10 @@ const bailoutMessage = Object.freeze({
     TPANotEnabled: () => ({
         code: bailoutCode.TPANotEnabled,
         message: 'User selected TPA when TPA is not enabled for this client'
+    }),
+    RequestCallback: () => ({
+        code: bailoutCode.RequestCallback,
+        message: 'User selected option to receive callback from Safelite'
     })
 });
 

From e4ab35b405cdad5d9198c7a40801f50add404b54 Mon Sep 17 00:00:00 2001
From: Katie Kroell <Katie.Kroell@safelite.com>
Date: Tue, 23 Jan 2024 16:45:47 -0500
Subject: [PATCH 06/22] tpa confirmation updates

---
 .../tpa-confirmation/tpa-confirmation.vue     | 62 ++++++++++++-------
 src/layouts/vin-lookup/vin-lookup.vue         |  2 +-
 2 files changed, 39 insertions(+), 25 deletions(-)

diff --git a/src/layouts/tpa-confirmation/tpa-confirmation.vue b/src/layouts/tpa-confirmation/tpa-confirmation.vue
index 689a1e5f..8241710d 100644
--- a/src/layouts/tpa-confirmation/tpa-confirmation.vue
+++ b/src/layouts/tpa-confirmation/tpa-confirmation.vue
@@ -27,13 +27,18 @@
                         id="tpaConfirmationBodyTwo"
                         ref="tpaConfirmationBodyTwo"
                         :customText="tpaConfirmationBodyTwo"
-                        class="small text-color--darker-gray" />
-                    <div class="contact-carrier">
+                        class="small text-color--darker-gray mb-4" />
+                    <textBlock
+                        id="contactCarrierText"
+                        ref="contactCarrierText"
+                        :customText="contactCarrierText"
+                        class="small text-color--darker-gray"
+                        @click="setBailoutInfo()" />
+                    <!-- <div class="contact-carrier">
                         <span
-                                v-for="copy in splitContactCarrierText"
-                                :key="copy">
-                            <span
-                                v-if="doesCopyContainRouterLink(copy)">
+                        v-for="copy in splitContactCarrierText"
+                        :key="copy">
+                            <span v-if="doesCopyContainRouterLink(copy)">
                                 <routerLink
                                     :to="{
                                         query: { issPage: `${getRouterLinkRouteFromCopy(copy)}` },
@@ -45,15 +50,14 @@
                             v-html="copy">
                         </span>
                     </span>
-                    </div>
+                    </div> -->
                     <div>
                         <textBlock
                             id="tpaConfirmationOrderDetailsTitle"
                             ref="tpaConfirmationOrderDetailsTitle"
                             :customText="orderDetailsTitle"
                             :marginTopSizeOverride="4"
-                            class="order-details"
-                            @click-event="navigateWithScenario()" />
+                            class="order-details" />
                         <deductibleBox ref="deductibleBox" :value="deductibleBoxValue" />
                     </div>
                     <siteFooter
@@ -87,6 +91,7 @@ import BaseFormMixin from '@/mixins/base-form-mixin.js';
 import { useMainStore } from '@/store';
 import widgetFields from '@/constants/cms-widget-fields';
 import { toTitleCase, toDisplayPhoneNumber, formatAmountInDollars } from '@/helpers/text-helper.js';
+import bailoutMessage from '@/constants/bailoutMessage';
 
 const VERIFYING_COVERAGE = 'Verifying coverage';
 
@@ -123,17 +128,18 @@ export default {
         return { mainStore };
     },
     data() {
-        const { companyName } = toTitleCase(useMainStore().order.serviceLocation.provider.companyName ?? '');
+        // const { companyName } = toTitleCase(useMainStore().order.serviceLocation.provider.companyName ?? '');
         return {
             widget: {
                 tpaConfirmation: 'TPAConfirmationContent',
                 orderDetails: 'OrderDetailsContent',
                 contactCarrier: 'ContactCarrierContent'
-            },
-            companyName,
-            customValueMap: {
-                glassShop: companyName
             }
+            // companyName,
+            // customValueMap: {
+            //     glassShop: companyName,
+            //     carrierPhoneNumber
+            // }
         };
     },
     computed: {
@@ -174,12 +180,20 @@ export default {
             return this.getCmsContent('TPAConfirmationContent', 'Image');
         },
         contactCarrierText() {
-            return this.getCmsContent(this.widget.contactCarrier, widgetFields.TEXT_BLOCK_WIDGET.TEXT);
+            return this.getCmsContent(this.widget.contactCarrier, widgetFields.TEXT_BLOCK_WIDGET.TEXT)
+                .replaceAll('{custom:carrierPhoneNumber}', this.carrierPhoneNumber);
         },
-        splitContactCarrierText() {
-            return this.splitCopyOnCMSPlaceHolder(this.contactCarrierText);
+        // TODO: Replace with carrier number when account service is ready
+        carrierPhoneNumber() {
+            return '800-000-0000';
+        },
+        carrierDisplayURL() {
+            return this.mainStore.issConfig.clientName.replace(/\s/g, '');
         }
     },
+    mounted() {
+        this.$refs.siteFooter.updateButtonText(`Go back to ${this.carrierDisplayURL}.com`);
+    },
     methods:
         {
             async forwardButtonAction() {
@@ -202,8 +216,8 @@ export default {
                         return null;
                 }
             },
-            navigate(scenario) {
-                this.$router.navigate(scenario, this.$route);
+            setBailoutInfo() {
+                this.mainStore.setBailout(this.$router.currentRoute, bailoutMessage.RequestCallback);
             },
             toDisplayPhoneNumber,
             toTitleCase,
@@ -241,7 +255,6 @@ export default {
         color: $darker-gray;
         line-height: 1.5rem;
         font-size: 14px;
-        margin-bottom: 1rem;
 
         strong {
             color: $black;
@@ -262,10 +275,11 @@ export default {
     margin-top: 2rem;
 }
 
-.contact-carrier {
-    font-size: 14px;
+#contactCarrierText {
     line-height: 1.5rem;
-    color: $darker-gray;
-    margin-top: 1rem;
+
+    :deep(a) {
+        font-weight: 500;
+    }
 }
 </style>
diff --git a/src/layouts/vin-lookup/vin-lookup.vue b/src/layouts/vin-lookup/vin-lookup.vue
index cdea5263..9a4bbaa2 100644
--- a/src/layouts/vin-lookup/vin-lookup.vue
+++ b/src/layouts/vin-lookup/vin-lookup.vue
@@ -64,7 +64,7 @@ import vinLocationInformation from '@/layouts/vin-lookup/vin-location-informatio
 import vinLookupAlerts from '@/layouts/vin-lookup/vin-lookup-alerts/vin-lookup-alerts.vue';
 import vinQuestion from '@/layouts/vin-lookup/vin-question/vin-question.vue';
 import bailoutCode from '@/constants/bailoutCode';
-import bailoutMessage from "@/constants/bailoutMessage";
+import bailoutMessage from '@/constants/bailoutMessage';
 
 export default {
     name: 'vin-lookup',

From 9262b61b81b2b2384318bb7ac2e9de2e893894a4 Mon Sep 17 00:00:00 2001
From: Katie Kroell <Katie.Kroell@safelite.com>
Date: Wed, 24 Jan 2024 14:46:08 -0500
Subject: [PATCH 07/22] remove unneeded routing

---
 src/router/router-constants/routing-table.js | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/src/router/router-constants/routing-table.js b/src/router/router-constants/routing-table.js
index 365a6dd0..2cded6f6 100644
--- a/src/router/router-constants/routing-table.js
+++ b/src/router/router-constants/routing-table.js
@@ -659,10 +659,6 @@ const routingTable = () => [
             {
                 scenario: navigationScenarios.CLICKED_FORWARD,
                 destinationIssPageValue: issPageValues.WELCOME_PAGE
-            },
-            {
-                scenario: navigationScenarios.REQUEST_CALLBACK,
-                destinationIssPageValue: issPageValues.BAILOUT_PAGE
             }
         ]
     },

From b6d4c768338ed6229b5412a11f2626815394aff8 Mon Sep 17 00:00:00 2001
From: Katie Kroell <Katie.Kroell@safelite.com>
Date: Wed, 24 Jan 2024 14:46:34 -0500
Subject: [PATCH 08/22] add order details body

---
 .../tpa-confirmation/tpa-confirmation.vue     | 32 +++++++++++++++----
 1 file changed, 25 insertions(+), 7 deletions(-)

diff --git a/src/layouts/tpa-confirmation/tpa-confirmation.vue b/src/layouts/tpa-confirmation/tpa-confirmation.vue
index 8241710d..73e6c5cf 100644
--- a/src/layouts/tpa-confirmation/tpa-confirmation.vue
+++ b/src/layouts/tpa-confirmation/tpa-confirmation.vue
@@ -58,7 +58,15 @@
                             :customText="orderDetailsTitle"
                             :marginTopSizeOverride="4"
                             class="order-details" />
-                        <deductibleBox ref="deductibleBox" :value="deductibleBoxValue" />
+                        <textBlock
+                            id="tpaSubmitOrderDetailsBody"
+                            ref="tpaSubmitOrderDetailsBody"
+                            :customText="orderDetailsBody"
+                            :marginTopSizeOverride="4"
+                            class="mb-4 small text-color--darker-gray" />
+                        <deductibleBox
+                            ref="deductibleBox"
+                            :value="deductibleBoxValue" />
                     </div>
                     <siteFooter
                         ref="siteFooter"
@@ -84,7 +92,8 @@ import { doesCopyContainRouterLink,
     fetchCmsContentForPage,
     splitCopyOnCMSPlaceHolder,
     getRouterLinkRouteFromCopy,
-    getRouterLinkDisplayTextFromCopy } from '@/helpers/cms-content-helper';
+    getRouterLinkDisplayTextFromCopy,
+    processIfStatements } from '@/helpers/cms-content-helper';
 import settleAllPromises from '@/helpers/layout-helper';
 import { Form } from 'vee-validate';
 import BaseFormMixin from '@/mixins/base-form-mixin.js';
@@ -158,7 +167,11 @@ export default {
             return this.toDisplayPhoneNumber(useMainStore().order.serviceLocation.provider.phoneNumber);
         },
         orderDetailsTitle() {
-            return this.getCmsContent(this.widget.orderDetails, widgetFields.TEXT_BLOCK_WIDGET.TEXT);
+            return this.getCmsContent(this.widget.orderDetails, widgetFields.CONTENT_GROUP_WIDGET.HEADER_TEXT);
+        },
+        orderDetailsBody() {
+            const orderDetailsBodyText = this.getCmsContent(this.widget.orderDetails, widgetFields.CONTENT_GROUP_WIDGET.BODY_TEXT);
+            return this.processIfStatements(orderDetailsBodyText, 'custom', this.getCustomValueFromString);
         },
         isVerified() {
             return useMainStore().order.payment.insuranceCoverage.isVerified;
@@ -187,12 +200,12 @@ export default {
         carrierPhoneNumber() {
             return '800-000-0000';
         },
-        carrierDisplayURL() {
-            return this.mainStore.issConfig.clientName.replace(/\s/g, '');
+        carrierName() {
+            return this.mainStore.issConfig.clientName;
         }
     },
     mounted() {
-        this.$refs.siteFooter.updateButtonText(`Go back to ${this.carrierDisplayURL}.com`);
+        this.$refs.siteFooter.updateButtonText(`Go back to ${this.carrierName}`);
     },
     methods:
         {
@@ -210,6 +223,10 @@ export default {
             },
             getCustomValueFromString(str) {
                 switch (str) {
+                    case 'deductibleAboveZero':
+                        return this.isVerified && this.currentDeductible !== 0;
+                    case 'zeroDeductible':
+                        return this.isVerified && this.currentDeductible === 0;
                     case 'verifyingCoverage':
                         return !this.isVerified;
                     default:
@@ -225,7 +242,8 @@ export default {
             splitCopyOnCMSPlaceHolder,
             doesCopyContainRouterLink,
             getRouterLinkRouteFromCopy,
-            getRouterLinkDisplayTextFromCopy
+            getRouterLinkDisplayTextFromCopy,
+            processIfStatements
         }
 };
 </script>

From 7644a5c04e5d3488de6f731652faa14c7d088db8 Mon Sep 17 00:00:00 2001
From: Katie Kroell <Katie.Kroell@safelite.com>
Date: Thu, 25 Jan 2024 09:42:20 -0500
Subject: [PATCH 09/22] clean up

---
 .../tpa-confirmation/tpa-confirmation.vue     | 64 ++++++-------------
 1 file changed, 21 insertions(+), 43 deletions(-)

diff --git a/src/layouts/tpa-confirmation/tpa-confirmation.vue b/src/layouts/tpa-confirmation/tpa-confirmation.vue
index 73e6c5cf..57f9e69d 100644
--- a/src/layouts/tpa-confirmation/tpa-confirmation.vue
+++ b/src/layouts/tpa-confirmation/tpa-confirmation.vue
@@ -6,7 +6,9 @@
         @invalidSubmit="onInvalidSubmit">
         <div class="page-container-grouped-styles">
             <div class="fade-on-route-transition position-relative">
-                <siteHeader cmsWidgetName="SiteHeaderWidget" />
+                <siteHeader
+                    ref="tpaConfirmationSiteHeader"
+                    cmsWidgetName="SiteHeaderWidget" />
                 <div class="container-fluid px-5 pb-2 confirmation">
                     <vehicleBanner
                         class="mb-4"
@@ -27,43 +29,27 @@
                         id="tpaConfirmationBodyTwo"
                         ref="tpaConfirmationBodyTwo"
                         :customText="tpaConfirmationBodyTwo"
-                        class="small text-color--darker-gray mb-4" />
+                        class="small mb-4" />
                     <textBlock
                         id="contactCarrierText"
                         ref="contactCarrierText"
                         :customText="contactCarrierText"
-                        class="small text-color--darker-gray"
+                        class="small"
                         @click="setBailoutInfo()" />
-                    <!-- <div class="contact-carrier">
-                        <span
-                        v-for="copy in splitContactCarrierText"
-                        :key="copy">
-                            <span v-if="doesCopyContainRouterLink(copy)">
-                                <routerLink
-                                    :to="{
-                                        query: { issPage: `${getRouterLinkRouteFromCopy(copy)}` },
-                                        name: 'root',
-                                }">{{ getRouterLinkDisplayTextFromCopy(copy) }}</routerLink>
-                        </span>
-                        <span
-                            v-else
-                            v-html="copy">
-                        </span>
-                    </span>
-                    </div> -->
-                    <div>
+                    <div
+                        id="confirmationOrderDetailsSection"
+                        ref="confirmationOrderDetailsSection">
                         <textBlock
                             id="tpaConfirmationOrderDetailsTitle"
                             ref="tpaConfirmationOrderDetailsTitle"
                             :customText="orderDetailsTitle"
-                            :marginTopSizeOverride="4"
-                            class="order-details" />
+                            :marginTopSizeOverride="4" />
                         <textBlock
                             id="tpaSubmitOrderDetailsBody"
                             ref="tpaSubmitOrderDetailsBody"
                             :customText="orderDetailsBody"
                             :marginTopSizeOverride="4"
-                            class="mb-4 small text-color--darker-gray" />
+                            class="mb-4 small" />
                         <deductibleBox
                             ref="deductibleBox"
                             :value="deductibleBoxValue" />
@@ -110,7 +96,6 @@ export default {
         siteHeader,
         siteFooter,
         vehicleBanner,
-        // siteSubHeader,
         textBlock,
         deductibleBox,
         // eslint-disable-next-line vue/no-reserved-component-names
@@ -137,25 +122,19 @@ export default {
         return { mainStore };
     },
     data() {
-        // const { companyName } = toTitleCase(useMainStore().order.serviceLocation.provider.companyName ?? '');
         return {
             widget: {
                 tpaConfirmation: 'TPAConfirmationContent',
                 orderDetails: 'OrderDetailsContent',
                 contactCarrier: 'ContactCarrierContent'
             }
-            // companyName,
-            // customValueMap: {
-            //     glassShop: companyName,
-            //     carrierPhoneNumber
-            // }
         };
     },
     computed: {
         tpaConfirmationBodyOne() {
             return this.getCmsContent(this.widget.tpaConfirmation, widgetFields.CONTENT_GROUP_WIDGET.BODY_TEXT)
-                .replaceAll('{custom:phoneNumber}', this.preferredShopPhoneNumber)
-                .replaceAll('{custom:glassShop}', this.preferredShopName);
+                ?.replaceAll('{custom:phoneNumber}', this.preferredShopPhoneNumber)
+                ?.replaceAll('{custom:glassShop}', this.preferredShopName);
         },
         tpaConfirmationBodyTwo() {
             return this.getCmsContent(this.widget.tpaConfirmation, widgetFields.CONTENT_GROUP_WIDGET.BODY_TEXT_2);
@@ -187,16 +166,16 @@ export default {
         },
         tpaConfirmationSubheaderText() {
             return this.getCmsContent('TPAConfirmationContent', 'SubheaderText')
-                .replaceAll('{custom:glassShop}', this.preferredShopName);
+                ?.replaceAll('{custom:glassShop}', this.preferredShopName);
         },
         tpaConfirmationImage() {
             return this.getCmsContent('TPAConfirmationContent', 'Image');
         },
         contactCarrierText() {
             return this.getCmsContent(this.widget.contactCarrier, widgetFields.TEXT_BLOCK_WIDGET.TEXT)
-                .replaceAll('{custom:carrierPhoneNumber}', this.carrierPhoneNumber);
+                ?.replaceAll('{custom:carrierPhoneNumber}', this.carrierPhoneNumber);
         },
-        // TODO: Replace with carrier number when account service is ready
+        // TODO: Replace with actual carrier number when account service is ready
         carrierPhoneNumber() {
             return '800-000-0000';
         },
@@ -205,7 +184,7 @@ export default {
         }
     },
     mounted() {
-        this.$refs.siteFooter.updateButtonText(`Go back to ${this.carrierName}`);
+        this.$refs.siteFooter?.updateButtonText(`Go back to ${this.carrierName}`);
     },
     methods:
         {
@@ -270,7 +249,6 @@ export default {
     margin-top: 0;
 
     :deep(p) {
-        color: $darker-gray;
         line-height: 1.5rem;
         font-size: 14px;
 
@@ -286,11 +264,11 @@ export default {
 }
 
 #tpaConfirmationOrderDetailsTitle {
-    font-weight: 500;
-    line-height: 1.25rem;
-    color: $black;
-    margin-bottom: 1rem;
-    margin-top: 2rem;
+   font-weight: 500;
+   line-height: 1.5rem;
+   color: $black;
+   margin-bottom: 1rem;
+   margin-top: 2rem;
 }
 
 #contactCarrierText {

From bf91aabac00de61eb3ecfab7d05958ad021925a5 Mon Sep 17 00:00:00 2001
From: Katie Kroell <Katie.Kroell@safelite.com>
Date: Thu, 25 Jan 2024 12:03:28 -0500
Subject: [PATCH 10/22] edits

---
 .../tpa-confirmation/tpa-confirmation.vue       | 17 ++++++++++++-----
 1 file changed, 12 insertions(+), 5 deletions(-)

diff --git a/src/layouts/tpa-confirmation/tpa-confirmation.vue b/src/layouts/tpa-confirmation/tpa-confirmation.vue
index 57f9e69d..b3889153 100644
--- a/src/layouts/tpa-confirmation/tpa-confirmation.vue
+++ b/src/layouts/tpa-confirmation/tpa-confirmation.vue
@@ -7,10 +7,11 @@
         <div class="page-container-grouped-styles">
             <div class="fade-on-route-transition position-relative">
                 <siteHeader
-                    ref="tpaConfirmationSiteHeader"
+                    ref="siteHeader"
                     cmsWidgetName="SiteHeaderWidget" />
                 <div class="container-fluid px-5 pb-2 confirmation">
                     <vehicleBanner
+                        ref="vehicleBanner"
                         class="mb-4"
                         cmsWidgetName="VehicleBannerWidget"
                         :displayGenericVehicleImage="false" />
@@ -45,8 +46,8 @@
                             :customText="orderDetailsTitle"
                             :marginTopSizeOverride="4" />
                         <textBlock
-                            id="tpaSubmitOrderDetailsBody"
-                            ref="tpaSubmitOrderDetailsBody"
+                            id="tpaConfirmationOrderDetailsBody"
+                            ref="tpaConfirmationOrderDetailsBody"
                             :customText="orderDetailsBody"
                             :marginTopSizeOverride="4"
                             class="mb-4 small" />
@@ -159,7 +160,13 @@ export default {
             return useMainStore().order.currentDeductible;
         },
         deductibleBoxValue() {
-            return this.isVerified ? this.formatAmountInDollars(this.currentDeductible) : VERIFYING_COVERAGE;
+            const testVerified = this.isVerified;
+            const testString = VERIFYING_COVERAGE;
+            if (!testVerified) {
+                return testString;
+            }
+            // return this.isVerified ? this.formatAmountInDollars(this.currentDeductible) : VERIFYING_COVERAGE;
+            return this.formatAmountInDollars(this.currentDeductible);
         },
         tpaConfirmationHeaderText() {
             return this.getCmsContent('TPAConfirmationContent', 'HeaderText');
@@ -184,7 +191,7 @@ export default {
         }
     },
     mounted() {
-        this.$refs.siteFooter?.updateButtonText(`Go back to ${this.carrierName}`);
+        this.$refs.siteFooter.updateButtonText(`Go back to ${this.carrierName}`);
     },
     methods:
         {

From 3bf6c3f831ae54a57beaf5ef6b23ac9630533304 Mon Sep 17 00:00:00 2001
From: Katie Kroell <Katie.Kroell@safelite.com>
Date: Thu, 25 Jan 2024 12:03:39 -0500
Subject: [PATCH 11/22] start of unit testing

---
 .../tpa-confirmation/tpa-confirmation.spec.js | 168 ++++++++++++++++++
 1 file changed, 168 insertions(+)
 create mode 100644 src/layouts/tpa-confirmation/tpa-confirmation.spec.js

diff --git a/src/layouts/tpa-confirmation/tpa-confirmation.spec.js b/src/layouts/tpa-confirmation/tpa-confirmation.spec.js
new file mode 100644
index 00000000..258dc420
--- /dev/null
+++ b/src/layouts/tpa-confirmation/tpa-confirmation.spec.js
@@ -0,0 +1,168 @@
+// Components
+import tpaConfirmation from '@/layouts/tpa-confirmation/tpa-confirmation.vue';
+
+// Supporting Files
+// import baseMixin from '@/mixins/base-mixin';
+import { getMountOptions } from '@/helpers/unit-test-helper.js';
+// import navigationScenarios from '@/router/router-constants/navigation-scenarios.js';
+import { useMainStore } from '@/store/index.js';
+import settleAllPromises from '@/helpers/layout-helper.js';
+import { fetchCmsContentForPage } from '@/helpers/cms-content-helper';
+import { mount } from '@vue/test-utils';
+import { createTestingPinia } from '@pinia/testing';
+
+jest.mock('@/helpers/layout-helper.js', () => jest.fn());
+
+jest.mock('@/helpers/cms-content-helper', () => ({
+    fetchCmsContentForPage: jest.fn(),
+    processIfStatements: jest.fn(),
+    doesCopyContainRouterLink: jest.fn(),
+    splitCopyOnCMSPlaceHolder: jest.fn().mockImplementation(() => 'test'),
+    getRouterLinkRouteFromCopy: jest.fn(),
+    getRouterLinkDisplayTextFromCopy: jest.fn(),
+    doesCopyContainTextLink: jest.fn()
+}));
+
+const mockMixin = {
+    methods: {
+        getCmsContent: jest.fn().mockImplementation(() => ''),
+        setCmsContent: jest.fn()
+    }
+};
+
+const footerStub = {
+    render: () => {},
+    methods: {
+        updateButtonText: jest.fn()
+    }
+};
+
+function getMountedComponent(mainInitialState = {}, initialData = {}, methodToRun = () => {}) {
+    const mountOptions = getMountOptions({
+        router: {
+            navigate: jest.fn()
+        }
+    });
+
+    mountOptions.global.stubs = {
+        siteFooter: footerStub
+    };
+    const testingPinia = createTestingPinia({
+        initialState: {
+            main: mainInitialState
+        }
+    });
+    useMainStore(testingPinia);
+    methodToRun();
+
+    mountOptions.global.plugins = [testingPinia];
+    mountOptions.mixins = [mockMixin];
+    mountOptions.data = () => (
+        initialData
+    );
+
+    const apiResponses = {
+        supportingItems: []
+    };
+    const apiPromise = Promise.resolve(apiResponses);
+    settleAllPromises.mockImplementation(() => apiPromise);
+    fetchCmsContentForPage.mockImplementation(() => Promise.resolve());
+
+    const wrapper = mount(tpaConfirmation, mountOptions);
+    return { wrapper };
+}
+
+describe('TPAConfirmation.vue', () => {
+    describe('Rendering', () => {
+        test('Should render Site Header', () => {
+            // Arrange
+            const { wrapper } = getMountedComponent({});
+
+            // Act
+            const siteHeader = wrapper.findComponent({ ref: 'siteHeader' });
+
+            // Assert
+            expect(siteHeader.exists()).toBe(true);
+        });
+        test('Should render Vehicle Banner', () => {
+            // Arrange
+            const { wrapper } = getMountedComponent({});
+
+            // Act
+            const vehicleBanner = wrapper.findComponent({ ref: 'vehicleBanner' });
+
+            // Assert
+            expect(vehicleBanner.exists()).toBe(true);
+        });
+        test('Should render Confirmation Body One', () => {
+            // Arrange
+            const { wrapper } = getMountedComponent({});
+
+            // Act
+            const bodyOne = wrapper.findComponent({ ref: 'tpaConfirmationBodyOne' });
+
+            // Assert
+            expect(bodyOne.exists()).toBe(true);
+        });
+        test('Should render Confirmation Body Two', () => {
+            // Arrange
+            const { wrapper } = getMountedComponent({});
+
+            // Act
+            const bodyTwo = wrapper.findComponent({ ref: 'tpaConfirmationBodyTwo' });
+
+            // Assert
+            expect(bodyTwo.exists()).toBe(true);
+        });
+        test('Should render Contact Carrier text', () => {
+            // Arrange
+            const { wrapper } = getMountedComponent({});
+
+            // Act
+            const contactCarrierText = wrapper.findComponent({ ref: 'contactCarrierText' });
+
+            // Assert
+            expect(contactCarrierText.exists()).toBe(true);
+        });
+        test('Should render Order Details title', () => {
+            // Arrange
+            const { wrapper } = getMountedComponent({});
+
+            // Act
+            const orderDetailsTitle = wrapper.findComponent({ ref: 'tpaConfirmationOrderDetailsTitle' });
+
+            // Assert
+            expect(orderDetailsTitle.exists()).toBe(true);
+        });
+        test('Should render Order Details body', () => {
+            // Arrange
+            const { wrapper } = getMountedComponent({});
+
+            // Act
+            const orderDetailsBody = wrapper.findComponent({ ref: 'tpaConfirmationOrderDetailsBody' });
+
+            // Assert
+            expect(orderDetailsBody.exists()).toBe(true);
+        });
+        test('Should render Deductible Box', () => {
+            // Arrange
+            const { wrapper } = getMountedComponent({});
+
+            // Act
+            const deductibleBox = wrapper.findComponent({ ref: 'deductibleBox' });
+
+            // Assert
+            expect(deductibleBox.exists()).toBe(true);
+        });
+        test('Should render Site Footer', () => {
+            // Arrange
+            const { wrapper } = getMountedComponent({});
+
+            // Act
+            const siteFooter = wrapper.findComponent({ ref: 'siteFooter' });
+
+            // Assert
+            expect(siteFooter.exists()).toBe(true);
+        });
+    });
+});

From 86dc82070a33692f5a1fa710087c2523178b359c Mon Sep 17 00:00:00 2001
From: Katie Kroell <Katie.Kroell@safelite.com>
Date: Thu, 25 Jan 2024 15:07:12 -0500
Subject: [PATCH 12/22] clean up

---
 .../tpa-confirmation/tpa-confirmation.vue     | 83 ++++++++-----------
 .../router-constants/navigation-scenarios.js  |  3 -
 2 files changed, 34 insertions(+), 52 deletions(-)

diff --git a/src/layouts/tpa-confirmation/tpa-confirmation.vue b/src/layouts/tpa-confirmation/tpa-confirmation.vue
index b3889153..cabb80eb 100644
--- a/src/layouts/tpa-confirmation/tpa-confirmation.vue
+++ b/src/layouts/tpa-confirmation/tpa-confirmation.vue
@@ -85,7 +85,6 @@ import settleAllPromises from '@/helpers/layout-helper';
 import { Form } from 'vee-validate';
 import BaseFormMixin from '@/mixins/base-form-mixin.js';
 import { useMainStore } from '@/store';
-import widgetFields from '@/constants/cms-widget-fields';
 import { toTitleCase, toDisplayPhoneNumber, formatAmountInDollars } from '@/helpers/text-helper.js';
 import bailoutMessage from '@/constants/bailoutMessage';
 
@@ -122,23 +121,41 @@ export default {
         const mainStore = useMainStore();
         return { mainStore };
     },
-    data() {
-        return {
-            widget: {
-                tpaConfirmation: 'TPAConfirmationContent',
-                orderDetails: 'OrderDetailsContent',
-                contactCarrier: 'ContactCarrierContent'
-            }
-        };
-    },
     computed: {
+        tpaConfirmationHeaderText() {
+            return this.getCmsContent('TPAConfirmationContent', 'HeaderText');
+        },
+        tpaConfirmationImage() {
+            return this.getCmsContent('TPAConfirmationContent', 'Image');
+        },
+        tpaConfirmationSubheaderText() {
+            return this.getCmsContent('TPAConfirmationContent', 'SubheaderText')
+                ?.replaceAll('{custom:glassShop}', this.preferredShopName);
+        },
         tpaConfirmationBodyOne() {
-            return this.getCmsContent(this.widget.tpaConfirmation, widgetFields.CONTENT_GROUP_WIDGET.BODY_TEXT)
+            return this.getCmsContent('TPAConfirmationContent', 'BodyText')
                 ?.replaceAll('{custom:phoneNumber}', this.preferredShopPhoneNumber)
                 ?.replaceAll('{custom:glassShop}', this.preferredShopName);
         },
         tpaConfirmationBodyTwo() {
-            return this.getCmsContent(this.widget.tpaConfirmation, widgetFields.CONTENT_GROUP_WIDGET.BODY_TEXT_2);
+            return this.getCmsContent('TPAConfirmationContent', 'BodyText2');
+        },
+        contactCarrierText() {
+            return this.getCmsContent('ContactCarrierContent', 'Text')
+                ?.replaceAll('{custom:carrierPhoneNumber}', this.carrierPhoneNumber);
+        },
+        orderDetailsTitle() {
+            return this.getCmsContent('OrderDetailsContent', 'HeaderText');
+        },
+        orderDetailsBody() {
+            const orderDetailsBodyText = this.getCmsContent('OrderDetailsContent', 'BodyText');
+            return this.processIfStatements(orderDetailsBodyText, 'custom', this.getCustomValueFromString);
+        },
+        deductibleBoxValue() {
+            return this.isVerified ? this.formatAmountInDollars(this.currentDeductible) : VERIFYING_COVERAGE;
+        },
+        currentDeductible() {
+            return useMainStore().order.currentDeductible;
         },
         preferredShopName() {
             return toTitleCase(useMainStore().order.serviceLocation.provider.companyName);
@@ -146,48 +163,19 @@ export default {
         preferredShopPhoneNumber() {
             return this.toDisplayPhoneNumber(useMainStore().order.serviceLocation.provider.phoneNumber);
         },
-        orderDetailsTitle() {
-            return this.getCmsContent(this.widget.orderDetails, widgetFields.CONTENT_GROUP_WIDGET.HEADER_TEXT);
-        },
-        orderDetailsBody() {
-            const orderDetailsBodyText = this.getCmsContent(this.widget.orderDetails, widgetFields.CONTENT_GROUP_WIDGET.BODY_TEXT);
-            return this.processIfStatements(orderDetailsBodyText, 'custom', this.getCustomValueFromString);
-        },
         isVerified() {
             return useMainStore().order.payment.insuranceCoverage.isVerified;
         },
-        currentDeductible() {
-            return useMainStore().order.currentDeductible;
-        },
-        deductibleBoxValue() {
-            const testVerified = this.isVerified;
-            const testString = VERIFYING_COVERAGE;
-            if (!testVerified) {
-                return testString;
-            }
-            // return this.isVerified ? this.formatAmountInDollars(this.currentDeductible) : VERIFYING_COVERAGE;
-            return this.formatAmountInDollars(this.currentDeductible);
-        },
-        tpaConfirmationHeaderText() {
-            return this.getCmsContent('TPAConfirmationContent', 'HeaderText');
-        },
-        tpaConfirmationSubheaderText() {
-            return this.getCmsContent('TPAConfirmationContent', 'SubheaderText')
-                ?.replaceAll('{custom:glassShop}', this.preferredShopName);
-        },
-        tpaConfirmationImage() {
-            return this.getCmsContent('TPAConfirmationContent', 'Image');
-        },
-        contactCarrierText() {
-            return this.getCmsContent(this.widget.contactCarrier, widgetFields.TEXT_BLOCK_WIDGET.TEXT)
-                ?.replaceAll('{custom:carrierPhoneNumber}', this.carrierPhoneNumber);
-        },
         // TODO: Replace with actual carrier number when account service is ready
         carrierPhoneNumber() {
             return '800-000-0000';
         },
         carrierName() {
             return this.mainStore.issConfig.clientName;
+        },
+        // TODO: Replace with actual carrier homepage URL
+        carrierUrl() {
+            return '//www.libertymutual.com';
         }
     },
     mounted() {
@@ -196,7 +184,7 @@ export default {
     methods:
         {
             async forwardButtonAction() {
-                return this.navigateForward();
+                window.location.href = this.carrierUrl;
             },
             navigateForward() {
                 this.$router.navigate(
@@ -204,9 +192,6 @@ export default {
                     this.$route
                 );
             },
-            getBodyTextFromCms(cmsWidgetName) {
-                return this.getCmsContent(cmsWidgetName, 'BodyText');
-            },
             getCustomValueFromString(str) {
                 switch (str) {
                     case 'deductibleAboveZero':
diff --git a/src/router/router-constants/navigation-scenarios.js b/src/router/router-constants/navigation-scenarios.js
index 7872e827..f71a452a 100644
--- a/src/router/router-constants/navigation-scenarios.js
+++ b/src/router/router-constants/navigation-scenarios.js
@@ -75,9 +75,6 @@ const navigationScenarios = Object.freeze({
     EDIT_PREFERRED_SHOP: 'EDIT_PREFERRED_SHOP',
     EDIT_CONTACT_DETAILS: 'EDIT_CONTACT_DETAILS',
 
-    // TPA Confirmation
-    REQUEST_CALLBACK: 'REQUEST_CALLBACK',
-
     // Provider Preference
     CLICKED_FORWARD_WITH_SAFELITE: 'CLICKED_FORWARD_WITH_SAFELITE',
     CLICKED_FORWARD_WITH_TPA_ENABLED: 'CLICKED_FORWARD_WITH_TPA_ENABLED',

From 383d93e561e58a3495ee32aecfc0bc80b41b07bb Mon Sep 17 00:00:00 2001
From: Katie Kroell <Katie.Kroell@safelite.com>
Date: Thu, 25 Jan 2024 15:07:21 -0500
Subject: [PATCH 13/22] remaining unit tests

---
 .../tpa-confirmation/tpa-confirmation.spec.js | 194 ++++++++++++++++++
 1 file changed, 194 insertions(+)

diff --git a/src/layouts/tpa-confirmation/tpa-confirmation.spec.js b/src/layouts/tpa-confirmation/tpa-confirmation.spec.js
index 258dc420..409efa9f 100644
--- a/src/layouts/tpa-confirmation/tpa-confirmation.spec.js
+++ b/src/layouts/tpa-confirmation/tpa-confirmation.spec.js
@@ -10,6 +10,9 @@ import settleAllPromises from '@/helpers/layout-helper.js';
 import { fetchCmsContentForPage } from '@/helpers/cms-content-helper';
 import { mount } from '@vue/test-utils';
 import { createTestingPinia } from '@pinia/testing';
+import userEvent from '@testing-library/user-event';
+import bailoutMessage from '@/constants/bailoutMessage';
+import { render } from '@testing-library/vue';
 
 jest.mock('@/helpers/layout-helper.js', () => jest.fn());
 
@@ -165,4 +168,195 @@ describe('TPAConfirmation.vue', () => {
             expect(siteFooter.exists()).toBe(true);
         });
     });
+    describe('Computed properties', () => {
+        describe('Deductible Box value', () => {
+            test('Should return "Verifying coverage" when isVerified false', () => {
+                // Arrange
+                const initialStore = {
+                    order: {
+                        payment: {
+                            insuranceCoverage: { isVerified: false }
+                        }
+                    }
+                };
+                const { wrapper } = getMountedComponent(initialStore);
+                const expected = 'Verifying coverage';
+
+                // Assert
+                expect(wrapper.vm.deductibleBoxValue).toBe(expected);
+            });
+            test('Should return deductible value when isVerified true', () => {
+                // Arrange
+                const currentDeductible = '500';
+                const initialStore = {
+                    order: {
+                        payment: {
+                            insuranceCoverage: { isVerified: true }
+                        },
+                        currentDeductible
+                    }
+                };
+                const { wrapper } = getMountedComponent(initialStore);
+                const notExpected = 'Verifying coverage';
+
+                // Assert
+                expect(wrapper.vm.deductibleBoxValue).not.toBe(notExpected);
+            });
+        });
+    });
+    describe('Methods', () => {
+        describe('getCustomValueFromString', () => {
+            describe('with argument deductibleAboveZero', () => {
+                test.each([
+                    [false],
+                    [true]
+                ])(
+                    'returns false when isVerified %p and currentDeductible is zero',
+                    (isVerified) => {
+                        // Arrange
+                        const initialStore = {
+                            order: {
+                                payment: {
+                                    insuranceCoverage: { isVerified }
+                                },
+                                currentDeductible: 0
+                            }
+                        };
+                        const { wrapper } = getMountedComponent(initialStore);
+                        const argument = 'deductibleAboveZero';
+
+                        // Act
+                        const result = wrapper.vm.getCustomValueFromString(argument);
+
+                        // Assert
+                        expect(result).toBe(false);
+                    }
+                );
+                test.each([
+                    [true, true],
+                    [false, false]
+                ])(
+                    'returns %p when isVerified %p and currentDeductible is not zero',
+                    (expected, isVerified) => {
+                        // Arrange
+                        const initialStore = {
+                            order: {
+                                payment: {
+                                    insuranceCoverage: { isVerified }
+                                },
+                                currentDeductible: 500
+                            }
+                        };
+                        const { wrapper } = getMountedComponent(initialStore);
+                        const argument = 'deductibleAboveZero';
+
+                        // Act
+                        const result = wrapper.vm.getCustomValueFromString(argument);
+
+                        // Assert
+                        expect(result).toBe(expected);
+                    }
+                );
+            });
+            describe('with argument zeroDeductible', () => {
+                test.each([
+                    [true, true],
+                    [false, false]
+                ])(
+                    'returns %p when isVerified is %p currentDeductible is zero',
+                    (expected, isVerified) => {
+                        // Arrange
+                        const initialStore = {
+                            order: {
+                                payment: {
+                                    insuranceCoverage: { isVerified }
+                                },
+                                currentDeductible: 0
+                            }
+                        };
+                        const { wrapper } = getMountedComponent(initialStore);
+                        const argument = 'zeroDeductible';
+
+                        // Act
+                        const result = wrapper.vm.getCustomValueFromString(argument);
+
+                        // Assert
+                        expect(result).toBe(expected);
+                    }
+                );
+                test.each([
+                    [false],
+                    [true]
+                ])(
+                    'returns false when isVerified is %p currentDeductible is not zero',
+                    (isVerified) => {
+                        // Arrange
+                        const initialStore = {
+                            order: {
+                                payment: {
+                                    insuranceCoverage: { isVerified }
+                                },
+                                currentDeductible: 250
+                            }
+                        };
+                        const { wrapper } = getMountedComponent(initialStore);
+                        const argument = 'zeroDeductible';
+
+                        // Act
+                        const result = wrapper.vm.getCustomValueFromString(argument);
+
+                        // Assert
+                        expect(result).toBe(false);
+                    }
+                );
+            });
+            describe('with argument verifyingCoverage', () => {
+                test.each([
+                    [true, false],
+                    [false, true]
+                ])(
+                    'with argument verifyingCoverage returns %p when isVerified %p',
+                    (expected, isVerified) => {
+                        // Arrange
+                        const initialStore = {
+                            order: {
+                                payment: {
+                                    insuranceCoverage: { isVerified }
+                                },
+                                currentDeductible: 26
+                            }
+                        };
+                        const { wrapper } = getMountedComponent(initialStore);
+                        const argument = 'verifyingCoverage';
+    
+                        // Act
+                        const result = wrapper.vm.getCustomValueFromString(argument);
+    
+                        // Assert
+                        expect(result).toBe(expected);
+                    }
+                );
+            });
+        });
+        describe('setBailoutInfo', () => {
+            test('setBailout method is called when routerLink clicked', async () => {
+                // Arrange
+                const { wrapper } = getMountedComponent({});
+                const contactCarrierText = wrapper.get('#contactCarrierText');
+
+                // Act
+                await contactCarrierText.trigger('click');
+
+                // Assert
+                expect(wrapper.vm.mainStore.setBailout).toHaveBeenCalledWith(
+                    wrapper.vm.$router.currentRoute,
+                    bailoutMessage.RequestCallback
+                );
+            });
+        });
+        // TODO: Add tests for forward navigation to carrier URL
+        describe('Navigation', () => {
+
+        });
+    });
 });

From 0603c37adc855a84dbb2e66ee9f81790635b7fe2 Mon Sep 17 00:00:00 2001
From: Katie Kroell <Katie.Kroell@safelite.com>
Date: Thu, 25 Jan 2024 16:31:56 -0500
Subject: [PATCH 14/22] final fixes

---
 src/layouts/tpa-confirmation/tpa-confirmation.spec.js | 8 ++------
 src/layouts/tpa-confirmation/tpa-confirmation.vue     | 2 +-
 2 files changed, 3 insertions(+), 7 deletions(-)

diff --git a/src/layouts/tpa-confirmation/tpa-confirmation.spec.js b/src/layouts/tpa-confirmation/tpa-confirmation.spec.js
index 409efa9f..c9ecafd2 100644
--- a/src/layouts/tpa-confirmation/tpa-confirmation.spec.js
+++ b/src/layouts/tpa-confirmation/tpa-confirmation.spec.js
@@ -2,17 +2,13 @@
 import tpaConfirmation from '@/layouts/tpa-confirmation/tpa-confirmation.vue';
 
 // Supporting Files
-// import baseMixin from '@/mixins/base-mixin';
 import { getMountOptions } from '@/helpers/unit-test-helper.js';
-// import navigationScenarios from '@/router/router-constants/navigation-scenarios.js';
 import { useMainStore } from '@/store/index.js';
 import settleAllPromises from '@/helpers/layout-helper.js';
 import { fetchCmsContentForPage } from '@/helpers/cms-content-helper';
 import { mount } from '@vue/test-utils';
 import { createTestingPinia } from '@pinia/testing';
-import userEvent from '@testing-library/user-event';
 import bailoutMessage from '@/constants/bailoutMessage';
-import { render } from '@testing-library/vue';
 
 jest.mock('@/helpers/layout-helper.js', () => jest.fn());
 
@@ -328,10 +324,10 @@ describe('TPAConfirmation.vue', () => {
                         };
                         const { wrapper } = getMountedComponent(initialStore);
                         const argument = 'verifyingCoverage';
-    
+
                         // Act
                         const result = wrapper.vm.getCustomValueFromString(argument);
-    
+
                         // Assert
                         expect(result).toBe(expected);
                     }
diff --git a/src/layouts/tpa-confirmation/tpa-confirmation.vue b/src/layouts/tpa-confirmation/tpa-confirmation.vue
index cabb80eb..d6ccbe05 100644
--- a/src/layouts/tpa-confirmation/tpa-confirmation.vue
+++ b/src/layouts/tpa-confirmation/tpa-confirmation.vue
@@ -173,7 +173,7 @@ export default {
         carrierName() {
             return this.mainStore.issConfig.clientName;
         },
-        // TODO: Replace with actual carrier homepage URL
+        // TODO: Replace with actual carrier URL
         carrierUrl() {
             return '//www.libertymutual.com';
         }

From 3b00d754f7154c861f28fa1dce03436123f34836 Mon Sep 17 00:00:00 2001
From: Katie Kroell <Katie.Kroell@safelite.com>
Date: Thu, 25 Jan 2024 16:46:27 -0500
Subject: [PATCH 15/22] remove carrier phone number if unverified

---
 src/layouts/tpa-confirmation/tpa-confirmation.vue | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/layouts/tpa-confirmation/tpa-confirmation.vue b/src/layouts/tpa-confirmation/tpa-confirmation.vue
index d6ccbe05..83348949 100644
--- a/src/layouts/tpa-confirmation/tpa-confirmation.vue
+++ b/src/layouts/tpa-confirmation/tpa-confirmation.vue
@@ -141,8 +141,9 @@ export default {
             return this.getCmsContent('TPAConfirmationContent', 'BodyText2');
         },
         contactCarrierText() {
-            return this.getCmsContent('ContactCarrierContent', 'Text')
+            const contactCarrierText = this.getCmsContent('ContactCarrierContent', 'Text')
                 ?.replaceAll('{custom:carrierPhoneNumber}', this.carrierPhoneNumber);
+            return this.processIfStatements(contactCarrierText, 'custom', this.getCustomValueFromString);
         },
         orderDetailsTitle() {
             return this.getCmsContent('OrderDetailsContent', 'HeaderText');
@@ -200,6 +201,8 @@ export default {
                         return this.isVerified && this.currentDeductible === 0;
                     case 'verifyingCoverage':
                         return !this.isVerified;
+                    case 'coverageVerified':
+                        return this.isVerified;
                     default:
                         return null;
                 }

From 4259d9cd9134a88e4f8f0ba5ee78d2c15c8668e6 Mon Sep 17 00:00:00 2001
From: Katie Kroell <Katie.Kroell@safelite.com>
Date: Fri, 26 Jan 2024 13:10:11 -0500
Subject: [PATCH 16/22] px to rem change

---
 src/layouts/tpa-confirmation/tpa-confirmation.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/layouts/tpa-confirmation/tpa-confirmation.vue b/src/layouts/tpa-confirmation/tpa-confirmation.vue
index 83348949..85015655 100644
--- a/src/layouts/tpa-confirmation/tpa-confirmation.vue
+++ b/src/layouts/tpa-confirmation/tpa-confirmation.vue
@@ -245,7 +245,7 @@ export default {
 
     :deep(p) {
         line-height: 1.5rem;
-        font-size: 14px;
+        font-size: 0.875rem;
 
         strong {
             color: $black;

From 76d71804517712fabb260127a1d6a9ca297a7ac6 Mon Sep 17 00:00:00 2001
From: Katie Kroell <Katie.Kroell@safelite.com>
Date: Wed, 31 Jan 2024 11:42:36 -0500
Subject: [PATCH 17/22] styling revisions

---
 .../tpa-confirmation/tpa-confirmation.vue     | 76 ++++++-------------
 1 file changed, 23 insertions(+), 53 deletions(-)

diff --git a/src/layouts/tpa-confirmation/tpa-confirmation.vue b/src/layouts/tpa-confirmation/tpa-confirmation.vue
index 85015655..80e2b356 100644
--- a/src/layouts/tpa-confirmation/tpa-confirmation.vue
+++ b/src/layouts/tpa-confirmation/tpa-confirmation.vue
@@ -15,35 +15,32 @@
                         class="mb-4"
                         cmsWidgetName="VehicleBannerWidget"
                         :displayGenericVehicleImage="false" />
-                    <div class="header-container">
+                    <div class="tpa-header text-center pb-2 fs-5">
                         <img :src="tpaConfirmationImage" />
                         <span v-html="tpaConfirmationHeaderText"></span>
                     </div>
-                    <div class="subheader-container">
+                    <div class="tpa-subheader text-center mb-3 fw-bold">
                         <span v-html="tpaConfirmationSubheaderText"></span>
                     </div>
                     <textBlock
-                        id="tpaConfirmationBodyOne"
                         ref="tpaConfirmationBodyOne"
+                        class="tpa-body-one mt-0"
                         :customText="tpaConfirmationBodyOne" />
                     <textBlock
-                        id="tpaConfirmationBodyTwo"
                         ref="tpaConfirmationBodyTwo"
                         :customText="tpaConfirmationBodyTwo"
-                        class="small mb-4" />
+                        class="small mt-0 mb-4" />
                     <textBlock
-                        id="contactCarrierText"
                         ref="contactCarrierText"
                         :customText="contactCarrierText"
-                        class="small"
+                        class="contact-carrier-text small"
                         @click="setBailoutInfo()" />
                     <div
-                        id="confirmationOrderDetailsSection"
                         ref="confirmationOrderDetailsSection">
                         <textBlock
-                            id="tpaConfirmationOrderDetailsTitle"
                             ref="tpaConfirmationOrderDetailsTitle"
                             :customText="orderDetailsTitle"
+                            class="order-details-title fw-bold lh-base mt-5 mb-4"
                             :marginTopSizeOverride="4" />
                         <textBlock
                             id="tpaConfirmationOrderDetailsBody"
@@ -75,12 +72,7 @@ import textBlock from '@/digital-components/text-block/text-block.vue';
 import deductibleBox from '@/layouts/tpa-submit/deductible-box/deductible-box.vue';
 
 // Supporting files
-import { doesCopyContainRouterLink,
-    fetchCmsContentForPage,
-    splitCopyOnCMSPlaceHolder,
-    getRouterLinkRouteFromCopy,
-    getRouterLinkDisplayTextFromCopy,
-    processIfStatements } from '@/helpers/cms-content-helper';
+import { fetchCmsContentForPage, processIfStatements } from '@/helpers/cms-content-helper';
 import settleAllPromises from '@/helpers/layout-helper';
 import { Form } from 'vee-validate';
 import BaseFormMixin from '@/mixins/base-form-mixin.js';
@@ -174,9 +166,10 @@ export default {
         carrierName() {
             return this.mainStore.issConfig.clientName;
         },
-        // TODO: Replace with actual carrier URL
         carrierUrl() {
-            return '//www.libertymutual.com';
+            const url = this.mainStore.issConfig.successReturnURL;
+            console.log(url);
+            return url;
         }
     },
     mounted() {
@@ -211,41 +204,28 @@ export default {
                 this.mainStore.setBailout(this.$router.currentRoute, bailoutMessage.RequestCallback);
             },
             toDisplayPhoneNumber,
-            toTitleCase,
             formatAmountInDollars,
-            splitCopyOnCMSPlaceHolder,
-            doesCopyContainRouterLink,
-            getRouterLinkRouteFromCopy,
-            getRouterLinkDisplayTextFromCopy,
             processIfStatements
         }
 };
 </script>
 <style lang="scss" scoped>
-.header-container {
-    text-align: center;
-    padding-bottom: 0.75rem;
-    font-size: 1.25rem;
+.tpa-header {
     color: $black;
 
     span {
-        margin-left: 0.5rem;
+        margin-left: map-get($spacers, 2);
     }
 }
 
-.subheader-container {
-    text-align: center;
-    padding-bottom: 1rem;
-    font-weight: 500;
+.tpa-subheader {
     color: $black;
 }
 
-#tpaConfirmationBodyOne {
-    margin-top: 0;
-
+.tpa-body-one {
     :deep(p) {
-        line-height: 1.5rem;
-        font-size: 0.875rem;
+        line-height: map-get($spacers, 5);
+        font-size: $h6-font-size;
 
         strong {
             color: $black;
@@ -253,24 +233,14 @@ export default {
     }
 }
 
-#tpaConfirmationBodyTwo {
-    line-height: 1.5rem;
-    margin-top: 0;
-}
-
-#tpaConfirmationOrderDetailsTitle {
-   font-weight: 500;
-   line-height: 1.5rem;
-   color: $black;
-   margin-bottom: 1rem;
-   margin-top: 2rem;
-}
-
-#contactCarrierText {
-    line-height: 1.5rem;
-
+.contact-carrier-text {
     :deep(a) {
-        font-weight: 500;
+        font-weight: $font-weight-bold;
     }
 }
+
+.order-details-title {
+   color: $black;
+}
+
 </style>

From 2942a9bbabead133ecc174a2c49fdbe32ec86b8e Mon Sep 17 00:00:00 2001
From: Katie Kroell <Katie.Kroell@safelite.com>
Date: Wed, 31 Jan 2024 11:47:11 -0500
Subject: [PATCH 18/22] final styling revisions

---
 .../tpa-confirmation/tpa-confirmation.vue     | 21 +++++++------------
 1 file changed, 8 insertions(+), 13 deletions(-)

diff --git a/src/layouts/tpa-confirmation/tpa-confirmation.vue b/src/layouts/tpa-confirmation/tpa-confirmation.vue
index 80e2b356..c0957e31 100644
--- a/src/layouts/tpa-confirmation/tpa-confirmation.vue
+++ b/src/layouts/tpa-confirmation/tpa-confirmation.vue
@@ -15,11 +15,11 @@
                         class="mb-4"
                         cmsWidgetName="VehicleBannerWidget"
                         :displayGenericVehicleImage="false" />
-                    <div class="tpa-header text-center pb-2 fs-5">
+                    <div class="tpa-header text-center text-color--black pb-2 fs-5">
                         <img :src="tpaConfirmationImage" />
                         <span v-html="tpaConfirmationHeaderText"></span>
                     </div>
-                    <div class="tpa-subheader text-center mb-3 fw-bold">
+                    <div class="text-center text-color--black mb-3 fw-bold">
                         <span v-html="tpaConfirmationSubheaderText"></span>
                     </div>
                     <textBlock
@@ -40,7 +40,7 @@
                         <textBlock
                             ref="tpaConfirmationOrderDetailsTitle"
                             :customText="orderDetailsTitle"
-                            class="order-details-title fw-bold lh-base mt-5 mb-4"
+                            class="text-color--black fw-bold lh-base mt-5 mb-4"
                             :marginTopSizeOverride="4" />
                         <textBlock
                             id="tpaConfirmationOrderDetailsBody"
@@ -210,18 +210,17 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
-.tpa-header {
-    color: $black;
 
+.text-color--black {
+    color: $black;
+}
+
+.tpa-header {
     span {
         margin-left: map-get($spacers, 2);
     }
 }
 
-.tpa-subheader {
-    color: $black;
-}
-
 .tpa-body-one {
     :deep(p) {
         line-height: map-get($spacers, 5);
@@ -239,8 +238,4 @@ export default {
     }
 }
 
-.order-details-title {
-   color: $black;
-}
-
 </style>

From 2ede50d9734ecf6de853ce12b9d502f4cf7dc59b Mon Sep 17 00:00:00 2001
From: Katie Kroell <Katie.Kroell@safelite.com>
Date: Wed, 31 Jan 2024 15:11:17 -0500
Subject: [PATCH 19/22] shell test for navigation

---
 src/layouts/tpa-confirmation/tpa-confirmation.spec.js | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/src/layouts/tpa-confirmation/tpa-confirmation.spec.js b/src/layouts/tpa-confirmation/tpa-confirmation.spec.js
index c9ecafd2..5b58038c 100644
--- a/src/layouts/tpa-confirmation/tpa-confirmation.spec.js
+++ b/src/layouts/tpa-confirmation/tpa-confirmation.spec.js
@@ -9,6 +9,7 @@ import { fetchCmsContentForPage } from '@/helpers/cms-content-helper';
 import { mount } from '@vue/test-utils';
 import { createTestingPinia } from '@pinia/testing';
 import bailoutMessage from '@/constants/bailoutMessage';
+import navigationScenarios from '@/router/router-constants/navigation-scenarios.js';
 
 jest.mock('@/helpers/layout-helper.js', () => jest.fn());
 
@@ -352,7 +353,17 @@ describe('TPAConfirmation.vue', () => {
         });
         // TODO: Add tests for forward navigation to carrier URL
         describe('Navigation', () => {
+            // test('Forward button action, navigate forward with CLICKED_FORWARD scenario', () => {
+            //     // Arrange
+            //     const { wrapper } = getMountedComponent({});
 
+            //     // Act
+            //     wrapper.vm.forwardButtonAction();
+
+            //     // Assert
+            //     expect(wrapper.vm.$router.navigate)
+            //         .toHaveBeenCalledWith(navigationScenarios.CLICKED_FORWARD);
+            // });
         });
     });
 });

From cb216673ad6c68a83ba211927f1519b53d3d1665 Mon Sep 17 00:00:00 2001
From: Katie Kroell <Katie.Kroell@safelite.com>
Date: Wed, 31 Jan 2024 15:15:05 -0500
Subject: [PATCH 20/22] fix for unit test

---
 src/layouts/tpa-confirmation/tpa-confirmation.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/layouts/tpa-confirmation/tpa-confirmation.vue b/src/layouts/tpa-confirmation/tpa-confirmation.vue
index c0957e31..b7d574f0 100644
--- a/src/layouts/tpa-confirmation/tpa-confirmation.vue
+++ b/src/layouts/tpa-confirmation/tpa-confirmation.vue
@@ -31,6 +31,7 @@
                         :customText="tpaConfirmationBodyTwo"
                         class="small mt-0 mb-4" />
                     <textBlock
+                        id="contactCarrierText"
                         ref="contactCarrierText"
                         :customText="contactCarrierText"
                         class="contact-carrier-text small"

From 894511555c9229871c2f6362cccb91909734b114 Mon Sep 17 00:00:00 2001
From: Katie Kroell <Katie.Kroell@safelite.com>
Date: Wed, 31 Jan 2024 15:48:21 -0500
Subject: [PATCH 21/22] styling change

---
 src/layouts/tpa-confirmation/tpa-confirmation.vue | 10 ++--------
 1 file changed, 2 insertions(+), 8 deletions(-)

diff --git a/src/layouts/tpa-confirmation/tpa-confirmation.vue b/src/layouts/tpa-confirmation/tpa-confirmation.vue
index b7d574f0..24460ba0 100644
--- a/src/layouts/tpa-confirmation/tpa-confirmation.vue
+++ b/src/layouts/tpa-confirmation/tpa-confirmation.vue
@@ -15,9 +15,9 @@
                         class="mb-4"
                         cmsWidgetName="VehicleBannerWidget"
                         :displayGenericVehicleImage="false" />
-                    <div class="tpa-header text-center text-color--black pb-2 fs-5">
+                    <div class="text-center text-color--black pb-2 fs-5">
                         <img :src="tpaConfirmationImage" />
-                        <span v-html="tpaConfirmationHeaderText"></span>
+                        <span class="ms-2" v-html="tpaConfirmationHeaderText"></span>
                     </div>
                     <div class="text-center text-color--black mb-3 fw-bold">
                         <span v-html="tpaConfirmationSubheaderText"></span>
@@ -216,12 +216,6 @@ export default {
     color: $black;
 }
 
-.tpa-header {
-    span {
-        margin-left: map-get($spacers, 2);
-    }
-}
-
 .tpa-body-one {
     :deep(p) {
         line-height: map-get($spacers, 5);

From cdc312b75e7f4438ac24eed327f1b56b1275cc06 Mon Sep 17 00:00:00 2001
From: Katie Kroell <Katie.Kroell@safelite.com>
Date: Thu, 1 Feb 2024 10:03:02 -0500
Subject: [PATCH 22/22] final fix

---
 src/layouts/tpa-confirmation/tpa-confirmation.spec.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/layouts/tpa-confirmation/tpa-confirmation.spec.js b/src/layouts/tpa-confirmation/tpa-confirmation.spec.js
index 5b58038c..04e0af2a 100644
--- a/src/layouts/tpa-confirmation/tpa-confirmation.spec.js
+++ b/src/layouts/tpa-confirmation/tpa-confirmation.spec.js
@@ -9,7 +9,7 @@ import { fetchCmsContentForPage } from '@/helpers/cms-content-helper';
 import { mount } from '@vue/test-utils';
 import { createTestingPinia } from '@pinia/testing';
 import bailoutMessage from '@/constants/bailoutMessage';
-import navigationScenarios from '@/router/router-constants/navigation-scenarios.js';
+// import navigationScenarios from '@/router/router-constants/navigation-scenarios.js';
 
 jest.mock('@/helpers/layout-helper.js', () => jest.fn());
 
@@ -351,7 +351,7 @@ describe('TPAConfirmation.vue', () => {
                 );
             });
         });
-        // TODO: Add tests for forward navigation to carrier URL
+        // TODO: Add tests for forward navigation to carrier URL - card SSR-1107
         describe('Navigation', () => {
             // test('Forward button action, navigate forward with CLICKED_FORWARD scenario', () => {
             //     // Arrange