CSR-514 Fix merge conflicts
This commit is contained in:
Katie
commit
4de7240610
51 changed files with 1891 additions and 698 deletions
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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,8 +36,9 @@
|
|||
data-test="button"
|
||||
:validationRules="validationRules"
|
||||
:class="[suppressError ? 'alertError' : '']"
|
||||
:valueToLogType="valueToLogType"
|
||||
/>
|
||||
<!-- For nested questions -->
|
||||
<!-- For nested questions -->
|
||||
<transition name="fade" mode="out-in">
|
||||
<div v-if="typeof selectedValues == 'string' && selectedValues == answer.Name">
|
||||
<slot></slot>
|
||||
|
|
@ -89,7 +91,8 @@ export default {
|
|||
modelValue: [Array, String],
|
||||
validationRules: String,
|
||||
suppressError: Boolean,
|
||||
useTextForValue: Boolean
|
||||
useTextForValue: Boolean,
|
||||
valueToLogType: String,
|
||||
},
|
||||
computed: {
|
||||
formattedGroupName() {
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -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 };
|
||||
|
|
|
|||
3
src/constants/header-keys.js
Normal file
3
src/constants/header-keys.js
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
export const headerKeys = {
|
||||
EXPERIMENT: "X-Experiment-Data"
|
||||
}
|
||||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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 };
|
||||
|
|
|
|||
|
|
@ -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) {
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -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: [{
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
||||
|
|
|
|||
|
|
@ -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: [{
|
||||
|
|
|
|||
|
|
@ -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) {
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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(() => {
|
||||
return [{ vehicle: "test" }];
|
||||
})
|
||||
}
|
||||
}),
|
||||
vehicles: jest.fn(() => {
|
||||
return [{ vehicle: "test" }];
|
||||
})
|
||||
},
|
||||
computed: {
|
||||
ValueToLogTypes() {
|
||||
return ValueToLogTypes;
|
||||
}
|
||||
},
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@
|
|||
v-model="selectedVehicleVinAsArray"
|
||||
isRequired
|
||||
:validation-rules="validationRules"
|
||||
:valueToLogType="ValueToLogTypes.LAST_5"
|
||||
/>
|
||||
<alert ref="differentVehicleAlert"
|
||||
v-if="isCarIdDifferent"
|
||||
|
|
|
|||
165
src/layouts/capability-questions/capability-questions.vue
Normal file
165
src/layouts/capability-questions/capability-questions.vue
Normal file
|
|
@ -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>
|
||||
|
|
@ -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 () => {
|
||||
|
|
|
|||
202
src/layouts/molding-questions/molding-questions.vue
Normal file
202
src/layouts/molding-questions/molding-questions.vue
Normal file
|
|
@ -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>
|
||||
|
|
@ -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: [],
|
||||
waitingForLoad: true,
|
||||
partsQuestionsData: this.$store.getters.pageData(fmgPageValues.PART_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,
|
||||
glassNameAndParts: [],
|
||||
hasMultipleParts: false,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
|
|
@ -102,22 +112,7 @@ export default {
|
|||
return this.getCmsContent("AlertPartsQuestions", "BodyText");
|
||||
},
|
||||
},
|
||||
async mounted() {
|
||||
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;
|
||||
},
|
||||
mixins: [vehicleQuestionsMixin],
|
||||
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
|
||||
this.hasMultipleParts = this.glassNameAndParts.some((glass) => glass.parts?.length > 1);
|
||||
|
||||
// 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) {
|
||||
// NAVIGATE FORWARD
|
||||
if (hasGlassLocationWithMultipleParts) {
|
||||
// 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
|
||||
this.$router.navigate(this.navigationScenarios.ANSWERED_QUESTIONS_WITH_SINGLE_PART,this.$route);
|
||||
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();
|
||||
}
|
||||
},
|
||||
arePagePrerequisitesValid() {
|
||||
|
|
@ -206,18 +194,19 @@ export default {
|
|||
questionChain,
|
||||
funnelSubHeader,
|
||||
funnelFooter,
|
||||
loadingModal,
|
||||
Form,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.part-questions {
|
||||
.question-text {
|
||||
.part-questions {
|
||||
.question-text {
|
||||
margin-bottom: .5rem;
|
||||
span {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -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: {
|
||||
|
|
|
|||
|
|
@ -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: {
|
||||
|
|
|
|||
|
|
@ -17,7 +17,6 @@
|
|||
|
||||
<script>
|
||||
import buttonQuestion from "@/common-components/button-question/button-question";
|
||||
import store from "@/store";
|
||||
|
||||
export default ({
|
||||
name: "windshieldDamageTypeQuestion",
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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.lineItems = { glassParts: {} }
|
||||
store.commit = jest.fn();
|
||||
|
||||
store.getters.pageData.mockReturnValueOnce({
|
||||
partsOrQuestions: [
|
||||
{
|
||||
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 };
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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
|
||||
import glassPartQuestion from "@/layouts/vehicle-parts/glass-part-question/glass-part-question";
|
||||
import funnelHeader from "@/common-components/funnel-header/funnel-header";
|
||||
import vehicleBanner from "@/common-components/vehicle-banner/vehicle-banner";
|
||||
import funnelSubHeader from "@/common-components/funnel-sub-header/funnel-sub-header";
|
||||
import funnelFooter from "@/common-components/funnel-footer/funnel-footer";
|
||||
import alert from "@/ux-components/alert/alert";
|
||||
// Supporting Files
|
||||
import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
|
||||
import { settleAllPromises } from "@/helpers/layout-helper";
|
||||
import { fmgPageValues } from "@/router/router-constants/fmgPage-values";
|
||||
import store from "@/store";
|
||||
import { Form } from "vee-validate";
|
||||
import { storeActions } from "@/constants/store-actions";
|
||||
// Components
|
||||
import glassPartQuestion from "@/layouts/vehicle-parts/glass-part-question/glass-part-question";
|
||||
import funnelHeader from "@/common-components/funnel-header/funnel-header";
|
||||
import vehicleBanner from "@/common-components/vehicle-banner/vehicle-banner";
|
||||
import funnelSubHeader from "@/common-components/funnel-sub-header/funnel-sub-header";
|
||||
import funnelFooter from "@/common-components/funnel-footer/funnel-footer";
|
||||
import alert from "@/ux-components/alert/alert";
|
||||
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 { fmgPageValues } from "@/router/router-constants/fmgPage-values";
|
||||
import { Form } from "vee-validate";
|
||||
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
|
||||
const cmsContentPromise = fetchCmsContentForPage(to.query.fmgPage);
|
||||
// Settle promises and get results
|
||||
const promiseResultMap = [
|
||||
// Call APIs
|
||||
const cmsContentPromise = fetchCmsContentForPage(to.query.fmgPage);
|
||||
// Settle promises and get results
|
||||
const promiseResultMap = [
|
||||
{
|
||||
resultKey: "cmsContent",
|
||||
promise: cmsContentPromise,
|
||||
resultKey: "cmsContent",
|
||||
promise: cmsContentPromise,
|
||||
},
|
||||
];
|
||||
const resultMap = await settleAllPromises(promiseResultMap);
|
||||
// Call the "next" function to complete the transition to this page.
|
||||
next((vm) => {
|
||||
];
|
||||
const resultMap = await settleAllPromises(promiseResultMap);
|
||||
// Call the "next" function to complete the transition to this page.
|
||||
next((vm) => {
|
||||
vm.setCmsContent(resultMap.cmsContent);
|
||||
|
||||
// Glass Part Question dynamic component
|
||||
Object.keys(vm.$refs)
|
||||
.filter(
|
||||
(r) => r.includes(vm.RefPrefix) && vm.$refs[r][0] !== undefined
|
||||
)
|
||||
.forEach((c) =>
|
||||
.filter((r) => r.includes(vm.RefPrefix) && vm.$refs[r][0] !== undefined)
|
||||
.forEach((c) =>
|
||||
vm.$refs[c][0].initializeComponent({
|
||||
ColorQuestionWidget: resultMap.cmsContent.ColorQuestionWidget,
|
||||
FeatureQuestionWidget: resultMap.cmsContent.FeatureQuestionWidget,
|
||||
ColorQuestionWidget: resultMap.cmsContent.ColorQuestionWidget,
|
||||
FeatureQuestionWidget: resultMap.cmsContent.FeatureQuestionWidget,
|
||||
})
|
||||
);
|
||||
});
|
||||
);
|
||||
});
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
glassParts: {},
|
||||
alertWidgetData: Object,
|
||||
alreadyPopulatedPartsData: {},
|
||||
};
|
||||
},
|
||||
components: {
|
||||
Form,
|
||||
glassPartQuestion,
|
||||
funnelHeader,
|
||||
vehicleBanner,
|
||||
funnelSubHeader,
|
||||
funnelFooter,
|
||||
alert,
|
||||
return {
|
||||
glassParts: {},
|
||||
alertWidgetData: Object,
|
||||
alreadyPopulatedPartsData: {},
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
isForwardActionDisabled() {
|
||||
return (
|
||||
Object.keys(this.matchedParts).length !==
|
||||
this.PartsFromApi.partsOrQuestions.length
|
||||
);
|
||||
},
|
||||
matchedParts() {
|
||||
const matchedParts = [];
|
||||
isForwardActionDisabled() {
|
||||
return (
|
||||
this.selectedGlassPartNumbers.length !== this.PartsFromApi.partsOrQuestions.length
|
||||
);
|
||||
},
|
||||
selectedGlassPartNumbers () {
|
||||
// Compile all selected parts from the page.
|
||||
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.
|
||||
this.PartsFromApi.partsOrQuestions.forEach((part) => {
|
||||
const selectedPartForGlassLocationAndName =
|
||||
this.glassParts[`${part.glassLocation}-${part.glassName}`];
|
||||
const selectedPartData = part.parts.filter(
|
||||
(part) =>
|
||||
selectedPartForGlassLocationAndName &&
|
||||
part.partNumber == selectedPartForGlassLocationAndName?.partNumber
|
||||
)[0];
|
||||
// Map API result data, to vehicle-parts data structure
|
||||
const mappedData = partsData.partsOrQuestions.map((g) => {
|
||||
return {
|
||||
glassName: g.glassName,
|
||||
glassLocation: g.glassLocation,
|
||||
colorAnswers: g.parts.reduce((arr, p) => {
|
||||
arr.push({
|
||||
ColorAnswerText: p.color,
|
||||
FeatureAnswers: [
|
||||
{
|
||||
FeatureAnswerText: p.description === "" ? p.color : p.description,
|
||||
PartNumber: p.partNumber,
|
||||
},
|
||||
],
|
||||
});
|
||||
return arr;
|
||||
}, []),
|
||||
};
|
||||
});
|
||||
|
||||
if (selectedPartData) matchedParts.push(selectedPartData);
|
||||
});
|
||||
return mappedData;
|
||||
},
|
||||
|
||||
return matchedParts;
|
||||
},
|
||||
PartsOrQuestions() {
|
||||
const partsData = this.PartsFromApi;
|
||||
PartsFromApi() {
|
||||
return this.$store.getters.pageData(fmgPageValues.VEHICLE_PARTS);
|
||||
},
|
||||
|
||||
// Map API result data, to vehicle-parts data structure
|
||||
const mappedData = partsData.partsOrQuestions.map((g) => {
|
||||
return {
|
||||
glassName: g.glassName,
|
||||
glassLocation: g.glassLocation,
|
||||
colorAnswers: g.parts.reduce((arr, p) => {
|
||||
arr.push({
|
||||
ColorAnswerText: p.color,
|
||||
FeatureAnswers: [
|
||||
{
|
||||
FeatureAnswerText:
|
||||
p.description === "" ? p.color : p.description,
|
||||
PartNumber: p.partNumber,
|
||||
},
|
||||
],
|
||||
});
|
||||
return arr;
|
||||
}, []),
|
||||
};
|
||||
});
|
||||
|
||||
return mappedData;
|
||||
},
|
||||
|
||||
PartsFromApi() {
|
||||
return store.getters.pageData(fmgPageValues.VEHICLE_PARTS);
|
||||
},
|
||||
|
||||
RefPrefix() {
|
||||
return "partQuestion";
|
||||
},
|
||||
RefPrefix() {
|
||||
return "partQuestion";
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
arePagePrerequisitesValid() {
|
||||
// Check if isRepair is populated and if the pageData we need is here (Parts data)
|
||||
if (
|
||||
store.getters.damage.isRepair != null &&
|
||||
Object.keys(store.getters.pageData(fmgPageValues.VEHICLE_PARTS))
|
||||
.length !== 0
|
||||
) {
|
||||
return true;
|
||||
}
|
||||
arePagePrerequisitesValid() {
|
||||
// Check if isRepair is populated and if the pageData we need is here (Parts data)
|
||||
return store.getters.damage.isRepair != null &&
|
||||
Object.keys(store.getters.pageData(fmgPageValues.VEHICLE_PARTS)).length !== 0;
|
||||
},
|
||||
backButtonAction() {
|
||||
const hasPartQuestions = this.hasPartQuestions(this.$store.getters.pageData(fmgPageValues.PART_QUESTIONS)?.partsOrQuestions);
|
||||
const backNavigationScenario = hasPartQuestions ? this.navigationScenarios.CLICKED_BACK_WITH_PART_QUESTION_ANSWERS : this.navigationScenarios.CLICKED_BACK_WITHOUT_PART_QUESTION_ANSWERS;
|
||||
|
||||
return false;
|
||||
},
|
||||
backButtonAction() {
|
||||
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
|
||||
this.$router.navigate(
|
||||
backNavigationScenario,
|
||||
this.$route
|
||||
);
|
||||
},
|
||||
async forwardButtonAction() {
|
||||
const matchedParts = [];
|
||||
|
||||
if (isMatched) {
|
||||
matchedParts.push(currentPart);
|
||||
// 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 = 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.
|
||||
if (this.isForwardActionDisabled) {
|
||||
this.$refs.funnelFooter.removeLoader();
|
||||
throw new Error("Could not match any parts to the selected parts");
|
||||
}
|
||||
const hasChildPartQuestions = this.hasChildPartQuestions(matchedParts);
|
||||
const hasCapabilityQuestions = this.hasCapabilityQuestions(matchedParts);
|
||||
|
||||
// Save parts to the store.
|
||||
await this.dispatchStoreAction(
|
||||
storeActions.SAVE_GLASS_PARTS,
|
||||
matchedParts
|
||||
);
|
||||
// If no parts could be matched, throw an error (isForwardActionDisabled is based off of matchedParts)
|
||||
if (this.isForwardActionDisabled) {
|
||||
this.$refs.funnelFooter.removeLoader();
|
||||
throw new Error("Could not match any parts to the selected parts");
|
||||
}
|
||||
|
||||
// Navigate to the next page.
|
||||
this.$router.navigate(
|
||||
this.navigationScenarios.SELECTED_PARTS,
|
||||
this.$route
|
||||
);
|
||||
},
|
||||
// Navigate to the next page
|
||||
if (hasChildPartQuestions) {
|
||||
this.$router.navigate(
|
||||
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() {
|
||||
const partsData = this.PartsFromApi;
|
||||
const alreadyPopulatedPartsData =
|
||||
this.$store.getters.lineItems.glassParts === null
|
||||
? {}
|
||||
: this.$store.getters.lineItems.glassParts;
|
||||
} else {
|
||||
// if single parts only
|
||||
const collectedGlassParts = this.reducedGlassPartsArray(matchedParts);
|
||||
// save to store lineItems.glassParts
|
||||
this.$store.commit(storeMutations.UPDATE_GLASS_PARTS, collectedGlassParts);
|
||||
|
||||
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],
|
||||
};
|
||||
}
|
||||
// go to heritage quote page
|
||||
this.$refs.loadingModal.showModal();
|
||||
navigateToHeritageFunnel();
|
||||
}
|
||||
},
|
||||
|
||||
LoadInitialPartsData() {
|
||||
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>
|
||||
|
|
|
|||
|
|
@ -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()
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,11 +1,15 @@
|
|||
<template>
|
||||
<div class="vin-information">
|
||||
<div class="vin-toggle d-inline-flex" :class="[isActive ? 'active' : '']" @click="toggleClass()">
|
||||
<textLink :text="HeadlineText" linkType="text" href="#!" />
|
||||
<div class="vin-toggle d-inline-flex mt-2" :class="[isActive ? 'active' : '']" @click="toggleClass()">
|
||||
<textLink
|
||||
linkType="text"
|
||||
href="#!"
|
||||
:text="WhereCanIFindMyVINHeadline"
|
||||
/>
|
||||
</div>
|
||||
<div class="vin-info">
|
||||
<div class="mt-2" v-html="BodyText"></div>
|
||||
<img :src="OptionalImage" alt="" />
|
||||
<div class="mt-2" v-html="WhereCanIFindMyVINBodyCopy"></div>
|
||||
<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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -56,19 +56,19 @@
|
|||
/>
|
||||
</div>
|
||||
</div>
|
||||
<alert ref="alertInvalidZip"
|
||||
v-if="displayInvalidZipAlert"
|
||||
class="my-4"
|
||||
cmsWidgetName="AlertInvalidZipWidget"
|
||||
alertClass="alert-danger"
|
||||
v-bind:isDismissible="false"
|
||||
/>
|
||||
<alert ref="alertInvalidZip"
|
||||
v-if="displayInvalidZipAlert"
|
||||
class="my-4"
|
||||
cmsWidgetName="AlertInvalidZipWidget"
|
||||
alertClass="alert-danger"
|
||||
v-bind:isDismissible="false"
|
||||
/>
|
||||
<alert
|
||||
class="my-4"
|
||||
:manualHeadline="AlertPerfectMatchInsuranceVerifiedHeader"
|
||||
:manualCopy="AlertPerfectMatchInsuranceVerifiedBody"
|
||||
v-model="customAlertData"
|
||||
v-if="vinPopulatedOnPageLoad && isInsuranceVerified"
|
||||
v-if="vinPopulatedOnPageLoad && isInsuranceVerified"
|
||||
alertClass="alert-success"
|
||||
/>
|
||||
<alert
|
||||
|
|
@ -173,7 +173,7 @@ export default {
|
|||
return {
|
||||
vin: this.getVinFromStore(),
|
||||
serviceZipCode: this.getZipFromStore(),
|
||||
emailAddress: this.getEmailFromStore(),
|
||||
emailAddress: this.getEmailFromStore(),
|
||||
isCarIdDifferent: false,
|
||||
customAlertData: {},
|
||||
previouslyEnteredCarId: '',
|
||||
|
|
@ -198,7 +198,7 @@ export default {
|
|||
getZipFromStore(){
|
||||
return this.$store.getters.order.serviceLocation.zipCode;
|
||||
},
|
||||
attachCustomEvents() {
|
||||
attachCustomEvents() {
|
||||
this.prependActionToMethod(this, this.forwardButtonAction, () => {
|
||||
this.pushEventToGA(
|
||||
this.$route.query[this.queryStrings.FMG_PAGE],
|
||||
|
|
@ -243,9 +243,9 @@ export default {
|
|||
if (this.serviceZipCode && !isZipValid) {
|
||||
this.displayInvalidZipAlert = true;
|
||||
return this.$refs.funnelFooter.removeLoader();
|
||||
}
|
||||
}
|
||||
this.displayInvalidZipAlert = false;
|
||||
|
||||
|
||||
// If either lookup fails, remove the loader and stop processing the page.
|
||||
if (!resultMap.vehicleLookupResponse || !resultMap.serviceZipValidationResponse.isServiceable) {
|
||||
// If the vehicle result is undefined, the vin entered was invalid.
|
||||
|
|
@ -270,7 +270,7 @@ export default {
|
|||
this.previouslyEnteredCarId = resultMap.vehicleLookupResponse.carId;
|
||||
this.customAlertData.vehicleInfo = resultMap.vehicleLookupResponse;
|
||||
this.displayMatchedDifferentVehicleAlert = true;
|
||||
|
||||
|
||||
this.isSelectedGlassAvailableForVehicle = await isGlassAvailableForCarId(resultMap.vehicleLookupResponse.carId);
|
||||
|
||||
// Update button "Continue with..."
|
||||
|
|
@ -292,12 +292,12 @@ export default {
|
|||
}, false);
|
||||
|
||||
return await this.navigateForward();
|
||||
|
||||
|
||||
}
|
||||
|
||||
// If a VIN has already been found. Validate the Service Zip (in case of changes)
|
||||
const zipValidationResponse = await this.dispatchStoreAction(storeActions.VALIDATE_ZIP, {zip: this.serviceZipCode});
|
||||
|
||||
|
||||
// Check if Service Zip entered is serviceable
|
||||
if (zipValidationResponse.data.isServiceable) {
|
||||
// If the Service Zip entered is serviceable then save the Zip Info and Email Address and navigate forward
|
||||
|
|
@ -379,8 +379,8 @@ export default {
|
|||
}
|
||||
else {
|
||||
return 'XXXXXXXXXXXXXXXXX';
|
||||
}
|
||||
},
|
||||
}
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
vin() {
|
||||
|
|
@ -397,10 +397,10 @@ export default {
|
|||
vehicleBanner,
|
||||
funnelSubHeader,
|
||||
textboxQuestion,
|
||||
alert,
|
||||
alert,
|
||||
vinInformation,
|
||||
loadingModal,
|
||||
Form,
|
||||
Form,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
|
||||
},
|
||||
|
|
@ -97,7 +98,7 @@ export default {
|
|||
pushToDataLayerIfDefined(experimentWithDimension);
|
||||
});
|
||||
},
|
||||
|
||||
|
||||
prependActionToMethod(object, method, actionToPrepend) {
|
||||
const baseMethodName = method.name.startsWith('bound ') ? method.name.substring(6) : method.name ;
|
||||
const baseMethod = object[baseMethodName];
|
||||
|
|
@ -145,6 +146,9 @@ export default {
|
|||
},
|
||||
GaLabels() {
|
||||
return GaLabels;
|
||||
},
|
||||
ValueToLogTypes() {
|
||||
return ValueToLogTypes;
|
||||
}
|
||||
},
|
||||
};
|
||||
|
|
@ -163,4 +167,11 @@ function getPageNameByQueryString() {
|
|||
} else {
|
||||
return '';
|
||||
}
|
||||
}
|
||||
|
||||
function getValueToLog(value, valueToLogType) {
|
||||
if (valueToLogType != null && valueToLogType === ValueToLogTypes.LAST_5 ) {
|
||||
return value.slice(-5);
|
||||
}
|
||||
return value;
|
||||
}
|
||||
|
|
@ -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", () => {
|
||||
|
|
|
|||
15
src/mixins/experiment-mixin.js
Normal file
15
src/mixins/experiment-mixin.js
Normal file
|
|
@ -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;
|
||||
}
|
||||
},
|
||||
}
|
||||
148
src/mixins/experiment-mixin.spec.js
Normal file
148
src/mixins/experiment-mixin.spec.js
Normal file
|
|
@ -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 };
|
||||
}
|
||||
43
src/mixins/vehicle-questions-mixin.js
Normal file
43
src/mixins/vehicle-questions-mixin.js
Normal file
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
161
src/mixins/vehicle-questions-mixin.spec.js
Normal file
161
src/mixins/vehicle-questions-mixin.spec.js
Normal file
|
|
@ -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 };
|
||||
}
|
||||
|
|
@ -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();
|
||||
}
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
|
|
@ -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(store.commit).toHaveBeenCalledWith(storeMutations.UPDATE_GLASS_PARTS, { partsOrQuestions })
|
||||
expect(wrapper.vm.$store.commit).toHaveBeenCalledTimes(1);
|
||||
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();
|
||||
|
|
|
|||
|
|
@ -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.
|
||||
baseMixin.methods.savePageDataToStore(destinationFmgPageValue, optionalPageData);
|
||||
// Update page data to the store for next page if provided. Otherwise, keep existing page data
|
||||
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 ----------------------------------------------------------
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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 };
|
||||
|
|
|
|||
|
|
@ -1,236 +1,305 @@
|
|||
import { fmgPageValues } from "@/router/router-constants/fmgPage-values";
|
||||
import { navigationScenarios } from "@/router/router-constants/navigation-scenarios";
|
||||
|
||||
const routingTable = [
|
||||
{
|
||||
fmgPageValue: fmgPageValues.VEHICLE_YEAR,
|
||||
maps: [
|
||||
{
|
||||
scenario: navigationScenarios.SELECTED_YEAR,
|
||||
destinationFmgPageValue: fmgPageValues.VEHICLE_MAKE,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
fmgPageValue: fmgPageValues.VEHICLE_MAKE,
|
||||
maps: [
|
||||
{
|
||||
scenario: navigationScenarios.SELECTED_MAKE,
|
||||
destinationFmgPageValue: fmgPageValues.VEHICLE_MODEL,
|
||||
},
|
||||
{
|
||||
scenario: navigationScenarios.CLICKED_BACK,
|
||||
destinationFmgPageValue: fmgPageValues.VEHICLE_YEAR,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
fmgPageValue: fmgPageValues.VEHICLE_MODEL,
|
||||
maps: [
|
||||
{
|
||||
scenario: navigationScenarios.SELECTED_MODEL,
|
||||
destinationFmgPageValue: fmgPageValues.VEHICLE_STYLE,
|
||||
},
|
||||
{
|
||||
scenario: navigationScenarios.CLICKED_BACK,
|
||||
destinationFmgPageValue: fmgPageValues.VEHICLE_MAKE,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
fmgPageValue: fmgPageValues.VEHICLE_STYLE,
|
||||
maps: [
|
||||
{
|
||||
scenario: navigationScenarios.SELECTED_STYLE,
|
||||
destinationFmgPageValue: fmgPageValues.VEHICLE_DAMAGE,
|
||||
},
|
||||
{
|
||||
scenario: navigationScenarios.CLICKED_BACK,
|
||||
destinationFmgPageValue: fmgPageValues.VEHICLE_MODEL,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
fmgPageValue: fmgPageValues.VEHICLE_DAMAGE,
|
||||
maps: [
|
||||
{
|
||||
scenario: navigationScenarios.CLICKED_BACK,
|
||||
destinationFmgPageValue: fmgPageValues.VEHICLE_STYLE,
|
||||
},
|
||||
{
|
||||
scenario: navigationScenarios.CLICKED_FORWARD_WITH_VIN,
|
||||
destinationFmgPageValue: fmgPageValues.VIN_LOOKUP,
|
||||
},
|
||||
{
|
||||
scenario: navigationScenarios.CLICKED_FORWARD_WITHOUT_VIN,
|
||||
destinationFmgPageValue: fmgPageValues.ESTIMATE,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
fmgPageValue: fmgPageValues.VEHICLE_PARTS,
|
||||
maps: [
|
||||
{
|
||||
scenario: navigationScenarios.CLICKED_BACK,
|
||||
destinationFmgPageValue: fmgPageValues.VIN_LOOKUP,
|
||||
},
|
||||
{
|
||||
scenario: navigationScenarios.SELECTED_PARTS,
|
||||
destinationFmgPageValue: fmgPageValues.QUOTE,
|
||||
},
|
||||
{
|
||||
scenario: navigationScenarios.CLICKED_FORWARD,
|
||||
destinationFmgPageValue: fmgPageValues.REVEAL,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
fmgPageValue: fmgPageValues.REVEAL,
|
||||
maps: [
|
||||
{
|
||||
scenario: navigationScenarios.CLICKED_BACK,
|
||||
destinationFmgPageValue: fmgPageValues.VEHICLE_DAMAGE,
|
||||
},
|
||||
{
|
||||
scenario: navigationScenarios.SELECTED_PARTS,
|
||||
destinationFmgPageValue: fmgPageValues.VIN_LOOKUP,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
fmgPageValue: fmgPageValues.VIN_LOOKUP,
|
||||
maps: [
|
||||
{
|
||||
scenario: navigationScenarios.CLICKED_BACK,
|
||||
destinationFmgPageValue: fmgPageValues.ESTIMATE,
|
||||
},
|
||||
{
|
||||
scenario: navigationScenarios.SELECTED_VIN_HAS_MISMATCHED_GLASS,
|
||||
destinationFmgPageValue: fmgPageValues.VEHICLE_DAMAGE,
|
||||
},
|
||||
{
|
||||
scenario: navigationScenarios.CLICKED_BACK_WITH_VIN,
|
||||
destinationFmgPageValue: fmgPageValues.VEHICLE_DAMAGE,
|
||||
},
|
||||
{
|
||||
scenario: navigationScenarios.SELECTED_VIN_WITH_PART_QUESTIONS,
|
||||
destinationFmgPageValue: fmgPageValues.PART_QUESTIONS
|
||||
},
|
||||
{
|
||||
scenario: navigationScenarios.SELECTED_VIN_WITH_MULTIPLE_PARTS,
|
||||
destinationFmgPageValue: fmgPageValues.VEHICLE_PARTS
|
||||
}
|
||||
],
|
||||
},
|
||||
{
|
||||
fmgPageValue: fmgPageValues.LICENSE_PLATE_LOOKUP,
|
||||
maps: [
|
||||
{
|
||||
scenario: navigationScenarios.CLICKED_BACK,
|
||||
destinationFmgPageValue: fmgPageValues.ESTIMATE,
|
||||
},
|
||||
{
|
||||
scenario: navigationScenarios.CLICKED_FORWARD,
|
||||
destinationFmgPageValue: fmgPageValues.VEHICLE_DAMAGE,
|
||||
},
|
||||
{
|
||||
scenario: navigationScenarios.SELECTED_VIN_WITH_PART_QUESTIONS,
|
||||
destinationFmgPageValue: fmgPageValues.PART_QUESTIONS
|
||||
},
|
||||
{
|
||||
scenario: navigationScenarios.SELECTED_VIN_WITH_MULTIPLE_PARTS,
|
||||
destinationFmgPageValue: fmgPageValues.VEHICLE_PARTS
|
||||
}
|
||||
],
|
||||
},
|
||||
{
|
||||
fmgPageValue: fmgPageValues.ADDRESS_LOOKUP,
|
||||
maps: [
|
||||
{
|
||||
scenario: navigationScenarios.CLICKED_BACK,
|
||||
destinationFmgPageValue: fmgPageValues.ESTIMATE,
|
||||
},
|
||||
{
|
||||
scenario: navigationScenarios.CONTINUING_WITH_MULTIPLE_VEHICLES,
|
||||
destinationFmgPageValue: fmgPageValues.ADDRESS_VEHICLES,
|
||||
},
|
||||
{
|
||||
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_MULTIPLE_PARTS,
|
||||
destinationFmgPageValue: fmgPageValues.VEHICLE_PARTS
|
||||
}
|
||||
],
|
||||
},
|
||||
{
|
||||
fmgPageValue: fmgPageValues.ADDRESS_VEHICLES,
|
||||
maps: [
|
||||
{
|
||||
scenario: navigationScenarios.CLICKED_BACK,
|
||||
destinationFmgPageValue: fmgPageValues.ADDRESS_LOOKUP,
|
||||
},
|
||||
{
|
||||
scenario: navigationScenarios.CLICKED_FORWARD,
|
||||
destinationFmgPageValue: fmgPageValues.VEHICLE_DAMAGE,
|
||||
},
|
||||
{
|
||||
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_PROVIDE_VIN_DIFFERENT_WAY,
|
||||
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.ANSWERED_QUESTIONS_WITH_SINGLE_PART,
|
||||
destinationFmgPageValue: fmgPageValues.QUOTE,
|
||||
},
|
||||
]
|
||||
},
|
||||
];
|
||||
// Get store from router/index.js instead of importing it here to get updated values
|
||||
const routingTable = function(store) {
|
||||
return [
|
||||
{
|
||||
fmgPageValue: fmgPageValues.VEHICLE_YEAR,
|
||||
maps: [
|
||||
{
|
||||
scenario: navigationScenarios.SELECTED_YEAR,
|
||||
destinationFmgPageValue: fmgPageValues.VEHICLE_MAKE,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
fmgPageValue: fmgPageValues.VEHICLE_MAKE,
|
||||
maps: [
|
||||
{
|
||||
scenario: navigationScenarios.SELECTED_MAKE,
|
||||
destinationFmgPageValue: fmgPageValues.VEHICLE_MODEL,
|
||||
},
|
||||
{
|
||||
scenario: navigationScenarios.CLICKED_BACK,
|
||||
destinationFmgPageValue: fmgPageValues.VEHICLE_YEAR,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
fmgPageValue: fmgPageValues.VEHICLE_MODEL,
|
||||
maps: [
|
||||
{
|
||||
scenario: navigationScenarios.SELECTED_MODEL,
|
||||
destinationFmgPageValue: fmgPageValues.VEHICLE_STYLE,
|
||||
},
|
||||
{
|
||||
scenario: navigationScenarios.CLICKED_BACK,
|
||||
destinationFmgPageValue: fmgPageValues.VEHICLE_MAKE,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
fmgPageValue: fmgPageValues.VEHICLE_STYLE,
|
||||
maps: [
|
||||
{
|
||||
scenario: navigationScenarios.SELECTED_STYLE,
|
||||
destinationFmgPageValue: fmgPageValues.VEHICLE_DAMAGE,
|
||||
},
|
||||
{
|
||||
scenario: navigationScenarios.CLICKED_BACK,
|
||||
destinationFmgPageValue: fmgPageValues.VEHICLE_MODEL,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
fmgPageValue: fmgPageValues.VEHICLE_DAMAGE,
|
||||
maps: [
|
||||
{
|
||||
scenario: navigationScenarios.CLICKED_BACK,
|
||||
destinationFmgPageValue: fmgPageValues.VEHICLE_STYLE,
|
||||
},
|
||||
{
|
||||
scenario: navigationScenarios.CLICKED_FORWARD_WITH_VIN,
|
||||
destinationFmgPageValue: fmgPageValues.VIN_LOOKUP,
|
||||
},
|
||||
{
|
||||
scenario: navigationScenarios.CLICKED_FORWARD_WITHOUT_VIN,
|
||||
destinationFmgPageValue: fmgPageValues.ESTIMATE,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
fmgPageValue: fmgPageValues.VEHICLE_PARTS,
|
||||
maps: [
|
||||
{
|
||||
scenario: navigationScenarios.SELECTED_PARTS,
|
||||
destinationFmgPageValue: fmgPageValues.QUOTE,
|
||||
},
|
||||
{
|
||||
scenario: navigationScenarios.CLICKED_FORWARD,
|
||||
destinationFmgPageValue: fmgPageValues.REVEAL,
|
||||
},
|
||||
{
|
||||
scenario: navigationScenarios.CLICKED_BACK_WITH_PART_QUESTION_ANSWERS,
|
||||
destinationFmgPageValue: fmgPageValues.PART_QUESTIONS,
|
||||
},
|
||||
{
|
||||
scenario: navigationScenarios.CLICKED_BACK_WITHOUT_PART_QUESTION_ANSWERS,
|
||||
destinationFmgPageValue: fmgPageValues.VIN_LOOKUP,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
fmgPageValue: fmgPageValues.REVEAL,
|
||||
maps: [
|
||||
{
|
||||
scenario: navigationScenarios.CLICKED_BACK,
|
||||
destinationFmgPageValue: fmgPageValues.VEHICLE_DAMAGE,
|
||||
},
|
||||
{
|
||||
scenario: navigationScenarios.SELECTED_PARTS,
|
||||
destinationFmgPageValue: fmgPageValues.VIN_LOOKUP,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
fmgPageValue: fmgPageValues.VIN_LOOKUP,
|
||||
maps: [
|
||||
{
|
||||
scenario: navigationScenarios.CLICKED_BACK,
|
||||
destinationFmgPageValue: fmgPageValues.ESTIMATE,
|
||||
},
|
||||
{
|
||||
scenario: navigationScenarios.SELECTED_VIN_HAS_MISMATCHED_GLASS,
|
||||
destinationFmgPageValue: fmgPageValues.VEHICLE_DAMAGE,
|
||||
},
|
||||
{
|
||||
scenario: navigationScenarios.CLICKED_BACK_WITH_VIN,
|
||||
destinationFmgPageValue: fmgPageValues.VEHICLE_DAMAGE,
|
||||
},
|
||||
{
|
||||
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_MOLDING_QUESTIONS,
|
||||
destinationFmgPageValue: fmgPageValues.MOLDING_QUESTIONS
|
||||
},
|
||||
{
|
||||
scenario: navigationScenarios.SELECTED_VIN_WITH_CAPABILITY_QUESTIONS,
|
||||
destinationFmgPageValue: fmgPageValues.CAPABILITY_QUESTIONS
|
||||
}
|
||||
],
|
||||
},
|
||||
{
|
||||
fmgPageValue: fmgPageValues.LICENSE_PLATE_LOOKUP,
|
||||
maps: [
|
||||
{
|
||||
scenario: navigationScenarios.CLICKED_BACK,
|
||||
destinationFmgPageValue: fmgPageValues.ESTIMATE,
|
||||
},
|
||||
{
|
||||
scenario: navigationScenarios.CLICKED_FORWARD,
|
||||
destinationFmgPageValue: fmgPageValues.VEHICLE_DAMAGE,
|
||||
},
|
||||
{
|
||||
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_MOLDING_QUESTIONS,
|
||||
destinationFmgPageValue: fmgPageValues.MOLDING_QUESTIONS
|
||||
},
|
||||
{
|
||||
scenario: navigationScenarios.SELECTED_VIN_WITH_CAPABILITY_QUESTIONS,
|
||||
destinationFmgPageValue: fmgPageValues.CAPABILITY_QUESTIONS
|
||||
}
|
||||
],
|
||||
},
|
||||
{
|
||||
fmgPageValue: fmgPageValues.ADDRESS_LOOKUP,
|
||||
maps: [
|
||||
{
|
||||
scenario: navigationScenarios.CLICKED_BACK,
|
||||
destinationFmgPageValue: fmgPageValues.ESTIMATE,
|
||||
},
|
||||
{
|
||||
scenario: navigationScenarios.CONTINUING_WITH_MULTIPLE_VEHICLES,
|
||||
destinationFmgPageValue: fmgPageValues.ADDRESS_VEHICLES,
|
||||
},
|
||||
{
|
||||
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_MULTIPLE_PARTS,
|
||||
destinationFmgPageValue: fmgPageValues.VEHICLE_PARTS
|
||||
},
|
||||
{
|
||||
scenario: navigationScenarios.SELECTED_VIN_WITH_MOLDING_QUESTIONS,
|
||||
destinationFmgPageValue: fmgPageValues.MOLDING_QUESTIONS
|
||||
},
|
||||
{
|
||||
scenario: navigationScenarios.SELECTED_VIN_WITH_CAPABILITY_QUESTIONS,
|
||||
destinationFmgPageValue: fmgPageValues.CAPABILITY_QUESTIONS
|
||||
}
|
||||
],
|
||||
},
|
||||
{
|
||||
fmgPageValue: fmgPageValues.ADDRESS_VEHICLES,
|
||||
maps: [
|
||||
{
|
||||
scenario: navigationScenarios.CLICKED_BACK,
|
||||
destinationFmgPageValue: fmgPageValues.ADDRESS_LOOKUP,
|
||||
},
|
||||
{
|
||||
scenario: navigationScenarios.CLICKED_FORWARD,
|
||||
destinationFmgPageValue: fmgPageValues.VEHICLE_DAMAGE,
|
||||
},
|
||||
{
|
||||
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_MOLDING_QUESTIONS,
|
||||
destinationFmgPageValue: fmgPageValues.MOLDING_QUESTIONS
|
||||
},
|
||||
{
|
||||
scenario: navigationScenarios.SELECTED_VIN_WITH_CAPABILITY_QUESTIONS,
|
||||
destinationFmgPageValue: fmgPageValues.CAPABILITY_QUESTIONS
|
||||
},
|
||||
{
|
||||
scenario: navigationScenarios.SELECTED_PROVIDE_VIN_DIFFERENT_WAY,
|
||||
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 };
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
otherParts: null
|
||||
glassParts: 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) {
|
||||
state.applicationUser.saveQuoteId = saveQuoteId;
|
||||
updateSavedSessionId(state, savedSessionId) {
|
||||
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)],
|
||||
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,
|
||||
selectedMultiGlass: state.order.damage.glassToReplace.length > 1,
|
||||
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),
|
||||
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)
|
||||
// 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 ?? {})],
|
||||
// hasRecalibrationPart: Object.values(state.order.lineItems.glassParts ?? {}).filter(x => x.requiresRecalibration)?.length > 0,
|
||||
// selectedMultiGlass: state.order.damage.glassToReplace.length > 1,
|
||||
// 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),
|
||||
// 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)
|
||||
}
|
||||
}
|
||||
},
|
||||
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;
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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");
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -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 = {
|
||||
|
|
|
|||
|
|
@ -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 = {
|
||||
|
|
|
|||
|
|
@ -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"],
|
||||
},
|
||||
});
|
||||
|
|
|
|||
|
|
@ -7,11 +7,11 @@
|
|||
isWide ? 'horizontal' : '',
|
||||
(errors.length > 0 || hasError) ? 'has-error' : '',
|
||||
]"
|
||||
@keyup.space="triggerButton()"
|
||||
@keyup.up="handleKeyupArrow()"
|
||||
@keyup.down="handleKeyupArrow()"
|
||||
@keyup.left="handleKeyupArrow()"
|
||||
@keyup.right="handleKeyupArrow()"
|
||||
@keyup.space="triggerButton"
|
||||
@keyup.up="handleKeyupArrow"
|
||||
@keyup.down="handleKeyupArrow"
|
||||
@keyup.left="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() {
|
||||
if (Array.isArray(this.selectedValues)) {
|
||||
this.checkValue = this.isMultiSelect
|
||||
? this.selectedValues.includes(this.value)
|
||||
: this.selectedValues[0];
|
||||
}
|
||||
else if (Array.isArray(this.modelValue)) {
|
||||
this.checkValue = this.isMultiSelect
|
||||
? this.modelValue.includes(this.value)
|
||||
: this.modelValue[0];
|
||||
mounted() {
|
||||
if (Array.isArray(this.validateValue)) {
|
||||
this.checkValue = this.isValueSelectedByArray(this.selectedValues);
|
||||
const isSelectedByValidator = this.isValueSelectedByArray(this.validateValue);
|
||||
|
||||
if (this.checkValue != isSelectedByValidator) {
|
||||
this.handleChange(this.value);
|
||||
}
|
||||
}
|
||||
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) {
|
||||
this.handleCheckChange();
|
||||
}
|
||||
if(!this.selectingInitiatesLoad) {
|
||||
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
|
||||
};
|
||||
},
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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) {
|
||||
|
|
|
|||
Loading…
Reference in a new issue