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

WIP

Browse source
This commit is contained in:
bmauger 2022-04-11 15:10:20 -04:00
parent 4ccda4ee93
commit 9cf7204059
3 changed files with 94 additions and 80 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -1,25 +1,28 @@
<template> <template>
<div class="textbox-question" :class="hasError ? 'has-error' : ''"> <div class="textbox-question" :class="[
errors.length > 0 ? 'has-error' : '',
hasError ? 'has-error' : '',
]">
<label :for="inputId" :aria-label="questionText" class="form-label" v-html="labelText"></label> <label :for="inputId" :aria-label="questionText" class="form-label" v-html="labelText"></label>
<input v-model="value" <input v-model="value"
v-maska="mask" v-maska="mask"
:type="type" :type="type"
class="form-control" class="form-control"
:ref="inputId" :ref="inputId"
:id="inputId" :id="inputId"
:name="inputId" :name="inputId"
:placeholder="placeholderText" :placeholder="placeholderText"
:aria-disabled="isDisabled" :aria-disabled="isDisabled"
:disabled="isDisabled" :disabled="isDisabled"
:aria-required="isRequired" :aria-required="isRequired"
autocomplete="off" autocomplete="off"
:class="[hasIcon ? 'has-icon' : '', iconRight ? 'icon-right' : '']" :class="[hasIcon ? 'has-icon' : '', iconRight ? 'icon-right' : '']"
:validationRules="validationRules" :validationRules="validationRules"
@input="handleChange" @input="handleChange"
@blur="handleBlur" /> @blur="handleBlur" />
<div v-show="errorMessage" class="row mt-2 form-test-error"> <div v-show="errorMessage" class="row mt-2 form-test-error">
<span role="alert">{{ errorMessage }}</span> <span role="alert">{{ errorMessage }}</span>
</div> </div>
</div> </div>
</template> </template>
@ -56,7 +59,7 @@ export default {
setup(props) { setup(props) {
const fieldOptions = { const fieldOptions = {
type: "text", type: "text",
value: props.modelValue, value: props.modelValue,
}; };
const { const {
@ -64,15 +67,17 @@ export default {
handleBlur, handleBlur,
handleChange, handleChange,
meta, meta,
validate validate,
errors,
} = useField(props.inputId, props.validationRules, fieldOptions); } = useField(props.inputId, props.validationRules, fieldOptions);
return { return {
errorMessage, errorMessage,
handleBlur, handleBlur,
handleChange, handleChange,
validate, validate,
meta, meta,
errors,
}; };
}, },
computed: { computed: {
@ -86,7 +91,7 @@ export default {
set: function(newValue) { set: function(newValue) {
this.$emit("update:modelValue", newValue); this.$emit("update:modelValue", newValue);
} }
}, },
labelText: { labelText: {
get: function () { get: function () {
let labelText = this.questionText; let labelText = this.questionText;
@ -98,7 +103,7 @@ export default {
return labelText; return labelText;
} }
} }
}, },
watch: { watch: {
value(newValue) { value(newValue) {

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

@ -46,7 +46,7 @@ export async function getPageToRouteExistingOrderTo(toRoute = {}, existingHerita
//return 'vehicle-damage'; //(uncomment) //return 'vehicle-damage'; //(uncomment)
return "vin-lookup"; //This may be temporary return "vin-lookup"; //This may be temporary
} else { } else {
return 'vehicle-damage'; return 'vin-lookup';
//return "estimate" (uncomment) //return "estimate" (uncomment)
} }
} }

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

@ -31,59 +31,59 @@
</div> </div>
<alert <alert
class="my-3" class="my-3"
v-if="MatchedDifferentVehicle" v-if="matchedDifferentVehicle"
alertClass="alert-danger" alertClass="alert-danger"
:alertHeadline="MatchedDifferentVehicle.headline" :alertHeadline="matchedDifferentVehicle.headline"
:alertCopy="MatchedDifferentVehicle.copy" :alertCopy="matchedDifferentVehicle.copy"
/> />
<alert <alert
class="my-3" class="my-3"
v-if="NoMatchAlertWidget" v-if="noMatchAlert"
alertClass="alert-danger"
:alertHeadline="NoMatchAlertWidget.headline"
:alertCopy="NoMatchAlertWidget.copy"
/>
<alert
class="my-3"
v-if="NoServiceZipWidget"
alertClass="alert-warning" alertClass="alert-warning"
:alertHeadline="NoServiceZipWidget.headline" :alertHeadline="noMatchAlertWidget.headline"
:alertCopy="NoServiceZipWidget.copy" :alertCopy="noMatchAlertWidget.copy"
/> />
<alert <alert
class="my-3" class="my-3"
v-if="VinFoundWidget" v-if="noServiceZip"
alertClass="alert-warning" alertClass="alert-warning"
:alertHeadline="VinFoundWidget.headline" :alertHeadline="noServiceZipWidget.headline"
:alertCopy="VinFoundWidget.copy" :alertCopy="noServiceZipWidget.copy"
/> />
<alert <alert
class="my-3" class="my-3"
v-if="VinFoundReadOnlyWidget" v-if="vinFound"
alertClass="alert-warning" alertClass="alert-warning"
:alertHeadline="VinFoundReadOnlyWidget.headline" :alertHeadline="vinFoundWidget.headline"
:alertCopy="VinFoundReadOnlyWidget.copy" :alertCopy="vinFoundWidget.copy"
/> />
<alert <alert
class="my-3" class="my-3"
v-if="FoundWindshieldAlert" v-if="vinFoundReadOnly"
alertClass="alert-warning" alertClass="alert-warning"
:alertHeadline="FoundWindshieldAlert.headline" :alertHeadline="vinFoundReadOnlyWidget.headline"
:alertCopy="FoundWindshieldAlert.copy" :alertCopy="vinFoundReadOnlyWidget.copy"
/> />
<alert <alert
class="my-3" class="my-3"
v-if="VinNotFound" v-if="foundWindshieldAlert"
alertClass="alert-warning" alertClass="alert-warning"
:alertHeadline="VinNotFound.headline" :alertHeadline="foundWindshieldAlertWidget.headline"
:alertCopy="VinNotFound.copy" :alertCopy="foundWindshieldAlertWidget.copy"
/> />
<alert <alert
class="my-3" class="my-3"
v-if="PerfectMatchNewVinAlert" v-if="vinNotFound"
alertClass="alert-warning" alertClass="alert-warning"
:alertHeadline="PerfectMatchNewVinAlert.headline" :alertHeadline="vinNotFoundWidget.headline"
:alertCopy="PerfectMatchNewVinAlert.copy" :alertCopy="vinNotFoundWidget.copy"
/>
<alert
class="my-3"
v-if="perfectMatchNewVinAlert"
alertClass="alert-warning"
:alertHeadline="perfectMatchNewVinAlertWidget.headline"
:alertCopy="perfectMatchNewVinAlertWidget.copy"
/> />
<funnelFooter <funnelFooter
cmsWidgetName="FunnelFooterWidget" cmsWidgetName="FunnelFooterWidget"
@ -129,6 +129,8 @@ 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 = [
{ {
@ -136,24 +138,41 @@ 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.setCmsContent(resultMap.cmsContent); vm.setCmsContent(resultMap.cmsContent);
vm.noServiceZipWidget = { vm.matchedDifferentVehicleWidget = {
headline: resultMap.cmsContent.NoServiceZipWidget.HeadlineText, headline: resultMap.cmsContent.MatchedDifferentVehicle.HeadlineText,
copy: resultMap.cmsContent.NoServiceZipWidget.BodyText, copy: resultMap.cmsContent.MatchedDifferentVehicle.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.MatchedDifferentVehicle = { vm.noServiceZipWidget = {
headline: resultMap.cmsContent.MatchedDifferentVehicle.HeadlineText, headline: resultMap.cmsContent.NoServiceZipWidget.HeadlineText,
copy: resultMap.cmsContent.MatchedDifferentVehicle.BodyText copy: resultMap.cmsContent.NoServiceZipWidget.BodyText
}; };
vm.PerfectMatchNewVinAlert = { vm.vinFoundWidget = {
headline: resultMap.cmsContent.VinFoundWidget.HeadlineText,
copy: resultMap.cmsContent.VinFoundWidget.BodyText
};
vm.vinFoundReadOnlyWidget = {
headline: resultMap.cmsContent.VinFoundReadOnlyWidget.HeadlineText,
copy: resultMap.cmsContent.VinFoundReadOnlyWidget.BodyText
};
vm.foundWindshieldAlertWidget = {
headline: resultMap.cmsContent.FoundWindshieldAlert.HeadlineText,
copy: resultMap.cmsContent.FoundWindshieldAlert.BodyText
};
vm.vinNotFoundWidget = {
headline: resultMap.cmsContent.VinNotFound.HeadlineText,
copy: resultMap.cmsContent.VinNotFound.BodyText
};
vm.perfectMatchNewVinAlertWidget = {
headline: resultMap.cmsContent.PerfectMatchNewVinAlert.HeadlineText, headline: resultMap.cmsContent.PerfectMatchNewVinAlert.HeadlineText,
copy: resultMap.cmsContent.PerfectMatchNewVinAlert.BodyText copy: resultMap.cmsContent.PerfectMatchNewVinAlert.BodyText
}; };
@ -164,15 +183,14 @@ export default {
}, },
data() { data() {
return { return {
MatchedDifferentVehicle: false, matchedDifferentVehicle: false,
NoMatchAlertWidget: false, noMatchAlert: false,
PerfectMatchNewVinAlert: false, noServiceZip: false,
NoServiceZipWidget: false, vinFound: false,
VinFoundWidget: false, vinFoundReadOnly: false,
VinFoundReadOnlyWidget: false, foundWindshieldAlert: false,
FoundWindshieldAlert: false, vinNotFound: false,
newServiceZipRequired: false, perfectMatchNewVinAlert: false,
VinNotFound: false,
vin: '', vin: '',
zip: '', zip: '',
email: '', email: '',
@ -193,24 +211,18 @@ export default {
this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route); this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
}, },
async forwardButtonAction() { async forwardButtonAction() {
const zipValidation = this.serviceZip ? await this.validateZip(this.serviceZip) : await this.validateZip(this.zip); const zipValidation = await this.validateZip(this.zip);
console.log(zipValidation);
if (!zipValidation.data.isServiceable) { if (!zipValidation.data.isServiceable) {
//this.$refs.funnelFooter.removeLoader(); this.$refs.funnelFooter.removeLoader();
this.newServiceZipRequired = true; this.noServiceZip = true;
return; return;
} }
const vinLookup = await this.lookupVin(this.licensePlate, zipValidation.data.state).catch(() => { const vinLookup = await this.lookupVin(this.vin).catch(() => {
this.$refs.funnelFooter.removeLoader(); this.$refs.funnelFooter.removeLoader();
this.vinNotValid = true; this.vinNotValid = true;
return; return;
}); });
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.vinDoesNotMatchCarId = true;
return;
}
const partsData = await baseMixin.methods.dispatchNonBlockingStoreAction( const partsData = await baseMixin.methods.dispatchNonBlockingStoreAction(
this.storeActions.GET_PARTS_OR_QUESTIONS, this.storeActions.GET_PARTS_OR_QUESTIONS,
{ {
@ -240,10 +252,10 @@ export default {
{ zip } { zip }
); );
}, },
lookupVin(plate, state) { lookupVin(vin) {
return baseMixin.methods.dispatchNonBlockingStoreAction( return baseMixin.methods.dispatchNonBlockingStoreAction(
storeActions.LOOKUP_VIN_BY_PLATE, storeActions.LOOKUP_VEHICLE_BY_VIN,
{ licensePlate: plate, licenseState: state } { vin }
); );
}, },
updateStore() { updateStore() {
@ -260,9 +272,6 @@ export default {
store.commit(storeMutations.UPDATE_VEHICLE_IMAGE_URL, null); store.commit(storeMutations.UPDATE_VEHICLE_IMAGE_URL, null);
store.commit(storeMutations.UPDATE_VEHICLE_IMAGE_VIF_NUMBER, null); store.commit(storeMutations.UPDATE_VEHICLE_IMAGE_VIF_NUMBER, null);
store.commit(storeMutations.UPDATE_VEHICLE_IMAGE_COLOR, null); store.commit(storeMutations.UPDATE_VEHICLE_IMAGE_COLOR, null);
store.commit(storeMutations.UPDATE_REGISTRATION_LICENSE_PLATE, null);
store.commit(storeMutations.UPDATE_REGISTRATION_STATE, null);
store.commit(storeMutations.UPDATE_REGISTRATION_ZIP_CODE, null);
store.commit(storeMutations.UPDATE_SERVICE_LOCATION_ZIP, null); store.commit(storeMutations.UPDATE_SERVICE_LOCATION_ZIP, null);
store.commit(storeMutations.UPDATE_CUSTOMER_EMAIL_ADDRESS, null); store.commit(storeMutations.UPDATE_CUSTOMER_EMAIL_ADDRESS, null);
}, },