From e4bceb5fe73f2430058232f70b19c9e040b1ce77 Mon Sep 17 00:00:00 2001
From: CarlNation <Carl.Nation@safelite.com>
Date: Tue, 28 Apr 2026 15:52:35 -0400
Subject: [PATCH 1/2] CASH-699 add input fields for insurance-details page

CASH-699 add input fields for insurance-details page
---
 package-lock.json                             | 129 +++++++++
 package.json                                  |   1 +
 src/constants/error-messages.js               |   6 +
 src/constants/store-actions.js                |   2 +
 src/constants/store-mutations.js              |   4 +
 .../date-picker-popup/date-picker-popup.vue   | 274 ++++++++++++++++++
 .../coverage-statement/coverage-statement.vue |  29 +-
 .../insurance-details/insurance-details.vue   | 235 ++++++++++++++-
 src/router/constants/navigation-scenarios.js  |   2 +
 src/router/constants/routing-table.js         |   8 +
 src/store/index.js                            |  49 ++++
 11 files changed, 729 insertions(+), 10 deletions(-)
 create mode 100644 src/digital-components/date-picker-popup/date-picker-popup.vue

diff --git a/package-lock.json b/package-lock.json
index 2e45411d6..d920027d6 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,6 +10,7 @@
       "dependencies": {
         "@adyen/adyen-web": "^6.27.0",
         "@iframe-resizer/child": "^5.3.3",
+        "@vuepic/vue-datepicker": "^12.1.0",
         "axios": "^0.30.2",
         "bootstrap": "^5.3.3",
         "core-js": "^3.38.1",
@@ -1910,6 +1911,11 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@date-fns/tz": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/@date-fns/tz/-/tz-1.4.1.tgz",
+      "integrity": "sha512-P5LUNhtbj6YfI3iJjw5EL9eUAG6OitD0W3fWQcpQjDRc/QIsL0tRNuO1PcDvPccWL1fSTXXdE1ds+l95DV/OFA=="
+    },
     "node_modules/@discoveryjs/json-ext": {
       "version": "0.5.7",
       "resolved": "https://registry.npmjs.org/@discoveryjs/json-ext/-/json-ext-0.5.7.tgz",
@@ -2045,6 +2051,63 @@
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
       }
     },
+    "node_modules/@floating-ui/core": {
+      "version": "1.7.5",
+      "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.7.5.tgz",
+      "integrity": "sha512-1Ih4WTWyw0+lKyFMcBHGbb5U5FtuHJuujoyyr5zTaWS5EYMeT6Jb2AuDeftsCsEuchO+mM2ij5+q9crhydzLhQ==",
+      "dependencies": {
+        "@floating-ui/utils": "^0.2.11"
+      }
+    },
+    "node_modules/@floating-ui/dom": {
+      "version": "1.7.6",
+      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.7.6.tgz",
+      "integrity": "sha512-9gZSAI5XM36880PPMm//9dfiEngYoC6Am2izES1FF406YFsjvyBMmeJ2g4SAju3xWwtuynNRFL2s9hgxpLI5SQ==",
+      "dependencies": {
+        "@floating-ui/core": "^1.7.5",
+        "@floating-ui/utils": "^0.2.11"
+      }
+    },
+    "node_modules/@floating-ui/utils": {
+      "version": "0.2.11",
+      "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.11.tgz",
+      "integrity": "sha512-RiB/yIh78pcIxl6lLMG0CgBXAZ2Y0eVHqMPYugu+9U0AeT6YBeiJpf7lbdJNIugFP5SIjwNRgo4DhR1Qxi26Gg=="
+    },
+    "node_modules/@floating-ui/vue": {
+      "version": "1.1.11",
+      "resolved": "https://registry.npmjs.org/@floating-ui/vue/-/vue-1.1.11.tgz",
+      "integrity": "sha512-HzHKCNVxnGS35r9fCHBc3+uCnjw9IWIlCPL683cGgM9Kgj2BiAl8x1mS7vtvP6F9S/e/q4O6MApwSHj8hNLGfw==",
+      "dependencies": {
+        "@floating-ui/dom": "^1.7.6",
+        "@floating-ui/utils": "^0.2.11",
+        "vue-demi": ">=0.13.0"
+      }
+    },
+    "node_modules/@floating-ui/vue/node_modules/vue-demi": {
+      "version": "0.14.10",
+      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.10.tgz",
+      "integrity": "sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==",
+      "hasInstallScript": true,
+      "bin": {
+        "vue-demi-fix": "bin/vue-demi-fix.js",
+        "vue-demi-switch": "bin/vue-demi-switch.js"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.0.0-rc.1",
+        "vue": "^3.0.0-0 || ^2.6.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@hapi/hoek": {
       "version": "9.3.0",
       "resolved": "https://registry.npmjs.org/@hapi/hoek/-/hoek-9.3.0.tgz",
@@ -3572,6 +3635,11 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@types/web-bluetooth": {
+      "version": "0.0.21",
+      "resolved": "https://registry.npmjs.org/@types/web-bluetooth/-/web-bluetooth-0.0.21.tgz",
+      "integrity": "sha512-oIQLCGWtcFZy2JW77j9k8nHzAOpqMHLQejDA48XXMWH6tjCQHz5RCFz1bzsmROyL6PUm+LLnUiI4BCn221inxA=="
+    },
     "node_modules/@types/ws": {
       "version": "8.18.1",
       "resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.18.1.tgz",
@@ -4536,6 +4604,58 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@vuepic/vue-datepicker": {
+      "version": "12.1.0",
+      "resolved": "https://registry.npmjs.org/@vuepic/vue-datepicker/-/vue-datepicker-12.1.0.tgz",
+      "integrity": "sha512-QuWcO+CqIGYFoRNCagp9xUY9sMK/OHUlVIDxBYjw7HjCTWXfuE/r3l3loB00faEtb0Teo3DeBn26hT3tYA5pgg==",
+      "dependencies": {
+        "@date-fns/tz": "^1.4.1",
+        "@floating-ui/vue": "^1.1.9",
+        "@vueuse/core": "^14.1.0",
+        "date-fns": "^4.1.0"
+      },
+      "engines": {
+        "node": ">=18.12.0"
+      },
+      "peerDependencies": {
+        "vue": ">=3.5.0"
+      }
+    },
+    "node_modules/@vueuse/core": {
+      "version": "14.2.1",
+      "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-14.2.1.tgz",
+      "integrity": "sha512-3vwDzV+GDUNpdegRY6kzpLm4Igptq+GA0QkJ3W61Iv27YWwW/ufSlOfgQIpN6FZRMG0mkaz4gglJRtq5SeJyIQ==",
+      "dependencies": {
+        "@types/web-bluetooth": "^0.0.21",
+        "@vueuse/metadata": "14.2.1",
+        "@vueuse/shared": "14.2.1"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "vue": "^3.5.0"
+      }
+    },
+    "node_modules/@vueuse/metadata": {
+      "version": "14.2.1",
+      "resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-14.2.1.tgz",
+      "integrity": "sha512-1ButlVtj5Sb/HDtIy1HFr1VqCP4G6Ypqt5MAo0lCgjokrk2mvQKsK2uuy0vqu/Ks+sHfuHo0B9Y9jn9xKdjZsw==",
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/@vueuse/shared": {
+      "version": "14.2.1",
+      "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-14.2.1.tgz",
+      "integrity": "sha512-shTJncjV9JTI4oVNyF1FQonetYAiTBd+Qj7cY89SWbXSkx7gyhrgtEdF2ZAVWS1S3SHlaROO6F2IesJxQEkZBw==",
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "vue": "^3.5.0"
+      }
+    },
     "node_modules/@webassemblyjs/ast": {
       "version": "1.14.1",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.14.1.tgz",
@@ -6693,6 +6813,15 @@
         "node": ">=10"
       }
     },
+    "node_modules/date-fns": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-4.1.0.tgz",
+      "integrity": "sha512-Ukq0owbQXxa/U3EGtsdVBkR1w7KOQ5gIBqdH2hkvknzZPYvBxb/aa6E8L7tmjFtkwZBu3UXBbjIgPo/Ez4xaNg==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/kossnocorp"
+      }
+    },
     "node_modules/debounce": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/debounce/-/debounce-1.2.1.tgz",
diff --git a/package.json b/package.json
index c55259920..2db948652 100644
--- a/package.json
+++ b/package.json
@@ -14,6 +14,7 @@
   "dependencies": {
     "@adyen/adyen-web": "^6.27.0",
     "@iframe-resizer/child": "^5.3.3",
+    "@vuepic/vue-datepicker": "^12.1.0",
     "axios": "^0.30.2",
     "bootstrap": "^5.3.3",
     "core-js": "^3.38.1",
diff --git a/src/constants/error-messages.js b/src/constants/error-messages.js
index 8b8c98881..6899c2aec 100644
--- a/src/constants/error-messages.js
+++ b/src/constants/error-messages.js
@@ -38,6 +38,12 @@ const errorMessages = {
     STYLE_REQUIRED: "Please select your vehicle style",
     PROMO_REQUIRED: "Please enter a promo code",
     INSURANCE_COMPANY_REQUIRED: "Please select an insurance company",
+    INSURANCE_COMPANY_NAME_REQUIRED: "Please enter your insurance company name",
+    POLICY_NUMBER_REQUIRED: "Please enter your policy number",
+    DATE_OF_LOSS_REQUIRED: "Please enter your date of damage",
+    DAMAGE_TYPES_REQUIRED: "How damage occurred is required",
+    ZIP_CODE_REQUIRED: "Please enter your ZIP code",
+    ZIP_CODE_FORMAT: "Zip must be 5 digits",
 };
 
 export { errorMessages };
diff --git a/src/constants/store-actions.js b/src/constants/store-actions.js
index 0246654a5..702f7c737 100644
--- a/src/constants/store-actions.js
+++ b/src/constants/store-actions.js
@@ -109,6 +109,8 @@ const storeActions = {
     SAVE_VAPS: "saveVaps",
     SAVE_ACTIVE_AND_OR_INACTIVE_PROMOS: "saveActiveAndOrInactivePromos",
     SAVE_CUSTOMER_DETAILS: "saveCustomerDetails",
+    SAVE_INSURANCE_DETAILS: "saveInsuranceDetails",
+    SAVE_DAMAGE_DETAILS: "saveDamageDetails",
     SAVE_SERVICE_LOCATION_TECH_NOTES: "saveServiceLocationTechNotes",
     SAVE_CCTOKEN: "saveCCToken",
     SAVE_PAYPAL_TOKEN: "savePaypalToken",
diff --git a/src/constants/store-mutations.js b/src/constants/store-mutations.js
index f3abae544..c43e737d3 100644
--- a/src/constants/store-mutations.js
+++ b/src/constants/store-mutations.js
@@ -51,6 +51,10 @@ const storeMutations = {
     UPDATE_CUSTOMER_DETAILS: "updateCustomerDetails",
     UPDATE_CUSTOMER_WAITLIST_REQUESTED: "updateCustomerWaitListRequested",
 
+    // INSURANCE / DAMAGE MUTATIONS
+    UPDATE_INSURANCE_DETAILS: "updateInsuranceDetails",
+    UPDATE_DAMAGE_DETAILS: "updateDamageDetails",
+
     // ORDER MUTATIONS
     UPDATE_REFERRAL_NUMBER: "updateReferralNumber",
     UPDATE_REFERRAL_SEQUENCE_NUMBER: "updateReferralSequenceNumber",
diff --git a/src/digital-components/date-picker-popup/date-picker-popup.vue b/src/digital-components/date-picker-popup/date-picker-popup.vue
new file mode 100644
index 000000000..a1e30459a
--- /dev/null
+++ b/src/digital-components/date-picker-popup/date-picker-popup.vue
@@ -0,0 +1,274 @@
+<template>
+    <div
+        class="date-picker-popup"
+        :class="[
+            (errors && errors.length) || hasError ? 'has-error' : '',
+        ]">
+        <label
+            v-if="displayQuestionText"
+            :for="inputId"
+            :aria-label="questionText"
+            class="form-label"
+            :class="[
+                questionAlignment === 'center' ? 'text-center w-100 mb-5' : '',
+                labelBold ? 'label-bold' : '',
+            ]"
+            v-html="questionText"></label>
+        <div class="input-wrapper">
+            <VueDatePicker
+                v-model="value"
+                :menu-id="`${inputId}-menu`"
+                :input-class-name="inputClassName"
+                :placeholder="placeholderText"
+                :formats="formatsConfig"
+                :model-type="modelType"
+                :time-config="timeConfig"
+                :input-attrs="inputAttrs"
+                :disabled="isDisabled"
+                :min-date="minDate"
+                :max-date="maxDate"
+                :auto-apply="autoApply"
+                :text-input="textInput"
+                :teleport="true"
+                :aria-labels="{ input: questionText }"
+                @update:model-value="onDateChange"
+                @blur="onPickerClosed"
+                @closed="onPickerClosed" />
+        </div>
+        <div v-show="errorMessage" class="row form-test-error">
+            <span
+                class="d-inline-flex small mt-1"
+                aria-atomic="true"
+                aria-live="polite"
+                :class="[centerErrorMessage ? 'center-error-message' : '']">
+                {{ errorMessage }}
+            </span>
+        </div>
+    </div>
+</template>
+
+<script>
+import { useField } from "vee-validate";
+import { VueDatePicker } from "@vuepic/vue-datepicker";
+import "@vuepic/vue-datepicker/dist/main.css";
+import { v4 as uuidv4 } from "uuid";
+
+export default {
+    name: "date-picker-popup",
+    components: {
+        VueDatePicker,
+    },
+    props: {
+        customInputId: String,
+        modelValue: [String, Date, Object],
+        cmsWidgetName: String,
+        validationRules: String,
+        isRequired: Boolean,
+        isDisabled: Boolean,
+        hasError: Boolean,
+        displayQuestionText: {
+            type: Boolean,
+            default: true,
+        },
+        placeholderText: {
+            type: String,
+            default: "",
+        },
+        // Display format shown in the input
+        format: {
+            type: String,
+            default: "MM/dd/yyyy",
+        },
+        // Format used for the v-model value emitted to parent
+        modelType: {
+            type: String,
+            default: "MM/dd/yyyy",
+        },
+        enableTimePicker: {
+            type: Boolean,
+            default: false,
+        },
+        minDate: {
+            type: [String, Date],
+            default: null,
+        },
+        maxDate: {
+            type: [String, Date],
+            default: null,
+        },
+        autoApply: {
+            type: Boolean,
+            default: true,
+        },
+        clearable: {
+            type: Boolean,
+            default: true,
+        },
+        textInput: {
+            type: Boolean,
+            default: false,
+        },
+        questionAlignment: String,
+        labelBold: {
+            type: Boolean,
+            default: false,
+        },
+        centerErrorMessage: Boolean,
+        addOptionalText: {
+            type: Boolean,
+            default: false,
+        },
+    },
+    emits: ["update:modelValue", "change", "blur"],
+    setup(props) {
+        const uuid = uuidv4();
+        const inputId = !props.customInputId ? `date-picker-${uuid}` : props.customInputId;
+
+        const initialValue = props.modelValue ?? "";
+
+        const fieldOptions = {
+            type: "text",
+            value: initialValue,
+            initialValue: initialValue,
+        };
+
+        const { errorMessage, handleBlur, handleChange, meta, validate, errors } = useField(
+            inputId,
+            props.validationRules,
+            fieldOptions
+        );
+
+        return {
+            inputId,
+            errorMessage,
+            handleBlur,
+            handleChange,
+            validate,
+            meta,
+            errors,
+        };
+    },
+    computed: {
+        questionText() {
+            if (!this.cmsWidgetName) return "";
+            const text = this.getCmsContent
+                ? this.getCmsContent(this.cmsWidgetName, "BodyText")
+                : "";
+            return this.addOptionalText ? `${text} (optional)` : text;
+        },
+        value: {
+            get() {
+                return this.modelValue;
+            },
+            set(newValue) {
+                this.$emit("update:modelValue", newValue);
+            },
+        },
+        inputClassName() {
+            return [
+                "form-control",
+                (this.errors && this.errors.length) || this.hasError ? "is-invalid" : "",
+            ]
+                .filter(Boolean)
+                .join(" ");
+        },
+        formatsConfig() {
+            return {
+                input: this.format,
+                preview: this.format,
+            };
+        },
+        timeConfig() {
+            return {
+                enableTimePicker: this.enableTimePicker,
+            };
+        },
+        inputAttrs() {
+            return {
+                id: this.inputId,
+                name: this.inputId,
+                clearable: this.clearable,
+            };
+        },
+    },
+    methods: {
+        onDateChange(newValue) {
+            this.handleChange(newValue);
+            this.$emit("change", newValue);
+        },
+        onPickerClosed() {
+            this.handleBlur();
+            // handleChange updates the field value AND triggers reactive validation,
+            // populating errors/errorMessage. Pass the current modelValue (may be empty).
+            this.handleChange(this.modelValue ?? "");
+            this.$emit("blur");
+        },
+    },
+    watch: {
+        modelValue(newValue) {
+            this.handleChange(newValue);
+        },
+    },
+};
+</script>
+
+<style lang="scss">
+.date-picker-popup {
+    label {
+        font-family: UrbanistSemibold;
+        color: $black;
+    }
+    .label-bold {
+        font-weight: 600;
+    }
+    .form-label {
+        margin-bottom: 0.25rem;
+    }
+    .center-error-message {
+        justify-content: center !important;
+    }
+
+    // Match the look-and-feel of textbox-question's input
+    .dp__input {
+        border: 1px solid $gray-500;
+        border-radius: 0.5rem;
+        min-height: 3rem;
+        padding: 0.75rem 1rem 0.75rem 2.5rem;
+        box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.2);
+        font-family: inherit;
+
+        @include media-breakpoint-up(md) {
+            padding: 1rem 1rem 1rem 2.5rem;
+            min-height: 3.5rem;
+        }
+
+        &::placeholder {
+            color: $gray-500;
+        }
+
+        &:focus {
+            box-shadow: 0 0 0 2.5px $blue;
+            border-color: $gray-500;
+        }
+
+        &:hover {
+            border: 1px solid $gray-500;
+            box-shadow: 0 0 0 4px $blue-300;
+        }
+
+        &:disabled,
+        &.dp__disabled {
+            background-color: $gray-100;
+        }
+    }
+
+    &.has-error .dp__input {
+        border-color: $danger;
+    }
+}
+
+.dp__today {
+    background-color: #ffc966 !important;
+    color: $black;
+}
+</style>
diff --git a/src/layouts/coverage-statement/coverage-statement.vue b/src/layouts/coverage-statement/coverage-statement.vue
index 081424f7c..adc35ba37 100644
--- a/src/layouts/coverage-statement/coverage-statement.vue
+++ b/src/layouts/coverage-statement/coverage-statement.vue
@@ -25,7 +25,7 @@ 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 store from "@/store";
 import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
 import { settleAllPromises } from "@/helpers/layout-helper";
 
@@ -33,7 +33,10 @@ export default {
     name: "coverage-statement",
     mixins: [],
     data() {
-        return {};
+        return {
+            isClaimAndCoverage: this.isClaimAndCoverageFromStore(),
+            isRecalibrationOnOrder: this.isRecalibrationOnOrderFromStore(),
+        };
     },
     components: {
         Form,
@@ -58,7 +61,29 @@ export default {
     },
 
     methods: {
+        isClaimAndCoverageFromStore() {
+            return store.getters.order?.payment?.isClaimAndCoverage;
+        },
+        isRecalibrationOnOrderFromStore() {
+            return store.getters.isRecalibrationOnOrder;
+        },
         backButtonAction() {
+            if (!this.isClaimAndCoverage) {
+                this.$router.navigateWithoutSaving(
+                    this.navigationScenarios.CLICKED_BACK_NON_CLAIM_AND_COVERAGE,
+                    this.pageName
+                );
+                return;
+            }
+
+            if (this.isRecalibrationOnOrder) {
+                this.$router.navigateWithoutSaving(
+                    this.navigationScenarios.CLICKED_BACK_RECALIBRATION_INFO,
+                    this.pageName
+                );
+                return;
+            }
+
             this.$router.navigateWithoutSaving(
                 this.navigationScenarios.CLICKED_BACK,
                 this.pageName
diff --git a/src/layouts/insurance-details/insurance-details.vue b/src/layouts/insurance-details/insurance-details.vue
index 47db3b136..4f938c6e3 100644
--- a/src/layouts/insurance-details/insurance-details.vue
+++ b/src/layouts/insurance-details/insurance-details.vue
@@ -1,13 +1,105 @@
 <template>
     <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
+        <loadingModal ref="loadingModal" />
         <funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
         <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.
-                    -->
+                    <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" class="mt-4 mb-5" alignLeft />
+                    <textboxQuestion
+                        isRequired
+                        isDisabled
+                        class="mb-4 locked-input"
+                        cmsWidgetName="InsuranceCompanyNameWidget"
+                        v-model="insuranceCompanyName"
+                        ref="insuranceCompanyName"
+                        customInputId="insuranceCompanyName"
+                        validationRules="insurance-company-name-required" />
+
+                    <textboxQuestion
+                        isRequired
+                        class="mb-4"
+                        cmsWidgetName="PolicyNumberWidget"
+                        v-model="policyNumber"
+                        inputId="policyNumber"
+                        placeholderText="Type your policy number"
+                        validationRules="policy-number-required" />
+
+                    <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"
+                        :clearable="false" />
+
+                    <dropdownQuestion
+                        isRequired
+                        :questionText="damageTypesQuestionText"
+                        class="mb-4"
+                        v-model="damageCause"
+                        cmsWidgetName="DamageTypesWidget"
+                        customDropdownId="damageTypes"
+                        :options="damageTypesOptions"
+                        :valueAsKey="true"
+                        validationRules="damage-types-required"
+                        :labelBold="true" />
+
+                    <hr class="my-4" />
+
+                    <textBlock
+                        cmsWidgetName="AddressSectionWidget"
+                        class="dark"
+                        typeStyle="h5" />
+
+                    <textboxQuestion
+                        isRequired
+                        class="mb-4"
+                        cmsWidgetName="StreetAddressWidget"
+                        v-model="streetAddress"
+                        inputId="streetAddress"
+                        validationRules="street-address-required" />                        
+                        
+                    <textboxQuestion
+                        isRequired
+                        class="mb-4"
+                        cmsWidgetName="ApartmentWidget"
+                        v-model="apartment"
+                        inputId="apartment" />
+
+                    <textboxQuestion
+                        isRequired
+                        class="mb-4"
+                        cmsWidgetName="CityWidget"
+                        v-model="city"
+                        inputId="city"
+                        validationRules="city-required" />                        
+
+                    <dropdownQuestion
+                        class="mb-4"
+                        customDropdownId="policyState"
+                        cmsWidgetName="StateQuestionWidget"
+                        v-model="policyState"
+                        ref="policyState"
+                        :options="stateOptions"
+                        validationRules="state-required"
+                        autocomplete="address-level1"
+                        :labelBold="true" />
+
+                    <textboxQuestion
+                        isRequired
+                        class="mb-4"
+                        cmsWidgetName="ZipQuestionWidget"
+                        v-model="policyZip"
+                        inputId="policyZip"
+                        maxLength="5"
+                        validationRules="zip-code-required|zip-code-format" />                            
+
                     <navbar
                         cmsWidgetName="FunnelFooterWidget"
                         ref="navbar"
@@ -24,22 +116,55 @@
 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 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 textBlock from "@/digital-components/text-block/text-block";
+import { Form, defineRule } from "vee-validate";
+import store from "@/store";
+import { errorMessages } from "@/constants/error-messages";
+import { required } from "@/helpers/validation-rules";
 import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
 import { settleAllPromises } from "@/helpers/layout-helper";
+import { stateOptions } from "@/constants/state-options";
+import { regex } from "@/helpers/validation-rules";
+
+// DEFINE VALIDATION RULES
+defineRule("insurance-company-name-required", required(errorMessages.INSURANCE_COMPANY_NAME_REQUIRED));
+defineRule("policy-number-required", required(errorMessages.POLICY_NUMBER_REQUIRED));
+defineRule("date-of-loss-required", required(errorMessages.DATE_OF_LOSS_REQUIRED));
+defineRule("damage-types-required", required(errorMessages.DAMAGE_TYPES_REQUIRED));
+defineRule("street-address-required", required(errorMessages.STREET_ADDRESS_REQUIRED));
+defineRule("city-required", required(errorMessages.CITY_REQUIRED));
+defineRule("state-required", required(errorMessages.STATE_REQUIRED));
+defineRule("zip-code-required", required(errorMessages.ZIP_CODE_REQUIRED));
+defineRule("zip-code-format", regex(/(^\d{5}$)|(^\d{5}-\d{4}$)/, errorMessages.ZIP_CODE_FORMAT));
 
 export default {
     name: "insurance-details",
     mixins: [],
     data() {
-        return {};
+        return {
+            insuranceCompanyName: this.getInsuranceCompanyNameFromStore(),
+            policyNumber: this.getPolicyNumberFromStore(),
+            dateOfLoss: this.getDateOfLossFromStore(),
+            damageCause: this.getDamageCauseFromStore(),
+            streetAddress: this.getStreetAddressFromStore(),
+            apartment: this.getApartmentFromStore(),
+            city: this.getCityFromStore(),
+            policyState: this.getPolicyStateFromStore(),
+            policyZip: this.getPolicyZipFromStore(),
+        };
     },
     components: {
         Form,
         funnelHeader,
         navbar,
         funnelSubHeader,
+        textboxQuestion,
+        datePickerPopup,
+        dropdownQuestion,
+        textBlock,
     },
     // Ensure CMS content is fetched during route navigation without depending on `to`/`from`
     async beforeRouteEnter(to, from, next) {
@@ -57,7 +182,52 @@ export default {
         });
     },
 
+    computed: {
+        stateOptions() {
+            return stateOptions;
+        },
+        damageCauseQuestionText() {
+            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;
+        },
+    },
     methods: {
+        getInsuranceCompanyNameFromStore() {
+            return store.getters.order.policy.insuranceCompanyName;
+        },
+        getPolicyNumberFromStore() {
+            return store.getters.order.policy.policyNumber;
+        },
+        getDateOfLossFromStore() {
+            return store.getters.order.damage.dateOfLoss ?? "";
+        },
+        getDamageCauseFromStore() {
+            return store.getters.order.damage.damageCause ?? "";
+        },
+        getStreetAddressFromStore() {
+            return store.getters.order.policy.streetAddress ?? "";
+        },
+        getApartmentFromStore() {
+            return store.getters.order.policy.apartment ?? "";
+        },
+        getCityFromStore() {
+            return store.getters.order.policy.city ?? "";
+        },
+        getPolicyStateFromStore() {
+            return store.getters.order.policy.state ?? "";
+        },
+        getPolicyZipFromStore() {
+            return store.getters.order.policy.zipCode ?? "";
+        },
         backButtonAction() {
             this.$router.navigateWithoutSaving(
                 this.navigationScenarios.CLICKED_BACK,
@@ -65,7 +235,32 @@ export default {
             );
         },
         async forwardButtonAction() {
-            // Stub, for navigating forward via nav-bar
+            this.dispatchStoreAction(
+                this.storeActions.SAVE_INSURANCE_DETAILS,
+                {
+                    policyNumber: this.policyNumber,
+                    streetAddress: this.streetAddress,
+                    apartment: this.apartment,
+                    city: this.city,
+                    state: this.policyState,
+                    zipCode: this.policyZip,
+                },
+                false
+            );
+
+            this.dispatchStoreAction(
+                this.storeActions.SAVE_DAMAGE_DETAILS,
+                {
+                    dateOfLoss: this.dateOfLoss,
+                    damageCause: this.damageCause,
+                },
+                false
+            );
+
+            this.$router.navigateWithSaving(
+                this.navigationScenarios.CLICKED_FORWARD,
+                this.pageName
+            );
         },
         arePagePrerequisitesValid() {
             return true;
@@ -73,3 +268,27 @@ export default {
     },
 };
 </script>
+
+<style lang="scss" scoped>
+.locked-input {
+    :deep(.input-wrapper) {
+        &::after {
+            content: "";
+            position: absolute;
+            top: 50%;
+            right: 1rem;
+            transform: translateY(-50%);
+            width: 1rem;
+            height: 1rem;
+            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%236c757d'%3E%3Cpath d='M8 1a3.5 3.5 0 0 0-3.5 3.5V7H4a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V8a1 1 0 0 0-1-1h-.5V4.5A3.5 3.5 0 0 0 8 1zm-2 6V4.5a2 2 0 1 1 4 0V7H6z'/%3E%3C/svg%3E");
+            background-repeat: no-repeat;
+            background-position: center;
+            background-size: contain;
+            pointer-events: none;
+        }
+        .form-control {
+            padding-right: 2.5rem;
+        }
+    }
+}
+</style>
diff --git a/src/router/constants/navigation-scenarios.js b/src/router/constants/navigation-scenarios.js
index 6fe7df27a..fef66ddbb 100644
--- a/src/router/constants/navigation-scenarios.js
+++ b/src/router/constants/navigation-scenarios.js
@@ -39,6 +39,8 @@ const navigationScenarios = {
     CLICKED_FORWARD_WITH_MOLDING_QUESTIONS: "CLICKED_FORWARD_WITH_MOLDING_QUESTIONS",
     CLICKED_FORWARD_WITH_CAPABILITY_QUESTIONS: "CLICKED_FORWARD_WITH_CAPABILITY_QUESTIONS",
     CLICKED_FORWARD_WITH_NO_MORE_QUESTIONS: "CLICKED_FORWARD_WITH_NO_MORE_QUESTIONS",
+    CLICKED_BACK_NON_CLAIM_AND_COVERAGE: "CLICKED_BACK_NON_CLAIM_AND_COVERAGE",
+    CLICKED_BACK_RECALIBRATION_INFO: "CLICKED_BACK_RECALIBRATION_INFO",
     CLICKED_BACK_WITH_PART_QUESTIONS: "CLICKED_BACK_WITH_PART_QUESTIONS",
     CLICKED_BACK_WITH_MULTIPLE_PARTS_TO_CHOOSE: "CLICKED_BACK_WITH_MULTIPLE_PARTS_TO_CHOOSE",
     CLICKED_BACK_WITH_MOLDING_QUESTIONS: "CLICKED_BACK_WITH_MOLDING_QUESTIONS",
diff --git a/src/router/constants/routing-table.js b/src/router/constants/routing-table.js
index 061d6603b..77876a096 100644
--- a/src/router/constants/routing-table.js
+++ b/src/router/constants/routing-table.js
@@ -538,8 +538,16 @@ const routingTable = function () {
             maps: [
                 {
                     scenario: navigationScenarios.CLICKED_BACK,
+                    destinationPageData: routeData.POLICY_INFO_SUBMITTED,
+                },
+                {
+                    scenario: navigationScenarios.CLICKED_BACK_RECALIBRATION_INFO,
                     destinationPageData: routeData.RECALIBRATION_INFO,
                 },
+                {
+                    scenario: navigationScenarios.CLICKED_BACK_NON_CLAIM_AND_COVERAGE,
+                    destinationPageData: routeData.INSURANCE_DETAILS,
+                },
                 {
                     scenario: navigationScenarios.CLICKED_FORWARD,
                     destinationPageData: routeData.SCHEDULE,
diff --git a/src/store/index.js b/src/store/index.js
index 47178b62d..a58200a96 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -174,6 +174,11 @@ const getDefaultState = () => {
                 additionalAuthFlag: null,
                 isNoComp: false,
                 insuranceCompanyName: null,
+                streetAddress: null,
+                apartment: null,
+                city: null,
+                state: null,
+                zipCode: null,
             },
             schedule: {
                 date: null,
@@ -335,6 +340,21 @@ export const mutations = {
         state.order.payment.accountName = accountName;
         state.order.policy.insuranceCompanyName = accountName;
     },
+    updateStreetAddress(state, streetAddress) {
+        state.order.policy.streetAddress = streetAddress;
+    },
+    updateApartment(state, apartment) {
+        state.order.policy.apartment = apartment;
+    },
+    updateCity(state, city) {
+        state.order.policy.city = city;
+    },
+    updateState(state, stateValue) {
+        state.order.policy.state = stateValue;
+    },
+    updateZipCode(state, zipCode) {
+        state.order.policy.zipCode = zipCode;
+    },
     updateIsClaimAndCoverage(state, isClaimAndCoverage) {
         state.order.payment.isClaimAndCoverage = isClaimAndCoverage;
     },
@@ -495,6 +515,22 @@ export const mutations = {
             state.order.customer.isSmsOptIn = customerDetails.isSmsOptIn;
         }
     },
+    updateInsuranceDetails(state, insuranceDetails) {
+        if (insuranceDetails) {
+            state.order.policy.policyNumber = insuranceDetails.policyNumber;
+            state.order.policy.streetAddress = insuranceDetails.streetAddress;
+            state.order.policy.apartment = insuranceDetails.apartment;
+            state.order.policy.city = insuranceDetails.city;
+            state.order.policy.state = insuranceDetails.state;
+            state.order.policy.zipCode = insuranceDetails.zipCode;
+        }
+    },
+    updateDamageDetails(state, damageDetails) {
+        if (damageDetails) {
+            state.order.damage.dateOfLoss = damageDetails.dateOfLoss;
+            state.order.damage.damageCause = damageDetails.damageCause;
+        }
+    },
 
     // applicationUser MUTATIONS
     updateSaveSessionPromise(state, saveSessionPromise) {
@@ -879,6 +915,11 @@ export const mutations = {
         state.order.policy.policyNumber = sessionInformation.order.policy?.policyNumber;
         state.order.policy.insuranceCompanyName =
             sessionInformation.order.policy?.insuranceCompanyName;
+        //state.order.policy.streetAddress = sessionInformation.order.policy?.streetAddress;
+        //state.order.policy.apartment = sessionInformation.order.policy?.apartment;
+        //state.order.policy.city = sessionInformation.order.policy?.city;
+        //state.order.policy.state = sessionInformation.order.policy?.state;
+        //state.order.policy.zipCode = sessionInformation.order.policy?.zipCode;
         state.order.policy.isNoComp =
             coverageTypeValue(sessionInformation?.order.insuranceCoverage.coverageType) ===
             coverageType.NOCOMP
@@ -3466,6 +3507,14 @@ export const actions = {
         context.commit(storeMutations.UPDATE_CUSTOMER_DETAILS, customerDetails);
     },
 
+    saveInsuranceDetails(context, insuranceDetails) {
+        context.commit(storeMutations.UPDATE_INSURANCE_DETAILS, insuranceDetails);
+    },
+
+    saveDamageDetails(context, damageDetails) {
+        context.commit(storeMutations.UPDATE_DAMAGE_DETAILS, damageDetails);
+    },
+
     saveServiceZipCodeInfo(context, serviceZipCodeInfo) {
         if (
             context.state.order.serviceLocation &&

From de3aed79fd6fc1634818401830ad65fa485f5f23 Mon Sep 17 00:00:00 2001
From: CarlNation <Carl.Nation@safelite.com>
Date: Thu, 30 Apr 2026 14:23:04 -0400
Subject: [PATCH 2/2] prettier

---
 .../date-picker-popup/date-picker-popup.vue   |  4 +--
 .../insurance-details/insurance-details.vue   | 25 +++++++++++--------
 2 files changed, 15 insertions(+), 14 deletions(-)

diff --git a/src/digital-components/date-picker-popup/date-picker-popup.vue b/src/digital-components/date-picker-popup/date-picker-popup.vue
index a1e30459a..3c666e775 100644
--- a/src/digital-components/date-picker-popup/date-picker-popup.vue
+++ b/src/digital-components/date-picker-popup/date-picker-popup.vue
@@ -1,9 +1,7 @@
 <template>
     <div
         class="date-picker-popup"
-        :class="[
-            (errors && errors.length) || hasError ? 'has-error' : '',
-        ]">
+        :class="[(errors && errors.length) || hasError ? 'has-error' : '']">
         <label
             v-if="displayQuestionText"
             :for="inputId"
diff --git a/src/layouts/insurance-details/insurance-details.vue b/src/layouts/insurance-details/insurance-details.vue
index 4f938c6e3..67670b9cc 100644
--- a/src/layouts/insurance-details/insurance-details.vue
+++ b/src/layouts/insurance-details/insurance-details.vue
@@ -5,7 +5,10 @@
         <div class="container">
             <div class="row">
                 <div class="col-12 col-md-10 col-lg-8 col-xl-7">
-                    <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" class="mt-4 mb-5" alignLeft />
+                    <funnelSubHeader
+                        cmsWidgetName="FunnelSubHeaderWidget"
+                        class="mt-4 mb-5"
+                        alignLeft />
                     <textboxQuestion
                         isRequired
                         isDisabled
@@ -52,10 +55,7 @@
 
                     <hr class="my-4" />
 
-                    <textBlock
-                        cmsWidgetName="AddressSectionWidget"
-                        class="dark"
-                        typeStyle="h5" />
+                    <textBlock cmsWidgetName="AddressSectionWidget" class="dark" typeStyle="h5" />
 
                     <textboxQuestion
                         isRequired
@@ -63,8 +63,8 @@
                         cmsWidgetName="StreetAddressWidget"
                         v-model="streetAddress"
                         inputId="streetAddress"
-                        validationRules="street-address-required" />                        
-                        
+                        validationRules="street-address-required" />
+
                     <textboxQuestion
                         isRequired
                         class="mb-4"
@@ -78,7 +78,7 @@
                         cmsWidgetName="CityWidget"
                         v-model="city"
                         inputId="city"
-                        validationRules="city-required" />                        
+                        validationRules="city-required" />
 
                     <dropdownQuestion
                         class="mb-4"
@@ -98,7 +98,7 @@
                         v-model="policyZip"
                         inputId="policyZip"
                         maxLength="5"
-                        validationRules="zip-code-required|zip-code-format" />                            
+                        validationRules="zip-code-required|zip-code-format" />
 
                     <navbar
                         cmsWidgetName="FunnelFooterWidget"
@@ -130,7 +130,10 @@ import { stateOptions } from "@/constants/state-options";
 import { regex } from "@/helpers/validation-rules";
 
 // DEFINE VALIDATION RULES
-defineRule("insurance-company-name-required", required(errorMessages.INSURANCE_COMPANY_NAME_REQUIRED));
+defineRule(
+    "insurance-company-name-required",
+    required(errorMessages.INSURANCE_COMPANY_NAME_REQUIRED)
+);
 defineRule("policy-number-required", required(errorMessages.POLICY_NUMBER_REQUIRED));
 defineRule("date-of-loss-required", required(errorMessages.DATE_OF_LOSS_REQUIRED));
 defineRule("damage-types-required", required(errorMessages.DAMAGE_TYPES_REQUIRED));
@@ -196,7 +199,7 @@ export default {
             for (const answer of answers) {
                 options[answer.Name] = answer.Text;
             }
-            
+
             return options;
         },
     },