Integrated CMS, refactor
This commit is contained in:
FrankRua
parent
1d04dc5ac8
commit
265e32f7a7
5 changed files with 120 additions and 111 deletions
|
|
@ -3,7 +3,7 @@
|
|||
// Please use lowercase only so that we don't have to worry about case sensitivity.
|
||||
|
||||
const customMappings = {
|
||||
glassname: [
|
||||
formattedglassname: [
|
||||
{ key: 'Windshield Single', transformedValue: 'windshield' },
|
||||
{ key: 'Windshield Driver', transformedValue: 'driver side split windshield' },
|
||||
{ key: 'Windshield Passenger', transformedValue: 'passenger side split windshield' },
|
||||
|
|
|
|||
|
|
@ -11,6 +11,7 @@ const storeActions = {
|
|||
GET_EVOX_IMAGE: "getEvoxImage",
|
||||
LOOKUP_VEHICLE_BY_YMMS: "lookupVehicleByYmms",
|
||||
LOOKUP_VEHICLE_BY_VIN: "lookupVehicleByVin",
|
||||
GET_PARTS_OR_QUESTIONS: "getPartsOrQuestions",
|
||||
|
||||
// DEPENDENCY MUTATIONS
|
||||
RESET_VEHICLE_AND_DEPS: "resetVehicleAndDependencies",
|
||||
|
|
|
|||
|
|
@ -17,14 +17,13 @@
|
|||
" :buttonLabel="name" altText="" :buttonID="`${glassLocation}-${glassName}-${name}`" :groupName="`${glassLocation}-${glassName}`" @isCheckedChanged="ResetTintAndPartSelections()" />
|
||||
</div>
|
||||
</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">
|
||||
<div class="col">
|
||||
<buttonQuestion v-model="selectedPart[glassLocation]" buttonType="radio" class="radioQuestion" questionText="ok now select your features" :answers="value" textPosition="text-start" :loaderEnabled="false" :isRequired="true" :groupName="`${glassLocation}-${glassName}-${name}`" v-on:update:modelValue="EmitPartSelection($event)" />
|
||||
<buttonQuestion v-model="selectedPart[glassLocation]" buttonType="radio" class="radioQuestion" questionText="ok now select your features" :answers="value" textPosition="text-start" :loaderEnabled="false" :isRequired="true" :groupName="`${glassLocation}-${glassName}-${name}`" />
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
|
|
@ -49,10 +48,8 @@ export default {
|
|||
inheritAttrs: false,
|
||||
data() {
|
||||
return {
|
||||
glassColorQuestion: String,
|
||||
glassFeatureQuestion: String,
|
||||
featureListData: Object,
|
||||
selectedPart: {}, // v-model for the radio button selections
|
||||
glassColorQuestion: '',
|
||||
glassFeatureQuestion: '',
|
||||
selectedTint: {}, // v-model for the list card selections
|
||||
};
|
||||
},
|
||||
|
|
@ -60,6 +57,7 @@ export default {
|
|||
glassName: String,
|
||||
glassLocation: String,
|
||||
colorAnswers: Array,
|
||||
modelValue: Object
|
||||
},
|
||||
components: {
|
||||
listCard,
|
||||
|
|
@ -67,24 +65,21 @@ export default {
|
|||
},
|
||||
computed: {
|
||||
colorQuestionText() {
|
||||
return getCustomTransformValue(
|
||||
"Select your current {custom:glassName} color",
|
||||
`${this.glassLocation} ${this.glassName}`
|
||||
);
|
||||
return getCustomTransformValue(this.glassColorQuestion, `${this.glassLocation} ${this.glassName}`);
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.featureListData = this.createFeatureListMap(this.colorAnswers);
|
||||
},
|
||||
methods: {
|
||||
initializeComponent(cmsContent, initialData) {
|
||||
console.log("Im here");
|
||||
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
|
||||
// format for the button-question component.
|
||||
createFeatureListMap(colorAnswers) {
|
||||
const tintMapByColor = colorAnswers.reduce((arr, item) => {
|
||||
featureListData() {
|
||||
const tintMapByColor = this.colorAnswers.reduce((arr, item) => {
|
||||
// Create the key
|
||||
const itemColor = item.ColorAnswerText;
|
||||
arr[itemColor] = arr[itemColor] || [];
|
||||
|
|
@ -104,6 +99,12 @@ export default {
|
|||
}, {});
|
||||
|
||||
return tintMapByColor;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
initializeComponent(cmsContent, initialData) {
|
||||
this.glassColorQuestion = cmsContent.ColorQuestionWidget.QuestionText;
|
||||
this.glassFeatureQuestion = cmsContent.FeatureQuestionWidget.QuestionText;
|
||||
},
|
||||
|
||||
// Gets tint images based on the glass type, and tint name.
|
||||
|
|
@ -123,12 +124,6 @@ export default {
|
|||
this.selectedTint = {};
|
||||
this.selectedPart = {};
|
||||
},
|
||||
|
||||
// Emits selected part back to the parent vehicle-parts component
|
||||
// so it can have a object that contains all selected parts.
|
||||
EmitPartSelection(event) {
|
||||
this.$emit("update:modelValue", event);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,11 +1,12 @@
|
|||
<template>
|
||||
<div class="container-fluid shadow rounded-3 p-2 position-relative make-tall">
|
||||
<funnelHeader ref="funnelHeader" />
|
||||
<vehicleBanner ref="vehicleBanner" :displayGenericVehicleImage=false />
|
||||
<vehicleBanner ref="vehicleBanner" :displayGenericVehicleImage="false" />
|
||||
<funnelSubHeader ref="funnelSubHeader" />
|
||||
|
||||
<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>
|
||||
|
||||
<funnelFooter ref="funnelFooter" @back-clicked="backButtonAction" />
|
||||
|
|
@ -27,11 +28,6 @@ import {
|
|||
import {
|
||||
settleAllPromises
|
||||
} from "@/helpers/layout-helper";
|
||||
import {
|
||||
storeActions
|
||||
} from "@/constants/store-actions";
|
||||
import store from "@/store";
|
||||
import baseMixin from "@/mixins/base-mixin";
|
||||
|
||||
export default {
|
||||
name: "vehicle-parts",
|
||||
|
|
@ -42,14 +38,13 @@ export default {
|
|||
// Settle promises and get results
|
||||
const promiseResultMap = [{
|
||||
resultKey: "cmsContent",
|
||||
promise: cmsContentPromise,
|
||||
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
|
||||
);
|
||||
|
|
@ -64,98 +59,102 @@ export default {
|
|||
);
|
||||
|
||||
// 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());
|
||||
|
||||
|
||||
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
|
||||
}));
|
||||
});
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
Parts: [{
|
||||
glassLocation: 'Rear',
|
||||
glassName: 'Stationary',
|
||||
colorAnswers: [{
|
||||
ColorAnswerText: 'Green Tint',
|
||||
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'
|
||||
}]
|
||||
},
|
||||
]
|
||||
},
|
||||
],
|
||||
glassParts: {},
|
||||
refPrefix: 'partQuestion'
|
||||
}
|
||||
refPrefix: "partQuestion",
|
||||
};
|
||||
},
|
||||
components: {
|
||||
partQuestion,
|
||||
funnelHeader,
|
||||
vehicleBanner,
|
||||
funnelSubHeader,
|
||||
funnelFooter
|
||||
funnelFooter,
|
||||
},
|
||||
mounted() {
|
||||
console.log("mounted!");
|
||||
computed: {
|
||||
Parts() {
|
||||
return [{
|
||||
glassLocation: "Rear",
|
||||
glassName: "Stationary",
|
||||
colorAnswers: [{
|
||||
ColorAnswerText: "Green Tint",
|
||||
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",
|
||||
}, ],
|
||||
},
|
||||
],
|
||||
},
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
arePagePrerequisitesValid() {
|
||||
return true;
|
||||
},
|
||||
}
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -239,6 +239,20 @@ export const actions = {
|
|||
payload: {},
|
||||
});
|
||||
},
|
||||
|
||||
// Parts API Actions
|
||||
getPartsOrQuestions(context, { carId, glassArray, zipCode, vin = '' }) {
|
||||
return globalMethods.callHttpClient({
|
||||
method: endpoints.GetRouteInfo.method,
|
||||
endpoint: endpoints.GetRouteInfo.url,
|
||||
payload: {
|
||||
carId: carId,
|
||||
glass: glassArray,
|
||||
zip: zipCode,
|
||||
vin: vin
|
||||
},
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
export default createStore({
|
||||
|
|
|
|||
Loading…
Reference in a new issue