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

Changing initialize component to getcmscontent for retrieval of all cms content

Browse source
This commit is contained in:
Max 2022-03-29 09:08:38 -04:00
parent a2008021c7
commit ab93eb4d2d
24 changed files with 169 additions and 258 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
src/common-components/funnel-footer/funnel-footer.vue
View file

@ -49,6 +49,7 @@ export default {
name: "funnelFooter", name: "funnelFooter",
props: { props: {
isDisabled: Boolean, isDisabled: Boolean,
cmsWidgetName: String,
}, },
components: { components: {
textLink, textLink,
@ -57,8 +58,6 @@ export default {
data() { data() {
return { return {
paddingHeight: 0, paddingHeight: 0,
backLink: "",
buttonText: "",
} }
}, },
mounted() { mounted() {
@ -70,14 +69,18 @@ export default {
beforeUnmount() { beforeUnmount() {
window.removeEventListener('resize', this.onResize); window.removeEventListener('resize', this.onResize);
}, },
computed: {
backLink(){
return this.getCmsContent(this.cmsWidgetName, 'BackButtonText');
},
buttonText(){
return this.getCmsContent(this.cmsWidgetName, 'ForwardButtonText');
}
},
methods: { methods: {
onResize() { onResize() {
this.paddingHeight = document.querySelector(".footer #infoBox").offsetHeight; this.paddingHeight = document.querySelector(".footer #infoBox").offsetHeight;
}, },
initializeComponent(cmsContent) {
this.backLink = cmsContent.BackButtonText;
this.buttonText = cmsContent.ForwardButtonText;
},
updateButtonText(newText) { updateButtonText(newText) {
this.buttonText = newText; this.buttonText = newText;
}, },

12
src/common-components/funnel-header/funnel-header.vue
View file

@ -24,7 +24,6 @@ export default {
name: "funnel-header", name: "funnel-header",
data() { data() {
return { return {
imageSrc: "",
displayGlobalAlert: false, displayGlobalAlert: false,
globalAlertMessage: { globalAlertMessage: {
isDismissible: false, isDismissible: false,
@ -34,10 +33,13 @@ export default {
}, },
}; };
}, },
methods: { props: {
initializeComponent(cmsContent) { cmsWidgetName: String,
this.imageSrc = cmsContent.LogoImage; },
}, computed: {
imageSrc(){
return this.getCmsContent(this.cmsWidgetName, 'LogoImage');
}
}, },
components: { components: {
alert, alert,

19
src/common-components/funnel-sub-header/funnel-sub-header.vue
View file

@ -27,15 +27,10 @@ import buttonBack from "@/common-components/button-back/button-back";
export default { export default {
name: "FunnelSubHeader", name: "FunnelSubHeader",
data() {
return {
text: "",
subText: "",
};
},
props: { props: {
hasBackButton: Boolean, hasBackButton: Boolean,
backButtonAccessibleText: String backButtonAccessibleText: String,
cmsWidgetName: String,
}, },
components: { components: {
buttonBack, buttonBack,
@ -43,16 +38,18 @@ export default {
computed: { computed: {
hasSubText(){ hasSubText(){
return this.subText.length > 0; return this.subText.length > 0;
},
text(){
return this.getCmsContent(this.cmsWidgetName, 'HeaderText');
},
subText(){
return this.getCmsContent(this.cmsWidgetName, 'HeaderSubText');
} }
}, },
methods: { methods: {
clickEvent() { clickEvent() {
this.$emit("click-event"); this.$emit("click-event");
}, },
initializeComponent(cmsContent) {
this.text = cmsContent.HeaderText;
this.subText = cmsContent.HeaderSubText;
},
}, },
}; };
</script> </script>

16
src/common-components/textbox-question/textbox-question.vue
View file

@ -75,19 +75,9 @@ export default {
meta, meta,
}; };
}, },
data() {
return {
questionText: "",
}
},
methods: {
initializeComponent(cmsContent){
this.questionText = cmsContent;
},
},
computed: { computed: {
questionTextNew(){ questionText(){
return this.getCmsContent(this.cmsWidgetName).QuestionText ? this.getCmsContent(this.cmsWidgetName).QuestionText : ''; return this.getCmsContent(this.cmsWidgetName, 'QuestionText');
}, },
value: { value: {
get: function() { get: function() {
@ -99,7 +89,7 @@ export default {
}, },
labelText: { labelText: {
get: function () { get: function () {
let labelText = this.questionTextNew; let labelText = this.questionText;
if (this.disableAutoFill) { if (this.disableAutoFill) {
var noBreakChar = "&NoBreak;"; var noBreakChar = "&NoBreak;";
var position = 1; var position = 1;

43
src/common-components/vehicle-banner/vehicle-banner.vue
View file

@ -14,18 +14,9 @@ export default {
props: { props: {
displayGenericVehicleImage: { displayGenericVehicleImage: {
type: Boolean, type: Boolean,
required: true required: true,
} },
}, cmsWidgetName: String,
data() {
return {
genericVehicleImage: '',
carUnmatchedVehicleIcon: '',
truckUnmatchedVehicleIcon: '',
vanUnmatchedVehicleIcon: '',
commercialUnmatchedVehicleIcon: '',
suvUnmatchedVehicleIcon: ''
}
}, },
computed: { computed: {
vehicleImageToDisplay(){ vehicleImageToDisplay(){
@ -38,17 +29,27 @@ export default {
} }
return this.$store.getters.vehicle.imageUrl; return this.$store.getters.vehicle.imageUrl;
},
genericVehicleImage(){
return this.getCmsContent(this.cmsWidgetName, 'GenericVehicleImage');
},
carUnmatchedVehicleIcon(){
return this.getCmsContent(this.cmsWidgetName, 'CarUnmatchedVehicleIcon');
},
truckUnmatchedVehicleIcon(){
return this.getCmsContent(this.cmsWidgetName, 'TruckUnmatchedVehicleIcon');
},
vanUnmatchedVehicleIcon(){
return this.getCmsContent(this.cmsWidgetName, 'VanUnmatchedVehicleIcon');
},
commercialUnmatchedVehicleIcon(){
return this.getCmsContent(this.cmsWidgetName, 'CommercialVanUnmatchedVehicleIcon');
},
suvUnmatchedVehicleIcon(){
return this.getCmsContent(this.cmsWidgetName, 'SuvUnmatchedVehicleIcon');
} }
}, },
methods: { methods: {
initializeComponent(cmsContent) {
this.genericVehicleImage = cmsContent.GenericVehicleImage;
this.carUnmatchedVehicleIcon = cmsContent.CarUnmatchedVehicleIcon;
this.truckUnmatchedVehicleIcon = cmsContent.TruckUnmatchedVehicleIcon;
this.vanUnmatchedVehicleIcon = cmsContent.VanUnmatchedVehicleIcon;
this.commercialUnmatchedVehicleIcon = cmsContent.CommercialVanUnmatchedVehicleIcon;
this.suvUnmatchedVehicleIcon = cmsContent.SuvUnmatchedVehicleIcon;
},
getUnmatchedVehicleIcon(){ getUnmatchedVehicleIcon(){
switch(this.$store.getters.vehicle.category){ switch(this.$store.getters.vehicle.category){
case this.vehicleCategories.CAR: case this.vehicleCategories.CAR:

38
src/layouts/license-plate-lookup/license-plate-lookup.vue
View file

@ -6,22 +6,22 @@
v-slot="{ meta }" v-slot="{ meta }"
> >
<div class="container-fluid shadow rounded-3 p-2 position-relative make-tall px-5"> <div class="container-fluid shadow rounded-3 p-2 position-relative make-tall px-5">
<funnelHeader ref="funnelHeader" /> <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
<vehicleBanner ref="vehicleBanner" :displayGenericVehicleImage="false" /> <vehicleBanner cmsWidgetName="VehicleBannerWidget" :displayGenericVehicleImage="false" />
<funnelSubHeader ref="funnelSubHeader" /> <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" />
<div class="row my-2"> <div class="row my-2">
<div class="col"> <div class="col">
<textboxQuestion ref="LicensePlateNumber" cmsWidgetName="LicensePlateNumber" v-model="licensePlate" inputId="license_plate" disableAutoFill validationRules="license-plate-required" /> <textboxQuestion cmsWidgetName="LicensePlateNumber" v-model="licensePlate" inputId="license_plate" disableAutoFill validationRules="license-plate-required" />
</div> </div>
</div> </div>
<div class="row my-2"> <div class="row my-2">
<div class="col"> <div class="col">
<textboxQuestion ref="RegistrationZip" v-model="zip" inputId="zip" mask="#####" disableAutoFill validationRules="zip-required" /> <textboxQuestion cmsWidgetName="RegistrationZip" v-model="zip" inputId="zip" mask="#####" disableAutoFill validationRules="zip-required" />
</div> </div>
</div> </div>
<div class="row my-2"> <div class="row my-2">
<div class="col"> <div class="col">
<textboxQuestion ref="EmailAddress" v-model="email" inputId="email" disableAutoFill validationRules="email-address-required|email-address-format" /> <textboxQuestion cmsWidgetName="EmailAddress" v-model="email" inputId="email" disableAutoFill validationRules="email-address-required|email-address-format" />
</div> </div>
</div> </div>
<alert <alert
@ -47,11 +47,12 @@
/> />
<div class="row my-2"> <div class="row my-2">
<div class="col"> <div class="col">
<textboxQuestion v-if="newServiceZipRequired" v-model="serviceZip" inputId="serviceZip" disableAutoFill validationRules="zip-required" /> <textboxQuestion v-if="newServiceZipRequired" cmsWidgetName="ServiceZip" v-model="serviceZip" inputId="serviceZip" disableAutoFill validationRules="zip-required" />
</div> </div>
</div> </div>
<funnelFooter <funnelFooter
ref="funnelFooter" ref="funnelFooter"
cmsWidgetName="FunnelFooterWidget"
:isDisabled="!meta.valid" :isDisabled="!meta.valid"
@back-clicked="backButtonAction" @back-clicked="backButtonAction"
@ForwardClicked="forwardButtonAction" @ForwardClicked="forwardButtonAction"
@ -105,28 +106,7 @@ export default {
// Call the "next" function to complete the transition to this page. // Call the "next" function to complete the transition to this page.
next((vm) => { next((vm) => {
vm.setCmsContent(resultMap); vm.setCmsContent(resultMap.cmsContent);
vm.$refs.funnelHeader.initializeComponent(
resultMap.cmsContent.FunnelHeaderWidget
);
vm.$refs.vehicleBanner.initializeComponent(
resultMap.cmsContent.VehicleBannerWidget
);
vm.$refs.funnelSubHeader.initializeComponent(
resultMap.cmsContent.FunnelSubHeaderWidget
);
vm.$refs.LicensePlateNumber.initializeComponent(
resultMap.cmsContent.LicensePlateNumber.QuestionText
);
vm.$refs.RegistrationZip.initializeComponent(
resultMap.cmsContent.RegistrationZip.QuestionText
);
vm.$refs.EmailAddress.initializeComponent(
resultMap.cmsContent.EmailAddress.QuestionText
);
vm.$refs.funnelFooter.initializeComponent(
resultMap.cmsContent.FunnelFooterWidget
);
vm.noServiceZipWidget = { vm.noServiceZipWidget = {
headline: resultMap.cmsContent.NoServiceZipWidget.HeadlineText, headline: resultMap.cmsContent.NoServiceZipWidget.HeadlineText,
copy: resultMap.cmsContent.NoServiceZipWidget.BodyText, copy: resultMap.cmsContent.NoServiceZipWidget.BodyText,

11
src/layouts/reveal/reveal.vue
View file

@ -1,8 +1,8 @@
<template> <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" /> <funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
<h1>Reveal Confetti Page Placeholder</h1> <h1>Reveal Confetti Page Placeholder</h1>
<funnelFooter ref="funnelFooter" @back-clicked="backButtonAction" /> <funnelFooter cmsWidgetName="FunnelFooterWidget" ref="funnelFooter" @back-clicked="backButtonAction" />
</div> </div>
</template> </template>
@ -34,12 +34,7 @@ export default {
// Call the "next" function to complete the transition to this page. // Call the "next" function to complete the transition to this page.
next((vm) => { next((vm) => {
vm.$refs.funnelHeader.initializeComponent( vm.setCmsContent(resultMap.cmsContent);
resultMap.cmsContent.FunnelHeaderWidget
);
vm.$refs.funnelFooter.initializeComponent(
resultMap.cmsContent.FunnelFooterWidget
);
}); });
}, },
methods: { methods: {

13
src/layouts/vehicle-damage/damage-location-question/damage-location-question.vue
View file

@ -26,8 +26,6 @@ export default ({
name: "damageLocationQuestion", name: "damageLocationQuestion",
data(){ data(){
return { return {
questionText: String,
answersFromCms: Array,
damageOptions: Object, damageOptions: Object,
} }
}, },
@ -38,15 +36,20 @@ export default ({
filterByVehicleCategory: Boolean, filterByVehicleCategory: Boolean,
name: String, name: String,
groupName: String, groupName: String,
cmsWidgetName: String,
}, },
methods: { methods: {
initializeComponent(cmsContent, damageOptions){ initializeComponent(damageOptions){
this.questionText = cmsContent.QuestionText;
this.answersFromCms = cmsContent.Answers;
this.damageOptions = damageOptions; this.damageOptions = damageOptions;
}, },
}, },
computed: { computed: {
questionText(){
return this.getCmsContent(this.cmsWidgetName, 'QuestionText');
},
answersFromCms(){
return this.getCmsContent(this.cmsWidgetName, 'Answers');
},
selectedValues: { selectedValues: {
get: function() { get: function() {
return this.modelValue; return this.modelValue;

15
src/layouts/vehicle-damage/replace-options-question/replace-options-question.vue
View file

@ -24,9 +24,7 @@ export default ({
name: "replaceOptionsQuestion", name: "replaceOptionsQuestion",
data(){ data(){
return { return {
questionText: String, replaceOptions: [],
answersFromCms: Array,
replaceOptions: Array,
} }
}, },
props: { props: {
@ -37,11 +35,10 @@ export default ({
isMultiSelect: Boolean, isMultiSelect: Boolean,
validationRules: String, validationRules: String,
suppressError: Boolean, suppressError: Boolean,
cmsWidgetName: String,
}, },
methods: { methods: {
initializeComponent(cmsContent, replaceOptions){ initializeComponent(replaceOptions){
this.questionText = cmsContent.QuestionText;
this.answersFromCms = cmsContent.Answers;
this.replaceOptions = replaceOptions; this.replaceOptions = replaceOptions;
}, },
updateSelectedValues() { updateSelectedValues() {
@ -52,6 +49,12 @@ export default ({
}, },
}, },
computed: { computed: {
questionText(){
return this.getCmsContent(this.cmsWidgetName, 'QuestionText');
},
answersFromCms(){
return this.getCmsContent(this.cmsWidgetName, 'Answers');
},
selectedValues: { selectedValues: {
get: function() { get: function() {
return this.modelValue; return this.modelValue;

24
src/layouts/vehicle-damage/side-door-options/side-door-options.vue
View file

@ -15,6 +15,7 @@
</transition> </transition>
<replaceOptionsQuestion <replaceOptionsQuestion
ref="driverSideOptions" ref="driverSideOptions"
cmsWidgetName="DriverSideReplaceOptionsQuestion"
:isAvailable="isDriverSideReplaceOptionsQuestionAvailable" :isAvailable="isDriverSideReplaceOptionsQuestionAvailable"
groupName="driverSideOptions" groupName="driverSideOptions"
isMultiSelect isMultiSelect
@ -24,6 +25,7 @@
/> />
<replaceOptionsQuestion <replaceOptionsQuestion
ref="passengerSideOptions" ref="passengerSideOptions"
cmsWidgetName="PassengerSideReplaceOptionsQuestion"
:isAvailable="isPassengerSideReplaceOptionsQuestionAvailable" :isAvailable="isPassengerSideReplaceOptionsQuestionAvailable"
groupName="passengerSideOptions" groupName="passengerSideOptions"
isMultiSelect isMultiSelect
@ -49,24 +51,16 @@ defineRule("passenger-side-options-required", required(errorMessages.PASSENGER_S
export default ({ export default ({
name: "sideDoorOptions", name: "sideDoorOptions",
data(){
return {
questionText: String,
answersFromCms: Array,
}
},
props: { props: {
groupName: String, groupName: String,
modelValue: Array, modelValue: Array,
selectedDamageLocations: Array, selectedDamageLocations: Array,
cmsWidgetName: String,
}, },
methods: { methods: {
initializeComponent(cmsContent, driverSideReplaceOptions, passengerSideReplaceOptions, driverSideOptions, passengerSideOptions){ initializeComponent(driverSideOptions, passengerSideOptions){
this.questionText = cmsContent.QuestionText; this.$refs.driverSideOptions.initializeComponent(driverSideOptions);
this.answersFromCms = cmsContent.Answers; this.$refs.passengerSideOptions.initializeComponent(passengerSideOptions);
// Child Components intialize
this.$refs.driverSideOptions.initializeComponent(driverSideReplaceOptions, driverSideOptions);
this.$refs.passengerSideOptions.initializeComponent(passengerSideReplaceOptions, passengerSideOptions);
}, },
getSideDoorReplacementOptions(selectedDoorSides, selectedDriverSideReplaceOptions, selectedPassengerSideReplaceOptions){ getSideDoorReplacementOptions(selectedDoorSides, selectedDriverSideReplaceOptions, selectedPassengerSideReplaceOptions){
return { return {
@ -77,6 +71,12 @@ export default ({
}, },
}, },
computed: { computed: {
questionText(){
return this.getCmsContent(this.cmsWidgetName, 'QuestionText');
},
answersFromCms(){
return this.getCmsContent(this.cmsWidgetName, 'Answers');
},
selectedValues: { selectedValues: {
get: function() { get: function() {
return this.modelValue; return this.modelValue;

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

@ -6,11 +6,12 @@
v-slot="{ meta }" v-slot="{ meta }"
> >
<div class="container-fluid shadow rounded-3 p-2 position-relative make-tall px-5"> <div class="container-fluid shadow rounded-3 p-2 position-relative make-tall px-5">
<funnelHeader ref="funnelHeader" /> <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
<vehicleBanner ref="vehicleBanner" :displayGenericVehicleImage=false /> <vehicleBanner cmsWidgetName="VehicleBannerWidget" :displayGenericVehicleImage=false />
<funnelSubHeader ref="funnelSubHeader" /> <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" />
<damageLocationQuestion <damageLocationQuestion
ref="damageLocation" ref="damageLocation"
cmsWidgetName="DamageLocationQuestion"
v-model="selectedDamageLocations" v-model="selectedDamageLocations"
groupName="DamageLocationQuestion" groupName="DamageLocationQuestion"
/> />
@ -31,6 +32,7 @@
/> />
<sideDoorOptions <sideDoorOptions
ref="sideDoorOptions" ref="sideDoorOptions"
cmsWidgetName="SideDoorSideQuestion"
groupName="SideDoorSideQuestion" groupName="SideDoorSideQuestion"
v-model="sideDoorOptionsData" v-model="sideDoorOptionsData"
v-show="!hasRepairReplaceConflict" v-show="!hasRepairReplaceConflict"
@ -38,13 +40,14 @@
/> />
<replaceOptionsQuestion <replaceOptionsQuestion
ref="backGlassOptions" ref="backGlassOptions"
cmsWidgetName="RearReplaceOptionsQuestion"
:isAvailable="isRearWindowDamageLocation && !hasRepairReplaceConflict" :isAvailable="isRearWindowDamageLocation && !hasRepairReplaceConflict"
v-model="selectedRearReplaceOptions" v-model="selectedRearReplaceOptions"
groupName="BackGlassReplaceOptionsQuestion" groupName="BackGlassReplaceOptionsQuestion"
validationRules="replace-options-required" validationRules="replace-options-required"
/> />
<funnel-footer <funnel-footer
ref="funnelFooter" cmsWidgetName="FunnelFooterWidget"
:isDisabled="!meta.valid" :isDisabled="!meta.valid"
@back-clicked="backButtonAction" @back-clicked="backButtonAction"
@ForwardClicked="forwardButtonAction" @ForwardClicked="forwardButtonAction"
@ -107,30 +110,18 @@ export default {
// Call the "next" function to complete the transition to this page. // Call the "next" function to complete the transition to this page.
next((vm) => { next((vm) => {
vm.$refs.funnelHeader.initializeComponent( vm.setCmsContent(resultMap.cmsContent);
resultMap.cmsContent.FunnelHeaderWidget
);
vm.$refs.vehicleBanner.initializeComponent(
resultMap.cmsContent.VehicleBannerWidget
);
vm.$refs.funnelSubHeader.initializeComponent(
resultMap.cmsContent.FunnelSubHeaderWidget
);
vm.$refs.damageLocation.initializeComponent( vm.$refs.damageLocation.initializeComponent(
resultMap.cmsContent.DamageLocationQuestion, resultMap.damageOptions resultMap.damageOptions
); );
vm.$refs.sideDoorOptions.initializeComponent( vm.$refs.sideDoorOptions.initializeComponent(
resultMap.cmsContent.SideDoorSideQuestion, resultMap.cmsContent.DriverSideReplaceOptionsQuestion, resultMap.cmsContent.PassengerSideReplaceOptionsQuestion, resultMap.damageOptions.driverSideOptions.availableReplacementOptions, resultMap.damageOptions.passengerSideOptions.availableReplacementOptions resultMap.damageOptions.driverSideOptions.availableReplacementOptions, resultMap.damageOptions.passengerSideOptions.availableReplacementOptions
); );
vm.$refs.windshieldOptions.initializeComponent( vm.$refs.windshieldOptions.initializeComponent(
resultMap.cmsContent.WindshieldDamageTypeQuestion, resultMap.cmsContent.WindshieldChipCountQuestion, resultMap.damageOptions.windshieldOptions.availableReplacementOptions
resultMap.cmsContent.WindshieldReplaceOptionsQuestion, resultMap.damageOptions.windshieldOptions.availableReplacementOptions
); );
vm.$refs.backGlassOptions.initializeComponent( vm.$refs.backGlassOptions.initializeComponent(
resultMap.cmsContent.RearReplaceOptionsQuestion, resultMap.damageOptions.backGlassOptions.availableReplacementOptions resultMap.damageOptions.backGlassOptions.availableReplacementOptions
);
vm.$refs.funnelFooter.initializeComponent(
resultMap.cmsContent.FunnelFooterWidget
); );
}); });
}, },

19
src/layouts/vehicle-damage/windshield-options/windshield-chip-count-question/windshield-chip-count-question.vue
View file

@ -18,24 +18,15 @@
import buttonQuestion from "@/common-components/button-question/button-question"; import buttonQuestion from "@/common-components/button-question/button-question";
export default ({ export default ({
name: "windshieldOptions", name: "windshieldOptions",
data(){
return {
questionText: String,
answersFromCms: Array
}
},
props: { props: {
modelValue: Array, modelValue: Array,
groupName: String, groupName: String,
isAvailable: Boolean, isAvailable: Boolean,
validationRules: String, validationRules: String,
cmsWidgetName: String,
}, },
methods: { methods: {
initializeComponent(cmsContent){
this.questionText = cmsContent.QuestionText;
this.answersFromCms = cmsContent.Answers;
},
updateSelectedValues() { updateSelectedValues() {
// UPDATE SELECTEDVALUES IF ONLY ONE ANSWER // UPDATE SELECTEDVALUES IF ONLY ONE ANSWER
if(Array.isArray(this.answersToDisplay) && this.answersToDisplay.length === 1 && this.selectedValues) { if(Array.isArray(this.answersToDisplay) && this.answersToDisplay.length === 1 && this.selectedValues) {
@ -44,6 +35,12 @@ export default ({
}, },
}, },
computed: { computed: {
questionText(){
return this.getCmsContent(this.cmsWidgetName, 'QuestionText');
},
answersFromCms(){
return this.getCmsContent(this.cmsWidgetName, 'Answers');
},
selectedChipCountValues: { selectedChipCountValues: {
get: function() { get: function() {
return this.modelValue; return this.modelValue;

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

@ -20,26 +20,21 @@ import store from "@/store";
export default ({ export default ({
name: "windshieldDamageTypeQuestion", name: "windshieldDamageTypeQuestion",
data(){
return {
questionText: String,
answersFromCms: Array
}
},
props: { props: {
modelValue: Array, modelValue: Array,
groupName: String, groupName: String,
isAvailable: Boolean, isAvailable: Boolean,
suppressError: Boolean, suppressError: Boolean,
validationRules: String, validationRules: String,
}, cmsWidgetName: String,
methods: {
initializeComponent(cmsContent){
this.questionText = cmsContent.QuestionText;
this.answersFromCms = cmsContent.Answers;
},
}, },
computed: { computed: {
questionText(){
return this.getCmsContent(this.cmsWidgetName, 'QuestionText');
},
answersFromCms(){
return this.getCmsContent(this.cmsWidgetName, 'Answers');
},
selectedValues: { selectedValues: {
get: function() { get: function() {
return this.modelValue; return this.modelValue;

15
src/layouts/vehicle-damage/windshield-options/windshield-options.vue
View file

@ -1,6 +1,6 @@
<template> <template>
<div class="windshield-options"> <div class="windshield-options">
<windshieldDamageTypeQuestion ref="windshieldDamageTypeQuestion" <windshieldDamageTypeQuestion cmsWidgetName="WindshieldDamageTypeQuestion"
:isAvailable=isWindshieldDamageLocation :isAvailable=isWindshieldDamageLocation
:suppressError="hasRepairReplaceConflict || showNoReplacementAvailableError" :suppressError="hasRepairReplaceConflict || showNoReplacementAvailableError"
groupName="WindshieldDamageTypeQuestion" groupName="WindshieldDamageTypeQuestion"
@ -15,13 +15,13 @@
:alertCopy="['We\'re sorry, but we currently offer only repair service for your vehicle type.', 'Need help with next steps? Call us at 800-394-0288.']" :alertCopy="['We\'re sorry, but we currently offer only repair service for your vehicle type.', 'Need help with next steps? Call us at 800-394-0288.']"
:isDismissible="false" :isDismissible="false"
/> />
<windshieldChipCountQuestion ref="windshieldChipCountQuestion" <windshieldChipCountQuestion cmsWidgetName="WindshieldChipCountQuestion"
:isAvailable="isRepairOptionSelected && !hasRepairReplaceConflict" :isAvailable="isRepairOptionSelected && !hasRepairReplaceConflict"
groupName="WindshieldChipCountQuestion" groupName="WindshieldChipCountQuestion"
v-model="selectedWindshieldChipCountValues" v-model="selectedWindshieldChipCountValues"
validationRules="windshield-chip-count-required" validationRules="windshield-chip-count-required"
/> />
<replaceOptionsQuestion ref="replaceOptionsQuestion" <replaceOptionsQuestion ref="replaceOptionsQuestion" cmsWidgetName="WindshieldReplaceOptionsQuestion"
:isAvailable=isReplaceOptionSelected :isAvailable=isReplaceOptionSelected
isMultiSelect isMultiSelect
groupName="WindshieldReplaceOptions" groupName="WindshieldReplaceOptions"
@ -99,13 +99,8 @@ export default ({
}, },
methods: { methods: {
initializeComponent(windshieldDamageTypeQuestionFromCms, windshieldChipCountQuestionFromCms, initializeComponent(
windshieldReplaceOptionsQuestionFromCms, windshieldAvailableReplacementOptions){ windshieldAvailableReplacementOptions){
this.$refs.windshieldDamageTypeQuestion.initializeComponent(windshieldDamageTypeQuestionFromCms);
this.$refs.windshieldChipCountQuestion.initializeComponent(windshieldChipCountQuestionFromCms);
this.$refs.replaceOptionsQuestion.initializeComponent(windshieldReplaceOptionsQuestionFromCms, windshieldAvailableReplacementOptions);
this.windshieldAvailableReplacementOptions = windshieldAvailableReplacementOptions; this.windshieldAvailableReplacementOptions = windshieldAvailableReplacementOptions;
}, },
getWindshieldOptions(selectedWindshieldDamageType, selectedWindshieldChipCount, selectedWindshieldReplaceOptions){ getWindshieldOptions(selectedWindshieldDamageType, selectedWindshieldChipCount, selectedWindshieldReplaceOptions){

8
src/layouts/vehicle-make/make-question/make-question.vue
View file

@ -23,14 +23,17 @@ export default {
name: "make-question", name: "make-question",
data() { data() {
return { return {
questionText: null,
makes: Array, makes: Array,
}; };
}, },
props: { props: {
modelValue: String, modelValue: String,
cmsWidgetName: String,
}, },
computed: { computed: {
questionText(){
return this.getCmsContent(this.cmsWidgetName, 'QuestionText');
},
selectedValueAsArray: { selectedValueAsArray: {
get: function() { get: function() {
const modelValueAsArray = this.modelValue ? [this.modelValue] : []; const modelValueAsArray = this.modelValue ? [this.modelValue] : [];
@ -52,8 +55,7 @@ export default {
{ year: store.getters.vehicle.year } { year: store.getters.vehicle.year }
); );
}, },
initializeComponent(cmsContent, initialData) { initializeComponent(initialData) {
this.questionText = cmsContent.QuestionText;
this.makes = initialData; this.makes = initialData;
}, },
}, },

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

@ -1,16 +1,16 @@
<template> <template>
<div class="container-fluid shadow rounded-3 p-0 position-relative make-tall"> <div class="container-fluid shadow rounded-3 p-0 position-relative make-tall">
<funnelHeader ref="funnelHeader" /> <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
<div class="select-car"> <div class="select-car">
<div class="select-car-form rounded text-center"> <div class="select-car-form rounded text-center">
<vehicleBanner ref="vehicleBanner" :displayGenericVehicleImage=true /> <vehicleBanner cmsWidgetName="VehicleBannerWidget" displayGenericVehicleImage />
<funnelSubHeader <funnelSubHeader
ref="funnelSubHeader" cmsWidgetName="FunnelSubHeaderWidget"
:hasBackButton="true" :hasBackButton="true"
backButtonAccessibleText="Change Vehicle Year" backButtonAccessibleText="Change Vehicle Year"
@click-event="backButtonAction" @click-event="backButtonAction"
/> />
<makeQuestion v-model="selectedMake" ref="makeQuestion" /> <makeQuestion v-model="selectedMake" ref="makeQuestion" cmsWidgetName="VehicleMakeQuestion" />
</div> </div>
</div> </div>
</div> </div>
@ -59,17 +59,8 @@ export default {
const resultMap = await settleAllPromises(promiseResultMap); const resultMap = await settleAllPromises(promiseResultMap);
// Call the "next" function to complete the transition to this page. // Call the "next" function to complete the transition to this page.
next((vm) => { next((vm) => {
vm.$refs.funnelSubHeader.initializeComponent( vm.setCmsContent(resultMap.cmsContent);
resultMap.cmsContent.FunnelSubHeaderWidget
);
vm.$refs.funnelHeader.initializeComponent(
resultMap.cmsContent.FunnelHeaderWidget
);
vm.$refs.vehicleBanner.initializeComponent(
resultMap.cmsContent.VehicleBannerWidget
);
vm.$refs.makeQuestion.initializeComponent( vm.$refs.makeQuestion.initializeComponent(
resultMap.cmsContent.VehicleMakeQuestion,
resultMap.makeQuestionInitialData resultMap.makeQuestionInitialData
); );
}); });

8
src/layouts/vehicle-model/model-question/model-question.vue
View file

@ -23,14 +23,17 @@ export default {
name: "model-question", name: "model-question",
data() { data() {
return { return {
questionText: null,
models: Array, models: Array,
}; };
}, },
props: { props: {
modelValue: String, modelValue: String,
cmsWidgetName: String,
}, },
computed: { computed: {
questionText(){
return this.getCmsContent(this.cmsWidgetName, 'QuestionText');
},
selectedValueAsArray: { selectedValueAsArray: {
get: function() { get: function() {
const modelValueAsArray = this.modelValue ? [this.modelValue] : []; const modelValueAsArray = this.modelValue ? [this.modelValue] : [];
@ -52,8 +55,7 @@ export default {
{ year: store.getters.vehicle.year, make: store.getters.vehicle.make } { year: store.getters.vehicle.year, make: store.getters.vehicle.make }
); );
}, },
initializeComponent(cmsContent, initialData) { initializeComponent(initialData) {
this.questionText = cmsContent.QuestionText;
this.models = initialData; this.models = initialData;
}, },
}, },

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

@ -1,16 +1,16 @@
<template> <template>
<div class="container-fluid shadow rounded-3 p-0 position-relative"> <div class="container-fluid shadow rounded-3 p-0 position-relative">
<funnelHeader ref="funnelHeader" /> <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
<div class="select-car"> <div class="select-car">
<div class="select-car-form rounded text-center"> <div class="select-car-form rounded text-center">
<vehicleBanner ref="vehicleBanner" :displayGenericVehicleImage=true /> <vehicleBanner cmsWidgetName="VehicleBannerWidget" displayGenericVehicleImage />
<funnelSubHeader <funnelSubHeader
ref="funnelSubHeader" cmsWidgetName="FunnelSubHeaderWidget"
:hasBackButton="true" :hasBackButton="true"
backButtonAccessibleText="Change Vehicle Make" backButtonAccessibleText="Change Vehicle Make"
@click-event="backButtonAction" @click-event="backButtonAction"
/> />
<modelQuestion v-model="selectedModel" ref="modelQuestion" /> <modelQuestion v-model="selectedModel" ref="modelQuestion" cmsWidgetName="VehicleModelQuestion" />
</div> </div>
</div> </div>
</div> </div>
@ -60,17 +60,8 @@ export default {
// Call the "next" function to complete the transition to this page. // Call the "next" function to complete the transition to this page.
next((vm) => { next((vm) => {
vm.$refs.funnelSubHeader.initializeComponent( vm.setCmsContent(resultMap.cmsContent);
resultMap.cmsContent.FunnelSubHeaderWidget
);
vm.$refs.funnelHeader.initializeComponent(
resultMap.cmsContent.FunnelHeaderWidget
);
vm.$refs.vehicleBanner.initializeComponent(
resultMap.cmsContent.VehicleBannerWidget
);
vm.$refs.modelQuestion.initializeComponent( vm.$refs.modelQuestion.initializeComponent(
resultMap.cmsContent.VehicleModelQuestion,
resultMap.modelQuestionInitialData resultMap.modelQuestionInitialData
); );
}); });

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

@ -1,8 +1,8 @@
<template> <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" /> <funnelHeader ref="funnelHeader" cmsWidgetName="FunnelHeaderWidget" />
<vehicleBanner ref="vehicleBanner" :displayGenericVehicleImage="false" /> <vehicleBanner ref="vehicleBanner" cmsWidgetName="VehicleBannerWidget" :displayGenericVehicleImage="false" />
<funnelSubHeader ref="funnelSubHeader" /> <funnelSubHeader ref="funnelSubHeader" cmsWidgetName="FunnelSubHeaderWidget" />
<div class="container-fluid prevent-squish my-5"> <div class="container-fluid prevent-squish my-5">
<div class="row"> <div class="row">
<div class="col"> <div class="col">
@ -19,7 +19,7 @@
<glassPartQuestion :ref="`${RefPrefix}-${item.glassLocation}-${item.glassName}`" 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> </div>
<funnelFooter ref="funnelFooter" @back-clicked="backButtonAction" @ForwardClicked="forwardButtonAction" /> <funnelFooter cmsWidgetName="FunnelFooterWidget" ref="funnelFooter" @back-clicked="backButtonAction" @ForwardClicked="forwardButtonAction" />
</div> </div>
</template> </template>
@ -59,21 +59,9 @@ export default {
const resultMap = await settleAllPromises(promiseResultMap); const resultMap = await settleAllPromises(promiseResultMap);
// Call the "next" function to complete the transition to this page. // Call the "next" function to complete the transition to this page.
next((vm) => { next((vm) => {
vm.$refs.funnelHeader.initializeComponent( vm.setCmsContent(resultMap.cmsContent);
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) Object.keys(vm.$refs)
.filter((r) => r.includes(vm.RefPrefix) && vm.$refs[r][0] !== undefined) .filter((r) => r.includes(vm.RefPrefix) && vm.$refs[r][0] !== undefined)
.forEach((c) => .forEach((c) =>

8
src/layouts/vehicle-style/style-question/style-question.vue
View file

@ -23,14 +23,17 @@ export default {
name: "style-question", name: "style-question",
data() { data() {
return { return {
questionText: null,
styles: Array, styles: Array,
}; };
}, },
props: { props: {
modelValue: String, modelValue: String,
cmsWidgetName: String,
}, },
computed: { computed: {
questionText(){
return this.getCmsContent(this.cmsWidgetName, 'QuestionText');
},
selectedValueAsArray: { selectedValueAsArray: {
get: function() { get: function() {
const modelValueAsArray = this.modelValue ? [this.modelValue] : []; const modelValueAsArray = this.modelValue ? [this.modelValue] : [];
@ -56,8 +59,7 @@ export default {
} }
); );
}, },
initializeComponent(cmsContent, initialData) { initializeComponent(initialData) {
this.questionText = cmsContent.QuestionText;
this.styles = initialData; this.styles = initialData;
}, },
}, },

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

@ -1,16 +1,16 @@
<template> <template>
<div class="container-fluid shadow rounded-3 p-0 position-relative"> <div class="container-fluid shadow rounded-3 p-0 position-relative">
<funnelHeader ref="funnelHeader" /> <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
<div class="select-car"> <div class="select-car">
<div class="select-car-form rounded text-center"> <div class="select-car-form rounded text-center">
<vehicleBanner ref="vehicleBanner" :displayGenericVehicleImage=true /> <vehicleBanner cmsWidgetName="VehicleBannerWidget" displayGenericVehicleImage />
<funnelSubHeader <funnelSubHeader
ref="funnelSubHeader" cmsWidgetName="FunnelSubHeaderWidget"
:hasBackButton="true" :hasBackButton="true"
backButtonAccessibleText="Change Vehicle Model" backButtonAccessibleText="Change Vehicle Model"
@click-event="backButtonAction" @click-event="backButtonAction"
/> />
<styleQuestion v-model="selectedStyle" ref="styleQuestion" /> <styleQuestion v-model="selectedStyle" ref="styleQuestion" cmsWidgetName="VehicleStyleQuestion" />
</div> </div>
</div> </div>
</div> </div>
@ -60,17 +60,8 @@ export default {
// Call the "next" function to complete the transition to this page. // Call the "next" function to complete the transition to this page.
next((vm) => { next((vm) => {
vm.$refs.funnelSubHeader.initializeComponent( vm.setCmsContent(resultMap.cmsContent);
resultMap.cmsContent.FunnelSubHeaderWidget
);
vm.$refs.funnelHeader.initializeComponent(
resultMap.cmsContent.FunnelHeaderWidget
);
vm.$refs.vehicleBanner.initializeComponent(
resultMap.cmsContent.VehicleBannerWidget
);
vm.$refs.styleQuestion.initializeComponent( vm.$refs.styleQuestion.initializeComponent(
resultMap.cmsContent.VehicleStyleQuestion,
resultMap.styleQuestionInitialData resultMap.styleQuestionInitialData
); );
}); });

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

@ -1,11 +1,11 @@
<template> <template>
<div class="container-fluid shadow rounded-3 p-0 position-relative"> <div class="container-fluid shadow rounded-3 p-0 position-relative">
<funnelHeader ref="funnelHeader" /> <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
<div class="select-car"> <div class="select-car">
<div class="select-car-form rounded text-center"> <div class="select-car-form rounded text-center">
<vehicleBanner ref="vehicleBanner" :displayGenericVehicleImage=true /> <vehicleBanner cmsWidgetName="VehicleBannerWidget" displayGenericVehicleImage />
<funnelSubHeader ref="funnelSubHeader" /> <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" />
<yearQuestion v-model="selectedYear" ref="yearQuestion" /> <yearQuestion v-model="selectedYear" ref="yearQuestion" cmsWidgetName="VehicleYearQuestion" />
</div> </div>
</div> </div>
</div> </div>
@ -55,17 +55,8 @@ export default {
// Call the "next" function to complete the transition to this page. // Call the "next" function to complete the transition to this page.
next((vm) => { next((vm) => {
vm.$refs.funnelSubHeader.initializeComponent( vm.setCmsContent(resultMap.cmsContent);
resultMap.cmsContent.FunnelSubHeaderWidget
);
vm.$refs.funnelHeader.initializeComponent(
resultMap.cmsContent.FunnelHeaderWidget
);
vm.$refs.vehicleBanner.initializeComponent(
resultMap.cmsContent.VehicleBannerWidget
);
vm.$refs.yearQuestion.initializeComponent( vm.$refs.yearQuestion.initializeComponent(
resultMap.cmsContent.VehicleYearQuestion,
resultMap.yearQuestionInitialData resultMap.yearQuestionInitialData
); );
}); });

9
src/layouts/vehicle-year/year-question/year-question.vue
View file

@ -21,18 +21,20 @@ export default {
name: "year-question", name: "year-question",
data() { data() {
return { return {
questionText: null,
years: Array, years: Array,
}; };
}, },
props: { props: {
modelValue: String, modelValue: String,
cmsWidgetName: String,
}, },
emits: ['update:modelValue'],
components: { components: {
buttonQuestion, buttonQuestion,
}, },
computed: { computed: {
questionText(){
return this.getCmsContent(this.cmsWidgetName, 'QuestionText');
},
selectedValueAsArray: { selectedValueAsArray: {
get: function() { get: function() {
const modelValueAsArray = this.modelValue ? [this.modelValue] : []; const modelValueAsArray = this.modelValue ? [this.modelValue] : [];
@ -51,8 +53,7 @@ export default {
{} {}
); );
}, },
initializeComponent(cmsContent, initialData) { initializeComponent(initialData) {
this.questionText = cmsContent.QuestionText;
this.years = initialData; this.years = initialData;
}, },
}, },

4
src/mixins/base-mixin.js
View file

@ -15,8 +15,8 @@ export default {
setCmsContent(cmsContent){ setCmsContent(cmsContent){
this.$root.cmsContentByWidget = cmsContent; this.$root.cmsContentByWidget = cmsContent;
}, },
getCmsContent(widgetName){ getCmsContent(widgetName, fieldName){
return this.$root === undefined ? null : this.$root.cmsContentByWidget.cmsContent[widgetName]; return this.$root.cmsContentByWidget[widgetName] && this.$root.cmsContentByWidget[widgetName][fieldName] ? this.$root.cmsContentByWidget[widgetName][fieldName] : '';
}, },
dispatchNonBlockingStoreAction(type, payload, encodePayload = true) { dispatchNonBlockingStoreAction(type, payload, encodePayload = true) {
// Encode the payload if required // Encode the payload if required