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] 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',