Merge branch 'feature/CSR-335' into feature/CSR-297
This commit is contained in:
CarlNation
commit
3db840ac81
43 changed files with 224 additions and 182 deletions
|
Before Width: | Height: | Size: 1 KiB After Width: | Height: | Size: 1 KiB |
|
Before Width: | Height: | Size: 1 KiB After Width: | Height: | Size: 1 KiB |
|
Before Width: | Height: | Size: 1 KiB After Width: | Height: | Size: 1 KiB |
|
Before Width: | Height: | Size: 1 KiB After Width: | Height: | Size: 1 KiB |
|
Before Width: | Height: | Size: 1 KiB After Width: | Height: | Size: 1 KiB |
|
Before Width: | Height: | Size: 1 KiB After Width: | Height: | Size: 1 KiB |
|
Before Width: | Height: | Size: 981 B After Width: | Height: | Size: 981 B |
|
Before Width: | Height: | Size: 981 B After Width: | Height: | Size: 981 B |
|
Before Width: | Height: | Size: 981 B After Width: | Height: | Size: 981 B |
|
Before Width: | Height: | Size: 981 B After Width: | Height: | Size: 981 B |
|
Before Width: | Height: | Size: 1.5 KiB After Width: | Height: | Size: 1.5 KiB |
|
Before Width: | Height: | Size: 1 KiB After Width: | Height: | Size: 1 KiB |
|
Before Width: | Height: | Size: 1 KiB After Width: | Height: | Size: 1 KiB |
|
Before Width: | Height: | Size: 370 B After Width: | Height: | Size: 370 B |
|
Before Width: | Height: | Size: 370 B After Width: | Height: | Size: 370 B |
|
Before Width: | Height: | Size: 370 B After Width: | Height: | Size: 370 B |
|
Before Width: | Height: | Size: 370 B After Width: | Height: | Size: 370 B |
|
Before Width: | Height: | Size: 370 B After Width: | Height: | Size: 370 B |
|
Before Width: | Height: | Size: 370 B After Width: | Height: | Size: 370 B |
|
Before Width: | Height: | Size: 368 B After Width: | Height: | Size: 368 B |
|
Before Width: | Height: | Size: 370 B After Width: | Height: | Size: 370 B |
|
|
@ -14,10 +14,10 @@ const storeActions = {
|
|||
GET_PARTS_OR_QUESTIONS: "getPartsOrQuestions",
|
||||
|
||||
// DEPENDENCY MUTATIONS
|
||||
RESET_VEHICLE_AND_DEPS: "resetVehicleAndDependencies",
|
||||
RESET_DAMAGE_AND_DEPS: "resetDamageAndDependencies",
|
||||
RESET_REGISTRATION_AND_DEPS: "resetRegistrationAndDependencies",
|
||||
RESET_PARTS_AND_DEPS: "resetPartsAndDependencies",
|
||||
RESET_VEHICLE_STATE: "resetVehicleAndDependencies",
|
||||
RESET_DAMAGE_STATE: "resetDamageAndDependencies",
|
||||
RESET_REGISTRATION_STATE: "resetRegistrationAndDependencies",
|
||||
RESET_PARTS_STATE: "resetPartsAndDependencies",
|
||||
};
|
||||
|
||||
export { storeActions };
|
||||
|
|
|
|||
|
|
@ -13,16 +13,20 @@ const storeMutations = {
|
|||
UPDATE_IS_REPAIR: "updateIsRepair",
|
||||
UPDATE_NUMBER_OF_CHIPS: "updateNumberOfChips",
|
||||
UPDATE_GLASS_TO_REPLACE: "updateGlassToReplace",
|
||||
UPDATE_PARTS: "updateParts",
|
||||
|
||||
// EVENT BUS MUTATIONS
|
||||
ADD_EVENT_TO_BUS: "addEventToBus",
|
||||
REMOVE_EVENT_FROM_BUS: "removeEventFromBus",
|
||||
|
||||
// DEPENDENCY MUTATIONS
|
||||
RESET_VEHICLE_AND_DEPS: "resetVehicleAndDependencies",
|
||||
RESET_DAMAGE_AND_DEPS: "resetDamageAndDependencies",
|
||||
RESET_REGISTRATION_AND_DEPS: "resetRegistrationAndDependencies",
|
||||
RESET_PARTS_AND_DEPS: "resetPartsAndDependencies",
|
||||
RESET_VEHICLE_STATE: "resetVehicleState",
|
||||
RESET_DAMAGE_STATE: "resetDamageState",
|
||||
RESET_REGISTRATION_STATE: "resetRegistrationState",
|
||||
RESET_PARTS_STATE: "resetPartsState",
|
||||
|
||||
// OTHER MUTATIONS
|
||||
UPDATE_PAGE_DATA: "updatePageData",
|
||||
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -3,62 +3,62 @@
|
|||
// Src assumes you have a @/assets/img/tints/, making the final value @/assets/img/tints/{Src} in the markup.
|
||||
// See vehicle-parts for implementation example.
|
||||
const tintMap = {
|
||||
rear: [
|
||||
other: [
|
||||
// Blue Shade
|
||||
{ name: "blue shade, blue tint", src: "BackGlass-BlueShade-BlueTint.svg" },
|
||||
{ name: "blue shade, brown tint", src: "BackGlass-BlueShade-BrownTint.svg" },
|
||||
{ name: "blue shade, gray tint", src: "BackGlass-BlueShade-GrayTint.svg" },
|
||||
{ name: "blue shade, green tint", src: "BackGlass-BlueShade-GreenTint.svg" },
|
||||
{ name: "blue shade", src: "BackGlass-BlueShade-NoTint.svg" },
|
||||
{ name: "blue tint, blue shade", src: "Glass-BlueShade-BlueTint.svg" },
|
||||
{ name: "brown tint, blue shade", src: "Glass-BlueShade-BrownTint.svg" },
|
||||
{ name: "gray tint, blue shade", src: "Glass-BlueShade-GrayTint.svg" },
|
||||
{ name: "green tint, blue shade", src: "Glass-BlueShade-GreenTint.svg" },
|
||||
{ name: "blue shade", src: "Glass-BlueShade-NoTint.svg" },
|
||||
|
||||
// Brown Shade
|
||||
{ name: "brown shade, brown tint", src: "BackGlass-BrownShade-BrownTint.svg" },
|
||||
{ name: "brown tint, brown shade", src: "Glass-BrownShade-BrownTint.svg" },
|
||||
|
||||
// Gray Shade
|
||||
{ name: "gray shade, blue tint", src: "BackGlass-GrayShade-BlueTint.svg" },
|
||||
{ name: "gray shade, brown tint", src: "BackGlass-GrayShade-BrownTint.svg" },
|
||||
{ name: "gray shade, gray tint", src: "BackGlass-GrayShade-GrayTint.svg" },
|
||||
{ name: "gray shade, green tint", src: "BackGlass-GrayShade-GreenTint.svg" },
|
||||
{ name: "blue tint, gray shade", src: "Glass-GrayShade-BlueTint.svg" },
|
||||
{ name: "brown tint, gray shade", src: "Glass-GrayShade-BrownTint.svg" },
|
||||
{ name: "gray tint, gray shade", src: "Glass-GrayShade-GrayTint.svg" },
|
||||
{ name: "green tint, gray shade", src: "Glass-GrayShade-GreenTint.svg" },
|
||||
|
||||
// Green Shade
|
||||
{ name: "green shade, blue tint", src: "BackGlass-GreenShade-BlueTint.svg" },
|
||||
{ name: "green shade, brown tint", src: "BackGlass-GreenShade-BrownTint.svg" },
|
||||
{ name: "green shade, green tint", src: "BackGlass-GreenShade-GreenTint.svg" },
|
||||
{ name: "blue tint, green shade", src: "Glass-GreenShade-BlueTint.svg" },
|
||||
{ name: "brown tint, green shade", src: "Glass-GreenShade-BrownTint.svg" },
|
||||
{ name: "green tint, green shade", src: "Glass-GreenShade-GreenTint.svg" },
|
||||
|
||||
// Tints Only
|
||||
{ name: "blue tint", src: "BackGlass-NoShade-BlueTint.svg" },
|
||||
{ name: "brown tint", src: "BackGlass-NoShade-BrownTint.svg" },
|
||||
{ name: "dark brown tint", src: "BackGlass-NoShade-DarkBrownTint.svg" },
|
||||
{ name: "dark gray tint", src: "BackGlass-NoShade-DarkGrayTint.svg" },
|
||||
{ name: "gray tint", src: "BackGlass-NoShade-GrayTint.svg" },
|
||||
{ name: "green tint", src: "BackGlass-NoShade-GreenTint.svg" },
|
||||
{ name: "gray tint privacy", src: "BackGlass-NoShade-Privacy.svg" },
|
||||
{ name: "blue tint", src: "Glass-NoShade-BlueTint.svg" },
|
||||
{ name: "brown tint", src: "Glass-NoShade-BrownTint.svg" },
|
||||
{ name: "dark brown tint", src: "Glass-NoShade-DarkBrownTint.svg" },
|
||||
{ name: "dark gray tint", src: "Glass-NoShade-DarkGrayTint.svg" },
|
||||
{ name: "gray tint", src: "Glass-NoShade-GrayTint.svg" },
|
||||
{ name: "green tint", src: "Glass-NoShade-GreenTint.svg" },
|
||||
{ name: "gray tint privacy", src: "Glass-NoShade-Privacy.svg" },
|
||||
|
||||
// No shade or tint
|
||||
{ name: "no shade, no tint", src: "BackGlass-NoShade-NoTint.svg" }, // ???
|
||||
{ name: "no shade, no tint", src: "Glass-NoShade-NoTint.svg" }, // ???
|
||||
],
|
||||
|
||||
windshield: [
|
||||
// Blue Shade
|
||||
{ name: "blue shade, blue tint", src: "Windshield-BlueShade-BlueTint.svg" },
|
||||
{ name: "blue shade, brown tint", src: "Windshield-BlueShade-BrownTint.svg" },
|
||||
{ name: "blue shade, gray tint", src: "Windshield-BlueShade-GrayTint.svg" },
|
||||
{ name: "blue shade, green tint", src: "Windshield-BlueShade-GreenTint.svg" },
|
||||
{ name: "blue tint, blue shade", src: "Windshield-BlueShade-BlueTint.svg" },
|
||||
{ name: "brown tint, blue shade", src: "Windshield-BlueShade-BrownTint.svg" },
|
||||
{ name: "gray tint, blue shade", src: "Windshield-BlueShade-GrayTint.svg" },
|
||||
{ name: "green tint, blue shade", src: "Windshield-BlueShade-GreenTint.svg" },
|
||||
{ name: "blue shade", src: "Windshield-BlueShade-NoTint.svg" },
|
||||
|
||||
// Brown Shade
|
||||
{ name: "brown shade, brown tint", src: "Windshield-BrownShade-BrownTint.svg" },
|
||||
{ name: "brown tint, brown shade", src: "Windshield-BrownShade-BrownTint.svg" },
|
||||
|
||||
// Gray Shade
|
||||
{ name: "gray shade, blue tint", src: "Windshield-GrayShade-BlueTint.svg" },
|
||||
{ name: "gray shade, brown tint", src: "Windshield-GrayShade-BrownTint.svg" },
|
||||
{ name: "gray shade, gray tint", src: "Windshield-GrayShade-GrayTint.svg" },
|
||||
{ name: "gray shade, green tint", src: "Windshield-GrayShade-GreenTint.svg" },
|
||||
{ name: "blue tint, gray shade", src: "Windshield-GrayShade-BlueTint.svg" },
|
||||
{ name: "brown tint, gray shade", src: "Windshield-GrayShade-BrownTint.svg" },
|
||||
{ name: "gray tint, gray shade", src: "Windshield-GrayShade-GrayTint.svg" },
|
||||
{ name: "green tint, gray shade", src: "Windshield-GrayShade-GreenTint.svg" },
|
||||
|
||||
// Green Shade
|
||||
{ name: "green shade, blue tint", src: "Windshield-GreenShade-BlueTint.svg" },
|
||||
{ name: "green shade, brown tint", src: "Windshield-GreenShade-BrownTint.svg" },
|
||||
{ name: "green shade, green tint", src: "Windshield-GreenShade-GreenTint.svg" },
|
||||
{ name: "blue tint, green shade", src: "Windshield-GreenShade-BlueTint.svg" },
|
||||
{ name: "brown tint, green shade", src: "Windshield-GreenShade-BrownTint.svg" },
|
||||
{ name: "green tint, green shade", src: "Windshield-GreenShade-GreenTint.svg" },
|
||||
|
||||
// Tints Only
|
||||
{ name: "blue tint", src: "Windshield-NoShade-BlueTint.svg" },
|
||||
|
|
@ -80,6 +80,11 @@ const tintMap = {
|
|||
// Returns undefined if no items are found.
|
||||
export function getTintImage(glassLocation, colorString) {
|
||||
|
||||
// Windshield glass has special images, all other glass uses the same though.
|
||||
if(glassLocation.toLowerCase() !== 'windshield'){
|
||||
glassLocation = 'other';
|
||||
}
|
||||
|
||||
if (tintMap[glassLocation.toLowerCase()] === undefined) {
|
||||
return '';
|
||||
}
|
||||
|
|
|
|||
|
|
@ -144,7 +144,7 @@ export default {
|
|||
},
|
||||
resetDependentState() {
|
||||
// Invokes
|
||||
store.dispatch(storeActions.RESET_PARTS_AND_DEPS);
|
||||
store.dispatch(storeActions.RESET_PARTS_STATE);
|
||||
},
|
||||
onSubmit(values) {
|
||||
window.alert('Success! Submitted values: ' + JSON.stringify(values, null ,2))
|
||||
|
|
|
|||
|
|
@ -162,7 +162,7 @@ describe("vehicle-damage.vue", () => {
|
|||
wrapper.vm.resetDependentState();
|
||||
|
||||
//Assert
|
||||
expect(store.dispatch).toBeCalledWith(storeActions.RESET_PARTS_AND_DEPS)
|
||||
expect(store.dispatch).toBeCalledWith(storeActions.RESET_PARTS_STATE)
|
||||
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -121,7 +121,7 @@ export default {
|
|||
},
|
||||
resetDependentState() {
|
||||
// Invokes
|
||||
store.dispatch(storeActions.RESET_PARTS_AND_DEPS);
|
||||
store.dispatch(storeActions.RESET_PARTS_STATE);
|
||||
},
|
||||
backButtonAction() {
|
||||
// route to move backwards
|
||||
|
|
@ -145,7 +145,7 @@ export default {
|
|||
const partsData = await baseMixin.methods.dispatchNonBlockingStoreAction(this.storeActions.GET_PARTS_OR_QUESTIONS,
|
||||
{ carId: this.$store.getters.vehicle.carId, glassArray: this.selectedGlassToReplace()}, false);
|
||||
|
||||
this.$router.navigateAfterSave(this.navigationScenarios.SELECTED_GLASS_MULTIPLE_PARTS, this.$route, { [routerParameterKeys.VEHICLE_PARTS_DATA]: partsData});
|
||||
this.$router.navigateAfterSave(this.navigationScenarios.SELECTED_GLASS_MULTIPLE_PARTS, this.$route, {}, {}, partsData.data);
|
||||
},
|
||||
|
||||
selectedGlassToReplace() {
|
||||
|
|
|
|||
|
|
@ -223,8 +223,8 @@ describe("vehicle-make.vue", () => {
|
|||
expect(store.commit).toBeCalledWith(storeMutations.UPDATE_CAR_ID, null)
|
||||
expect(store.commit).toBeCalledWith(storeMutations.UPDATE_VEHICLE_CATEGORY, null)
|
||||
|
||||
expect(store.dispatch).toBeCalledWith(storeActions.RESET_DAMAGE_AND_DEPS)
|
||||
expect(store.dispatch).toBeCalledWith(storeActions.RESET_REGISTRATION_AND_DEPS)
|
||||
expect(store.dispatch).toBeCalledWith(storeActions.RESET_DAMAGE_STATE)
|
||||
expect(store.dispatch).toBeCalledWith(storeActions.RESET_REGISTRATION_STATE)
|
||||
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -94,8 +94,8 @@ export default {
|
|||
store.commit(storeMutations.UPDATE_VEHICLE_CATEGORY, null);
|
||||
|
||||
// Invokes
|
||||
store.dispatch(storeActions.RESET_DAMAGE_AND_DEPS);
|
||||
store.dispatch(storeActions.RESET_REGISTRATION_AND_DEPS);
|
||||
store.dispatch(storeActions.RESET_DAMAGE_STATE);
|
||||
store.dispatch(storeActions.RESET_REGISTRATION_STATE);
|
||||
},
|
||||
},
|
||||
|
||||
|
|
|
|||
|
|
@ -208,8 +208,8 @@ describe("vehicle-model.vue", () => {
|
|||
expect(store.commit).toBeCalledWith(storeMutations.UPDATE_CAR_ID, null)
|
||||
expect(store.commit).toBeCalledWith(storeMutations.UPDATE_VEHICLE_CATEGORY, null)
|
||||
|
||||
expect(store.dispatch).toBeCalledWith(storeActions.RESET_DAMAGE_AND_DEPS)
|
||||
expect(store.dispatch).toBeCalledWith(storeActions.RESET_REGISTRATION_AND_DEPS)
|
||||
expect(store.dispatch).toBeCalledWith(storeActions.RESET_DAMAGE_STATE)
|
||||
expect(store.dispatch).toBeCalledWith(storeActions.RESET_REGISTRATION_STATE)
|
||||
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -94,8 +94,8 @@ export default {
|
|||
store.commit(storeMutations.UPDATE_VEHICLE_CATEGORY, null);
|
||||
|
||||
// Invokes
|
||||
store.dispatch(storeActions.RESET_DAMAGE_AND_DEPS);
|
||||
store.dispatch(storeActions.RESET_REGISTRATION_AND_DEPS);
|
||||
store.dispatch(storeActions.RESET_DAMAGE_STATE);
|
||||
store.dispatch(storeActions.RESET_REGISTRATION_STATE);
|
||||
},
|
||||
},
|
||||
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<p>{{ colorQuestionText }}</p>
|
||||
<p class="mb-0">{{ colorQuestionText }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -27,6 +27,7 @@
|
|||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
@ -43,7 +44,7 @@ import {
|
|||
} from "@/constants/dynamictext-mapper";
|
||||
|
||||
export default {
|
||||
name: "part-question",
|
||||
name: "glass-part-question",
|
||||
inheritAttrs: false,
|
||||
data() {
|
||||
return {
|
||||
|
|
@ -11,17 +11,21 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div v-for="(item, i) in Parts" :key="i">
|
||||
<partQuestion :ref="`${refPrefix}-${item.glassLocation}`" v-model="glassParts[item.glassLocation + '-' + item.glassName]" :glassLocation="item.glassLocation" :glassName="item.glassName" :colorAnswers="item.colorAnswers" />
|
||||
<br />
|
||||
<div v-for="(item, i) in PartsForQuestions" :key="i">
|
||||
<!-- Render horizontal lines if there is multi-glass (aka if i > 0) -->
|
||||
<div class="container-fluid">
|
||||
<hr v-if="i > 0" />
|
||||
</div>
|
||||
|
||||
<glassPartQuestion :ref="`${refPrefix}-${item.glassLocation}`" v-model="glassParts[item.glassLocation + '-' + item.glassName]" :glassLocation="item.glassLocation" :glassName="item.glassName" :colorAnswers="item.colorAnswers" />
|
||||
</div>
|
||||
<funnelFooter ref="funnelFooter" @back-clicked="backButtonAction" />
|
||||
<funnelFooter ref="funnelFooter" @back-clicked="backButtonAction" @ForwardClicked="forwardButtonAction" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// Components
|
||||
import partQuestion from "@/layouts/vehicle-parts/part-question/part-question";
|
||||
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";
|
||||
|
|
@ -29,12 +33,11 @@ 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 {fetchCmsContentForPage} from "@/helpers/cms-content-helper";
|
||||
import {settleAllPromises} from "@/helpers/layout-helper";
|
||||
import {fmgPageValues} from "@/router/router-constants/fmgPage-values";
|
||||
import {storeMutations} from "@/constants/store-mutations";
|
||||
import store from "@/store";
|
||||
|
||||
|
||||
export default {
|
||||
|
|
@ -66,7 +69,7 @@ export default {
|
|||
resultMap.cmsContent.FunnelFooterWidget
|
||||
);
|
||||
|
||||
// Part Question dynamic component
|
||||
// Glass Part Question dynamic component
|
||||
Object.keys(vm.$refs)
|
||||
.filter((r) => r.includes(vm.refPrefix) && vm.$refs[r][0] !== undefined)
|
||||
.forEach((c) =>
|
||||
|
|
@ -93,7 +96,7 @@ export default {
|
|||
};
|
||||
},
|
||||
components: {
|
||||
partQuestion,
|
||||
glassPartQuestion,
|
||||
funnelHeader,
|
||||
vehicleBanner,
|
||||
funnelSubHeader,
|
||||
|
|
@ -101,83 +104,86 @@ export default {
|
|||
alert,
|
||||
},
|
||||
computed: {
|
||||
Parts() {
|
||||
return [{
|
||||
glassLocation: "Rear",
|
||||
glassName: "Stationary",
|
||||
colorAnswers: [{
|
||||
ColorAnswerText: "Green Tint",
|
||||
PartsForQuestions() {
|
||||
const partsData = store.getters.pageData(this.$route.query.fmgPage);
|
||||
|
||||
// Map API result data, to vehicle-parts data structure
|
||||
const mappedData = partsData.partsOrQuestions.map(g => {
|
||||
return {
|
||||
glassName: g.glassName,
|
||||
glassLocation: g.glassLocation,
|
||||
colorAnswers: g.parts.reduce((arr, p) => {
|
||||
arr.push({
|
||||
ColorAnswerText: p.color,
|
||||
FeatureAnswers: [{
|
||||
FeatureAnswerText: "Backglass - heated glass, solar, 1 hole",
|
||||
PartNumber: "test-backglass-green-tint-1-hole",
|
||||
}, ],
|
||||
},
|
||||
{
|
||||
ColorAnswerText: "Green Tint",
|
||||
FeatureAnswers: [{
|
||||
FeatureAnswerText: "Backglass - heated glass, solar, 2 hole",
|
||||
PartNumber: "test-backglass-green-tint-2-hole",
|
||||
}, ],
|
||||
},
|
||||
{
|
||||
ColorAnswerText: "Gray Tint Privacy",
|
||||
FeatureAnswers: [{
|
||||
FeatureAnswerText: "Backglass - heated glass, solar, 3 hole",
|
||||
PartNumber: "test-backglass-gray-tint-privacy-3-hole",
|
||||
}, ],
|
||||
},
|
||||
{
|
||||
ColorAnswerText: "Gray Tint Privacy",
|
||||
FeatureAnswers: [{
|
||||
FeatureAnswerText: "Backglass - heated glass, solar, 4 hole",
|
||||
PartNumber: "test-backglass-blue-tint-4-hole",
|
||||
}, ],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
glassLocation: "Windshield",
|
||||
glassName: "Single",
|
||||
colorAnswers: [{
|
||||
ColorAnswerText: "Blue Tint",
|
||||
FeatureAnswers: [{
|
||||
FeatureAnswerText: "Windshield - heated glass, solar, 1 hole",
|
||||
PartNumber: "test-windshield-blue-tint-1-hole",
|
||||
}, ],
|
||||
},
|
||||
{
|
||||
ColorAnswerText: "Blue Tint",
|
||||
FeatureAnswers: [{
|
||||
FeatureAnswerText: "Windshield -heated glass, solar, 2 hole",
|
||||
PartNumber: "test-blue-tint-windshield-2-hole",
|
||||
}, ],
|
||||
},
|
||||
{
|
||||
ColorAnswerText: "Gray Tint Privacy",
|
||||
FeatureAnswers: [{
|
||||
FeatureAnswerText: "Windshield -heated glass, solar, 3 hole",
|
||||
PartNumber: "test-gray-tint-privacy-windshield-3-hole",
|
||||
}, ],
|
||||
},
|
||||
{
|
||||
ColorAnswerText: "Gray Tint Privacy",
|
||||
FeatureAnswers: [{
|
||||
FeatureAnswerText: "Windshield -heated glass, solar, 4 hole",
|
||||
PartNumber: "test-brown-tint-windshield-4-hole",
|
||||
}, ],
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
FeatureAnswerText: p.description === '' ? p.color : p.description,
|
||||
PartNumber: p.partNumber
|
||||
}]
|
||||
});
|
||||
return arr;
|
||||
}, [])
|
||||
}
|
||||
});
|
||||
|
||||
return mappedData;
|
||||
},
|
||||
|
||||
PartsFromApi() {
|
||||
return store.getters.pageData(fmgPageValues.VEHICLE_PARTS);
|
||||
}
|
||||
|
||||
},
|
||||
methods: {
|
||||
arePagePrerequisitesValid(parameters) {
|
||||
// store.getters.damage.isRepair !== null;
|
||||
// parameters.PartsByGlassName.length > 0;
|
||||
arePagePrerequisitesValid() {
|
||||
// Check if isRepair is populated and if the pageData we need is here (Parts data)
|
||||
if (store.getters.damage.isRepair !== null && Object.keys(store.getters.pageData(fmgPageValues.VEHICLE_PARTS)).length !== 0) {
|
||||
return true;
|
||||
}
|
||||
|
||||
return false
|
||||
},
|
||||
backButtonAction() {
|
||||
this.$router.navigate(
|
||||
this.navigationScenarios.CLICKED_BACK,
|
||||
this.$route
|
||||
);
|
||||
},
|
||||
|
||||
forwardButtonAction() {
|
||||
const selectedGlassPartNumbers = [];
|
||||
const matchedParts = [];
|
||||
|
||||
// Compile all selected parts from the page.
|
||||
for (let [key, value] of Object.entries(this.glassParts)) {
|
||||
for (let [glassKey, glassValue] of Object.entries(value)) {
|
||||
selectedGlassPartNumbers.push(glassValue[0]);
|
||||
}
|
||||
}
|
||||
|
||||
// Match them to the parts from the API.
|
||||
for (let [key, value] of Object.entries(this.PartsFromApi.partsOrQuestions)) {
|
||||
for (let [partKey, partValue] of Object.entries(value.parts)) {
|
||||
const currentPart = this.PartsFromApi.partsOrQuestions[key].parts[partKey];
|
||||
const isMatched = selectedGlassPartNumbers.some(p => p === currentPart.partNumber);
|
||||
|
||||
if (isMatched) {
|
||||
matchedParts.push(currentPart);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// If no parts could be matched, throw an error.
|
||||
if(matchedParts.length === 0) {
|
||||
throw new Error("Could not match any parts to the selected parts");
|
||||
}
|
||||
|
||||
// Save parts to the store.
|
||||
store.commit(storeMutations.UPDATE_PARTS, matchedParts);
|
||||
|
||||
// Navigate to the next page.
|
||||
|
||||
return true;
|
||||
}
|
||||
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -99,8 +99,8 @@ export default {
|
|||
},
|
||||
resetDependentState() {
|
||||
// Invokes
|
||||
store.dispatch(storeActions.RESET_DAMAGE_AND_DEPS);
|
||||
store.dispatch(storeActions.RESET_REGISTRATION_AND_DEPS);
|
||||
store.dispatch(storeActions.RESET_DAMAGE_STATE);
|
||||
store.dispatch(storeActions.RESET_REGISTRATION_STATE);
|
||||
},
|
||||
},
|
||||
|
||||
|
|
|
|||
|
|
@ -163,8 +163,8 @@ describe("vehicle-year.vue", () => {
|
|||
expect(store.commit).toBeCalledWith(storeMutations.UPDATE_CAR_ID, null)
|
||||
expect(store.commit).toBeCalledWith(storeMutations.UPDATE_VEHICLE_CATEGORY, null)
|
||||
|
||||
expect(store.dispatch).toBeCalledWith(storeActions.RESET_DAMAGE_AND_DEPS)
|
||||
expect(store.dispatch).toBeCalledWith(storeActions.RESET_REGISTRATION_AND_DEPS)
|
||||
expect(store.dispatch).toBeCalledWith(storeActions.RESET_DAMAGE_STATE)
|
||||
expect(store.dispatch).toBeCalledWith(storeActions.RESET_REGISTRATION_STATE)
|
||||
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -95,8 +95,8 @@ export default {
|
|||
store.commit(storeMutations.UPDATE_VEHICLE_CATEGORY, null);
|
||||
|
||||
// Invokes
|
||||
store.dispatch(storeActions.RESET_DAMAGE_AND_DEPS);
|
||||
store.dispatch(storeActions.RESET_REGISTRATION_AND_DEPS);
|
||||
store.dispatch(storeActions.RESET_DAMAGE_STATE);
|
||||
store.dispatch(storeActions.RESET_REGISTRATION_STATE);
|
||||
}
|
||||
},
|
||||
components: {
|
||||
|
|
|
|||
|
|
@ -18,6 +18,9 @@ export default {
|
|||
|
||||
return store.dispatch(type, payload);
|
||||
},
|
||||
savePageDataToStore(page, data){
|
||||
store.commit(storeMutations.UPDATE_PAGE_DATA, { page: page, data: data });
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
storeActions() {
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
// Supporting files
|
||||
import { createWebHistory, createRouter } from "vue-router";
|
||||
import { storeActions } from "@/constants/store-actions";
|
||||
import baseMixin from "@/mixins/base-mixin";
|
||||
import { lazyLoadComponent } from "@/router/dynamic-routing/component-loader.js";
|
||||
import { routingTable } from "@/router/router-constants/routing-table.js";
|
||||
import { globalEvents, globalEventTypes } from "@/constants/events";
|
||||
|
|
@ -55,7 +56,7 @@ const routes = [
|
|||
.getRoutes()
|
||||
.filter((x) => x.name === to.query.fmgPage)[0].components;
|
||||
|
||||
if (!arePagePrerequisitesValid(component, to.params)) {
|
||||
if (!arePagePrerequisitesValid(component)) {
|
||||
await GoToFunnelStartOn404(next);
|
||||
}
|
||||
|
||||
|
|
@ -80,7 +81,7 @@ const routes = [
|
|||
.filter((x) => x.name === routeData[0].name)[0]
|
||||
.components.default();
|
||||
|
||||
if (!arePagePrerequisitesValid(nextComponent, to.params)) {
|
||||
if (!arePagePrerequisitesValid(nextComponent)) {
|
||||
await GoToFunnelStartOn404(next);
|
||||
}
|
||||
|
||||
|
|
@ -108,18 +109,18 @@ const router = createRouter({
|
|||
|
||||
//---------------------------------------------------------- Router Functions ----------------------------------------------------------
|
||||
|
||||
router.navigate = (scenario, currentRoute, optionalQuery = {}, optionalParams = {}) => {
|
||||
navigate(scenario, currentRoute, false, optionalQuery, optionalParams);
|
||||
router.navigate = (scenario, currentRoute, optionalQuery = {}, optionalParams = {}, optionalPageData = {}) => {
|
||||
navigate(scenario, currentRoute, false, optionalQuery, optionalParams, optionalPageData);
|
||||
}
|
||||
|
||||
router.navigateAfterSave = (scenario, currentRoute, optionalQuery = {}, optionalParams = {}) => {
|
||||
navigate(scenario, currentRoute, true, optionalQuery, optionalParams);
|
||||
router.navigateAfterSave = (scenario, currentRoute, optionalQuery = {}, optionalParams = {}, optionalPageData = {}) => {
|
||||
navigate(scenario, currentRoute, true, optionalQuery, optionalParams, optionalPageData);
|
||||
}
|
||||
|
||||
// PRIVATE FUNCTIONS
|
||||
|
||||
// Navigate to the next route, depending on the scenario.
|
||||
function navigate(scenario, currentRoute, invalidateOnSave, optionalQuery = {}, optionalParams = {}) {
|
||||
function navigate(scenario, currentRoute, invalidateOnSave, optionalQuery = {}, optionalParams = {}, optionalPageData = {}) {
|
||||
if (!scenario) {
|
||||
console.error("No scenario provided. Please review the routing table.");
|
||||
return;
|
||||
|
|
@ -138,6 +139,9 @@ function navigate(scenario, currentRoute, invalidateOnSave, optionalQuery = {},
|
|||
resetDependentState(currentComponent);
|
||||
}
|
||||
|
||||
// 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(matchingScenarioMap.destinationFmgPageValue, optionalPageData);
|
||||
|
||||
router.push({
|
||||
name: "root",
|
||||
query: Object.assign(optionalQuery, {
|
||||
|
|
@ -217,8 +221,8 @@ async function GoToFunnelStartOn404(next) {
|
|||
}
|
||||
|
||||
// Checks arePagePrerequisitesValid on the component passed in.
|
||||
function arePagePrerequisitesValid(component, parameters = {}) {
|
||||
return component.default.methods.arePagePrerequisitesValid(parameters);
|
||||
function arePagePrerequisitesValid(component) {
|
||||
return component.default.methods.arePagePrerequisitesValid();
|
||||
}
|
||||
|
||||
// Reset dependant state on route change.
|
||||
|
|
|
|||
|
|
@ -1,5 +1,3 @@
|
|||
const routerParameterKeys = {
|
||||
VEHICLE_PARTS_DATA: "vehiclePartsData",
|
||||
};
|
||||
const routerParameterKeys = { };
|
||||
|
||||
export { routerParameterKeys };
|
||||
|
|
@ -76,6 +76,19 @@ const routingTable = [
|
|||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
fmgPageValue: fmgPageValues.VEHICLE_PARTS,
|
||||
maps: [
|
||||
{
|
||||
scenario: navigationScenarios.CLICKED_BACK,
|
||||
destinationFmgPageValue: fmgPageValues.VEHICLE_DAMAGE,
|
||||
},
|
||||
{
|
||||
scenario: navigationScenarios.SELECTED_PARTS,
|
||||
destinationFmgPageValue: fmgPageValues.QUOTE,
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
export { routingTable };
|
||||
|
|
|
|||
|
|
@ -27,12 +27,12 @@ export const state = {
|
|||
},
|
||||
lineItems:{
|
||||
glassParts: null,
|
||||
childParts: null,
|
||||
otherParts: null
|
||||
}
|
||||
},
|
||||
applicationUser: {
|
||||
eventBus: [],
|
||||
pageData: {}
|
||||
},
|
||||
}
|
||||
|
||||
|
|
@ -75,7 +75,12 @@ export const mutations = {
|
|||
updateGlassToReplace(state, glassToReplace){
|
||||
state.order.damage.glassToReplace = glassToReplace;
|
||||
},
|
||||
|
||||
updateParts(state, partsData){
|
||||
state.order.lineItems.glassParts = partsData;
|
||||
},
|
||||
updatePageData(state, pageData){
|
||||
state.applicationUser.pageData[pageData.page] = pageData.data;
|
||||
},
|
||||
|
||||
// EVENT BUS MUTATIONS
|
||||
addEventToBus(state, event) {
|
||||
|
|
@ -96,7 +101,7 @@ export const mutations = {
|
|||
},
|
||||
|
||||
// DEPENDENCY MUTATIONS
|
||||
resetVehicleAndDependencies(state) {
|
||||
resetVehicleState(state) {
|
||||
state.order.vehicle.year = null;
|
||||
state.order.vehicle.make = null;
|
||||
state.order.vehicle.model = null;
|
||||
|
|
@ -104,7 +109,7 @@ export const mutations = {
|
|||
state.order.vehicle.carId = null;
|
||||
state.order.vehicle.category = null;
|
||||
},
|
||||
resetDamageAndDependencies(state) {
|
||||
resetDamageState(state) {
|
||||
state.order.damage.isRepair = null;
|
||||
state.order.damage.numberOfChips = null;
|
||||
state.order.damage.windshieldGlassToReplace = null;
|
||||
|
|
@ -113,10 +118,10 @@ export const mutations = {
|
|||
state.order.damage.rearGlassToReplace = null;
|
||||
|
||||
},
|
||||
resetRegistrationAndDependencies(state) {
|
||||
resetRegistrationState(state) {
|
||||
|
||||
},
|
||||
resetPartsAndDependencies(state) {
|
||||
resetPartsState(state) {
|
||||
state.glassParts = null;
|
||||
state.childParts = null;
|
||||
state.otherParts = null;
|
||||
|
|
@ -136,7 +141,10 @@ export const getters = {
|
|||
},
|
||||
eventBus: (state) => state.applicationUser.eventBus,
|
||||
damage: (state) => state.order.damage,
|
||||
lineItems: (state) => state.order.lineItems
|
||||
lineItems: (state) => state.order.lineItems,
|
||||
pageData: (state) => (page) => {
|
||||
return state.applicationUser.pageData[page];
|
||||
}
|
||||
}
|
||||
|
||||
// Export Actions
|
||||
|
|
@ -212,20 +220,20 @@ export const actions = {
|
|||
|
||||
// DEPENDENCY ACTIONS
|
||||
resetVehicleAndDependencies(context) {
|
||||
context.commit(storeMutations.RESET_VEHICLE_AND_DEPS);
|
||||
context.commit(storeMutations.RESET_DAMAGE_AND_DEPS);
|
||||
context.commit(storeMutations.RESET_REGISTRATION_AND_DEPS);
|
||||
context.commit(storeMutations.RESET_VEHICLE_STATE);
|
||||
context.commit(storeMutations.RESET_DAMAGE_STATE);
|
||||
context.commit(storeMutations.RESET_REGISTRATION_STATE);
|
||||
},
|
||||
resetDamageAndDependencies(context) {
|
||||
context.commit(storeMutations.RESET_DAMAGE_AND_DEPS);
|
||||
context.commit(storeMutations.RESET_PARTS_AND_DEPS);
|
||||
context.commit(storeMutations.RESET_DAMAGE_STATE);
|
||||
context.commit(storeMutations.RESET_PARTS_STATE);
|
||||
},
|
||||
resetRegistrationAndDependencies(context) {
|
||||
context.commit(storeMutations.RESET_REGISTRATION_AND_DEPS);
|
||||
context.commit(storeMutations.RESET_PARTS_AND_DEPS)
|
||||
context.commit(storeMutations.RESET_REGISTRATION_STATE);
|
||||
context.commit(storeMutations.RESET_PARTS_STATE)
|
||||
},
|
||||
resetPartsAndDependencies(context) {
|
||||
context.commit(storeMutations.RESET_PARTS_AND_DEPS);
|
||||
context.commit(storeMutations.RESET_PARTS_STATE);
|
||||
},
|
||||
|
||||
// Content API Actions
|
||||
|
|
|
|||
|
|
@ -313,9 +313,9 @@ describe("Actions", () => {
|
|||
// Act
|
||||
await actions.resetVehicleAndDependencies(context)
|
||||
|
||||
expect(commit).toBeCalledWith(storeMutations.RESET_VEHICLE_AND_DEPS);
|
||||
expect(commit).toBeCalledWith(storeMutations.RESET_DAMAGE_AND_DEPS);
|
||||
expect(commit).toBeCalledWith(storeMutations.RESET_REGISTRATION_AND_DEPS);
|
||||
expect(commit).toBeCalledWith(storeMutations.RESET_VEHICLE_STATE);
|
||||
expect(commit).toBeCalledWith(storeMutations.RESET_DAMAGE_STATE);
|
||||
expect(commit).toBeCalledWith(storeMutations.RESET_REGISTRATION_STATE);
|
||||
|
||||
});
|
||||
|
||||
|
|
@ -330,8 +330,8 @@ describe("Actions", () => {
|
|||
// Act
|
||||
await actions.resetDamageAndDependencies(context)
|
||||
|
||||
expect(commit).toBeCalledWith(storeMutations.RESET_DAMAGE_AND_DEPS);
|
||||
expect(commit).toBeCalledWith(storeMutations.RESET_PARTS_AND_DEPS);
|
||||
expect(commit).toBeCalledWith(storeMutations.RESET_DAMAGE_STATE);
|
||||
expect(commit).toBeCalledWith(storeMutations.RESET_PARTS_STATE);
|
||||
|
||||
});
|
||||
|
||||
|
|
@ -346,8 +346,8 @@ describe("Actions", () => {
|
|||
// Act
|
||||
await actions.resetRegistrationAndDependencies(context)
|
||||
|
||||
expect(commit).toBeCalledWith(storeMutations.RESET_REGISTRATION_AND_DEPS);
|
||||
expect(commit).toBeCalledWith(storeMutations.RESET_PARTS_AND_DEPS);
|
||||
expect(commit).toBeCalledWith(storeMutations.RESET_REGISTRATION_STATE);
|
||||
expect(commit).toBeCalledWith(storeMutations.RESET_PARTS_STATE);
|
||||
|
||||
});
|
||||
|
||||
|
|
@ -362,7 +362,7 @@ describe("Actions", () => {
|
|||
// Act
|
||||
await actions.resetPartsAndDependencies(context)
|
||||
|
||||
expect(commit).toBeCalledWith(storeMutations.RESET_PARTS_AND_DEPS);
|
||||
expect(commit).toBeCalledWith(storeMutations.RESET_PARTS_STATE);
|
||||
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@
|
|||
:aria-required="isRequired"
|
||||
:value="value"
|
||||
:v-model="checkValue"
|
||||
@change="handleCheckChange()"
|
||||
@change="handleCheckChanged()"
|
||||
/>
|
||||
<label class="d-flex align-items-start form-check-label" :for="buttonID">
|
||||
<p v-if="buttonLabel" class="m-0">{{ buttonLabel }}</p>
|
||||
|
|
|
|||
Loading…
Reference in a new issue