jason/DigitalConsumer.FixMyGlass
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Adding string replace methods to alert widget

Browse source
This commit is contained in:
Max 2022-04-15 16:21:57 -04:00
parent 4e7debe2fb
commit b41db74fd4
5 changed files with 174 additions and 24 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
src/helpers/cms-content-helper.js
View file

@ -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;

2
src/helpers/heritage-integration/navigation-helper.js
View file

@ -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)
}
}

37
src/layouts/license-plate-lookup/license-plate-lookup.vue
View file

@ -27,18 +27,21 @@
<alert
class="my-3"
cmsWidgetName="NoServiceZipWidget"
v-model="customAlertData"
v-if="newServiceZipRequired"
alertClass="alert-danger"
/>
<alert
class="my-3"
cmsWidgetName="NoMatchAlertWidget"
v-model="customAlertData"
v-if="vinNotValid"
alertClass="alert-danger"
/>
<alert
class="my-3"
cmsWidgetName="MatchedDifferentVehicleAlertWidget"
v-model="customAlertData"
v-if="vinDoesNotMatchCarId"
alertClass="alert-warning"
/>
@ -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);

95
src/ux-components/alert/alert.spec.js
View file

@ -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 = {

57
src/ux-components/alert/alert.vue
View file

@ -4,8 +4,16 @@
role="alert"
:class="[isDismissible ? 'alert-dismissible' : '', this.alertClass]"
>
<p class="m-0 fw-bold small alert-heading">{{ alertHeadline }}</p>
<p class="m-0 text-body small">{{ alertCopy }}</p>
<p class="m-0 fw-bold small alert-heading" v-html="alertHeadline"></p>
<p v-if="alertCopy.includes('routerLink:')">
<template v-for="copy in alertCopy.split(/{(.*?)}/g)" :key="copy">
<span v-if="copy.includes('routerLink:')" class="m-0 text-body small">
<router-link :to="{query: {fmgPage: `${copy.split(':')[1].split(',')[0]}`}, name: 'root'}">{{ copy.split(':')[1].split(',')[1] }}</router-link>
</span>
<span v-else class="m-0 text-body small">{{ copy }}</span>
</template>
</p>
<p v-else class="m-0 text-body small">{{ alertCopy }}</p>
<button
type="button"
class="btn-close p-2"
@ -26,6 +34,8 @@
</template>
<script>
import store from "@/store";
export default {
name: "alert",
props: {
@ -41,15 +51,54 @@ export default {
cmsWidgetName: String,
manualHeadline: String,
manualCopy: String,
modelValue: {}
},
computed: {
alertHeadline(){
return this.cmsWidgetName ? this.getCmsContent(this.cmsWidgetName, 'HeadlineText') : this.manualHeadline;
return this.cmsWidgetName ? this.checkForCustomStrings(this.getCmsContent(this.cmsWidgetName, 'HeadlineText')) : this.manualHeadline;
},
alertCopy(){
return this.cmsWidgetName ? this.getCmsContent(this.cmsWidgetName, 'BodyText') : this.manualCopy;
return this.cmsWidgetName ? this.checkForCustomStrings(this.getCmsContent(this.cmsWidgetName, 'BodyText')) : this.manualCopy;
},
},
methods: {
checkForCustomStrings(str){
let returnElement = "";
if(str.includes("{custom:")){
const regexExp = new RegExp("{(.*?)}", "g");
const splitOnSpecialData = str.split(regexExp);
for(const item of splitOnSpecialData){
let itemToAdd;
if(item.includes("custom:")){
const splitItem = item.split(":");
const customDataAttribute = splitItem[1].includes("plateLookup") ? splitItem[1].split("plateLookup")[1].toLowerCase() : splitItem[1];
switch(customDataAttribute){
case "damage":
itemToAdd = store.getters.damage.glassToReplace.length > 1 ? "match" : store.getters.damage.glassToReplace[0].location;
break;
case "zip":
itemToAdd = this.modelValue.zip;
break;
default:
itemToAdd = this.modelValue.vehicleInfo[customDataAttribute];
}
} else if(item.includes("routerLink:")){
itemToAdd = `{${item}}`;
}
else {
itemToAdd = item;
}
returnElement += itemToAdd;
}
} else {
returnElement = str;
}
return returnElement;
}
},
};
</script>