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

CSR-347: create page shell and routing

Browse source
This commit is contained in:
Adam Caouette 2022-05-03 14:48:07 -04:00
parent 519fa5740a
commit 3d905c65e8
4 changed files with 396 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/layouts/address-lookup/address-lookup.vue
View file

@ -261,7 +261,7 @@ export default {
// and one of them matches the car id entered
navigateAfterSaveToHeritageFunnel(this.$route);
} else {
// and there is no match, navigate to "address-vehicle" page
// and there is no match, navigate to "address-vehicles" page
this.$router.navigateAfterSave(this.navigationScenarios.CONTINUING_WITH_MULTIPLE_VEHICLES, this.$route, {}, {}, carsFound);
}
}

0
src/layouts/address-vehicles/address-vehicles.spec.js Normal file
View file

381
src/layouts/address-vehicles/address-vehicles.vue Normal file
View file

@ -0,0 +1,381 @@
<template>
<Form
@submit="onSubmit"
@invalid-submit="onInvalidSubmit"
ref="theForm"
v-slot="{ meta }"
>
<div class="container-fluid shadow rounded-3 p-2 position-relative make-tall px-5">
<funnelHeader cmsWidgetName="FunnelHeaderWidget" />
<vehicleBanner cmsWidgetName="VehicleBannerWidget" :displayGenericVehicleImage="false" />
<funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" />
new section:
<div v-for="(item, i) in PartsForQuestions" :key="i">
<!-- Render horizontal lines if there is multi-glass (aka if i > 0) -->
<div class="container-fluid">
<hr v-if="i > 0" />
</div>
<h3>item.glassLocation: {{ item.glassLocation }}</h3>
<h3>item.glassName: {{ item.glassName }}</h3>
<h3>item.colorAnswers: {{ item.colorAnswers }}</h3>
</div>
<div class="row my-2">
<div class="col">
<textboxQuestion cmsWidgetName="VinNumber" v-model="vin" inputId="vin" isRequired disableAutoFill validationRules="vin-required|vin-format" :isDisabled=isVinFieldReadOnly />
</div>
</div>
<div class="row my-2">
<div class="col">
<vinInformation />
</div>
</div>
<div class="row my-2">
<div class="col">
<textboxQuestion cmsWidgetName="ServiceZIP" v-model="zip" inputId="zip" mask="#####" isRequired disableAutoFill validationRules="zip-required" />
</div>
</div>
<div class="row my-2">
<div class="col">
<textboxQuestion cmsWidgetName="EmailAddress" v-model="email" inputId="email" isRequired disableAutoFill validationRules="email-address-required|email-address-format" />
</div>
</div>
<alert
class="my-3"
v-model="customAlertData"
v-if="matchedDifferentVehicle"
alertClass="alert-danger"
cmsWidgetName="MatchedDifferentVehicle"
/>
<alert
class="my-3"
v-model="customAlertData"
v-if="noMatchAlert"
alertClass="alert-warning"
cmsWidgetName="NoMatchAlertWidget"
/>
<alert
class="my-3"
v-model="customAlertData"
v-if="noServiceZip"
alertClass="alert-warning"
cmsWidgetName="NoServiceZipWidget"
/>
<alert
class="my-3"
v-model="customAlertData"
v-if="vinFound"
alertClass="alert-warning"
cmsWidgetName="VinFoundWidget"
/>
<alert
class="my-3"
v-model="customAlertData"
v-if="vinFoundReadOnly"
alertClass="alert-warning"
cmsWidgetName="VinFoundReadOnlyWidget"
/>
<alert
class="my-3"
v-model="customAlertData"
v-if="foundWindshieldAlert"
alertClass="alert-warning"
cmsWidgetName="FoundWindshieldAlert"
/>
<alert
class="my-3"
v-model="customAlertData"
v-if="vinNotFound"
alertClass="alert-warning"
cmsWidgetName="VinNotFound"
/>
<alert
class="my-3"
v-model="customAlertData"
v-if="perfectMatchNewVinAlert"
alertClass="alert-warning"
cmsWidgetName="PerfectMatchNewVinAlert"
/>
<funnelFooter
cmsWidgetName="FunnelFooterWidget"
ref="funnelFooter"
:isDisabled="!meta.valid"
@back-clicked="backButtonAction"
@ForwardClicked="forwardButtonAction"
/>
</div>
</Form>
</template>
<script>
// Components
import funnelHeader from "@/common-components/funnel-header/funnel-header";
import funnelFooter from "@/common-components/funnel-footer/funnel-footer";
import vehicleBanner from "@/common-components/vehicle-banner/vehicle-banner";
import funnelSubHeader from "@/common-components/funnel-sub-header/funnel-sub-header";
import alert from "@/ux-components/alert/alert";
import textboxQuestion from "@/common-components/textbox-question/textbox-question";
import vinInformation from "@/layouts/vin-lookup/vin-information/vin-information";
// Supporting files
import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
import { settleAllPromises } from "@/helpers/layout-helper";
import store from "@/store";
import baseMixin from "@/mixins/base-mixin.js";
import { storeActions } from "@/constants/store-actions";
import { storeMutations } from "@/constants/store-mutations";
import { fmgPageValues } from "@/router/router-constants/fmgPage-values";
import { errorMessages } from "@/constants/error-messages";
import { required, regex } from "@/helpers/validation-rules";
import { Form, defineRule } from "vee-validate";
// DEFINE VALIDATION RULES
defineRule("zip-required", required(errorMessages.ZIP_REQUIRED));
defineRule("email-address-required", required(errorMessages.EMAIL_ADDRESS_REQUIRED));
defineRule("email-address-format", regex(/^([a-zA-Z0-9_\-.+]+)@([a-zA-Z0-9_\-.]+).([a-zA-Z]{2,})$/, errorMessages.EMAIL_ADDRESS_FORMAT));
defineRule("vin-required", required(errorMessages.VIN_REQUIRED));
defineRule("vin-format", regex(/^[A-HJ-NPR-Z0-9]{17}$/, errorMessages.VIN_FORMAT));
export default {
name: "address-vehicles",
async beforeRouteEnter(to, from, next) {
// Call APIs
const cmsContentPromise = fetchCmsContentForPage(to.query.fmgPage);
// Settle promises and get results
const promiseResultMap = [
{
resultKey: "cmsContent",
promise: cmsContentPromise,
},
];
const resultMap = await settleAllPromises(promiseResultMap);
console.log('resultMap.cmsContent: ', resultMap.cmsContent);
// resultMap.cmsContent =
// {
// "FunnelHeaderWidget": {
// "ImageId": "2da72d7b-340b-4c7c-94f4-76fb77e30b7e",
// "LogoImage": "https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/safelite-logo.svg?sfvrsn=45e7ed06_3"
// },
// "VehicleBannerWidget": {
// "BlurredImageId": "28452dcb-7762-4cc9-ab09-7643d0b89203",
// "CarIconImageId": "76a3cdf2-87e7-48e3-9e2e-7a607a9af487",
// "TruckIconImageId": "27c777e4-ae72-4877-9cab-c4b74583c1ec",
// "VanIconImageId": "06a2512c-df43-4379-8af8-b6b2409f0e3f",
// "CommercialVanIconImageId": "601401c8-323e-46c6-bdf5-54ab67310db4",
// "SuvIconImageId": "a411185f-51a5-486a-a26b-0aec40114074",
// "GenericVehicleImage": "https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/blurred-image.jpg?sfvrsn=a6ce3034_3",
// "GenericVehicleImageFilePath": "images/default-source/default-album/blurred-image.jpg",
// "CarUnmatchedVehicleIcon": "https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/icons/car-placeholder.jpg?sfvrsn=25acf847_6",
// "TruckUnmatchedVehicleIcon": "https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/icons/truck-placeholder.jpg?sfvrsn=a001f519_6",
// "VanUnmatchedVehicleIcon": "https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/icons/van-placeholder.jpg?sfvrsn=fcf77dd5_6",
// "CommercialVanUnmatchedVehicleIcon": "https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/icons/commercial-placeholder.jpg?sfvrsn=3aedc8d2_6",
// "SuvUnmatchedVehicleIcon": "https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/icons/suv-placeholder.jpg?sfvrsn=4bdeea2b_6"
// },
// "FunnelSubHeaderWidget": {
// "HeaderText": "2014 Jeep Cherokee",
// "HeaderSubText": "4 door utility"
// },
// "FoundMultipleVehicles": {
// "HeadlineText": "We found {custom:vehicleCount} vehicles linked to the address you provided.",
// "BodyText": "",
// "OptionalImage": ""
// },
// "VehicleConfirmationQuestion": {
// "QuestionText": "Confirm which vehicle has glass damage",
// "Answers": []
// },
// "FoundWindshield": {
// "HeadlineText": "We found a {custom:damage}!",
// "BodyText": "<p style=\"text-align:center;\">We found a {custom:damage}, but the vehicle you selected is not the same vehicle you originally entered.</p><p style=\"text-align:center;\">If this selection is correct, please continue scheduling with your {custom:vinlookupYear} {custom:vinlookupMake} {custom:vinlookupModel}.</p>",
// "OptionalImage": ""
// },
// "ProvideVinAlert": {
// "HeadlineText": "",
// "BodyText": "<p style=\"text-align:center;\">Don't see your vehicle? Re-enter the information on the previous page or {routerLink:clickedChangeVinLookupMethod,provide your VIN} in a different way.</p>",
// "OptionalImage": ""
// },
// "FunnelFooterWidget": {
// "BackButtonText": "Back",
// "ForwardButtonText": "Get my personalized quote"
// }
// }
// Call the "next" function to complete the transition to this page.
next((vm) => {
vm.setCmsContent(resultMap.cmsContent);
});
},
props: {
validationRules: String,
},
data() {
return {
matchedDifferentVehicle: false,
noMatchAlert: false,
noServiceZip: false,
vinFound: false,
vinFoundReadOnly: false,
foundWindshieldAlert: false,
vinNotFound: false,
perfectMatchNewVinAlert: false,
vin: '',
zip: '',
email: '',
customAlertData: {},
};
},
computed: {
PartsForQuestions() {
return [];
// const partsData = this.PartsFromApi;
// // Map API result data, to vehicle-parts data structure
// const mappedData = partsData.partsOrQuestions.map((g) => {
// return {
// glassName: g.glassName,
// glassLocation: g.glassLocation,
// colorAnswers: g.parts.reduce((arr, p) => {
// arr.push({
// ColorAnswerText: p.color,
// FeatureAnswers: [
// {
// FeatureAnswerText:
// p.description === "" ? p.color : p.description,
// PartNumber: p.partNumber,
// },
// ],
// });
// return arr;
// }, []),
// };
// });
// return mappedData;
},
PartsFromApi() {
return store.getters.pageData(fmgPageValues.VEHICLE_PARTS);
},
isVinFieldReadOnly(){
return this.$store.getters.payment.insuranceCoverage.isVerified;
}
},
methods: {
arePagePrerequisitesValid() {
if (
store.getters.order.vehicle.carId
// && store.getters.order.serviceLocation.zip // TODO - NEEDS TO BE INCLUDED
// && store.getters.order.customer.emailAddress // TODO - NEEDS TO BE INCLUDED
// && vehicles passed in via pageData // TODO - NEEDS TO BE INCLUDED
) {
return true;
}
return false;
},
// resetDependentState() {
// store.commit(storeMutations.UPDATE_REGISTRATION_ADDRESS, null);
// store.commit(storeMutations.UPDATE_REGISTRATION_CITY, null);
// store.commit(storeMutations.UPDATE_REGISTRATION_FIRST_NAME, null);
// store.commit(storeMutations.UPDATE_REGISTRATION_LAST_NAME, null);
// store.dispatch(storeActions.RESET_PARTS_STATE_AND_DEPENDENCIES);
// },
backButtonAction() {
this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
},
async forwardButtonAction() {
const zipValidation = await this.validateZip(this.zip);
if (!zipValidation.data.isServiceable) {
this.customAlertData.zip = this.zip;
this.$refs.funnelFooter.removeLoader();
this.noServiceZip = true;
return;
}
const vinLookup = await this.lookupVin(this.vin).catch(() => {
this.$refs.funnelFooter.removeLoader();
this.noMatchAlert = true;
return;
});
if (vinLookup.data.carId !== store.getters.vehicle.carId) {
this.customAlertData.vehicleInfo = vinLookup.data.vehicle;
this.$refs.funnelFooter.removeLoader();
this.foundWindshieldAlert = true;
return;
}
const carInfo = this.vinDoesNotMatchCarId ? vinLookup.data : store.getters.vehicle;
this.updateStore(carInfo)
const partsData = await baseMixin.methods.dispatchNonBlockingStoreAction(
this.storeActions.GET_PARTS_OR_QUESTIONS,
{
carId: store.getters.vehicle.carId,
glassArray: store.getters.damage.glassToReplace,
zipCode: this.zip,
vin: vinLookup.vin
},
false
);
this.navigateForward(partsData);
},
navigateForward(partsData){
if(partsData.data.partsOrQuestions[0].partQuestions && partsData.data.partsOrQuestions[0].partQuestions.length > 0){
this.$router.navigateAfterSave(this.navigationScenarios.CONTINUING_WITH_PARTS_QUESTION, this.$route, {}, {}, partsData.data);
return;
} else if((!partsData.data.partsOrQuestions[0].partQuestions || partsData.data.partsOrQuestions[0].partQuestions.length < 1) && partsData.data.partsOrQuestions[0].parts.length > 1) {
this.$router.navigateAfterSave(this.navigationScenarios.CONTINUING_WITH_MULTIPLE_PARTS, this.$route, {}, {}, partsData.data);
return;
} else {
this.$router.navigate(this.navigationScenarios.CONTINUING_WITH_SINGLE_PART, this.$route);
}
},
validateZip(zip) {
return baseMixin.methods.dispatchNonBlockingStoreAction(
storeActions.VALIDATE_ZIP,
{ zip }
);
},
lookupVin(vin) {
return baseMixin.methods.dispatchNonBlockingStoreAction(
storeActions.LOOKUP_VEHICLE_BY_VIN,
{ vin }
);
},
updateStore(carInfo) {
// if(vehicleDamage){
// store.dispatch(storeActions.RESET_DAMAGE_STATE_AND_DEPENDENCIES);
// }
store.commit(storeMutations.UPDATE_VEHICLE_VIN, this.vin);
store.commit(storeMutations.UPDATE_YEAR, carInfo.year);
store.commit(storeMutations.UPDATE_MAKE, carInfo.make);
store.commit(storeMutations.UPDATE_MODEL, carInfo.model);
store.commit(storeMutations.UPDATE_STYLE, carInfo.style);
store.commit(storeMutations.UPDATE_CAR_ID, carInfo.carId);
store.commit(storeMutations.UPDATE_VEHICLE_CATEGORY, carInfo.category);
store.commit(storeMutations.UPDATE_VEHICLE_IMAGE_URL, carInfo.imageUrl);
store.commit(storeMutations.UPDATE_VEHICLE_IMAGE_VIF_NUMBER, carInfo.imageVifNumber);
store.commit(storeMutations.UPDATE_VEHICLE_IMAGE_COLOR, carInfo.imageColor);
store.commit(storeMutations.UPDATE_SERVICE_LOCATION_ZIP, this.zip);
store.commit(storeMutations.UPDATE_CUSTOMER_EMAIL_ADDRESS, this.email);
},
},
components: {
Form,
funnelHeader,
vehicleBanner,
funnelSubHeader,
textboxQuestion,
alert,
funnelFooter,
vinInformation,
},
};
</script>

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

@ -171,7 +171,20 @@ const routingTable = [
destinationFmgPageValue: fmgPageValues.VEHICLE_DAMAGE,
},
],
},
},
{
fmgPageValue: fmgPageValues.ADDRESS_VEHICLES,
maps: [
{
scenario: navigationScenarios.CLICKED_BACK,
destinationFmgPageValue: fmgPageValues.ADDRESS_LOOKUP,
},
{
scenario: navigationScenarios.CLICKED_FORWARD,
destinationFmgPageValue: fmgPageValues.VEHICLE_DAMAGE,
},
],
},
];
export { routingTable };