diff --git a/src/common-components/funnel-footer/funnel-footer.vue b/src/common-components/funnel-footer/funnel-footer.vue index c984297ad..10ecb77d4 100644 --- a/src/common-components/funnel-footer/funnel-footer.vue +++ b/src/common-components/funnel-footer/funnel-footer.vue @@ -49,6 +49,7 @@ export default { name: "funnelFooter", props: { isDisabled: Boolean, + cmsWidgetName: String, }, components: { textLink, @@ -57,8 +58,6 @@ export default { data() { return { paddingHeight: 0, - backLink: "", - buttonText: "", } }, mounted() { @@ -70,14 +69,18 @@ export default { beforeUnmount() { window.removeEventListener('resize', this.onResize); }, + computed: { + backLink(){ + return this.getCmsContent(this.cmsWidgetName, 'BackButtonText'); + }, + buttonText(){ + return this.getCmsContent(this.cmsWidgetName, 'ForwardButtonText'); + } + }, methods: { onResize() { this.paddingHeight = document.querySelector(".footer #infoBox").offsetHeight; }, - initializeComponent(cmsContent) { - this.backLink = cmsContent.BackButtonText; - this.buttonText = cmsContent.ForwardButtonText; - }, updateButtonText(newText) { this.buttonText = newText; }, diff --git a/src/common-components/funnel-header/funnel-header.vue b/src/common-components/funnel-header/funnel-header.vue index 382640219..efe6bd06b 100644 --- a/src/common-components/funnel-header/funnel-header.vue +++ b/src/common-components/funnel-header/funnel-header.vue @@ -24,7 +24,6 @@ export default { name: "funnel-header", data() { return { - imageSrc: "", displayGlobalAlert: false, globalAlertMessage: { isDismissible: false, @@ -34,10 +33,13 @@ export default { }, }; }, - methods: { - initializeComponent(cmsContent) { - this.imageSrc = cmsContent.LogoImage; - }, + props: { + cmsWidgetName: String, + }, + computed: { + imageSrc(){ + return this.getCmsContent(this.cmsWidgetName, 'LogoImage'); + } }, components: { alert, diff --git a/src/common-components/funnel-sub-header/funnel-sub-header.vue b/src/common-components/funnel-sub-header/funnel-sub-header.vue index bc290d473..0799e4744 100644 --- a/src/common-components/funnel-sub-header/funnel-sub-header.vue +++ b/src/common-components/funnel-sub-header/funnel-sub-header.vue @@ -27,15 +27,10 @@ import buttonBack from "@/common-components/button-back/button-back"; export default { name: "FunnelSubHeader", - data() { - return { - text: "", - subText: "", - }; - }, props: { hasBackButton: Boolean, - backButtonAccessibleText: String + backButtonAccessibleText: String, + cmsWidgetName: String, }, components: { buttonBack, @@ -43,16 +38,18 @@ export default { computed: { hasSubText(){ return this.subText.length > 0; + }, + text(){ + return this.getCmsContent(this.cmsWidgetName, 'HeaderText'); + }, + subText(){ + return this.getCmsContent(this.cmsWidgetName, 'HeaderSubText'); } }, methods: { clickEvent() { this.$emit("click-event"); }, - initializeComponent(cmsContent) { - this.text = cmsContent.HeaderText; - this.subText = cmsContent.HeaderSubText; - }, }, }; diff --git a/src/common-components/textbox-question/textbox-question.vue b/src/common-components/textbox-question/textbox-question.vue index bab1664f0..d85b92b6b 100644 --- a/src/common-components/textbox-question/textbox-question.vue +++ b/src/common-components/textbox-question/textbox-question.vue @@ -75,19 +75,9 @@ export default { meta, }; }, - data() { - return { - questionText: "", - } - }, - methods: { - initializeComponent(cmsContent){ - this.questionText = cmsContent; - }, - }, computed: { - questionTextNew(){ - return this.getCmsContent(this.cmsWidgetName).QuestionText ? this.getCmsContent(this.cmsWidgetName).QuestionText : ''; + questionText(){ + return this.getCmsContent(this.cmsWidgetName, 'QuestionText'); }, value: { get: function() { @@ -99,7 +89,7 @@ export default { }, labelText: { get: function () { - let labelText = this.questionTextNew; + let labelText = this.questionText; if (this.disableAutoFill) { var noBreakChar = "⁠"; var position = 1; diff --git a/src/common-components/vehicle-banner/vehicle-banner.vue b/src/common-components/vehicle-banner/vehicle-banner.vue index 0409c1903..ed0b2685a 100644 --- a/src/common-components/vehicle-banner/vehicle-banner.vue +++ b/src/common-components/vehicle-banner/vehicle-banner.vue @@ -14,18 +14,9 @@ export default { props: { displayGenericVehicleImage: { type: Boolean, - required: true - } - }, - data() { - return { - genericVehicleImage: '', - carUnmatchedVehicleIcon: '', - truckUnmatchedVehicleIcon: '', - vanUnmatchedVehicleIcon: '', - commercialUnmatchedVehicleIcon: '', - suvUnmatchedVehicleIcon: '' - } + required: true, + }, + cmsWidgetName: String, }, computed: { vehicleImageToDisplay(){ @@ -38,17 +29,27 @@ export default { } 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: { - 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(){ switch(this.$store.getters.vehicle.category){ case this.vehicleCategories.CAR: diff --git a/src/layouts/license-plate-lookup/license-plate-lookup.vue b/src/layouts/license-plate-lookup/license-plate-lookup.vue index af3be061c..1f99a38bc 100644 --- a/src/layouts/license-plate-lookup/license-plate-lookup.vue +++ b/src/layouts/license-plate-lookup/license-plate-lookup.vue @@ -6,22 +6,22 @@ v-slot="{ meta }" >
- - - + + +
- +
- +
- +
- +
{ - vm.setCmsContent(resultMap); - 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.setCmsContent(resultMap.cmsContent); vm.noServiceZipWidget = { headline: resultMap.cmsContent.NoServiceZipWidget.HeadlineText, copy: resultMap.cmsContent.NoServiceZipWidget.BodyText, diff --git a/src/layouts/reveal/reveal.vue b/src/layouts/reveal/reveal.vue index fdd371e68..200fec263 100644 --- a/src/layouts/reveal/reveal.vue +++ b/src/layouts/reveal/reveal.vue @@ -1,8 +1,8 @@ @@ -34,12 +34,7 @@ export default { // Call the "next" function to complete the transition to this page. next((vm) => { - vm.$refs.funnelHeader.initializeComponent( - resultMap.cmsContent.FunnelHeaderWidget - ); - vm.$refs.funnelFooter.initializeComponent( - resultMap.cmsContent.FunnelFooterWidget - ); + vm.setCmsContent(resultMap.cmsContent); }); }, methods: { diff --git a/src/layouts/vehicle-damage/damage-location-question/damage-location-question.vue b/src/layouts/vehicle-damage/damage-location-question/damage-location-question.vue index dff518342..690e7df78 100644 --- a/src/layouts/vehicle-damage/damage-location-question/damage-location-question.vue +++ b/src/layouts/vehicle-damage/damage-location-question/damage-location-question.vue @@ -26,8 +26,6 @@ export default ({ name: "damageLocationQuestion", data(){ return { - questionText: String, - answersFromCms: Array, damageOptions: Object, } }, @@ -38,15 +36,20 @@ export default ({ filterByVehicleCategory: Boolean, name: String, groupName: String, + cmsWidgetName: String, }, methods: { - initializeComponent(cmsContent, damageOptions){ - this.questionText = cmsContent.QuestionText; - this.answersFromCms = cmsContent.Answers; + initializeComponent(damageOptions){ this.damageOptions = damageOptions; }, }, computed: { + questionText(){ + return this.getCmsContent(this.cmsWidgetName, 'QuestionText'); + }, + answersFromCms(){ + return this.getCmsContent(this.cmsWidgetName, 'Answers'); + }, selectedValues: { get: function() { return this.modelValue; diff --git a/src/layouts/vehicle-damage/replace-options-question/replace-options-question.vue b/src/layouts/vehicle-damage/replace-options-question/replace-options-question.vue index fe43419e8..e2a6bb426 100644 --- a/src/layouts/vehicle-damage/replace-options-question/replace-options-question.vue +++ b/src/layouts/vehicle-damage/replace-options-question/replace-options-question.vue @@ -24,9 +24,7 @@ export default ({ name: "replaceOptionsQuestion", data(){ return { - questionText: String, - answersFromCms: Array, - replaceOptions: Array, + replaceOptions: [], } }, props: { @@ -37,11 +35,10 @@ export default ({ isMultiSelect: Boolean, validationRules: String, suppressError: Boolean, + cmsWidgetName: String, }, methods: { - initializeComponent(cmsContent, replaceOptions){ - this.questionText = cmsContent.QuestionText; - this.answersFromCms = cmsContent.Answers; + initializeComponent(replaceOptions){ this.replaceOptions = replaceOptions; }, updateSelectedValues() { @@ -52,6 +49,12 @@ export default ({ }, }, computed: { + questionText(){ + return this.getCmsContent(this.cmsWidgetName, 'QuestionText'); + }, + answersFromCms(){ + return this.getCmsContent(this.cmsWidgetName, 'Answers'); + }, selectedValues: { get: function() { return this.modelValue; diff --git a/src/layouts/vehicle-damage/side-door-options/side-door-options.vue b/src/layouts/vehicle-damage/side-door-options/side-door-options.vue index 9366954ec..a79cdf49f 100644 --- a/src/layouts/vehicle-damage/side-door-options/side-door-options.vue +++ b/src/layouts/vehicle-damage/side-door-options/side-door-options.vue @@ -15,6 +15,7 @@
- - - + + + @@ -31,6 +32,7 @@ /> { - vm.$refs.funnelHeader.initializeComponent( - resultMap.cmsContent.FunnelHeaderWidget - ); - vm.$refs.vehicleBanner.initializeComponent( - resultMap.cmsContent.VehicleBannerWidget - ); - vm.$refs.funnelSubHeader.initializeComponent( - resultMap.cmsContent.FunnelSubHeaderWidget - ); + vm.setCmsContent(resultMap.cmsContent); vm.$refs.damageLocation.initializeComponent( - resultMap.cmsContent.DamageLocationQuestion, resultMap.damageOptions + resultMap.damageOptions ); 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( - resultMap.cmsContent.WindshieldDamageTypeQuestion, resultMap.cmsContent.WindshieldChipCountQuestion, - resultMap.cmsContent.WindshieldReplaceOptionsQuestion, resultMap.damageOptions.windshieldOptions.availableReplacementOptions + resultMap.damageOptions.windshieldOptions.availableReplacementOptions ); vm.$refs.backGlassOptions.initializeComponent( - resultMap.cmsContent.RearReplaceOptionsQuestion, resultMap.damageOptions.backGlassOptions.availableReplacementOptions - ); - vm.$refs.funnelFooter.initializeComponent( - resultMap.cmsContent.FunnelFooterWidget + resultMap.damageOptions.backGlassOptions.availableReplacementOptions ); }); }, diff --git a/src/layouts/vehicle-damage/windshield-options/windshield-chip-count-question/windshield-chip-count-question.vue b/src/layouts/vehicle-damage/windshield-options/windshield-chip-count-question/windshield-chip-count-question.vue index c04832a92..fc29d1c34 100644 --- a/src/layouts/vehicle-damage/windshield-options/windshield-chip-count-question/windshield-chip-count-question.vue +++ b/src/layouts/vehicle-damage/windshield-options/windshield-chip-count-question/windshield-chip-count-question.vue @@ -18,24 +18,15 @@ import buttonQuestion from "@/common-components/button-question/button-question"; export default ({ - name: "windshieldOptions", - data(){ - return { - questionText: String, - answersFromCms: Array - } - }, + name: "windshieldOptions", props: { modelValue: Array, groupName: String, isAvailable: Boolean, validationRules: String, + cmsWidgetName: String, }, methods: { - initializeComponent(cmsContent){ - this.questionText = cmsContent.QuestionText; - this.answersFromCms = cmsContent.Answers; - }, updateSelectedValues() { // UPDATE SELECTEDVALUES IF ONLY ONE ANSWER if(Array.isArray(this.answersToDisplay) && this.answersToDisplay.length === 1 && this.selectedValues) { @@ -44,6 +35,12 @@ export default ({ }, }, computed: { + questionText(){ + return this.getCmsContent(this.cmsWidgetName, 'QuestionText'); + }, + answersFromCms(){ + return this.getCmsContent(this.cmsWidgetName, 'Answers'); + }, selectedChipCountValues: { get: function() { return this.modelValue; diff --git a/src/layouts/vehicle-damage/windshield-options/windshield-damage-type-question/windshield-damage-type-question.vue b/src/layouts/vehicle-damage/windshield-options/windshield-damage-type-question/windshield-damage-type-question.vue index 4510b651c..3c377ec88 100644 --- a/src/layouts/vehicle-damage/windshield-options/windshield-damage-type-question/windshield-damage-type-question.vue +++ b/src/layouts/vehicle-damage/windshield-options/windshield-damage-type-question/windshield-damage-type-question.vue @@ -20,26 +20,21 @@ import store from "@/store"; export default ({ name: "windshieldDamageTypeQuestion", - data(){ - return { - questionText: String, - answersFromCms: Array - } - }, props: { modelValue: Array, groupName: String, isAvailable: Boolean, suppressError: Boolean, validationRules: String, - }, - methods: { - initializeComponent(cmsContent){ - this.questionText = cmsContent.QuestionText; - this.answersFromCms = cmsContent.Answers; - }, + cmsWidgetName: String, }, computed: { + questionText(){ + return this.getCmsContent(this.cmsWidgetName, 'QuestionText'); + }, + answersFromCms(){ + return this.getCmsContent(this.cmsWidgetName, 'Answers'); + }, selectedValues: { get: function() { return this.modelValue; diff --git a/src/layouts/vehicle-damage/windshield-options/windshield-options.vue b/src/layouts/vehicle-damage/windshield-options/windshield-options.vue index ce940e5a1..7802dfbff 100644 --- a/src/layouts/vehicle-damage/windshield-options/windshield-options.vue +++ b/src/layouts/vehicle-damage/windshield-options/windshield-options.vue @@ -1,6 +1,6 @@