INSR-7770: tpa-confirmation parity updates

src/constants/dynamic-strings.js

@@ -4,7 +4,8 @@ const dynamicStrings = Object.freeze({
     ROUTER_LINK: 'routerLink:',
     MODAL_LINK: 'modalLink',
     TEXT_LINK: 'textLink',
-    EXTERNAL_LINK: 'externalLink'
+    EXTERNAL_LINK: 'externalLink',
+    PHONE_LINK: 'phoneLink'
 });
 
 export default dynamicStrings;

src/digital-components/text-block/text-block.vue

@@ -39,7 +39,7 @@ import {
     splitCopyOnCMSPlaceHolder,
     getRouterLinkRouteFromCopy,
     getRouterLinkDisplayTextFromCopy,
-    getExternalLink
+    getExternalLink,
 } from '@/helpers/cms-content-helper';
 import applicationConfig from '@/constants/application-config';
 

src/helpers/cms-content-helper.js

@@ -623,6 +623,15 @@ export function getRouterLinkHtmlStringFromCopy(copy) {
     return `<a href='/?issPage=${getRouterLinkRouteFromCopy(copy)}' class='router-link'>${getRouterLinkDisplayTextFromCopy(copy)}</a>`;
 }
 
+/**
+ * Returns a phone link as an 'a' tag element
+ * @param copy
+ * @returns string
+ */
+export function getPhoneLinkHtmlStringFromPhoneNumber(phoneNumber) {
+    return `<a href='tel:${phoneNumber}' class='phone-link'>${phoneNumber}.</a>`;
+}
+
 // Copy returned from the CMS that has newlines will return blocks wrapped in
 //   <p ... >...</p>
 // This function returns an array of each paragraph, works with or without html

src/helpers/order-helper.js

@@ -40,12 +40,12 @@ export async function submitWorkOrder({ submitType }) {
         shouldAwaitSaveSessionQueue: true,
         submitAfterSave: true
     });
-    store.createSubmittedOrder(submitType);
+    await store.createSubmittedOrder(submitType);
 }
 
 export async function submitBailout() {
     const store = useMainStore();
     store.resetSubmittedOrder();
     await store.saveSession({});
-    store.createSubmittedOrder(submitType.BAILOUT);
+    await store.createSubmittedOrder(submitType.BAILOUT);
 }

src/layouts/tpa-confirmation/tpa-confirmation.vue

@@ -12,40 +12,21 @@
             </div>
             <div class="iss-heritage-container-width">
                 <div class="tpa-confirmation-container iss-heritage-content-container-width">
-                    <div class="d-flex justify-content-center align-items-center text-color--black pb-2 fs-5">
+                    <div class="header">
                         <img :src="tpaConfirmationImage" />
-                        <span
+                        <span v-html="tpaConfirmationHeaderText"></span>
-                            class="ms-2"
-                            v-html="tpaConfirmationHeaderText"></span>
                     </div>
-                    <div class="text-center text-color--black mb-3 fw-bold">
+                    <div class="subheader">
                         <span v-html="tpaConfirmationSubheaderText"></span>
                     </div>
                     <textBlock
                         ref="tpaConfirmationBodyOne"
-                        class="tpa-body-one mt-0"
+                        class="tpa-body-one"
                         :customText="tpaConfirmationBodyOne" />
                     <textBlock
                         ref="tpaConfirmationBodyTwo"
-                        :customText="tpaConfirmationBodyTwo"
+                        class="tpa-body-one"
-                        class="small mt-0" />
+                        :customText="tpaConfirmationBodyTwo" />
-                    <div ref="confirmationOrderDetailsSection">
-                        <textBlock
-                            ref="tpaConfirmationOrderDetailsTitle"
-                            :customText="orderDetailsTitle"
-                            class="text-color--black fw-bold lh-base mt-5 mb-4"
-                            :marginTopSizeOverride="4" />
-                        <textBlock
-                            id="tpaConfirmationOrderDetailsBody"
-                            ref="tpaConfirmationOrderDetailsBody"
-                            :customText="orderDetailsBody"
-                            :marginTopSizeOverride="4"
-                            class="mb-4 small" />
-                        <deductibleBox
-                            ref="deductibleBox"
-                            class="px-3"
-                            :value="deductibleBoxValue" />
-                    </div>
                     <siteFooter
                         v-if="carrierUrl"
                         ref="siteFooter"
@@ -64,11 +45,11 @@
 import siteHeader from '@/iss-components/site-header/site-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,
+    getPhoneLinkHtmlStringFromPhoneNumber,
     processIfStatements
 } from '@/helpers/cms-content-helper';
 import settleAllPromises from '@/helpers/layout-helper';
@@ -77,8 +58,7 @@ import BaseFormMixin from '@/mixins/base-form-mixin.js';
 import { useMainStore } from '@/store';
 import {
     toTitleCase,
-    toDisplayPhoneNumber,
+    toDisplayPhoneNumber
-    formatAmountInDollars
 } from '@/helpers/text-helper.js';
 
 const VERIFYING_COVERAGE = 'Verifying coverage';
@@ -89,7 +69,6 @@ export default {
         siteHeader,
         siteFooter,
         textBlock,
-        deductibleBox,
         // eslint-disable-next-line vue/no-reserved-component-names
         Form
     },
@@ -132,12 +111,17 @@ export default {
             return this.getCmsContent('TPAConfirmationContent', 'BodyText')
                 ?.replaceAll(
                     '{custom:phoneNumber}',
-                    this.preferredShopPhoneNumber
+                    getPhoneLinkHtmlStringFromPhoneNumber(this.preferredShopPhoneNumber)
                 )
                 ?.replaceAll('{custom:glassShop}', this.preferredShopName);
         },
         tpaConfirmationBodyTwo() {
-            return this.getCmsContent('TPAConfirmationContent', 'BodyText2');
+            return this.getCmsContent('TPAConfirmationContent', 'BodyText2')
+                ?.replaceAll(
+                    '{custom:carrierPhone}',
+                    getPhoneLinkHtmlStringFromPhoneNumber(this.carrierPhoneNumber)
+                )
+                ?.replaceAll('{custom:carrierName}', this.carrierName);
         },
         orderDetailsTitle() {
             return this.getCmsContent('OrderDetailsContent', 'HeaderText');
@@ -171,7 +155,7 @@ export default {
             return this.submittedOrder.isVerified;
         },
         carrierName() {
-            return this.mainStore.issConfig.clientName;
+            return this.mainStore.issConfig.clientFullName;
         },
         carrierUrl() {
             return this.mainStore.issConfig.successReturnURL;
@@ -189,48 +173,43 @@ export default {
         async forwardButtonAction() {
             this.$router.navigateToExternalUrl(this.carrierUrl);
         },
-        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;
-                case 'coverageVerified':
-                    return this.isVerified;
-                default:
-                    return null;
-            }
-        },
         toDisplayPhoneNumber,
-        formatAmountInDollars,
         processIfStatements
     }
 };
 </script>
 <style lang="scss" scoped>
-.iss-heritage-container-width {
+.tpa-confirmation-container {
-    .tpa-confirmation-container {
+    position: relative;
-        position: relative;
+    min-height: 1px;
-        min-height: 1px;
+    padding-left: .9375rem;
-        padding-left: .9375rem;
+    padding-right: .9375rem;
-        padding-right: .9375rem;
-    }
-}
 
-.text-color--black {
+    .header {
-    color: $black;
+        margin-top: 1.25rem;
-}
+        margin-bottom: .625rem;
-
+        font-size: 1.25rem;
-.tpa-body-one {
+        color: $black;
-    :deep(p) {
+        img {
-        line-height: map-get($spacers, 5);
+            height: 2.25rem;
-        font-size: $h6-font-size;
+            width: 2.25rem;
-
+            margin-right: .5rem;
-        strong {
-            color: $black;
         }
     }
+
+    .subheader {
+        margin-bottom: 1.25rem;
+        color: $black;
+        font-weight: $font-weight-bold;
+    }
+
+    :deep(p) {
+        margin-bottom: .625rem;
+    }
+
+    :deep(strong) {
+        color: $black;
+        font-weight: 600;
+    }
 }
 </style>

src/store/index.js

@@ -2881,10 +2881,11 @@ export const useMainStore = defineStore({
             return JSON.parse(window.sessionStorage.getItem(webStorageConstants.SUBMITTED_ORDER));
         },
 
-        createSubmittedOrder(submitType) {
+        async createSubmittedOrder(submitType) {
             if (this.hasSubmittedOrder()) {
                 return;
             }
+            await this.getCarrierAccountInfo();
             const submittedOrder = this.order;
             const { experiments } = this.applicationUser;
             const { issConfig } = this;

src/styles/common-styles.scss

@@ -206,6 +206,18 @@ a.router-link {
     text-decoration: none;
     font-weight: $font-weight-bold;
 
+    &:hover,
+    &:focus {
+        color: #125b7e;
+        text-decoration: underline;
+    }
+}
+
+a.phone-link {
+    color: $heritage-blue-primary;
+    text-decoration: none;
+    font-weight: $font-weight-normal;
+
     &:hover,
     &:focus {
         color: #125b7e;