Adding props to pass alert data to child components and updating dropdown question to new format for retrieving CMS data

This commit is contained in:
Max 2022-04-08 10:07:59 -04:00
parent e05ba287a1
commit e4c2d1bf51
4 changed files with 25 additions and 21 deletions

View file

@ -37,6 +37,7 @@ export default {
isRequired: Boolean, isRequired: Boolean,
disableAutoFill: Boolean, disableAutoFill: Boolean,
validationRules: String, validationRules: String,
cmsWidgetName: String,
}, },
setup(props) { setup(props) {
const fieldOptions = { const fieldOptions = {
@ -57,18 +58,11 @@ export default {
handleChange, handleChange,
meta, meta,
}; };
}, },
data() {
return {
questionText: "",
}
},
methods: {
initializeComponent(cmsContent) {
this.questionText = cmsContent;
}
},
computed: { computed: {
questionText(){
return this.getCmsContent(this.cmsWidgetName, 'QuestionText');
},
selectedOption: { selectedOption: {
get: function() { get: function() {
return this.modelValue; return this.modelValue;

View file

@ -9,7 +9,7 @@
<funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" /> <funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
<vehicleBanner ref="vehicleBanner" :displayGenericVehicleImage=false /> <vehicleBanner ref="vehicleBanner" :displayGenericVehicleImage=false />
<funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" ref="funnelSubHeader" /> <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" ref="funnelSubHeader" />
<customerQuestions ref="customerQuestions" v-model="customerQuestions" /> <customerQuestions ref="customerQuestions" v-model="customerQuestions" :alertNotifications="{alertVerification: alertVerificationWidget, alertNoMatchWarning: alertNoMatchWarningWidget}" />
<funnel-footer <funnel-footer
cmsWidgetName="FunnelFooterWidget" cmsWidgetName="FunnelFooterWidget"
ref="funnelFooter" ref="funnelFooter"
@ -55,6 +55,14 @@ 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.cmsContent); vm.setCmsContent(resultMap.cmsContent);
vm.alertVerificationWidget = {
headline: resultMap.cmsContent.AlertVerificationWarningWidget.HeadlineText,
copy: resultMap.cmsContent.AlertVerificationWarningWidget.BodyText,
};
vm.alertNoMatchWarningWidget = {
headline: resultMap.cmsContent.AlertNoMatchWarningWidget.HeadlineText,
copy: resultMap.cmsContent.AlertNoMatchWarningWidget.BodyText,
}
// vm.$refs.funnelHeader.initializeComponent( // vm.$refs.funnelHeader.initializeComponent(
// resultMap.cmsContent.FunnelHeaderWidget // resultMap.cmsContent.FunnelHeaderWidget
// ); // );

View file

@ -21,16 +21,16 @@
</div> </div>
</div> </div>
</transition> </transition>
<alert cmsWidgetName="AlertVerificationWarningWidget" ref="alertVerificationWarning" v-show="displayVerificationWarning" <alert ref="alertVerificationWarning" v-show="displayVerificationWarning"
alertClass="alert-warning" alertClass="alert-warning"
:alertHeadline="alertHeadlineVerificationWarning" :alertHeadline="alertNotifications?.alertVerification?.headline"
:alertCopy="alertCopyVerificationWarning" :alertCopy="alertNotifications?.alertVerification?.copy"
v-bind:isDismissible="false" v-bind:isDismissible="false"
/> />
<alert cmsWidgetName="AlertNoMatchWarningWidget" ref="alertNoMatchWarning" v-show="displayNoMatchWarning" <alert ref="alertNoMatchWarning" v-show="displayNoMatchWarning"
alertClass="alert-warning" alertClass="alert-warning"
:alertHeadline="alertHeadlineNoMatchWarning" :alertHeadline="alertNotifications?.alertNoMatchWarning?.headline"
:alertCopy="alertCopyNoMatchWarning" :alertCopy="alertNotifications?.alertNoMatchWarning?.copy"
v-bind:isDismissible="false" v-bind:isDismissible="false"
/> />
</template> </template>
@ -68,7 +68,8 @@ export default ({
zip: "", zip: "",
}), }),
}, },
validationRules: String, validationRules: String,
alertNotifications: {},
}, },
data() { data() {
return { return {

View file

@ -1,5 +1,5 @@
<template> <template>
<addressQuestions ref="addressQuestions" v-model="customerModel.addressQuestions" /> <addressQuestions ref="addressQuestions" v-model="customerModel.addressQuestions" :alertNotifications="alertNotifications" />
<div class="row my-4"> <div class="row my-4">
<div class="col"> <div class="col">
<textboxQuestion cmsWidgetName="FirstNameQuestionWidget" v-model="customerModel.firstName" ref="firstName" inputId="08497a2efd9a4a73a70360ab47b4838d" disableAutoFill validationRules="first-name-required" /> <textboxQuestion cmsWidgetName="FirstNameQuestionWidget" v-model="customerModel.firstName" ref="firstName" inputId="08497a2efd9a4a73a70360ab47b4838d" disableAutoFill validationRules="first-name-required" />
@ -51,7 +51,8 @@ export default ({
} }
}), }),
}, },
validationRules: String, validationRules: String,
alertNotifications: {},
}, },
computed: { computed: {
customerModel: { customerModel: {