From 6db315e01af0cfbc88d8eab835ab21d6d992d25f Mon Sep 17 00:00:00 2001 From: Max Date: Fri, 8 Apr 2022 09:25:04 -0400 Subject: [PATCH 1/7] Fixing up part question widget retrieval --- .../heritage-integration/navigation-helper.js | 2 +- .../license-plate-lookup.vue | 4 +++- src/layouts/part-questions/part-questions.vue | 23 ++++++------------- .../windshield-options/windshield-options.vue | 1 + 4 files changed, 12 insertions(+), 18 deletions(-) diff --git a/src/helpers/heritage-integration/navigation-helper.js b/src/helpers/heritage-integration/navigation-helper.js index 77d6abe92..d9d231541 100644 --- a/src/helpers/heritage-integration/navigation-helper.js +++ b/src/helpers/heritage-integration/navigation-helper.js @@ -43,7 +43,7 @@ export async function getPageToRouteExistingOrderTo(toRoute = {}, existingHerita return 'vehicle-damage' } else { if (store.getters.vehicle.vin) { - return 'vehicle-damage'; + return 'heritage'; //return "vin-lookup"; (uncomment) } else { return 'vehicle-damage'; diff --git a/src/layouts/license-plate-lookup/license-plate-lookup.vue b/src/layouts/license-plate-lookup/license-plate-lookup.vue index 1f99a38bc..b535bbcdb 100644 --- a/src/layouts/license-plate-lookup/license-plate-lookup.vue +++ b/src/layouts/license-plate-lookup/license-plate-lookup.vue @@ -80,6 +80,7 @@ import { storeMutations } from "@/constants/store-mutations"; import { errorMessages } from "@/constants/error-messages"; import { required, regex } from "@/helpers/validation-rules"; import { Form, defineRule } from "vee-validate"; +import { navigateToHeritageFunnel } from "@/helpers/heritage-integration/navigation-helper"; // DEFINE VALIDATION RULES defineRule("license-plate-required", required(errorMessages.LICENSE_PLATE_REQUIRED)); @@ -188,7 +189,8 @@ export default { this.$router.navigateAfterSave(this.navigationScenarios.CONTINUING_WITH_MULTIPLE_PARTS, this.$route, {}, {}, partsData.data); return; } else { - this.$router.navigate(this.navigationScenarios.CONTINUING_WITH_SINGLE_PART, this.$route); + navigateToHeritageFunnel(); + return; } }, validateZip(zip) { diff --git a/src/layouts/part-questions/part-questions.vue b/src/layouts/part-questions/part-questions.vue index c1b9142bd..0cb64dcbc 100644 --- a/src/layouts/part-questions/part-questions.vue +++ b/src/layouts/part-questions/part-questions.vue @@ -1,10 +1,12 @@ @@ -49,18 +51,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.vehicleBanner.initializeComponent( - resultMap.cmsContent.VehicleBannerWidget - ); - vm.$refs.funnelSubHeader.initializeComponent( - resultMap.cmsContent.FunnelSubHeaderWidget - ); - vm.$refs.funnelFooter.initializeComponent( - resultMap.cmsContent.FunnelFooterWidget - ); + vm.setCmsContent(resultMap.cmsContent); }); }, methods: { diff --git a/src/layouts/vehicle-damage/windshield-options/windshield-options.vue b/src/layouts/vehicle-damage/windshield-options/windshield-options.vue index 7802dfbff..584242a37 100644 --- a/src/layouts/vehicle-damage/windshield-options/windshield-options.vue +++ b/src/layouts/vehicle-damage/windshield-options/windshield-options.vue @@ -102,6 +102,7 @@ export default ({ initializeComponent( windshieldAvailableReplacementOptions){ this.windshieldAvailableReplacementOptions = windshieldAvailableReplacementOptions; + this.$refs.replaceOptionsQuestion.initializeComponent(windshieldAvailableReplacementOptions); }, getWindshieldOptions(selectedWindshieldDamageType, selectedWindshieldChipCount, selectedWindshieldReplaceOptions){ // ONLY UPDATE THE NEW VALUE IF IT IS TRUTHY (NOT NULL) From b16beff2d7689ed8f0d4a11f335659267e4c1def Mon Sep 17 00:00:00 2001 From: Max Date: Mon, 11 Apr 2022 13:28:08 -0400 Subject: [PATCH 2/7] Adding navigation scenarios --- .../heritage-integration/navigation-helper.js | 4 +- .../license-plate-lookup.vue | 57 ++++++++++++------- 2 files changed, 38 insertions(+), 23 deletions(-) diff --git a/src/helpers/heritage-integration/navigation-helper.js b/src/helpers/heritage-integration/navigation-helper.js index d9d231541..d72b78964 100644 --- a/src/helpers/heritage-integration/navigation-helper.js +++ b/src/helpers/heritage-integration/navigation-helper.js @@ -43,10 +43,10 @@ export async function getPageToRouteExistingOrderTo(toRoute = {}, existingHerita return 'vehicle-damage' } else { if (store.getters.vehicle.vin) { - return 'heritage'; + return 'vehicle-damage'; //return "vin-lookup"; (uncomment) } else { - return 'vehicle-damage'; + return 'license-plate-lookup'; //return "estimate" (uncomment) } } diff --git a/src/layouts/license-plate-lookup/license-plate-lookup.vue b/src/layouts/license-plate-lookup/license-plate-lookup.vue index 2f6782a40..9d447e848 100644 --- a/src/layouts/license-plate-lookup/license-plate-lookup.vue +++ b/src/layouts/license-plate-lookup/license-plate-lookup.vue @@ -105,6 +105,7 @@ export default { // Call the "next" function to complete the transition to this page. next((vm) => { vm.setCmsContent(resultMap.cmsContent); + console.log(store.state) }); }, props: { @@ -142,25 +143,39 @@ export default { this.newServiceZipRequired = true; return; } - const vinLookup = await this.lookupVin(this.licensePlate, zipValidation.data.state).catch(() => { + const vinLookup = await this.lookupVin(this.licensePlate, zipValidation.data.state).catch((err) => { + console.log(err) this.$refs.funnelFooter.removeLoader(); this.vinNotValid = true; return; }); - if (vinLookup.data.vehicle.carId !== store.getters.vehicle.carId) { + if (vinLookup.data.vehicle.carId !== store.getters.vehicle.carId && !this.vinDoesNotMatchCarId) { this.$refs.funnelFooter.updateButtonText(`Continue with ${vinLookup.data.vin} ${vinLookup.data.vehicle.year} ${vinLookup.data.vehicle.make} ${vinLookup.data.vehicle.model}`); this.$refs.funnelFooter.removeLoader(); this.vinDoesNotMatchCarId = true; return; } + let vin; + let carInfo; + + if(this.vinDoesNotMatchCarId) { + vin = vinLookup.data.vin; + carInfo = vinLookup.data.vehicle; + } else { + vin = store.getters.vehicle.vin; + carInfo = store.getters.vehicle; + } + + this.updateStore(vin, carInfo, zipValidation.data.state); + const partsData = await baseMixin.methods.dispatchNonBlockingStoreAction( this.storeActions.GET_PARTS_OR_QUESTIONS, { - carId: store.getters.vehicle.carId, + carId: carInfo.carId, glassArray: store.getters.damage.glassToReplace, - zipCode: this.zip, - vin: vinLookup.vin + zipCode: this.serviceZip ? this.serviceZip : this.zip, + vin: vin }, false ); @@ -190,25 +205,25 @@ export default { { licensePlate: plate, licenseState: state } ); }, - updateStore() { + updateStore(vin, carInfo, registrationState) { // if(vehicleDamage){ // store.dispatch(storeActions.RESET_DAMAGE_STATE_AND_DEPENDENCIES); // } - store.commit(storeMutations.UPDATE_VEHICLE_VIN, null); - store.commit(storeMutations.UPDATE_YEAR, null); - store.commit(storeMutations.UPDATE_MAKE, null); - store.commit(storeMutations.UPDATE_MODEL, null); - store.commit(storeMutations.UPDATE_STYLE, null); - store.commit(storeMutations.UPDATE_CAR_ID, null); - store.commit(storeMutations.UPDATE_VEHICLE_CATEGORY, null); - store.commit(storeMutations.UPDATE_VEHICLE_IMAGE_URL, null); - store.commit(storeMutations.UPDATE_VEHICLE_IMAGE_VIF_NUMBER, null); - store.commit(storeMutations.UPDATE_VEHICLE_IMAGE_COLOR, null); - store.commit(storeMutations.UPDATE_REGISTRATION_LICENSE_PLATE, null); - store.commit(storeMutations.UPDATE_REGISTRATION_STATE, null); - store.commit(storeMutations.UPDATE_REGISTRATION_ZIP_CODE, null); - store.commit(storeMutations.UPDATE_SERVICE_LOCATION_ZIP, null); - store.commit(storeMutations.UPDATE_CUSTOMER_EMAIL_ADDRESS, null); + store.commit(storeMutations.UPDATE_VEHICLE_VIN, vin); + store.commit(storeMutations.UPDATE_YEAR, carInfo.year); + store.commit(storeMutations.UPDATE_MAKE, carInfo.make); + store.commit(storeMutations.UPDATE_MODEL, carInfo.model); + store.commit(storeMutations.UPDATE_STYLE, carInfo.style); + store.commit(storeMutations.UPDATE_CAR_ID, carInfo.carId); + store.commit(storeMutations.UPDATE_VEHICLE_CATEGORY, carInfo.category); + store.commit(storeMutations.UPDATE_VEHICLE_IMAGE_URL, carInfo.imageUrl); + store.commit(storeMutations.UPDATE_VEHICLE_IMAGE_VIF_NUMBER, carInfo.imageVifNumber); + store.commit(storeMutations.UPDATE_VEHICLE_IMAGE_COLOR, carInfo.imageColor); + store.commit(storeMutations.UPDATE_REGISTRATION_LICENSE_PLATE, this.licensePlate); + store.commit(storeMutations.UPDATE_REGISTRATION_STATE, registrationState); + store.commit(storeMutations.UPDATE_REGISTRATION_ZIP_CODE, this.zip); + store.commit(storeMutations.UPDATE_SERVICE_LOCATION_ZIP, this.serviceZip); + store.commit(storeMutations.UPDATE_CUSTOMER_EMAIL_ADDRESS, this.email); }, }, components: { From 4e7debe2fb0ccc17daf612e8fc1a993e1adead02 Mon Sep 17 00:00:00 2001 From: Max Date: Tue, 12 Apr 2022 11:10:39 -0400 Subject: [PATCH 3/7] Updates to lpl page --- src/layouts/license-plate-lookup/license-plate-lookup.vue | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/src/layouts/license-plate-lookup/license-plate-lookup.vue b/src/layouts/license-plate-lookup/license-plate-lookup.vue index 9d447e848..8c9c4976c 100644 --- a/src/layouts/license-plate-lookup/license-plate-lookup.vue +++ b/src/layouts/license-plate-lookup/license-plate-lookup.vue @@ -105,7 +105,7 @@ export default { // Call the "next" function to complete the transition to this page. next((vm) => { vm.setCmsContent(resultMap.cmsContent); - console.log(store.state) + console.log(resultMap.cmsContent) }); }, props: { @@ -143,8 +143,7 @@ export default { this.newServiceZipRequired = true; return; } - const vinLookup = await this.lookupVin(this.licensePlate, zipValidation.data.state).catch((err) => { - console.log(err) + const vinLookup = await this.lookupVin(this.licensePlate, zipValidation.data.state).catch(() => { this.$refs.funnelFooter.removeLoader(); this.vinNotValid = true; return; From b41db74fd4a633f9c93500f0c52084de6100333d Mon Sep 17 00:00:00 2001 From: Max Date: Fri, 15 Apr 2022 16:21:57 -0400 Subject: [PATCH 4/7] Adding string replace methods to alert widget --- src/helpers/cms-content-helper.js | 7 +- .../heritage-integration/navigation-helper.js | 2 +- .../license-plate-lookup.vue | 37 ++++---- src/ux-components/alert/alert.spec.js | 95 ++++++++++++++++++- src/ux-components/alert/alert.vue | 57 ++++++++++- 5 files changed, 174 insertions(+), 24 deletions(-) diff --git a/src/helpers/cms-content-helper.js b/src/helpers/cms-content-helper.js index 3bd5319b5..d19bde189 100644 --- a/src/helpers/cms-content-helper.js +++ b/src/helpers/cms-content-helper.js @@ -40,12 +40,15 @@ export function fetchCmsContentForPage(fmgPage) { function mapStringToState(str) { // Pull all matches out of the string. const regexExp = new RegExp("{(.*?):(.*?)}", "g"); - const matches = [...str.matchAll(regexExp)]; + const regexMatches = [...str.matchAll(regexExp)]; + const globalStateMatches = regexMatches.filter(match => { + return match[1] === "globalState"; + }) // Our final string value that will be built from the matches. let stringBuilder = ""; - for (const match of matches) { + for (const match of globalStateMatches) { // Reset store state for each match. let storeState = store.state; diff --git a/src/helpers/heritage-integration/navigation-helper.js b/src/helpers/heritage-integration/navigation-helper.js index d72b78964..77d6abe92 100644 --- a/src/helpers/heritage-integration/navigation-helper.js +++ b/src/helpers/heritage-integration/navigation-helper.js @@ -46,7 +46,7 @@ export async function getPageToRouteExistingOrderTo(toRoute = {}, existingHerita return 'vehicle-damage'; //return "vin-lookup"; (uncomment) } else { - return 'license-plate-lookup'; + return 'vehicle-damage'; //return "estimate" (uncomment) } } diff --git a/src/layouts/license-plate-lookup/license-plate-lookup.vue b/src/layouts/license-plate-lookup/license-plate-lookup.vue index 8c9c4976c..e1cb88150 100644 --- a/src/layouts/license-plate-lookup/license-plate-lookup.vue +++ b/src/layouts/license-plate-lookup/license-plate-lookup.vue @@ -27,18 +27,21 @@ @@ -105,7 +108,6 @@ export default { // Call the "next" function to complete the transition to this page. next((vm) => { vm.setCmsContent(resultMap.cmsContent); - console.log(resultMap.cmsContent) }); }, props: { @@ -120,6 +122,7 @@ export default { zip: '', email: '', serviceZip: '', + customAlertData: {} }; }, methods: { @@ -139,6 +142,7 @@ export default { async forwardButtonAction() { const zipValidation = this.serviceZip ? await this.validateZip(this.serviceZip) : await this.validateZip(this.zip); if (!zipValidation.data.isServiceable) { + this.customAlertData.zip = this.zip; this.$refs.funnelFooter.removeLoader(); this.newServiceZipRequired = true; return; @@ -149,6 +153,7 @@ export default { return; }); if (vinLookup.data.vehicle.carId !== store.getters.vehicle.carId && !this.vinDoesNotMatchCarId) { + this.customAlertData.vehicleInfo = vinLookup.data.vehicle; this.$refs.funnelFooter.updateButtonText(`Continue with ${vinLookup.data.vin} ${vinLookup.data.vehicle.year} ${vinLookup.data.vehicle.make} ${vinLookup.data.vehicle.model}`); this.$refs.funnelFooter.removeLoader(); this.vinDoesNotMatchCarId = true; @@ -156,22 +161,22 @@ export default { } let vin; - let carInfo; + let vehicleInfo; if(this.vinDoesNotMatchCarId) { vin = vinLookup.data.vin; - carInfo = vinLookup.data.vehicle; + vehicleInfo = vinLookup.data.vehicle; } else { vin = store.getters.vehicle.vin; - carInfo = store.getters.vehicle; + vehicleInfo = store.getters.vehicle; } - this.updateStore(vin, carInfo, zipValidation.data.state); + this.updateStore(vin, vehicleInfo, zipValidation.data.state); const partsData = await baseMixin.methods.dispatchNonBlockingStoreAction( this.storeActions.GET_PARTS_OR_QUESTIONS, { - carId: carInfo.carId, + carId: vehicleInfo.carId, glassArray: store.getters.damage.glassToReplace, zipCode: this.serviceZip ? this.serviceZip : this.zip, vin: vin @@ -204,20 +209,20 @@ export default { { licensePlate: plate, licenseState: state } ); }, - updateStore(vin, carInfo, registrationState) { + updateStore(vin, vehicleInfo, registrationState) { // if(vehicleDamage){ // store.dispatch(storeActions.RESET_DAMAGE_STATE_AND_DEPENDENCIES); // } store.commit(storeMutations.UPDATE_VEHICLE_VIN, vin); - store.commit(storeMutations.UPDATE_YEAR, carInfo.year); - store.commit(storeMutations.UPDATE_MAKE, carInfo.make); - store.commit(storeMutations.UPDATE_MODEL, carInfo.model); - store.commit(storeMutations.UPDATE_STYLE, carInfo.style); - store.commit(storeMutations.UPDATE_CAR_ID, carInfo.carId); - store.commit(storeMutations.UPDATE_VEHICLE_CATEGORY, carInfo.category); - store.commit(storeMutations.UPDATE_VEHICLE_IMAGE_URL, carInfo.imageUrl); - store.commit(storeMutations.UPDATE_VEHICLE_IMAGE_VIF_NUMBER, carInfo.imageVifNumber); - store.commit(storeMutations.UPDATE_VEHICLE_IMAGE_COLOR, carInfo.imageColor); + store.commit(storeMutations.UPDATE_YEAR, vehicleInfo.year); + store.commit(storeMutations.UPDATE_MAKE, vehicleInfo.make); + store.commit(storeMutations.UPDATE_MODEL, vehicleInfo.model); + store.commit(storeMutations.UPDATE_STYLE, vehicleInfo.style); + store.commit(storeMutations.UPDATE_CAR_ID, vehicleInfo.carId); + store.commit(storeMutations.UPDATE_VEHICLE_CATEGORY, vehicleInfo.category); + store.commit(storeMutations.UPDATE_VEHICLE_IMAGE_URL, vehicleInfo.imageUrl); + store.commit(storeMutations.UPDATE_VEHICLE_IMAGE_VIF_NUMBER, vehicleInfo.imageVifNumber); + store.commit(storeMutations.UPDATE_VEHICLE_IMAGE_COLOR, vehicleInfo.imageColor); store.commit(storeMutations.UPDATE_REGISTRATION_LICENSE_PLATE, this.licensePlate); store.commit(storeMutations.UPDATE_REGISTRATION_STATE, registrationState); store.commit(storeMutations.UPDATE_REGISTRATION_ZIP_CODE, this.zip); diff --git a/src/ux-components/alert/alert.spec.js b/src/ux-components/alert/alert.spec.js index 8072f8d73..b7a800913 100644 --- a/src/ux-components/alert/alert.spec.js +++ b/src/ux-components/alert/alert.spec.js @@ -1,4 +1,5 @@ -import { shallowMount } from "@vue/test-utils"; +import { shallowMount } from "@vue/test-utils"; +import { createStore } from 'vuex' import alert from "./alert"; describe("alert.vue", () => { @@ -9,6 +10,13 @@ describe("alert.vue", () => { propsData: { isDismissible: true }, + computed: { + alertCopy: { + get() { + return "TEST"; + }, + } + }, mixins: [mockMixin] }); @@ -24,6 +32,13 @@ describe("alert.vue", () => { propsData: { alertClass: 'warning' }, + computed: { + alertCopy: { + get() { + return "TEST"; + }, + } + }, mixins: [mockMixin] }); @@ -33,6 +48,84 @@ describe("alert.vue", () => { expect(wrapperDiv.classes()).toContain('warning') }); + it("Should return original string if no custom string notations added", async () => { + // Arrange + const wrapper = shallowMount(alert, { + computed: { + alertCopy: { + get() { + return "TEST"; + }, + } + }, + mixins: [mockMixin] + }); + + const stringWithNoCustomAtrributes = wrapper.vm.checkForCustomStrings("Test string") + + // Assert + expect(stringWithNoCustomAtrributes).toEqual("Test string") + }); + + it("Should return link when custom string notation with 'routerLink' included", async () => { + // Arrange + const wrapper = shallowMount(alert, { + computed: { + alertCopy: { + get() { + return "TEST"; + }, + } + }, + mixins: [mockMixin] + }); + + const stringWithNoCustomAtrributes = wrapper.vm.checkForCustomStrings("{routerLink:clickedChangeVinLookupMethod,provide your VIN}") + + // Assert + expect(stringWithNoCustomAtrributes).toEqual("{routerLink:clickedChangeVinLookupMethod,provide your VIN}") + }); + + it("Should return zip when custom string notation with 'custom' for zip is called.", async () => { + // Arrange + const wrapper = shallowMount(alert, { + propsData: {modelValue: {zip: "12345"}}, + computed: { + alertCopy: { + get() { + return "TEST"; + }, + } + }, + mixins: [mockMixin] + }); + + const stringWithNoCustomAtrributes = wrapper.vm.checkForCustomStrings("{custom:zip}") + + // Assert + expect(stringWithNoCustomAtrributes).toEqual("12345") + }); + + it("Should return custom datum specified when custom string notation with 'custom' for lookup is called.", async () => { + // Arrange + const wrapper = shallowMount(alert, { + propsData: {modelValue: {vehicleInfo: {year: "2020"}}}, + computed: { + alertCopy: { + get() { + return "TEST"; + }, + } + }, + mixins: [mockMixin] + }); + + const stringWithNoCustomAtrributes = wrapper.vm.checkForCustomStrings("{custom:plateLookupYear}") + + // Assert + expect(stringWithNoCustomAtrributes).toEqual("2020") + }); + }); const mockMixin = { diff --git a/src/ux-components/alert/alert.vue b/src/ux-components/alert/alert.vue index 515658e16..f341334fa 100644 --- a/src/ux-components/alert/alert.vue +++ b/src/ux-components/alert/alert.vue @@ -4,8 +4,16 @@ role="alert" :class="[isDismissible ? 'alert-dismissible' : '', this.alertClass]" > -

{{ alertHeadline }}

-

{{ alertCopy }}

+

+

+ +

+

{{ alertCopy }}