CSR-514 Fix merge conflicts

jest.config.js

@@ -12,6 +12,8 @@ module.exports = {
     "!src/router/**/*.js",
     "!src/helpers/unit-test-helper.js",
     "!src/layouts/vehicle-damage/windshield-options/windshield-options.vue",
+    "!src/layouts/molding-questions/**/*.vue",
+    "!src/layouts/capability-questions/**/*.vue",
     "!src/layouts/part-questions/**/*.vue",
     "!src/layouts/reveal/**/*.vue",
     "!src/ux-components/text-link/**/*.vue",

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

@@ -7,6 +7,7 @@
     <div class="w-100 d-flex justify-content-center">
       <fieldset class="w-100" :aria-required=isRequired :class="getFieldSetClasses" :role="isMultiSelect ? 'group' : 'radiogroup'" :aria-labelledby="formattedGroupName">
         <legend class="sr-only" :data-focus-target="formattedGroupName" :id="formattedGroupName" tabindex="-1">
+          {{ questionText }}
           {{(isMultiSelect && answers && answers.length > 1) ? 'Select one or more options below.' : 'Select an option below.' }}
         </legend>
         <div :class="getComponentLoopWrapperClasses" role="application">
@@ -35,6 +36,7 @@
               data-test="button"
               :validationRules="validationRules"
               :class="[suppressError ? 'alertError' : '']"
+              :valueToLogType="valueToLogType"
             />
             <!-- For nested questions -->
             <transition name="fade" mode="out-in">
@@ -89,7 +91,8 @@ export default {
     modelValue: [Array, String],
     validationRules: String,
     suppressError: Boolean,
-    useTextForValue: Boolean
+    useTextForValue: Boolean,
+    valueToLogType: String,
   },
   computed: {
     formattedGroupName() {

src/common-components/funnel-header/menu-modal/menu-modal.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="menu-modal-container">
-    <button class="menu-button" type="button" :class="[isActive ? 'active' : '']" data-bs-toggle="modal" data-bs-target="#footerModal">
+    <button class="menu-button" type="button" :class="[isActive ? 'active' : '']" data-bs-toggle="modal" data-bs-target="#footerModal" aria-label="Hamburger Menu (modal window)">
       <div class="bar1"></div>
       <div class="bar2"></div>
       <div class="bar3"></div>

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

@@ -13,6 +13,7 @@
 			:aria-disabled="isDisabled"
 			:disabled="isDisabled"
 			:aria-required="isRequired"
+			:aria-label="questionText"
 			:class="[hasIcon ? 'has-icon' : '', iconRight ? 'icon-right' : '']"
 			:validationRules="validationRules"
 			@change="handleChange"

src/constants/analytics.js

@@ -29,5 +29,8 @@ const GaLabels = {
   ADDRESS_LOOKUP: 'Address_Look_up', 
 };
 
+const ValueToLogTypes = {
+  LAST_5: "last_5",
+};
 
-export { analyticsPageEvents, GaCategories, GaActions, GaLabels, GaEvents};
+export { analyticsPageEvents, GaCategories, GaActions, GaLabels, GaEvents, ValueToLogTypes };

src/constants/header-keys.js

@@ -0,0 +1,3 @@
+export const headerKeys = {
+    EXPERIMENT: "X-Experiment-Data"
+}

src/constants/store-actions.js

@@ -32,6 +32,7 @@ const storeActions = {
   GET_EXPERIMENTS_BY_USER: "GetExperimentsByUser",
   RUN_EXPERIMENTS_FOR_TRIGGER: "runExperimentsForTrigger",
   CLEAR_VIN: "clearVin",
+  RESET_SAVE_ORDER_PROMISE: "resetSaveOrderPromise",
 
   // DEPENDENCY MUTATIONS
   RESET_VEHICLE_STATE_AND_DEPENDENCIES: "resetVehicleAndDependencies",

src/constants/store-mutations.js

@@ -39,7 +39,7 @@ const storeMutations = {
   UPDATE_REFERRAL_DATE: "updateReferralDate",
   UPDATE_REFERRAL_CORRELATION_ID: "updateReferralCorrelationId",
   UPDATE_PARENT_ACCT_NUMBER: "updateParentAcctNumber",
-  UPDATE_SAVE_QUOTE_ID: "updateSaveQuoteId",
+  UPDATE_SAVED_SESSION_ID: "updateSavedSessionId",
   UPDATE_CRM_CUSTOMER_ID: "updateCrmCustomerId",
 
   // EVENT BUS MUTATIONS
@@ -52,6 +52,7 @@ const storeMutations = {
   RESET_REGISTRATION_STATE: "resetRegistrationState",
   RESET_GLASS_PARTS_STATE: "resetGlassPartsState",
   RESET_STATE: "resetState",
+  RESET_SAVE_ORDER_PROMISE: "resetSaveOrderPromise",
 
   // OTHER MUTATIONS
   UPDATE_PAGE_DATA: "updatePageData",
@@ -61,7 +62,7 @@ const storeMutations = {
 
   // EXPERIMENT MUTATIONS
   UPDATE_EXPERIMENTS: "updateExperiments",
-  UPDATE_TRIGGERED_SITE_ENTRY: "updateTriggeredSiteEntry"
+  UPDATE_TRIGGERED_SITE_ENTRY: "updateTriggeredSiteEntry",
 };
 
 export { storeMutations };

src/global-methods.js

@@ -1,16 +1,24 @@
 import axios from "axios";
 import analyticsMixIn from "@/mixins/analytics-mixin.js";
+import store from "@/store";
 
 import { applicationConfig } from "@/constants/application-config.js";
 import { GaCategories, GaActions, GaLabels } from "@/constants/analytics";
+import { headerKeys } from "@/constants/header-keys";
 
 export default {
   callHttpClient({ method, endpoint, payload, logApiCall = true }) {
     return new Promise((resolve, reject) => {
-      const cfDistroUrl = applicationConfig.CONSUMER_CF_DISTRO;
+      let cfDistroUrl = applicationConfig.CONSUMER_CF_DISTRO;
       const payloadAndAnalyticsData = Object.assign({}, payload, { AppName: "FixMyGlass" });
+      const headers = {
+        [headerKeys.EXPERIMENT]: JSON.stringify(store.getters.experimentSettings)
+      }
 
-      axios({ method: method, url: cfDistroUrl + endpoint, data: payloadAndAnalyticsData, crossDomain: true, responseType: {} })
+      if (endpoint.includes("/vehicle/"))
+        cfDistroUrl = "https://localhost:44331"
+
+      axios({ method: method, url: cfDistroUrl + endpoint, data: payloadAndAnalyticsData, crossDomain: true, responseType: {}, headers: headers })
         .then((response) => {
 
           if (logApiCall) {

src/helpers/heritage-integration/cookie-helper.js

@@ -15,7 +15,7 @@ export function updateOrCreateFunnelCookie() {
     // Set up cookie with all the props.
     setFunnelCookieProperties({
         LastTouched: new Date().toUTCString(),
-        SavedQuoteTimeoutDate: store.getters.applicationUser.savedSessionTimeout,
+        SavedSessionTimeoutDate: store.getters.applicationUser.savedSessionTimeout,
         DidHeritageFunnelUpdateLast: false,
         ShouldResetState: false,
         ReferralNumber: store.getters.order.referralNumber,

src/helpers/heritage-integration/navigation-helper.spec.js

@@ -309,10 +309,10 @@ describe("navigateToHeritageFunnel", () => {
         const mockCorrelationId = "55";
         const mockReferralDate = "2022";
         const mockAccountNumber = "167132";
-        const mockSaveQuoteId = "xxx-xxx-xxx";
+        const mockSavedSessionId = "xxx-xxx-xxx";
         const mockCrmCustomerId = "xxx-xxx-xxx"
 
-        const mockOrderInfo = getMockOrderInfo(mockReferralNumber, mockCorrelationId, mockReferralDate, mockAccountNumber, mockSaveQuoteId, mockCrmCustomerId);
+        const mockOrderInfo = getMockOrderInfo(mockReferralNumber, mockCorrelationId, mockReferralDate, mockAccountNumber, mockSavedSessionId, mockCrmCustomerId);
 
         const mockData = {
             actionList: [{
@@ -344,10 +344,10 @@ describe("navigateToHeritageFunnel", () => {
         const mockCorrelationId = "55";
         const mockReferralDate = "2022";
         const mockAccountNumber = "167132";
-        const mockSaveQuoteId = "xxx-xxx-xxx";
+        const mockSavedSessionId = "xxx-xxx-xxx";
         const mockCrmCustomerId = "xxx-xxx-xxx"
 
-        const mockOrderInfo = getMockOrderInfo(mockReferralNumber, mockCorrelationId, mockReferralDate, mockAccountNumber, mockSaveQuoteId, mockCrmCustomerId);
+        const mockOrderInfo = getMockOrderInfo(mockReferralNumber, mockCorrelationId, mockReferralDate, mockAccountNumber, mockSavedSessionId, mockCrmCustomerId);
 
         const mockData = {
             actionList: [{

src/helpers/heritage-integration/order-helper.js

@@ -60,6 +60,8 @@ export async function saveOrder() {
     and returns the response.
 */
 async function loadOrder(referralNumber, referralDate, referralCorrelationId, accountNumber) {
+    // await the saveOrderPromise in the store to make sure we're loading up to date information
+    await store.getters.applicationUser.saveOrderPromise;
     const response = await baseMixin.methods.dispatchStoreAction(storeActions.LOAD_ORDER,
         {
             referralNumber: referralNumber.toString(),
@@ -82,7 +84,7 @@ async function saveOrderHelper() {
         referralCorrelationId: savedOrderInfo.data.referralCorrelationId,
         referralDate: savedOrderInfo.data.referralDate,
         accountNumber: savedOrderInfo.data.accountNumber.toString(),
-        saveQuoteId: savedOrderInfo.data.saveQuoteId,
+        savedSessionId: savedOrderInfo.data.savedSessionId,
         crmCustomerId: savedOrderInfo.data.crmCustomerId.toString(),
     }, false);
 

src/helpers/heritage-integration/order-helper.spec.js

@@ -112,10 +112,10 @@ describe("saveOrder", () => {
         const mockCorrelationId = "55";
         const mockReferralDate = "2022";
         const mockAccountNumber = "167132";
-        const mockSaveQuoteId = "xxx-xxx-xxx";
+        const mockSavedSessionId = "xxx-xxx-xxx";
         const mockCrmCustomerId = "xxx-xxx-xxx"
 
-        const mockOrderInfo = getMockOrderInfo(mockReferralNumber, mockCorrelationId, mockReferralDate, mockAccountNumber, mockSaveQuoteId, mockCrmCustomerId);
+        const mockOrderInfo = getMockOrderInfo(mockReferralNumber, mockCorrelationId, mockReferralDate, mockAccountNumber, mockSavedSessionId, mockCrmCustomerId);
 
         const mockData = {
             actionList: [
@@ -141,7 +141,7 @@ describe("saveOrder", () => {
             referralDate: mockReferralDate,
             referralCorrelationId: mockCorrelationId,
             accountNumber: mockAccountNumber,
-            saveQuoteId: mockSaveQuoteId,
+            savedSessionId: mockSavedSessionId,
             crmCustomerId: mockCrmCustomerId,
         }, false);
     });
@@ -152,10 +152,10 @@ describe("saveOrder", () => {
         const mockReferralDate = "2022-03-15T10:56:24.597";
         const mockReferralCorrelationId = "404d2b04-f86e-45c3-b373-127b6217b060";
         const mockAccountNumber = "167132";
-        const mockSaveQuoteId = "xxx-xxx-xxx";
+        const mockSavedSessionId = "xxx-xxx-xxx";
         const mockCrmCustomerId = "xxx-xxx-xxx"
 
-        const mockOrderInfo = getMockOrderInfo(mockReferralNumber, mockReferralCorrelationId, mockReferralDate, mockAccountNumber, mockSaveQuoteId, mockCrmCustomerId);
+        const mockOrderInfo = getMockOrderInfo(mockReferralNumber, mockReferralCorrelationId, mockReferralDate, mockAccountNumber, mockSavedSessionId, mockCrmCustomerId);
 
         const mockData = {
             actionList: [{

src/helpers/heritage-integration/session-helper.js

@@ -28,7 +28,7 @@ export function isAnalyticsSessionStillActive() {
 */
 export function isSavedSessionStillActive() {
     if (getFunnelCookie() !== null) {
-        const savedSessionTimeStamp = new Date(getFunnelCookie().SavedQuoteTimeoutDate);
+        const savedSessionTimeStamp = new Date(getFunnelCookie().SavedSessionTimeoutDate);
         const isSavedSessionTimedOut = (new Date(new Date().toUTCString()) > savedSessionTimeStamp);
 
         if (isSavedSessionTimedOut) {

src/helpers/heritage-integration/session-helper.spec.js

@@ -41,7 +41,7 @@ describe("isSavedSessionStillActive", () => {
         mockDate.setDate(mockDate.getDate() + 1);
         
         cookieHelper.getFunnelCookie = jest.spyOn(cookieHelper, "getFunnelCookie")
-            .mockReturnValue({ SavedQuoteTimeoutDate: mockDate });
+            .mockReturnValue({ SavedSessionTimeoutDate: mockDate });
 
         // Act
         const result = isSavedSessionStillActive();
@@ -56,7 +56,7 @@ describe("isSavedSessionStillActive", () => {
         mockDate.setDate(mockDate.getDate() - 1)
 
         cookieHelper.getFunnelCookie = jest.spyOn(cookieHelper, "getFunnelCookie")
-            .mockReturnValue({ SavedQuoteTimeoutDate: mockDate });
+            .mockReturnValue({ SavedSessionTimeoutDate: mockDate });
 
         // Act
         const result = isSavedSessionStillActive();

src/helpers/unit-test-helper.js

@@ -7,7 +7,7 @@ import { cookieNames } from "@/constants/cookie-names";
 import { Form } from "vee-validate";
 import baseMixin from "@/mixins/base-mixin";
 import { getCookieDomainValue } from "@/helpers/heritage-integration/cookie-helper";
-import { analyticsPageEvents, GaCategories, GaActions, GaLabels, GaEvents } from "@/constants/analytics";
+import { analyticsPageEvents, GaCategories, GaActions, GaLabels, GaEvents, ValueToLogTypes } from "@/constants/analytics";
 import { queryStrings } from "@/constants/query-strings";
 import { routerParams } from "@/router/router-constants/router-params";
 
@@ -48,6 +48,7 @@ export function getMountOptions(mockData) {
   mocks.GaActions = GaActions;
   mocks.GaLabels = GaLabels;
   mocks.GaEvents = GaEvents;
+  mocks.ValueToLogTypes = ValueToLogTypes;
   mocks.queryStrings = queryStrings;
   mocks.routerParams = routerParams;
 
@@ -90,13 +91,13 @@ export function removeAllTestCookies() {
   });
 }
 
-export function getMockOrderInfo(mockReferralNumber, mockCorrelationId, mockReferralDate, accountNumber = "0", saveQuoteId, crmCustomerId) {
+export function getMockOrderInfo(mockReferralNumber, mockCorrelationId, mockReferralDate, accountNumber = "0", savedSessionId, crmCustomerId) {
   return {
       referralNumber: mockReferralNumber,
       referralCorrelationId: mockCorrelationId,
       referralDate: mockReferralDate,
       accountNumber: accountNumber,
-      saveQuoteId: saveQuoteId,
+      savedSessionId: savedSessionId,
       crmCustomerId: crmCustomerId,
   }
 }

src/layouts/address-vehicles/address-vehicles-question/address-vehicles-question.spec.js

@@ -1,5 +1,7 @@
 import { shallowMount } from "@vue/test-utils";
 import addressVehiclesQuestion from "@/layouts/address-vehicles/address-vehicles-question/address-vehicles-question";
+import { ValueToLogTypes } from "@/constants/analytics";
+ 
 
 describe("addressVehiclesQuestion.vue", () => {
 
@@ -54,9 +56,15 @@ const mockMixin = {
             return 'FoundWindshieldTestReturn';
           }
           return null;
-        }),
+      }),
-        vehicles: jest.fn(() => {
+      vehicles: jest.fn(() => {
-            return [{ vehicle: "test" }];
+          return [{ vehicle: "test" }];
-          })
+      })
-    }
+    },
+    computed: {
+      ValueToLogTypes() {
+        return ValueToLogTypes;
+      }
+    },
+
   }

src/layouts/address-vehicles/address-vehicles-question/address-vehicles-question.vue

@@ -8,6 +8,7 @@
     v-model="selectedVehicleVinAsArray"
     isRequired
     :validation-rules="validationRules"
+    :valueToLogType="ValueToLogTypes.LAST_5"
   />
   <alert ref="differentVehicleAlert"
     v-if="isCarIdDifferent"

src/layouts/capability-questions/capability-questions.vue

@@ -0,0 +1,165 @@
+<template>
+    <Form
+      @submit="onSubmit"
+      @invalid-submit="onInvalidSubmit"
+      ref="theForm"
+      v-slot="{ meta }"
+    >
+        <div class="page-container-grouped-styles capability-questions">
+            <loadingModal ref="loadingModal"/>
+            <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
+            <vehicleBanner cmsWidgetName="VehicleBannerWidget" :displayGenericVehicleImage=false />
+            <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" />
+            <div class="fade-on-route-transition sub-container make-tall">
+                <h1>CAPABILITY QUESTIONS TEMPORARY PLACEHOLDER</h1>
+                <alert
+                    ref="alertFewMoreQuestions"
+                    class="my-5"
+                    alertClass="alert-warning"
+                    :manualHeadline="AlertFewMoreQuestionsHeader"
+                    :manualCopy="AlertFewMoreQuestionsCopy"
+                    v-bind:isDismissible="false"
+                />
+                <div v-for="(part, i) in capabilityQuestionsData" :key="i">
+                    <questionChain
+                        ref="questionChain"
+                        v-model="selectedModel"
+                        :questionData="part"
+                        :partIndex="i"
+                        v-if="showThisPartQuestionChain(part, i)"
+                        validationRules="questions-required"
+                    />
+                </div>
+                <funnel-footer
+                    ref="funnelFooter"
+                    cmsWidgetName="FunnelFooterWidget"
+                    :isForwardActionDisabled="!meta.valid"
+                    @back-clicked="backButtonAction"
+                    @ForwardClicked="forwardButtonAction"
+                />
+            </div>
+        </div>
+    </Form>
+</template>
+
+<script>
+// Components
+import funnelHeader from "@/common-components/funnel-header/funnel-header";
+import vehicleBanner from "@/common-components/vehicle-banner/vehicle-banner";
+import alert from "@/ux-components/alert/alert";
+import questionChain from "@/common-components/question-chain/question-chain";
+import funnelSubHeader from "@/common-components/funnel-sub-header/funnel-sub-header";
+import funnelFooter from "@/common-components/funnel-footer/funnel-footer";
+import loadingModal from '@/common-components/loading-modal/loading-modal.vue';
+
+// Supporting Files
+import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
+import { settleAllPromises } from "@/helpers/layout-helper";
+import store from "@/store";
+import { storeActions } from "@/constants/store-actions";
+import { storeMutations } from "@/constants/store-mutations";
+import { fmgPageValues } from "@/router/router-constants/fmgPage-values";
+import { Form, defineRule } from "vee-validate";
+import { required } from "@/helpers/validation-rules";
+import { errorMessages } from "@/constants/error-messages";
+
+// DEFINE VALIDATION RULES
+defineRule("questions-required", required(errorMessages.OPTION_REQUIRED));
+
+export default {
+    name: "capability-questions",
+    async beforeRouteEnter(to, from, next) {
+        // Call APIs
+        const cmsContentPromise = fetchCmsContentForPage(to.query.fmgPage);
+
+        // Settle promises and get results
+        const promiseResultMap = [
+            {
+                resultKey: "cmsContent",
+                promise: cmsContentPromise,
+            },
+         ];
+
+        const resultMap = await settleAllPromises(promiseResultMap);
+
+        // Call the "next" function to complete the transition to this page.
+        next((vm) => {
+            vm.setCmsContent(resultMap.cmsContent);
+        });
+    },
+    data() {
+        return {
+            selectedModel: [],
+            partsQuestionsData: this.$store.getters.pageData(fmgPageValues.CAPABILITY_QUESTIONS).partsOrQuestions.filter((p) => {
+                if (Array.isArray(p.partQuestions) && p.partQuestions.length > 0) {
+                    return {
+                        glassName: p.glassName,
+                        glassLocation: p.glassLocation,
+                        partQuestions: p.partQuestions,
+                    };
+                }
+            }),
+            currentPartNum: 0,
+        };
+    },
+    computed: {
+        AlertFewMoreQuestionsHeader() {
+			return this.getCmsContent("AlertPartsQuestions", "HeadlineText");
+		},
+        AlertFewMoreQuestionsCopy() {
+			return this.getCmsContent("AlertPartsQuestions", "BodyText");
+		},
+    },
+    methods: {
+        arePagePrerequisitesValid() {
+            return true; // TODO - DO TRUE TEST OF PAGEDATA
+            // return Object.keys(store.getters.pageData(fmgPageValues.CAPABILITY_QUESTIONS)).length > 0;
+        },
+        showThisPartQuestionChain(part, i) {
+            if (part.partQuestions?.length < 1) { return false; } // return false if only one partQuestion
+            if (this.currentPartNum === i || part.answerData?.answerResult.length > 0) { return true; }
+            return false;
+        },
+        backButtonAction() {
+            // route to move backwards
+            this.$router.navigate(
+                this.navigationScenarios.CLICKED_BACK,
+                this.$route
+            );
+        },
+        async forwardButtonAction() {
+            // TODO: TO COME
+        },
+    },
+    watch: {
+        selectedModel(model) {
+            this.capabilityQuestionsData[model.partIndex].answerData = {
+                answerResult: model.answerResult,
+                answeredQuestions: model.answeredQuestions,
+            }
+            this.currentPartNum = model.partIndex + 1;
+        },
+    },
+    components: {
+        funnelHeader,
+        vehicleBanner,
+        alert,
+        questionChain,
+        funnelSubHeader,
+        funnelFooter,
+        loadingModal,
+        Form,
+    },
+};
+</script>
+
+<style lang="scss">
+  .capability-questions {
+      .question-text {
+        margin-bottom: .5rem;
+        span {
+            text-align: left;
+        }
+    }
+  }
+</style>

src/layouts/license-plate-lookup/license-plate-lookup.spec.js

@@ -235,7 +235,7 @@ describe("license-plate-lookup.vue", () => {
         expect(wrapper.vm.$router.navigate).toHaveBeenCalled();
       });
 
-      test("navigateToHeritageFunnel should be called if isCarIdDifferent is false or isSelectedGlassAvailableForVehicle is true when navigateForward is called", async () => {
+      test("navigateForwardWithSingleCarMatch should be called if isCarIdDifferent is false or isSelectedGlassAvailableForVehicle is true when navigateForward is called", async () => {
 
         // Arrange
         const { wrapper } = setupMocks({});
@@ -247,11 +247,11 @@ describe("license-plate-lookup.vue", () => {
         wrapper.vm.getCmsContent = jest.fn().mockImplementation(() => {
           return '';
         });
-        navigateToHeritage.navigateToHeritageFunnel = jest.fn();
+        wrapper.vm.navigateForwardWithSingleCarMatch = jest.fn();
         await wrapper.vm.navigateForward();
 
         //Assert
-        expect(navigateToHeritage.navigateToHeritageFunnel).toHaveBeenCalled();
+        expect(wrapper.vm.navigateForwardWithSingleCarMatch).toHaveBeenCalled();
       });
 
       test("carId matches returned vehicle => navigateForwardWithSingleCarMatch", async () => {

src/layouts/molding-questions/molding-questions.vue

@@ -0,0 +1,202 @@
+<template>
+    <Form
+      @submit="onSubmit"
+      @invalid-submit="onInvalidSubmit"
+      ref="theForm"
+      v-slot="{ meta }"
+    >
+        <div class="page-container-grouped-styles molding-questions">
+            <loadingModal ref="loadingModal"/>
+            <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
+            <vehicleBanner cmsWidgetName="VehicleBannerWidget" :displayGenericVehicleImage=false />
+            <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" />
+            <div class="fade-on-route-transition sub-container make-tall">
+                <h1>MOLDING QUESTIONS TEMPORARY PLACEHOLDER</h1>
+                <alert
+                    ref="alertFewMoreQuestions"
+                    class="my-5"
+                    alertClass="alert-warning"
+                    :manualHeadline="AlertFewMoreQuestionsHeader"
+                    :manualCopy="AlertFewMoreQuestionsCopy"
+                    v-bind:isDismissible="false"
+                />
+                <div v-for="(part, i) in moldingQuestionsData" :key="i">
+                    <questionChain
+                        ref="questionChain"
+                        v-model="selectedModel"
+                        :questionData="part"
+                        :partIndex="i"
+                        v-if="showThisPartQuestionChain(part, i)"
+                        validationRules="questions-required"
+                    />
+                </div>
+                <funnel-footer
+                    ref="funnelFooter"
+                    cmsWidgetName="FunnelFooterWidget"
+                    :isForwardActionDisabled="!meta.valid"
+                    @back-clicked="backButtonAction"
+                    @ForwardClicked="forwardButtonAction"
+                />
+            </div>
+        </div>
+    </Form>
+</template>
+
+<script>
+// Components
+import funnelHeader from "@/common-components/funnel-header/funnel-header";
+import vehicleBanner from "@/common-components/vehicle-banner/vehicle-banner";
+import alert from "@/ux-components/alert/alert";
+import questionChain from "@/common-components/question-chain/question-chain";
+import funnelSubHeader from "@/common-components/funnel-sub-header/funnel-sub-header";
+import funnelFooter from "@/common-components/funnel-footer/funnel-footer";
+import loadingModal from '@/common-components/loading-modal/loading-modal.vue';
+
+// Supporting Files
+import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
+import { settleAllPromises } from "@/helpers/layout-helper";
+import store from "@/store";
+import { storeActions } from "@/constants/store-actions";
+import { storeMutations } from "@/constants/store-mutations";
+import { fmgPageValues } from "@/router/router-constants/fmgPage-values";
+import { Form, defineRule } from "vee-validate";
+import { required } from "@/helpers/validation-rules";
+import { errorMessages } from "@/constants/error-messages";
+import vehicleQuestionsMixin from "@/mixins/vehicle-questions-mixin";
+import { navigateToHeritageFunnel } from "@/helpers/heritage-integration/navigation-helper";
+
+// DEFINE VALIDATION RULES
+defineRule("questions-required", required(errorMessages.OPTION_REQUIRED));
+
+export default {
+    name: "molding-questions",
+    mixins: [vehicleQuestionsMixin],
+    async beforeRouteEnter(to, from, next) {
+        // Call APIs
+        const cmsContentPromise = fetchCmsContentForPage(to.query.fmgPage);
+
+        // Settle promises and get results
+        const promiseResultMap = [
+            {
+                resultKey: "cmsContent",
+                promise: cmsContentPromise,
+            },
+         ];
+
+        const resultMap = await settleAllPromises(promiseResultMap);
+
+        // Call the "next" function to complete the transition to this page.
+        next((vm) => {
+            vm.setCmsContent(resultMap.cmsContent);
+        });
+    },
+    data() {
+        return {
+            selectedModel: [],
+            partsQuestionsData: this.$store.getters.pageData(fmgPageValues.MOLDING_QUESTIONS).partsOrQuestions.filter((p) => {
+                if (Array.isArray(p.partQuestions) && p.partQuestions.length > 0) {
+                    return {
+                        glassName: p.glassName,
+                        glassLocation: p.glassLocation,
+                        partQuestions: p.partQuestions,
+                    };
+                }
+            }),
+            currentPartNum: 0,
+        };
+    },
+    computed: {
+        AlertFewMoreQuestionsHeader() {
+			return this.getCmsContent("AlertPartsQuestions", "HeadlineText");
+		},
+        AlertFewMoreQuestionsCopy() {
+			return this.getCmsContent("AlertPartsQuestions", "BodyText");
+		},
+    },
+    methods: {
+        arePagePrerequisitesValid() {
+            return true;  // TODO - DO TRUE TEST OF PAGEDATA
+            // return Object.keys(store.getters.pageData(fmgPageValues.MOLDING_QUESTIONS)).length > 0;
+        },
+        showThisPartQuestionChain(part, i) {
+            if (part.partQuestions?.length < 1) { return false; } // return false if only one partQuestion
+            if (this.currentPartNum === i || part.answerData?.answerResult.length > 0) { return true; }
+            return false;
+        },
+        backButtonAction() {
+            // route to move backwards
+            this.$router.navigate(
+                this.navigationScenarios.CLICKED_BACK,
+                this.$route
+            );
+        },
+        async forwardButtonAction() {
+            const partQuestionAnswersArray = this.partsQuestionsData.map((item) => {
+                return {
+                    glassLocation: item.glassLocation,
+                    glassName: item.glassName,
+                    result: item.answerData.answerResult,
+                    answeredQuestions: item.answerData.answeredQuestions,
+                };
+            });
+
+            // save to vuex store as order.damage.partQuestionAnswers (array)
+            await this.dispatchStoreAction(this.storeActions.SAVE_PART_QUESTION_ANSWERS, partQuestionAnswersArray, false);
+
+            // call API parts method
+            const partsLookup = await this.dispatchStoreAction(storeActions.GET_PARTS)
+                .catch(() => {
+                    return this.$refs.funnelFooter.removeLoader();
+                });
+
+            const glassNameAndPartsForStore = partsLookup.data.glassNameAndPartsForStore;
+
+            const hasCapabilityQuestions = this.hasCapabilityQuestions(glassNameAndPartsForStore);
+
+            if (hasCapabilityQuestions) {
+                // if has capability questions
+                // go to capability-questions page
+                this.$router.navigate(this.navigationScenarios.HAS_CAPABILITY_QUESTIONS,this.$route,{},{},{partsOrQuestions: glassNameAndPartsForStore});
+            } else {
+                // if single parts only
+                const collectedGlassParts = this.reducedGlassPartsArray(glassNameAndPartsForStore);
+                // save to store lineItems.glassParts
+                this.$store.commit(storeMutations.UPDATE_GLASS_PARTS, collectedGlassParts);
+                // go to heritage quote page
+                this.$refs.loadingModal.showModal();
+                navigateToHeritageFunnel();
+            }
+        },
+    },
+    watch: {
+        selectedModel(model) {
+            this.moldingQuestionsData[model.partIndex].answerData = {
+                answerResult: model.answerResult,
+                answeredQuestions: model.answeredQuestions,
+            }
+            this.currentPartNum = model.partIndex + 1;
+        },
+    },
+    components: {
+        funnelHeader,
+        vehicleBanner,
+        alert,
+        questionChain,
+        funnelSubHeader,
+        funnelFooter,
+        loadingModal,
+        Form,
+    },
+};
+</script>
+
+<style lang="scss">
+  .molding-questions {
+      .question-text {
+        margin-bottom: .5rem;
+        span {
+            text-align: left;
+        }
+    }
+  }
+</style>

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

@@ -6,12 +6,14 @@
       v-slot="{ meta }"
     >
         <div class="page-container-grouped-styles part-questions">
+            <loadingModal ref="loadingModal"/>
             <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
             <vehicleBanner cmsWidgetName="VehicleBannerWidget" :displayGenericVehicleImage=false />
             <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" />
             <div class="fade-on-route-transition sub-container make-tall">
                 <alert
                     ref="alertFewMoreQuestions"
+                    cmsWidgetName="AlertFewMoreQuestionsWidget"
                     class="my-5"
                     alertClass="alert-warning"
                     :manualHeadline="AlertFewMoreQuestionsHeader"
@@ -31,7 +33,7 @@
                 <funnel-footer
                     ref="funnelFooter"
                     cmsWidgetName="FunnelFooterWidget"
-                    :isForwardActionDisabled="waitingForLoad || !meta.valid"
+                    :isForwardActionDisabled="!meta.valid"
                     @back-clicked="backButtonAction"
                     @ForwardClicked="forwardButtonAction"
                 />
@@ -48,6 +50,7 @@ import alert from "@/ux-components/alert/alert";
 import questionChain from "@/common-components/question-chain/question-chain";
 import funnelSubHeader from "@/common-components/funnel-sub-header/funnel-sub-header";
 import funnelFooter from "@/common-components/funnel-footer/funnel-footer";
+import loadingModal from '@/common-components/loading-modal/loading-modal.vue';
 
 // Supporting Files
 import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
@@ -59,6 +62,8 @@ import { fmgPageValues } from "@/router/router-constants/fmgPage-values";
 import { Form, defineRule } from "vee-validate";
 import { required } from "@/helpers/validation-rules";
 import { errorMessages } from "@/constants/error-messages";
+import vehicleQuestionsMixin from "@/mixins/vehicle-questions-mixin";
+import { navigateToHeritageFunnel } from "@/helpers/heritage-integration/navigation-helper";
 
 // DEFINE VALIDATION RULES
 defineRule("questions-required", required(errorMessages.OPTION_REQUIRED));
@@ -87,11 +92,16 @@ export default {
     data() {
         return {
             selectedModel: [],
-            partsQuestionsData: [],
+            partsQuestionsData: this.$store.getters.pageData(fmgPageValues.PART_QUESTIONS)?.partsOrQuestions.filter((p) => {
-            waitingForLoad: true,
+                if (Array.isArray(p.partQuestions) && p.partQuestions.length > 0) {
+                    return {
+                        glassName: p.glassName,
+                        glassLocation: p.glassLocation,
+                        partQuestions: p.partQuestions,
+                    };
+                }
+            }),
             currentPartNum: 0,
-            glassNameAndParts: [],
-            hasMultipleParts: false,
         };
     },
     computed: {
@@ -102,22 +112,7 @@ export default {
 			return this.getCmsContent("AlertPartsQuestions", "BodyText");
 		},
     },
-    async mounted() {
+    mixins: [vehicleQuestionsMixin],
-        const questionData = await this.$store.getters.pageData(fmgPageValues.PART_QUESTIONS);
-
-        // Map API result data, to part-questions data structure
-        this.partsQuestionsData = questionData.partsOrQuestions.filter((p) => {
-            if (Array.isArray(p.partQuestions) && p.partQuestions.length > 0) {
-                return {
-                    glassName: p.glassName,
-                    glassLocation: p.glassLocation,
-                    partQuestions: p.partQuestions,
-                };
-            }
-        });
-
-        this.waitingForLoad = false;
-    },
     methods: {
         showThisPartQuestionChain(part, i) {
             if (part.partQuestions?.length < 1) { return false; } // return false if only one partQuestion
@@ -147,43 +142,36 @@ export default {
             // call API parts method
             const partsLookup = await this.dispatchStoreAction(storeActions.GET_PARTS)
                 .catch(() => {
-                    this.$refs.funnelFooter.removeLoader();
+                    return this.$refs.funnelFooter.removeLoader();
                 });
 
-            if (!partsLookup) { return }
+            const glassNameAndPartsForStore = partsLookup.data.glassNameAndParts;
 
-            this.glassNameAndParts = partsLookup.data.glassNameAndParts;
+            const hasGlassLocationWithMultipleParts = this.hasGlassLocationWithMultipleParts(glassNameAndPartsForStore);
+            const hasChildPartQuestions = this.hasChildPartQuestions(glassNameAndPartsForStore);
+            const hasCapabilityQuestions = this.hasCapabilityQuestions(glassNameAndPartsForStore);
 
-            // test response data for multiple parts
+            // NAVIGATE FORWARD
-            this.hasMultipleParts = this.glassNameAndParts.some((glass) => glass.parts?.length > 1);
+            if (hasGlassLocationWithMultipleParts) {
-
-            // loop through all glass items
-            const collectedGlassParts = [];
-            this.glassNameAndParts.forEach((glass) => {
-                if (Array.isArray(glass.parts) && glass.parts.length === 1) {
-                    const singlePart = glass.parts[0];
-                    collectedGlassParts.push({
-                        "partNumber": singlePart.partNumber,
-                        "description": singlePart.description,
-                        "color": singlePart.color,
-                        "requiresRecalibration": singlePart.requiresRecalibration,
-                        "childParts": singlePart.childParts,
-                        "price": singlePart.price,
-                    })
-                }
-            });
-            store.commit(storeMutations.UPDATE_GLASS_PARTS, collectedGlassParts);
-            this.navigateForward();
-        },
-        async navigateForward() {
-            if (this.hasMultipleParts) {
                 // if multiple parts on any glass
                 // go to vehicle-parts page and pass the partsData
-                this.$router.navigate(this.navigationScenarios.ANSWERED_QUESTIONS_WITH_MULTIPLE_PARTS,this.$route,{},{},{partsOrQuestions: this.glassNameAndParts});
+                this.$router.navigate(this.navigationScenarios.ANSWERED_QUESTIONS_WITH_MULTIPLE_PARTS,this.$route,{},{},{partsOrQuestions: glassNameAndPartsForStore});
+            } else if (hasChildPartQuestions) {
+                // if any childpart questions
+                // go to molding-questions page and pass the partsData
+                this.$router.navigate(this.navigationScenarios.HAS_MOLDING_QUESTIONS,this.$route,{},{},{partsOrQuestions: glassNameAndPartsForStore});
+            } else if (hasCapabilityQuestions) {
+                // if has capability questions
+                // go to capability-questions page and pass the partsData
+                this.$router.navigate(this.navigationScenarios.HAS_CAPABILITY_QUESTIONS,this.$route,{},{},{partsOrQuestions: glassNameAndPartsForStore});
             } else {
                 // if single parts only
-                // go to quote page
+                const collectedGlassParts = this.reducedGlassPartsArray(glassNameAndPartsForStore);
-                this.$router.navigate(this.navigationScenarios.ANSWERED_QUESTIONS_WITH_SINGLE_PART,this.$route);
+                // save to store lineItems.glassParts
+                this.$store.commit(storeMutations.UPDATE_GLASS_PARTS, collectedGlassParts);
+                // go to heritage quote page
+                this.$refs.loadingModal.showModal();
+                navigateToHeritageFunnel();
             }
         },
         arePagePrerequisitesValid() {
@@ -206,18 +194,19 @@ export default {
         questionChain,
         funnelSubHeader,
         funnelFooter,
+        loadingModal,
         Form,
     },
 };
 </script>
 
 <style lang="scss">
-  .part-questions {
+.part-questions {
-      .question-text {
+    .question-text {
         margin-bottom: .5rem;
         span {
             text-align: left;
         }
     }
-  }
+}
 </style>

src/layouts/vehicle-damage/replace-options-question/replace-options-question.vue

@@ -1,6 +1,6 @@
 <template>
     <transition name="fade" mode="out-in">
-        <div v-if="isAvailable && this.answersToDisplay.length > 0" class="replace-options-question" :class="this.answersToDisplay.length < 2 ? 'd-none' : ''" aria-live="polite">
+        <div v-if="shouldDisplayReplaceOptionsQuestion" class="replace-options-question" :class="this.answersToDisplay.length < 2 ? 'd-none' : ''" aria-live="polite">
             <buttonQuestion
                 isWide
                 :questionText="questionText"
@@ -80,11 +80,19 @@ export default ({
                 return ans;
             });
         },
+        shouldDisplayReplaceOptionsQuestion() {
+            return this.isAvailable && this.answersToDisplay.length > 0
+        }
     },
     watch: {
         isAvailable(val) {
             // CHECK TO UPDATE SELECTED VALUES WHEN ISAVAILABLE IS TRUE
             val && this.updateSelectedValues();
+        },
+        shouldDisplayReplaceOptionsQuestion(shouldDisplayReplaceOptionsQuestion) {
+            if (!shouldDisplayReplaceOptionsQuestion) {
+                this.selectedValues = [];
+            }
         }
     },
     components: {

src/layouts/vehicle-damage/side-door-options/side-door-options.vue

@@ -46,6 +46,7 @@ import store from "@/store";
 import { defineRule } from "vee-validate";
 import { required } from "@/helpers/validation-rules";
 import { errorMessages } from "@/constants/error-messages";
+import { damageLocationsSelected } from "@/constants/damage-locations-selected";
 
 // DEFINE VALIDATION RULES
 defineRule("damage-side-required", required(errorMessages.DAMAGE_SIDE_REQUIRED));
@@ -112,7 +113,7 @@ export default ({
                 this.selectedValues = this.getSideDoorReplacementOptions(this.selectedValues.selectedDoorSides, this.selectedValues.selectedDriverSideReplaceOptions, newValue);
             }
         },
-         answersToDisplay(){
+        answersToDisplay(){
             const filteredAnswers = Array.isArray(this.answersFromCms) 
                 ? this.answersFromCms.filter(ans => 
                     {
@@ -128,10 +129,10 @@ export default ({
             });
         },
         isDriverSideReplaceOptionsQuestionAvailable(){
-            return (Array.isArray(this.selectedDoorSidesValues) && this.selectedDoorSidesValues.includes("DriverSide") && (Array.isArray(this.selectedDamageLocations) && this.selectedDamageLocations.includes("SideDoor")));
+            return (Array.isArray(this.selectedDoorSidesValues) && this.selectedDoorSidesValues.includes(damageLocationsSelected.DRIVERSIDE) && (Array.isArray(this.selectedDamageLocations) && this.selectedDamageLocations.includes(damageLocationsSelected.SIDEDOOR)));
         },
         isPassengerSideReplaceOptionsQuestionAvailable(){
-            return (Array.isArray(this.selectedDoorSidesValues) && this.selectedDoorSidesValues.includes("PassengerSide") && (Array.isArray(this.selectedDamageLocations) && this.selectedDamageLocations.includes("SideDoor")));
+            return (Array.isArray(this.selectedDoorSidesValues) && this.selectedDoorSidesValues.includes(damageLocationsSelected.PASSENGERSIDE) && (Array.isArray(this.selectedDamageLocations) && this.selectedDamageLocations.includes(damageLocationsSelected.SIDEDOOR)));
         },
     },
     components: {

src/layouts/vehicle-damage/windshield-options/windshield-damage-type-question/windshield-damage-type-question.vue

@@ -17,7 +17,6 @@
 
 <script>
 import buttonQuestion from "@/common-components/button-question/button-question";
-import store from "@/store";
 
 export default ({
     name: "windshieldDamageTypeQuestion",

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

@@ -55,7 +55,7 @@ defineRule("windshield-damage-type-required", required(errorMessages.WINDSHIELD_
 defineRule("windshield-chip-count-required", required(errorMessages.WINDSHIELD_CHIP_COUNT_REQUIRED));
 defineRule("windshield-replace-options-required", required(errorMessages.WINSHIELD_REPLACE_OPTIONS_REQUIRED));
 
-defineRule("check-for-repair-and-replace", (selectedWindshieldDamageType, [selectedDamageLocations]) => {
+defineRule("check-for-repair-and-replace", (selectedWindshieldDamageType, selectedDamageLocations) => {
     return selectedWindshieldDamageType.toString() != damageLocationsSelected.REPAIR || 
             !selectedDamageLocations.includes(damageLocationsSelected.WINDSHIELD) ||
             selectedDamageLocations.length === 1;

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

@@ -10,6 +10,7 @@ import { getMountOptions } from "@/helpers/unit-test-helper.js";
 import { nextTick } from "vue";
 import baseMixin from "@/mixins/base-mixin.js";
 import store from "@/store";
+import { navigateToHeritageFunnel } from "@/helpers/heritage-integration/navigation-helper";
 
 // Mock our module for promises.
 jest.mock("@/helpers/layout-helper.js", () => ({
@@ -21,6 +22,10 @@ jest.mock("@/helpers/cms-content-helper", () => ({
     fetchCmsContentForPage: jest.fn(),
 }));
 
+jest.mock("@/helpers/heritage-integration/navigation-helper", () => ({
+    navigateToHeritageFunnel: jest.fn()
+  }));
+
 // Mock store
 jest.mock("@/store", () => { return {}; }, { virtual: true });
 
@@ -211,17 +216,107 @@ describe("vehicle-parts.vue", () => {
 
     });
 
-    test("ForwardButtonAction triggers a router.navigate change and saves selected parts to store", async () => {
+    test("ForwardButtonAction triggers a router.navigate change if there are child part questions", async () => {
 
         //Arrange
-        store.getters.pageData.mockReturnValueOnce(basePartResponse);
+        store.getters.pageData.mockReturnValueOnce({
-        store.getters.lineItems = { glassParts: {} }
+            partsOrQuestions: [
-        store.commit = jest.fn();
+                {
+                    glassName: "Single",
+                    glassLocation: "Windshield",
+                    parts: [
+                        {
+                            "partNumber": "FW03861GTYN",
+                            "description": "rain sensor, heated glass, auto dimming mirror, solar, 3rd visor band, condensation sensor",
+                            "color": "Green Tint",
+                            "requiresRecalibration": false,
+                            "requiresCapabilityQuestions": false,
+                            "recalibrationType": null,
+                            "childParts": null,
+                            "childPartQuestions": [
+                                {
+                                "questionSequence": 1,
+                                "questionText": "Does the rubber seal around your windshield have a chrome strip running through it?",
+                                "answers": [
+                                    {
+                                    "answerResult": "WKT D1106 C",
+                                    "answerText": "Yes",
+                                    "nextQuestionSequence": null
+                                    },
+                                    {
+                                    "answerResult": "WKT D1106 B",
+                                    "answerText": "No",
+                                    "nextQuestionSequence": null
+                                    }
+                                ]
+                                }
+                            ]
+                        }
+                    ],
+                    partQuestions: null
+                }
+            ]
+        });
+        
+        const { wrapper } = setupMocks({
+            mountOptionsMockData: {
+                router: {
+                    navigate: jest.fn()
+                },
+                route: {
+                    query: {
+                        fmgPage: 'vehicle-parts',
+                    }
+                },
+                store: {
+                    getters: store.getters,
+                    commit: store.commit
+                },
+            }
+        });
+
+        wrapper.setData({ glassParts: { "Rear-Stationary": { partNumber: 'FW03861GTYN' } } });
+
+        //Act
+        vehicleParts.beforeRouteEnter.call(
+            wrapper.vm,
+            { query: { fmgPage: "vehicle-parts" } },
+            undefined,
+            (c) => c(wrapper.vm)
+        );
+
+        await wrapper.vm.forwardButtonAction();
+
+        //Assert
+        expect(wrapper.vm.$router.navigate).toHaveBeenCalled();
+    });
+
+    test("ForwardButtonAction triggers a router.navigate change if there are capability questions", async () => {
+
+        //Arrange
+        store.getters.pageData.mockReturnValueOnce({
+            partsOrQuestions: [
+                {
+                    glassName: "Single",
+                    glassLocation: "Windshield",
+                    parts: [
+                        {
+                            partNumber: "DB12209GTYN",
+                            description: "heated glass, solar, 1 hole",
+                            color: "Green Tint",
+                            requiresRecalibration: false,
+                            requiresCapabilityQuestions: true,
+                            childParts: null
+                        }
+                    ],
+                    partQuestions: null
+                }
+            ]
+        });
         
         const { wrapper } = setupMocks({
             mountOptionsMockData: {
                 router: {
-                    navigate: jest.fn(),
                     navigate: jest.fn()
                 },
                 route: {
@@ -251,6 +346,50 @@ describe("vehicle-parts.vue", () => {
         //Assert
         expect(wrapper.vm.$router.navigate).toHaveBeenCalled();
     });
+
+    test("ForwardButtonAction saves selected parts to store if no molding or capability questions", async () => {
+
+        //Arrange
+        store.getters.pageData.mockReturnValueOnce(basePartResponse);
+        store.getters.lineItems = { glassParts: {} }
+        
+        const { wrapper } = setupMocks({
+            mountOptionsMockData: {
+                router: {
+                    navigate: jest.fn()
+                },
+                route: {
+                    query: {
+                        fmgPage: 'vehicle-parts',
+                    }
+                },
+                store: {
+                    getters: store.getters,
+                    commit: store.commit
+                },
+                navigateToHeritageFunnel: jest.fn()
+            }
+        });
+
+        wrapper.vm.$store.commit = jest.fn();
+        wrapper.vm.$refs.loadingModal.showModal = jest.fn();
+
+        wrapper.setData({ glassParts: { "Rear-Stationary": { partNumber: 'DB12209GTYN' } } });
+
+        //Act
+        vehicleParts.beforeRouteEnter.call(
+            wrapper.vm,
+            { query: { fmgPage: "vehicle-parts" } },
+            undefined,
+            (c) => c(wrapper.vm)
+        );
+
+        await wrapper.vm.forwardButtonAction();
+
+        //Assert
+        expect(wrapper.vm.$store.commit).toHaveBeenCalled();
+        expect(navigateToHeritageFunnel).toHaveBeenCalled();
+    });
 });
 
 function setupMocks({ pageHeaderWidgetHeaderText = {}, mountOptionsMockData = {} }) {
@@ -288,6 +427,7 @@ function setupMocks({ pageHeaderWidgetHeaderText = {}, mountOptionsMockData = {}
 
     wrapper.vm.setCmsContent = baseMixin.methods.setCmsContent;
     wrapper.vm.$refs.funnelFooter.removeLoader = jest.fn();
+    wrapper.vm.$refs.loadingModal.showModal = jest.fn();
 
     return { wrapper, apiPromise };
 }

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

@@ -1,6 +1,7 @@
 <template>
   <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm">
     <div class="page-container-grouped-styles vehicle-parts">
+      <loadingModal ref="loadingModal"/>
       <funnelHeader ref="funnelHeader" cmsWidgetName="FunnelHeaderWidget" />
       <vehicleBanner
         ref="vehicleBanner"
@@ -49,217 +50,221 @@
 </template>
 
 <script>
-  // Components
+// Components
-  import glassPartQuestion from "@/layouts/vehicle-parts/glass-part-question/glass-part-question";
+import glassPartQuestion from "@/layouts/vehicle-parts/glass-part-question/glass-part-question";
-  import funnelHeader from "@/common-components/funnel-header/funnel-header";
+import funnelHeader from "@/common-components/funnel-header/funnel-header";
-  import vehicleBanner from "@/common-components/vehicle-banner/vehicle-banner";
+import vehicleBanner from "@/common-components/vehicle-banner/vehicle-banner";
-  import funnelSubHeader from "@/common-components/funnel-sub-header/funnel-sub-header";
+import funnelSubHeader from "@/common-components/funnel-sub-header/funnel-sub-header";
-  import funnelFooter from "@/common-components/funnel-footer/funnel-footer";
+import funnelFooter from "@/common-components/funnel-footer/funnel-footer";
-  import alert from "@/ux-components/alert/alert";
+import alert from "@/ux-components/alert/alert";
-  // Supporting Files
+import loadingModal from '@/common-components/loading-modal/loading-modal.vue';
-  import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
+// Supporting Files
-  import { settleAllPromises } from "@/helpers/layout-helper";
+import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
-  import { fmgPageValues } from "@/router/router-constants/fmgPage-values";
+import { settleAllPromises } from "@/helpers/layout-helper";
-  import store from "@/store";
+import { fmgPageValues } from "@/router/router-constants/fmgPage-values";
-  import { Form } from "vee-validate";
+import { Form } from "vee-validate";
-  import { storeActions } from "@/constants/store-actions";
+import store from "@/store";
+import { storeMutations } from "@/constants/store-mutations.js";
+import vehicleQuestionsMixin from "@/mixins/vehicle-questions-mixin";
+import { navigateToHeritageFunnel } from "@/helpers/heritage-integration/navigation-helper";
 
-  export default {
+export default {
     name: "vehicle-parts",
+    mixins: [vehicleQuestionsMixin],
     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",
+            resultKey: "cmsContent",
-          promise: cmsContentPromise,
+            promise: cmsContentPromise,
         },
-      ];
+        ];
-      const resultMap = await settleAllPromises(promiseResultMap);
+        const resultMap = await settleAllPromises(promiseResultMap);
-      // Call the "next" function to complete the transition to this page.
+        // Call the "next" function to complete the transition to this page.
-      next((vm) => {
+        next((vm) => {
         vm.setCmsContent(resultMap.cmsContent);
 
         // Glass Part Question dynamic component
         Object.keys(vm.$refs)
-          .filter(
+            .filter((r) => r.includes(vm.RefPrefix) && vm.$refs[r][0] !== undefined)
-            (r) => r.includes(vm.RefPrefix) && vm.$refs[r][0] !== undefined
+            .forEach((c) =>
-          )
-          .forEach((c) =>
             vm.$refs[c][0].initializeComponent({
-              ColorQuestionWidget: resultMap.cmsContent.ColorQuestionWidget,
+                ColorQuestionWidget: resultMap.cmsContent.ColorQuestionWidget,
-              FeatureQuestionWidget: resultMap.cmsContent.FeatureQuestionWidget,
+                FeatureQuestionWidget: resultMap.cmsContent.FeatureQuestionWidget,
             })
-          );
+            );
-      });
+        });
     },
     data() {
-      return {
+        return {
-        glassParts: {},
+            glassParts: {},
-        alertWidgetData: Object,
+            alertWidgetData: Object,
-        alreadyPopulatedPartsData: {},
+            alreadyPopulatedPartsData: {},
-      };
+        };
-    },
-    components: {
-      Form,
-      glassPartQuestion,
-      funnelHeader,
-      vehicleBanner,
-      funnelSubHeader,
-      funnelFooter,
-      alert,
     },
     computed: {
-      isForwardActionDisabled() {
+        isForwardActionDisabled() {
-        return (
+            return (
-          Object.keys(this.matchedParts).length !==
+                this.selectedGlassPartNumbers.length !== this.PartsFromApi.partsOrQuestions.length
-          this.PartsFromApi.partsOrQuestions.length
+            );
-        );
+        },
-      },
+        selectedGlassPartNumbers () {
-      matchedParts() {
+            // Compile all selected parts from the page.
-        const matchedParts = [];
+            const numberArray = [];
+            for (let glassPart of Object.values(this.glassParts)) {
+                if (glassPart?.partNumber) { numberArray.push(glassPart.partNumber) }
+            }
+            return numberArray;
+        },
+        PartsOrQuestions() {
+            const partsData = this.PartsFromApi;
 
-        // Match them to the parts from the API.
+            // Map API result data, to vehicle-parts data structure
-        this.PartsFromApi.partsOrQuestions.forEach((part) => {
+            const mappedData = partsData.partsOrQuestions.map((g) => {
-          const selectedPartForGlassLocationAndName =
+                return {
-            this.glassParts[`${part.glassLocation}-${part.glassName}`];
+                    glassName: g.glassName,
-          const selectedPartData = part.parts.filter(
+                    glassLocation: g.glassLocation,
-            (part) =>
+                    colorAnswers: g.parts.reduce((arr, p) => {
-              selectedPartForGlassLocationAndName &&
+                        arr.push({
-              part.partNumber == selectedPartForGlassLocationAndName?.partNumber
+                            ColorAnswerText: p.color,
-          )[0];
+                            FeatureAnswers: [
+                                {
+                                FeatureAnswerText: p.description === "" ? p.color : p.description,
+                                PartNumber: p.partNumber,
+                                },
+                            ],
+                        });
+                        return arr;
+                    }, []),
+                };
+            });
 
-          if (selectedPartData) matchedParts.push(selectedPartData);
+            return mappedData;
-        });
+        },
 
-        return matchedParts;
+        PartsFromApi() {
-      },
+            return this.$store.getters.pageData(fmgPageValues.VEHICLE_PARTS);
-      PartsOrQuestions() {
+        },
-        const partsData = this.PartsFromApi;
 
-        // Map API result data, to vehicle-parts data structure
+        RefPrefix() {
-        const mappedData = partsData.partsOrQuestions.map((g) => {
+            return "partQuestion";
-          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 mappedData;
-      },
-
-      PartsFromApi() {
-        return store.getters.pageData(fmgPageValues.VEHICLE_PARTS);
-      },
-
-      RefPrefix() {
-        return "partQuestion";
-      },
     },
     methods: {
-      arePagePrerequisitesValid() {
+        arePagePrerequisitesValid() {
-        // Check if isRepair is populated and if the pageData we need is here (Parts data)
+            // Check if isRepair is populated and if the pageData we need is here (Parts data)
-        if (
+            return store.getters.damage.isRepair != null &&
-          store.getters.damage.isRepair != null &&
+            Object.keys(store.getters.pageData(fmgPageValues.VEHICLE_PARTS)).length !== 0;
-          Object.keys(store.getters.pageData(fmgPageValues.VEHICLE_PARTS))
+        },
-            .length !== 0
+        backButtonAction() {
-        ) {
+            const hasPartQuestions = this.hasPartQuestions(this.$store.getters.pageData(fmgPageValues.PART_QUESTIONS)?.partsOrQuestions);
-          return true;
+            const backNavigationScenario = hasPartQuestions ? this.navigationScenarios.CLICKED_BACK_WITH_PART_QUESTION_ANSWERS : this.navigationScenarios.CLICKED_BACK_WITHOUT_PART_QUESTION_ANSWERS;
-        }
 
-        return false;
+            this.$router.navigate(
-      },
+                backNavigationScenario,
-      backButtonAction() {
+                this.$route
-        this.$router.navigate(
-          this.navigationScenarios.CLICKED_BACK,
-          this.$route
-        );
-      },
-      async 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
             );
+        },
+        async forwardButtonAction() {
+            const matchedParts = [];
 
-            if (isMatched) {
+            // Match them to the parts from the API.
-              matchedParts.push(currentPart);
+            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 = this.selectedGlassPartNumbers.some(
+                        (p) => p === currentPart.partNumber
+                    );
+
+                    if (isMatched) {
+                        matchedParts.push({
+                            "glassLocation": value.glassLocation,
+                            "glassName": value.glassName,
+                            "parts": [currentPart]
+                        });
+                    }
+                }
             }
-          }
-        }
 
-        // If no parts could be matched, throw an error.
+            const hasChildPartQuestions = this.hasChildPartQuestions(matchedParts);
-        if (this.isForwardActionDisabled) {
+            const hasCapabilityQuestions = this.hasCapabilityQuestions(matchedParts);
-          this.$refs.funnelFooter.removeLoader();
-          throw new Error("Could not match any parts to the selected parts");
-        }
 
-        // Save parts to the store.
+            // If no parts could be matched, throw an error (isForwardActionDisabled is based off of matchedParts)
-        await this.dispatchStoreAction(
+            if (this.isForwardActionDisabled) {
-          storeActions.SAVE_GLASS_PARTS,
+                this.$refs.funnelFooter.removeLoader();
-          matchedParts
+                throw new Error("Could not match any parts to the selected parts");
-        );
+            }
 
-        // Navigate to the next page.
+            // Navigate to the next page
-        this.$router.navigate(
+            if (hasChildPartQuestions) {
-          this.navigationScenarios.SELECTED_PARTS,
+                this.$router.navigate(
-          this.$route
+                    this.navigationScenarios.HAS_MOLDING_QUESTIONS,
-        );
+                    this.$route,
-      },
+                    {},
+                    {},
+                    {partsOrQuestions: matchedParts}
+                );
+            } else if (hasCapabilityQuestions) {
+                this.$router.navigate(
+                    this.navigationScenarios.HAS_CAPABILITY_QUESTIONS,
+                    this.$route,
+                    {},
+                    {},
+                    {partsOrQuestions: matchedParts}
+                );
 
-      LoadInitialPartsData() {
+            } else {
-        const partsData = this.PartsFromApi;
+                // if single parts only
-        const alreadyPopulatedPartsData =
+                const collectedGlassParts = this.reducedGlassPartsArray(matchedParts);
-          this.$store.getters.lineItems.glassParts === null
+                // save to store lineItems.glassParts
-            ? {}
+                this.$store.commit(storeMutations.UPDATE_GLASS_PARTS, collectedGlassParts);
-            : this.$store.getters.lineItems.glassParts;
 
-        partsData.partsOrQuestions.map((g) => {
+                // go to heritage quote page
-          // If the part is already populated, use the value from the store and populate the v-model.
+                this.$refs.loadingModal.showModal();
-          Object.keys(alreadyPopulatedPartsData).forEach((key) => {
+                navigateToHeritageFunnel();
-            const partNumber = alreadyPopulatedPartsData[key].partNumber;
+            }
-            g.parts.forEach((p) => {
+        },
-              if (p.partNumber === partNumber) {
+
-                this.glassParts[g.glassLocation + "-" + g.glassName] = {
+        LoadInitialPartsData() {
-                  [g.glassLocation]: [partNumber],
+            const partsData = this.PartsFromApi;
-                };
+            const alreadyPopulatedPartsData =
-              }
+                this.$store.getters.lineItems.glassParts === null
+                ? {}
+                : this.$store.getters.lineItems.glassParts;
+
+            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],
+                    };
+                    }
+                });
+                });
             });
-          });
+        },
-        });
-      },
     },
     mounted() {
-      this.LoadInitialPartsData();
+        this.LoadInitialPartsData();
     },
-  };
+    components: {
+        Form,
+        glassPartQuestion,
+        funnelHeader,
+        vehicleBanner,
+        funnelSubHeader,
+        funnelFooter,
+        alert,
+        loadingModal,
+    },
+};
 </script>

src/layouts/vin-lookup/vin-information/vin-information.spec.js

@@ -4,7 +4,9 @@ import vinInformation from "@/layouts/vin-lookup/vin-information/vin-information
 describe("vinInformation.vue", () => {
   it("Should return input class active if isActive is true", async () => {
     // Act
-    const wrapper = shallowMount(vinInformation);
+    const wrapper = shallowMount(vinInformation, {
+      mixins: [mockMixin]
+    });
 
     await wrapper.setData({
       isActive: true,
@@ -16,3 +18,9 @@ describe("vinInformation.vue", () => {
     expect(wrapper.vm.isActive).toEqual(false);
   });
 });
+
+const mockMixin = {
+  methods: {
+    getCmsContent: jest.fn()
+  }
+}

src/layouts/vin-lookup/vin-information/vin-information.vue

@@ -1,11 +1,15 @@
 <template>
   <div class="vin-information">
-    <div class="vin-toggle d-inline-flex" :class="[isActive ? 'active' : '']" @click="toggleClass()">
+    <div class="vin-toggle d-inline-flex mt-2" :class="[isActive ? 'active' : '']" @click="toggleClass()">
-      <textLink :text="HeadlineText" linkType="text" href="#!" />
+      <textLink
+        linkType="text"
+        href="#!"
+        :text="WhereCanIFindMyVINHeadline"
+      />
     </div>
     <div class="vin-info">
-      <div class="mt-2" v-html="BodyText"></div>
+      <div class="mt-2" v-html="WhereCanIFindMyVINBodyCopy"></div>
-      <img :src="OptionalImage" alt="" />
+      <img :src="WhereCanIFindMyVINImage" alt="" />
     </div>
   </div>
 </template>
@@ -13,6 +17,8 @@
 <script>
 
 import textLink from "@/ux-components/text-link/text-link";
+//Supporting files
+import { settleAllPromises } from "@/helpers/layout-helper";
 export default {
   name: "vinInformation",
   components: {
@@ -21,15 +27,23 @@ export default {
   data() {
     return {
       isActive: false,
-      HeadlineText: "Where can I find my VIN?",
-      BodyText: "<p class='mb-2'>You can find your VIN in a few places:</p> <ol> <li>Driver side windshield</li> <li>Driver side doorjamb</li> <li>Vehicle registration card</li> <li>Auto insurance card or app</li> </ol>",
-      OptionalImage: "https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/vin_location.svg?sfvrsn=63a9a2cf_3",
     };
   },
   methods: {
     toggleClass: function(event){
        this.isActive = !this.isActive;
     }
+  },
+  computed: {
+    WhereCanIFindMyVINHeadline(){
+      return this.getCmsContent("WhereCanIFindMyVINToggle", "HeaderText");
+    },
+    WhereCanIFindMyVINBodyCopy(){
+      return this.getCmsContent("WhereCanIFindMyVINToggle", "BodyText");
+    },
+    WhereCanIFindMyVINImage(){
+      return this.getCmsContent("WhereCanIFindMyVINToggle", "Image");
+    },
   }
 }
 
@@ -72,8 +86,11 @@ export default {
     transition: all 250ms ease-out;
     overflow: hidden;
     opacity: 0;
+    p {
+      margin-bottom: .5rem;
+    }
     img {
-      max-width: 420px;
+      max-width: 100%;
       width: 117%;
       height: auto;
     }

src/mixins/analytics-mixin.js

@@ -2,7 +2,7 @@ import { storeActions } from "@/constants/store-actions";
 import { setCookieProperties, getDeviceIdValue, getSessionIdValue, getSessionKeyValue } from "@/helpers/heritage-integration/cookie-helper";
 import { queryStrings } from "@/constants/query-strings";
 import { experimentSettings } from "@/constants/experiments";
-import { analyticsPageEvents, GaCategories, GaActions, GaLabels, GaEvents } from "@/constants/analytics";
+import { analyticsPageEvents, GaCategories, GaActions, GaLabels, GaEvents, ValueToLogTypes } from "@/constants/analytics";
 import { cookieNames } from "@/constants/cookie-names";
 
 import baseMixin from "@/mixins/base-mixin";
@@ -42,13 +42,14 @@ export default {
       baseMixin.methods.dispatchStoreAction(storeActions.LOG_CUSTOM_EVENT, payload, false);
     },
 
-    pushEventToGA(category, action, label, pushToLogApp = false) {
+    pushEventToGA(category, action, label, pushToLogApp = false, valueToLogType = null) {
       const currentPageName = getPageNameByQueryString();
+      const labelToLog = getValueToLog(label, valueToLogType);
       const eventToBePushed = {
         'event': GaEvents.GENERIC_EVENT,
         'category': category,
         'action': action,
-        'label': label,
+        'label': labelToLog,
         'value': undefined,
         'path': `/fmg/?${queryStrings.FMG_PAGE}=${currentPageName}`
       }
@@ -56,7 +57,7 @@ export default {
       pushToDataLayerIfDefined(eventToBePushed);
 
       if (pushToLogApp) {
-          this.logCustomEvent(category, action, label, undefined); 
+          this.logCustomEvent(category, action, labelToLog, undefined); 
       }
 
     },
@@ -145,6 +146,9 @@ export default {
     },
     GaLabels() {
       return GaLabels;
+    },
+    ValueToLogTypes() {
+      return ValueToLogTypes;
     }
   },
 };
@@ -164,3 +168,10 @@ function getPageNameByQueryString() {
     return '';
   }
 }
+
+function getValueToLog(value, valueToLogType) {
+  if (valueToLogType != null && valueToLogType === ValueToLogTypes.LAST_5 ) {
+    return value.slice(-5);
+  }
+  return value;
+}

src/mixins/analytics-mixin.spec.js

@@ -1,7 +1,7 @@
 import analyticsMixin from "@/mixins/analytics-mixin";
 import { setupMocksForJsFiles, setupCookies } from "@/helpers/unit-test-helper.js";
 import { storeActions } from "@/constants/store-actions";
-import { analyticsPageEvents, GaCategories, GaActions, GaLabels, GaEvents } from "@/constants/analytics";
+import { analyticsPageEvents, GaCategories, GaActions, GaLabels, GaEvents, ValueToLogTypes } from "@/constants/analytics";
 
 describe("analyticsMixin.js", () => {
   test("logPageView: calls dispatch with type and payload", () => {
@@ -39,21 +39,71 @@ describe("analyticsMixin.js", () => {
     expect(mocks.baseMixin.methods.dispatchStoreAction).toBeCalled();
   });
 
-  test("pushEventToGA, should call logEvent too", () => {
+  test("pushEventToGA, should call dataLayer push and logCustomEvent too", () => {
     // Arrange
+    window.dataLayer = [];
     const mockData = {
       actionList: [{
         actionName: storeActions.LOG_CUSTOM_EVENT
       }],
     }
     const mocks = setupMocksForJsFiles(mockData);
+    var mockDataLayer = [];
+    mockDataLayer.push({
+      event: 'event',
+      category: 'category',
+      action: 'action',
+      label: 'label',
+      value: undefined,
+      path: '/fmg/?fmgPage='
+   });
 
     // Act
     analyticsMixin.methods.pushEventToGA('category', 'action', 'label', true);
 
     // Assert
+    expect(mockDataLayer).toEqual(expect.arrayContaining(window.dataLayer));
     expect(mocks.baseMixin.methods.dispatchStoreAction).toBeCalled();
+  });
 
+  test("pushEventToGA, should call dataLayer push and ValueToLogTypes.LAST_5 only logs last 5 of label", () => {
+    // Arrange
+    window.dataLayer = [];
+    var expectedDataLayer = [];
+    expectedDataLayer.push({
+      event: 'event',
+      category: 'category',
+      action: 'action',
+      label: '33333',
+      value: undefined,
+      path: '/fmg/?fmgPage='
+   });
+
+    // Act
+    analyticsMixin.methods.pushEventToGA('category', 'action', '1111122222333333', false, ValueToLogTypes.LAST_5);
+
+    // Assert
+    expect(expectedDataLayer).toEqual(expect.arrayContaining(window.dataLayer));
+  });
+
+  test("pushEventToGA, should call dataLayer push and ValueToLogTypes.LAST_5 logs only the last 3 characters for a 3 character string", () => {
+    // Arrange
+    window.dataLayer = [];
+    var expectedDataLayer = [];
+    expectedDataLayer.push({
+      event: 'event',
+      category: 'category',
+      action: 'action',
+      label: '111',
+      value: undefined,
+      path: '/fmg/?fmgPage='
+   });
+
+    // Act
+    analyticsMixin.methods.pushEventToGA('category', 'action', '111', false, ValueToLogTypes.LAST_5);
+
+    // Assert
+    expect(expectedDataLayer).toEqual(expect.arrayContaining(window.dataLayer));
   });
 
   test("Experiments, should push to dataLayer with default Google Custom Dimension Index", () => {

src/mixins/experiment-mixin.js

@@ -0,0 +1,15 @@
+import store from "@/store";
+
+export default {
+    methods: {
+        hasSettingEqualTo(settingName, settingValue) {
+            return store.getters.experimentSettings[settingName] === settingValue;
+        },
+        hasSetting(settingName) {
+            return store.getters.experimentSettings.hasOwnProperty(settingName);
+        },
+        getSettingValue(settingName) {
+            return this.hasSetting(settingName) ? store.getters.experimentSettings[settingName] : null;
+        }
+    },
+}

src/mixins/experiment-mixin.spec.js

@@ -0,0 +1,148 @@
+import experimentMixin from "@/mixins/experiment-mixin";
+import { shallowMount } from "@vue/test-utils";
+import { getMountOptions } from "@/helpers/unit-test-helper.js";
+import store from "@/store";
+
+describe("experiment-mixin", () => {
+    describe("hasSettingEqualTo", () => {
+        test("setting exists and value matches => return true", () => {
+            // Arrange
+            const { wrapper } = setupMocks({});
+
+            // Act
+            const result = wrapper.vm.hasSettingEqualTo("Setting2", "Value2");
+
+            // Assert
+            expect(result).toEqual(true);
+        });
+
+        test("setting exists and value does not match => return false", () => {
+            // Arrange
+            const { wrapper } = setupMocks({});
+
+            // Act
+            const result = wrapper.vm.hasSettingEqualTo("Setting2", "Value3");
+
+            // Assert
+            expect(result).toEqual(false);
+        });
+
+        test("setting does not exist => return false", () => {
+            // Arrange
+            const { wrapper } = setupMocks({});
+
+            // Act
+            const result = wrapper.vm.hasSettingEqualTo("SettingBoogly", "Woogly");
+
+            // Assert
+            expect(result).toEqual(false);
+        });
+
+        test("there are no settings => return false", () => {
+            // Arrange
+            const { wrapper } = setupMocks({ experimentSettings: {} });
+
+            // Act
+            const result = wrapper.vm.hasSettingEqualTo("Setting2", "Value3");
+
+            // Assert
+            expect(result).toEqual(false);
+        });
+    });
+
+    describe("hasSetting", () => {
+        test("has setting => return true", () => {
+            // Arrange
+            const { wrapper } = setupMocks({});
+
+            // Act
+            const result = wrapper.vm.hasSetting("Setting4");
+
+            // Assert 
+            expect(result).toEqual(true);
+        });
+
+        test("does not have setting => return false", () => {
+            // Arrange
+            const { wrapper } = setupMocks({});
+
+            // Act
+            const result = wrapper.vm.hasSetting("BooglyWoogly");
+
+            // Assert 
+            expect(result).toEqual(false);
+        });
+
+        test("experimentSettings is empty => return false", () => {
+            // Arrange
+            const { wrapper } = setupMocks({ experimentSettings: {} });
+
+            // Act
+            const result = wrapper.vm.hasSetting("Setting4");
+
+            // Assert 
+            expect(result).toEqual(false);
+        });
+    });
+
+    describe("getSettingValue", () => {
+        test("has setting => return correct value", () => {
+            // Arrange
+            const { wrapper } = setupMocks({});
+
+            // Act
+            const result = wrapper.vm.getSettingValue("Setting3");
+
+            // Assert
+            expect(result).toEqual("Value3")
+        });
+
+        test("does not have setting => return null", () => {
+            // Arrange
+            const { wrapper } = setupMocks({});
+
+            // Act
+            const result = wrapper.vm.getSettingValue("Hello");
+
+            // Assert
+            expect(result).toBeNull();
+        });
+
+        test("experimentSettings is empty => return null", () => {
+            // Arrange
+            const { wrapper } = setupMocks({ experimentSettings: {} });
+
+            // Act
+            const result = wrapper.vm.getSettingValue("Hello");
+
+            // Assert
+            expect(result).toBeNull();
+        });
+    });
+});
+
+function setupMocks({ experimentSettings }) {
+    const mocks = getMountOptions({});
+
+    const testExperimentSettings =  {
+        "Setting1": "Value1",
+        "Setting2": "Value2",
+        "Setting3": "Value3",
+        "Setting4": "Value1",
+        "Setting5": "Value2",
+        "Setting6": "Value3"
+    };
+
+    store.getters = {
+        experimentSettings: experimentSettings ?? testExperimentSettings
+    };
+
+    const mockComponent = {
+        template: "<div></div>",
+        mixins: [experimentMixin]
+    };
+
+    const wrapper = shallowMount(mockComponent, mocks);
+
+    return { wrapper };
+}

src/mixins/vehicle-questions-mixin.js

@@ -0,0 +1,43 @@
+export default {
+
+    methods: {
+        hasPartQuestions(partsOrQuestions) {
+            return partsOrQuestions?.some(pq => pq.partQuestions?.length > 0);
+        },
+        hasGlassLocationWithMultipleParts(partsOrQuestions) {
+            return partsOrQuestions?.some(pq => pq.parts?.length > 1);
+        },
+        hasChildPartQuestions(partsOrQuestions) {
+            return partsOrQuestions.some(pq => {
+                return pq.parts?.some(part => part.childPartQuestions?.length > 0);
+            });
+        },
+        hasCapabilityQuestions(partsOrQuestions) {
+            return partsOrQuestions.some(pq => {
+                return pq.parts?.some(part => part.requiresCapabilityQuestions === true);
+            });
+        },
+        // method to only include keys listed for lineItems.glassParts in 
+        // https://safelite.atlassian.net/wiki/spaces/DC/pages/17137665/Catalog+Front-End+State#glassParts
+        reducedGlassPartsArray(glassParts) {
+            const reducedGlassParts = [];
+            glassParts.forEach((glass) => {
+                if (Array.isArray(glass.parts) && glass.parts.length === 1) {
+                    const singlePart = glass.parts[0];
+                    reducedGlassParts.push({
+                        partNumber: singlePart.partNumber,
+                        description: singlePart.description,
+                        color: singlePart.color,
+                        requiresRecalibration: singlePart.requiresRecalibration,
+                        requiresCapabilityQuestions: singlePart.requiresCapabilityQuestions,
+                        recalibrationType: singlePart.recalibrationType,
+                        childParts: singlePart.childParts,
+                        price: singlePart.price,
+                    });
+                }
+            });
+            return reducedGlassParts;
+        }
+    }
+
+}

src/mixins/vehicle-questions-mixin.spec.js

@@ -0,0 +1,161 @@
+import vehicleQuestionsMixin from "@/mixins/vehicle-questions-mixin";
+import { shallowMount } from "@vue/test-utils";
+import { setupMocksForJsFiles, getMountOptions } from "@/helpers/unit-test-helper.js";
+
+describe("vehicle-questions-mixin", () => {
+    describe("hasPartQuestions", () => {
+        test("has no part questions => return false", () => {
+            // Arrange
+            const { wrapper } = setupMocks({});
+
+            // Act
+            const hasPartQuestions = wrapper.vm.hasPartQuestions([
+                {
+                    partQuestions: []
+                }
+            ])
+
+            // Assert
+            expect(hasPartQuestions).toBe(false);
+        });
+
+        test("has undefined part questions => return false", () => {
+            // Arrange
+            const { wrapper } = setupMocks({});
+
+            // Act
+            const hasPartQuestions = wrapper.vm.hasPartQuestions([])
+
+            // Assert
+            expect(hasPartQuestions).toBe(false);
+        });
+
+        test("has part questions => return true", () => {
+            // Arrange
+            const { wrapper } = setupMocks({});
+
+            // Act
+            const hasPartQuestions = wrapper.vm.hasPartQuestions([
+                {
+                    partQuestions: [{
+                        testProperty: "some value"
+                    }]
+                }
+            ])
+
+            // Assert
+            expect(hasPartQuestions).toBe(true);
+        });
+    });
+
+    describe("hasGlassLocationWithMultipleParts", () => {
+        test("has one part for one glass location => return false", () => {
+            // Arrange
+            const { wrapper } = setupMocks({});
+
+            // Act
+            const hasGlassLocationWithMultipleParts = wrapper.vm.hasGlassLocationWithMultipleParts([
+                {
+                    glassName: "Something",
+                    glassLocation: "somewhere",
+                    parts: [{
+                        partNumber: "1234567"
+                    }]
+                }
+            ])
+
+            // Assert
+            expect(hasGlassLocationWithMultipleParts).toBe(false);
+        });
+
+        test("has one part for every glass location => return false", () => {
+            // Arrange
+            const { wrapper } = setupMocks({});
+
+            // Act
+            const hasGlassLocationWithMultipleParts = wrapper.vm.hasGlassLocationWithMultipleParts([
+                {
+                    glassName: "Something",
+                    glassLocation: "somewhere",
+                    parts: [{
+                        partNumber: "1234567"
+                    }]
+                },
+                {
+                    glassName: "Another glass",
+                    glassLocation: "somewhere else",
+                    parts: [{
+                        partNumber: "1234568"
+                    }]
+                },
+                {
+                    glassName: "Special glass",
+                    glassLocation: "Another where",
+                    parts: [{
+                        partNumber: "1234569"
+                    }]
+                }
+            ])
+
+            // Assert
+            expect(hasGlassLocationWithMultipleParts).toBe(false);
+        });
+
+        test("has multiple parts for one glass location => return true", () => {
+            // Arrange
+            const { wrapper } = setupMocks({});
+
+            // Act
+            const hasGlassLocationWithMultipleParts = wrapper.vm.hasGlassLocationWithMultipleParts([
+                {
+                    glassName: "Something",
+                    glassLocation: "somewhere",
+                    parts: [{
+                        partNumber: "1234567"
+                    }]
+                },
+                {
+                    glassName: "Another glass",
+                    glassLocation: "somewhere else",
+                    parts: [{
+                        partNumber: "1234568"
+                    }]
+                },
+                {
+                    glassName: "Special glass",
+                    glassLocation: "Another where",
+                    parts: [
+                        {
+                            partNumber: "1234569"
+                        },
+                        {
+                            partNumber: "1234560"
+                        }
+                    ]
+                }
+            ])
+
+            // Assert
+            expect(hasGlassLocationWithMultipleParts).toBe(true);
+        });
+    });
+});
+
+function setupMocks({}) {
+    const baseMixin = setupMocksForJsFiles({});
+
+    const mocks = getMountOptions({
+        router: {
+            navigate: jest.fn()
+        },
+    });
+
+    const mockVehicleQuestionComponent = {
+        template: '<div></div>',
+        mixins: [vehicleQuestionsMixin, baseMixin.baseMixin]
+    };
+
+    const wrapper = shallowMount(mockVehicleQuestionComponent, mocks);
+
+    return { wrapper };
+}

src/mixins/vin-pages-mixin.js

@@ -1,16 +1,20 @@
-import store from "@/store";
 import { storeActions } from "@/constants/store-actions.js";
 import { storeMutations } from "@/constants/store-mutations.js";
 import { navigateToHeritageFunnel } from "@/helpers/heritage-integration/navigation-helper";
+import vehicleQuestionsMixin from "@/mixins/vehicle-questions-mixin";
 
 export default {
+    mixins: [vehicleQuestionsMixin],
     methods: {
         async navigateForwardWithSingleCarMatch() {
             const result = await this.dispatchStoreAction(storeActions.GET_PARTS_OR_QUESTIONS);
 
             const partsOrQuestions = result.data.partsOrQuestions;
-            const hasPartsQuestions = partsOrQuestions.some(pq => pq.partQuestions?.length > 0);
+
-            const hasGlassLocationWithMultipleParts = partsOrQuestions.some(pq => pq.parts?.length > 1);
+            const hasPartsQuestions = this.hasPartQuestions(partsOrQuestions);
+            const hasGlassLocationWithMultipleParts = this.hasGlassLocationWithMultipleParts(partsOrQuestions);
+            const hasChildPartQuestions = this.hasChildPartQuestions(partsOrQuestions);
+            const hasCapabilityQuestions = this.hasCapabilityQuestions(partsOrQuestions);
 
             if (hasPartsQuestions) {
                 this.$router.navigate(this.navigationScenarios.SELECTED_VIN_WITH_PART_QUESTIONS, this.$route, {}, {}, result.data);
@@ -18,11 +22,22 @@ export default {
             else if (hasGlassLocationWithMultipleParts) {
                 this.$router.navigate(this.navigationScenarios.SELECTED_VIN_WITH_MULTIPLE_PARTS, this.$route, {}, {}, result.data);
             }
+            else if (hasChildPartQuestions) {
+                this.$router.navigate(this.navigationScenarios.SELECTED_VIN_WITH_MOLDING_QUESTIONS, this.$route, {}, {}, result.data);
+            }
+            else if (hasCapabilityQuestions) {
+                this.$router.navigate(this.navigationScenarios.SELECTED_VIN_WITH_CAPABILITY_QUESTIONS, this.$route, {}, {}, result.data);
+            }
             else {
-                store.commit(storeMutations.UPDATE_GLASS_PARTS, result.data);
+                // if single parts only
+                const collectedGlassParts = this.reducedGlassPartsArray(result.data.partsOrQuestions);
+                // save to store lineItems.glassParts
+                this.$store.commit(storeMutations.UPDATE_GLASS_PARTS, collectedGlassParts);
+
+                // go to heritage quote page
                 this.$refs.loadingModal.showModal();
                 navigateToHeritageFunnel();
             }
-        }
+        },
     }
 }

src/mixins/vin-pages-mixin.spec.js

@@ -94,7 +94,7 @@ describe("vin-pages-mixin", () => {
                                 "description": "driver side, front",
                                 "color": "Green Tint",
                                 "requiresRecalibration": false,
-                                "requiresCapabilityQuestions": false,
+                                "requiresCapabilityQuestions": true,
                                 "childParts": null
                             }
                         ],
@@ -109,7 +109,7 @@ describe("vin-pages-mixin", () => {
                                 "description": "driver side, 1 hole",
                                 "color": "Green Tint",
                                 "requiresRecalibration": false,
-                                "requiresCapabilityQuestions": false,
+                                "requiresCapabilityQuestions": true,
                                 "childParts": null
                             }
                         ],
@@ -147,7 +147,7 @@ describe("vin-pages-mixin", () => {
                                 "description": "heated glass, stationary",
                                 "color": "Green Tint",
                                 "requiresRecalibration": false,
-                                "requiresCapabilityQuestions": false,
+                                "requiresCapabilityQuestions": true,
                                 "childParts": null
                             }
                         ],
@@ -202,7 +202,7 @@ describe("vin-pages-mixin", () => {
                                 "description": "driver side, front",
                                 "color": "Green Tint",
                                 "requiresRecalibration": false,
-                                "requiresCapabilityQuestions": false,
+                                "requiresCapabilityQuestions": true,
                                 "childParts": null
                             }
                         ],
@@ -217,7 +217,7 @@ describe("vin-pages-mixin", () => {
                                 "description": "driver side, 1 hole",
                                 "color": "Green Tint",
                                 "requiresRecalibration": false,
-                                "requiresCapabilityQuestions": false,
+                                "requiresCapabilityQuestions": true,
                                 "childParts": null
                             }
                         ],
@@ -232,7 +232,7 @@ describe("vin-pages-mixin", () => {
                                 "description": "driver side, body side, 1 hole",
                                 "color": "Green Tint",
                                 "requiresRecalibration": false,
-                                "requiresCapabilityQuestions": false,
+                                "requiresCapabilityQuestions": true,
                                 "childParts": null
                             }
                         ],
@@ -247,7 +247,7 @@ describe("vin-pages-mixin", () => {
                                 "description": "heated glass, stationary",
                                 "color": "Green Tint",
                                 "requiresRecalibration": false,
-                                "requiresCapabilityQuestions": false,
+                                "requiresCapabilityQuestions": true,
                                 "childParts": null
                             }
                         ],
@@ -302,7 +302,7 @@ describe("vin-pages-mixin", () => {
                                 "description": "driver side, front",
                                 "color": "Green Tint",
                                 "requiresRecalibration": false,
-                                "requiresCapabilityQuestions": false,
+                                "requiresCapabilityQuestions": true,
                                 "childParts": null
                             }
                         ],
@@ -317,7 +317,7 @@ describe("vin-pages-mixin", () => {
                                 "description": "driver side, 1 hole",
                                 "color": "Green Tint",
                                 "requiresRecalibration": false,
-                                "requiresCapabilityQuestions": false,
+                                "requiresCapabilityQuestions": true,
                                 "childParts": null
                             },
                             {
@@ -325,7 +325,7 @@ describe("vin-pages-mixin", () => {
                                 "description": "driver side, 1 hole",
                                 "color": "Gray Tint Privacy",
                                 "requiresRecalibration": false,
-                                "requiresCapabilityQuestions": false,
+                                "requiresCapabilityQuestions": true,
                                 "childParts": null
                             }
                         ],
@@ -340,7 +340,7 @@ describe("vin-pages-mixin", () => {
                                 "description": "driver side, body side, 1 hole",
                                 "color": "Green Tint",
                                 "requiresRecalibration": false,
-                                "requiresCapabilityQuestions": false,
+                                "requiresCapabilityQuestions": true,
                                 "childParts": null
                             },
                             {
@@ -348,7 +348,7 @@ describe("vin-pages-mixin", () => {
                                 "description": "driver side, body side, 1 hole",
                                 "color": "Gray Tint Privacy",
                                 "requiresRecalibration": false,
-                                "requiresCapabilityQuestions": false,
+                                "requiresCapabilityQuestions": true,
                                 "childParts": null
                             }
                         ],
@@ -363,7 +363,7 @@ describe("vin-pages-mixin", () => {
                                 "description": "heated glass, stationary",
                                 "color": "Green Tint",
                                 "requiresRecalibration": false,
-                                "requiresCapabilityQuestions": false,
+                                "requiresCapabilityQuestions": true,
                                 "childParts": null
                             },
                             {
@@ -371,7 +371,7 @@ describe("vin-pages-mixin", () => {
                                 "description": "heated glass, stationary",
                                 "color": "Gray Tint Privacy",
                                 "requiresRecalibration": false,
-                                "requiresCapabilityQuestions": false,
+                                "requiresCapabilityQuestions": true,
                                 "childParts": null
                             },
                             {
@@ -379,7 +379,7 @@ describe("vin-pages-mixin", () => {
                                 "description": "stationary",
                                 "color": "Green Tint",
                                 "requiresRecalibration": false,
-                                "requiresCapabilityQuestions": false,
+                                "requiresCapabilityQuestions": true,
                                 "childParts": null
                             },
                             {
@@ -387,7 +387,7 @@ describe("vin-pages-mixin", () => {
                                 "description": "heated glass, movable, 8 hole",
                                 "color": "Green Tint",
                                 "requiresRecalibration": false,
-                                "requiresCapabilityQuestions": false,
+                                "requiresCapabilityQuestions": true,
                                 "childParts": null
                             },
                             {
@@ -395,7 +395,7 @@ describe("vin-pages-mixin", () => {
                                 "description": "heated glass, movable, 8 hole",
                                 "color": "Gray Tint Privacy",
                                 "requiresRecalibration": false,
-                                "requiresCapabilityQuestions": false,
+                                "requiresCapabilityQuestions": true,
                                 "childParts": null
                             }
                         ],
@@ -429,7 +429,7 @@ describe("vin-pages-mixin", () => {
                                 "description": "heated glass, solar, antenna",
                                 "color": "Green Tint",
                                 "requiresRecalibration": false,
-                                "requiresCapabilityQuestions": false,
+                                "requiresCapabilityQuestions": true,
                                 "childParts": null
                             },
                             {
@@ -437,7 +437,7 @@ describe("vin-pages-mixin", () => {
                                 "description": "heated glass, solar, antenna, w/diversity antenna",
                                 "color": "Green Tint",
                                 "requiresRecalibration": false,
-                                "requiresCapabilityQuestions": false,
+                                "requiresCapabilityQuestions": true,
                                 "childParts": null
                             }
                         ],
@@ -469,7 +469,7 @@ describe("vin-pages-mixin", () => {
                                 "description": "solar, 3rd visor band",
                                 "color": "Green Tint",
                                 "requiresRecalibration": false,
-                                "requiresCapabilityQuestions": false,
+                                "requiresCapabilityQuestions": true,
                                 "childParts": [
                                     {
                                         "partNumber": "MWF03647",
@@ -490,7 +490,7 @@ describe("vin-pages-mixin", () => {
                                 "description": "solar, driver side, rear, ex models and above",
                                 "color": "Green Tint",
                                 "requiresRecalibration": false,
-                                "requiresCapabilityQuestions": false,
+                                "requiresCapabilityQuestions": true,
                                 "childParts": null
                             }
                         ],
@@ -505,7 +505,7 @@ describe("vin-pages-mixin", () => {
                                 "description": "solar, driver side, front, ex models and above",
                                 "color": "Green Tint",
                                 "requiresRecalibration": false,
-                                "requiresCapabilityQuestions": false,
+                                "requiresCapabilityQuestions": true,
                                 "childParts": null
                             }
                         ],
@@ -520,7 +520,7 @@ describe("vin-pages-mixin", () => {
                                 "description": "solar, driver side, rear",
                                 "color": "Green Tint",
                                 "requiresRecalibration": false,
-                                "requiresCapabilityQuestions": false,
+                                "requiresCapabilityQuestions": true,
                                 "childParts": null
                             }
                         ],
@@ -535,7 +535,7 @@ describe("vin-pages-mixin", () => {
                                 "description": "heated glass, solar, antenna",
                                 "color": "Green Tint",
                                 "requiresRecalibration": false,
-                                "requiresCapabilityQuestions": false,
+                                "requiresCapabilityQuestions": true,
                                 "childParts": null
                             },
                             {
@@ -543,7 +543,7 @@ describe("vin-pages-mixin", () => {
                                 "description": "heated glass, solar, antenna, w/diversity antenna",
                                 "color": "Green Tint",
                                 "requiresRecalibration": false,
-                                "requiresCapabilityQuestions": false,
+                                "requiresCapabilityQuestions": true,
                                 "childParts": null
                             }
                         ],
@@ -575,7 +575,7 @@ describe("vin-pages-mixin", () => {
                                 "description": "solar",
                                 "color": "Green Tint",
                                 "requiresRecalibration": false,
-                                "requiresCapabilityQuestions": false,
+                                "requiresCapabilityQuestions": true,
                                 "childParts": null
                             }
                         ],
@@ -590,7 +590,7 @@ describe("vin-pages-mixin", () => {
                                 "description": "solar, driver side, rear",
                                 "color": "Green Tint",
                                 "requiresRecalibration": false,
-                                "requiresCapabilityQuestions": false,
+                                "requiresCapabilityQuestions": true,
                                 "childParts": null
                             },
                             {
@@ -598,7 +598,7 @@ describe("vin-pages-mixin", () => {
                                 "description": "solar, driver side, rear",
                                 "color": "Gray Tint Privacy",
                                 "requiresRecalibration": false,
-                                "requiresCapabilityQuestions": false,
+                                "requiresCapabilityQuestions": true,
                                 "childParts": null
                             }
                         ],
@@ -613,7 +613,7 @@ describe("vin-pages-mixin", () => {
                                 "description": "solar, driver side, front",
                                 "color": "Green Tint",
                                 "requiresRecalibration": false,
-                                "requiresCapabilityQuestions": false,
+                                "requiresCapabilityQuestions": true,
                                 "childParts": null
                             },
                             {
@@ -621,7 +621,7 @@ describe("vin-pages-mixin", () => {
                                 "description": "solar, driver side, front, laminated, soundproofing",
                                 "color": "Green Tint",
                                 "requiresRecalibration": false,
-                                "requiresCapabilityQuestions": false,
+                                "requiresCapabilityQuestions": true,
                                 "childParts": null
                             }
                         ],
@@ -636,7 +636,7 @@ describe("vin-pages-mixin", () => {
                                 "description": "solar, driver side, encap",
                                 "color": "Green Tint",
                                 "requiresRecalibration": false,
-                                "requiresCapabilityQuestions": false,
+                                "requiresCapabilityQuestions": true,
                                 "childParts": null
                             },
                             {
@@ -644,7 +644,7 @@ describe("vin-pages-mixin", () => {
                                 "description": "solar, driver side, encap",
                                 "color": "Gray Tint Privacy",
                                 "requiresRecalibration": false,
-                                "requiresCapabilityQuestions": false,
+                                "requiresCapabilityQuestions": true,
                                 "childParts": null
                             },
                             {
@@ -652,7 +652,7 @@ describe("vin-pages-mixin", () => {
                                 "description": "solar, antenna, driver side, encap",
                                 "color": "Green Tint",
                                 "requiresRecalibration": false,
-                                "requiresCapabilityQuestions": false,
+                                "requiresCapabilityQuestions": true,
                                 "childParts": null
                             },
                             {
@@ -660,7 +660,7 @@ describe("vin-pages-mixin", () => {
                                 "description": "solar, antenna, driver side, encap",
                                 "color": "Gray Tint Privacy",
                                 "requiresRecalibration": false,
-                                "requiresCapabilityQuestions": false,
+                                "requiresCapabilityQuestions": true,
                                 "childParts": null
                             },
                             {
@@ -668,7 +668,7 @@ describe("vin-pages-mixin", () => {
                                 "description": "solar, driver side, encap, chrome molding",
                                 "color": "Green Tint",
                                 "requiresRecalibration": false,
-                                "requiresCapabilityQuestions": false,
+                                "requiresCapabilityQuestions": true,
                                 "childParts": null
                             },
                             {
@@ -676,7 +676,7 @@ describe("vin-pages-mixin", () => {
                                 "description": "solar, driver side, encap, chrome molding",
                                 "color": "Gray Tint Privacy",
                                 "requiresRecalibration": false,
-                                "requiresCapabilityQuestions": false,
+                                "requiresCapabilityQuestions": true,
                                 "childParts": null
                             },
                             {
@@ -684,7 +684,7 @@ describe("vin-pages-mixin", () => {
                                 "description": "solar, antenna, driver side, encap, chrome molding",
                                 "color": "Green Tint",
                                 "requiresRecalibration": false,
-                                "requiresCapabilityQuestions": false,
+                                "requiresCapabilityQuestions": true,
                                 "childParts": null
                             },
                             {
@@ -692,7 +692,7 @@ describe("vin-pages-mixin", () => {
                                 "description": "solar, antenna, driver side, encap, chrome molding",
                                 "color": "Gray Tint Privacy",
                                 "requiresRecalibration": false,
-                                "requiresCapabilityQuestions": false,
+                                "requiresCapabilityQuestions": true,
                                 "childParts": null
                             }
                         ],
@@ -707,7 +707,7 @@ describe("vin-pages-mixin", () => {
                                 "description": "heated glass, solar, 1 hole",
                                 "color": "Green Tint",
                                 "requiresRecalibration": false,
-                                "requiresCapabilityQuestions": false,
+                                "requiresCapabilityQuestions": true,
                                 "childParts": null
                             },
                             {
@@ -715,7 +715,7 @@ describe("vin-pages-mixin", () => {
                                 "description": "heated glass, solar, 1 hole",
                                 "color": "Gray Tint Privacy",
                                 "requiresRecalibration": false,
-                                "requiresCapabilityQuestions": false,
+                                "requiresCapabilityQuestions": true,
                                 "childParts": null
                             }
                         ],
@@ -736,6 +736,94 @@ describe("vin-pages-mixin", () => {
             });
         });
 
+        describe("should go to molding-questions", () => {
+            test("single glass location has child part questions => go to molding-questions", async () => {
+                // Arrange
+                const partsOrQuestions = [
+                    {
+                        "glassName": "Stationary",
+                        "glassLocation": "Rear",
+                        "parts": [
+                            {
+                                "partNumber": "FB25724GTYN",
+                                "description": "heated glass, solar, antenna",
+                                "color": "Green Tint",
+                                "requiresRecalibration": false,
+                                "requiresCapabilityQuestions": true,
+                                "childParts": null,
+                                "childPartQuestions": [
+                                    {
+                                    "questionSequence": 1,
+                                    "questionText": "Does the rubber seal around your windshield have a chrome strip running through it?",
+                                    "answers": [
+                                        {
+                                        "answerResult": "WKT D1106 C",
+                                        "answerText": "Yes",
+                                        "nextQuestionSequence": null
+                                        },
+                                        {
+                                        "answerResult": "WKT D1106 B",
+                                        "answerText": "No",
+                                        "nextQuestionSequence": null
+                                        }
+                                    ]
+                                    }
+                                ]
+    
+                            }
+                        ],
+                        "partQuestions": null
+                    }
+                ];
+
+                const { wrapper } = setupMocks({
+                    partsOrQuestions: partsOrQuestions
+                });
+
+                // Act
+                await wrapper.vm.navigateForwardWithSingleCarMatch();
+
+                // Assert
+                expect(wrapper.vm.$router.navigate).toHaveBeenCalledTimes(1);
+                expect(wrapper.vm.$router.navigate).toHaveBeenCalledWith(navigationScenarios.SELECTED_VIN_WITH_MOLDING_QUESTIONS, wrapper.vm.$route, {}, {}, { partsOrQuestions });
+            });
+        });
+
+        describe("should go to capability-questions", () => {
+            test("single glass location has no child part questions but requiresCapabilityQuestions is true => go to capability-questions", async () => {
+                // Arrange
+                const partsOrQuestions = [
+                    {
+                        "glassName": "Stationary",
+                        "glassLocation": "Rear",
+                        "parts": [
+                            {
+                                "partNumber": "FB25724GTYN",
+                                "description": "heated glass, solar, antenna",
+                                "color": "Green Tint",
+                                "requiresRecalibration": false,
+                                "requiresCapabilityQuestions": true,
+                                "childParts": null,
+                                "childPartQuestions": null
+                            }
+                        ],
+                        "partQuestions": null
+                    }
+                ];
+
+                const { wrapper } = setupMocks({
+                    partsOrQuestions: partsOrQuestions
+                });
+
+                // Act
+                await wrapper.vm.navigateForwardWithSingleCarMatch();
+
+                // Assert
+                expect(wrapper.vm.$router.navigate).toHaveBeenCalledTimes(1);
+                expect(wrapper.vm.$router.navigate).toHaveBeenCalledWith(navigationScenarios.SELECTED_VIN_WITH_CAPABILITY_QUESTIONS, wrapper.vm.$route, {}, {}, { partsOrQuestions });
+            });
+        });
+
         describe("should go to heritage funnel", () => {
             test("single glass location selected, has no part questions and has one part => go to heritage funnel", async () => {
                 // Arrange
@@ -864,14 +952,17 @@ describe("vin-pages-mixin", () => {
                     partsOrQuestions: partsOrQuestions
                 });
 
-                store.commit = jest.fn();
+                wrapper.vm.$store.commit = jest.fn();
+
+                const collectedGlassParts = wrapper.vm.reducedGlassPartsArray(partsOrQuestions);
 
                 // Act
                 await wrapper.vm.navigateForwardWithSingleCarMatch();
                 
+
                 // Assert
-                expect(store.commit).toHaveBeenCalledTimes(1);
+                expect(wrapper.vm.$store.commit).toHaveBeenCalledTimes(1);
-                expect(store.commit).toHaveBeenCalledWith(storeMutations.UPDATE_GLASS_PARTS, { partsOrQuestions })
+                expect(wrapper.vm.$store.commit).toHaveBeenCalledWith(storeMutations.UPDATE_GLASS_PARTS, collectedGlassParts)
                 expect(wrapper.vm.$refs.loadingModal.showModal).toHaveBeenCalledTimes(1);
                 expect(navigateToHeritageFunnel).toHaveBeenCalledTimes(1);
             });
@@ -895,23 +986,17 @@ function setupMocks({ partsOrQuestions = [] }) {
         router: {
             navigate: jest.fn()
         },
-
+        store: {
+            commit: jest.fn()
+        }
     });
 
     const mockVinComponent = {
         components: { loadingModal },
         template: '<loadingModal ref="loadingModal" />',
-        // render() {
-        //     return '<div ref="loadingModal"></div>'
-        // },
         mixins: [vinPagesMixin, baseMixin.baseMixin]
     };
 
-    // const mockVinComponent = Vue.component("mockcomponent", {
-    //     template: '<loadingModal ref="loadingModal" />',
-    //     mixins: [vinPagesMixin, baseMixin.baseMixin]
-    // })
-
     const wrapper = shallowMount(mockVinComponent, mocks);
 
     wrapper.vm.$refs.loadingModal.showModal = jest.fn();

src/router/index.js

@@ -53,6 +53,9 @@ const routes = [
 
         // On entering the funnel "fresh", read cookie information, decide what to do next.
         if (from.redirectedFrom === undefined) {
+          // clear the saveOrderPromise - if it exists in the vuex store but a new instance was created
+          //   the saveOrderPromise will no longer point to a valid promise
+          baseMixin.methods.dispatchStoreAction(storeActions.RESET_SAVE_ORDER_PROMISE);
           const loadOrderResponse = await loadOrderIfPresent();
           const pageToRedirectTo = await getPageToRouteExistingOrderTo(to, loadOrderResponse);
 
@@ -63,7 +66,6 @@ const routes = [
             return next(false);
           }
 
-
           // Assign our fmgPage so it will load normally like the other pages.
           to.query.fmgPage = pageToRedirectTo;
         }
@@ -142,7 +144,7 @@ router.afterEach((to, from) => {
 
 });
 
-router.navigate = (scenario, currentRoute, optionalQuery = {}, optionalParams = {}, optionalPageData = {}) => {
+router.navigate = (scenario, currentRoute, optionalQuery = {}, optionalParams = {}, optionalPageData) => {
   navigate(scenario, currentRoute, optionalQuery, optionalParams, optionalPageData);
 }
 
@@ -154,7 +156,7 @@ router.navigateToExternalUrl = (url, optionalQuery = {}) => {
 // PRIVATE FUNCTIONS
 
 // Navigate to the next route, depending on the scenario.
-async function navigate(scenario, currentRoute, optionalQuery = {}, optionalParams = {}, optionalPageData = {}) {
+async function navigate(scenario, currentRoute, optionalQuery = {}, optionalParams = {}, optionalPageData) {
   if (!scenario) {
     console.error("No scenario provided. Please review the routing table.");
     return;
@@ -167,8 +169,10 @@ async function navigate(scenario, currentRoute, optionalQuery = {}, optionalPara
   if (destinationFmgPageValue !== undefined) {
     // We're always pushing the same path, just changing query strings. Make sure our optional query strings get combined with our fmgPage one.
 
-    // Append page data to the store for the NEXT page, if any. It will be an empty object if none is provided.
+    // Update page data to the store for next page if provided. Otherwise, keep existing page data
-    baseMixin.methods.savePageDataToStore(destinationFmgPageValue, optionalPageData);
+    if (optionalPageData !== undefined) {
+      baseMixin.methods.savePageDataToStore(destinationFmgPageValue, optionalPageData);
+    }
 
     // if cookie and referralNumber/Date exists OR an emailAddress has been saved
     if ((getFunnelCookie()?.ReferralNumber && getFunnelCookie()?.ReferralDate) || store.getters.order.customer?.emailAddress) {
@@ -190,15 +194,16 @@ async function navigate(scenario, currentRoute, optionalQuery = {}, optionalPara
 // Get navigation map depending on the scenario and the current 'page' you're on.
 function getNavigationMap(scenario, currentRoute) {
   const fmgPageValue = currentRoute.query.fmgPage;
-  const matchedQueryValue = routingTable
+  const matchedQueryValue = routingTable(store)
     .filter(
       (item) =>
         item.fmgPageValue === fmgPageValue &&
         item.maps.filter((map) => map.scenario === scenario).length > 0
     )
-    .map((m) => m.maps.filter((map) => map.scenario === scenario));
+    .map((m) => m.maps.filter((map) => map.scenario === scenario))[0]
+    .filter(x => x.filter === true || x.filter === undefined);
 
-  return matchedQueryValue[0][0];
+  return matchedQueryValue[0];
 }
 
 //---------------------------------------------------------- Private Functions ----------------------------------------------------------

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

@@ -8,6 +8,8 @@ const fmgPageValues = {
   VIN_LOOKUP: "vin-lookup",
   VEHICLE_PARTS: "vehicle-parts",
   PART_QUESTIONS: "part-questions",
+  MOLDING_QUESTIONS: "molding-questions",
+  CAPABILITY_QUESTIONS: "capability-questions",
   LICENSE_PLATE_LOOKUP: "license-plate-lookup",
   REVEAL: "reveal",
   ESTIMATE: "estimate",

src/router/router-constants/navigation-scenarios.js

@@ -10,6 +10,8 @@ const navigationScenarios = {
   SELECTED_PARTS: "SELECTED_PARTS",
   SELECTED_VIN_WITH_PART_QUESTIONS: "SELECTED_VIN_WITH_PART_QUESTIONS",
   SELECTED_VIN_WITH_MULTIPLE_PARTS: "SELECTED_VIN_WITH_MULTIPLE_PARTS",
+  SELECTED_VIN_WITH_MOLDING_QUESTIONS: "SELECTED_VIN_WITH_MOLDING_QUESTIONS",
+  SELECTED_VIN_WITH_CAPABILITY_QUESTIONS: "SELECTED_VIN_WITH_CAPABILITY_QUESTIONS",
   CONTINUING_WITH_SINGLE_PART: "CONTINUING_WITH_SINGLE_PART",
   CONTINUING_WITH_MULTIPLE_VEHICLES: "CONTINUING_WITH_MULTIPLE_VEHICLES",
   SELECTED_VIN_HAS_MISMATCHED_GLASS: "SELECTED_VIN_HAS_MISMATCHED_GLASS",
@@ -19,7 +21,11 @@ const navigationScenarios = {
   SELECTED_HOME_ADDRESS: "SELECTED_HOME_ADDRESS",
   ANSWERED_QUESTIONS_WITH_SINGLE_PART: "ANSWERED_QUESTIONS_WITH_SINGLE_PART",
   ANSWERED_QUESTIONS_WITH_MULTIPLE_PARTS: "ANSWERED_QUESTIONS_WITH_MULTIPLE_PARTS",
-  SELECTED_PROVIDE_VIN_DIFFERENT_WAY: "SELECTED_PROVIDE_VIN_DIFFERENT_WAY"
+  SELECTED_PROVIDE_VIN_DIFFERENT_WAY: "SELECTED_PROVIDE_VIN_DIFFERENT_WAY",
+  CLICKED_BACK_WITH_PART_QUESTION_ANSWERS: "CLICKED_BACK_WITH_PART_QUESTION_ANSWERS",
+  CLICKED_BACK_WITHOUT_PART_QUESTION_ANSWERS: "CLICKED_BACK_WITHOUT_PART_QUESTION_ANSWERS",
+  HAS_MOLDING_QUESTIONS: "HAS_MOLDING_QUESTIONS",
+  HAS_CAPABILITY_QUESTIONS: "HAS_CAPABILITY_QUESTIONS",
 };
 
 export { navigationScenarios };

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

@@ -1,236 +1,305 @@
 import { fmgPageValues } from "@/router/router-constants/fmgPage-values";
 import { navigationScenarios } from "@/router/router-constants/navigation-scenarios";
 
-const routingTable = [
+// Get store from router/index.js instead of importing it here to get updated values
-  {
+const routingTable = function(store) {
-    fmgPageValue: fmgPageValues.VEHICLE_YEAR,
+  return [
-    maps: [
+    {
-      {
+      fmgPageValue: fmgPageValues.VEHICLE_YEAR,
-        scenario: navigationScenarios.SELECTED_YEAR,
+      maps: [
-        destinationFmgPageValue: fmgPageValues.VEHICLE_MAKE,
+        {
-      },
+          scenario: navigationScenarios.SELECTED_YEAR,
-    ],
+          destinationFmgPageValue: fmgPageValues.VEHICLE_MAKE,
-  },
+        },
-  {
+      ],
-    fmgPageValue: fmgPageValues.VEHICLE_MAKE,
+    },
-    maps: [
+    {
-      {
+      fmgPageValue: fmgPageValues.VEHICLE_MAKE,
-        scenario: navigationScenarios.SELECTED_MAKE,
+      maps: [
-        destinationFmgPageValue: fmgPageValues.VEHICLE_MODEL,
+        {
-      },
+          scenario: navigationScenarios.SELECTED_MAKE,
-      {
+          destinationFmgPageValue: fmgPageValues.VEHICLE_MODEL,
-        scenario: navigationScenarios.CLICKED_BACK,
+        },
-        destinationFmgPageValue: fmgPageValues.VEHICLE_YEAR,
+        {
-      },
+          scenario: navigationScenarios.CLICKED_BACK,
-    ],
+          destinationFmgPageValue: fmgPageValues.VEHICLE_YEAR,
-  },
+        },
-  {
+      ],
-    fmgPageValue: fmgPageValues.VEHICLE_MODEL,
+    },
-    maps: [
+    {
-      {
+      fmgPageValue: fmgPageValues.VEHICLE_MODEL,
-        scenario: navigationScenarios.SELECTED_MODEL,
+      maps: [
-        destinationFmgPageValue: fmgPageValues.VEHICLE_STYLE,
+        {
-      },
+          scenario: navigationScenarios.SELECTED_MODEL,
-      {
+          destinationFmgPageValue: fmgPageValues.VEHICLE_STYLE,
-        scenario: navigationScenarios.CLICKED_BACK,
+        },
-        destinationFmgPageValue: fmgPageValues.VEHICLE_MAKE,
+        {
-      },
+          scenario: navigationScenarios.CLICKED_BACK,
-    ],
+          destinationFmgPageValue: fmgPageValues.VEHICLE_MAKE,
-  },
+        },
-  {
+      ],
-    fmgPageValue: fmgPageValues.VEHICLE_STYLE,
+    },
-    maps: [
+    {
-      {
+      fmgPageValue: fmgPageValues.VEHICLE_STYLE,
-        scenario: navigationScenarios.SELECTED_STYLE,
+      maps: [
-        destinationFmgPageValue: fmgPageValues.VEHICLE_DAMAGE,
+        {
-      },
+          scenario: navigationScenarios.SELECTED_STYLE,
-      {
+          destinationFmgPageValue: fmgPageValues.VEHICLE_DAMAGE,
-        scenario: navigationScenarios.CLICKED_BACK,
+        },
-        destinationFmgPageValue: fmgPageValues.VEHICLE_MODEL,
+        {
-      },
+          scenario: navigationScenarios.CLICKED_BACK,
-    ],
+          destinationFmgPageValue: fmgPageValues.VEHICLE_MODEL,
-  },
+        },
-  {
+      ],
-    fmgPageValue: fmgPageValues.VEHICLE_DAMAGE,
+    },
-    maps: [
+    {
-      {
+      fmgPageValue: fmgPageValues.VEHICLE_DAMAGE,
-        scenario: navigationScenarios.CLICKED_BACK,
+      maps: [
-        destinationFmgPageValue: fmgPageValues.VEHICLE_STYLE,
+        {
-      },
+          scenario: navigationScenarios.CLICKED_BACK,
-      {
+          destinationFmgPageValue: fmgPageValues.VEHICLE_STYLE,
-        scenario: navigationScenarios.CLICKED_FORWARD_WITH_VIN,
+        },
-        destinationFmgPageValue: fmgPageValues.VIN_LOOKUP,
+        {
-      },
+          scenario: navigationScenarios.CLICKED_FORWARD_WITH_VIN,
-      {
+          destinationFmgPageValue: fmgPageValues.VIN_LOOKUP,
-        scenario: navigationScenarios.CLICKED_FORWARD_WITHOUT_VIN,
+        },
-        destinationFmgPageValue: fmgPageValues.ESTIMATE,
+        {
-      },
+          scenario: navigationScenarios.CLICKED_FORWARD_WITHOUT_VIN,
-    ],
+          destinationFmgPageValue: fmgPageValues.ESTIMATE,
-  },
+        },
-  {
+      ],
-    fmgPageValue: fmgPageValues.VEHICLE_PARTS,
+    },
-    maps: [
+    {
-      {
+      fmgPageValue: fmgPageValues.VEHICLE_PARTS,
-        scenario: navigationScenarios.CLICKED_BACK,
+      maps: [
-        destinationFmgPageValue: fmgPageValues.VIN_LOOKUP,
+        {
-      },
+          scenario: navigationScenarios.SELECTED_PARTS,
-      {
+          destinationFmgPageValue: fmgPageValues.QUOTE,
-        scenario: navigationScenarios.SELECTED_PARTS,
+        },
-        destinationFmgPageValue: fmgPageValues.QUOTE,
+        {
-      },
+          scenario: navigationScenarios.CLICKED_FORWARD,
-      {
+          destinationFmgPageValue: fmgPageValues.REVEAL,
-        scenario: navigationScenarios.CLICKED_FORWARD,
+        },
-        destinationFmgPageValue: fmgPageValues.REVEAL,
+        {
-      },
+          scenario: navigationScenarios.CLICKED_BACK_WITH_PART_QUESTION_ANSWERS,
-    ],
+          destinationFmgPageValue: fmgPageValues.PART_QUESTIONS,
-  },
+        },
-  {
+        {
-    fmgPageValue: fmgPageValues.REVEAL,
+          scenario: navigationScenarios.CLICKED_BACK_WITHOUT_PART_QUESTION_ANSWERS,
-    maps: [
+          destinationFmgPageValue: fmgPageValues.VIN_LOOKUP,
-      {
+        },
-        scenario: navigationScenarios.CLICKED_BACK,
+      ],
-        destinationFmgPageValue: fmgPageValues.VEHICLE_DAMAGE,
+    },
-      },
+    {
-      {
+      fmgPageValue: fmgPageValues.REVEAL,
-        scenario: navigationScenarios.SELECTED_PARTS,
+      maps: [
-        destinationFmgPageValue: fmgPageValues.VIN_LOOKUP,
+        {
-      },
+          scenario: navigationScenarios.CLICKED_BACK,
-    ],
+          destinationFmgPageValue: fmgPageValues.VEHICLE_DAMAGE,
-  },
+        },
-  {
+        {
-    fmgPageValue: fmgPageValues.VIN_LOOKUP,
+          scenario: navigationScenarios.SELECTED_PARTS,
-    maps: [
+          destinationFmgPageValue: fmgPageValues.VIN_LOOKUP,
-      {
+        },
-        scenario: navigationScenarios.CLICKED_BACK,
+      ],
-        destinationFmgPageValue: fmgPageValues.ESTIMATE,
+    },
-      },
+    {
-      {
+      fmgPageValue: fmgPageValues.VIN_LOOKUP,
-        scenario: navigationScenarios.SELECTED_VIN_HAS_MISMATCHED_GLASS,
+      maps: [
-        destinationFmgPageValue: fmgPageValues.VEHICLE_DAMAGE,
+        {
-      },
+          scenario: navigationScenarios.CLICKED_BACK,
-      {
+          destinationFmgPageValue: fmgPageValues.ESTIMATE,
-        scenario: navigationScenarios.CLICKED_BACK_WITH_VIN,
+        },
-        destinationFmgPageValue: fmgPageValues.VEHICLE_DAMAGE,
+        {
-      },
+          scenario: navigationScenarios.SELECTED_VIN_HAS_MISMATCHED_GLASS,
-      {
+          destinationFmgPageValue: fmgPageValues.VEHICLE_DAMAGE,
-        scenario: navigationScenarios.SELECTED_VIN_WITH_PART_QUESTIONS,
+        },
-        destinationFmgPageValue: fmgPageValues.PART_QUESTIONS
+        {
-      },
+          scenario: navigationScenarios.CLICKED_BACK_WITH_VIN,
-      {
+          destinationFmgPageValue: fmgPageValues.VEHICLE_DAMAGE,
-        scenario: navigationScenarios.SELECTED_VIN_WITH_MULTIPLE_PARTS,
+        },
-        destinationFmgPageValue: fmgPageValues.VEHICLE_PARTS
+        {
-      }
+          scenario: navigationScenarios.SELECTED_VIN_WITH_PART_QUESTIONS,
-    ],
+          destinationFmgPageValue: fmgPageValues.PART_QUESTIONS
-  },
+        },
-  {
+        {
-    fmgPageValue: fmgPageValues.LICENSE_PLATE_LOOKUP,
+          scenario: navigationScenarios.SELECTED_VIN_WITH_MULTIPLE_PARTS,
-    maps: [
+          destinationFmgPageValue: fmgPageValues.VEHICLE_PARTS
-      {
+        },
-        scenario: navigationScenarios.CLICKED_BACK,
+        {
-        destinationFmgPageValue: fmgPageValues.ESTIMATE,
+          scenario: navigationScenarios.SELECTED_VIN_WITH_MOLDING_QUESTIONS,
-      },
+          destinationFmgPageValue: fmgPageValues.MOLDING_QUESTIONS
-      {
+        },
-        scenario: navigationScenarios.CLICKED_FORWARD,
+        {
-        destinationFmgPageValue: fmgPageValues.VEHICLE_DAMAGE,
+          scenario: navigationScenarios.SELECTED_VIN_WITH_CAPABILITY_QUESTIONS,
-      },
+          destinationFmgPageValue: fmgPageValues.CAPABILITY_QUESTIONS
-      {
+        }
-        scenario: navigationScenarios.SELECTED_VIN_WITH_PART_QUESTIONS,
+      ],
-        destinationFmgPageValue: fmgPageValues.PART_QUESTIONS
+    },
-      },
+    {
-      {
+      fmgPageValue: fmgPageValues.LICENSE_PLATE_LOOKUP,
-        scenario: navigationScenarios.SELECTED_VIN_WITH_MULTIPLE_PARTS,
+      maps: [
-        destinationFmgPageValue: fmgPageValues.VEHICLE_PARTS
+        {
-      }
+          scenario: navigationScenarios.CLICKED_BACK,
-    ],
+          destinationFmgPageValue: fmgPageValues.ESTIMATE,
-  },
+        },
-  {
+        {
-    fmgPageValue: fmgPageValues.ADDRESS_LOOKUP,
+          scenario: navigationScenarios.CLICKED_FORWARD,
-    maps: [
+          destinationFmgPageValue: fmgPageValues.VEHICLE_DAMAGE,
-      {
+        },
-        scenario: navigationScenarios.CLICKED_BACK,
+        {
-        destinationFmgPageValue: fmgPageValues.ESTIMATE,
+          scenario: navigationScenarios.SELECTED_VIN_WITH_PART_QUESTIONS,
-      },
+          destinationFmgPageValue: fmgPageValues.PART_QUESTIONS
-      {
+        },
-        scenario: navigationScenarios.CONTINUING_WITH_MULTIPLE_VEHICLES,
+        {
-        destinationFmgPageValue: fmgPageValues.ADDRESS_VEHICLES,
+          scenario: navigationScenarios.SELECTED_VIN_WITH_MULTIPLE_PARTS,
-      },
+          destinationFmgPageValue: fmgPageValues.VEHICLE_PARTS
-      {
+        },
-        scenario: navigationScenarios.SELECTED_VIN_HAS_MISMATCHED_GLASS,
+        {
-        destinationFmgPageValue: fmgPageValues.VEHICLE_DAMAGE,
+          scenario: navigationScenarios.SELECTED_VIN_WITH_MOLDING_QUESTIONS,
-      },
+          destinationFmgPageValue: fmgPageValues.MOLDING_QUESTIONS
-      {
+        },
-        scenario: navigationScenarios.SELECTED_VIN_WITH_PART_QUESTIONS,
+        {
-        destinationFmgPageValue: fmgPageValues.PART_QUESTIONS
+          scenario: navigationScenarios.SELECTED_VIN_WITH_CAPABILITY_QUESTIONS,
-      },
+          destinationFmgPageValue: fmgPageValues.CAPABILITY_QUESTIONS
-      {
+        }
-        scenario: navigationScenarios.SELECTED_VIN_WITH_MULTIPLE_PARTS,
+      ],
-        destinationFmgPageValue: fmgPageValues.VEHICLE_PARTS
+    },
-      }
+    {
-    ],
+      fmgPageValue: fmgPageValues.ADDRESS_LOOKUP,
-  },
+      maps: [
-  {
+        {
-    fmgPageValue: fmgPageValues.ADDRESS_VEHICLES,
+          scenario: navigationScenarios.CLICKED_BACK,
-    maps: [
+          destinationFmgPageValue: fmgPageValues.ESTIMATE,
-      {
+        },
-        scenario: navigationScenarios.CLICKED_BACK,
+        {
-        destinationFmgPageValue: fmgPageValues.ADDRESS_LOOKUP,
+          scenario: navigationScenarios.CONTINUING_WITH_MULTIPLE_VEHICLES,
-      },
+          destinationFmgPageValue: fmgPageValues.ADDRESS_VEHICLES,
-      {
+        },
-        scenario: navigationScenarios.CLICKED_FORWARD,
+        {
-        destinationFmgPageValue: fmgPageValues.VEHICLE_DAMAGE,
+          scenario: navigationScenarios.SELECTED_VIN_HAS_MISMATCHED_GLASS,
-      },   
+          destinationFmgPageValue: fmgPageValues.VEHICLE_DAMAGE,
-      {
+        },
-        scenario: navigationScenarios.SELECTED_VIN_WITH_PART_QUESTIONS,
+        {
-        destinationFmgPageValue: fmgPageValues.PART_QUESTIONS
+          scenario: navigationScenarios.SELECTED_VIN_WITH_PART_QUESTIONS,
-      },
+          destinationFmgPageValue: fmgPageValues.PART_QUESTIONS
-      {
+        },
-        scenario: navigationScenarios.SELECTED_VIN_WITH_MULTIPLE_PARTS,
+        {
-        destinationFmgPageValue: fmgPageValues.VEHICLE_PARTS
+          scenario: navigationScenarios.SELECTED_VIN_WITH_MULTIPLE_PARTS,
-      },
+          destinationFmgPageValue: fmgPageValues.VEHICLE_PARTS
-      {
+        },
-        scenario: navigationScenarios.SELECTED_PROVIDE_VIN_DIFFERENT_WAY,
+        {
-        destinationFmgPageValue: fmgPageValues.ESTIMATE
+          scenario: navigationScenarios.SELECTED_VIN_WITH_MOLDING_QUESTIONS,
-      }           
+          destinationFmgPageValue: fmgPageValues.MOLDING_QUESTIONS
-    ],
+        },
-  },
+        {
-  {
+          scenario: navigationScenarios.SELECTED_VIN_WITH_CAPABILITY_QUESTIONS,
-    fmgPageValue: fmgPageValues.ESTIMATE,
+          destinationFmgPageValue: fmgPageValues.CAPABILITY_QUESTIONS
-    maps: [
+        }
-      {
+      ],
-        scenario: navigationScenarios.CLICKED_BACK,
+    },
-        destinationFmgPageValue: fmgPageValues.VEHICLE_DAMAGE,
+    {
-      },
+      fmgPageValue: fmgPageValues.ADDRESS_VEHICLES,
-      {
+      maps: [
-        scenario: navigationScenarios.SELECTED_MANUAL_VIN,
+        {
-        destinationFmgPageValue: fmgPageValues.VIN_LOOKUP,
+          scenario: navigationScenarios.CLICKED_BACK,
-      },
+          destinationFmgPageValue: fmgPageValues.ADDRESS_LOOKUP,
-      {
+        },
-        scenario: navigationScenarios.SELECTED_LICENSE_PLATE,
+        {
-        destinationFmgPageValue: fmgPageValues.LICENSE_PLATE_LOOKUP,
+          scenario: navigationScenarios.CLICKED_FORWARD,
-      },
+          destinationFmgPageValue: fmgPageValues.VEHICLE_DAMAGE,
-      {
+        },   
-        scenario: navigationScenarios.SELECTED_HOME_ADDRESS,
+        {
-        destinationFmgPageValue: fmgPageValues.ADDRESS_LOOKUP,
+          scenario: navigationScenarios.SELECTED_VIN_WITH_PART_QUESTIONS,
-      },
+          destinationFmgPageValue: fmgPageValues.PART_QUESTIONS
-    ],
+        },
-  },
+        {
-  {
+          scenario: navigationScenarios.SELECTED_VIN_WITH_MULTIPLE_PARTS,
-    fmgPageValue: fmgPageValues.PART_QUESTIONS,
+          destinationFmgPageValue: fmgPageValues.VEHICLE_PARTS
-    maps: [
+        },
-      {
+        {
-        scenario: navigationScenarios.CLICKED_BACK,
+          scenario: navigationScenarios.SELECTED_VIN_WITH_MOLDING_QUESTIONS,
-        destinationFmgPageValue: fmgPageValues.VIN_LOOKUP
+          destinationFmgPageValue: fmgPageValues.MOLDING_QUESTIONS
-      },
+        },
-      {
+        {
-        scenario: navigationScenarios.ANSWERED_QUESTIONS_WITH_MULTIPLE_PARTS,
+          scenario: navigationScenarios.SELECTED_VIN_WITH_CAPABILITY_QUESTIONS,
-        destinationFmgPageValue: fmgPageValues.VEHICLE_PARTS
+          destinationFmgPageValue: fmgPageValues.CAPABILITY_QUESTIONS
-      },
+        },
-      {
+        {
-        scenario: navigationScenarios.ANSWERED_QUESTIONS_WITH_SINGLE_PART,
+          scenario: navigationScenarios.SELECTED_PROVIDE_VIN_DIFFERENT_WAY,
-        destinationFmgPageValue: fmgPageValues.QUOTE,
+          destinationFmgPageValue: fmgPageValues.ESTIMATE
-      },
+        }
-    ]
+      ],
-  },
+    },
-];
+    {
+      fmgPageValue: fmgPageValues.ESTIMATE,
+      maps: [
+        {
+          scenario: navigationScenarios.CLICKED_BACK,
+          destinationFmgPageValue: fmgPageValues.VEHICLE_DAMAGE,
+        },
+        {
+          scenario: navigationScenarios.SELECTED_MANUAL_VIN,
+          destinationFmgPageValue: fmgPageValues.VIN_LOOKUP,
+        },
+        {
+          scenario: navigationScenarios.SELECTED_LICENSE_PLATE,
+          destinationFmgPageValue: fmgPageValues.LICENSE_PLATE_LOOKUP,
+        },
+        {
+          scenario: navigationScenarios.SELECTED_HOME_ADDRESS,
+          destinationFmgPageValue: fmgPageValues.ADDRESS_LOOKUP,
+        },
+      ],
+    },
+    {
+      fmgPageValue: fmgPageValues.PART_QUESTIONS,
+      maps: [
+        {
+          scenario: navigationScenarios.CLICKED_BACK,
+          destinationFmgPageValue: fmgPageValues.VIN_LOOKUP
+        },
+        {
+          scenario: navigationScenarios.ANSWERED_QUESTIONS_WITH_MULTIPLE_PARTS,
+          destinationFmgPageValue: fmgPageValues.VEHICLE_PARTS
+        },
+        {
+          scenario: navigationScenarios.HAS_MOLDING_QUESTIONS,
+          destinationFmgPageValue: fmgPageValues.MOLDING_QUESTIONS,
+        },
+        {
+          scenario: navigationScenarios.HAS_CAPABILITY_QUESTIONS,
+          destinationFmgPageValue: fmgPageValues.CAPABILITY_QUESTIONS,
+        },
+        {
+          scenario: navigationScenarios.ANSWERED_QUESTIONS_WITH_SINGLE_PART,
+          destinationFmgPageValue: fmgPageValues.QUOTE,
+        },
+      ]
+    },
+    {
+      fmgPageValue: fmgPageValues.MOLDING_QUESTIONS,
+      maps: [
+        {
+          scenario: navigationScenarios.CLICKED_BACK,
+          destinationFmgPageValue: fmgPageValues.VEHICLE_PARTS
+        },
+        {
+          scenario: navigationScenarios.HAS_CAPABILITY_QUESTIONS,
+          destinationFmgPageValue: fmgPageValues.CAPABILITY_QUESTIONS,
+        },
+      ]
+    },
+    {
+      fmgPageValue: fmgPageValues.CAPABILITY_QUESTIONS,
+      maps: [
+        {
+          scenario: navigationScenarios.CLICKED_BACK,
+          destinationFmgPageValue: fmgPageValues.VEHICLE_PARTS
+        },
+      ]
+    },
+  ];
+}
 
 export { routingTable };

src/store/index.js

@@ -8,6 +8,7 @@ import { storeActions } from "@/constants/store-actions";
 import { applicationConfig } from "@/constants/application-config";
 import { experimentTriggers } from "@/constants/experiments";
 import { damageLocationsSelected } from "@/constants/damage-locations-selected";
+import { fmgPageValues } from "@/router/router-constants/fmgPage-values";
 
 // Export State
 const getDefaultState = () => {
@@ -50,8 +51,7 @@ const getDefaultState = () => {
         partQuestionAnswers: null,
       },
       lineItems: {
-        glassParts: null,
+        glassParts: null
-        otherParts: null
       },
       payment: {
         isInsurance: null,
@@ -69,10 +69,10 @@ const getDefaultState = () => {
       pageData: {},
       savedSessionTimeout: getDateForSavedSessionTimeout(),
       saveOrderPromise: null,
-      saveQuoteId: null,
+      savedSessionId: null,
       crmCustomerId: null,
       lastPageVisited: null,
-      experiments: {},
+      experiments: [],
       triggeredSiteEntry: false
     },
   }
@@ -213,8 +213,8 @@ export const mutations = {
   updateSaveOrderPromise(state, saveOrderPromise){
     state.applicationUser.saveOrderPromise = saveOrderPromise;
   },
-  updateSaveQuoteId(state, saveQuoteId) {
+  updateSavedSessionId(state, savedSessionId) {
-    state.applicationUser.saveQuoteId = saveQuoteId;
+    state.applicationUser.savedSessionId = savedSessionId;
   },
   updateCrmCustomerId(state, crmCustomerId) {
     state.applicationUser.crmCustomerId = crmCustomerId;
@@ -269,11 +269,15 @@ export const mutations = {
   },
   resetGlassPartsState(state) {
     state.order.lineItems.glassParts = null;
+    state.order.damage.partQuestionAnswers = null;
+    state.applicationUser.pageData[fmgPageValues.PART_QUESTIONS] = null;
   },
   resetState(state) {
     Object.assign(state, getDefaultState());
   },
-
+  resetSaveOrderPromise(state) {
+    state.applicationUser.saveOrderPromise = null;
+  },
   // Misc Mutations
   updateStateWithOrderInformation(state, orderInformation) {
     state.order.referralNumber = orderInformation.referralNumber;
@@ -358,16 +362,17 @@ export const getters = {
       serviceZipCode: state.order.serviceLocation.zipCode,
       parentAccountNumber: state.order.accountNumber,
       isCoverageVerified: state.order.payment.insuranceCoverage.isVerified,
-      orderPartNumbers: [...Object.values(state.order.lineItems.glassParts), ...Object.values(state.order.lineItems.otherParts)],
+      // orderPartNumbers: [...Object.values(state.order.lineItems.glassParts ?? {}), ...Object.values(state.order.lineItems.otherParts ?? {})],
-      orderPartTypes:  [...Object.keys(state.order.lineItems.glassParts), ...Object.keys(state.order.lineItems.otherParts)],
+      // orderPartTypes:  [...Object.keys(state.order.lineItems.glassParts ?? {}), ...Object.keys(state.order.lineItems.otherParts ?? {})],
-      hasRecalibrationPart: Object.values(state.order.lineItems.glassParts).filter(x => x.requiresRecalibration)?.length > 0,
+      // hasRecalibrationPart: Object.values(state.order.lineItems.glassParts ?? {}).filter(x => x.requiresRecalibration)?.length > 0,
-      selectedMultiGlass: state.order.damage.glassToReplace.length > 1,
+      // selectedMultiGlass: state.order.damage.glassToReplace.length > 1,
-      selectedWindshieldGlass: Object.keys(state.order.damage.glassToReplace).map(x => x.split("-")[0]).includes(damageLocationsSelected.WINDSHIELD),
+      // selectedWindshieldGlass: Object.keys(state.order.damage.glassToReplace ?? []).map(x => x.split("-")[0]).includes(damageLocationsSelected.WINDSHIELD),
-      selectedBackGlass: Object.keys(state.order.damage.glassToReplace).map(x => x.split("-")[0]).includes(damageLocationsSelected.BACK),
+      // selectedBackGlass: Object.keys(state.order.damage.glassToReplace).map(x => x.split("-")[0]).includes(damageLocationsSelected.BACK),
-      selectedDriverSideGlass: Object.keys(state.order.damage.glassToReplace).map(x => x.split("-")[0]).includes(damageLocationsSelected.DRIVER),
+      // selectedDriverSideGlass: Object.keys(state.order.damage.glassToReplace).map(x => x.split("-")[0]).includes(damageLocationsSelected.DRIVER),
-      selectedPassengerSideGlass: Object.keys(state.order.damage.glassToReplace).map(x => x.split("-")[0]).includes(damageLocationsSelected.PASSENGER)
+      // selectedPassengerSideGlass: Object.keys(state.order.damage.glassToReplace).map(x => x.split("-")[0]).includes(damageLocationsSelected.PASSENGER)
     }
-  }
+  },
+  experimentSettings: (state) => state.applicationUser.experiments.map(x => x.settings).reduce((r, c) => Object.assign(r, c), {})
 }
 
 // Export Actions
@@ -490,6 +495,9 @@ export const actions = {
   resetState(context) {
     context.commit(storeMutations.RESET_STATE);
   },
+  resetSaveOrderPromise(context) {
+    context.commit(storeMutations.RESET_SAVE_ORDER_PROMISE);
+  },
 
   // Content API Actions
   getRouteInfo(context, { pageName }) {
@@ -530,12 +538,12 @@ export const actions = {
   },
 
   // Misc Actions
-  updateStoreWithSaveOrderResponse(context, { referralNumber, referralDate, referralCorrelationId, accountNumber, saveQuoteId, crmCustomerId }) {
+  updateStoreWithSaveOrderResponse(context, { referralNumber, referralDate, referralCorrelationId, accountNumber, savedSessionId, crmCustomerId }) {
     context.commit(storeMutations.UPDATE_REFERRAL_NUMBER, referralNumber);
     context.commit(storeMutations.UPDATE_REFERRAL_DATE, referralDate);
     context.commit(storeMutations.UPDATE_REFERRAL_CORRELATION_ID, referralCorrelationId);
     context.commit(storeMutations.UPDATE_PARENT_ACCT_NUMBER, accountNumber);
-    context.commit(storeMutations.UPDATE_SAVE_QUOTE_ID, saveQuoteId);
+    context.commit(storeMutations.UPDATE_SAVED_SESSION_ID, savedSessionId);
     context.commit(storeMutations.UPDATE_CRM_CUSTOMER_ID, crmCustomerId);
   },
 
@@ -738,7 +746,7 @@ export const actions = {
         existingPromoCode: null,
         lastPage: applicationUser.lastPageVisited,
         crmCustomerId: applicationUser.crmCustomerId,
-        saveQuoteId: applicationUser.saveQuoteId,
+        savedSessionId: applicationUser.savedSessionId,
 
       },
     });
@@ -754,7 +762,10 @@ export const actions = {
         accountNumber: accountNumber?.toString()
       },
     }).then((response) => {
-      context.commit(storeMutations.RESET_STATE);
+      // clear the state if the existing referral number does not equal what is returned from loadOrder
+      if (context.state.order.referralNumber != response.data.referralNumber) {
+        context.commit(storeMutations.RESET_STATE);
+      }
       context.commit(storeMutations.UPDATE_STATE_WITH_ORDER_INFORMATION, response.data);
       return response;
     });

src/store/store.spec.js

@@ -574,7 +574,7 @@ describe("Actions", () => {
       applicationUser: {
         lastPageVisited: "test-page",
         crmCustomerId: "xxx-xxx-xxx",
-        saveQuoteId: "xxx-xxx-xxx"
+        savedSessionId: "xxx-xxx-xxx"
       }
     };
     context.state = {
@@ -630,7 +630,7 @@ describe("Actions", () => {
         referralDate: new Date().toUTCString(), 
         referralCorrelationId: "xxx-xxx-xxx", 
         accountNumber: "167132",
-        saveQuoteId: "xxx-xxx-xxx",
+        savedSessionId: "xxx-xxx-xxx",
         crmCustomerId: "xxx-xxx-xxx",
       });
 
@@ -639,7 +639,7 @@ describe("Actions", () => {
     expect(commit).toBeCalledWith(storeMutations.UPDATE_REFERRAL_DATE, new Date().toUTCString());
     expect(commit).toBeCalledWith(storeMutations.UPDATE_REFERRAL_CORRELATION_ID, "xxx-xxx-xxx");
     expect(commit).toBeCalledWith(storeMutations.UPDATE_PARENT_ACCT_NUMBER, "167132");
-    expect(commit).toBeCalledWith(storeMutations.UPDATE_SAVE_QUOTE_ID, "xxx-xxx-xxx");
+    expect(commit).toBeCalledWith(storeMutations.UPDATE_SAVED_SESSION_ID, "xxx-xxx-xxx");
     expect(commit).toBeCalledWith(storeMutations.UPDATE_CRM_CUSTOMER_ID, "xxx-xxx-xxx");
   });
 

src/ux-components/list-button-horizontal/list-button-horizontal.vue

@@ -20,7 +20,7 @@
     <label
       tabindex="-1"
       :for="buttonID"
-      :aria-labelledby="buttonID"
+      :aria-label="buttonLabel"
       class="d-flex flex-column justify-content-center py-3 px-4"
       @mouseup="triggerButton()"
     >
@@ -78,6 +78,7 @@ export default {
     validationRules: String,
     selectedValues: [Array, String],
     hasError: Boolean,
+    valueToLogType: String,
   },
   data() {
     return {
@@ -92,10 +93,6 @@ export default {
         : this.selectedValues[0];
     }
   },
-  unmounted() { // needed to clear this button's selectedValues if it is removed
-    this.checkValue = false;
-    this.handleCheckChange();
-  },
   methods: {
     displayLoader() {
       this.isLoaderDisplayed = true;
@@ -120,7 +117,7 @@ export default {
           this.handleCheckChange();
       }
       
-      this.pushEventToGA(this.$route.query[queryStrings.FMG_PAGE], this.GaActions.CLICKED, this.value.toString(), true);
+      this.pushEventToGA(this.$route.query[queryStrings.FMG_PAGE], this.GaActions.CLICKED, this.value.toString(), true, this.valueToLogType);
     },
     handleCheckChange() {
       const emitEvent = {

src/ux-components/list-button/list-button.vue

@@ -3,6 +3,7 @@
     class="list-group list-button rounded-3 d-flex flex-column w-100 mb-2"
     :class="[(errors.length > 0 || hasError) ? 'has-error' : '']"
     @keyup.space="triggerButton"
+    @keyup.enter="triggerButton"
     @keyup.up="handleKeyupArrow"
     @keyup.down="handleKeyupArrow"
     @keyup.left="handleKeyupArrow"
@@ -15,11 +16,12 @@
       :aria-required="isRequired"
       v-model="checkValue"
       @change="handleInputChange"
+      :aria-label="value"
     >
     <label
       tabindex="-1"
       :for="buttonID"
-      :aria-labelledby="buttonID"
+      :aria-label="buttonLabel"
       class="d-flex flex-column justify-content-center py-3 px-4"
       @mouseup="triggerButton"
     >
@@ -73,10 +75,12 @@ export default {
     // Field initial value
       type: [String, Number],
       default: "",
-    },
+      },
+    
     validationRules: String,
     selectedValues: [Array, String],
     hasError: Boolean,
+    valueToLogType: String,
   },
   data() {
     return {
@@ -91,10 +95,6 @@ export default {
         : this.selectedValues[0];
     }
   },
-  unmounted() { // needed to clear this button's selectedValues if it is removed
-    this.checkValue = false;
-    this.handleCheckChange();
-  },
   methods: {
     displayLoader() {
       this.isLoaderDisplayed = true;
@@ -114,7 +114,7 @@ export default {
         this.displayLoader();
         this.handleCheckChange();
       }
-      this.pushEventToGA(this.$route.query[queryStrings.FMG_PAGE], this.GaActions.CLICKED, this.value.toString(), true);
+      this.pushEventToGA(this.$route.query[queryStrings.FMG_PAGE], this.GaActions.CLICKED, this.value.toString(), true, this.valueToLogType);
     },
     handleCheckChange() {
       const emitEvent = {

src/ux-components/list-card/list-card.spec.js

@@ -14,7 +14,6 @@ describe("list-card.vue", () => {
         groupID: "checkbox-demo-1",
         groupName: "Checkbox 1",
         buttonImage: "windshield-damage.svg",
-        modelValue: ["List Card Checkbox"],
       },
     });
 
@@ -33,7 +32,6 @@ describe("list-card.vue", () => {
         groupID: "radio-demo-1",
         groupName: "radio 1",
         buttonImage: "windshield-damage.svg",
-        modelValue: ["List Card Checkbox"],
       },
     });
 
@@ -53,7 +51,6 @@ describe("list-card.vue", () => {
         groupName: "radio 1",
         buttonImage: "windshield-damage.svg",
         buttonLabelSubCopy: "Test",
-        modelValue: ["List Card Checkbox"],
       },
     });
 
@@ -73,7 +70,6 @@ describe("list-card.vue", () => {
         groupName: "radio 1",
         buttonImage: "windshield-damage.svg",
         buttonLabelSubCopy: "Test",
-        modelValue: ["List Card Checkbox"],
       },
     });
 
@@ -93,7 +89,6 @@ describe("list-card.vue", () => {
         groupName: "radio 1",
         buttonImage: "windshield-damage.svg",
         buttonLabelSubCopy: "Test",
-        modelValue: ["List Card Checkbox"],
       },
     });
 
@@ -113,7 +108,6 @@ describe("list-card.vue", () => {
         groupName: "radio 1",
         buttonImage: "windshield-damage.svg",
         isRequired: true,
-        modelValue: ["List Card Checkbox"],
       },
     });
 
@@ -135,7 +129,6 @@ describe("list-card.vue", () => {
         isRequired: true,
         isWide: true,
         buttonLabelSubCopy: "",
-        modelValue: ["List Card Checkbox"],
       },
     });
 
@@ -157,7 +150,6 @@ describe("list-card.vue", () => {
         isRequired: true,
         isWide: true,
         buttonLabelSubCopy: "Button Subcopy",
-        modelValue: ["List Card Checkbox"],
       },
     });
 
@@ -178,7 +170,6 @@ describe("list-card.vue", () => {
         buttonImage: "windshield-damage.svg",
         isRequired: true,
         isWide: false,
-        modelValue: ["List Card Checkbox"],
       },
     });
 
@@ -199,13 +190,13 @@ describe("list-card.vue", () => {
         buttonImage: "windshield-damage.svg",
         isRequired: true,
         isWide: false,
-        modelValue: ["List Card Checkbox"],
+        buttonID: 'list-card-id',
-        buttonID: 'list-card-id'
+        selectedValues: "List Card Checkbox"
       },
     });
     wrapper.vm.handleCheckChange();
     // Assert
-    expect(wrapper.emitted()["isCheckedChanged"][0]).toEqual([{value: "List Card Checkbox", checkValue: "List Card Checkbox", buttonId: 'list-card-id'}]);
+    expect(wrapper.emitted()["isCheckedChanged"][0]).toEqual([{value: "List Card Checkbox", checkValue: true, buttonId: 'list-card-id'}]);
   });
 
   it("Should set checkValue data if selectedButtonIDs has value(s)", async () => {
@@ -220,12 +211,11 @@ describe("list-card.vue", () => {
         buttonImage: "windshield-damage.svg",
         isRequired: true,
         isWide: false,
-        modelValue: ["List Card Checkbox"],
+        selectedValues: "Car-Front"
-        selectedValues: ["Car-Front"]
       },
     });
     // Assert
-    expect(wrapper.componentVM.checkValue).toEqual("Car-Front");
+    expect(wrapper.componentVM.checkValue).toEqual(false);
   });
 
   it("Should set an initial value for validation if selectedValues include the value", async () => {
@@ -234,7 +224,6 @@ describe("list-card.vue", () => {
       propsData: {
         value: "Windshield",
         groupName: "radio 1",
-        modelValue: ["Windshield"],
         selectedValues: ["Windshield"],
       },
     });

src/ux-components/list-card/list-card.vue

@@ -7,11 +7,11 @@
         isWide ? 'horizontal' : '',
         (errors.length > 0 || hasError) ? 'has-error' : '',
       ]"
-      @keyup.space="triggerButton()"
+      @keyup.space="triggerButton"
-      @keyup.up="handleKeyupArrow()"
+      @keyup.up="handleKeyupArrow"
-      @keyup.down="handleKeyupArrow()"
+      @keyup.down="handleKeyupArrow"
-      @keyup.left="handleKeyupArrow()"
+      @keyup.left="handleKeyupArrow"
-      @keyup.right="handleKeyupArrow()"
+      @keyup.right="handleKeyupArrow"
     >
       <input
         :type="isMultiSelect ? 'checkbox' : 'radio'"
@@ -26,7 +26,7 @@
       <label
         tabindex="-1"
         :for="buttonID"
-        :aria-labelledby="buttonID"
+        :aria-label="buttonLabel"
         class="d-flex w-100 align-items-center px-2 h-100"
         :class="getLabelClasses"
         @mouseup="triggerButton"
@@ -87,33 +87,27 @@ export default {
     colLength: String,
     validationRules: String,
     selectedValues: [Array, String],
-    modelValue: Object,
     hasError: Boolean,
+    valueToLogType: String,
   },
   data() {
     return {
       checkValue: null,
     }
   },
-  created() {
+  mounted() {
-    if (Array.isArray(this.selectedValues)) {
+    if (Array.isArray(this.validateValue)) {
-      this.checkValue = this.isMultiSelect
+      this.checkValue = this.isValueSelectedByArray(this.selectedValues);
-        ? this.selectedValues.includes(this.value)
+      const isSelectedByValidator = this.isValueSelectedByArray(this.validateValue);
-        : this.selectedValues[0];
+      
-    }
+      if (this.checkValue != isSelectedByValidator) {
-    else if (Array.isArray(this.modelValue)) {
+        this.handleChange(this.value);
-      this.checkValue = this.isMultiSelect
+      }
-        ? this.modelValue.includes(this.value)
-        : this.modelValue[0];
     }
     else {
-      this.checkValue = this.selectedValues == this.value || this.modelValue == this.value;
+      this.checkValue = this.selectedValues == this.value;
     }
   },
-  unmounted() { // needed to clear this button's selectedValues if it is removed
-    this.checkValue = false;
-    this.handleCheckChange();
-  },
   computed: {
     getLabelClasses() {
       if (this.isWide) {
@@ -128,10 +122,15 @@ export default {
     },
   },
   methods: {
+    isValueSelectedByArray(arr) {
+      return this.isMultiSelect
+        ? arr.includes(this.value)
+        : arr[0];
+    },
     handleInputChange() {
-        if(!this.selectingInitiatesLoad) {
+      if(!this.selectingInitiatesLoad) {
-          this.handleCheckChange();
+        this.handleCheckChange();
-        }
+      }
     },
     handleKeyupArrow() {
       if (this.isMultiSelect) {
@@ -148,7 +147,7 @@ export default {
         this.handleCheckChange();
       }
       
-      this.pushEventToGA(this.$route.query[queryStrings.FMG_PAGE], this.GaActions.CLICKED, this.value.toString(), true);
+      this.pushEventToGA(this.$route.query[queryStrings.FMG_PAGE], this.GaActions.CLICKED, this.value.toString(), true, this.valueToLogType);
     },
     handleCheckChange() {
       const emitEvent = {
@@ -159,20 +158,13 @@ export default {
       
       this.handleChange(this.value);
       this.$emit("isCheckedChanged", emitEvent);
-      this.$emit("update:modelValue", emitEvent);
     },
   },
   watch: {
     // Changing this will impact pre-selection data loads on vehicle-parts.
     // If changed, please regression test that vehicle-parts data still loads correctly with previous selections.
-    modelValue(newVal) {
-      if (newVal !== undefined) {
-        this.checkValue = newVal.value;
-      }
-    },
     selectedValues(newVal) {
       if (typeof newVal === "string") {
-        this.handleChange(newVal);
         this.checkValue = newVal == this.value;
       }
       else if (newVal !== undefined) {
@@ -198,11 +190,16 @@ export default {
     const {
         handleChange,
         errors,
+        value
     } = useField(toRef(props, "groupName"), toRef(props, "validationRules"), fieldOptions); 
 
+    // First land on the blank, unselected page, no handleChange
+    // Land on page with initial values, handleChange
+    const validateValue = value;
     return {
       handleChange,
       errors,
+      validateValue,
       fieldOptions, // only need to expose this for unit test purposes
     };
   },

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

@@ -1,6 +1,7 @@
 import { shallowMount } from "@vue/test-utils";
 import radio from "./radio";
 import { nextTick } from "vue";
+import { GaActions } from "@/constants/analytics";
 
 describe("radio.vue", () => {
   it("Should return group name", async () => {
@@ -64,6 +65,13 @@ describe("radio.vue", () => {
   it("Should emit button value on click", async () => {
     // Act
     const wrapper = shallowMount(radio, {
+      global: {
+        mocks: {
+          '$route': { query: { fmgPage: 'page-name' } },
+          GaActions: GaActions,
+          pushEventToGA: jest.fn(),
+        }
+      },
       propsData: {
         buttonLabel: "Windshield",
         value: "List Card Checkbox",
@@ -77,12 +85,20 @@ describe("radio.vue", () => {
     });
     wrapper.vm.handleCheckChange();
     // Assert
-    expect(wrapper.emitted()["isCheckedChanged"][0]).toEqual([{"buttonID": "List Card Checkbox", value: "List Card Checkbox", checkValue: false}]);
+    expect(wrapper.emitted()["isCheckedChanged"][0]).toEqual([{"buttonID": "List Card Checkbox", value: "List Card Checkbox", checkValue: false}]);;
+    expect(wrapper.vm.pushEventToGA).toHaveBeenCalled();
   });
 
   it("Should set checkValue data if selectedButtonIDs has value(s)", async () => {
     // Act
     const wrapper = shallowMount(radio, {
+      global: {
+        mocks: {
+          '$route': { query: { fmgPage: 'page-name' } },
+          GaActions: GaActions,
+          pushEventToGA: jest.fn(),
+        }
+      },
       propsData: {
         buttonLabel: "Windshield",
         buttonID: "List Card Checkbox",

src/ux-components/radio/radio.vue

@@ -25,6 +25,8 @@
 
 <script>
 import { useField } from "vee-validate";
+import { queryStrings } from "@/constants/query-strings";
+
 export default {
   name: "radio",
   props: {
@@ -39,7 +41,8 @@ export default {
     screenReaderOnlyText: String,
     selectedValues: String,
     hasError: Boolean,
-    validationRules: String
+    validationRules: String,
+    valueToLogType: String,
   },
   data() {
     return {
@@ -65,6 +68,8 @@ export default {
 
       this.$emit("isCheckedChanged", emitEvent);
       this.$emit("update:modelValue", emitEvent);
+
+      this.pushEventToGA(this.$route.query[queryStrings.FMG_PAGE], this.GaActions.CLICKED, this.value.toString(), true, this.valueToLogType);
     },
   },
   setup(props) {