Merge pull request #3191 from Safelite/nation/CASH-2468

Nation/cash 2468

src/constants/error-messages.js

@@ -44,6 +44,10 @@ const errorMessages = {
     DAMAGE_TYPES_REQUIRED: "How damage occurred is required",
     ZIP_CODE_REQUIRED: "Please enter your ZIP code",
     ZIP_CODE_FORMAT: "Zip must be 5 digits",
+    DATE_OF_BIRTH_REQUIRED: "Please enter your date of birth",
+    LOSS_TIME_REQUIRED: "Please enter your loss time",
+    LOSS_LOCATION_REQUIRED: "Please select your loss location",
+    SUBROGATION_REQUIRED: "Please make a selection",
 };
 
 export { errorMessages };

src/constants/insurance.js

@@ -85,3 +85,8 @@ export const parentAccountNumbers = {
 export const NON_MANAGED_SHOW_CLAIM_NUMBER_PARENTS = [
     { name: "KentuckyFarmBureau", value: "223499" },
 ];
+
+export const PARENT_ACCOUNT_NUMBERS = {
+    STATE_FARM: "711310",
+    USAA: "900040",
+};

src/digital-components/date-picker-popup/date-picker-popup.vue

@@ -26,7 +26,8 @@
                 :min-date="minDate"
                 :max-date="maxDate"
                 :auto-apply="autoApply"
-                :text-input="textInput"
+                :text-input="resolvedTextInput"
+                :hide-input-icon="textInputOnly"
                 :prevent-min-max-navigation="preventMinMaxNavigation"
                 :teleport="true"
                 :aria-labels="{ input: questionText }"
@@ -107,6 +108,12 @@ export default {
             type: Boolean,
             default: false,
         },
+        // Force manual entry: text input enabled, calendar popup never opens
+        // and the calendar icon is hidden.
+        textInputOnly: {
+            type: Boolean,
+            default: false,
+        },
         preventMinMaxNavigation: {
             type: Boolean,
             default: false,
@@ -155,7 +162,7 @@ export default {
         questionText() {
             if (!this.cmsWidgetName) return "";
             const text = this.getCmsContent
-                ? this.getCmsContent(this.cmsWidgetName, "BodyText")
+                ? this.getCmsContent(this.cmsWidgetName, "QuestionText")
                 : "";
             return this.addOptionalText ? `${text} (optional)` : text;
         },
@@ -193,6 +200,15 @@ export default {
                 clearable: this.clearable,
             };
         },
+        // Forwarded to VueDatePicker's `text-input` prop. When `textInputOnly`
+        // is set, force text input on AND tell the picker never to open its
+        // menu (so focus/click on the input is a no-op visually).
+        resolvedTextInput() {
+            if (this.textInputOnly) {
+                return { enabled: true, openMenu: false };
+            }
+            return this.textInput;
+        },
     },
     methods: {
         onDateChange(newValue) {

src/fmg-components/funnel-header/funnel-header.vue

@@ -5,8 +5,17 @@
         </div>
         <div class="container d-flex">
             <div class="site-logo">
-                <a href="https://safelite.com">
+                <a
-                    <img class="logo-image img-fluid" :src="imageSrc" alt="Safelite logo" />
+                    :href="overrideImageSrc ? null : 'https://safelite.com'"
+                    :class="{ 'pe-none': !!overrideImageSrc }"
+                    :tabindex="overrideImageSrc ? -1 : null"
+                    :aria-disabled="!!overrideImageSrc"
+                    @click="overrideImageSrc && $event.preventDefault()">
+                    <img
+                        class="logo-image img-fluid"
+                        :class="{ 'logo-image--override': !!overrideImageSrc }"
+                        :src="imageSrc"
+                        alt="Safelite logo" />
                 </a>
             </div>
             <div class="button-container webchat">
@@ -69,6 +78,10 @@ export default {
             type: Boolean,
             default: false,
         },
+        overrideImageSrc: {
+            type: String,
+            default: "",
+        },
     },
     setup() {
         const { webchatGlobalNonpersistedState, launchWebchat } = webchatHelper();
@@ -76,7 +89,7 @@ export default {
     },
     computed: {
         imageSrc() {
-            return this.getCmsContent(this.cmsWidgetName, "LogoImage");
+            return this.overrideImageSrc || this.getCmsContent(this.cmsWidgetName, "LogoImage");
         },
         shouldShowWebchatButton() {
             return this.webchatGlobalNonpersistedState.showWebchatButton;
@@ -199,6 +212,13 @@ export default {
         @include media-breakpoint-up(md) {
             width: 165px;
         }
+
+        &--override {
+            width: 200px;
+            @include media-breakpoint-up(md) {
+                width: 250px;
+            }
+        }
     }
 
     .webchat {

src/layouts/insurance-company/insurance-company.vue

@@ -182,7 +182,7 @@ export default {
 
             await this.dispatchStoreAction(
                 this.storeActions.SAVE_PARENT_ACCOUNT_NUMBER,
-                this.selectedAccount.parentAccountNumber.toString(),
+                Number(this.selectedAccount.parentAccountNumber).toString(),
                 false
             );
 

src/layouts/policy-info/more-policy-questions/more-policy-questions.vue

@@ -0,0 +1,99 @@
+<template>
+    <div class="more-policy-questions">
+        <buttonQuestion
+            :questionText="questionText"
+            isMultiSelect
+            :answers="answersToDisplay"
+            :groupName="groupName"
+            buttonTypeString="checkbox"
+            isRequired
+            v-model="selectedValues" />
+    </div>
+</template>
+
+<script>
+import buttonQuestion from "@/digital-components/button-question/button-question";
+import store from "@/store";
+import { PARENT_ACCOUNT_NUMBERS } from "@/constants/insurance";
+
+const STATE_FARM_ONLY_ANSWER_NAMES = new Set(["ThirdPartyVehicle", "Injuries"]);
+const HIDDEN_FOR_STATE_FARM_ANSWER_NAMES = new Set(["OtherResponsibleParty"]);
+// Maps an answer's Name to the CMS widget that supplies a State Farm-specific
+// label override. The widget's "Text" property replaces the answer's Text.
+const STATE_FARM_TEXT_OVERRIDES = {
+    AdditionalDamage: "AdditionalDamageStateFarmWidget",
+    Rental: "RentalStateFarmWidget",
+};
+
+export default {
+    name: "morePolicyQuestions",
+    props: {
+        modelValue: Array,
+        groupName: String,
+        cmsWidgetName: String,
+    },
+    computed: {
+        questionText() {
+            return this.getCmsContent(this.cmsWidgetName, "QuestionText");
+        },
+        answersFromCms() {
+            return this.getCmsContent(this.cmsWidgetName, "Answers");
+        },
+        isStateFarm() {
+            return (
+                store.getters.order?.payment?.parentAccountNumber?.toString() ===
+                PARENT_ACCOUNT_NUMBERS.STATE_FARM
+            );
+        },
+        stateFarmTextOverrides() {
+            return Object.fromEntries(
+                Object.entries(STATE_FARM_TEXT_OVERRIDES).map(([name, widget]) => [
+                    name,
+                    this.getCmsContent(widget, "Text"),
+                ])
+            );
+        },
+        answersToDisplay() {
+            if (!Array.isArray(this.answersFromCms)) return [];
+            return this.answersFromCms
+                .filter((ans) => {
+                    if (STATE_FARM_ONLY_ANSWER_NAMES.has(ans?.Name)) {
+                        return this.isStateFarm;
+                    }
+                    if (HIDDEN_FOR_STATE_FARM_ANSWER_NAMES.has(ans?.Name)) {
+                        return !this.isStateFarm;
+                    }
+                    return true;
+                })
+                .map((ans) => {
+                    if (!this.isStateFarm) return ans;
+                    const overrideText = this.stateFarmTextOverrides[ans?.Name];
+                    if (overrideText) {
+                        return { ...ans, Text: overrideText };
+                    }
+                    return ans;
+                });
+        },
+        selectedValues: {
+            get() {
+                return this.modelValue;
+            },
+            set(newValue) {
+                this.$emit("update:modelValue", newValue);
+            },
+        },
+    },
+    components: {
+        buttonQuestion,
+    },
+};
+</script>
+
+<style lang="scss">
+.more-policy-questions {
+    .ui-checkbox {
+        flex-direction: column;
+        gap: 0.5rem;
+    }
+}
+</style>

src/layouts/policy-info/policy-info.spec.js

@@ -55,6 +55,15 @@ function setupMocks() {
     fetchCmsContentForPage.mockResolvedValue(mockCmsContent);
     settleAllPromises.mockResolvedValue({ cmsContent: mockCmsContent });
 
+    const mockMixin = {
+        methods: {
+            getCmsContent: jest.fn((widgetName, fieldName) => {
+                return mockCmsContent?.[widgetName]?.[fieldName] ?? "";
+            }),
+            setCmsContent: jest.fn(),
+        },
+    };
+
     const mountOptions = getMountOptions({
         route: { name: "policy-info", query: {}, params: {} },
         router: {
@@ -62,6 +71,7 @@ function setupMocks() {
             navigateWithSaving: jest.fn(),
             navigateWithoutSaving: jest.fn(),
         },
+        mixins: [mockMixin],
     });
 
     const wrapper = shallowMount(policyInfo, mountOptions);

src/layouts/policy-info/policy-info.vue

@@ -1,19 +1,206 @@
 <template>
     <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
-        <funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
+        <funnelHeader
+            cmsWidgetName="FunnelHeaderWidget"
+            ref="funnelHeader"
+            :overrideImageSrc="clientLogoImageSrc" />
         <div class="container">
             <div class="row">
                 <div class="col-12 col-md-10 col-lg-8 col-xl-7">
                     <funnelSubHeader class="pb-4" cmsWidgetName="FunnelSubHeaderWidget" />
-                    <!--
+
-                            ... Page code goes here.
+                    <textBlock
-                    -->
+                        cmsWidgetName="PageTitleWidget"
+                        typeStyle="h1"
+                        :customText="pageTitleText"
+                        class="mb-5 text-left text-md-left cc-page-title" />
+
+                    <textBlock
+                        cmsWidgetName="PageInstructionsWidget"
+                        typeStyle="body"
+                        :customText="pageInstructionsText"
+                        class="mb-5 text-left text-md-left" />
+
+                    <textboxQuestion
+                        isRequired
+                        class="mb-1"
+                        :cmsWidgetName="policyNumberWidgetName"
+                        v-model="policyNumber"
+                        inputId="policyNumber"
+                        validationRules="policy-number-required" />
+                    <span
+                        v-if="displayPolicyHelperText"
+                        class="d-block mb-5 helper-text"
+                        v-html="policyHelperText"></span>
+
+                    <datePickerPopup
+                        v-if="displayDateOfBirth"
+                        isRequired
+                        class="mb-4"
+                        cmsWidgetName="DateOfBirthWidget"
+                        v-model="dateOfBirth"
+                        customInputId="dateOfBirth"
+                        placeholderText="MM/DD/YYYY"
+                        validationRules="date-of-birth-required"
+                        format="MM/dd/yyyy"
+                        modelType="MM/dd/yyyy"
+                        :enableTimePicker="false"
+                        :textInputOnly="true"
+                        :maxDate="today"
+                        :preventMinMaxNavigation="true" />
+
+                    <textboxQuestion
+                        v-if="displayLastName"
+                        isRequired
+                        class="mb-4"
+                        cmsWidgetName="LastNameWidget"
+                        v-model="lastName"
+                        inputId="lastName"
+                        validationRules="last-name-required" />
+
+                    <textboxQuestion
+                        v-if="displayStreetAddress"
+                        isRequired
+                        class="mb-4"
+                        cmsWidgetName="StreetAddressWidget"
+                        v-model="streetAddress"
+                        inputId="streetAddress"
+                        validationRules="street-address-required" />
+
+                    <textboxQuestion
+                        isRequired
+                        class="mb-4"
+                        cmsWidgetName="ZipWidget"
+                        v-model="policyZip"
+                        inputId="policyZip"
+                        maxLength="5"
+                        validationRules="zip-code-required|zip-code-format" />
+
+                    <div class="row">
+                        <div class="col-12 col-md-8">
+                            <textboxQuestion
+                                isRequired
+                                class="mb-4"
+                                cmsWidgetName="PhoneWidget"
+                                v-model="phoneNumber"
+                                inputId="phoneNumber"
+                                mask="###-###-####"
+                                validationRules="phone-number-required" />
+                        </div>
+                        <div class="col-12 col-md-4">
+                            <textboxQuestion
+                                isRequired
+                                class="mb-4"
+                                cmsWidgetName="PhoneExtensionWidget"
+                                v-model="phoneExtension"
+                                inputId="phoneExtension" />
+                        </div>
+                    </div>
+
+                    <datePickerPopup
+                        isRequired
+                        class="mb-4"
+                        cmsWidgetName="DateOfLossWidget"
+                        v-model="dateOfLoss"
+                        customInputId="dateOfLoss"
+                        placeholderText="MM/DD/YYYY"
+                        validationRules="date-of-loss-required"
+                        format="MM/dd/yyyy"
+                        modelType="MM/dd/yyyy"
+                        :enableTimePicker="false"
+                        :textInput="true"
+                        :maxDate="today"
+                        :preventMinMaxNavigation="true" />
+
+                    <dropdownQuestion
+                        v-if="displayLossTime"
+                        isRequired
+                        :questionText="timeOfLossQuestionText"
+                        class="mb-4"
+                        v-model="lossTime"
+                        cmsWidgetName="TimeOfLossWidget"
+                        customDropdownId="lossTime"
+                        :options="lossTimeOptions"
+                        :valueAsKey="true"
+                        validationRules="loss-time-required"
+                        :labelBold="true" />
+
+                    <dropdownQuestion
+                        isRequired
+                        :questionText="damageTypesQuestionText"
+                        class="mb-4"
+                        v-model="damageCause"
+                        cmsWidgetName="DamageTypesWidget"
+                        customDropdownId="damageTypes"
+                        :options="damageTypesOptions"
+                        :valueAsKey="true"
+                        validationRules="damage-types-required"
+                        :labelBold="true" />
+
+                    <buttonQuestion
+                        v-if="displaySubrogation"
+                        :questionText="subrogationQuestionText"
+                        :answers="subrogationAnswers"
+                        class="mb-4"
+                        groupName="SubrogationQuestion"
+                        buttonTypeString="listButton"
+                        isRequired
+                        validationRules="subrogation-required"
+                        v-model="subrogationSelectedValue" />
+
+                    <dropdownQuestion
+                        v-if="displayLossState"
+                        class="mb-4"
+                        customDropdownId="policyState"
+                        cmsWidgetName="StateQuestionWidget"
+                        v-model="policyState"
+                        ref="policyState"
+                        :options="stateOptions"
+                        validationRules="state-required"
+                        autocomplete="address-level1"
+                        placeHolderText="Select State"
+                        :labelBold="true" />
+
+                    <dropdownQuestion
+                        v-if="displayLossLocation"
+                        :questionText="lossLocationQuestionText"
+                        class="mb-4"
+                        v-model="lossLocation"
+                        cmsWidgetName="LossLocationQuestionWidget"
+                        customDropdownId="lossLocation"
+                        :options="lossLocationOptions"
+                        :valueAsKey="true"
+                        validationRules="loss-location-required"
+                        :labelBold="true" />
+
+                    <textboxQuestion
+                        v-if="displayLossCity"
+                        isRequired
+                        class="mb-4"
+                        cmsWidgetName="CityWidget"
+                        v-model="city"
+                        inputId="city"
+                        validationRules="city-required" />
+
+                    <hr class="mt-4 mb-0" />
+
+                    <morePolicyQuestions
+                        ref="morePolicyQuestions"
+                        cmsWidgetName="MorePolicyQuestionsWidget"
+                        v-model="morePolicyQuestions"
+                        groupName="MorePolicyQuestionsQuestion" />
+
                     <navbar
                         cmsWidgetName="FunnelFooterWidget"
                         ref="navbar"
                         :isForwardActionDisabled="!meta.valid"
                         @back-clicked="backButtonAction"
                         @ForwardClicked="forwardButtonAction" />
+
+                    <span
+                        v-if="displayDisclaimerText"
+                        class="d-block mb-5 disclaimer-text"
+                        v-html="disclaimerText"></span>
                 </div>
             </div>
         </div>
@@ -24,25 +211,203 @@
 import funnelHeader from "@/fmg-components/funnel-header/funnel-header";
 import navbar from "@/fmg-components/nav-bar/nav-bar";
 import funnelSubHeader from "@/fmg-components/funnel-sub-header/funnel-sub-header";
-import { Form } from "vee-validate";
+import textBlock from "@/digital-components/text-block/text-block";
+import textboxQuestion from "@/digital-components/textbox-question/textbox-question";
+import datePickerPopup from "@/digital-components/date-picker-popup/date-picker-popup";
+import dropdownQuestion from "@/digital-components/dropdown-question/dropdown-question";
+import morePolicyQuestions from "@/layouts/policy-info/more-policy-questions/more-policy-questions";
+import buttonQuestion from "@/digital-components/button-question/button-question";
+import { stateOptions } from "@/constants/state-options";
+import { Form, defineRule } from "vee-validate";
+import { required } from "@/helpers/validation-rules";
+import { errorMessages } from "@/constants/error-messages";
+import { regex } from "@/helpers/validation-rules";
+import { PARENT_ACCOUNT_NUMBERS } from "@/constants/insurance";
 
 import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
 import { settleAllPromises } from "@/helpers/layout-helper";
+import store from "@/store";
+import { debugLog } from "@/helpers/debug-log-helper";
+
+defineRule("policy-number-required", required(errorMessages.POLICY_NUMBER_REQUIRED));
+defineRule("zip-code-required", required(errorMessages.ZIP_REQUIRED));
+defineRule("zip-code-format", regex(/(^\d{5}$)|(^\d{5}-\d{4}$)/, errorMessages.ZIP_FORMAT));
+defineRule("phone-number-required", required(errorMessages.PHONE_REQUIRED));
+defineRule("date-of-loss-required", required(errorMessages.DATE_OF_LOSS_REQUIRED));
+defineRule("damage-types-required", required(errorMessages.DAMAGE_TYPES_REQUIRED));
+defineRule("state-required", required(errorMessages.STATE_REQUIRED));
+defineRule("city-required", required(errorMessages.CITY_REQUIRED));
+defineRule("date-of-birth-required", required(errorMessages.DATE_OF_BIRTH_REQUIRED));
+defineRule("last-name-required", required(errorMessages.LAST_NAME_REQUIRED));
+defineRule("street-address-required", required(errorMessages.STREET_ADDRESS_REQUIRED));
+defineRule("loss-time-required", required(errorMessages.LOSS_TIME_REQUIRED));
+defineRule("loss-location-required", required(errorMessages.LOSS_LOCATION_REQUIRED));
+defineRule("subrogation-required", required(errorMessages.SUBROGATION_REQUIRED));
 
 export default {
     name: "policy-info",
     mixins: [],
     data() {
-        return {};
+        return {
+            clientConfig: {},
+            policyNumber: this.getPolicyNumberFromStore(),
+            policyZip: this.getPolicyZipFromStore(),
+            phoneNumber: this.getPhoneNumberFromStore(),
+            phoneExtension: this.getPhoneExtensionFromStore(),
+            dateOfLoss: this.getDateOfLossFromStore(),
+            lastName: this.getLastNameFromStore(),
+            streetAddress: this.getStreetAddressFromStore(),
+            damageCause: this.getDamageCauseFromStore(),
+            policyState: this.getPolicyStateFromStore(),
+            city: this.getCityFromStore(),
+            dateOfBirth: this.getDateOfBirthFromStore(),
+            lossTime: this.getLossTimeFromStore(),
+            morePolicyQuestions: this.getMorePolicyQuestionsFromStore(),
+            subrogationSelectedValue: this.getSubrogationSelectedValueFromStore(),
+            lossLocation: this.getLossLocationFromStore(),
+        };
     },
     components: {
         Form,
         funnelHeader,
         navbar,
         funnelSubHeader,
+        textBlock,
+        textboxQuestion,
+        datePickerPopup,
+        dropdownQuestion,
+        morePolicyQuestions,
+        buttonQuestion,
+    },
+    computed: {
+        stateOptions() {
+            return stateOptions;
+        },
+        today() {
+            return new Date();
+        },
+        clientLogoImageSrc() {
+            return this.clientConfig?.ClientLogoWidget?.Image || "";
+        },
+        pageTitleText() {
+            return (
+                this.clientConfig?.PageTitleOverrideWidget?.Text ||
+                this.getCmsContent("PageTitleWidget", "Text")
+            );
+        },
+        pageInstructionsText() {
+            return (
+                this.clientConfig?.PageInstructionsOverrideWidget?.Text ||
+                this.getCmsContent("PageInstructionsWidget", "Text")
+            );
+        },
+        isUSAA() {
+            return (
+                store.getters.order?.payment?.parentAccountNumber?.toString() ===
+                PARENT_ACCOUNT_NUMBERS.USAA
+            );
+        },
+        policyNumberWidgetName() {
+            console.log("isUSAA", this.isUSAA);
+            return this.isUSAA ? "PolicyNumberUSAAWidget" : "PolicyNumberWidget";
+        },
+        policyHelperText() {
+            return this.clientConfig?.PolicyHelperTextOverrideWidget?.Text;
+        },
+        disclaimerText() {
+            return this.clientConfig?.DisclaimerWidget?.Text;
+        },
+        displayDisclaimerText() {
+            return this.disclaimerText !== null && this.disclaimerText !== "";
+        },
+        damageTypesQuestionText() {
+            return this.getCmsContent("DamageTypesWidget", "QuestionText");
+        },
+        damageTypesOptions() {
+            const options = {};
+
+            const answers = this.getCmsContent("DamageTypesWidget", "Answers");
+            for (const answer of answers) {
+                options[answer.Name] = answer.Text;
+            }
+
+            return options;
+        },
+        lossTimeOptions() {
+            const options = {};
+
+            const answers = this.getCmsContent("TimeOfLossWidget", "Answers");
+            for (const answer of answers) {
+                options[answer.Name] = answer.Text;
+            }
+
+            return options;
+        },
+        timeOfLossQuestionText() {
+            return this.getCmsContent("TimeOfLossWidget", "QuestionText");
+        },
+        lossLocationOptions() {
+            const options = {};
+
+            const answers = this.getCmsContent("LossLocationQuestionWidget", "Answers");
+            for (const answer of answers) {
+                options[answer.Name] = answer.Text;
+            }
+
+            return options;
+        },
+        parsedClientConfig() {
+            const raw = this.clientConfig?.ConfigWidget?.Text;
+            if (!raw) return {};
+            try {
+                return JSON.parse(raw);
+            } catch (err) {
+                console.warn("Failed to parse clientConfig.ConfigWidget.Text", err);
+                return {};
+            }
+        },
+        displayLossState() {
+            return this.parsedClientConfig.displayLossState ?? false;
+        },
+        displayLossCity() {
+            return this.parsedClientConfig.displayLossCity ?? false;
+        },
+        displayLossLocation() {
+            return this.parsedClientConfig.displayLossLocation ?? false;
+        },
+        displaySubrogation() {
+            return this.parsedClientConfig.displaySubrogation ?? false;
+        },
+        displayStreetAddress() {
+            return this.parsedClientConfig.displayStreetAddress ?? false;
+        },
+        displayDateOfBirth() {
+            return this.parsedClientConfig.displayDateOfBirth ?? false;
+        },
+        displayLastName() {
+            return this.parsedClientConfig.displayLastName ?? false;
+        },
+        displayLossTime() {
+            return this.parsedClientConfig.displayLossTime ?? false;
+        },
+        displayPolicyHelperText() {
+            return this.policyHelperText !== null && this.policyHelperText !== "";
+        },
+        subrogationQuestionText() {
+            return this.getCmsContent("SubrogationQuestionWidget", "QuestionText");
+        },
+        subrogationAnswers() {
+            return this.getCmsContent("SubrogationQuestionWidget", "Answers");
+        },
+        lossLocationQuestionText() {
+            return this.getCmsContent("LossLocationQuestionWidget", "QuestionText");
+        },
     },
     // Ensure CMS content is fetched during route navigation without depending on `to`/`from`
     async beforeRouteEnter(to, from, next) {
+        const clientConfigPageName = `client_${store.getters.order.payment.parentAccountNumber}`;
+        const clientConfigPromise = fetchCmsContentForPage(clientConfigPageName);
+
         const pageName = to.name;
         const cmsContentPromise = fetchCmsContentForPage(pageName);
         const promiseResultMap = [
@@ -50,14 +415,65 @@ export default {
                 resultKey: "cmsContent",
                 promise: cmsContentPromise,
             },
+            {
+                resultKey: "clientConfig",
+                promise: clientConfigPromise,
+            },
         ];
         const resultMap = await settleAllPromises(promiseResultMap);
         next((vm) => {
             vm.setCmsContent(resultMap.cmsContent);
+            vm.clientConfig = resultMap.clientConfig;
+            debugLog(`clientConfig::${clientConfigPageName}`, JSON.stringify(vm.clientConfig));
         });
     },
 
     methods: {
+        getPolicyNumberFromStore() {
+            return store.getters.order.policy.policyNumber;
+        },
+        getPolicyZipFromStore() {
+            return store.getters.order.policy.zipCode;
+        },
+        getPhoneNumberFromStore() {
+            return store.getters.order.policy.phoneNumber;
+        },
+        getPhoneExtensionFromStore() {
+            return store.getters.order.policy.phoneExtension;
+        },
+        getDateOfLossFromStore() {
+            return store.getters.order.damage.dateOfLoss;
+        },
+        getDamageCauseFromStore() {
+            return store.getters.order.damage.damageCause;
+        },
+        getPolicyStateFromStore() {
+            return store.getters.order.policy.state;
+        },
+        getCityFromStore() {
+            return store.getters.order.policy.city;
+        },
+        getDateOfBirthFromStore() {
+            return store.getters.order.policy.dateOfBirth;
+        },
+        getLastNameFromStore() {
+            return store.getters.order.policy.lastName;
+        },
+        getStreetAddressFromStore() {
+            return store.getters.order.policy.streetAddress;
+        },
+        getLossTimeFromStore() {
+            return store.getters.order.policy.lossTime;
+        },
+        getSubrogationSelectedValueFromStore() {
+            return store.getters.order.policy.subrogation;
+        },
+        getMorePolicyQuestionsFromStore() {
+            return store.getters.order.policy.morePolicyQuestions ?? [];
+        },
+        getLossLocationFromStore() {
+            return store.getters.order.policy.lossLocation;
+        },
         backButtonAction() {
             this.$router.navigateWithoutSaving(
                 this.navigationScenarios.CLICKED_BACK,
@@ -65,6 +481,35 @@ export default {
             );
         },
         async forwardButtonAction() {
+            this.dispatchStoreAction(
+                this.storeActions.SAVE_INSURANCE_DETAILS,
+                {
+                    policyNumber: this.policyNumber,
+                    zipCode: this.policyZip,
+                    phoneNumber: this.phoneNumber,
+                    phoneExtension: this.phoneExtension,
+                    state: this.policyState,
+                    city: this.city,
+                    morePolicyQuestions: this.morePolicyQuestions,
+                    lossLocation: this.lossLocation,
+                    lossTime: this.lossTime,
+                    lastName: this.lastName,
+                    dateOfBirth: this.dateOfBirth,
+                    subrogation: this.subrogationSelectedValue,
+                    streetAddress: this.streetAddress,
+                },
+                false
+            );
+
+            this.dispatchStoreAction(
+                this.storeActions.SAVE_DAMAGE_DETAILS,
+                {
+                    dateOfLoss: this.dateOfLoss,
+                    damageCause: this.damageCause,
+                },
+                false
+            );
+
             this.$router.navigateWithSaving(
                 this.navigationScenarios.CLICKED_FORWARD,
                 this.pageName
@@ -76,3 +521,34 @@ export default {
     },
 };
 </script>
+
+<style lang="scss">
+.cc-page-title {
+    font-size: 20px !important;
+    line-height: 1.325;
+    font-weight: 300;
+    color: $black;
+}
+
+.cc-page-instructions {
+    font-size: 16px !important;
+    font-weight: 400;
+    color: $gray-600;
+    line-height: 1.625;
+}
+
+.helper-text {
+    font-size: 14px !important;
+    font-weight: 400;
+    color: $gray-600;
+    line-height: 1.625;
+    font-style: italic;
+}
+
+.disclaimer-text {
+    font-size: 12px !important;
+    font-weight: 400;
+    color: $gray-600;
+    line-height: 1.625;
+}
+</style>

src/store/index.js

@@ -175,11 +175,18 @@ const getDefaultState = () => {
                 additionalAuthFlag: null,
                 isNoComp: false,
                 insuranceCompanyName: null,
+                phoneNumber: null,
+                phoneExtension: null,
                 streetAddress: null,
                 apartment: null,
                 city: null,
                 state: null,
                 zipCode: null,
+                dateOfBirth: null,
+                lossTime: null,
+                lossLocation: null,
+                lastName: null,
+                subrogation: null,
             },
             schedule: {
                 date: null,
@@ -342,6 +349,12 @@ export const mutations = {
         state.order.payment.accountName = accountName;
         state.order.policy.insuranceCompanyName = accountName;
     },
+    updatePhoneNumber(state, phoneNumber) {
+        state.order.policy.phoneNumber = phoneNumber;
+    },
+    updatePhoneExtension(state, phoneExtension) {
+        state.order.policy.phoneExtension = phoneExtension;
+    },
     updateStreetAddress(state, streetAddress) {
         state.order.policy.streetAddress = streetAddress;
     },
@@ -551,6 +564,15 @@ export const mutations = {
             state.order.policy.state = insuranceDetails.state;
             state.order.policy.zipCode = insuranceDetails.zipCode;
             state.order.policy.claimNumber = insuranceDetails.claimNumber;
+            state.order.policy.phoneNumber = insuranceDetails.phoneNumber;
+            state.order.policy.phoneExtension = insuranceDetails.phoneExtension;
+            state.order.policy.morePolicyQuestions = insuranceDetails.morePolicyQuestions;
+            state.order.policy.dateOfBirth = insuranceDetails.dateOfBirth;
+            state.order.policy.lossTime = insuranceDetails.lossTime;
+            state.order.policy.lastName = insuranceDetails.lastName;
+            state.order.policy.lossLocation = insuranceDetails.lossLocation;
+            state.order.policy.subrogation = insuranceDetails.subrogation;
+            state.order.policy.streetAddress = insuranceDetails.streetAddress;
         }
     },
     updateDamageDetails(state, damageDetails) {