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

WIP Updates to vin-lookup page.

Browse source
This commit is contained in:
bmauger 2022-04-05 15:01:40 -04:00
parent 478f09bd88
commit 6d69c7c7af
1 changed files with 63 additions and 50 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -6,9 +6,9 @@
v-slot="{ meta }" v-slot="{ meta }"
> >
<div class="container-fluid shadow rounded-3 p-2 position-relative make-tall px-5"> <div class="container-fluid shadow rounded-3 p-2 position-relative make-tall px-5">
<funnelHeader ref="funnelHeader" /> <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
<vehicleBanner ref="vehicleBanner" :displayGenericVehicleImage="false" /> <vehicleBanner cmsWidgetName="VehicleBannerWidget" :displayGenericVehicleImage="false" />
<funnelSubHeader ref="funnelSubHeader" /> <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" />
<div class="row my-2"> <div class="row my-2">
<div class="col"> <div class="col">
<textboxQuestion ref="VinNumber" v-model="vin" inputId="vin" disableAutoFill validationRules="vin-required|vin-format" /> <textboxQuestion ref="VinNumber" v-model="vin" inputId="vin" disableAutoFill validationRules="vin-required|vin-format" />
@ -21,38 +21,73 @@
</div> </div>
<div class="row my-2"> <div class="row my-2">
<div class="col"> <div class="col">
<textboxQuestion ref="ServiceZIP" v-model="servicezip" inputId="serviceZip" disableAutoFill validationRules="zip-required" /> <textboxQuestion cmsWidgetName="ServiceZip" v-model="zip" inputId="zip" mask="#####" disableAutoFill validationRules="zip-required" />
</div> </div>
</div> </div>
<div class="row my-2"> <div class="row my-2">
<div class="col"> <div class="col">
<textboxQuestion ref="EmailAddress" v-model="email" inputId="email" disableAutoFill validationRules="email-address-required|email-address-format" /> <textboxQuestion cmsWidgetName="EmailAddress" v-model="email" inputId="email" disableAutoFill validationRules="email-address-required|email-address-format" />
</div> </div>
</div> </div>
<alert <alert
class="my-3" class="my-3"
v-if="newServiceZipRequired" v-if="MatchedDifferentVehicle"
alertClass="alert-danger" alertClass="alert-danger"
:alertHeadline="noServiceZipWidget.headline" :alertHeadline="MatchedDifferentVehicle.headline"
:alertCopy="noServiceZipWidget.copy" :alertCopy="MatchedDifferentVehicle.copy"
/> />
<alert <alert
class="my-3" class="my-3"
v-if="vinNotValid" v-if="NoMatchAlertWidget"
alertClass="alert-danger" alertClass="alert-danger"
:alertHeadline="noMatchAlertWidget.headline" :alertHeadline="NoMatchAlertWidget.headline"
:alertCopy="noMatchAlertWidget.copy" :alertCopy="NoMatchAlertWidget.copy"
/> />
<alert <alert
class="my-3" class="my-3"
v-if="vinDoesNotMatchCarId" v-if="NoServiceZipWidget"
alertClass="alert-warning" alertClass="alert-warning"
:alertHeadline="matchedDifferentVehicleAlertWidget.headline" :alertHeadline="NoServiceZipWidget.headline"
:alertCopy="matchedDifferentVehicleAlertWidget.copy" :alertCopy="NoServiceZipWidget.copy"
/>
<alert
class="my-3"
v-if="VinFoundWidget"
alertClass="alert-warning"
:alertHeadline="VinFoundWidget.headline"
:alertCopy="VinFoundWidget.copy"
/>
<alert
class="my-3"
v-if="VinFoundReadOnlyWidget"
alertClass="alert-warning"
:alertHeadline="VinFoundReadOnlyWidget.headline"
:alertCopy="VinFoundReadOnlyWidget.copy"
/>
<alert
class="my-3"
v-if="FoundWindshieldAlert"
alertClass="alert-warning"
:alertHeadline="FoundWindshieldAlert.headline"
:alertCopy="FoundWindshieldAlert.copy"
/>
<alert
class="my-3"
v-if="VinNotFound"
alertClass="alert-warning"
:alertHeadline="VinNotFound.headline"
:alertCopy="VinNotFound.copy"
/>
<alert
class="my-3"
v-if="PerfectMatchNewVinAlert"
alertClass="alert-warning"
:alertHeadline="PerfectMatchNewVinAlert.headline"
:alertCopy="PerfectMatchNewVinAlert.copy"
/> />
<div class="row my-2"> <div class="row my-2">
<div class="col"> <div class="col">
<textboxQuestion v-if="newServiceZipRequired" questionText="Service area ZIP code" v-model="serviceZip" inputId="serviceZip" disableAutoFill validationRules="zip-required" /> <textboxQuestion v-if="newServiceZipRequired" cmsWidgetName="ServiceZip" v-model="serviceZip" inputId="serviceZip" disableAutoFill validationRules="zip-required" />
</div> </div>
</div> </div>
<funnelFooter <funnelFooter
@ -98,7 +133,6 @@ export default {
async beforeRouteEnter(to, from, next) { async beforeRouteEnter(to, from, next) {
// Call APIs // Call APIs
const cmsContentPromise = fetchCmsContentForPage(to.query.fmgPage); const cmsContentPromise = fetchCmsContentForPage(to.query.fmgPage);
// Settle promises and get results // Settle promises and get results
const promiseResultMap = [ const promiseResultMap = [
{ {
@ -106,44 +140,23 @@ export default {
promise: cmsContentPromise, promise: cmsContentPromise,
}, },
]; ];
const resultMap = await settleAllPromises(promiseResultMap); const resultMap = await settleAllPromises(promiseResultMap);
// Call the "next" function to complete the transition to this page. // Call the "next" function to complete the transition to this page.
next((vm) => { next((vm) => {
vm.$refs.funnelHeader.initializeComponent( //vm.setCmsContent(resultMap.cmsContent);
resultMap.cmsContent.FunnelHeaderWidget
);
vm.$refs.vehicleBanner.initializeComponent(
resultMap.cmsContent.VehicleBannerWidget
);
vm.$refs.funnelSubHeader.initializeComponent(
resultMap.cmsContent.FunnelSubHeaderWidget
);
vm.$refs.VinNumber.initializeComponent(
resultMap.cmsContent.VinNumber.QuestionText
);
vm.$refs.ServiceZIP.initializeComponent(
resultMap.cmsContent.ServiceZIP.QuestionText
);
vm.$refs.EmailAddress.initializeComponent(
resultMap.cmsContent.EmailAddress.QuestionText
);
vm.$refs.funnelFooter.initializeComponent(
resultMap.cmsContent.FunnelFooterWidget
);
vm.noServiceZipWidget = { vm.noServiceZipWidget = {
headline: resultMap.cmsContent.NoServiceZipWidget.HeadlineText, headline: resultMap.cmsContent.NoServiceZipWidget.HeadlineText,
copy: resultMap.cmsContent.NoServiceZipWidget.BodyText copy: resultMap.cmsContent.NoServiceZipWidget.BodyText,
}; };
// vm.noMatchAlertWidget = { vm.noMatchAlertWidget = {
// headline: resultMap.cmsContent.NoMatchAlertWidget.HeadlineText, headline: resultMap.cmsContent.NoMatchAlertWidget.HeadlineText,
// copy: resultMap.cmsContent.NoMatchAlertWidget.BodyText copy: resultMap.cmsContent.NoMatchAlertWidget.BodyText
// }; };
// vm.matchedDifferentVehicleAlertWidget = { vm.MatchedDifferentVehicle = {
// headline: resultMap.cmsContent.MatchedDifferentVehicleAlertWidget.HeadlineText, headline: resultMap.cmsContent.MatchedDifferentVehicle.HeadlineText,
// copy: resultMap.cmsContent.MatchedDifferentVehicleAlertWidget.BodyText copy: resultMap.cmsContent.MatchedDifferentVehicle.BodyText
// }; };
}); });
}, },
props: { props: {
@ -177,7 +190,7 @@ export default {
async forwardButtonAction() { async forwardButtonAction() {
const zipValidation = this.serviceZip ? await this.validateZip(this.serviceZip) : await this.validateZip(this.zip); const zipValidation = this.serviceZip ? await this.validateZip(this.serviceZip) : await this.validateZip(this.zip);
if (!zipValidation.data.isServiceable) { if (!zipValidation.data.isServiceable) {
this.$refs.funnelFooter.removeLoader(); //this.$refs.funnelFooter.removeLoader();
this.newServiceZipRequired = true; this.newServiceZipRequired = true;
return; return;
} }
@ -188,7 +201,7 @@ export default {
}); });
if (vinLookup.data.vehicle.carId !== store.getters.vehicle.carId) { if (vinLookup.data.vehicle.carId !== store.getters.vehicle.carId) {
this.$refs.funnelFooter.updateButtonText(`Continue with ${vinLookup.data.vin} ${vinLookup.data.vehicle.year} ${vinLookup.data.vehicle.make} ${vinLookup.data.vehicle.model}`); 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.$refs.funnelFooter.removeLoader();
this.vinDoesNotMatchCarId = true; this.vinDoesNotMatchCarId = true;
return; return;
} }