Merge branch 'feature/CSR-92' into CSR-101-vin-lookup
This commit is contained in:
bmauger
commit
9623fd80bb
6 changed files with 222 additions and 49 deletions
|
|
@ -13,7 +13,6 @@ module.exports = {
|
|||
"!src/helpers/unit-test-helper.js",
|
||||
"!src/layouts/component-test/component-test.vue",
|
||||
"!src/layouts/form-test/form-test.vue",
|
||||
"!src/layouts/license-plate-lookup/license-plate-lookup.vue",
|
||||
"!src/layouts/vin-lookup/vin-lookup.vue",
|
||||
"!src/layouts/vehicle-damage/windshield-damage-type-question/windshield-damage-type-question.vue",
|
||||
"!src/layouts/vehicle-damage/windshield-options/windshield-options.vue",
|
||||
|
|
|
|||
|
|
@ -1,10 +1,19 @@
|
|||
import store from "@/store";
|
||||
import baseMixin from "@/mixins/base-mixin.js";
|
||||
import { storeActions } from "@/constants/store-actions";
|
||||
|
||||
export function getDamageString() {
|
||||
return store.getters.damage.glassToReplace.length > 1 ? "match" : store.getters.damage.glassToReplace[0].location;
|
||||
}
|
||||
|
||||
export function compareGlassOptions(newOptions, currentOptions){
|
||||
export async function isGlassAvailableForCarId(carId){
|
||||
const newGlassOptions = await baseMixin.methods.dispatchNonBlockingStoreAction(
|
||||
storeActions.GET_DAMAGE_OPTIONS,
|
||||
{ carId: carId }
|
||||
);
|
||||
|
||||
const currentGlassOptions = store.getters.damage.glassToReplace;
|
||||
|
||||
const optionsMap = {
|
||||
Windshield: "windshieldOptions",
|
||||
Driver: "driverSideOptions",
|
||||
|
|
@ -12,11 +21,11 @@ export function compareGlassOptions(newOptions, currentOptions){
|
|||
Rear: "backGlassOptions"
|
||||
}
|
||||
|
||||
for(const option of currentOptions){
|
||||
if(!newOptions[optionsMap[option.location]].availableReplacementOptions.includes(option.name)){
|
||||
return true;
|
||||
for(const option of currentGlassOptions){
|
||||
if(!newGlassOptions.data[optionsMap[option.location]].availableReplacementOptions.includes(option.name)){
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
return false;
|
||||
return true;
|
||||
}
|
||||
|
|
@ -53,6 +53,21 @@ export async function navigateToHeritageFunnel() {
|
|||
);
|
||||
}
|
||||
|
||||
export async function navigateAfterSaveToHeritageFunnel(currentRoute) {
|
||||
const currentComponent = currentRoute.matched[0].components;
|
||||
currentComponent.default.methods.resetDependentState();
|
||||
// Create the order (or save existing order) when navigating to Heritage Funnel.
|
||||
await saveOrder();
|
||||
|
||||
router.navigateToExternalUrl(
|
||||
externalUrls.HERITAGE_FUNNEL,
|
||||
{
|
||||
corid: store.getters.order.referralCorrelationId,
|
||||
src: "concept-funnel"
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
/*
|
||||
Logic for getting the last "valid" page a user visited.
|
||||
*/
|
||||
|
|
@ -78,7 +93,7 @@ async function getLatestPageForRedirection() {
|
|||
return fmgPageValues.VEHICLE_DAMAGE;
|
||||
} else {
|
||||
if (store.getters.vehicle.vin) {
|
||||
return fmgPageValues.VIN_LOOKUP;
|
||||
return fmgPageValues.LICENSE_PLATE_LOOKUP;
|
||||
} else {
|
||||
return fmgPageValues.ESTIMATE;
|
||||
}
|
||||
|
|
|
|||
135
src/layouts/license-plate-lookup/license-plate-lookup.spec.js
Normal file
135
src/layouts/license-plate-lookup/license-plate-lookup.spec.js
Normal file
|
|
@ -0,0 +1,135 @@
|
|||
// Components
|
||||
import vehicleDamage from "@/layouts/license-plate-lookup/license-plate-lookup.vue";
|
||||
|
||||
// Supporting Files
|
||||
import { settleAllPromises } from "@/helpers/layout-helper.js";
|
||||
import baseMixin from "@/mixins/base-mixin";
|
||||
import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
|
||||
import { shallowMount, flushPromises } from "@vue/test-utils";
|
||||
import { getMountOptions } from "@/helpers/unit-test-helper.js";
|
||||
import { nextTick } from "vue";
|
||||
import { storeActions } from "@/constants/store-actions";
|
||||
import { storeMutations } from "@/constants/store-mutations";
|
||||
import store from "@/store";
|
||||
import { validate } from "vee-validate";
|
||||
|
||||
// Mock our module for promises.
|
||||
jest.mock("@/helpers/layout-helper.js", () => ({
|
||||
settleAllPromises: jest.fn(),
|
||||
}));
|
||||
|
||||
// Mock fetchCmsContentForPage
|
||||
jest.mock("@/helpers/cms-content-helper", () => ({
|
||||
fetchCmsContentForPage: jest.fn(),
|
||||
}));
|
||||
|
||||
// Mock Store
|
||||
jest.mock("@/store", () => ({
|
||||
commit: jest.fn(),
|
||||
dispatch: jest.fn(),
|
||||
getters: {
|
||||
vehicle: {
|
||||
carId: "C00000000",
|
||||
image: "test.jpg",
|
||||
payment: {
|
||||
insuranceCoverage: {
|
||||
isVerified: false
|
||||
}
|
||||
}
|
||||
},
|
||||
eventBusItem: jest.fn(),
|
||||
damage: {
|
||||
glassToReplace: []
|
||||
},
|
||||
},
|
||||
}));
|
||||
|
||||
describe("license-plate-lookup.vue", () => {
|
||||
test("CarId set, arePagePrerequisitesValid should be true ", async () => {
|
||||
//Arrange
|
||||
const { wrapper } = setupMocks({});
|
||||
|
||||
//Act
|
||||
vehicleDamage.beforeRouteEnter.call(
|
||||
wrapper.vm,
|
||||
{ query: { fmgPage: "vehicle-damage" } },
|
||||
undefined,
|
||||
(c) => c(wrapper.vm)
|
||||
);
|
||||
|
||||
let arePagePrerequisitesValid = wrapper.vm.arePagePrerequisitesValid();
|
||||
await nextTick();
|
||||
|
||||
//Assert
|
||||
expect(arePagePrerequisitesValid).toBe(true);
|
||||
});
|
||||
});
|
||||
|
||||
describe("license-plate-lookup.vue", () => {
|
||||
test("BackButtonAction triggers a router.navigate change", async () => {
|
||||
|
||||
//Arrange
|
||||
const { wrapper } = setupMocks({});
|
||||
|
||||
//Act
|
||||
vehicleDamage.beforeRouteEnter.call(
|
||||
wrapper.vm,
|
||||
{ query: { fmgPage: "vehicle-damage" } },
|
||||
undefined,
|
||||
(c) => c(wrapper.vm)
|
||||
);
|
||||
|
||||
wrapper.vm.backButtonAction();
|
||||
|
||||
//Assert
|
||||
expect(wrapper.vm.$router.navigate).toHaveBeenCalled();
|
||||
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
function setupMocks({
|
||||
pageHeaderWidgetHeaderText = {},
|
||||
mountOptionsMockData = {
|
||||
router: {
|
||||
navigate: jest.fn(),
|
||||
},
|
||||
store: {
|
||||
getters: {
|
||||
vehicle: {},
|
||||
payment: { insuranceCoverage: { isVerified: false } },
|
||||
},
|
||||
},
|
||||
},
|
||||
}) {
|
||||
//Mock api responses
|
||||
baseMixin.methods.dispatchNonBlockingStoreAction = jest.fn();
|
||||
const apiResponses = {
|
||||
cmsContent: {
|
||||
FunnelSubHeaderWidget: pageHeaderWidgetHeaderText,
|
||||
VehicleBannerWidget: {
|
||||
GenericVehicleImage:
|
||||
"https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/blurred-image.jpg?sfvrsn=a6ce3034_3",
|
||||
},
|
||||
FunnelHeaderWidget: {
|
||||
LogoImage:
|
||||
"https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/safelite-logo.svg?sfvrsn=45e7ed06_3",
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
const apiPromise = Promise.resolve(apiResponses);
|
||||
|
||||
settleAllPromises.mockImplementation(() => apiPromise);
|
||||
fetchCmsContentForPage.mockImplementation(() => Promise.resolve());
|
||||
|
||||
|
||||
const mountOptions = getMountOptions(mountOptionsMockData);
|
||||
mountOptions['attachTo'] = document.body; // append wrapper to document.body to test DOM methods
|
||||
|
||||
const wrapper = shallowMount(vehicleDamage, mountOptions);
|
||||
|
||||
wrapper.vm.setCmsContent = baseMixin.methods.setCmsContent;
|
||||
|
||||
return { wrapper, apiPromise };
|
||||
}
|
||||
|
|
@ -11,42 +11,42 @@
|
|||
<funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" />
|
||||
<div class="row my-2">
|
||||
<div class="col">
|
||||
<textboxQuestion cmsWidgetName="LicensePlateNumber" v-model="licensePlate" inputId="license_plate" disableAutoFill validationRules="license-plate-required" />
|
||||
<textboxQuestion cmsWidgetName="LicensePlateNumber" v-model="licensePlate" inputId="license_plate" validationRules="license-plate-required" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="row my-2">
|
||||
<div class="col">
|
||||
<textboxQuestion cmsWidgetName="RegistrationZip" v-model="zip" inputId="zip" mask="#####" disableAutoFill validationRules="zip-required" />
|
||||
<textboxQuestion cmsWidgetName="RegistrationZip" v-model="registrationZip" inputId="zip" mask="#####" validationRules="zip-required" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="row my-2">
|
||||
<div class="col">
|
||||
<textboxQuestion cmsWidgetName="EmailAddress" v-model="email" inputId="email" disableAutoFill validationRules="email-address-required|email-address-format" />
|
||||
<textboxQuestion cmsWidgetName="EmailAddress" v-model="email" inputId="email" validationRules="email-address-required|email-address-format" />
|
||||
</div>
|
||||
</div>
|
||||
<alert
|
||||
class="my-3"
|
||||
:manualHeadline="NoServiceZipHeader"
|
||||
:manualCopy="NoServiceZipBody"
|
||||
v-if="newServiceZipRequired"
|
||||
v-if="!isRegistrationZipIServicable"
|
||||
alertClass="alert-danger"
|
||||
/>
|
||||
<alert
|
||||
class="my-3"
|
||||
cmsWidgetName="NoMatchAlertWidget"
|
||||
v-if="vinNotValid"
|
||||
v-if="!isVinValid"
|
||||
alertClass="alert-danger"
|
||||
/>
|
||||
<alert
|
||||
class="my-3"
|
||||
:manualHeadline="MatchedDifferentVehicleAlertHeader"
|
||||
:manualCopy="MatchedDifferentVehicleAlertBody"
|
||||
v-if="vinDoesNotMatchCarId"
|
||||
v-if="isCarIdDifferent"
|
||||
alertClass="alert-warning"
|
||||
/>
|
||||
<div class="row my-2">
|
||||
<div class="col">
|
||||
<textboxQuestion v-if="newServiceZipRequired" cmsWidgetName="ServiceZip" v-model="serviceZip" inputId="serviceZip" disableAutoFill validationRules="zip-required" />
|
||||
<textboxQuestion v-if="!isRegistrationZipIServicable" cmsWidgetName="ServiceZip" v-model="serviceZip" inputId="serviceZip" validationRules="zip-required" />
|
||||
</div>
|
||||
</div>
|
||||
<funnelFooter
|
||||
|
|
@ -77,10 +77,10 @@ import baseMixin from "@/mixins/base-mixin.js";
|
|||
import { storeActions } from "@/constants/store-actions";
|
||||
import { storeMutations } from "@/constants/store-mutations";
|
||||
import { errorMessages } from "@/constants/error-messages";
|
||||
import { getDamageString, compareGlassOptions } from "@/helpers/damage-helper";
|
||||
import { getDamageString, isGlassAvailableForCarId } from "@/helpers/damage-helper";
|
||||
import { required, regex } from "@/helpers/validation-rules";
|
||||
import { Form, defineRule } from "vee-validate";
|
||||
import { navigateToHeritageFunnel } from "@/helpers/heritage-integration/navigation-helper";
|
||||
import { navigateAfterSaveToHeritageFunnel } from "@/helpers/heritage-integration/navigation-helper";
|
||||
|
||||
// DEFINE VALIDATION RULES
|
||||
defineRule("license-plate-required", required(errorMessages.LICENSE_PLATE_REQUIRED));
|
||||
|
|
@ -115,17 +115,16 @@ export default {
|
|||
},
|
||||
data() {
|
||||
return {
|
||||
newServiceZipRequired: false,
|
||||
vinNotValid: false,
|
||||
vinDoesNotMatchCarId: false,
|
||||
isRegistrationZipIServicable: true,
|
||||
isVinValid: true,
|
||||
isCarIdDifferent: false,
|
||||
licensePlate: '',
|
||||
zip: '',
|
||||
registrationZip: '',
|
||||
email: '',
|
||||
serviceZip: '',
|
||||
carIdEntered: '',
|
||||
previouslyEnteredCarId: '',
|
||||
customAlertData: {},
|
||||
newCarId: false,
|
||||
glassOptionsMismatch: false,
|
||||
isSelectedGlassAvailableForVehicle: true,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
|
|
@ -140,19 +139,22 @@ export default {
|
|||
return text;
|
||||
},
|
||||
NoServiceZipHeader(){
|
||||
let text = this.getCmsContent("NoServiceZipWidget", "HeadlineText").replaceAll("{custom:zip}", this.zip);
|
||||
let text = this.getCmsContent("NoServiceZipWidget", "HeadlineText").replaceAll("{custom:zip}", this.registrationZip);
|
||||
|
||||
return text;
|
||||
},
|
||||
NoServiceZipBody(){
|
||||
return this.getCmsContent("NoServiceZipWidget", "BodyText");
|
||||
}
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
arePagePrerequisitesValid() {
|
||||
return store.getters.vehicle.carId !== null;
|
||||
},
|
||||
resetDependentState() {
|
||||
if(this.isCarIdDifferent && !this.isSelectedGlassAvailableForVehicle){
|
||||
store.dispatch(storeActions.RESET_DAMAGE_STATE_AND_DEPENDENCIES);
|
||||
}
|
||||
store.commit(storeMutations.UPDATE_REGISTRATION_ADDRESS, null);
|
||||
store.commit(storeMutations.UPDATE_REGISTRATION_CITY, null);
|
||||
store.commit(storeMutations.UPDATE_REGISTRATION_FIRST_NAME, null);
|
||||
|
|
@ -163,36 +165,31 @@ export default {
|
|||
this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
|
||||
},
|
||||
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.registrationZip);
|
||||
if (!zipValidation.data.isServiceable) {
|
||||
this.customAlertData.zip = this.zip;
|
||||
this.$refs.funnelFooter.removeLoader();
|
||||
this.vinDoesNotMatchCarId = false;
|
||||
this.vinNotValid = false;
|
||||
this.newServiceZipRequired = true;
|
||||
this.isVinValid = true;
|
||||
this.isRegistrationZipIServicable = false;
|
||||
this.isCarIdDifferent = false;
|
||||
return;
|
||||
}
|
||||
|
||||
const vinLookup = await this.lookupVin(this.licensePlate, zipValidation.data.state).catch(() => {
|
||||
this.$refs.funnelFooter.removeLoader();
|
||||
this.vinDoesNotMatchCarId = false;
|
||||
this.vinNotValid = true;
|
||||
this.isVinValid = false;
|
||||
this.isCarIdDifferent = false;
|
||||
return;
|
||||
});
|
||||
|
||||
if ((vinLookup.data.vehicle.carId !== store.getters.vehicle.carId) && (vinLookup.data.vehicle.carId !== this.carIdEntered)) {
|
||||
this.carIdEntered = vinLookup.data.vehicle.carId;
|
||||
this.isCarIdDifferent = vinLookup.data.vehicle.carId !== store.getters.vehicle.carId;
|
||||
|
||||
if (this.isCarIdDifferent && (vinLookup.data.vehicle.carId !== this.previouslyEnteredCarId)) {
|
||||
this.previouslyEnteredCarId = vinLookup.data.vehicle.carId;
|
||||
this.customAlertData.vehicleInfo = vinLookup.data.vehicle;
|
||||
this.newCarId = true;
|
||||
const glassOptions = await baseMixin.methods.dispatchNonBlockingStoreAction(
|
||||
storeActions.GET_DAMAGE_OPTIONS,
|
||||
{ carId: vinLookup.data.vehicle.carId }
|
||||
);
|
||||
this.glassOptionsMismatch = compareGlassOptions(glassOptions.data, store.getters.damage.glassToReplace);
|
||||
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.vehicle.year} ${vinLookup.data.vehicle.make} ${vinLookup.data.vehicle.model}`);
|
||||
this.isVinValid = true;
|
||||
this.isSelectedGlassAvailableForVehicle = await isGlassAvailableForCarId(vinLookup.data.vehicle.carId);
|
||||
this.$refs.funnelFooter.removeLoader();
|
||||
this.vinNotValid = false;
|
||||
this.vinDoesNotMatchCarId = true;
|
||||
return;
|
||||
}
|
||||
|
||||
|
|
@ -202,8 +199,8 @@ export default {
|
|||
this.storeActions.GET_PARTS_OR_QUESTIONS,
|
||||
{
|
||||
carId: vinLookup.data.vehicle.carId,
|
||||
glassArray: store.getters.damage.glassToReplace ? store.getters.damage.glassToReplace : [],
|
||||
zipCode: this.serviceZip ? this.serviceZip : this.zip,
|
||||
glassArray: this.isCarIdDifferent && !this.isSelectedGlassAvailableForVehicle ? [] : store.getters.damage.glassToReplace,
|
||||
zipCode: this.serviceZip ? this.serviceZip : this.registrationZip,
|
||||
vin: vinLookup.data.vin
|
||||
},
|
||||
false
|
||||
|
|
@ -211,11 +208,11 @@ export default {
|
|||
this.navigateForward(partsData);
|
||||
},
|
||||
navigateForward(partsData){
|
||||
if(this.newCarId && this.glassOptionsMismatch){
|
||||
if(this.isCarIdDifferent && !this.isSelectedGlassAvailableForVehicle){
|
||||
this.$router.navigateAfterSave(this.navigationScenarios.CLICKED_FORWARD, this.$route, {}, { displayVehicleChangeAlert: true }, partsData.data);
|
||||
return;
|
||||
} else {
|
||||
navigateToHeritageFunnel();
|
||||
navigateAfterSaveToHeritageFunnel(this.$route);
|
||||
return;
|
||||
}
|
||||
},
|
||||
|
|
@ -232,7 +229,7 @@ export default {
|
|||
);
|
||||
},
|
||||
updateCustomerInfo(vin, vehicleInfo, registrationState) {
|
||||
if(this.newCarId && this.glassOptionsMismatch){
|
||||
if(this.isCarIdDifferent && !this.isSelectedGlassAvailableForVehicle){
|
||||
store.dispatch(storeActions.RESET_DAMAGE_STATE_AND_DEPENDENCIES);
|
||||
}
|
||||
store.commit(storeMutations.UPDATE_VEHICLE_VIN, vin);
|
||||
|
|
@ -247,7 +244,7 @@ export default {
|
|||
store.commit(storeMutations.UPDATE_VEHICLE_IMAGE_COLOR, vehicleInfo.imageColor);
|
||||
store.commit(storeMutations.UPDATE_REGISTRATION_LICENSE_PLATE, this.licensePlate);
|
||||
store.commit(storeMutations.UPDATE_REGISTRATION_STATE, registrationState);
|
||||
store.commit(storeMutations.UPDATE_REGISTRATION_ZIP_CODE, this.zip);
|
||||
store.commit(storeMutations.UPDATE_REGISTRATION_ZIP_CODE, this.registrationZip);
|
||||
store.commit(storeMutations.UPDATE_SERVICE_LOCATION_ZIP, this.serviceZip);
|
||||
store.commit(storeMutations.UPDATE_CUSTOMER_EMAIL_ADDRESS, this.email);
|
||||
},
|
||||
|
|
@ -255,6 +252,12 @@ export default {
|
|||
watch: {
|
||||
licensePlate() {
|
||||
this.$refs.funnelFooter.updateButtonText(this.getCmsContent("FunnelFooterWidget", "ForwardButtonText"));
|
||||
},
|
||||
registrationZip(){
|
||||
this.$refs.funnelFooter.updateButtonText(this.getCmsContent("FunnelFooterWidget", "ForwardButtonText"));
|
||||
},
|
||||
serviceZip(){
|
||||
this.$refs.funnelFooter.updateButtonText(this.getCmsContent("FunnelFooterWidget", "ForwardButtonText"));
|
||||
}
|
||||
},
|
||||
components: {
|
||||
|
|
|
|||
|
|
@ -141,9 +141,21 @@ export const mutations = {
|
|||
updateRegistrationZipCode(state, reistrationZipCode){
|
||||
state.order.vehicle.registration.zipCode = reistrationZipCode;
|
||||
},
|
||||
updateRegistrationAddress(state, reistrationAddress){
|
||||
state.order.vehicle.registration.address = reistrationAddress;
|
||||
},
|
||||
updateServiceLocationZip(state, serviceLocationZip){
|
||||
state.order.serviceLocation.zip = serviceLocationZip;
|
||||
},
|
||||
updateRegistrationCity(state, serviceCity){
|
||||
state.order.serviceLocation.city = serviceCity;
|
||||
},
|
||||
updateRegistrationFirstName(state, firstName){
|
||||
state.order.serviceLocation.firstName = firstName;
|
||||
},
|
||||
updateRegistrationLastName(state, lastName){
|
||||
state.order.serviceLocation.lastName = lastName;
|
||||
},
|
||||
updateCustomerEmailAddress(state, customerEmailAddress){
|
||||
state.order.customer.emailAddress = customerEmailAddress;
|
||||
},
|
||||
|
|
|
|||
Loading…
Reference in a new issue