Merge branch 'develop' into feature/CSR-297

src/common-components/button-question/button-question.vue

@@ -1,7 +1,7 @@
 <!-- Documented in confluence https://safelite.atlassian.net/wiki/spaces/DC/pages/76644418/Button+Question+Component -->
 <template>
   <div :class="isOverflowScrollable ? 'button-question button-question-overflow' : 'button-question'">
-    <div v-if="questionText" class="mt-5 mb-4 d-flex">
+    <div v-if="questionText" :class="[this.buttonType === 'radio' ? ['mt-2', 'mb-0'] : ['mt-5', 'mb-4'], 'd-flex']">
       <span class="fs-5 fw-bold w-100" :class="this.buttonType === 'radio' ? 'text-start' : 'text-center'">{{ questionText }}</span>
     </div>
     <div class="w-100 d-flex justify-content-center">

src/common-components/vin-information/vin-information.spec.js

@@ -1 +1,18 @@
-test.todo("some test to be written in the future");
+import { shallowMount } from "@vue/test-utils";
+import vinInformation from "@/common-components/vin-information/vin-information";
+
+describe("vinInformation.vue", () => {
+  it("Should return input class active if isActive is true", async () => {
+    // Act
+    const wrapper = shallowMount(vinInformation);
+
+    await wrapper.setData({
+      isActive: true,
+    });
+
+    // Assert
+    wrapper.vm.toggleClass()
+
+    expect(wrapper.vm.isActive).toEqual(false);
+  });
+});

src/constants/dynamictext-mapper.js

@@ -10,7 +10,7 @@ const customMappings = {
         { key: 'Rear Stationary', transformedValue: 'rear window' },
         { key: 'Rear Slider', transformedValue: 'rear window' },
         { key: 'Driver Front', transformedValue: 'driver side front door' },
-        { key: 'Driver Back ', transformedValue: 'driver side back door' },
+        { key: 'Driver Back', transformedValue: 'driver side back door' },
         { key: 'Driver Vent', transformedValue: 'driver side vent glass' },
         { key: 'Driver Quarter', transformedValue: 'driver side quarter panel' },
         { key: 'Driver SideDoor', transformedValue: 'driver side sliding door' },

src/constants/store-actions.js

@@ -14,10 +14,10 @@ const storeActions = {
   GET_PARTS_OR_QUESTIONS: "getPartsOrQuestions",
 
   // DEPENDENCY MUTATIONS
-  RESET_VEHICLE_STATE: "resetVehicleAndDependencies",
+  RESET_VEHICLE_STATE_AND_DEPENDENCIES: "resetVehicleAndDependencies",
-  RESET_DAMAGE_STATE: "resetDamageAndDependencies",
+  RESET_DAMAGE_STATE_AND_DEPENDENCIES: "resetDamageAndDependencies",
-  RESET_REGISTRATION_STATE: "resetRegistrationAndDependencies",
+  RESET_REGISTRATION_STATE_AND_DEPENDENCIES: "resetRegistrationAndDependencies",
-  RESET_PARTS_STATE: "resetPartsAndDependencies",
+  RESET_PARTS_STATE_AND_DEPENDENCIES: "resetPartsAndDependencies",
 };
 
 export { storeActions };

src/layouts/form-test/form-test.vue

@@ -144,7 +144,7 @@ export default {
     },
     resetDependentState() {
       // Invokes
-      store.dispatch(storeActions.RESET_PARTS_STATE);
+      store.dispatch(storeActions.RESET_PARTS_STATE_AND_DEPENDENCIES);
     },
     onSubmit(values) {
       window.alert('Success! Submitted values: ' + JSON.stringify(values, null ,2))

src/layouts/part-questions/part-questions.vue

@@ -1,11 +1,11 @@
 <template>
-    <div class="container-fluid shadow rounded-3 p-2 position-relative make-tall">
+<div class="container-fluid shadow rounded-3 p-2 position-relative make-tall">
-        <funnelHeader ref="funnelHeader" />
+    <funnelHeader ref="funnelHeader" />
-        <vehicleBanner ref="vehicleBanner" :displayGenericVehicleImage="false" />
+    <vehicleBanner ref="vehicleBanner" :displayGenericVehicleImage="false" />
-        <funnelSubHeader ref="funnelSubHeader" />
+    <funnelSubHeader ref="funnelSubHeader" />
-        <h1>Part Questions Page Placeholder</h1>
+    <h1>Part Questions Page Placeholder</h1>
-        <funnelFooter ref="funnelFooter" @back-clicked="backButtonAction" />
+    <funnelFooter ref="funnelFooter" @back-clicked="backButtonAction" />
-    </div>
+</div>
 </template>
 
 <script>
@@ -16,11 +16,22 @@ import funnelSubHeader from "@/common-components/funnel-sub-header/funnel-sub-he
 import funnelFooter from "@/common-components/funnel-footer/funnel-footer";
 
 // Supporting Files
-import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
+import {
-import { settleAllPromises } from "@/helpers/layout-helper";
+    fetchCmsContentForPage
-import {storeMutations} from "@/constants/store-mutations";
+} from "@/helpers/cms-content-helper";
-import {storeActions} from "@/constants/store-actions";
+import {
+    settleAllPromises
+} from "@/helpers/layout-helper";
+import {
+    storeMutations
+} from "@/constants/store-mutations";
+import {
+    storeActions
+} from "@/constants/store-actions";
 import store from "@/store";
+import {
+    fmgPageValues
+} from "@/router/router-constants/fmgPage-values";
 
 export default {
     name: "part-questions",
@@ -61,7 +72,10 @@ export default {
             );
         },
         arePagePrerequisitesValid() {
-            return store.getters.lineItems.glassParts !== null;
+            if (Object.keys(store.getters.pageData(fmgPageValues.PART_QUESTIONS)).length !== 0) {
+                return true;
+            }
+            return false;
         },
         resetDependentState() {
             // Set
@@ -71,8 +85,7 @@ export default {
             store.dispatch(storeActions.RESET_PARTS_AND_DEPS);
         },
     },
-    data() {
+    data() {},
-    },
     components: {
         funnelHeader,
         vehicleBanner,

src/layouts/vehicle-damage/vehicle-damage.spec.js

@@ -591,7 +591,7 @@ describe("vehicle-damage.vue", () => {
     wrapper.vm.resetDependentState();
 
     //Assert
-    expect(store.dispatch).toBeCalledWith(storeActions.RESET_PARTS_STATE)
+    expect(store.dispatch).toBeCalledWith(storeActions.RESET_PARTS_STATE_AND_DEPENDENCIES)
 
   });
 });

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

@@ -119,9 +119,9 @@ export default {
   methods: {
     arePagePrerequisitesValid() {
       return store.getters.vehicle.carId !== null;
-    },
+  },
     resetDependentState() {
-      store.dispatch(storeActions.RESET_PARTS_STATE);
+      store.dispatch(storeActions.RESET_PARTS_STATE_AND_DEPENDENCIES);
     },
     backButtonAction() {
       // route to move backwards

src/layouts/vehicle-make/vehicle-make.spec.js

@@ -223,8 +223,8 @@ describe("vehicle-make.vue", () => {
     expect(store.commit).toBeCalledWith(storeMutations.UPDATE_CAR_ID, null)
     expect(store.commit).toBeCalledWith(storeMutations.UPDATE_VEHICLE_CATEGORY, null)
 
-    expect(store.dispatch).toBeCalledWith(storeActions.RESET_DAMAGE_STATE)
+    expect(store.dispatch).toBeCalledWith(storeActions.RESET_DAMAGE_STATE_AND_DEPENDENCIES)
-    expect(store.dispatch).toBeCalledWith(storeActions.RESET_REGISTRATION_STATE)
+    expect(store.dispatch).toBeCalledWith(storeActions.RESET_REGISTRATION_STATE_AND_DEPENDENCIES)
 
   });
 });

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

@@ -94,8 +94,8 @@ export default {
       store.commit(storeMutations.UPDATE_VEHICLE_CATEGORY, null);
 
       // Invokes
-      store.dispatch(storeActions.RESET_DAMAGE_STATE);
+      store.dispatch(storeActions.RESET_DAMAGE_STATE_AND_DEPENDENCIES);
-      store.dispatch(storeActions.RESET_REGISTRATION_STATE);
+      store.dispatch(storeActions.RESET_REGISTRATION_STATE_AND_DEPENDENCIES);
     },
   },
 

src/layouts/vehicle-model/vehicle-model.spec.js

@@ -208,8 +208,8 @@ describe("vehicle-model.vue", () => {
     expect(store.commit).toBeCalledWith(storeMutations.UPDATE_CAR_ID, null)
     expect(store.commit).toBeCalledWith(storeMutations.UPDATE_VEHICLE_CATEGORY, null)
 
-    expect(store.dispatch).toBeCalledWith(storeActions.RESET_DAMAGE_STATE)
+    expect(store.dispatch).toBeCalledWith(storeActions.RESET_DAMAGE_STATE_AND_DEPENDENCIES)
-    expect(store.dispatch).toBeCalledWith(storeActions.RESET_REGISTRATION_STATE)
+    expect(store.dispatch).toBeCalledWith(storeActions.RESET_REGISTRATION_STATE_AND_DEPENDENCIES)
 
   });
 });

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

@@ -94,8 +94,8 @@ export default {
       store.commit(storeMutations.UPDATE_VEHICLE_CATEGORY, null);
 
       // Invokes
-      store.dispatch(storeActions.RESET_DAMAGE_STATE);
+      store.dispatch(storeActions.RESET_DAMAGE_STATE_AND_DEPENDENCIES);
-      store.dispatch(storeActions.RESET_REGISTRATION_STATE);
+      store.dispatch(storeActions.RESET_REGISTRATION_STATE_AND_DEPENDENCIES);
     },
   },
 

src/layouts/vehicle-parts/glass-part-question/glass-part-question.spec.js

@@ -4,6 +4,9 @@ import glassPartQuestion from "@/layouts/vehicle-parts/glass-part-question/glass
 import store from "@/store";
 
 jest.mock("@/store", () => { return {}; }, { virtual: true });
+store.getters = {
+    pageData: jest.fn()
+};
 
 const featureListData = {
     colorAnswersProp: [
@@ -93,9 +96,9 @@ describe("glass-part-question.vue", () => {
 
         //Act
         await wrapper.vm.$nextTick();
-        wrapper.setData({selectedTint:  {"Rear-Stationary" : 'Green Tint' } });
+        wrapper.setData({ selectedTint: { "Rear-Stationary": 'Green Tint' } });
 
-        expect(wrapper.vm.selectedTint).toStrictEqual({"Rear-Stationary": 'Green Tint'});
+        expect(wrapper.vm.selectedTint).toStrictEqual({ "Rear-Stationary": 'Green Tint' });
 
         await wrapper.vm.ResetTintAndPartSelections();
         expect(wrapper.vm.selectedTint).toStrictEqual({});
@@ -107,7 +110,19 @@ describe("glass-part-question.vue", () => {
 function setupMocks({ glassNameProp, glassLocationProp, colorAnswersProp, modelValueProp }) {
 
     //Mock store
-    const mountOptions = getMountOptions({});
+    store.getters.pageData.mockReturnValueOnce({ partsOrQuestions: {}});
+    store.getters.lineItems = { glassParts: {} }
+
+    const mountOptions = getMountOptions({
+        store: {
+            getters: store.getters,
+        },
+        route: {
+            query: {
+                fmgPage: 'vehicle-parts',
+            }
+        },
+    });
 
     mountOptions.propsData = {
         glassName: glassNameProp,

src/layouts/vehicle-parts/glass-part-question/glass-part-question.vue

@@ -6,6 +6,7 @@
 </div>
 
 <div class="container nested-radio" v-for="(value, name, index) in featureListData" :key="index">
+
     <div class="row my-2">
         <div class="col">
             <listCard v-model="selectedTint[name]" :isRadio="true" :isWide="true" :buttonImage="
@@ -18,16 +19,16 @@
     </div>
     <transition name="fade" mode="out-in">
         <div v-if="
-        selectedTint[name] != undefined &&
+          selectedTint[name] != undefined &&
-        selectedTint[name].buttonId === `${glassLocation}-${glassName}-${name}`
+          selectedTint[name].buttonId ===
-      " class="row my-2" aria-live="polite">
+            `${glassLocation}-${glassName}-${name}`
+        " class="row my-2" aria-live="polite">
             <div class="col">
                 <buttonQuestion v-model="selectedPart[glassLocation]" buttonType="radio" class="radioQuestion" :questionText="glassFeatureQuestion" :answers="value" textPosition="text-start" :loaderEnabled="false" :isRequired="true" :groupName="`${glassLocation}-${glassName}-${name}`" />
             </div>
         </div>
     </transition>
 </div>
-
 </template>
 
 <script>
@@ -48,8 +49,8 @@ export default {
     inheritAttrs: false,
     data() {
         return {
-            glassColorQuestion: '',
+            glassColorQuestion: "",
-            glassFeatureQuestion: '',
+            glassFeatureQuestion: "",
             selectedTint: {}, // v-model for the list card selections
         };
     },
@@ -57,7 +58,29 @@ export default {
         glassName: String,
         glassLocation: String,
         colorAnswers: Array,
-        modelValue: Object
+        modelValue: Object,
+    },
+    mounted() {
+        if (this.modelValue !== undefined) {
+            // Populate button-question model-value if parts data already exists in VueX
+            const alreadyPopulatedPartsData =
+                this.$store.getters.lineItems.glassParts;
+
+            Object.keys(alreadyPopulatedPartsData).forEach((key) => {
+                const partNumber = alreadyPopulatedPartsData[key].partNumber;
+                const tintColor = alreadyPopulatedPartsData[key].color;
+
+                Object.keys(this.modelValue).forEach((key) => {
+                    if (this.modelValue[key][0] === partNumber) {
+                        this.selectedTint[tintColor] = {
+                            buttonId: `${this.glassLocation}-${this.glassName}-${tintColor}`,
+                            checkValue: "",
+                            value: "",
+                        };
+                    }
+                });
+            });
+        }
     },
     components: {
         listCard,
@@ -65,16 +88,19 @@ export default {
     },
     computed: {
         colorQuestionText() {
-            return getCustomTransformValue(this.glassColorQuestion, `${this.glassLocation} ${this.glassName}`);
+            return getCustomTransformValue(
+                this.glassColorQuestion,
+                `${this.glassLocation} ${this.glassName}`
+            );
         },
-        
+
         selectedPart: {
             get: function () {
                 return this.modelValue;
             },
             set: function (newValue) {
                 this.$emit("update:modelValue", newValue);
-            }
+            },
         },
 
         // Creates a map of the feature list data in the correct Name/Value
@@ -98,9 +124,9 @@ export default {
 
                 return arr;
             }, {});
-            
+
             return tintMapByColor;
-        }
+        },
     },
     methods: {
         initializeComponent(cmsContent) {
@@ -121,9 +147,28 @@ export default {
         },
 
         // Reset selections when tint changes for the same glass to ensure proper selection.
+        // Also checks if only a single part is present for the tint.
         ResetTintAndPartSelections() {
+
             this.selectedTint = {};
             this.selectedPart = {};
+            this.AutoSelectIfSinglePart();
+        },
+
+        // Check if only a single part is present for the tint and set the v-model if it is.
+        AutoSelectIfSinglePart(){
+            // Check if the selected tint only has a single feature
+            const partsData = this.$store.getters.pageData(this.$route.query.fmgPage);
+
+            Object.keys(partsData.partsOrQuestions).forEach((key) => {
+                const currentGlassSelection = partsData.partsOrQuestions[key];
+
+                if (currentGlassSelection.glassName === this.glassName && currentGlassSelection.glassLocation === this.glassLocation) {
+                    if (currentGlassSelection.parts.length === 1) {
+                        this.selectedPart = { [currentGlassSelection.glassLocation]: [currentGlassSelection.parts[0].partNumber]};
+                    }
+                }
+            });
         }
     },
 };

src/layouts/vehicle-parts/vehicle-parts.spec.js

@@ -8,13 +8,10 @@ import glassPartQuestion from "@/layouts/vehicle-parts/glass-part-question/glass
 
 // Supporting Files
 import { settleAllPromises } from "@/helpers/layout-helper.js";
-import baseMixin from "@/mixins/base-mixin";
 import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
 import { shallowMount } from "@vue/test-utils";
 import { getMountOptions } from "@/helpers/unit-test-helper.js";
 import { nextTick } from "vue";
-import { storeActions } from "@/constants/store-actions";
-import { storeMutations } from "@/constants/store-mutations";
 import store from "@/store";
 
 // Mock our module for promises.
@@ -70,33 +67,8 @@ describe("vehicle-parts.vue", () => {
 
     test("Page header is initialized with api data", async (done) => {
         //Arrange
-        store.getters.pageData.mockReturnValueOnce({
+        store.getters.pageData.mockReturnValueOnce(basePartResponse);
-            partsOrQuestions: [
+        store.getters.lineItems = { glassParts: {} }
-                {
-                    glassName: "Stationary",
-                    glassLocation: "Rear",
-                    parts: [
-                        {
-                            partNumber: "DB12209GTYN",
-                            description: "heated glass, solar, 1 hole",
-                            color: "Green Tint",
-                            requiresRecalibration: false,
-                            requiresCapabilityQuestions: false,
-                            childParts: null
-                        },
-                        {
-                            partNumber: "DB12209YPYNOEM",
-                            description: "heated glass, solar, 1 hole",
-                            color: "Gray Tint Privacy",
-                            requiresRecalibration: false,
-                            requiresCapabilityQuestions: false,
-                            childParts: null
-                        }
-                    ],
-                    partQuestions: null
-                }
-            ]
-        });
 
         const pageHeaderWidgetHeaderText = "Select Parts";
         const { wrapper, apiPromise } = setupMocks(
@@ -117,6 +89,7 @@ describe("vehicle-parts.vue", () => {
                 }
             });
 
+
         //Act
         vehicleParts.beforeRouteEnter.call(wrapper.vm,
             { query: { fmgPage: "vehicle-parts" } },
@@ -139,6 +112,7 @@ describe("vehicle-parts.vue", () => {
         };
 
         store.getters.pageData.mockReturnValueOnce(basePartResponse);
+        store.getters.lineItems = { glassParts: {} }
 
         const { wrapper, apiPromise } = setupMocks(
             {
@@ -181,6 +155,7 @@ describe("vehicle-parts.vue", () => {
         };
 
         store.getters.pageData.mockReturnValue(basePartResponse);
+        store.getters.lineItems = { glassParts: {} }
 
         const { wrapper, apiPromise } = setupMocks(
             {
@@ -219,6 +194,8 @@ describe("vehicle-parts.vue", () => {
 
         //Arrange
         store.getters.pageData.mockReturnValueOnce(basePartResponse);
+        store.getters.lineItems = { glassParts: {} }
+
         const { wrapper } = setupMocks({
             mountOptionsMockData: {
                 router: {
@@ -250,10 +227,48 @@ describe("vehicle-parts.vue", () => {
         expect(arePagePrerequisitesValid).toBe(true);
     });
 
+    test("Initial data, should populate this.glassParts", async () => {
+
+        //Arrange
+        store.getters.pageData.mockReturnValueOnce(basePartResponse);
+        store.getters.lineItems = { glassParts: { 0: { partNumber: 'DB12209YPYNOEM'} } }
+
+        const { wrapper } = setupMocks({
+            mountOptionsMockData: {
+                router: {
+                    navigateAfterSave: jest.fn()
+                },
+                route: {
+                    query: {
+                        fmgPage: 'vehicle-parts',
+                    }
+                },
+                store: {
+                    getters: store.getters
+                },
+            }
+        });
+
+        //Act
+        vehicleParts.beforeRouteEnter.call(
+            wrapper.vm,
+            { query: { fmgPage: "vehicle-parts" } },
+            undefined,
+            (c) => c(wrapper.vm)
+        );
+
+        await nextTick();
+
+        //Assert
+        expect(wrapper.vm.glassParts).toEqual({ "Rear-Stationary": { "Rear": ['DB12209YPYNOEM'] } });
+    });
+
     test("BackButtonAction triggers a router.navigate change", async () => {
 
         //Arrange
         store.getters.pageData.mockReturnValueOnce(basePartResponse);
+        store.getters.lineItems = { glassParts: {} }
+
         const { wrapper } = setupMocks({
             mountOptionsMockData: {
                 router: {
@@ -290,6 +305,9 @@ describe("vehicle-parts.vue", () => {
 
         //Arrange
         store.getters.pageData.mockReturnValueOnce(basePartResponse);
+        store.getters.lineItems = { glassParts: {} }
+
+
         store.commit = jest.fn();
         
         const { wrapper } = setupMocks({

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

@@ -1,26 +1,42 @@
 <template>
-<div class="container-fluid shadow rounded-3 p-2 position-relative make-tall">
+  <div class="container-fluid shadow rounded-3 p-2 position-relative make-tall">
     <funnelHeader ref="funnelHeader" />
     <vehicleBanner ref="vehicleBanner" :displayGenericVehicleImage="false" />
     <funnelSubHeader ref="funnelSubHeader" />
     <div class="container-fluid prevent-squish my-5">
-        <div class="row">
+      <div class="row">
-            <div class="col">
+        <div class="col">
-                <alert class="rounded border-0 shadow-sm" alertClass="alert-warning" :alertHeadline="alertWidgetData.headline" :alertCopy="alertWidgetData.copy" :isDismissible="false" />
+          <alert
-            </div>
+            class="rounded border-0 shadow-sm"
+            alertClass="alert-warning"
+            :alertHeadline="alertWidgetData.headline"
+            :alertCopy="alertWidgetData.copy"
+            :isDismissible="false"
+          />
         </div>
+      </div>
     </div>
 
     <div v-for="(item, i) in PartsForQuestions" :key="i">
-        <!-- Render horizontal lines if there is multi-glass (aka if i > 0) -->
+      <!-- Render horizontal lines if there is multi-glass (aka if i > 0) -->
-        <div class="container-fluid">
+      <div class="container-fluid">
-            <hr v-if="i > 0" />
+        <hr v-if="i > 0" />
-        </div>
+      </div>
 
-        <glassPartQuestion :ref="`${refPrefix}-${item.glassLocation}`" v-model="glassParts[item.glassLocation + '-' + item.glassName]" :glassLocation="item.glassLocation" :glassName="item.glassName" :colorAnswers="item.colorAnswers" />
+      <glassPartQuestion
+        :ref="`${RefPrefix}-${item.glassLocation}-${item.glassName}`"
+        v-model="glassParts[item.glassLocation + '-' + item.glassName]"
+        :glassLocation="item.glassLocation"
+        :glassName="item.glassName"
+        :colorAnswers="item.colorAnswers"
+      />
     </div>
-    <funnelFooter ref="funnelFooter" @back-clicked="backButtonAction" @ForwardClicked="forwardButtonAction" />
+    <funnelFooter
-</div>
+      ref="funnelFooter"
+      @back-clicked="backButtonAction"
+      @ForwardClicked="forwardButtonAction"
+    />
+  </div>
 </template>
 
 <script>
@@ -32,161 +48,183 @@ import funnelSubHeader from "@/common-components/funnel-sub-header/funnel-sub-he
 import funnelFooter from "@/common-components/funnel-footer/funnel-footer";
 import alert from "@/ux-components/alert/alert";
 // Supporting Files
-import {
+import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
-    fetchCmsContentForPage
+import { settleAllPromises } from "@/helpers/layout-helper";
-} from "@/helpers/cms-content-helper";
+import { fmgPageValues } from "@/router/router-constants/fmgPage-values";
-import {
+import { storeMutations } from "@/constants/store-mutations";
-    settleAllPromises
-} from "@/helpers/layout-helper";
-import {
-    fmgPageValues
-} from "@/router/router-constants/fmgPage-values";
-import {
-    storeMutations
-} from "@/constants/store-mutations";
 import store from "@/store";
 
 export default {
-    name: "vehicle-parts",
+  name: "vehicle-parts",
-    async beforeRouteEnter(to, from, next) {
+  async beforeRouteEnter(to, from, next) {
-        // Call APIs
+    // Call APIs
-        const cmsContentPromise = fetchCmsContentForPage(to.query.fmgPage);
+    const cmsContentPromise = fetchCmsContentForPage(to.query.fmgPage);
-        // Settle promises and get results
+    // Settle promises and get results
-        const promiseResultMap = [{
+    const promiseResultMap = [
-            resultKey: "cmsContent",
+      {
-            promise: cmsContentPromise,
+        resultKey: "cmsContent",
-        }, ];
+        promise: cmsContentPromise,
-        const resultMap = await settleAllPromises(promiseResultMap);
+      },
-        // Call the "next" function to complete the transition to this page.
+    ];
-        next((vm) => {
+    const resultMap = await settleAllPromises(promiseResultMap);
-            vm.$refs.funnelHeader.initializeComponent(
+    // Call the "next" function to complete the transition to this page.
-                resultMap.cmsContent.FunnelHeaderWidget
+    next((vm) => {
-            );
+      vm.$refs.funnelHeader.initializeComponent(
-            vm.$refs.vehicleBanner.initializeComponent(
+        resultMap.cmsContent.FunnelHeaderWidget
-                resultMap.cmsContent.VehicleBannerWidget
+      );
-            );
+      vm.$refs.vehicleBanner.initializeComponent(
-            vm.$refs.funnelSubHeader.initializeComponent(
+        resultMap.cmsContent.VehicleBannerWidget
-                resultMap.cmsContent.FunnelSubHeaderWidget
+      );
-            );
+      vm.$refs.funnelSubHeader.initializeComponent(
-            vm.$refs.funnelFooter.initializeComponent(
+        resultMap.cmsContent.FunnelSubHeaderWidget
-                resultMap.cmsContent.FunnelFooterWidget
+      );
-            );
+      vm.$refs.funnelFooter.initializeComponent(
+        resultMap.cmsContent.FunnelFooterWidget
+      );
 
-            // Glass Part Question dynamic component
+      // Glass Part Question dynamic component
 
-            Object.keys(vm.$refs)
+      Object.keys(vm.$refs)
-                .filter((r) => r.includes(vm.refPrefix) && vm.$refs[r][0] !== undefined)
+        .filter((r) => r.includes(vm.RefPrefix) && vm.$refs[r][0] !== undefined)
-                .forEach((c) =>
+        .forEach((c) =>
-                    vm.$refs[c][0].initializeComponent({
+          vm.$refs[c][0].initializeComponent({
-                        ColorQuestionWidget: resultMap.cmsContent.ColorQuestionWidget,
+            ColorQuestionWidget: resultMap.cmsContent.ColorQuestionWidget,
-                        FeatureQuestionWidget: resultMap.cmsContent.FeatureQuestionWidget,
+            FeatureQuestionWidget: resultMap.cmsContent.FeatureQuestionWidget,
-                    })
+          })
-                );
+        );
 
-            // Set alertData for the page alert. These use props so we don't call
+      // Set alertData for the page alert. These use props so we don't call
-            // initializeComponent here.
+      // initializeComponent here.
-            vm.alertWidgetData = {
+      vm.alertWidgetData = {
-                copy: resultMap.cmsContent.AlertWidget.BodyText,
+        copy: resultMap.cmsContent.AlertWidget.BodyText,
-                headline: resultMap.cmsContent.AlertWidget.HeadlineText
+        headline: resultMap.cmsContent.AlertWidget.HeadlineText,
-            };
+      };
+    });
+  },
+  data() {
+    return {
+      glassParts: {},
+      alertWidgetData: Object,
+    };
+  },
+  components: {
+    glassPartQuestion,
+    funnelHeader,
+    vehicleBanner,
+    funnelSubHeader,
+    funnelFooter,
+    alert,
+  },
+  computed: {
+    PartsForQuestions() {
+      const partsData = this.$store.getters.pageData(this.$route.query.fmgPage);
+      const alreadyPopulatedPartsData =
+        this.$store.getters.lineItems.glassParts === null
+          ? {}
+          : this.$store.getters.lineItems.glassParts;
 
+      // Map API result data, to vehicle-parts data structure
+      const mappedData = partsData.partsOrQuestions.map((g) => {
+        // If the part is already populated, use the value from the store and populate the v-model.
+        Object.keys(alreadyPopulatedPartsData).forEach((key) => {
+          const partNumber = alreadyPopulatedPartsData[key].partNumber;
+          g.parts.forEach((p) => {
+            if (p.partNumber === partNumber) {
+              this.glassParts[g.glassLocation + "-" + g.glassName] = {
+                [g.glassLocation]: [partNumber],
+              };
+            }
+          });
         });
-    },
+
-    data() {
         return {
-            glassParts: {},
+          glassName: g.glassName,
-            refPrefix: "partQuestion",
+          glassLocation: g.glassLocation,
-            alertWidgetData: Object,
+          colorAnswers: g.parts.reduce((arr, p) => {
-        };
+            arr.push({
-    },
+              ColorAnswerText: p.color,
-    components: {
+              FeatureAnswers: [
-        glassPartQuestion,
+                {
-        funnelHeader,
+                  FeatureAnswerText:
-        vehicleBanner,
+                    p.description === "" ? p.color : p.description,
-        funnelSubHeader,
+                  PartNumber: p.partNumber,
-        funnelFooter,
+                },
-        alert,
+              ],
-    },
-    computed: {
-        PartsForQuestions() {
-            const partsData = this.$store.getters.pageData(this.$route.query.fmgPage);
-
-            // Map API result data, to vehicle-parts data structure
-            const mappedData = partsData.partsOrQuestions.map(g => {
-                return {
-                    glassName: g.glassName,
-                    glassLocation: g.glassLocation,
-                    colorAnswers: g.parts.reduce((arr, p) => {
-                        arr.push({
-                            ColorAnswerText: p.color,
-                            FeatureAnswers: [{
-                                FeatureAnswerText: p.description === '' ? p.color : p.description,
-                                PartNumber: p.partNumber
-                            }]
-                        });
-                        return arr;
-                    }, [])
-                }
             });
+            return arr;
+          }, []),
+        };
+      });
 
-            return mappedData;
+      return mappedData;
-        },
-
-        PartsFromApi() {
-            return store.getters.pageData(fmgPageValues.VEHICLE_PARTS);
-        }
-
     },
-    methods: {
-        arePagePrerequisitesValid() {
-            // Check if isRepair is populated and if the pageData we need is here (Parts data)
-            if (store.getters.damage.isRepair !== null && Object.keys(store.getters.pageData(fmgPageValues.VEHICLE_PARTS)).length !== 0) {
-                return true;
-            }
-
-            return false
-        },
-        backButtonAction() {
-            this.$router.navigate(
-                this.navigationScenarios.CLICKED_BACK,
-                this.$route
-            );
-        },
-        forwardButtonAction() {
-            const selectedGlassPartNumbers = [];
-            const matchedParts = [];
-
-            // Compile all selected parts from the page.
-            for (let [key, value] of Object.entries(this.glassParts)) {
-                for (let [glassKey, glassValue] of Object.entries(value)) {
-                    selectedGlassPartNumbers.push(glassValue[0]);
-                }
-            }
-
-            // Match them to the parts from the API.
-            for (let [key, value] of Object.entries(this.PartsFromApi.partsOrQuestions)) {
-                for (let [partKey, partValue] of Object.entries(value.parts)) {
-                    const currentPart = this.PartsFromApi.partsOrQuestions[key].parts[partKey];
-                    const isMatched = selectedGlassPartNumbers.some(p => p === currentPart.partNumber);
-
-                    if (isMatched) {
-                        matchedParts.push(currentPart);
-                    }
-                }
-            }
-
-            // If no parts could be matched, throw an error.
-            if (matchedParts.length === 0) {
-                throw new Error("Could not match any parts to the selected parts");
-            }
-
-            // Save parts to the store.
-            store.commit(storeMutations.UPDATE_PARTS, matchedParts);
-
-            // Navigate to the next page.
-            this.$router.navigateAfterSave(this.navigationScenarios.SELECTED_PARTS, this.$route);
-        }
 
+    PartsFromApi() {
+      return store.getters.pageData(fmgPageValues.VEHICLE_PARTS);
     },
+
+    RefPrefix() {
+      return "partQuestion";
+    },
+  },
+  methods: {
+    arePagePrerequisitesValid() {
+      // Check if isRepair is populated and if the pageData we need is here (Parts data)
+      if (
+        store.getters.damage.isRepair !== null &&
+        Object.keys(store.getters.pageData(fmgPageValues.VEHICLE_PARTS))
+          .length !== 0
+      ) {
+        return true;
+      }
+
+      return false;
+    },
+    backButtonAction() {
+      this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
+    },
+    forwardButtonAction() {
+      const selectedGlassPartNumbers = [];
+      const matchedParts = [];
+
+      // Compile all selected parts from the page.
+      for (let [key, value] of Object.entries(this.glassParts)) {
+        for (let [glassKey, glassValue] of Object.entries(value)) {
+          selectedGlassPartNumbers.push(glassValue[0]);
+        }
+      }
+
+      // Match them to the parts from the API.
+      for (let [key, value] of Object.entries(
+        this.PartsFromApi.partsOrQuestions
+      )) {
+        for (let [partKey, partValue] of Object.entries(value.parts)) {
+          const currentPart =
+            this.PartsFromApi.partsOrQuestions[key].parts[partKey];
+          const isMatched = selectedGlassPartNumbers.some(
+            (p) => p === currentPart.partNumber
+          );
+
+          if (isMatched) {
+            matchedParts.push(currentPart);
+          }
+        }
+      }
+
+      // If no parts could be matched, throw an error.
+      if (matchedParts.length === 0) {
+        throw new Error("Could not match any parts to the selected parts");
+      }
+
+      // Save parts to the store.
+      store.commit(storeMutations.UPDATE_PARTS, matchedParts);
+
+      // Navigate to the next page.
+      this.$router.navigateAfterSave(
+        this.navigationScenarios.SELECTED_PARTS,
+        this.$route
+      );
+    },
+  },
 };
 </script>

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

@@ -99,8 +99,8 @@ export default {
     },
     resetDependentState() {
       // Invokes
-      store.dispatch(storeActions.RESET_DAMAGE_STATE);
+      store.dispatch(storeActions.RESET_DAMAGE_STATE_AND_DEPENDENCIES);
-      store.dispatch(storeActions.RESET_REGISTRATION_STATE);
+      store.dispatch(storeActions.RESET_REGISTRATION_STATE_AND_DEPENDENCIES);
     },
   },
 

src/layouts/vehicle-year/vehicle-year.spec.js

@@ -163,8 +163,8 @@ describe("vehicle-year.vue", () => {
     expect(store.commit).toBeCalledWith(storeMutations.UPDATE_CAR_ID, null)
     expect(store.commit).toBeCalledWith(storeMutations.UPDATE_VEHICLE_CATEGORY, null)
 
-    expect(store.dispatch).toBeCalledWith(storeActions.RESET_DAMAGE_STATE)
+    expect(store.dispatch).toBeCalledWith(storeActions.RESET_DAMAGE_STATE_AND_DEPENDENCIES)
-    expect(store.dispatch).toBeCalledWith(storeActions.RESET_REGISTRATION_STATE)
+    expect(store.dispatch).toBeCalledWith(storeActions.RESET_REGISTRATION_STATE_AND_DEPENDENCIES)
 
   });
 });

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

@@ -95,8 +95,8 @@ export default {
       store.commit(storeMutations.UPDATE_VEHICLE_CATEGORY, null);
 
       // Invokes
-      store.dispatch(storeActions.RESET_DAMAGE_STATE);
+      store.dispatch(storeActions.RESET_DAMAGE_STATE_AND_DEPENDENCIES);
-      store.dispatch(storeActions.RESET_REGISTRATION_STATE);
+      store.dispatch(storeActions.RESET_REGISTRATION_STATE_AND_DEPENDENCIES);
     }
   },
   components: {

src/store/index.js

@@ -26,8 +26,8 @@ export const state = {
       glassToReplace: null,
     },
     lineItems:{
-      glassParts: null,
+      glassParts: {},
-      otherParts: null
+      otherParts: {}
     }
   },
   applicationUser: {
@@ -125,9 +125,8 @@ export const mutations = {
 
   },
   resetPartsState(state) {
-    state.glassParts = null;
+    state.order.lineItems.glassParts = null;
-    state.childParts = null;
+    state.order.lineItems.otherParts = null;
-    state.otherParts = null;
   }
 }
 

src/ux-components/radio/radio.spec.js

@@ -77,7 +77,7 @@ describe("radio.vue", () => {
     });
     wrapper.vm.handleCheckChange();
     // Assert
-    expect(wrapper.emitted()["isCheckedChanged"][0]).toEqual([{"buttonID": "List Card Checkbox", value: "List Card Checkbox", checkValue: Boolean}]);
+    expect(wrapper.emitted()["isCheckedChanged"][0]).toEqual([{"buttonID": "List Card Checkbox", value: "List Card Checkbox", checkValue: false}]);
   });
 
   it("Should set checkValue data if selectedButtonIDs has value(s)", async () => {

src/ux-components/radio/radio.vue

@@ -48,6 +48,8 @@ export default {
   created() {
     if (this.selectedValues) {
       this.checkValue = this.selectedValues[0] === this.value;
+    }else{
+      this.checkValue = false;
     }
   },
   methods: {

src/ux-components/text-link/text-link.vue

@@ -25,6 +25,7 @@ export default {
 
 <style lang="scss">
 a {
+  display: inline-flex !important;
   color: $blue;
   text-underline-offset: 0.5em;
   line-height: 26px;
@@ -42,7 +43,6 @@ a {
   &.navigation-link {
     color: $black;
     line-height: 26px;
-    display: inline-flex;
     text-transform: capitalize;
     white-space: nowrap;
   }