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

CSR-408 | Refactor and Fix Unrelated Bugs

Browse source 
Bugs fixed:
-Compile time error regarding logic done in "computed"
-Forward button now updates correctly on license-plate-lookup when VIN is changed.

Refactored alert.vue to make it more readable
This commit is contained in:
Scott Kiener 2022-05-13 10:44:43 -04:00
parent 5ab0d527b2
commit 4ec5217dae
2 changed files with 35 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
src/layouts/vin-lookup/vin-lookup.vue
View file

@ -192,12 +192,17 @@ export default {
vinPopulatedOnPageLoad: this.getVinFromStore()?.length > 0,
};
},
watch: {
vin() {
this.$refs.funnelFooter.updateButtonText(
this.getCmsContent("FunnelFooterWidget", "ForwardButtonText")
);
}
},
computed: {
perfectMatchNewVinAlert() {
const isVinPerfectMatch = this.vinPopulatedOnPageLoad && this.vin === this.getVinFromStore();
if (isVinPerfectMatch) {
this.isCarIdDifferent = false;
}
this.updateIsCarIdDifferent(isVinPerfectMatch);
return isVinPerfectMatch;
},
MatchedDifferentVehicleAlertHeader(){
@ -269,6 +274,11 @@ export default {
);
});
},
updateIsCarIdDifferent(isVinPerfectMatch){
if (isVinPerfectMatch) {
this.isCarIdDifferent = false;
}
},
backButtonAction() {
if (store.getters.vehicle.vin) {
this.$router.navigate(this.navigationScenarios.CLICKED_BACK_WITH_VIN, this.$route);

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

@ -6,12 +6,12 @@
>
<p class="m-0 fw-bold alert-heading">{{ alertHeadline }}</p>
<template v-for="paragraph in splitAlertCopyForParagraphTag" :key="paragraph">
<p class="m-0 text-body small" v-if="!paragraph.includes('routerLink:')" v-html="paragraph"></p>
<p class="m-0 text-body small" v-if="!doesCopyContainRouterLink(paragraph)" v-html="paragraph"></p>
<p class="m-0 text-body small" v-else>
<template v-for="copy in splitParagraphForRouterLink(paragraph)" :key="copy">
<span v-if="!copy.includes('routerLink:')" v-html="copy"></span>
<template v-for="copy in splitCopyForRouterLink(paragraph)" :key="copy">
<span v-if="!doesCopyContainRouterLink(copy)" v-html="copy"></span>
<span v-else>
<router-link :to="{query: {fmgPage: `${copy.split(':')[1].split(',')[0]}`}, name: 'root'}">{{ copy.split(':')[1].split(',')[1] }}</router-link>
<router-link :to="{query: {fmgPage: `${getRouterLinkRouteFromCopy(copy)}`}, name: 'root'}">{{ getRouterLinkDisplayTextFromCopy(copy) }}</router-link>
</span>
</template>
</p>
@ -59,7 +59,6 @@ export default {
},
alertCopy(){
return this.cmsWidgetName ? this.getCmsContent(this.cmsWidgetName, 'BodyText') : this.manualCopy;
//return "<p style='display:none'>This is just a long string. {routerLink:estimate,provide your VIN} This is just a long string.</p>How Did you Even manage this?<p>This is just a long string.This is just a long string.This is just a long string.This is just a long string.This is just a long string.This is just a long string.This is just a long string.</p>";
},
splitAlertCopyForParagraphTag(){
// splits the alertCopy on <p ... > (with or without attributes) and </p>
@ -68,9 +67,24 @@ export default {
},
},
methods: {
splitParagraphForRouterLink(paragraph){
// splits paragraph on { ... } such as {routerlink: ...}
return paragraph.split(/{(.*?)}/g);
doesCopyContainRouterLink(copy) {
return copy.includes('routerLink:');
},
splitCopyForRouterLink(copy){
// splits copy on { ... } such as {routerlink: ...}
return copy.split(/{(.*?)}/g);
},
getRouterLinkRouteFromCopy(copy){
// sample input: {routerLink:estimate,provide your VIN}
// first split would return 'estimate,provide your VIN'
// second split would return 'estimate'
return copy.split(':')[1].split(',')[0];
},
getRouterLinkDisplayTextFromCopy(copy){
// sample input: {routerLink:estimate,provide your VIN}
// first split would return 'estimate,provide your VIN'
// second split would return 'provide your VIN'
return copy.split(':')[1].split(',')[1];
}
},
};