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

More implementations for license plate lookup

Browse source
This commit is contained in:
Max 2022-03-16 13:14:07 -04:00
parent 263b847ebc
commit ebc30c7776
5 changed files with 176 additions and 95 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/constants/endpoints.js
View file

@ -43,6 +43,10 @@ const endpoints = {
url: "/vehicle/api/v1/vehicle/Lookup", url: "/vehicle/api/v1/vehicle/Lookup",
method: "POST", method: "POST",
}, },
LookupVinByPlate: {
url: "/vehicle/api/v1/vehicle/lookup-vin-by-plate",
method: "POST",
},
GetPartsOrQuestions: { GetPartsOrQuestions: {
url: "/parts/api/v1/parts/parts-or-questions", url: "/parts/api/v1/parts/parts-or-questions",
method: "POST", method: "POST",

2
src/constants/store-actions.js
View file

@ -11,7 +11,9 @@ const storeActions = {
GET_EVOX_IMAGE: "getEvoxImage", GET_EVOX_IMAGE: "getEvoxImage",
LOOKUP_VEHICLE_BY_YMMS: "lookupVehicleByYmms", LOOKUP_VEHICLE_BY_YMMS: "lookupVehicleByYmms",
LOOKUP_VEHICLE_BY_VIN: "lookupVehicleByVin", LOOKUP_VEHICLE_BY_VIN: "lookupVehicleByVin",
LOOKUP_VIN_BY_PLATE: "lookupVinByPlate",
GET_PARTS_OR_QUESTIONS: "getPartsOrQuestions", GET_PARTS_OR_QUESTIONS: "getPartsOrQuestions",
VALIDATE_ZIP: "validateZip",
// DEPENDENCY MUTATIONS // DEPENDENCY MUTATIONS
RESET_VEHICLE_STATE_AND_DEPENDENCIES: "resetVehicleAndDependencies", RESET_VEHICLE_STATE_AND_DEPENDENCIES: "resetVehicleAndDependencies",

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

@ -1,15 +1,15 @@
<template> <template>
<div class="container-fluid shadow rounded-3 p-2 position-relative make-tall"> <div class="container-fluid shadow rounded-3 p-2 position-relative make-tall">
<funnelHeader ref="funnelHeader" /> <funnelHeader ref="funnelHeader" />
<vehicleBanner ref="vehicleBanner" :displayGenericVehicleImage=false /> <vehicleBanner ref="vehicleBanner" :displayGenericVehicleImage="false" />
<funnelSubHeader ref="funnelSubHeader" /> <funnelSubHeader ref="funnelSubHeader" />
<textboxQuestion /> <textboxQuestion />
<funnelFooter <funnelFooter
ref="funnelFooter" ref="funnelFooter"
@back-clicked="backButtonAction" @back-clicked="backButtonAction"
@ForwardClicked="forwardButtonAction" @ForwardClicked="forwardButtonAction"
/> />
</div> </div>
</template> </template>
<script> <script>
@ -18,99 +18,153 @@ import funnelHeader from "@/common-components/funnel-header/funnel-header";
import funnelFooter from "@/common-components/funnel-footer/funnel-footer"; import funnelFooter from "@/common-components/funnel-footer/funnel-footer";
import vehicleBanner from "@/common-components/vehicle-banner/vehicle-banner"; import vehicleBanner from "@/common-components/vehicle-banner/vehicle-banner";
import funnelSubHeader from "@/common-components/funnel-sub-header/funnel-sub-header"; import funnelSubHeader from "@/common-components/funnel-sub-header/funnel-sub-header";
import textboxQuestion from "@/common-components/textbox-question/textbox-question" import textboxQuestion from "@/common-components/textbox-question/textbox-question";
// Supporting files // Supporting files
import { fetchCmsContentForPage } from "@/helpers/cms-content-helper"; import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
import { settleAllPromises } from "@/helpers/layout-helper"; import { settleAllPromises } from "@/helpers/layout-helper";
import store from "@/store"; import store from "@/store";
import baseMixin from "@/mixins/base-mixin.js";
import { storeActions } from "@/constants/store-actions"; import { storeActions } from "@/constants/store-actions";
import { storeMutations } from "@/constants/store-mutations"; import { storeMutations } from "@/constants/store-mutations";
export default { export default {
name: "license-plate-lookup", name: "license-plate-lookup",
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 = [
{ {
resultKey: "cmsContent", resultKey: "cmsContent",
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.$refs.funnelHeader.initializeComponent(
resultMap.cmsContent.FunnelHeaderWidget resultMap.cmsContent.FunnelHeaderWidget
); );
vm.$refs.vehicleBanner.initializeComponent( vm.$refs.vehicleBanner.initializeComponent(
resultMap.cmsContent.VehicleBannerWidget resultMap.cmsContent.VehicleBannerWidget
); );
vm.$refs.funnelSubHeader.initializeComponent( vm.$refs.funnelSubHeader.initializeComponent(
resultMap.cmsContent.FunnelSubHeaderWidget resultMap.cmsContent.FunnelSubHeaderWidget
); );
vm.$refs.funnelFooter.initializeComponent( vm.$refs.funnelFooter.initializeComponent(
resultMap.cmsContent.FunnelFooterWidget resultMap.cmsContent.FunnelFooterWidget
); );
// vm.$refs.licensePlateNumber.initializeComponent( // vm.$refs.licensePlateNumber.initializeComponent(
// resultMap.cmsContent.LicensePlateNumber // resultMap.cmsContent.LicensePlateNumber
// ); // );
console.log(resultMap) console.log(resultMap);
}); });
},
data() {
return {
newServiceZipRequired: false,
vinNotValid: false,
vinDoesNotMatchCarId: false,
};
},
methods: {
arePagePrerequisitesValid() {
return store.getters.vehicle.carId !== null;
}, },
methods: { resetDependentState() {
arePagePrerequisitesValid(){ store.commit(storeMutations.UPDATE_REGISTRATION_ADDRESS, null);
return store.getters.vehicle.carId !== null; store.commit(storeMutations.UPDATE_REGISTRATION_CITY, null);
}, store.commit(storeMutations.UPDATE_REGISTRATION_FIRST_NAME, null);
resetDependentState(){ store.commit(storeMutations.UPDATE_REGISTRATION_LAST_NAME, null);
store.commit(storeMutations.UPDATE_REGISTRATION_ADDRESS, null); store.dispatch(storeActions.RESET_PARTS_STATE_AND_DEPENDENCIES);
store.commit(storeMutations.UPDATE_REGISTRATION_CITY, null); },
store.commit(storeMutations.UPDATE_REGISTRATION_FIRST_NAME, null); backButtonAction() {
store.commit(storeMutations.UPDATE_REGISTRATION_LAST_NAME, null); // route to move backwards
store.dispatch(storeActions.RESET_PARTS_STATE_AND_DEPENDENCIES); this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
}, },
backButtonAction(){ async forwardButtonAction(zip, plate) {
// route to move backwards const zipValidation = await this.validateZip(zip);
this.$router.navigate( const vinLookup = await this.lookupVin(plate);
this.navigationScenarios.CLICKED_BACK, if (!zipValidation.isServiceable) {
this.$route this.newServiceZipRequired = true;
); return;
}, }
forwardButtonAction(){ if (!vinLookup.vin) {
this.vinNotValid = true;
return;
}
if (vinLookup.vehicle.carId !== store.getters.vehicle.carId) {
this.vinDoesNotMatchCarId = true;
return;
}
const partsData = await baseMixin.methods.dispatchNonBlockingStoreAction(
this.storeActions.GET_PARTS_OR_QUESTIONS,
{
carId: store.getters.vehicle.carId,
glassArray: store.getters.damage.glassToReplace,
zipCode: zip,
vin: vinLookup.vin
}, },
updateStore(){ false
// if(vehicleDamage){ );
// store.dispatch(storeActions.RESET_DAMAGE_STATE_AND_DEPENDENCIES);
// } this.navigateForward(partsData);
store.commit(storeMutations.UPDATE_VEHICLE_VIN, null); },
store.commit(storeMutations.UPDATE_YEAR, null); navigateForward(partsData){
store.commit(storeMutations.UPDATE_MAKE, null); if(partsData.data.partsOrQuestions.partQuestions.length){
store.commit(storeMutations.UPDATE_MODEL, null); this.$router.navigateAfterSave(this.navigationScenarios.CONTINUING_WITH_PARTS_QUESTION, this.$route, {}, {}, partsData.data);
store.commit(storeMutations.UPDATE_STYLE, null); return;
store.commit(storeMutations.UPDATE_CAR_ID, null); } else if(!partsData.data.partsOrQuestions.partQuestions.length && partsData.data.partsOrQuestions.parts.length > 1) {
store.commit(storeMutations.UPDATE_VEHICLE_CATEGORY, null); this.$router.navigateAfterSave(this.navigationScenarios.CONTINUING_WITH_MULTIPLE_PARTS, this.$route, {}, {}, partsData.data);
store.commit(storeMutations.UPDATE_VEHICLE_IMAGE_URL, null); return;
store.commit(storeMutations.UPDATE_VEHICLE_IMAGE_VIF_NUMBER, null); } else {
store.commit(storeMutations.UPDATE_VEHICLE_IMAGE_COLOR, null); this.$router.navigate(this.navigationScenarios.CONTINUING_WITH_SINGLE_PART, this.$route);
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_CUSTOMER_EMAIL_ADDRESS, null);
} }
}, },
components: { validateZip(zip) {
funnelHeader, return baseMixin.methods.dispatchNonBlockingStoreAction(
funnelFooter, storeActions.VALIDATE_ZIP,
vehicleBanner, { zip }
textboxQuestion, );
funnelSubHeader, },
} lookupVin(plate, state) {
} return baseMixin.methods.dispatchNonBlockingStoreAction(
storeActions.LOOKUP_VIN_BY_PLATE,
{ plate, state }
);
},
updateStore() {
// if(vehicleDamage){
// store.dispatch(storeActions.RESET_DAMAGE_STATE_AND_DEPENDENCIES);
// }
store.commit(storeMutations.UPDATE_VEHICLE_VIN, null);
store.commit(storeMutations.UPDATE_YEAR, null);
store.commit(storeMutations.UPDATE_MAKE, null);
store.commit(storeMutations.UPDATE_MODEL, null);
store.commit(storeMutations.UPDATE_STYLE, null);
store.commit(storeMutations.UPDATE_CAR_ID, null);
store.commit(storeMutations.UPDATE_VEHICLE_CATEGORY, null);
store.commit(storeMutations.UPDATE_VEHICLE_IMAGE_URL, null);
store.commit(storeMutations.UPDATE_VEHICLE_IMAGE_VIF_NUMBER, 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_CUSTOMER_EMAIL_ADDRESS, null);
},
},
components: {
funnelHeader,
funnelFooter,
vehicleBanner,
textboxQuestion,
funnelSubHeader,
},
};
</script> </script>

12
src/router/router-constants/routing-table.js
View file

@ -117,6 +117,18 @@ const routingTable = [
scenario: navigationScenarios.CLICKED_BACK, scenario: navigationScenarios.CLICKED_BACK,
destinationFmgPageValue: fmgPageValues.ESTIMATE, destinationFmgPageValue: fmgPageValues.ESTIMATE,
}, },
{
scenario: navigationScenarios.CONTINUING_WITH_PARTS_QUESTION,
destinationFmgPageValue: fmgPageValues.PART_QUESTIONS,
},
{
scenario: navigationScenarios.CONTINUING_WITH_MULTIPLE_PARTS,
destinationFmgPageValue: fmgPageValues.VEHICLE_PARTS,
},
{
scenario: navigationScenarios.CONTINUING_WITH_SINGLE_PART,
destinationFmgPageValue: fmgPageValues.REVEAL,
},
], ],
}, },
]; ];

21
src/store/index.js
View file

@ -50,12 +50,6 @@ export const state = {
eventBus: [], eventBus: [],
pageData: {} pageData: {}
}, },
serviceLocation: {
zip: null,
},
customer: {
emailAddress: null,
},
} }
// Export Mutations // Export Mutations
@ -226,6 +220,15 @@ export const actions = {
}, },
}); });
}, },
lookupVinByPlate(context, { plate }) {
return globalMethods.callHttpClient({
method: endpoints.LookupVinByPlate.method,
endpoint: endpoints.LookupVinByPlate.url,
payload: {
plate: plate,
},
});
},
getVehicleMakes(context, { year }) { getVehicleMakes(context, { year }) {
return globalMethods.callHttpClient({ return globalMethods.callHttpClient({
method: endpoints.GetVehicleMakes.method, method: endpoints.GetVehicleMakes.method,
@ -270,6 +273,12 @@ export const actions = {
payload: {}, payload: {},
}); });
}, },
validateZip(context, {zip}) {
return globalMethods.callHttpClient({
methods: endpoints.ValidateZip.method,
endpoint: `${endpoints.ValidateZip.url}/${zip}`
})
},
// DEPENDENCY ACTIONS // DEPENDENCY ACTIONS
resetVehicleAndDependencies(context) { resetVehicleAndDependencies(context) {