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

View file

@ -9,7 +9,7 @@
<funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
<vehicleBanner ref="vehicleBanner" :displayGenericVehicleImage=false />
<funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" ref="funnelSubHeader" />
<customerQuestions ref="customerQuestions" v-model="customerQuestions" />
<customerQuestions ref="customerQuestions" v-model="customerQuestions" :alertNotifications="{alertVerification: alertVerificationWidget, alertNoMatchWarning: alertNoMatchWarningWidget}" />
<funnel-footer
cmsWidgetName="FunnelFooterWidget"
ref="funnelFooter"
@ -55,6 +55,14 @@ export default {
// Call the "next" function to complete the transition to this page.
next((vm) => {
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(
// resultMap.cmsContent.FunnelHeaderWidget
// );

View file

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

View file

@ -1,5 +1,5 @@
<template>
<addressQuestions ref="addressQuestions" v-model="customerModel.addressQuestions" />
<addressQuestions ref="addressQuestions" v-model="customerModel.addressQuestions" :alertNotifications="alertNotifications" />
<div class="row my-4">
<div class="col">
<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: {
customerModel: {