jason/DigitalConsumer.FixMyGlass
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge branch 'develop' into feature/animations-adjustments

Browse source
This commit is contained in:
Max 2022-03-04 10:18:28 -05:00
commit 5c54a46964
26 changed files with 483 additions and 245 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/common-components/button-question/button-question.vue
View file

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

18
src/common-components/vin-information/vin-information.spec.js Normal file
View file

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

78
src/common-components/vin-information/vin-information.vue Normal file
View file

@ -0,0 +1,78 @@
<template>
<div class="vin-information">
<div class="vin-toggle d-inline-flex" :class="[isActive ? 'active' : '']" @click="toggleClass()">
<textLink :text="HeadlineText" linkType="text" href="#!" />
</div>
<div class="vin-info">
<div class="mt-3" v-html="BodyText"></div>
<img :src="OptionalImage" alt="" />
</div>
</div>
</template>
<script>
import textLink from "@/ux-components/text-link/text-link";
export default {
name: "vinInformation",
components: {
textLink,
},
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;
}
}
}
</script>
<style lang="scss">
.vin-information {
p,li {
font-size: .875rem;
color: $gray-600;
}
a {
font-size: .875rem;
}
.vin-toggle {
&:after {
content: "";
transition: all .5s ease;
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 8.9' xml:space='preserve'%3e%3cpath d='M8 8.9c-.2 0-.5-.1-.6-.3L.3 1.5C.1 1.4 0 1.1 0 .9 0 .7.1.4.3.3.4.1.7 0 .9 0c.2 0 .5.1.6.3L8 6.7 14.5.2c.1-.1.4-.2.6-.2.2 0 .5.1.6.3s.3.4.3.6c0 .2-.1.5-.3.6L8.6 8.6c-.1.2-.4.3-.6.3z' fill='%231474a2'/%3e%3c/svg%3e");
background-repeat: no-repeat;
background-position: right center;
margin-left: .5rem;
width: 16px;
height: auto;
}
&.active:after {
transform: rotate(180deg);
}
&.active + .vin-info {
max-height: 500px;
transition: all 250ms ease-in;
opacity: 1;
}
}
.vin-info {
max-height: 0;
transition: all 250ms ease-out;
overflow: hidden;
opacity: 0;
img {
width: 117%;
height: auto;
}
}
}
</style>

2
src/constants/dynamictext-mapper.js
View file

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

8
src/constants/store-actions.js
View file

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

12
src/layouts/component-test/component-test.vue
View file

@ -1,5 +1,15 @@
<template>
<div class="container-fluid container-shadow p-2 rounded-3">
<div class="row my-4">
<div class="col">
<h4 class="m-0 p-2 bg-light rounded">VIN Information</h4>
</div>
</div>
<div class="row my-2">
<div class="col">
<vinInformation/>
</div>
</div>
<div class="row my-4">
<div class="col">
<h4 class="m-0 p-2 bg-light rounded">Text Input</h4>
@ -1134,6 +1144,7 @@
import textLink from "@/ux-components/text-link/text-link";
import textboxQuestion from "@/common-components/textbox-question/textbox-question";
import dropdownQuestion from "@/common-components/dropdown-question/dropdown-question";
import vinInformation from "@/common-components/vin-information/vin-information";
export default {
name: "App",
components: {
@ -1148,6 +1159,7 @@
textLink,
textboxQuestion,
dropdownQuestion,
vinInformation,
},
data() {
return {

2
src/layouts/form-test/form-test.vue
View file

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

41
src/layouts/part-questions/part-questions.vue
View file

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

2
src/layouts/vehicle-damage/vehicle-damage.spec.js
View file

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

4
src/layouts/vehicle-damage/vehicle-damage.vue
View file

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

4
src/layouts/vehicle-make/vehicle-make.spec.js
View file

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

4
src/layouts/vehicle-make/vehicle-make.vue
View file

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

4
src/layouts/vehicle-model/vehicle-model.spec.js
View file

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

4
src/layouts/vehicle-model/vehicle-model.vue
View file

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

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

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

69
src/layouts/vehicle-parts/glass-part-question/glass-part-question.vue
View file

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

78
src/layouts/vehicle-parts/vehicle-parts.spec.js
View file

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

346
src/layouts/vehicle-parts/vehicle-parts.vue
View file

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

4
src/layouts/vehicle-style/vehicle-style.vue
View file

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

4
src/layouts/vehicle-year/vehicle-year.spec.js
View file

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

4
src/layouts/vehicle-year/vehicle-year.vue
View file

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

2
src/router/router-constants/routing-table.js
View file

@ -85,7 +85,7 @@ const routingTable = [
},
{
scenario: navigationScenarios.SELECTED_PARTS,
destinationFmgPageValue: fmgPageValues.QUOTE,
destinationFmgPageValue: fmgPageValues.REVEAL,
},
],
},

9
src/store/index.js
View file

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

2
src/ux-components/radio/radio.spec.js
View file

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

2
src/ux-components/radio/radio.vue
View file

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

2
src/ux-components/text-link/text-link.vue
View file

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