tpa-conf styling and routing WIP

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"
+                        id="tpaConfirmationBodyOne"
-                        :customText="tpaConfirmationBody" />
+                        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>