Merge branch 'develop' into feature/SSR-199
This commit is contained in:
Johan Gunawan
commit
0f49d601cb
9 changed files with 455 additions and 369 deletions
|
|
@ -44,7 +44,7 @@
|
|||
<button v-if="includeSelectIcon" type="submit" data-bs-toggle="modal"
|
||||
:data-bs-target="'#' + this.cmsWidgetName" aria-label="Select button" />
|
||||
</div>
|
||||
<div v-show="errorMessage" class="row my-2 form-test-error">
|
||||
<div v-show="errorMessage" class="row my-2 form-test-error mb-0">
|
||||
<span class="d-inline-flex mt-0" role="alert">{{ errorMessage }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,61 +0,0 @@
|
|||
/* eslint-env jest */
|
||||
import { getDamageString } from '@/helpers/damage-helper';
|
||||
import vehicleLookupAlertTypes from '@/constants/vehicle-lookup-alert-types';
|
||||
import { RouterLinkStub } from '@vue/test-utils';
|
||||
import { render } from '@testing-library/vue';
|
||||
import '@testing-library/jest-dom';
|
||||
import LicensePlateLookupAlertsComponent from '@/layouts/license-plate-lookup/license-plate-lookup-alerts/license-plate-lookup-alerts.vue';
|
||||
|
||||
jest.mock('@/helpers/damage-helper');
|
||||
|
||||
const mountOptions = {
|
||||
global: {
|
||||
stubs: {
|
||||
RouterLink: RouterLinkStub,
|
||||
},
|
||||
mixins: [
|
||||
{
|
||||
methods: {
|
||||
getCmsContent: jest.fn(() => ''),
|
||||
getFooterInfoBoxHeight: jest.fn(() => 80),
|
||||
cssClassNameForCmsWidget: jest.fn(() => 'widget-name-mock-class'),
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
|
||||
describe('license-plate-lookup-alerts.vue', () => {
|
||||
test('VehicleNotFoundAlert is displayed on the screen', () => {
|
||||
// Arrange
|
||||
mountOptions.props = {
|
||||
activeAlertType: vehicleLookupAlertTypes.NOT_FOUND,
|
||||
};
|
||||
|
||||
// Act
|
||||
const { queryByRole } = render(LicensePlateLookupAlertsComponent, mountOptions);
|
||||
const vehicleNotFoundAlert = queryByRole('alert', { name: 'vehicle-not-found-alert' });
|
||||
const vehicleNotMatchedAlert = queryByRole('alert', { name: 'vehicle-not-matched-alert'});
|
||||
|
||||
// Assert
|
||||
expect(vehicleNotFoundAlert).toBeVisible();
|
||||
expect(vehicleNotMatchedAlert).toEqual(null);
|
||||
});
|
||||
|
||||
test('VehicleNotMatchedAlert is displayed on the screen', () => {
|
||||
// Arrange
|
||||
getDamageString.mockImplementation(() => 'Mock Damage String');
|
||||
mountOptions.props = {
|
||||
activeAlertType: vehicleLookupAlertTypes.NOT_MATCHED,
|
||||
};
|
||||
|
||||
// Act
|
||||
const { queryByRole } = render(LicensePlateLookupAlertsComponent, mountOptions);
|
||||
const vehicleNotFoundAlert = queryByRole('alert', { name: 'vehicle-not-found-alert' });
|
||||
const vehicleNotMatchedAlert = queryByRole('alert', { name: 'vehicle-not-matched-alert'});
|
||||
|
||||
// Assert
|
||||
expect(vehicleNotMatchedAlert).toBeVisible();
|
||||
expect(vehicleNotFoundAlert).toEqual(null);
|
||||
});
|
||||
})
|
||||
|
|
@ -1,50 +0,0 @@
|
|||
<template>
|
||||
<div
|
||||
id="vin-lookup-alerts-wrapper"
|
||||
:class="wrapperCssClass"
|
||||
>
|
||||
<vehicleNotFoundAlert
|
||||
v-if="isVehicleNotFoundVisible"
|
||||
/>
|
||||
<vehicleNotMatchedAlert
|
||||
v-else-if="isVehicleNotMatchedVisible"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import vehicleLookupAlertTypes from '@/constants/vehicle-lookup-alert-types';
|
||||
import vehicleNotFoundAlert from './vehicle-not-found-alert/vehicle-not-found-alert.vue';
|
||||
import vehicleNotMatchedAlert from './vehicle-not-matched-alert/vehicle-not-matched-alert.vue';
|
||||
|
||||
export default {
|
||||
name: 'license-plate-lookup-alerts',
|
||||
components: {
|
||||
vehicleNotFoundAlert,
|
||||
vehicleNotMatchedAlert,
|
||||
},
|
||||
props: {
|
||||
activeAlertType: {
|
||||
type: String,
|
||||
validator(value) {
|
||||
const acceptedValues = [null];
|
||||
acceptedValues.push(...Object.values(vehicleLookupAlertTypes));
|
||||
return acceptedValues.includes(value);
|
||||
},
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
isVehicleNotFoundVisible() {
|
||||
return this.activeAlertType === vehicleLookupAlertTypes.NOT_FOUND;
|
||||
},
|
||||
isVehicleNotMatchedVisible() {
|
||||
return this.activeAlertType === vehicleLookupAlertTypes.NOT_MATCHED;
|
||||
},
|
||||
wrapperCssClass() {
|
||||
return {
|
||||
'mb-5': this.activeAlertType !== null,
|
||||
};
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
|
|
@ -1,27 +0,0 @@
|
|||
<template>
|
||||
<alert
|
||||
alertClass="alert-danger"
|
||||
cmsWidgetName="AlertVinNotFoundWidget"
|
||||
id="vehicle-not-found-alert"
|
||||
aria-label="vehicle-not-found-alert"
|
||||
/>
|
||||
</template>
|
||||
<script>
|
||||
import alert from '@/ux-components/alert/alert.vue';
|
||||
|
||||
export default {
|
||||
name: 'vehicle-not-found-alert',
|
||||
components: {
|
||||
alert,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style>
|
||||
/**
|
||||
Override wrong margin-bottom rule in the Alert component.
|
||||
*/
|
||||
#vehicle-not-found-alert p:last-of-type {
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
|
@ -1,50 +0,0 @@
|
|||
<template>
|
||||
<alert
|
||||
alertClass="alert-warning"
|
||||
cmsWidgetName="AlertMatchedDifferentVehicleWidget"
|
||||
:manualCopy="body"
|
||||
:manualHeadline="header"
|
||||
aria-label="vehicle-not-matched-alert"
|
||||
/>
|
||||
</template>
|
||||
<script>
|
||||
import { getDamageString } from '@/helpers/damage-helper';
|
||||
|
||||
import alert from '@/ux-components/alert/alert.vue';
|
||||
|
||||
export default {
|
||||
name: 'vehicle-not-matched-alert',
|
||||
components: {
|
||||
alert,
|
||||
},
|
||||
inject: ['vehicleFromLookup'],
|
||||
computed: {
|
||||
header() {
|
||||
return (
|
||||
this.getCmsContent('AlertMatchedDifferentVehicleWidget', 'HeadlineText')
|
||||
.replaceAll('{custom:damage}', getDamageString())
|
||||
);
|
||||
},
|
||||
body() {
|
||||
let year = '';
|
||||
let make = '';
|
||||
let model = '';
|
||||
|
||||
if (this.vehicleFromLookup) {
|
||||
year = this.vehicleFromLookup.year;
|
||||
make = this.vehicleFromLookup.make;
|
||||
model = this.vehicleFromLookup.model;
|
||||
}
|
||||
|
||||
return (
|
||||
this.getCmsContent('AlertMatchedDifferentVehicleWidget', 'BodyText')
|
||||
.replaceAll('{custom:damage}', getDamageString())
|
||||
.replaceAll('{custom:vinlookupYear}', year)
|
||||
.replaceAll('{custom:vinlookupMake}', make)
|
||||
.replaceAll('{custom:vinlookupModel}', model)
|
||||
);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
|
|
@ -1,49 +1,81 @@
|
|||
// Components
|
||||
import licensePlateLookup from "@/layouts/license-plate-lookup/license-plate-lookup.vue";
|
||||
|
||||
// Supporting files
|
||||
import { shallowMount } from '@vue/test-utils';
|
||||
// Supporting Files
|
||||
import { settleAllPromises } from "@/helpers/layout-helper.js";
|
||||
import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
|
||||
import baseMixin from "@/mixins/base-mixin.js";
|
||||
import { shallowMount } from "@vue/test-utils";
|
||||
import { getMountOptions } from "@/helpers/unit-test-helper.js";
|
||||
import { nextTick } from "vue";
|
||||
import { useMainStore } from "@/store";
|
||||
import { applicationConfig } from "@/constants/application-config";
|
||||
import { navigationScenarios } from "@/router/router-constants/navigation-scenarios";
|
||||
|
||||
jest.mock("@/helpers/damage-helper", () => ({
|
||||
isGlassAvailableForCarId: jest.fn().mockImplementation(() => true),
|
||||
getDamageString: jest.fn(),
|
||||
}));
|
||||
|
||||
// Mock our module for promises.
|
||||
jest.mock("@/helpers/layout-helper.js", () => ({
|
||||
settleAllPromises: jest.fn(),
|
||||
settleAllPromises: jest.fn(),
|
||||
}));
|
||||
|
||||
|
||||
// Mock fetchCmsContentForPage
|
||||
jest.mock("@/helpers/cms-content-helper", () => ({
|
||||
fetchCmsContentForPage: jest.fn(),
|
||||
fetchCmsContentForPage: jest.fn(),
|
||||
}));
|
||||
|
||||
describe("license-plate-lookup.vue", () => {
|
||||
test("Vehicle make set, arePagePrerequisitesValid should be true", () => {
|
||||
//Arrange
|
||||
const { wrapper } = setupMocks({});
|
||||
useMainStore().order.vehicle.carId = "CR00000395";
|
||||
describe("page level alerts", () => {
|
||||
test("If license plate matches a different vehicle, display MatchedDifferentVehicleAlert", async () => {
|
||||
// Arrange
|
||||
const mockRegistrationLicensePlate = {
|
||||
licensePlate: "UTN990",
|
||||
};
|
||||
|
||||
//Act
|
||||
licensePlateLookup.beforeRouteEnter.call(
|
||||
wrapper.vm,
|
||||
{ query: { issPage: "license-plate-lookup" } },
|
||||
undefined,
|
||||
(c) => c(wrapper.vm)
|
||||
);
|
||||
const { wrapper } = setupMocks({});
|
||||
|
||||
let arePagePrerequisitesValid = wrapper.vm.arePagePrerequisitesValid();
|
||||
useMainStore().order.vehicle.carId = "TESTCARID";
|
||||
|
||||
//Assert
|
||||
expect(arePagePrerequisitesValid).toBe(true);
|
||||
await wrapper.setData({
|
||||
licensePlate: mockRegistrationLicensePlate
|
||||
});
|
||||
|
||||
// Act
|
||||
await wrapper.vm.forwardButtonAction();
|
||||
|
||||
// Assert
|
||||
expect(wrapper.findComponent({ ref: "alertMatchedDifferentVehicle" }).isVisible()).toBe(
|
||||
true
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
describe("navigation", () => {
|
||||
test("BackButtonAction triggers a router.navigate change", async () => {
|
||||
test("If no vehicles found, display VinNotFound alert", async () => {
|
||||
// Arrange
|
||||
const mockRegistrationLicensePlate = {
|
||||
licensePlate: "TEST1234",
|
||||
};
|
||||
|
||||
const { wrapper } = setupMocks({
|
||||
vinLookupResponseError: "vin not found error"
|
||||
});
|
||||
|
||||
useMainStore().order.vehicle.carId = "TESTCARID";
|
||||
|
||||
await wrapper.setData({
|
||||
licensePlate: mockRegistrationLicensePlate
|
||||
});
|
||||
|
||||
wrapper.vm.navigateForward = jest.fn();
|
||||
|
||||
// Act
|
||||
await wrapper.vm.forwardButtonAction();
|
||||
|
||||
// Assert
|
||||
expect(wrapper.findComponent({ ref: "alertVinNotFound" }).isVisible()).toBe(true);
|
||||
});
|
||||
});
|
||||
|
||||
describe("navigation", () => {
|
||||
test("Clicking back button navigates back", async () => {
|
||||
//Arrange
|
||||
const { wrapper, apiPromise } = setupMocks({
|
||||
mountOptionsMockData: {
|
||||
|
|
@ -59,86 +91,172 @@ describe("navigation", () => {
|
|||
undefined,
|
||||
(c) => c(wrapper.vm)
|
||||
);
|
||||
wrapper.vm.backButtonAction();
|
||||
await nextTick();
|
||||
|
||||
await wrapper.vm.backButtonAction();
|
||||
|
||||
//Assert
|
||||
return apiPromise.finally(() => {
|
||||
try {
|
||||
expect(wrapper.vm.$router.navigate).toHaveBeenCalled();
|
||||
}
|
||||
catch (e) {
|
||||
throw e
|
||||
}
|
||||
});
|
||||
expect(wrapper.vm.$router.navigate).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
// TODO: Create test for navigating forward when user clicks Continue
|
||||
// and information entered is correct (no alerts)
|
||||
|
||||
// TODO: Create test for license-plate-question component emitting value when user clicks Continue
|
||||
// and information entered is correct (no alerts)
|
||||
test("License plate found and matches entered vehicle => navigateForwardWithSingleCarMatch", async () => {
|
||||
// Arrange
|
||||
const vehicleFound = {
|
||||
carId: "C0000",
|
||||
};
|
||||
|
||||
// TODO: Create test for zip-question component emitting value when user clicks Continue
|
||||
// and information entered is correct (no alerts)
|
||||
|
||||
// *The above will be completed when navigation from page is complete (SSR-179)
|
||||
const { wrapper } = setupMocks({});
|
||||
wrapper.vm.navigateForwardWithSingleCarMatch = jest.fn();
|
||||
|
||||
useMainStore().order.vehicle.carId = "C0000";
|
||||
|
||||
// Act
|
||||
wrapper.vm.navigateForward(vehicleFound);
|
||||
|
||||
// Assert
|
||||
expect(wrapper.vm.navigateForwardWithSingleCarMatch).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
|
||||
test("if a different vehicle is found than the one entered and the selected glass is not available for that vehicle, navigate back to vehicle-damage page", async () => {
|
||||
// Arrange
|
||||
const mockRegistrationLicensePlate = {
|
||||
licensePlate: "TEST1234",
|
||||
};
|
||||
|
||||
const { wrapper } = setupMocks({});
|
||||
|
||||
await wrapper.setData({
|
||||
licensePlate: mockRegistrationLicensePlate,
|
||||
isCarIdDifferent: true,
|
||||
isSelectedGlassAvailableForVehicle: false,
|
||||
});
|
||||
|
||||
useMainStore().order.vehicle.carId = "CARID";
|
||||
|
||||
let carsFound = [
|
||||
{
|
||||
vin: "TEST_VIN2",
|
||||
vehicle: {
|
||||
carId: "C0000",
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
// Act
|
||||
await wrapper.vm.navigateForward(carsFound);
|
||||
|
||||
// Assert
|
||||
expect(wrapper.vm.$router.navigate).toHaveBeenCalledWith(
|
||||
navigationScenarios.SELECTED_VIN_WITH_MISMATCHED_GLASS,
|
||||
undefined,
|
||||
{},
|
||||
{ displayVehicleChangeAlert: true }
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
describe("miscellaneous", () => {
|
||||
test("Vehicle make set, arePagePrerequisitesValid should be true", () => {
|
||||
// Arrange
|
||||
const { wrapper } = setupMocks({});
|
||||
useMainStore().order.vehicle.carId = "CR00000395";
|
||||
|
||||
// Act
|
||||
licensePlateLookup.beforeRouteEnter.call(
|
||||
wrapper.vm,
|
||||
{ query: { issPage: "license-plate-lookup" } },
|
||||
undefined,
|
||||
(c) => c(wrapper.vm)
|
||||
);
|
||||
|
||||
let arePagePrerequisitesValid = wrapper.vm.arePagePrerequisitesValid();
|
||||
|
||||
// Assert
|
||||
expect(arePagePrerequisitesValid).toBe(true);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
function setupMocks({
|
||||
pageHeaderWidgetHeaderText = {},
|
||||
pageFooterWidgetCmsContent = {},
|
||||
mountOptionsMockData = {},
|
||||
//Values to set in the state store
|
||||
carId = null,
|
||||
registrationZipCode = null, //"55555",
|
||||
licensePlate = null, //"TESTPLATE",
|
||||
isZipValid = true,
|
||||
isZipServiceable = true,
|
||||
lookupVinByPlateResponse,
|
||||
partsOrQuestions = [],
|
||||
vehicle = {},
|
||||
vin = null,
|
||||
carId = "C0000",
|
||||
vinLookupResponseError = null,
|
||||
route = null,
|
||||
}) {
|
||||
//Mock api responses
|
||||
const apiResponses = {
|
||||
cmsContent: {
|
||||
SiteSubHeaderWidget: pageHeaderWidgetHeaderText,
|
||||
VehicleBannerWidget: {
|
||||
GenericVehicleImage:
|
||||
`${applicationConfig.ISS_DEV_CMS_DOMAIN}/images/default-source/default-album/blurred-image.jpg`,
|
||||
},
|
||||
SiteHeaderWidget: {
|
||||
LogoImage:
|
||||
`${applicationConfig.ISS_DEV_CMS_DOMAIN}/images/default-source/default-album/logos/insuranceLogo.jpg`,
|
||||
},
|
||||
SiteFooterWidget: pageFooterWidgetCmsContent,
|
||||
|
||||
useMainStore().validateZip = jest.fn().mockImplementation(() => {
|
||||
return Promise.resolve({
|
||||
data: {
|
||||
isValid: isZipValid,
|
||||
isServiceable: isZipServiceable,
|
||||
},
|
||||
};
|
||||
|
||||
mountOptionsMockData = {
|
||||
...mountOptionsMockData,
|
||||
router: {
|
||||
navigate: jest.fn(),
|
||||
})
|
||||
});
|
||||
|
||||
useMainStore().lookupVinByPlate = jest.fn().mockImplementation(() => {
|
||||
return Promise.resolve({
|
||||
data: lookupVinByPlateResponse
|
||||
? lookupVinByPlateResponse : {
|
||||
vin: "TEST_VIN",
|
||||
vehicle: {
|
||||
carId: "CARID"
|
||||
},
|
||||
},
|
||||
store: {
|
||||
getters: {
|
||||
vehicle: {
|
||||
registration: {
|
||||
licensePlate: licensePlate,
|
||||
zipCode: registrationZipCode,
|
||||
},
|
||||
carId: carId,
|
||||
},
|
||||
})
|
||||
});
|
||||
|
||||
useMainStore().getPartsOrQuestions = jest.fn().mockImplementation(() => {
|
||||
return Promise.resolve({
|
||||
data: {
|
||||
partsOrQuestions: partsOrQuestions,
|
||||
},
|
||||
})
|
||||
});
|
||||
|
||||
const wrapper = shallowMount(
|
||||
licensePlateLookup,
|
||||
getMountOptions({
|
||||
route: route ? route : undefined,
|
||||
router: {
|
||||
navigate: jest.fn(),
|
||||
},
|
||||
mainStore: {
|
||||
order: {
|
||||
vehicle: {
|
||||
carId: carId,
|
||||
registration: {
|
||||
licensePlate: "TESTPLATE",
|
||||
zipCode: "12345",
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
},
|
||||
|
||||
const apiPromise = Promise.resolve(apiResponses);
|
||||
|
||||
settleAllPromises.mockImplementation(() => apiPromise);
|
||||
fetchCmsContentForPage.mockImplementation(() => Promise.resolve());
|
||||
|
||||
const mountOptions = getMountOptions(mountOptionsMockData);
|
||||
})
|
||||
);
|
||||
|
||||
const wrapper = shallowMount(licensePlateLookup, mountOptions);
|
||||
const apiResponses = {
|
||||
serviceZipValidationResponse: {
|
||||
isValid: isZipValid,
|
||||
isServiceable: isZipServiceable,
|
||||
},
|
||||
vinLookupResponse: {
|
||||
vin: vin,
|
||||
vehicle: vehicle,
|
||||
error: vinLookupResponseError,
|
||||
},
|
||||
};
|
||||
|
||||
wrapper.vm.setCmsContent = baseMixin.methods.setCmsContent;
|
||||
|
||||
return { wrapper, apiPromise };
|
||||
settleAllPromises.mockImplementation(() => apiResponses);
|
||||
|
||||
wrapper.vm.getCmsContent = jest.fn().mockImplementation(() => "");
|
||||
wrapper.vm.setCmsContent = jest.fn();
|
||||
wrapper.vm.$refs.siteFooter.updateButtonText = jest.fn();
|
||||
wrapper.vm.$refs.siteFooter.removeLoader = jest.fn();
|
||||
wrapper.vm.$refs.siteFooter.disableForwardButton = jest.fn();
|
||||
wrapper.vm.$refs.siteFooter.enableForwardButton = jest.fn();
|
||||
|
||||
return { wrapper };
|
||||
}
|
||||
|
|
@ -10,26 +10,38 @@
|
|||
:display-generic-vehicle-image="false" />
|
||||
<siteSubHeader cms-widget-name="SiteSubHeaderWidget" />
|
||||
<div class="fade-on-route-transition sub-container make-tall mt-5">
|
||||
<licensePlateLookupAlerts
|
||||
:activeAlertType="activeVehicleLookupAlertType"
|
||||
/>
|
||||
<alert
|
||||
ref="alertVinNotFound"
|
||||
v-if="displayVinNotFoundAlert"
|
||||
class="mb-4"
|
||||
cmsWidgetName="AlertVinNotFoundWidget"
|
||||
alertClass="alert-danger"
|
||||
v-bind:isDismissible="false" />
|
||||
<alert
|
||||
ref="alertMatchedDifferentVehicle"
|
||||
v-if="displayMatchedDifferentVehicleAlert"
|
||||
class="mb-4"
|
||||
cmsWidgetName="AlertMatchedDifferentVehicleWidget"
|
||||
:manualHeadline="AlertMatchedDifferentVehicleHeader"
|
||||
:manualCopy="AlertMatchedDifferentVehicleBody"
|
||||
alertClass="alert-warning"
|
||||
v-bind:isDismissible="false" />
|
||||
<textboxQuestion
|
||||
cmsWidgetName="LicensePlateNumberQuestionWidget"
|
||||
v-model="licensePlate"
|
||||
isRequired
|
||||
disableAutoFill
|
||||
inputId="license-plate-question"
|
||||
validationRules="license-plate-required"
|
||||
/>
|
||||
<textboxQuestion
|
||||
cmsWidgetName="RegistrationZipQuestionWidget"
|
||||
v-model="registrationZipCode"
|
||||
isRequired
|
||||
validationRules="license-plate-required" />
|
||||
<dropdownQuestion
|
||||
cmsWidgetName="StateQuestionWidget"
|
||||
v-model="licenseState"
|
||||
ref="state"
|
||||
inputId="8fdf9dc2e13e430eb57529499dceb3eb"
|
||||
:options="stateOptions"
|
||||
disableAutoFill
|
||||
inputId="zip"
|
||||
validationRules="zip-required|zip-format"
|
||||
class="mt-4"
|
||||
/>
|
||||
validationRules="state-required"
|
||||
class="mt-4" />
|
||||
<siteFooter
|
||||
:isForwardActionDisabled="!meta.valid"
|
||||
cms-widget-name="SiteFooterWidget"
|
||||
|
|
@ -42,61 +54,37 @@
|
|||
</template>
|
||||
<script>
|
||||
// Import Supporting Files
|
||||
import { computed } from 'vue';
|
||||
import vehicleLookupAlertTypes from '@/constants/vehicle-lookup-alert-types';
|
||||
import { fetchCmsContentForPage } from '@/helpers/cms-content-helper';
|
||||
import { settleAllPromises } from '@/helpers/layout-helper';
|
||||
import { useMainStore } from '@/store';
|
||||
import { errorMessages } from "@/constants/error-messages";
|
||||
import { required, regex } from "@/helpers/validation-rules";
|
||||
import { required } from "@/helpers/validation-rules";
|
||||
import { defineRule } from "vee-validate";
|
||||
import { getDamageString, isGlassAvailableForCarId } from '@/helpers/damage-helper.js';
|
||||
import { routerParams } from '@/router/router-params.js'
|
||||
import { states } from "@/constants/states";
|
||||
|
||||
// Import Component
|
||||
import baseFormMixin from '@/mixins/base-form-mixin';
|
||||
import vinPagesMixin from '@/mixins/vin-pages-mixin';
|
||||
import { Form } from 'vee-validate';
|
||||
import siteFooter from '@/iss-components/site-footer/site-footer.vue';
|
||||
import siteHeader from '@/iss-components/site-header/site-header.vue';
|
||||
import siteSubHeader from '@/iss-components/site-sub-header/site-sub-header.vue';
|
||||
import vehicleBanner from '@/iss-components/vehicle-banner/vehicle-banner.vue';
|
||||
import textboxQuestion from '@/digital-components/textbox-question/textbox-question.vue';
|
||||
import licensePlateLookupAlerts from '@/layouts/license-plate-lookup/license-plate-lookup-alerts/license-plate-lookup-alerts.vue';
|
||||
import siteFooter from '@/common-components/site-footer/site-footer.vue';
|
||||
import siteHeader from '@/common-components/site-header/site-header.vue';
|
||||
import siteSubHeader from '@/common-components/site-sub-header/site-sub-header.vue';
|
||||
import vehicleBanner from '@/common-components/vehicle-banner/vehicle-banner.vue';
|
||||
import textboxQuestion from '@/common-components/textbox-question/textbox-question.vue';
|
||||
import dropdownQuestion from '@/common-components/dropdown-question/dropdown-question.vue';
|
||||
import alert from "@/ux-components/alert/alert";
|
||||
|
||||
// Define Validation Rules
|
||||
defineRule("license-plate-required", required(errorMessages.LICENSE_PLATE_REQUIRED));
|
||||
defineRule("zip-required", required(errorMessages.REGISTRATION_ZIP_REQUIRED));
|
||||
defineRule("zip-format", regex(/(^\d{5}$)|(^\d{5}-\d{4}$)/, errorMessages.SERVICE_ZIP_FORMAT));
|
||||
defineRule("state-required", required(errorMessages.STATE_REQUIRED));
|
||||
|
||||
export default {
|
||||
name: 'license-plate-lookup',
|
||||
mixins: [baseFormMixin],
|
||||
components: {
|
||||
Form,
|
||||
siteFooter,
|
||||
siteHeader,
|
||||
siteSubHeader,
|
||||
vehicleBanner,
|
||||
textboxQuestion,
|
||||
licensePlateLookupAlerts,
|
||||
},
|
||||
setup() {
|
||||
const mainStore = useMainStore();
|
||||
|
||||
return { mainStore };
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
activeVehicleLookupAlertType: null,
|
||||
vehicleFromLookup: null,
|
||||
licensePlate: null,
|
||||
registrationZipCode: null,
|
||||
};
|
||||
},
|
||||
provide() {
|
||||
return {
|
||||
vehicleFromLookup: computed(() => this.vehicleFromLookup),
|
||||
};
|
||||
},
|
||||
mixins: [baseFormMixin, vinPagesMixin],
|
||||
async beforeRouteEnter(to, from, next) {
|
||||
// Call APIs
|
||||
const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
|
||||
|
||||
// Settle promises and get results
|
||||
|
|
@ -108,57 +96,179 @@ export default {
|
|||
];
|
||||
|
||||
const resultMap = await settleAllPromises(promiseResultMap);
|
||||
|
||||
|
||||
// Call the "next" function to complete the transition to this page.
|
||||
next((vm) => {
|
||||
vm.setCmsContent(resultMap.cmsContent);
|
||||
});
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
activeVehicleLookupAlertType: null,
|
||||
vehicleFromLookup: null,
|
||||
licensePlate: null,
|
||||
licenseState: null,
|
||||
displayVinNotFoundAlert: false,
|
||||
displayMatchedDifferentVehicleAlert: false,
|
||||
previouslyEnteredCarId: "",
|
||||
isCarIdDifferent: false,
|
||||
customAlertData: {},
|
||||
isSelectedGlassAvailableForVehicle: true,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
arePagePrerequisitesValid() {
|
||||
if (this.mainStore.order.vehicle.carId) {
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
return this.mainStore.order.vehicle.carId !== null;
|
||||
},
|
||||
loadDefaultsFromStore() {
|
||||
this.customerQuestions = this.mainStore.customerData.addressQuestions.state;
|
||||
},
|
||||
backButtonAction() {
|
||||
/**
|
||||
* this.navigationScenarios comes from base-mixin
|
||||
*/
|
||||
// route to move backwards
|
||||
this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
|
||||
},
|
||||
attachCustomEvents() {
|
||||
this.prependActionToMethod(this, this.forwardButtonAction, () => {
|
||||
this.pushEventToGA(
|
||||
this.$route.query[this.queryStrings.ISS_PAGE],
|
||||
this.GaActions.SUBMITTED,
|
||||
this.GaLabels.LICENSE_PLATE_LOOKUP,
|
||||
true
|
||||
);
|
||||
});
|
||||
},
|
||||
// NOTE: If form is not valid, this method is not called when 'Continue' button is clicked
|
||||
async forwardButtonAction() {
|
||||
this.resetActiveAlert();
|
||||
this.resetWarningsAndErrors();
|
||||
|
||||
// NOTE: If form is not valid, this method is not called when 'Continue' button is clicked
|
||||
const vehicleLookupResponse = await this.mainStore.lookupVinByPlate(this.licensePlate);
|
||||
// Lookup VIN
|
||||
const vinLookupResponse = await useMainStore().lookupVinByPlate(
|
||||
this.licensePlate, this.licenseState);
|
||||
|
||||
if (vehicleLookupResponse.error) {
|
||||
this.activeVehicleLookupAlertType = vehicleLookupAlertTypes.NOT_FOUND;
|
||||
this.resetVehicleFromLookup();
|
||||
this.$refs.siteFooter.removeLoader();
|
||||
return;
|
||||
// Settle promises and get results
|
||||
const promiseResultMap = [
|
||||
{
|
||||
resultKey: "vinLookupResponse",
|
||||
promise: vinLookupResponse,
|
||||
},
|
||||
];
|
||||
|
||||
const resultMap = await settleAllPromises(promiseResultMap);
|
||||
|
||||
// No VIN found
|
||||
if (resultMap.vinLookupResponse.error) {
|
||||
this.displayVinNotFoundAlert = true;
|
||||
this.$refs.siteFooter.disableForwardButton();
|
||||
return this.$refs.siteFooter.removeLoader();
|
||||
};
|
||||
|
||||
// Vehicle found from VIN lookup
|
||||
const vehicleFromLookup = resultMap.vinLookupResponse.vehicle;
|
||||
|
||||
// Check if the CarId has changed
|
||||
this.isCarIdDifferent =
|
||||
vehicleFromLookup.carId !== useMainStore().order.vehicle.carId;
|
||||
// Handle changing car
|
||||
if (
|
||||
this.isCarIdDifferent &&
|
||||
vehicleFromLookup.carId !== this.previouslyEnteredCarId
|
||||
) {
|
||||
// Display Alert
|
||||
this.previouslyEnteredCarId = vehicleFromLookup.carId;
|
||||
this.customAlertData.vehicleInfo = vehicleFromLookup;
|
||||
this.displayMatchedDifferentVehicleAlert = true;
|
||||
this.isSelectedGlassAvailableForVehicle = await isGlassAvailableForCarId(
|
||||
vehicleFromLookup.carId
|
||||
);
|
||||
|
||||
// Update button "Continue with..."
|
||||
this.$refs.siteFooter.updateButtonText(
|
||||
`Continue with ${vehicleFromLookup.year} ${vehicleFromLookup.make} ${vehicleFromLookup.model}`
|
||||
);
|
||||
return this.$refs.siteFooter.removeLoader();
|
||||
}
|
||||
|
||||
this.vehicleFromLookup = vehicleLookupResponse.data.vehicle;
|
||||
if (this.vehicleFromLookup.carId !== this.mainStore.vehicle.carId) {
|
||||
this.activeVehicleLookupAlertType = vehicleLookupAlertTypes.NOT_MATCHED;
|
||||
|
||||
const vehicleYearMakeModel = `${this.vehicleFromLookup.year} ${this.vehicleFromLookup.make} ${this.vehicleFromLookup.model}`;
|
||||
// Save vehicle, license plate, and registration information
|
||||
await useMainStore().saveRegistrationLicensePlateLookup(
|
||||
{
|
||||
isSelectedGlassAvailableForVehicle: this.isSelectedGlassAvailableForVehicle,
|
||||
vehicleInfo: Object.assign(vehicleFromLookup, {vin: vehicleFromLookup.vin }),
|
||||
registrationInfo: {
|
||||
licensePlate: this.licensePlate,
|
||||
state: this.licenseState,
|
||||
},
|
||||
},
|
||||
false
|
||||
);
|
||||
|
||||
this.$refs.siteFooter.updateButtonText(`Continue with ${vehicleYearMakeModel}`);
|
||||
this.$refs.siteFooter.removeLoader();
|
||||
return await this.navigateForward();
|
||||
},
|
||||
async navigateForward() {
|
||||
// If a different vehicle is found than the one entered and the selected glass is not available for that vehicle then navigate back to "vehicle-damage"
|
||||
// display vehicle changed alert on that page.
|
||||
if (this.isCarIdDifferent && !this.isSelectedGlassAvailableForVehicle) {
|
||||
this.$router.navigate(
|
||||
this.navigationScenarios.SELECTED_VIN_WITH_MISMATCHED_GLASS,
|
||||
this.$route,
|
||||
{},
|
||||
{ [routerParams.DISPLAY_VEHICLE_CHANGE_ALERT]: true }
|
||||
);
|
||||
} else {
|
||||
await this.navigateForwardWithSingleCarMatch();
|
||||
}
|
||||
},
|
||||
resetWarningsAndErrors() {
|
||||
this.displayVinNotFoundAlert = false;
|
||||
this.displayMatchedDifferentVehicleAlert = false;
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.attachCustomEvents();
|
||||
this.loadDefaultsFromStore();
|
||||
},
|
||||
computed: {
|
||||
AlertMatchedDifferentVehicleHeader() {
|
||||
return this.getCmsContent(
|
||||
"AlertMatchedDifferentVehicleWidget",
|
||||
"HeadlineText"
|
||||
).replaceAll("{custom:damage}", getDamageString());
|
||||
},
|
||||
AlertMatchedDifferentVehicleBody() {
|
||||
const vinYmmFound = `${this.customAlertData?.vehicleInfo?.year} ${this.customAlertData?.vehicleInfo?.make} ${this.customAlertData?.vehicleInfo?.model}`;
|
||||
const vinYmmExpected = `${this.mainStore.order.vehicle.year} ${this.mainStore.order.vehicle.make} ${this.mainStore.order.vehicle.model}`;
|
||||
|
||||
// Continue
|
||||
return this.getCmsContent("AlertMatchedDifferentVehicleWidget", "BodyText")
|
||||
.replaceAll("{custom:damage}", getDamageString())
|
||||
.replaceAll("{custom:vinYmmFound}", vinYmmFound)
|
||||
.replaceAll("{custom:vinYmmExpected}", vinYmmExpected);
|
||||
},
|
||||
stateOptions: {
|
||||
get: function () {
|
||||
return states;
|
||||
},
|
||||
},
|
||||
|
||||
resetActiveAlert() {
|
||||
this.activeVehicleLookupAlertType = null;
|
||||
},
|
||||
resetVehicleFromLookup() {
|
||||
this.vehicleFromLookup = null;
|
||||
},
|
||||
resetDependentState() {},
|
||||
},
|
||||
watch: {
|
||||
licensePlate() {
|
||||
this.$refs.siteFooter.updateButtonText(
|
||||
this.getCmsContent("SiteFooterWidget", "ForwardButtonText")
|
||||
);
|
||||
},
|
||||
registrationZipCode() {
|
||||
this.$refs.siteFooter.updateButtonText(
|
||||
this.getCmsContent("SiteFooterWidget", "ForwardButtonText")
|
||||
);
|
||||
},
|
||||
},
|
||||
components: {
|
||||
Form,
|
||||
siteFooter,
|
||||
siteHeader,
|
||||
siteSubHeader,
|
||||
vehicleBanner,
|
||||
textboxQuestion,
|
||||
dropdownQuestion,
|
||||
alert
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -137,7 +137,31 @@ const routingTable = function(store) {
|
|||
{
|
||||
scenario: navigationScenarios.CLICKED_BACK,
|
||||
destinationIssPageValue: issPageValues.VEHICLE_LOOKUP,
|
||||
},
|
||||
},
|
||||
{
|
||||
scenario: navigationScenarios.SELECTED_VIN_WITH_MISMATCHED_GLASS,
|
||||
destinationIssPageValue: issPageValues.VEHICLE_DAMAGE,
|
||||
},
|
||||
{
|
||||
scenario: navigationScenarios.CLICKED_FORWARD_WITH_NO_MORE_QUESTIONS,
|
||||
destinationIssPageValue: issPageValues.COVERAGE_STATEMENT,
|
||||
},
|
||||
{
|
||||
scenario: navigationScenarios.CLICKED_FORWARD_WITH_PART_QUESTIONS,
|
||||
destinationIssPageValue: issPageValues.PART_QUESTIONS,
|
||||
},
|
||||
{
|
||||
scenario: navigationScenarios.CLICKED_FORWARD_WITH_MULTIPLE_PARTS_TO_CHOOSE,
|
||||
destinationIssPageValue: issPageValues.VEHICLE_PARTS,
|
||||
},
|
||||
{
|
||||
scenario: navigationScenarios.CLICKED_FORWARD_WITH_MOLDING_QUESTIONS,
|
||||
destinationIssPageValue: issPageValues.MOLDING_QUESTIONS,
|
||||
},
|
||||
{
|
||||
scenario: navigationScenarios.CLICKED_FORWARD_WITH_CAPABILITY_QUESTIONS,
|
||||
destinationIssPageValue: issPageValues.CAPABILITY_QUESTIONS,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
|
|
|
|||
|
|
@ -299,14 +299,14 @@ export const useMainStore = defineStore({
|
|||
});
|
||||
},
|
||||
|
||||
async lookupVinByPlate(licensePlate) {
|
||||
async lookupVinByPlate(licensePlate, licenseState) {
|
||||
try {
|
||||
const response = await globalMethods.callHttpClient({
|
||||
method: endpoints.LookupVinByPlate.method,
|
||||
endpoint: endpoints.LookupVinByPlate.url,
|
||||
payload: {
|
||||
licensePlate: licensePlate,
|
||||
licenseState: "IL", // hard coded until Welcome Page is complete and license state can be pulled from store
|
||||
licenseState: licenseState,
|
||||
},
|
||||
});
|
||||
|
||||
|
|
@ -895,6 +895,28 @@ export const useMainStore = defineStore({
|
|||
}
|
||||
},
|
||||
|
||||
saveRegistrationLicensePlateLookup({ isSelectedGlassAvailableForVehicle, vehicleInfo, registrationInfo }) {
|
||||
//Reset dependent state when changing
|
||||
if
|
||||
(
|
||||
registrationInfo?.licensePlate !== this.order.vehicle.registration?.licensePlate ||
|
||||
registrationInfo?.state !== this.order.vehicle.registration?.state ||
|
||||
registrationInfo?.zipCode !== this.order.vehicle.registration?.zipCode
|
||||
)
|
||||
{
|
||||
this.resetRegistrationAndDependencies();
|
||||
|
||||
if (!isSelectedGlassAvailableForVehicle) {
|
||||
this.resetDamageAndDependencies();
|
||||
this.resetPartsAndDependencies();
|
||||
}
|
||||
|
||||
//Save new values
|
||||
this.updateVehicle(vehicleInfo);
|
||||
this.updateRegistration(registrationInfo);
|
||||
}
|
||||
},
|
||||
|
||||
resetRegistrationAndDependencies() {
|
||||
this.resetRegistrationState();
|
||||
this.resetGlassPartsState();
|
||||
|
|
|
|||
Loading…
Reference in a new issue