tpa-conf WIP

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>

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

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