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 }"
>
<div class="container-fluid shadow rounded-3 p-2 position-relative make-tall px-5">
<funnelHeader ref="funnelHeader" />
<vehicleBanner ref="vehicleBanner" :displayGenericVehicleImage="false" />
<funnelSubHeader ref="funnelSubHeader" />
<funnelHeader cmsWidgetName="FunnelHeaderWidget" />
<vehicleBanner cmsWidgetName="VehicleBannerWidget" :displayGenericVehicleImage="false" />
<funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" />
<div class="row my-2">
<div class="col">
<textboxQuestion ref="VinNumber" v-model="vin" inputId="vin" disableAutoFill validationRules="vin-required|vin-format" />
@ -21,38 +21,73 @@
</div>
<div class="row my-2">
<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 class="row my-2">
<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>
<alert
class="my-3"
v-if="newServiceZipRequired"
v-if="MatchedDifferentVehicle"
alertClass="alert-danger"
:alertHeadline="noServiceZipWidget.headline"
:alertCopy="noServiceZipWidget.copy"
:alertHeadline="MatchedDifferentVehicle.headline"
:alertCopy="MatchedDifferentVehicle.copy"
/>
<alert
class="my-3"
v-if="vinNotValid"
v-if="NoMatchAlertWidget"
alertClass="alert-danger"
:alertHeadline="noMatchAlertWidget.headline"
:alertCopy="noMatchAlertWidget.copy"
:alertHeadline="NoMatchAlertWidget.headline"
:alertCopy="NoMatchAlertWidget.copy"
/>
<alert
class="my-3"
v-if="vinDoesNotMatchCarId"
v-if="NoServiceZipWidget"
alertClass="alert-warning"
:alertHeadline="matchedDifferentVehicleAlertWidget.headline"
:alertCopy="matchedDifferentVehicleAlertWidget.copy"
:alertHeadline="NoServiceZipWidget.headline"
: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="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>
<funnelFooter
@ -98,7 +133,6 @@ export default {
async beforeRouteEnter(to, from, next) {
// Call APIs
const cmsContentPromise = fetchCmsContentForPage(to.query.fmgPage);
// Settle promises and get results
const promiseResultMap = [
{
@ -106,44 +140,23 @@ export default {
promise: cmsContentPromise,
},
];
const resultMap = await settleAllPromises(promiseResultMap);
// 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.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.setCmsContent(resultMap.cmsContent);
vm.noServiceZipWidget = {
headline: resultMap.cmsContent.NoServiceZipWidget.HeadlineText,
copy: resultMap.cmsContent.NoServiceZipWidget.BodyText
};
// vm.noMatchAlertWidget = {
// headline: resultMap.cmsContent.NoMatchAlertWidget.HeadlineText,
// copy: resultMap.cmsContent.NoMatchAlertWidget.BodyText
// };
// vm.matchedDifferentVehicleAlertWidget = {
// headline: resultMap.cmsContent.MatchedDifferentVehicleAlertWidget.HeadlineText,
// copy: resultMap.cmsContent.MatchedDifferentVehicleAlertWidget.BodyText
// };
copy: resultMap.cmsContent.NoServiceZipWidget.BodyText,
};
vm.noMatchAlertWidget = {
headline: resultMap.cmsContent.NoMatchAlertWidget.HeadlineText,
copy: resultMap.cmsContent.NoMatchAlertWidget.BodyText
};
vm.MatchedDifferentVehicle = {
headline: resultMap.cmsContent.MatchedDifferentVehicle.HeadlineText,
copy: resultMap.cmsContent.MatchedDifferentVehicle.BodyText
};
});
},
props: {
@ -177,7 +190,7 @@ export default {
async forwardButtonAction() {
const zipValidation = this.serviceZip ? await this.validateZip(this.serviceZip) : await this.validateZip(this.zip);
if (!zipValidation.data.isServiceable) {
this.$refs.funnelFooter.removeLoader();
//this.$refs.funnelFooter.removeLoader();
this.newServiceZipRequired = true;
return;
}
@ -188,7 +201,7 @@ export default {
});
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.removeLoader();
//this.$refs.funnelFooter.removeLoader();
this.vinDoesNotMatchCarId = true;
return;
}