Adding tpa submit page

2023-12-04 18:49:24 -05:00 · 2023-12-04 18:49:24 -05:00 · ef49dadbb2
commit ef49dadbb2
parent fe3f1fb86c
10 changed files with 307 additions and 141 deletions
--- a/src/layouts/provider-preference/tpa-recal-modal/tpa-recal-toggle/tpa-recal-toggle.vue
+++ b/src/layouts/provider-preference/tpa-recal-modal/tpa-recal-toggle/tpa-recal-toggle.vue
@ -4,6 +4,7 @@
        class="tpa-toggle"
        :class="[isDetailVisible ? 'active' : '']"
        @click="handleClickToggle"></div>
+        <button>Edit Me!</button>
        <textLink
          id="moreDetails"
          linkType="text"
--- a/src/layouts/tpa-submit/deductible-box/deductible-box.spec.js
+++ b/src/layouts/tpa-submit/deductible-box/deductible-box.spec.js
--- a/src/layouts/tpa-submit/deductible-box/deductible-box.vue
+++ b/src/layouts/tpa-submit/deductible-box/deductible-box.vue
@ -0,0 +1,33 @@
+<template>
+    <div class="deductible-box d-flex justify-content-between align-items-center py-2 px-5">
+        <p class="deductible-box__text">
+            Deductible
+        </p>
+        <p class="deductible-box__text">
+            {{ value }}
+        </p>
+    </div>
+</template>
+
+<script>
+
+export default {
+    name: 'deductible-box',
+    props: {
+        value: String
+    }
+};
+
+</script>
+
+<style lang="scss" scoped>
+.deductible-box {
+    background-color: $green;
+}
+
+.deductible-box__text {
+    color: white;
+    font-weight: 500;
+    margin: 0;
+}
+</style>
--- a/src/layouts/tpa-submit/review-block/review-block.vue
+++ b/src/layouts/tpa-submit/review-block/review-block.vue
@ -1,18 +1,16 @@
 <template>
-    <div class="py-3">
-        <div class="d-flex">
-            <textBlock
-                :cmsWidgetName="headerCmsWidgetName"
-                :customText="customHeaderText"
-                typeStyle="body small bold dark"
-                marginTopSizeOverride="0" />
+    <div class="review-block">
+        <div class="d-flex justify-content-between">
+            <p class="review-block__header small-strong pb-1">
+                {{ customHeaderText }}
+            </p>
            <textLink
                linkType="textSmall"
-                text="Edit"
-                class="ml-auto"
+                :text="editLinkText"
                useLoadingModal
                href="javascript:void(0)"
-                @click-event="linkClicked">
+                class="link"
+                @clickEvent="editClicked">
                <template
                    v-if="editScreenReaderTextCmsWidgetName"
                    #after-text>
@ -20,50 +18,54 @@
                </template>
            </textLink>
        </div>
-        <!-- how about a p instead of div with html -->
-        <div
-            v-for="line in content"
+        <p
+            v-for="line in lines"
            :key="line"
-            class="small review-block-content"
-            data-test="contentLine"
-            v-html="line"></div>
-    </div>
-
-    <div>
-        <!-- TODO title -->
-        <!-- TODO edit button -->
-        <!-- TODO lines -->
+            class="small review-block__body--line">
+            {{ line }}
+        </p>
    </div>
 </template>

 <script>
-import textBlock from "@/digital-components/text-block/text-block";
-import textLink from "@/ux-components/text-link/text-link";
+import textLink from '@/ux-components/text-link/text-link.vue';

 export default {
    name: 'review-block',
-    components: [
-        textBlock,
-        textLink
-    ],
+    components: { textLink },
    props: {
        headerCmsWidgetName: String,
        customHeaderText: String,
-        // Specifically an array of strings.
-        content: Array,
        editScreenReaderTextCmsWidgetName: String,
        lines: Array
    },
+    emits: ['click-edit'],
    data() {
        return {
+            editLinkText: 'Edit'
        };
    },
-    computed: {
-    },
    methods: {
+        editClicked() {
+            this.$emit('click-edit');
+        }
    }
 };
 </script>

 <style lang="scss" scoped>
+.review-block {
+    :deep(p) {
+        margin: 0;
+    }
+    .review-block__header {
+        color: $black;
+    }
+    .review-block__body--line {
+        color: $gray-600;
+    }
+    .link {
+        text-underline-offset: 1px;
+    }
+}
 </style>
--- a/src/layouts/tpa-submit/tpa-submit.vue
+++ b/src/layouts/tpa-submit/tpa-submit.vue
@ -1,7 +1,8 @@
 <template>
    <Form
-        ref="theForm"
+        ref="tpaSubmitFormRef"
        v-slot="{ meta }"
+        class="tpa-submit"
        @submit="onSubmit"
        @invalidSubmit="onInvalidSubmit">
        <div class="page-container-grouped-styles">
@ -9,75 +10,79 @@
                <siteHeader
                    ref="siteHeader"
                    :cmsWidgetName="widget.siteHeader" />
-                <div class="container-fluid px-6">
+                <div class="px-5">
                    <vehicleBanner
+                        ref="vehicleBanner"
                        :cmsWidgetName="widget.vehicleBanner"
-                        :displayGenericVehicleImage="false" />
+                        :displayGenericVehicleImage="false"
+                        class="mt-5" /> <!-- TODO fix styling -->
                    <textBlock
                        :customText="subHeaderTitle"
-                        typeStyle="h5"
                        justifyText="center"
-                        class="dark-header mt-4" />
+                        :marginTopSizeOverride="4"
+                        class="text-color--black fs-5 tpa-submit__title--line-height" />
                    <textBlock
-                        :customText="subHeaderBody"
-                        typeStyle="body"
-                        justifyText="left"
-                        margin="mt-0 mb-2" />
+                        id="tpaSubmitSubHeaderBodyOne"
+                        :customText="subHeaderBodyOne"
+                        class="small text-color--darker-gray" />
+                    <textBlock
+                        id="tpaSubmitSubHeaderBodyTwo"
+                        :customText="subHeaderBodyTwo"
+                        class="mb-4 small text-color--darker-gray" />
                    <buttonMain
                        ref="buttonMain"
                        isPrimary
                        :buttonText="forwardButtonText"
                        loaderColor="white"
-                        class="mb-2 w-100"
+                        class="w-100 mb-4"
                        @clickEvent="forwardButtonAction" />
-                    <hr />
-
-                    <textBlock
-                        customText="Service Summary"
-                        typeStyle="label bold"
-                        justifyText="justify-text-left"
-                        margin="mt-0"
-                        class="dark-header" />
-
-                    <!-- TODO Service Summary title -->
-                        <!-- TODO Vehicle piece -->
-                        <!-- TODO Damage piece -->
-                        <!-- TODO Preferred Shop piece -->
-                        <!-- TODO Contact details piece -->
-                    <!-- TODO Order details title -->
-                    <!-- TODO Order details body -->
-                    <!-- TODO Green Deductible Rectangle -->
+                    <hr class="mb-0" />
+                    <div id="serviceSummarySection">
+                        <textBlock
+                            id="tpaSubmitServiceSummaryTitle"
+                            :customText="serviceSummaryText"
+                            :marginTopSizeOverride="4"
+                            class="fw-bold fs-1 lh-lg text-color--black" />
+                        <div class="px-4 my-3">
+                            <div
+                                v-for="(section, index) in sections"
+                                :key="section.title">
+                                <hr
+                                    v-if="index !== 0"
+                                    class="my-3" />
+                                <reviewBlock
+                                    :id="'review-block-' + index"
+                                    :customHeaderText="section.title"
+                                    :lines="section.lines"
+                                    @clickEdit="() => section.onClickEdit()" />
+                            </div>
+                        </div>
+                    </div>
+                    <hr class="mb-0" />
+                    <div id="submitOrderDetailsSection">
+                        <textBlock
+                            id="tpaSubmitOrderDetailsTitle"
+                            :customText="orderDetailsTitle"
+                            :marginTopSizeOverride="4"
+                            class="fw-bold text-color--black" />
+                        <textBlock
+                            id="tpaSubmitOrderDetailsBody"
+                            :customText="orderDetailsBody"
+                            :marginTopSizeOverride="4"
+                            class="mb-4 px-4 small text-color--darker-gray" />
+                        <deductibleBox :value="deductibleBoxValue" />
+                    </div>
                    <siteFooter
                        ref="siteFooter"
                        class="mt-5"
-                        cmsWidgetName="SiteFooterWidget"
+                        :cmsWidgetName="widget.footer"
                        :isForwardActionDisabled="!meta.valid"
-                        @backClicked="navigateBack"
+                        @backClicked="backButtonAction"
                        @forwardClicked="forwardButtonAction" />
                </div>
            </div>
        </div>
    </Form>
-    <!-- <Form
-        ref="theForm"
-        v-slot="{ meta }"
-        @submit="onSubmit"
-        @invalidSubmit="onInvalidSubmit">
-        <div class="page-container-grouped-styles">
-            <div class="fade-on-route-transition position-relative">
-                <siteHeader cmsWidgetName="SiteHeaderWidget" />
-                <div class="container-fluid pb-2 submit">
-                    <p>Placeholder for TPA-Submit</p>
-                    <siteFooter
-                    ref="siteFooter"
-                    cmsWidgetName="SiteFooterWidget"
-                    :isForwardActionDisabled="!meta.valid"
-                    @ForwardClicked="forwardButtonAction"
-                    @backClicked="backButtonAction" />
-                </div>
-            </div>
-        </div>
-    </Form> -->
 </template>
 <script>
 // Components
@ -85,14 +90,46 @@ import siteHeader from '@/iss-components/site-header/site-header.vue';
 import buttonMain from '@/ux-components/button-main/button-main.vue';
 import textBlock from '@/digital-components/text-block/text-block.vue';
 import vehicleBanner from '@/iss-components/vehicle-banner/vehicle-banner.vue';
+import reviewBlock from '@/layouts/tpa-submit/review-block/review-block.vue';
+import deductibleBox from '@/layouts/tpa-submit/deductible-box/deductible-box.vue';
 import siteFooter from '@/iss-components/site-footer/site-footer.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 widgetFields from '@/constants/cms-widget-fields.js';
+import { useMainStore } from '@/store';
+
+const VERIFYING_COVERAGE = 'Verifying coverage';
+
+// TODO move functions to general location
+function getStringWithCustomValues(str, customValueMap) {
+    let newString = str;
+    Object.entries(customValueMap).forEach((key, value) => {
+        newString = newString.replaceAll(`{custom:${key}}`, value);
+    });
+    return newString;
+}
+
+function getDisplayPhoneNumber(phoneNumber) {
+    return phoneNumber;
+}
+
+function getTitleCase(str) {
+    return str;
+}
+
+// TODO more elaborate
+function getAddressString(addressLine1, addressLine2, city, state, zipCode) {
+    return `${this.getTitleCase(addressLine1)}, ${this.getTitleCase(addressLine2)}, `
+        + `${this.getTitleCase(city)}, ${state} ${zipCode}`;
+}
+
+// TODO make round two decimal places and work for both strings and numbers
+function getDisplayDollars(amount) {
+    return `$${amount}`;
+}

 export default {
    name: 'tpa-submit',
@ -101,81 +138,150 @@ export default {
        vehicleBanner,
        textBlock,
        buttonMain,
+        reviewBlock,
+        deductibleBox,
        siteFooter,
        // eslint-disable-next-line vue/no-reserved-component-names
        Form
    },
    mixins: [BaseFormMixin],
    async beforeRouteEnter(to, from, next) {
-        const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
-        const promiseResultMap = [
-            {
-                resultKey: 'cmsContent',
-                promise: cmsContentPromise
-            }
-        ];
-        const resultMap = await settleAllPromises(promiseResultMap);
-
+        const cmsContent = await fetchCmsContentForPage(to.query.issPage);
        next((vm) => {
-            vm.setCmsContent(resultMap.cmsContent);
+            vm.setCmsContent(cmsContent);
+            vm.setSections();
        });
    },
    data() {
+        const { companyName } = useMainStore().order.serviceLocation.provider;
        return {
+            sections: [],
            widget: {
                siteHeader: 'SiteHeaderWidget',
                siteSubHeader: 'SiteSubHeaderWidget',
+                serviceSummary: 'ServiceSummaryContent',
                vehicleBanner: 'VehicleBannerWidget',
+                subheader: {
+                    vehicle: 'VehicleSubTitle',
+                    damage: 'DamageSubTitle',
+                    shop: 'PreferredShopSubTitle',
+                    contactInfo: 'ContactDetailsSubTitle'
+                },
+                orderDetails: 'OrderDetailsContent',
                footer: 'SiteFooterWidget'
            },
-            widgetFields
+            companyName,
+            customValueMap: {
+                glassShop: companyName
+            }
        };
    },
    computed: {
        subHeaderTitle() {
-            return this.getCmsContent(this.widget.siteSubHeader, 'SubHeaderText');
+            return this.getCmsContent(this.widget.siteSubHeader, widgetFields.CONTENT_GROUP_WIDGET.HEADER_TEXT);
        },
-        subHeaderBody() {
-            const initial = this.getCmsContent(this.widget.siteSubHeader, 'SecondaryText');
-            const x = initial.replace('{custom:glassShop}', 'Random Shop Name');
-            return x;
-            // return this.getCmsContent(this.widget.siteSubHeader, 'SecondaryText');
+        subHeaderBodyOne() {
+            return this.getCmsContent(this.widget.siteSubHeader, widgetFields.CONTENT_GROUP_WIDGET.BODY_TEXT);
+        },
+        subHeaderBodyTwo() {
+            const cmsContent = this.getCmsContent(this.widget.siteSubHeader, widgetFields.CONTENT_GROUP_WIDGET.BODY_TEXT_2);
+            return this.getStringWithCustomValues(cmsContent, this.customValueMap);
+        },
+        serviceSummaryText() {
+            return this.getCmsContent(this.widget.serviceSummary, widgetFields.TEXT_BLOCK_WIDGET.TEXT);
+        },
+        orderDetailsTitle() {
+            return this.getCmsContent(this.widget.orderDetails, widgetFields.CONTENT_GROUP_WIDGET.HEADER_TEXT);
+        },
+        orderDetailsBody() {
+            return this.getCmsContent(this.widget.orderDetails, widgetFields.CONTENT_GROUP_WIDGET.BODY_TEXT);
+        },
+        deductibleBoxValue() {
+            const { isVerified } = useMainStore().order.payment.insuranceCoverage;
+            const { currentDeductible } = useMainStore().order;
+            return isVerified ? this.getDisplayDollars(currentDeductible) : VERIFYING_COVERAGE;
        },
        forwardButtonText() {
-            return this.getCmsContent(this.widget.footer, 'ForwardButtonText');
+            return this.getCmsContent(this.widget.footer, widgetFields.FOOTER_WIDGET.FORWARD_BUTTON_TEXT);
+        },
+        getVehicleLines() {
+            const { year, make, model } = useMainStore().order.vehicle;
+            return [`${year} ${make} ${model}`];
+        },
+        getDamageLines() {
+            return [useMainStore().order.policy.damageCause];
+        },
+        getPreferredShopLines() {
+            const { phoneNumber, address } = useMainStore().order.serviceLocation.provider;
+            const { streetAddress, city, state, zipCode } = address;
+            const displayAddress = this.getAddressString(streetAddress, '', city, state, zipCode);
+            const displayPhoneNumber = this.getDisplayPhoneNumber(phoneNumber);
+            return [this.companyName, displayAddress, displayPhoneNumber];
+        },
+        getContactInfoLines() {
+            const { firstName, lastName, emailAddress, phoneNumber } = useMainStore().order.contactInfo;
+            return [
+                `${firstName} ${lastName}`,
+                emailAddress,
+                this.getDisplayPhoneNumber(phoneNumber)
+            ];
        }
-        // getSubheaderTextFromCms(cmsWidgetName) {
-        //     const subHeader = this.getCmsContent(cmsWidgetName, 'SubHeaderText');
-        //     console.log(JSON.stringify(subHeader));
-        //     return this.processIfStatements(subHeader, 'custom', this.getCustomValueFromString);
-        // }
    },
    methods:
        {
+            setSections() {
+                this.sections = [
+                    this.getSection(this.widget.subheader.vehicle, this.getVehicleLines, this.navigationScenarios.EDIT_VEHICLE),
+                    this.getSection(this.widget.subheader.damage, this.getDamageLines, this.navigationScenarios.EDIT_DAMAGE),
+                    this.getSection(this.widget.subheader.shop, this.getPreferredShopLines, this.navigationScenarios.EDIT_PREFERRED_SHOP),
+                    // eslint-disable-next-line max-len
+                    this.getSection(this.widget.subheader.contactInfo, this.getContactInfoLines, this.navigationScenarios.EDIT_CONTACT_DETAILS)
+                ];
+            },
+            getSection(widgetName, lines, scenario) {
+                return {
+                    title: this.getCmsContent(widgetName, widgetFields.TEXT_BLOCK_WIDGET.TEXT),
+                    lines,
+                    onClickEdit: this.getNavigateByScenarioMethod(scenario)
+                };
+            },
            backButtonAction() {
-                this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
+                this.navigate(this.navigationScenarios.CLICKED_BACK);
            },
            forwardButtonAction() {
-                this.$router.navigate(
-                    this.navigationScenarios.CLICKED_FORWARD,
-                    this.$route
-                );
+                this.navigate(this.navigationScenarios.CLICKED_FORWARD);
            },
-            getCustomValueFromString(str) {
-                console.log(`string val: ${str}`);
-                switch (str) {
-                    case 'glassShop':
-                        return 'Fake Glass Shop';
-                    default:
-                        return null;
-                }
-            }
+            getNavigateByScenarioMethod(scenario) {
+                return () => this.navigate(scenario);
+            },
+            navigate(scenario) {
+                this.$router.navigate(scenario, this.$route);
+            },
+            getStringWithCustomValues,
+            getDisplayPhoneNumber,
+            getTitleCase,
+            getAddressString,
+            getDisplayDollars
        }
 };
 </script>
 <style lang="scss" scoped>
-.submit {
-  margin-bottom:0.75rem;
+
+.tpa-submit__title--line-height {
+    line-height: map-get($spacers, 6);
+}
+
+.text-color--darker-gray {
+    color: $darker-gray
+}
+
+.text-color--black {
+    color: $black;
+}
+
+hr {
+    opacity: 1;
+    color: $gray-350
 }

 </style>
--- a/src/router/router-constants/navigation-scenarios.js
+++ b/src/router/router-constants/navigation-scenarios.js
@ -68,6 +68,12 @@ const navigationScenarios = Object.freeze({
    CLICKED_FORWARD_WITH_SAFELITE_SHOP: 'CLICKED_FORWARD_WITH_SAFELITE_SHOP',
    CLICKED_FORWARD_WITH_NON_SAFELITE_SHOP: 'CLICKED_FORWARD_WITH_NON_SAFELITE_SHOP',

+    // TPA Submit
+    EDIT_VEHICLE: 'EDIT_VEHICLE',
+    EDIT_DAMAGE: 'EDIT_DAMAGE',
+    EDIT_PREFERRED_SHOP: 'EDIT_PREFERRED_SHOP',
+    EDIT_CONTACT_DETAILS: 'EDIT_CONTACT_DETAILS',
+
    // Provider Preference
    CLICKED_FORWARD_WITH_SAFELITE: 'CLICKED_FORWARD_WITH_SAFELITE',
    CLICKED_FORWARD_WITH_TPA_ENABLED: 'CLICKED_FORWARD_WITH_TPA_ENABLED',
--- a/src/router/router-constants/routing-table.js
+++ b/src/router/router-constants/routing-table.js
@ -637,6 +637,22 @@ const routingTable = () => [
    {
        issPageValue: issPageValues.TPA_SUBMIT,
        maps: [
+            {
+                scenario: navigationScenarios.EDIT_VEHICLE,
+                destinationIssPageValue: issPageValues.VEHICLE_SELECTION
+            },
+            {
+                scenario: navigationScenarios.EDIT_DAMAGE,
+                destinationIssPageValue: issPageValues.VEHICLE_DAMAGE
+            },
+            {
+                scenario: navigationScenarios.EDIT_PREFERRED_SHOP,
+                destinationIssPageValue: issPageValues.PROVIDER_PREFERENCE
+            },
+            {
+                scenario: navigationScenarios.EDIT_CONTACT_DETAILS,
+                destinationIssPageValue: issPageValues.CONTACT_DETAILS
+            },
            {
                scenario: navigationScenarios.CLICKED_BACK,
                destinationIssPageValue: issPageValues.TPA_SEARCH
--- a/src/store/index.js
+++ b/src/store/index.js
@ -115,7 +115,9 @@ const getDefaultState = () => ({
                    state: null,
                    zipCode: null,
                    zipCodeCtu: null
-                }
+                },
+                companyName: null, // TODO set
+                phoneNumber: null // TODO set
            }
        },
        lineItems: {
--- a/src/styles/common-typography-styles.scss
+++ b/src/styles/common-typography-styles.scss
@ -51,6 +51,12 @@ h6,
  font-weight: 400;
 }

+.small-strong {
+  font-size: .875rem;
+  line-height: 1.7;
+  font-weight: 500;
+}
+
 label,
 .label {
  font-size: 1rem;
@ -63,16 +69,4 @@ caption,
  font-size: .75rem;
  line-height: 1.7;
  font-weight: 400;
-}
-
-
-// Font size
-.fs-5 {
-  line-height: 2;
-}
-
-.fs-6 {
-  font-size: 1rem !important;
-  line-height: 1.4;
-  font-weight: 500;
 }
--- a/src/styles/ux-variables.scss
+++ b/src/styles/ux-variables.scss
@ -52,6 +52,7 @@ $yellow-900: #331a00;
 $gray-100: #f5f5f5; // Used in theme
 $gray-200: #e3e4e4; // Used in theme
 $gray-300: #d2d4d4;
+$gray-350: #b3b4b5; // Used for hr
 $gray: #b0b3b3; // Default Gray
 $gray-500: #8e9292; // Used in theme
 $gray-550: #727676; // Used in theme
@ -123,9 +124,18 @@ $font-family-base: $font-family-sans-serif;
 $font-family-code: $font-family-monospace;
 $font-size-base: 1rem; // Assumes the browser default, typically `16px`

+//Headings
+$h1-font-size: $font-size-base * 3;
+$h2-font-size: $font-size-base * 2.625;
+$h3-font-size: $font-size-base * 2;
+$h4-font-size: $font-size-base * 1.625;
+$h5-font-size: $font-size-base * 1.25;
+$h6-font-size: $font-size-base * 0.875;
+
 //Custom Font size (extra small)
 $font-size-xsm: $font-size-base * 0.75;
 $font-sizes: (
+    5: $h5-font-size,
    7: $font-size-xsm,
 );

@ -136,13 +146,6 @@ $font-weight-normal: 400;
 $font-weight-bold: 500;
 $font-weight-bolder: bolder;

-//Headings
-$h1-font-size: $font-size-base * 3;
-$h2-font-size: $font-size-base * 2.625;
-$h3-font-size: $font-size-base * 2;
-$h4-font-size: $font-size-base * 1.625;
-$h5-font-size: $font-size-base * 1.25;
-$h6-font-size: $font-size-base * 0.875;

 //Border Radius
 // Helper classes are rounded, rounded-1, rounded-2, rounded-3
@ -173,6 +176,9 @@ $spacers: (
    8: $spacer * 3,
 );

+//Line Height
+
+
 //Grid breakpoints
 $grid-breakpoints: (
    xs: 0,