Merge branch 'develop' into feature/digital/SSR-448

src/constants/error-messages.js

@@ -37,7 +37,12 @@ const errorMessages = {
 
     POLICYHOLDER_FIRST_NAME_REQUIRED: "Please enter the policyholder first name",
     POLICYHOLDER_LAST_NAME_REQUIRED: "Please enter the policyholder last name",
-    ACKNOWLEDGEMENT_REQUIRED: "You must agree to the terms to continue"
+    ACKNOWLEDGEMENT_REQUIRED: "You must agree to the terms to continue",
+
+    YEAR_REQUIRED: "Please select your vehicle year",
+    MAKE_REQUIRED: "Please select your vehicle make",
+    MODEL_REQUIRED: "Please select your vehicle model",
+    STYLE_REQUIRED: "Please select your vehicle style"
 
 };
 

src/layouts/entry-page/entry-page.vue

@@ -147,6 +147,11 @@
                             this.mainStore.issConfig.disabledFields.policyNumber = true;
                             break;
 
+                        case "policyzipcode":
+                            this.mainStore.order.policy.policyZipCode = value;
+                            this.mainStore.issConfig.disabledFields.policyZipCode = true;
+                            break;
+
                         case "lossdate":
                             // NOTE: May need some date parsing logic in here depending on client.
                             this.mainStore.order.policy.dateOfLoss = value;
@@ -167,7 +172,7 @@
                             break;
                     }
                 }
-            },
+            }
         },
         computed:{ 
         },

src/layouts/service-location/service-location.vue

@@ -3,7 +3,7 @@
         <div class="page-container-grouped-styles">
             <div class="fade-on-route-transition position-relative">
                 <siteHeader cmsWidgetName="SiteHeaderWidget" />
-                <siteSubHeader cmsWidgetName="SiteSubHeaderWidget" id="sub-header" />
+                <siteSubHeader cmsWidgetName="SiteSubHeaderWidget" id="sub-header" class="mt-5" />
                 <div class="select-car">
                     <div class="container-fluid pb-2">
                         <div class="row px-3">

src/layouts/vehicle-damage/vehicle-damage.vue

@@ -95,9 +95,12 @@ export default {
     name: "vehicle-damage",
     mixins: [BaseFormMixin],
     async beforeRouteEnter(to, from, next) {
+
+        const store = useMainStore();
+
         // Call APIs
         const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
-        const damageOptionsPromise = useMainStore().getDamageOptions(useMainStore().order.vehicle.carId);
+        const damageOptionsPromise = store.getDamageOptions(store.order.vehicle.carId);
 
         // Settle promises and get results
         const promiseResultMap = [

src/layouts/vehicle-parts/vehicle-parts.vue

@@ -108,7 +108,7 @@ data() {
 },
 computed: {
     isForwardActionDisabled() {
-        return this.selectedGlassPartNumbers.length !== this.PartsFromApi.partsOrQuestions.length
+        return this.selectedGlassPartNumbers?.length !== this.PartsFromApi.partsOrQuestions?.length
     },
     selectedGlassPartNumbers() {
         // Compile all selected parts from the page.
@@ -124,7 +124,7 @@ computed: {
         const partsData = this.PartsFromApi;
 
         // Map API result data, to vehicle-parts data structure
-        const mappedData = partsData.partsOrQuestions.map((g) => {
+        const mappedData = partsData.partsOrQuestions?.map((g) => {
             return {
                 glassName: g.glassName,
                 glassLocation: g.glassLocation,

src/layouts/vehicle-selection/make-question/make-question.vue

@@ -0,0 +1,76 @@
+<template>
+    <dropdownQuestion
+    cmsWidgetName="VehicleMakeQuestion"
+    ref="makeQuestion"
+    :options="makeOptions"
+    disableAutoFill
+    placeHolderText="Select an option"
+    validationRules="make-required"
+    inputId="makeQuestionField"
+    v-model="selectedValue"
+    />
+  </template>
+  
+  <script>
+
+  import dropdownQuestion from '@/digital-components/dropdown-question/dropdown-question.vue';
+
+  import { errorMessages } from "@/constants/error-messages";
+import { required } from "@/helpers/validation-rules";
+import { defineRule } from "vee-validate";
+
+defineRule("make-required", required(errorMessages.MAKE_REQUIRED));
+  
+  export default {
+    name: "make-question",
+    data() {
+      return {
+        values: [],
+      };
+    },
+    props: {
+      modelValue: String,
+      cmsWidgetName: String,
+      validationRules: String,
+      updateValues: Function,
+    },
+    components: {
+    dropdownQuestion
+},
+    computed: {
+      questionText(){
+        return this.getCmsContent(this.cmsWidgetName, 'QuestionText');
+      },
+      selectedValue: {
+        get: function() {    
+          return this.modelValue;
+        },
+        set: function(newValue) {
+          this.$emit("update:modelValue",newValue);
+        }
+      },
+       makeOptions() {
+             const makeAnswers = this.values;
+             const makeAnswersObj ={};
+             if(makeAnswers)
+             {
+                for (let answer of Object.values(makeAnswers)) {
+                    if (answer) {
+                         makeAnswersObj[answer] = answer;
+                     }
+                 }
+             }
+             return makeAnswersObj
+         },
+    },
+    methods: {
+      async getNewValues() {
+        const results = await this.updateValues();
+        this.values = results?.data;
+      },
+      initializeComponent(initialData) {
+        this.values = initialData;
+      },
+    },
+  };
+  </script>

src/layouts/vehicle-selection/model-question/model-question.vue

@@ -0,0 +1,77 @@
+<template>
+    <dropdownQuestion
+    cmsWidgetName="VehicleModelQuestion"
+    ref="modelQuestion"
+    :options="modelOptions"
+    disableAutoFill
+    placeHolderText="Select an option"
+    validationRules="model-required"
+    inputId="modelQuestionField"
+    v-model="selectedValue"
+    />
+  </template>
+  
+  <script>
+
+  import dropdownQuestion from '@/digital-components/dropdown-question/dropdown-question.vue';
+
+  import { errorMessages } from "@/constants/error-messages";
+import { required } from "@/helpers/validation-rules";
+import { defineRule } from "vee-validate";
+
+defineRule("model-required", required(errorMessages.MODEL_REQUIRED));
+
+  
+  export default {
+    name: "model-question",
+    data() {
+      return {
+        values: Array,
+      };
+    },
+    props: {
+      modelValue: String,
+      cmsWidgetName: String,
+      validationRules: String,
+      updateValues: Function,
+    },
+    components: {
+    dropdownQuestion
+},
+    computed: {
+      questionText(){
+        return this.getCmsContent(this.cmsWidgetName, 'QuestionText');
+      },
+      modelOptions() {
+            const modelAnswers = this.values;
+            const modelAnswersObj ={};
+            if(modelAnswers)
+            {
+                for (let answer of Object.values(modelAnswers)) {
+                    if (answer) {
+                        modelAnswersObj[answer] = answer;
+                    }
+                }
+            }
+            return modelAnswersObj
+        },
+      selectedValue: {
+        get: function() {
+          return this.modelValue
+        },
+        set: function(newValue) {
+          this.$emit("update:modelValue", newValue);
+        }
+      }
+    },
+    methods: {
+      async getNewValues() {
+        const results = await this.updateValues();
+        this.values = results?.data;
+      },
+      initializeComponent(initialData) {
+        this.values = initialData;
+      },
+    },
+  };
+  </script>

src/layouts/vehicle-selection/style-question/style-question.vue

@@ -0,0 +1,76 @@
+<template>
+    <dropdownQuestion
+    cmsWidgetName="VehicleStyleQuestion"
+    ref="styleQuestion"
+    :options="styleOptions"
+    disableAutoFill
+    placeHolderText="Select an option"
+    validationRules="style-required"
+    inputId="styleQuestionField"
+    v-model="selectedValue"
+    />
+  </template>
+  
+  <script>
+
+  import dropdownQuestion from '@/digital-components/dropdown-question/dropdown-question.vue';
+  import { errorMessages } from "@/constants/error-messages";
+import { required } from "@/helpers/validation-rules";
+import { defineRule } from "vee-validate";
+
+defineRule("style-required", required(errorMessages.STYLE_REQUIRED));
+
+  
+  export default {
+    name: "style-question",
+    data() {
+      return {
+        values: [],
+      };
+    },
+    props: {
+      modelValue: String,
+      cmsWidgetName: String,
+      validationRules: String,
+      updateValues: Function,
+    },
+    components: {
+    dropdownQuestion
+},
+    computed: {
+      questionText(){
+        return this.getCmsContent(this.cmsWidgetName, 'QuestionText');
+      },
+      styleOptions() {
+            const styleAnswers = this.values;
+            const styleAnswersObj ={};
+            if(styleAnswers)
+            {
+                for (let answer of Object.values(styleAnswers)) {
+                    if (answer) {
+                        styleAnswersObj[answer] = answer;
+                    }
+                }
+            }
+            return styleAnswersObj
+        },
+      selectedValue: {
+        get: function() {
+          return this.modelValue
+        },
+        set: function(newValue) {
+          this.$emit("update:modelValue", newValue);
+        }
+      }
+    },
+    methods: {
+      async getNewValues() {
+        const results = await this.updateValues();
+        this.values = results?.data;
+      },
+      initializeComponent(initialData) {
+        this.values = initialData;
+      },
+    },
+  };
+  </script>

src/layouts/vehicle-selection/vehicle-selection.vue

@@ -0,0 +1,183 @@
+<template>
+    <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm"  v-slot="{ meta }" >  
+   <div class="page-container-grouped-styles position-relative">
+       <div class="fade-on-route-transition position-relative">
+           <siteHeader cmsWidgetName="SiteHeaderWidget" />
+           <div class="select-car">
+               <div class="container-fluid pb-2">
+                   <div class="row">
+                       <div class="col">
+                           <div class="select-car-form rounded">
+                               <siteSubHeader cmsWidgetName="SiteSubHeaderWidget" class="subheader" />
+                               <yearQuestion class="px-4 mb-2 mt-4" v-model="selectedYear" ref="yearQuestion" />
+                               <makeQuestion class="px-4 mb-2 mt-4" v-model="selectedMake" :updateValues="updateMakeValues" ref="makeQuestion"/>
+                               <modelQuestion v-model="selectedModel" :updateValues="updateModelValues"  ref="modelQuestion" class="px-4 mb-2 mt-4"/>
+                               <styleQuestion v-model="selectedStyle" :updateValues="updateStyleValues" ref="styleQuestion" class="px-4 mb-2 mt-4"/>
+                              <vehicleBanner cmsWidgetName="VehicleBannerWidget" :displayGenericVehicleImage="true" class="mt-2 mb-3" />
+                               <siteFooter
+                                 cmsWidgetName="SiteFooterWidget"
+                                 @ForwardClicked="forwardButtonAction"
+                                 :isForwardActionDisabled="!meta.valid"
+                                 @back-clicked="backButtonAction"
+                                 ref="siteFooter"
+                                 />
+                           </div>
+                       </div>
+                   </div>
+               </div>
+           </div>
+       </div>
+   </div>
+</Form>
+</template>
+
+<script>
+// Components
+import siteHeader from "@/iss-components/site-header/site-header";
+import siteFooter from "@/iss-components/site-footer/site-footer";
+import siteSubHeader from "@/iss-components/site-sub-header/site-sub-header";
+import vehicleBanner from "@/iss-components/vehicle-banner/vehicle-banner";
+import yearQuestion from "@/layouts/vehicle-selection/year-question/year-question";
+import makeQuestion from "@/layouts/vehicle-selection/make-question/make-question";
+import modelQuestion from "@/layouts/vehicle-selection/model-question/model-question";
+import styleQuestion from "@/layouts/vehicle-selection/style-question/style-question";
+
+// Supporting files
+import BaseFormMixin from '@/mixins/base-form-mixin.js';
+import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
+import { settleAllPromises } from "@/helpers/layout-helper";
+import {Form} from "vee-validate";
+
+export default {
+   name: "vehicle-selection",
+   mixins: [BaseFormMixin],
+   data() {
+       return {
+           selectedYear: null,
+           selectedMake: null,
+           selectedModel: null,
+           selectedStyle: null,
+           years: []
+       };
+   },
+
+   async beforeRouteEnter(to, from, next) {
+       // Call APIs
+       const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
+       const yearQuestionInitialDataPromise = yearQuestion.methods.loadInitialData();
+       const makeQuestionInitialDataPromise = makeQuestion.methods.getNewValues();
+        const modelQuestionInitialDataPromise = modelQuestion.methods.getNewValues();
+       const styleQuestionInitialDataPromise = styleQuestion.methods.getNewValues();
+
+       // Settle promises and get results
+       const promiseResultMap = [
+           {
+               resultKey: "cmsContent",
+               promise: cmsContentPromise,
+           },
+           {
+               resultKey: "yearQuestionInitialData",
+               promise: yearQuestionInitialDataPromise,
+           },
+           {
+               resultKey: "makeQuestionInitialData",
+               promise: makeQuestionInitialDataPromise,
+           },
+           {
+               resultKey: "modelQuestionInitialData",
+               promise: modelQuestionInitialDataPromise,
+           },
+           {
+               resultKey: "styleQuestionInitialData",
+               promise: styleQuestionInitialDataPromise,
+           },
+
+       ];
+
+       let resultMap = await settleAllPromises(promiseResultMap);
+
+       // Call the "next" function to complete the transition to this page.
+       next((vm) => {
+        vm.years = resultMap.yearQuestionInitialData;
+           vm.setCmsContent(resultMap.cmsContent);
+           vm.$refs.yearQuestion.initializeComponent(
+               resultMap.yearQuestionInitialData
+           );
+           vm.$refs.makeQuestion.initializeComponent(
+               resultMap.makeQuestionInitialData
+           );
+       
+           vm.$refs.modelQuestion.initializeComponent(
+               resultMap.modelQuestionInitialData
+           );
+           vm.$refs.styleQuestion.initializeComponent(
+               resultMap.styleQuestionInitialData
+               );
+    });
+      
+  },
+   watch: {
+       selectedYear(yearIndex) {
+           const parsedYearIndex = parseInt(yearIndex);
+           this.mainStore.updateVehicleYear( this.years[parsedYearIndex] );
+
+           this.$refs["makeQuestion"].getNewValues();
+
+       },
+       selectedMake(make) {
+           this.mainStore.updateVehicleMake( make );
+           this.$refs["modelQuestion"].getNewValues();           
+       },
+       selectedModel(model) {
+           this.mainStore.updateVehicleModel( model );
+           this.$refs["styleQuestion"].getNewValues(); 
+       },
+       selectedStyle(style) {
+           this.mainStore.updateVehicleStyle( style );
+       },
+   },
+
+   methods: {
+       arePagePrerequisitesValid() {
+
+           return true;
+       },
+       backButtonAction() {
+           this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
+       },
+       async forwardButtonAction() {
+         return this.navigateForward();
+     },
+
+     navigateForward() {
+        this.mainStore.setVehicle().then(() => {
+                this.$router.navigate(
+                    this.navigationScenarios.CLICKED_FORWARD,
+                    this.$route
+                );
+            });
+     },
+     async updateMakeValues() {
+        return await this.mainStore.getVehicleMakes();
+     },
+     async updateModelValues() {
+        return await this.mainStore.getVehicleModels();
+     },
+     async updateStyleValues() {
+        return await this.mainStore.getVehicleStyles();
+     }
+   },
+
+   components: {
+       yearQuestion,
+       makeQuestion,
+       modelQuestion,
+       siteHeader,
+       siteSubHeader,
+       vehicleBanner,
+       siteFooter,
+       Form,
+       styleQuestion,
+   },
+};
+</script>

src/layouts/vehicle-selection/year-question/year-question.vue

@@ -0,0 +1,63 @@
+<template>
+    <dropdownQuestion
+    cmsWidgetName="VehicleYearQuestion"
+    ref="yearQuestion"
+    :options="years"
+    disableAutoFill
+    inputId="yearQuestionField"
+    placeHolderText="Select an option"
+    validationRules="year-required"
+    v-model="selectedValue"
+    />
+  </template>
+  
+  <script>
+
+  import { useMainStore } from '@/store';
+  import dropdownQuestion from '@/digital-components/dropdown-question/dropdown-question.vue';
+
+  import { errorMessages } from "@/constants/error-messages";
+import { required } from "@/helpers/validation-rules";
+import { defineRule } from "vee-validate";
+
+defineRule("year-required", required(errorMessages.YEAR_REQUIRED));
+
+
+  
+  export default {
+    name: "year-question",
+    data() {
+      return {
+        years : Array,
+      };
+    },
+    props: {
+      modelValue: Number,
+      cmsWidgetName: String,
+    },
+    components: {
+    dropdownQuestion
+},
+    computed: {
+      questionText(){
+        return this.getCmsContent(this.cmsWidgetName, 'QuestionText');
+      },
+      selectedValue: {
+        get: function() {
+          return this.modelValue;
+        },
+        set: function(newValue) {
+          this.$emit("update:modelValue",newValue);
+        },
+      }
+    },
+    methods: {
+      loadInitialData() {
+        return useMainStore().getVehicleYears();
+      },
+      initializeComponent(initialData) {       
+        this.years = initialData;
+      },
+    },
+  };
+  </script>

src/layouts/welcome-page/welcome-page.vue

@@ -5,7 +5,7 @@
                 <siteHeader cmsWidgetName="SiteHeaderWidget"/>
                 <siteSubHeader cmsWidgetName="SiteSubHeaderWidget" class="mt-4"/>
                 <div class="container-fluid px-5">
-                    <div class="row mt-4">
+                    <div class="row mt-5">
                         <div class="col">
                             <textboxQuestion
                             inputId="policyNumberField"
@@ -18,13 +18,15 @@
                             validationRules="policy-number-required" />
                         </div>
                     </div>
-                    <div class="row mt-4 " v-if="this.displayPolicyZip">
+                    <div class="row mt-4" v-if="this.displayPolicyZip">
                         <div class="col">
                             <textboxQuestion
                             inputId="policyZipCode"
                             cmsWidgetName="PolicyZipQuestion"
+                            v-model="welcomePageModel.policyZipCode"
                             isRequired
-                            ref="policyZip" />
+                            ref="policyZip"
+                            validationRules="policy-zip-required|policy-zip-format" />
                         </div>
                     </div>
                     <div class="row mt-4">
@@ -152,51 +154,49 @@
 </template>
 
 <script>
-// Components
+    // Components
-import siteHeader from '@/iss-components/site-header/site-header';
+    import siteHeader from '@/iss-components/site-header/site-header';
-import siteSubHeader from '@/iss-components/site-sub-header/site-sub-header';
+    import siteSubHeader from '@/iss-components/site-sub-header/site-sub-header';
-import siteFooter from "@/iss-components/site-footer/site-footer";
+    import siteFooter from "@/iss-components/site-footer/site-footer";
-import textboxQuestion from "@/digital-components/textbox-question/textbox-question";
+    import textboxQuestion from "@/digital-components/textbox-question/textbox-question";
-import buttonQuestion from "@/digital-components/button-question/button-question";
+    import buttonQuestion from "@/digital-components/button-question/button-question";
-import dropdownQuestion from "@/digital-components/dropdown-question/dropdown-question";
+    import dropdownQuestion from "@/digital-components/dropdown-question/dropdown-question";
-import textBlock from "@/digital-components/text-block/text-block";
+    import textBlock from "@/digital-components/text-block/text-block";
 
-// Supporting files
+    // Supporting files
-import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
+    import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
-import { settleAllPromises } from "@/helpers/layout-helper";
+    import { settleAllPromises } from "@/helpers/layout-helper";
-import { Form, defineRule } from "vee-validate";
+    import { Form, defineRule } from "vee-validate";
-import { required, regex } from "@/helpers/validation-rules";
+    import { required, regex } from "@/helpers/validation-rules";
-import { errorMessages } from "@/constants/error-messages";
+    import { errorMessages } from "@/constants/error-messages";
-import BaseFormMixin from '@/mixins/base-form-mixin.js';
+    import BaseFormMixin from '@/mixins/base-form-mixin.js';
-import { useMainStore } from '@/store';
+    import { useMainStore } from '@/store';
-import { states } from "@/constants/states"
+    import { states } from "@/constants/states"
 
-//define validation rules
+    //define validation rules
-defineRule("loss-date-required", required(errorMessages.LOSS_DATE_REQUIRED));
+    defineRule("loss-date-required", required(errorMessages.LOSS_DATE_REQUIRED));
-defineRule("loss-cause-required", required(errorMessages.LOSS_CAUSE_REQUIRED));
+    defineRule("loss-cause-required", required(errorMessages.LOSS_CAUSE_REQUIRED));
-defineRule("policy-number-required", required(errorMessages.POLICY_NUMBER_REQUIRED));
+    defineRule("policy-number-required", required(errorMessages.POLICY_NUMBER_REQUIRED));
-defineRule("loss-date-required", required(errorMessages.LOSS_DATE_REQUIRED));
+    defineRule("loss-date-required", required(errorMessages.LOSS_DATE_REQUIRED));
-defineRule("loss-state-required", required(errorMessages.LOSS_STATE_REQUIRED));
+    defineRule("loss-state-required", required(errorMessages.LOSS_STATE_REQUIRED));
-defineRule("loss-city-required", required(errorMessages.LOSS_CITY_REQUIRED));
+    defineRule("loss-city-required", required(errorMessages.LOSS_CITY_REQUIRED));
-defineRule("phone-number-required", required(errorMessages.PHONE_NUMBER_FORMAT));
+    defineRule("phone-number-required", required(errorMessages.PHONE_NUMBER_FORMAT));
-defineRule("email-address-required", required(errorMessages.EMAIL_ADDRESS_REQUIRED));
+    defineRule("email-address-required", required(errorMessages.EMAIL_ADDRESS_REQUIRED));
-defineRule("damage-option-required", required(errorMessages.DAMAGE_OPTION_REQUIRED));
+    defineRule("damage-option-required", required(errorMessages.DAMAGE_OPTION_REQUIRED));
-defineRule("policy-zip-required", required(errorMessages.POLICY_ZIP_REQUIRED));
+    defineRule("policy-zip-required", required(errorMessages.POLICY_ZIP_REQUIRED));
-defineRule("policy-zip-format", regex(/(^\d{5}$)|(^\d{5}-\d{4}$)/, errorMessages.POLICY_ZIP_FORMAT));
+    defineRule("policy-zip-format", regex(/(^\d{5}$)|(^\d{5}-\d{4}$)/, errorMessages.POLICY_ZIP_FORMAT));
 
-defineRule("email-address-format",
+    defineRule("email-address-format",
-regex(
+    regex(
-    /^([a-zA-Z0-9_\-.+]+)@([a-zA-Z0-9_\-.]+)\.([a-zA-Z]{2,})$/,
+        /^([a-zA-Z0-9_\-.+]+)@([a-zA-Z0-9_\-.]+)\.([a-zA-Z]{2,})$/,
-    errorMessages.EMAIL_ADDRESS_FORMAT
+        errorMessages.EMAIL_ADDRESS_FORMAT
-)
+    ));
-);
 
-defineRule("phone-number-format",
+    defineRule("phone-number-format",
-regex(
+    regex(
-    /^(\([0-9]{3}\)|[0-9]{3}) *[-.]? *[0-9]{3} *[-.]? *[0-9]{4}$/,
+        /^(\([0-9]{3}\)|[0-9]{3}) *[-.]? *[0-9]{3} *[-.]? *[0-9]{4}$/,
-    errorMessages.PHONE_NUMBER_FORMAT
+        errorMessages.PHONE_NUMBER_FORMAT
-)
+    ));
-);
 
 export default {
     name: "welcome-page",
@@ -316,7 +316,8 @@ export default {
 
         getWelcomePageModelFromStore() {
             return {
-                policyNumber : this.mainStore.order.policy.policyNumber,
+                policyNumber: this.mainStore.order.policy.policyNumber,
+                policyZipCode: this.mainStore.order.policy.policyZipCode,
                 dateOfLoss : this.mainStore.order.policy.dateOfLoss,
                 damageCause : this.mainStore.order.policy.damageCause,
                 damageState : this.mainStore.order.policy.damageState,
@@ -324,7 +325,7 @@ export default {
                 isDamageGlassOnly : this.mainStore.order.policy.isDamageGlassOnly,
                 phoneNumber : this.mainStore.order.customer.phoneNumber,
                 email : this.mainStore.order.customer.emailAddress,
-                isPolicyNumberDisabled: this.mainStore.order.policy.isPolicyNumberDisabled,
+                isPolicyNumberDisabled: this.mainStore.order.policy.isPolicyNumberDisabled
             }
         },
     },
@@ -360,7 +361,8 @@ export default {
             return !!this.getCmsContent("GlassOnlyQuestion","QuestionText");
         },
         displayPolicyZip(){
-            if(this.mainStore.issConfig.isAuthenticated){
+            if (this.mainStore.issConfig.isAuthenticated &&
+                !!this.mainStore.issConfig.disabledFields.policyZipCode) {
                 return false;
             }
             else{

src/router/router-constants/issPage-values.js

@@ -29,6 +29,7 @@ export const issPageValues = {
     VEHICLE_PARTS: 'vehicle-parts',
     VEHICLE_STYLE: 'vehicle-style',
     VEHICLE_YEAR: 'vehicle-year',
+    VEHICLE_SELECTION: 'vehicle-selection',
     VIN_LOOKUP: 'vin-lookup',
     TPA_SUBMIT: 'tpa-submit',
     BAILOUT_PAGE: 'bailout-page',

src/router/router-constants/routing-table.js

@@ -4,6 +4,19 @@ import { navigationScenarios } from '@/router/router-constants/navigation-scenar
 // Get store from router/index.js instead of importing it here to get updated values
 const routingTable = function(store) {
   return [
+    {
+      issPageValue: issPageValues.VEHICLE_SELECTION,
+      maps: [
+        {
+          scenario: navigationScenarios.CLICKED_BACK,
+          destinationIssPageValue: issPageValues.POLICY_HOLDER_DETAILS
+        },
+        {
+          scenario: navigationScenarios.CLICKED_FORWARD,
+          destinationIssPageValue: issPageValues.VEHICLE_DAMAGE
+        }
+      ]
+    },
     {
       issPageValue: issPageValues.VEHICLE_YEAR,
       maps: [

src/store/index.js

@@ -43,6 +43,7 @@ const getDefaultState = () => {
       },
       policy: {
         policyNumber: null,
+        policyZipCode: null,
         dateOfLoss: null,
         damageCause: null,
         damageState: null,
@@ -106,7 +107,8 @@ const getDefaultState = () => {
       returnURL: null,
       returnURL2: null,
       disabledFields: {
-        policyNumber: null
+        policyNumber: null,
+        policyZipCode: null
       }
     }
   };
@@ -608,6 +610,7 @@ export const useMainStore = defineStore({
 
         if (isDamageChanging) {
             //Reset dependent state when changing
+            //Was resetGlassPartsState, added dependencies for SSR-290
             this.resetPartsAndDependencies();
 
             // Save new values
@@ -668,7 +671,8 @@ export const useMainStore = defineStore({
         this.order.vehicle.imageVifNumber = vehicle.imageVifNumber;
         this.order.vehicle.imageColor = vehicle.imageVifColor;
 
-        this.resetDamagePartsAndDependencies();
+        this.resetSupportingItemsState();
+        this.resetVapsState();
       },
 
       updateVehicleVin(vin) {
@@ -715,8 +719,8 @@ export const useMainStore = defineStore({
       resetMoldingAndCapabilityQuestionAnswersIfNeeded(matchedParts) {
         const partsOrQuestionsDataToCompareWith =
             this.pageData(issPageValues.MOLDING_QUESTIONS)?.partsOrQuestions ??
-            this.pageData(issPageValues.CAPABILITY_QUESTIONS)?.partsOrQuestions ??
+              this.pageData(issPageValues.CAPABILITY_QUESTIONS)?.partsOrQuestions ??
-            [];
+              [];
 
         const previouslySelectedPartNumbers = getAllPartNumbers(partsOrQuestionsDataToCompareWith);
         const currentlySelectedPartNumbers = getAllPartNumbers(matchedParts);
@@ -725,11 +729,12 @@ export const useMainStore = defineStore({
             previouslySelectedPartNumbers !== currentlySelectedPartNumbers;
 
         if (haveSelectedVehiclePartsChanged) {
+          //was updateGlassParts, added dependencies for SSR-290
           this.resetPartsAndDependencies();
           this.updateMoldingQuestionAnswers(null);
           this.updateCapabilityQuestionAnswers(null);
-          this.updatePageData({ page: issPageValues.MOLDING_QUESTIONS, data: null});
+          this.updatePageData({ page: issPageValues.MOLDING_QUESTIONS, data: null });
-          this.updatePageData({ page: issPageValues.CAPABILITY_QUESTIONS, data: null});
+          this.updatePageData({ page: issPageValues.CAPABILITY_QUESTIONS, data: null });
         }
       },
 
@@ -743,14 +748,15 @@ export const useMainStore = defineStore({
         this.issConfig.enableTPAFlow = false;
         this.issConfig.returnURL = null;
         this.issConfig.returnURL2 = null;
-        this.issConfig.disabledFields.policyNumber = null;
+        this.issConfig.disabledFields.policyNumber = false;
+        this.issConfig.disabledFields.policyZipCode = false;
       },
 
       updateVehicleYear(year) {
         if(this.order.vehicle.year !== year)
         {
           this.resetVehicleState();
-          this.resetDamagePartsAndDependencies();
+          this.resetDamageAndDependencies();
 
           this.order.vehicle.year = year;
         }
@@ -762,7 +768,7 @@ export const useMainStore = defineStore({
           const year = this.order.vehicle.year;
           
           this.resetVehicleState();
-          this.resetDamagePartsAndDependencies();        
+          this.resetDamageAndDependencies();        
 
           this.order.vehicle.year = year;
           this.order.vehicle.make = make;
@@ -776,7 +782,7 @@ export const useMainStore = defineStore({
           const make = this.order.vehicle.make;
 
           this.resetVehicleState();
-          this.resetDamagePartsAndDependencies();
+          this.resetDamageAndDependencies();
 
           this.order.vehicle.year = year;
           this.order.vehicle.make = make;
@@ -793,7 +799,7 @@ export const useMainStore = defineStore({
           const model = this.order.vehicle.model;
 
           this.resetVehicleState();
-          this.resetDamagePartsAndDependencies();
+          this.resetDamageAndDependencies();
 
           this.order.vehicle.year = year;
           this.order.vehicle.make = make;
@@ -836,6 +842,7 @@ export const useMainStore = defineStore({
       updatePolicyData(welcomePageModel)
       {
         this.order.policy.policyNumber = welcomePageModel?.policyNumber;
+        this.order.policy.policyZipCode = welcomePageModel?.policyZipCode;
         this.order.policy.dateOfLoss = welcomePageModel?.dateOfLoss;
         this.order.policy.damageCause = welcomePageModel?.damageCause;
         this.order.policy.damageState = welcomePageModel?.damageState;
@@ -874,16 +881,17 @@ export const useMainStore = defineStore({
             this.updateGlassParts(null);
             this.updateMoldingQuestionAnswers(null);
             this.updateCapabilityQuestionAnswers(null);
-            this.updatePageData({ page: issPageValues.VEHICLE_PARTS, data: null});
+            this.resetSupportingItemsState();
-            this.updatePageData({ page: issPageValues.MOLDING_QUESTIONS, data: null});
+            this.resetVapsState();
-            this.updatePageData({ page: issPageValues.CAPABILITY_QUESTIONS, data: null});
+
+            this.updatePageData({ page: issPageValues.VEHICLE_PARTS, data: null });
+            this.updatePageData({ page: issPageValues.MOLDING_QUESTIONS, data: null });
+            this.updatePageData({ page: issPageValues.CAPABILITY_QUESTIONS, data: null });
         }
 
         //Save new values
         this.updatePartQuestionAnswers(partQuestionAnswersArray);
 
-        this.resetSupportingItemsState();
-        this.resetVapsState();
       },
       saveMoldingQuestionAnswers(moldingQuestionAnswersArray) {
         const sortedPreviousResultsArray = sortArrayOfObjectsByPropertyValue(
@@ -903,10 +911,7 @@ export const useMainStore = defineStore({
         if (haveMoldingQuestionAnswersChanged) {
           this.resetPartsAndDependencies();
           this.updateCapabilityQuestionAnswers(null);
-          this.updatePageData({
+          this.updatePageData({ page: issPageValues.CAPABILITY_QUESTIONS, data: null });
-            page: issPageValues.CAPABILITY_QUESTIONS,
-            data: null
-          });
         }
 
         // Save new values
@@ -929,8 +934,7 @@ export const useMainStore = defineStore({
           );
         
         if (haveCapabilityQuestionAnswersChanged) {
-          this.updateGlassParts(null);
+          this.resetPartsAndDependencies();
-          this.updateSupportingItems(null);
         }
 
         // Save new values
@@ -1158,6 +1162,7 @@ export const useMainStore = defineStore({
 
             if (!isSelectedGlassAvailableForVehicle) {
               this.resetDamageState();
+              this.resetGlassPartsState();
             }
 
             //Save new values
@@ -1173,6 +1178,7 @@ export const useMainStore = defineStore({
 
           if (!isSelectedGlassAvailableForVehicle) {
             this.resetDamageState();
+            this.resetGlassPartsState();
           }
           
           //Save new values
@@ -1186,8 +1192,10 @@ export const useMainStore = defineStore({
         {
             this.resetRegistrationAndDependencies();
 
-            if (!isSelectedGlassAvailableForVehicle) {
+          if (!isSelectedGlassAvailableForVehicle) {
+              // Dependencies already cleared in above statement
               this.resetDamageState();
+              this.resetGlassPartsState();
             }
 
             //Save new values
@@ -1204,9 +1212,9 @@ export const useMainStore = defineStore({
         this.resetVapsState();
       },
 
-      resetDamagePartsAndDependencies() {
+      resetDamageAndDependencies() {
-        //this.resetDamageState();
+        this.resetDamageState();
-        //this.resetGlassPartsState();
+        this.resetGlassPartsState();
         this.resetSupportingItemsState();
         this.resetVapsState();
       },