From b0f9a1beffce1f19e89d36117b630a0398f4f75b Mon Sep 17 00:00:00 2001 From: Max Date: Fri, 11 Mar 2022 10:52:36 -0500 Subject: [PATCH 01/12] Creating license plate lookup page --- src/constants/endpoints.js | 4 + src/constants/store-mutations.js | 8 ++ .../license-plate-lookup.vue | 96 +++++++++++++++++++ src/router/router-constants/fmgPage-values.js | 4 +- src/router/router-constants/routing-table.js | 9 ++ src/store/index.js | 39 ++++++++ 6 files changed, 159 insertions(+), 1 deletion(-) create mode 100644 src/layouts/license-plate-lookup/license-plate-lookup.vue diff --git a/src/constants/endpoints.js b/src/constants/endpoints.js index 24e5120bd..780501cc8 100644 --- a/src/constants/endpoints.js +++ b/src/constants/endpoints.js @@ -47,6 +47,10 @@ const endpoints = { url: "/parts/api/v1/parts/parts-or-questions", method: "POST", }, + ValidateZip: { + url: "/location/api/v1/location/zip", + method: "GET", + }, }; export { endpoints }; diff --git a/src/constants/store-mutations.js b/src/constants/store-mutations.js index c07e88bf2..62d839b54 100644 --- a/src/constants/store-mutations.js +++ b/src/constants/store-mutations.js @@ -14,6 +14,14 @@ const storeMutations = { UPDATE_NUMBER_OF_CHIPS: "updateNumberOfChips", UPDATE_GLASS_TO_REPLACE: "updateGlassToReplace", UPDATE_PARTS: "updateParts", + UPDATE_REGISTRATION_ADDRESS: "updateRegistrationAddress", + UPDATE_REGISTRATION_CITY: "updateRegistrationCity", + UPDATE_REGISTRATION_STATE: "updateRegistrationState", + UPDATE_REGISTRATION_ZIP_CODE: "updateRegistrationZipCode", + UPDATE_REGISTRATION_FIRST_NAME: "updateRegistrationFirstName", + UPDATE_REGISTRATION_LAST_NAME: "updateRegistrationLastName", + UPDATE_SERVICE_LOCATION_ZIP: "updateServiceLocationZip", + UPDATE_CUSTOMER_EMAIL_ADDRESS: "updateCustomerEmailAddress", // EVENT BUS MUTATIONS ADD_EVENT_TO_BUS: "addEventToBus", diff --git a/src/layouts/license-plate-lookup/license-plate-lookup.vue b/src/layouts/license-plate-lookup/license-plate-lookup.vue new file mode 100644 index 000000000..5bc2dc640 --- /dev/null +++ b/src/layouts/license-plate-lookup/license-plate-lookup.vue @@ -0,0 +1,96 @@ + + + diff --git a/src/router/router-constants/fmgPage-values.js b/src/router/router-constants/fmgPage-values.js index b648ae047..7e5773187 100644 --- a/src/router/router-constants/fmgPage-values.js +++ b/src/router/router-constants/fmgPage-values.js @@ -7,7 +7,9 @@ const fmgPageValues = { VIN_LOOKUP: "vin-lookup", VEHICLE_PARTS: "vehicle-parts", PART_QUESTIONS: "part-questions", - REVEAL : "reveal", + LICENSE_PLATE_LOOKUP: "license-plate-lookup", + REVEAL: "reveal", + ESTIMATE: "estimate", }; export { fmgPageValues }; diff --git a/src/router/router-constants/routing-table.js b/src/router/router-constants/routing-table.js index 3bd937c41..f3f996031 100644 --- a/src/router/router-constants/routing-table.js +++ b/src/router/router-constants/routing-table.js @@ -97,6 +97,15 @@ const routingTable = [ }, ], }, + { + fmgPageValue: fmgPageValues.LICENSE_PLATE_LOOKUP, + maps: [ + { + scenario: navigationScenarios.CLICKED_BACK, + destinationFmgPageValue: fmgPageValues.ESTIMATE, + }, + ], + }, ]; export { routingTable }; diff --git a/src/store/index.js b/src/store/index.js index a00f550be..3f203056b 100644 --- a/src/store/index.js +++ b/src/store/index.js @@ -19,6 +19,15 @@ export const state = { imageUrl: null, imageVifNumber: null, imageColor: null, + registration: { + licensePlate: null, + address: null, + city: null, + state: null, + zipCode: null, + firstName: null, + lastName: null, + }, }, damage: { isRepair: null, @@ -34,6 +43,12 @@ export const state = { eventBus: [], pageData: {} }, + serviceLocation: { + zip: null, + }, + customer: { + emailAddress: null, + }, } // Export Mutations @@ -81,6 +96,30 @@ export const mutations = { updatePageData(state, pageData){ state.applicationUser.pageData[pageData.page] = pageData.data; }, + updateRegistrationAddress(state, registrationAddress){ + state.order.vehicle.registration.address = registrationAddress; + }, + updateRegistrationCity(state, registrationCity){ + state.order.vehicle.registration.city = registrationCity; + }, + updateRegistrationState(state, registrationState){ + state.order.vehicle.registration.state = registrationState; + }, + updateRegistrationZipCode(state, registrationZipCode){ + state.order.vehicle.registration.zipCode = registrationZipCode; + }, + updateRegistrationFirstName(state, registrationFirstName){ + state.order.vehicle.registration.firstName = registrationFirstName; + }, + updateRegistrationLastName(state, registrationLastName){ + state.order.vehicle.registration.lastName = registrationLastName; + }, + updateServiceLocationZip(state, ServiceLocationZip){ + state.order.vehicle.serviceLocation.zip = ServiceLocationZip; + }, + updateCustomerEmailAddress(state, CustomerEmailAddress){ + state.order.vehicle.customer.emailAddress = CustomerEmailAddress; + }, // EVENT BUS MUTATIONS addEventToBus(state, event) { From 7e42384a7c008efc2923f812b387a75d88ad334f Mon Sep 17 00:00:00 2001 From: Max Date: Mon, 14 Mar 2022 15:16:07 -0400 Subject: [PATCH 02/12] Changes for license plate lookup --- src/constants/store-mutations.js | 2 ++ .../license-plate-lookup.vue | 36 ++++++++++++++----- src/store/index.js | 7 ++++ 3 files changed, 37 insertions(+), 8 deletions(-) diff --git a/src/constants/store-mutations.js b/src/constants/store-mutations.js index 62d839b54..b11873abb 100644 --- a/src/constants/store-mutations.js +++ b/src/constants/store-mutations.js @@ -10,10 +10,12 @@ const storeMutations = { UPDATE_VEHICLE_IMAGE_URL: "updateVehicleImageUrl", UPDATE_VEHICLE_IMAGE_VIF_NUMBER: "updateVehicleImageVifNumber", UPDATE_VEHICLE_IMAGE_COLOR: "updateVehicleImageColor", + UPDATE_VEHICLE_VIN: "updateVehicleVin", UPDATE_IS_REPAIR: "updateIsRepair", UPDATE_NUMBER_OF_CHIPS: "updateNumberOfChips", UPDATE_GLASS_TO_REPLACE: "updateGlassToReplace", UPDATE_PARTS: "updateParts", + UPDATE_REGISTRATION_LICENSE_PLATE : "updateRegistrationLicensePlate", UPDATE_REGISTRATION_ADDRESS: "updateRegistrationAddress", UPDATE_REGISTRATION_CITY: "updateRegistrationCity", UPDATE_REGISTRATION_STATE: "updateRegistrationState", diff --git a/src/layouts/license-plate-lookup/license-plate-lookup.vue b/src/layouts/license-plate-lookup/license-plate-lookup.vue index 5bc2dc640..4c28b9566 100644 --- a/src/layouts/license-plate-lookup/license-plate-lookup.vue +++ b/src/layouts/license-plate-lookup/license-plate-lookup.vue @@ -3,8 +3,8 @@ - - + Date: Wed, 16 Mar 2022 13:14:07 -0400 Subject: [PATCH 03/12] More implementations for license plate lookup --- src/constants/endpoints.js | 4 + src/constants/store-actions.js | 2 + .../license-plate-lookup.vue | 232 +++++++++++------- src/router/router-constants/routing-table.js | 12 + src/store/index.js | 21 +- 5 files changed, 176 insertions(+), 95 deletions(-) diff --git a/src/constants/endpoints.js b/src/constants/endpoints.js index 780501cc8..d62111d9d 100644 --- a/src/constants/endpoints.js +++ b/src/constants/endpoints.js @@ -43,6 +43,10 @@ const endpoints = { url: "/vehicle/api/v1/vehicle/Lookup", method: "POST", }, + LookupVinByPlate: { + url: "/vehicle/api/v1/vehicle/lookup-vin-by-plate", + method: "POST", + }, GetPartsOrQuestions: { url: "/parts/api/v1/parts/parts-or-questions", method: "POST", diff --git a/src/constants/store-actions.js b/src/constants/store-actions.js index e83b44096..23b6330aa 100644 --- a/src/constants/store-actions.js +++ b/src/constants/store-actions.js @@ -11,7 +11,9 @@ const storeActions = { GET_EVOX_IMAGE: "getEvoxImage", LOOKUP_VEHICLE_BY_YMMS: "lookupVehicleByYmms", LOOKUP_VEHICLE_BY_VIN: "lookupVehicleByVin", + LOOKUP_VIN_BY_PLATE: "lookupVinByPlate", GET_PARTS_OR_QUESTIONS: "getPartsOrQuestions", + VALIDATE_ZIP: "validateZip", // DEPENDENCY MUTATIONS RESET_VEHICLE_STATE_AND_DEPENDENCIES: "resetVehicleAndDependencies", diff --git a/src/layouts/license-plate-lookup/license-plate-lookup.vue b/src/layouts/license-plate-lookup/license-plate-lookup.vue index 43680361d..fb2c2bfbf 100644 --- a/src/layouts/license-plate-lookup/license-plate-lookup.vue +++ b/src/layouts/license-plate-lookup/license-plate-lookup.vue @@ -1,15 +1,15 @@ diff --git a/src/router/router-constants/routing-table.js b/src/router/router-constants/routing-table.js index 97353d754..c30afcc7e 100644 --- a/src/router/router-constants/routing-table.js +++ b/src/router/router-constants/routing-table.js @@ -117,6 +117,18 @@ const routingTable = [ scenario: navigationScenarios.CLICKED_BACK, destinationFmgPageValue: fmgPageValues.ESTIMATE, }, + { + scenario: navigationScenarios.CONTINUING_WITH_PARTS_QUESTION, + destinationFmgPageValue: fmgPageValues.PART_QUESTIONS, + }, + { + scenario: navigationScenarios.CONTINUING_WITH_MULTIPLE_PARTS, + destinationFmgPageValue: fmgPageValues.VEHICLE_PARTS, + }, + { + scenario: navigationScenarios.CONTINUING_WITH_SINGLE_PART, + destinationFmgPageValue: fmgPageValues.REVEAL, + }, ], }, ]; diff --git a/src/store/index.js b/src/store/index.js index 19055d449..2cdac764d 100644 --- a/src/store/index.js +++ b/src/store/index.js @@ -50,12 +50,6 @@ export const state = { eventBus: [], pageData: {} }, - serviceLocation: { - zip: null, - }, - customer: { - emailAddress: null, - }, } // Export Mutations @@ -226,6 +220,15 @@ export const actions = { }, }); }, + lookupVinByPlate(context, { plate }) { + return globalMethods.callHttpClient({ + method: endpoints.LookupVinByPlate.method, + endpoint: endpoints.LookupVinByPlate.url, + payload: { + plate: plate, + }, + }); + }, getVehicleMakes(context, { year }) { return globalMethods.callHttpClient({ method: endpoints.GetVehicleMakes.method, @@ -270,6 +273,12 @@ export const actions = { payload: {}, }); }, + validateZip(context, {zip}) { + return globalMethods.callHttpClient({ + methods: endpoints.ValidateZip.method, + endpoint: `${endpoints.ValidateZip.url}/${zip}` + }) + }, // DEPENDENCY ACTIONS resetVehicleAndDependencies(context) { From 52d58bb2ea2b0e5e19e8faef73062bf15b20d4c9 Mon Sep 17 00:00:00 2001 From: Max Date: Tue, 22 Mar 2022 15:19:04 -0400 Subject: [PATCH 04/12] More lpl features --- .../license-plate-lookup.vue | 69 ++++++++++++++----- .../router-constants/navigation-scenarios.js | 5 +- src/store/index.js | 5 +- 3 files changed, 58 insertions(+), 21 deletions(-) diff --git a/src/layouts/license-plate-lookup/license-plate-lookup.vue b/src/layouts/license-plate-lookup/license-plate-lookup.vue index fb2c2bfbf..ffa54cedc 100644 --- a/src/layouts/license-plate-lookup/license-plate-lookup.vue +++ b/src/layouts/license-plate-lookup/license-plate-lookup.vue @@ -3,7 +3,30 @@ - + + + + + + 0){ this.$router.navigateAfterSave(this.navigationScenarios.CONTINUING_WITH_PARTS_QUESTION, this.$route, {}, {}, partsData.data); return; - } else if(!partsData.data.partsOrQuestions.partQuestions.length && partsData.data.partsOrQuestions.parts.length > 1) { + } else if((!partsData.data.partsOrQuestions[0].partQuestions || partsData.data.partsOrQuestions[0].partQuestions.length < 1) && partsData.data.partsOrQuestions[0].parts.length > 1) { this.$router.navigateAfterSave(this.navigationScenarios.CONTINUING_WITH_MULTIPLE_PARTS, this.$route, {}, {}, partsData.data); return; } else { @@ -135,7 +168,7 @@ export default { lookupVin(plate, state) { return baseMixin.methods.dispatchNonBlockingStoreAction( storeActions.LOOKUP_VIN_BY_PLATE, - { plate, state } + { licensePlate: plate, licenseState: state } ); }, updateStore() { @@ -163,7 +196,7 @@ export default { funnelHeader, funnelFooter, vehicleBanner, - textboxQuestion, + alert, funnelSubHeader, }, }; diff --git a/src/router/router-constants/navigation-scenarios.js b/src/router/router-constants/navigation-scenarios.js index 9fd1c6311..e55385943 100644 --- a/src/router/router-constants/navigation-scenarios.js +++ b/src/router/router-constants/navigation-scenarios.js @@ -7,7 +7,10 @@ const navigationScenarios = { SELECTED_PARTS: "SELECTED_PARTS", SELECTED_DAMAGE_WITH_SINGLE_PART: "SELECTED_DAMAGE_WITH_SINGLE_PART", SELECTED_DAMAGE_WITH_MULTIPLE_PARTS: "SELECTED_DAMAGE_WITH_MULTIPLE_PARTS", - SELECTED_DAMAGE_WITH_PART_QUESTIONS: "SELECTED_DAMAGE_WITH_PART_QUESTIONS" + SELECTED_DAMAGE_WITH_PART_QUESTIONS: "SELECTED_DAMAGE_WITH_PART_QUESTIONS", + CONTINUING_WITH_PARTS_QUESTION: "CONTINUING_WITH_PARTS_QUESTION", + CONTINUING_WITH_MULTIPLE_PARTS: "CONTINUING_WITH_MULTIPLE_PARTS", + CONTINUING_WITH_SINGLE_PART: "CONTINUING_WITH_SINGLE_PART" }; export { navigationScenarios }; diff --git a/src/store/index.js b/src/store/index.js index 2cdac764d..18593c897 100644 --- a/src/store/index.js +++ b/src/store/index.js @@ -220,12 +220,13 @@ export const actions = { }, }); }, - lookupVinByPlate(context, { plate }) { + lookupVinByPlate(context, { licensePlate, licenseState }) { return globalMethods.callHttpClient({ method: endpoints.LookupVinByPlate.method, endpoint: endpoints.LookupVinByPlate.url, payload: { - plate: plate, + licensePlate: licensePlate, + licenseState: licenseState }, }); }, From c007430e633e68587940f68321a4dcaec2c8285a Mon Sep 17 00:00:00 2001 From: Max Date: Thu, 24 Mar 2022 15:04:27 -0400 Subject: [PATCH 05/12] Adding validations to lpl --- .../funnel-footer/funnel-footer.vue | 7 + src/constants/error-messages.js | 1 + .../license-plate-lookup.vue | 140 ++++++++++++------ src/layouts/vehicle-damage/vehicle-damage.vue | 2 +- src/ux-components/button-main/button-main.vue | 3 + 5 files changed, 108 insertions(+), 45 deletions(-) diff --git a/src/common-components/funnel-footer/funnel-footer.vue b/src/common-components/funnel-footer/funnel-footer.vue index 44afa5364..c984297ad 100644 --- a/src/common-components/funnel-footer/funnel-footer.vue +++ b/src/common-components/funnel-footer/funnel-footer.vue @@ -18,6 +18,7 @@
-
- - - - - - - - - - -
+
+
+ + + +
+
+ +
+
+
+
+ +
+
+
+
+ +
+
+ + + +
+
+ +
+
+ +
+
diff --git a/src/layouts/vehicle-damage/vehicle-damage.vue b/src/layouts/vehicle-damage/vehicle-damage.vue index 8520e568c..6c285ab94 100644 --- a/src/layouts/vehicle-damage/vehicle-damage.vue +++ b/src/layouts/vehicle-damage/vehicle-damage.vue @@ -5,7 +5,7 @@ ref="theForm" v-slot="{ meta }" > -
+
diff --git a/src/ux-components/button-main/button-main.vue b/src/ux-components/button-main/button-main.vue index a2a7861f6..81aa91928 100644 --- a/src/ux-components/button-main/button-main.vue +++ b/src/ux-components/button-main/button-main.vue @@ -32,6 +32,9 @@ export default { }; }, methods: { + removeLoader(){ + this.isLoaderDisplayed = false; + }, clicked() { if (!this.isDisabled) { this.isLoaderDisplayed = true; From a2008021c7b468ed74c551b9a5ec6f33557c1602 Mon Sep 17 00:00:00 2001 From: Max Date: Fri, 25 Mar 2022 16:22:15 -0400 Subject: [PATCH 06/12] Changing cms retrieval methods --- .../textbox-question/textbox-question.vue | 6 +++++- .../license-plate-lookup/license-plate-lookup.vue | 10 ++++++---- src/mixins/base-mixin.js | 10 +++++++++- 3 files changed, 20 insertions(+), 6 deletions(-) diff --git a/src/common-components/textbox-question/textbox-question.vue b/src/common-components/textbox-question/textbox-question.vue index f4a7d2afc..bab1664f0 100644 --- a/src/common-components/textbox-question/textbox-question.vue +++ b/src/common-components/textbox-question/textbox-question.vue @@ -51,6 +51,7 @@ export default { default: '', }, validationRules: String, + cmsWidgetName: String, }, setup(props) { const fieldOptions = { @@ -85,6 +86,9 @@ export default { }, }, computed: { + questionTextNew(){ + return this.getCmsContent(this.cmsWidgetName).QuestionText ? this.getCmsContent(this.cmsWidgetName).QuestionText : ''; + }, value: { get: function() { return this.modelValue; @@ -95,7 +99,7 @@ export default { }, labelText: { get: function () { - let labelText = this.questionText; + let labelText = this.questionTextNew; if (this.disableAutoFill) { var noBreakChar = "⁠"; var position = 1; diff --git a/src/layouts/license-plate-lookup/license-plate-lookup.vue b/src/layouts/license-plate-lookup/license-plate-lookup.vue index f34a674e3..af3be061c 100644 --- a/src/layouts/license-plate-lookup/license-plate-lookup.vue +++ b/src/layouts/license-plate-lookup/license-plate-lookup.vue @@ -11,7 +11,7 @@
- +
@@ -47,7 +47,7 @@ />
- +
{ + vm.setCmsContent(resultMap); vm.$refs.funnelHeader.initializeComponent( resultMap.cmsContent.FunnelHeaderWidget ); @@ -127,8 +129,8 @@ export default { ); vm.noServiceZipWidget = { headline: resultMap.cmsContent.NoServiceZipWidget.HeadlineText, - copy: resultMap.cmsContent.NoServiceZipWidget.BodyText - }; + copy: resultMap.cmsContent.NoServiceZipWidget.BodyText, + }; vm.noMatchAlertWidget = { headline: resultMap.cmsContent.NoMatchAlertWidget.HeadlineText, copy: resultMap.cmsContent.NoMatchAlertWidget.BodyText diff --git a/src/mixins/base-mixin.js b/src/mixins/base-mixin.js index f54909d06..5b66b5016 100644 --- a/src/mixins/base-mixin.js +++ b/src/mixins/base-mixin.js @@ -7,9 +7,17 @@ import { vehicleCategories } from "@/constants/vehicle-categories.js"; export default { data() { - return {}; + return { + cmsContentByWidget: {} + }; }, methods: { + setCmsContent(cmsContent){ + this.$root.cmsContentByWidget = cmsContent; + }, + getCmsContent(widgetName){ + return this.$root === undefined ? null : this.$root.cmsContentByWidget.cmsContent[widgetName]; + }, dispatchNonBlockingStoreAction(type, payload, encodePayload = true) { // Encode the payload if required if (encodePayload) { From ab93eb4d2d3ffff01aa2e07142799b774c826d17 Mon Sep 17 00:00:00 2001 From: Max Date: Tue, 29 Mar 2022 09:08:38 -0400 Subject: [PATCH 07/12] Changing initialize component to getcmscontent for retrieval of all cms content --- .../funnel-footer/funnel-footer.vue | 15 ++++--- .../funnel-header/funnel-header.vue | 12 +++--- .../funnel-sub-header/funnel-sub-header.vue | 19 ++++---- .../textbox-question/textbox-question.vue | 16 ++----- .../vehicle-banner/vehicle-banner.vue | 43 ++++++++++--------- .../license-plate-lookup.vue | 38 ++++------------ src/layouts/reveal/reveal.vue | 11 ++--- .../damage-location-question.vue | 13 +++--- .../replace-options-question.vue | 15 ++++--- .../side-door-options/side-door-options.vue | 24 +++++------ src/layouts/vehicle-damage/vehicle-damage.vue | 33 ++++++-------- .../windshield-chip-count-question.vue | 19 ++++---- .../windshield-damage-type-question.vue | 19 +++----- .../windshield-options/windshield-options.vue | 15 +++---- .../make-question/make-question.vue | 8 ++-- src/layouts/vehicle-make/vehicle-make.vue | 19 +++----- .../model-question/model-question.vue | 8 ++-- src/layouts/vehicle-model/vehicle-model.vue | 19 +++----- src/layouts/vehicle-parts/vehicle-parts.vue | 22 +++------- .../style-question/style-question.vue | 8 ++-- src/layouts/vehicle-style/vehicle-style.vue | 19 +++----- src/layouts/vehicle-year/vehicle-year.vue | 19 +++----- .../year-question/year-question.vue | 9 ++-- src/mixins/base-mixin.js | 4 +- 24 files changed, 169 insertions(+), 258 deletions(-) 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 @@