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

Updating ways special strings are parsed

Browse source
This commit is contained in:
Max 2022-04-19 10:26:31 -04:00
parent 7150f5fd9b
commit 18710d1469
9 changed files with 75 additions and 124 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/common-components/textbox-question/textbox-question.vue
View file

@ -1,5 +1,5 @@
<template>
<div class="textbox-question" :class="(errors.length > 0 || hasError) ? 'has-error' : ''">
<div class="textbox-question" :class="(hasError) ? 'has-error' : ''">
<label :for="inputId" :aria-label="questionText" class="form-label" v-html="labelText"></label>
<input v-model="value"
v-maska="mask"

7
src/constants/magic-strings.js Normal file
View file

@ -0,0 +1,7 @@
const magicStrings = {
GLOBAL_STATE: "globalState",
CUSTOM: "custom",
ROUTER_LINK: "routerLink"
};
export { magicStrings };

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

@ -1,5 +1,6 @@
import { storeActions } from "@/constants/store-actions.js";
import store from "@/store";
import { magicStrings } from "../constants/magic-strings";
export function fetchCmsContentForPage(fmgPage) {
return store
@ -42,7 +43,7 @@ function mapStringToState(str) {
const regexExp = new RegExp("{(.*?):(.*?)}", "g");
const regexMatches = [...str.matchAll(regexExp)];
const globalStateMatches = regexMatches.filter(match => {
return match[1] === "globalState";
return match[1] === magicStrings.GLOBAL_STATE;
})
// Our final string value that will be built from the matches.
@ -63,7 +64,7 @@ function mapStringToState(str) {
const stringWithReplacement = str.replace(match[0], storeState);
// If we still have values we need to substitute, call this function again.
if (stringWithReplacement.includes("{globalState:")) {
if (stringWithReplacement.includes(magicStrings.GLOBAL_STATE)) {
return mapStringToState(stringWithReplacement);
}
@ -99,7 +100,7 @@ function findAndReplaceGlobalStateValues(widgetModel, widgetName) {
function processWidgetItemForReplacement(widgetModel, key) {
// If we have a string, and it needs to be replaced.
if (typeof widgetModel[key] === "string") {
if (widgetModel[key].includes("{globalState:")) {
if (widgetModel[key].includes(magicStrings.GLOBAL_STATE)) {
widgetModel[key] = mapStringToState(widgetModel[key]);
}
return widgetModel[key];
@ -119,4 +120,4 @@ function processWidgetItemForReplacement(widgetModel, key) {
// If we have something else like a number, boolean, etc. just return it
return widgetModel[key];
}
}

5
src/helpers/damage-helper.js Normal file
View file

@ -0,0 +1,5 @@
import store from "@/store";
export function getDamageString() {
return store.getters.damage.glassToReplace.length > 1 ? "match" : store.getters.damage.glassToReplace[0].location;
}

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

@ -43,10 +43,10 @@ export async function getPageToRouteExistingOrderTo(toRoute = {}, existingHerita
return 'vehicle-damage'
} else {
if (store.getters.vehicle.vin) {
return 'vehicle-damage';
return 'license-plate-lookup';
//return "vin-lookup"; (uncomment)
} else {
return 'vehicle-damage';
return 'license-plate-lookup';
//return "estimate" (uncomment)
}
}
@ -66,6 +66,9 @@ export async function navigateToHeritageFunnel() {
{
corid: store.getters.order.referralCorrelationId,
src: "concept-funnel",
// TODO CSR-28, remove this
cns: "all",
experiments: "RemoveServiceAreaPage=ServAreaRemoval_V7=NoShowPackages_CONTROL=true,ConceptFunnel=ConceptFunnel_V1=ConceptFunnel_TEST=true"
}
);
}

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

@ -26,22 +26,21 @@
</div>
<alert
class="my-3"
cmsWidgetName="NoServiceZipWidget"
v-model="customAlertData"
:manualHeadline="NoServiceZipHeader"
:manualCopy="NoServiceZipBody"
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"
:manualHeadline="MatchedDifferentVehicleAlertHeader"
:manualCopy="MatchedDifferentVehicleAlertBody"
v-if="vinDoesNotMatchCarId"
alertClass="alert-warning"
/>
@ -78,6 +77,7 @@ import baseMixin from "@/mixins/base-mixin.js";
import { storeActions } from "@/constants/store-actions";
import { storeMutations } from "@/constants/store-mutations";
import { errorMessages } from "@/constants/error-messages";
import { getDamageString } from "@/helpers/damage-helper";
import { required, regex } from "@/helpers/validation-rules";
import { Form, defineRule } from "vee-validate";
import { navigateToHeritageFunnel } from "@/helpers/heritage-integration/navigation-helper";
@ -125,6 +125,35 @@ export default {
customAlertData: {}
};
},
computed: {
MatchedDifferentVehicleAlertHeader(){
let text = this.getCmsContent("MatchedDifferentVehicleAlertWidget", "HeadlineText");
// Replace all instances where custom data is implemented
text = text.replaceAll("{custom:damage}", getDamageString());
return text;
},
MatchedDifferentVehicleAlertBody(){
let text = this.getCmsContent("MatchedDifferentVehicleAlertWidget", "BodyText");
// Replace all instances where custom data is implemented
text = text.replaceAll("{custom:damage}", getDamageString());
text = text.replaceAll("{custom:plateLookupYear}", this.customAlertData?.vehicleInfo?.year);
text = text.replaceAll("{custom:plateLookupMake}", this.customAlertData?.vehicleInfo?.make);
text = text.replaceAll("{custom:plateLookupModel}", this.customAlertData?.vehicleInfo?.model);
return text;
},
NoServiceZipHeader(){
let text = this.getCmsContent("NoServiceZipWidget", "HeadlineText");
// Replace all instances where custom data is implemented
text = text.replaceAll("{custom:zip}", this.zip);
return text;
},
NoServiceZipBody(){
return this.getCmsContent("NoServiceZipWidget", "BodyText");
}
},
methods: {
arePagePrerequisitesValid() {
return store.getters.vehicle.carId !== null;
@ -171,7 +200,7 @@ export default {
vehicleInfo = store.getters.vehicle;
}
this.updateStore(vin, vehicleInfo, zipValidation.data.state);
this.updateCustomerInfo(vin, vehicleInfo, zipValidation.data.state);
const partsData = await baseMixin.methods.dispatchNonBlockingStoreAction(
this.storeActions.GET_PARTS_OR_QUESTIONS,
@ -209,7 +238,7 @@ export default {
{ licensePlate: plate, licenseState: state }
);
},
updateStore(vin, vehicleInfo, registrationState) {
updateCustomerInfo(vin, vehicleInfo, registrationState) {
// if(vehicleDamage){
// store.dispatch(storeActions.RESET_DAMAGE_STATE_AND_DEPENDENCIES);
// }

2
src/layouts/part-questions/part-questions.vue
View file

@ -5,7 +5,7 @@
<funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" />
<h1>Part Questions Page Placeholder</h1>
<funnel-footer
cmsWidgetName="FunnelFooterWidget"
cmsWidgetName="FunnelFooterWidget" @back-clicked="backButtonAction"
/>
</div>
</template>

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

@ -1,5 +1,4 @@
import { shallowMount } from "@vue/test-utils";
import { createStore } from 'vuex'
import alert from "./alert";
describe("alert.vue", () => {
@ -11,7 +10,7 @@ describe("alert.vue", () => {
isDismissible: true
},
computed: {
alertCopy: {
splitAlertCopyForLink: {
get() {
return "TEST";
},
@ -33,7 +32,7 @@ describe("alert.vue", () => {
alertClass: 'warning'
},
computed: {
alertCopy: {
splitAlertCopyForLink: {
get() {
return "TEST";
},
@ -48,9 +47,10 @@ describe("alert.vue", () => {
expect(wrapperDiv.classes()).toContain('warning')
});
it("Should return original string if no custom string notations added", async () => {
it("Should update headline when manual headline added", async () => {
// Arrange
const wrapper = shallowMount(alert, {
computed: {
alertCopy: {
get() {
@ -61,69 +61,11 @@ describe("alert.vue", () => {
mixins: [mockMixin]
});
const stringWithNoCustomAtrributes = wrapper.vm.checkForCustomStrings("Test string")
await wrapper.vm.$nextTick();
const wrapperDiv = wrapper.find('.text-body');
// 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")
expect(wrapperDiv.text()).toEqual('TEST')
});
});

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

@ -4,9 +4,9 @@
role="alert"
:class="[isDismissible ? 'alert-dismissible' : '', this.alertClass]"
>
<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">
<p class="m-0 fw-bold small alert-heading">{{ alertHeadline }}</p>
<p v-if="splitAlertCopyForLink.length">
<template v-for="copy in splitAlertCopyForLink" :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>
@ -34,7 +34,6 @@
</template>
<script>
import store from "@/store";
export default {
name: "alert",
@ -51,52 +50,17 @@ export default {
cmsWidgetName: String,
manualHeadline: String,
manualCopy: String,
modelValue: {}
},
computed: {
alertHeadline(){
return this.cmsWidgetName ? this.checkForCustomStrings(this.getCmsContent(this.cmsWidgetName, 'HeadlineText')) : this.manualHeadline;
return this.cmsWidgetName ? this.getCmsContent(this.cmsWidgetName, 'HeadlineText') : this.manualHeadline;
},
alertCopy(){
return this.cmsWidgetName ? this.checkForCustomStrings(this.getCmsContent(this.cmsWidgetName, 'BodyText')) : this.manualCopy;
return this.cmsWidgetName ? 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;
splitAlertCopyForLink(){
// Splits content when brackets are found in text so that text can be looped through and router-link can be injected when needed
return this.alertCopy.split(/{(.*?)}/g);
}
},
};