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

Merge pull request #1882 from Safelite/feature/CSR-2109

Browse source 
Feature/csr 2109
This commit is contained in:
chloeherdsafelite 2024-06-20 08:58:46 -04:00 committed by GitHub
commit d1348f5fae
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
10 changed files with 796 additions and 231 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
src/constants/vin-lookup-method-selections.js
View file

@ -2,6 +2,7 @@ const vinLookupMethodSelections = {
MANUALVIN: "ManualVin",
LICENSEPLATE: "LicensePlate",
HOMEADDRESS: "HomeAddress",
DECLINE: "Decline",
};
export { vinLookupMethodSelections };

58
src/layouts/estimate/estimate.spec.js
View file

@ -86,15 +86,18 @@ describe("estimate.vue", () => {
expect(wrapper.vm.$router.navigateWithSaving).toHaveBeenCalled();
});
// TODO KO
describe("isRepair", () => {
test.todo("is repair and zip codes are valid/serviceable => go to quote page");
test.todo(
"is repair and zip codes are valid but not serviceable => show correct alert, remove loader"
);
test.todo(
"is repair and zip codes are not valid/serviceable => show correct alert, remove loader"
);
test("Selecting no vin on ForwardButtonAction triggers a router.navigateWithSaving", async () => {
//Arrange
const { wrapper } = setupMocks({});
await wrapper.setData({
selectedVinLookupMethod: vinLookupMethodSelections.DECLINE,
});
//Act
wrapper.vm.forwardButtonAction();
//Assert
expect(wrapper.vm.$router.navigateWithSaving).toHaveBeenCalled();
});
});
@ -207,43 +210,6 @@ describe("estimate.vue", () => {
expect(arePagePrerequisitesValid).toBe(true);
});
});
test("Changing zip should reset alert", async () => {
//Arrange
const { wrapper } = setupMocks({});
//Act
wrapper.vm.displayNonServiceableZipAlert = "true";
wrapper.vm.serviceZipCode = "43015";
await wrapper.vm.$nextTick();
//Assert
expect(wrapper.vm.displayNonServiceableZipAlert).toEqual(false);
});
});
describe("test alertInfo and isRepair", () => {
const skipOptions = [
[true, false, "AlertQuoteReady"],
[false, true, "AlertQuoteVinOptional"],
[false, false, "AlertQuoteReady"],
[true, true, "AlertQuoteVinOptional"],
];
test.each(skipOptions)(
"isRepair %s, skipVinNotRepair %s alertInfo should return %s",
async (isRepair, skipVinNotRepair, expectedAlertInfo) => {
const { wrapper } = setupMocks({});
await wrapper.setData({
skipVinNotRepair: skipVinNotRepair,
});
store.commit(storeMutations.UPDATE_IS_REPAIR, isRepair);
expect(wrapper.vm.alertInfo).toEqual(expectedAlertInfo);
expect(wrapper.vm.isRepair).toEqual(isRepair);
}
);
});
function setupMocks({

190
src/layouts/estimate/estimate.vue
View file

@ -11,7 +11,7 @@
<div class="col-md-6 col-xl-4">
<vehicleBanner cmsWidgetName="VehicleBannerWidget" />
<funnelSubHeader class="pb-4" cmsWidgetName="FunnelSubHeaderWidget" />
<div v-if="!skipVin">
<div>
<div class="vinlookupquestion" v-html="this.VinLookupQuestionText"></div>
<buttonQuestion
cmsWidgetName="VinLookupMethod"
@ -22,65 +22,14 @@
isRequired
validationRules="option-required"
:logDisplayedValuesEvent="true" />
<navbar
cmsWidgetName="FunnelFooterWidget"
ref="navbar"
:isForwardActionDisabled="!meta.valid"
@back-clicked="backButtonAction"
@ForwardClicked="forwardButtonAction" />
</div>
<div v-else>
<alert
class="mt-4 mb-4"
:cmsWidgetName="alertInfo"
alertClass="alert-info"
v-bind:isDismissible="false" />
<textboxQuestion
class="mb-4"
cmsWidgetName="ServiceZipQuestionWidget"
v-model="serviceZipCode"
inputId="serviceZipCode"
mask="#####"
isRequired
validationRules="zip-required|zip-format" />
<textboxQuestion
class="mb-0"
cmsWidgetName="EmailAddressQuestionWidget"
v-model="emailAddress"
inputId="emailAddress"
:isRequired="!IsEmailOptional"
disableAutoFill
:validationRules="EmailValidationRules"
:addOptionalText="IsEmailOptional" />
<textBlock cmsWidgetName="QuoteEmailTextBlockWidget" typeStyle="caption" />
<alert
ref="alertInvalidZip"
v-if="displayInvalidZipAlert"
class="my-4"
cmsWidgetName="AlertInvalidZipWidget"
alertClass="alert-danger"
v-bind:isDismissible="false" />
<alert
class="my-4"
:manualHeadline="AlertNonServiceableZipHeader"
:manualCopy="AlertNonServiceableZipBody"
v-model="customAlertData"
v-if="displayNonServiceableZipAlert"
alertClass="alert-danger" />
<navbar
cmsWidgetName="FunnelFooterWidget"
ref="navbar"
:isForwardActionDisabled="!meta.valid"
@back-clicked="backButtonAction"
@ForwardClicked="forwardButtonAction" />
</div>
<navbar
cmsWidgetName="FunnelFooterWidget"
ref="navbar"
:isForwardActionDisabled="!meta.valid"
@back-clicked="backButtonAction"
@ForwardClicked="forwardButtonAction" />
</div>
</div>
</div>
@ -94,9 +43,6 @@ import navbar from "@/fmg-components/nav-bar/nav-bar";
import vehicleBanner from "@/fmg-components/vehicle-banner/vehicle-banner";
import funnelSubHeader from "@/fmg-components/funnel-sub-header/funnel-sub-header";
import buttonQuestion from "@/digital-components/button-question/button-question";
import alert from "@/ux-components/alert/alert";
import textboxQuestion from "@/digital-components/textbox-question/textbox-question";
import textBlock from "@/digital-components/text-block/text-block";
import loadingModal from "@/fmg-components/loading-modal/loading-modal.vue";
//Supporting Files
@ -137,10 +83,6 @@ export default {
data() {
return {
selectedVinLookupMethod: null,
serviceZipCode: this.getZipFromStore() ?? this.$route.query.zipcode,
emailAddress: this.getEmailFromStore(),
displayInvalidZipAlert: false,
displayNonServiceableZipAlert: false,
skipVin: false,
skipVinNotRepair: false,
};
@ -185,22 +127,12 @@ export default {
];
const resultMap = await settleAllPromises(promiseResultMap);
const skipVin = await skipVinLookup();
const skipVinNotRepair = await skipVinLookupNotRepair();
next((vm) => {
vm.skipVin = skipVin;
vm.skipVinNotRepair = skipVinNotRepair;
if (resultMap.cmsContent.FunnelFooterWidget.ForwardButtonText.includes("|")) {
const forwardTextOption =
resultMap.cmsContent.FunnelFooterWidget.ForwardButtonText.split("|");
if (skipVin) {
resultMap.cmsContent.FunnelFooterWidget.ForwardButtonText =
forwardTextOption[1];
} else {
resultMap.cmsContent.FunnelFooterWidget.ForwardButtonText =
forwardTextOption[0];
}
resultMap.cmsContent.FunnelFooterWidget.ForwardButtonText = forwardTextOption[0];
}
if (!zip || resultMap.vinByAddress === false) {
@ -216,12 +148,6 @@ export default {
});
},
methods: {
getZipFromStore() {
return store.getters.order.serviceLocation.zipCode;
},
getEmailFromStore() {
return store.getters.order.customer.emailAddress;
},
arePagePrerequisitesValid() {
return store.getters.damage.isRepair || store.getters.damage.glassToReplace?.length > 0;
},
@ -230,80 +156,6 @@ export default {
this.$router.navigateWithoutSaving(this.navigationScenarios.CLICKED_BACK, this.$route);
},
async forwardButtonAction() {
if (this.skipVin) {
const zipCodeData = await this.getZipCodeData(this.serviceZipCode);
await this.dispatchStoreAction(storeActions.SAVE_EMAIL, this.emailAddress, false);
await this.dispatchStoreAction(
storeActions.SAVE_SERVICE_ZIP_CODE_INFO,
{
zipCode: this.serviceZipCode,
state: zipCodeData.state,
zipCodeCtu: zipCodeData.zipCodeCtu,
},
false
);
if (!zipCodeData.isValid) {
this.displayInvalidZipAlert = true;
return this.$refs.navbar.removeLoader();
}
this.displayInvalidZipAlert = false;
if (!zipCodeData.isServiceable) {
this.displayNonServiceableZipAlert = true;
return this.$refs.navbar.removeLoader();
}
this.displayNonServiceableZipAlert = false;
const payment = this.$store.getters.payment;
const policy = this.$store.getters.policy;
const vehicleChangedDuringPolicyLookupInHeritage =
payment.isInsurance &&
payment.insuranceCoverage.coverageStatus &&
policy.policyNumber !== "";
if (vehicleChangedDuringPolicyLookupInHeritage) {
navigateToHeritageFunnel({
shouldSaveSession: true,
pageNameToLog: "estimate",
});
} else if (this.$store.getters.order.referralNumber?.length === 6) {
await this.navigateForwardWithSingleCarMatch();
} else if (this.isRepair) {
const supportingItemsPromise = await this.dispatchStoreActionWithLogging(
storeActions.GET_SUPPORTING_ITEMS,
null,
"estimate"
);
const promiseResultMap = [
{
resultKey: "supportingItems",
promise: supportingItemsPromise,
},
];
const resultMap = await settleAllPromises(promiseResultMap);
this.dispatchStoreAction(
this.storeActions.SAVE_SUPPORTING_ITEMS,
resultMap.supportingItems,
false
);
// call saveSession here - navigateWithSaving saves too late in the flow
await saveSession({ pageNameToLog: "estimate" });
return this.$router.navigateWithSaving(
this.navigationScenarios.CLICKED_FORWARD_WITH_NO_QUESTIONS,
this.$route
);
} else {
// if we're skipping the vin-lookup but it's not a repair, we still need to get the parts
await this.navigateForwardWithSingleCarMatch();
}
}
if (this.selectedVinLookupMethod === vinLookupMethodSelections.MANUALVIN) {
await this.dispatchStoreAction(storeActions.CLEAR_VIN);
return this.$router.navigateWithSaving(
@ -323,18 +175,15 @@ export default {
this.$route
);
}
if (this.selectedVinLookupMethod === vinLookupMethodSelections.DECLINE) {
return this.$router.navigateWithSaving(
this.navigationScenarios.SELECTED_NO_VIN,
this.$route
);
}
},
},
computed: {
AlertNonServiceableZipHeader() {
return this.getCmsContent("AlertNonServiceableZipWidget", "HeadlineText").replaceAll(
"{custom:serviceZip}",
this.serviceZipCode
);
},
AlertNonServiceableZipBody() {
return this.getCmsContent("AlertNonServiceableZipWidget", "BodyText");
},
questionText() {
return this.getCmsContent("VinLookupMethod", "QuestionText");
},
@ -344,18 +193,10 @@ export default {
isRepair() {
return store.getters.damage.isRepair;
},
alertInfo() {
return this.skipVinNotRepair ? "AlertQuoteVinOptional" : "AlertQuoteReady";
},
VinLookupQuestionText() {
return this.getCmsContent("VinLookupQuestion", "BodyText");
},
},
watch: {
serviceZipCode() {
this.displayNonServiceableZipAlert = false;
},
},
components: {
funnelHeader,
vehicleBanner,
@ -363,9 +204,6 @@ export default {
navbar,
buttonQuestion,
Form,
alert,
textboxQuestion,
textBlock,
loadingModal,
},
};

434
src/layouts/service-zip/service-zip.spec.js Normal file
View file

@ -0,0 +1,434 @@
// Components
import serviceZip from "@/layouts/service-zip/service-zip";
// Supporting Files
import { shallowMount } from "@vue/test-utils";
import { getMountOptions } from "@/helpers/unit-test-helper";
import baseMixin from "@/mixins/base-mixin";
import store from "@/store";
import router from "@/router";
import { navigationScenarios } from "@/router/router-constants/navigation-scenarios";
import { saveSession } from "@/helpers/heritage-integration/order-helper.js";
import vinPagesMixin from "@/mixins/vin-pages-mixin";
// Constants
// Setup global mocks
let mockCmsContent = {
AlertNonServiceableZipWidget: {
HeadlineText: "Test",
},
};
let mockStoreActionData = {};
let mockStoreData = {};
function resetMockStoreData() {
mockStoreData = {
vehicle: {
year: "2000",
make: "TestMake",
model: "TestModel",
style: "TestStyle",
carId: "TestID",
vin: null,
registration: {
licensePlate: null,
},
},
serviceLocation: {
address: null,
address2: null,
city: null,
state: null,
zipCode: null,
zipCodeCtu: null,
appointmentType: null,
isVehicleProtected: null,
provider: {
providerNumber: null,
address: {
streetAddress: null,
city: null,
state: null,
zipCode: null,
zipCodeCtu: null,
},
},
techNotes: null,
},
customer: {
firstName: null,
lastName: null,
emailAddress: null,
phoneNumber: null,
isSmsOptIn: null,
},
damage: {
isRepair: false,
numberOfChips: null,
glassToReplace: [{ glassLocation: "Windshield", glassName: "windshield" }],
partQuestionAnswers: null,
moldingQuestionAnswers: null,
capabilityQuestionAnswers: null,
dateOfLoss: null,
damageCause: null,
},
lineItems: {
glassParts: [
{
canSafeliteRecalibrate: true,
childParts: [
{
kitPrice: 0,
laborAmount: 23.55,
partNumber: "GGG FW4896",
salesTax: 1.77,
sellingPrice: 0,
},
],
color: "Green Tint",
description:
"solar, soundproofing, lane keep assist, lane departure warning system, w/adaptive cruise control",
id: "db22fd44-10dd-456f-979b-ff88cf68cca6",
kitPrice: 0,
laborAmount: 60,
partNumber: "FW04896GTYN",
partType: "WINDSHIELD",
recalibrationType: "STATIC",
requiresCapabilityQuestions: false,
requiresRecalibration: true,
salesTax: 63.86,
sellingPrice: 791.46,
},
],
supportingItems: null,
vaps: null,
serverData: null,
promos: null,
},
payment: {
isInsurance: null,
insuranceCoverage: {
isVerified: null,
coverageStatus: null,
coverageType: null,
coverageVerificationType: null,
},
parentAccountNumber: 0,
billToAccountNumber: null,
isPia: null,
piaType: null,
inactivePromos: null,
paypalToken: null,
nextGenSettledAmount: 0,
ccToken: {
subscriptionId: null,
expMonth: null,
expYear: null,
cardType: null,
billToPostalCode: null,
billToFirstName: null,
billToLastName: null,
referenceNumber: null,
authCode: null,
transactionId: null,
transReferenceNumber: null,
lastFour: null,
},
},
policy: {
currentDeductible: 0,
policyNumber: null,
isItac: false,
additionalAuthFlag: null,
isNoComp: false,
insuranceCompanyName: null,
},
schedule: {
date: null,
startTime: null,
endTime: null,
routeCode: null,
jobMaxMinutes: null,
jobMinMinutes: null,
},
};
}
function applyMockStoreDataToGetters() {
store.getters = {
order: mockStoreData,
damage: mockStoreData.damage,
payment: mockStoreData.payment,
policy: mockStoreData.policy,
};
store.state.order = mockStoreData;
}
async function mockDispatchStoreAction(actionName) {
return mockStoreActionData[actionName];
}
jest.mock("@/mixins/base-mixin.js", () => ({
methods: {
dispatchStoreAction: jest.fn().mockImplementation(mockDispatchStoreAction),
dispatchStoreActionWithLogging: jest.fn().mockImplementation(mockDispatchStoreAction),
},
}));
jest.mock("@/helpers/cms-content-helper", () => ({
fetchCmsContentForPage: () => Promise.resolve("content"),
}));
jest.mock("@/helpers/heritage-integration/order-helper.js", () => ({
saveSession: jest.fn(),
}));
router.navigateWithoutSaving = jest.fn();
router.navigateWithSaving = jest.fn();
// Tests
describe("service-zip.vue", () => {
beforeEach(() => {
resetMockStoreData();
jest.clearAllMocks();
});
describe("Pre-existing fields", () => {
test("No existing fields -> serviceZip & emailAdress undefined", () => {
// Arrange
// no changes to store
applyMockStoreDataToGetters();
// Act
const wrapper = setupMocks({});
// Assert
expect(wrapper.vm.serviceZipCode).toBeFalsy();
expect(wrapper.vm.emailAddress).toBeFalsy();
});
test("Fields in store -> autofilled to data", () => {
// Arrange
mockStoreData.serviceLocation.zipCode = "11111";
mockStoreData.customer.emailAddress = "builddigitaltest@safelite.com";
applyMockStoreDataToGetters();
// Act
const wrapper = setupMocks({});
// Assert
expect(wrapper.vm.serviceZipCode).toEqual("11111");
expect(wrapper.vm.emailAddress).toEqual("builddigitaltest@safelite.com");
});
test("Zip in querystring -> pushed to data", () => {
// Arrange
// no changes to store
applyMockStoreDataToGetters();
// Act
const wrapper = setupMocks({
customZipQuery: "11111",
});
// Assert
expect(wrapper.vm.serviceZipCode).toEqual("11111");
});
});
describe("Navigation", () => {
describe("Back Nav", () => {
test("If skipvin eligable, go back to vehicle-damage", async () => {
// Arrange
mockStoreData.damage.isRepair = true;
mockStoreData.damage.numberOfChips = 1;
mockStoreData.damage.glassToReplace = null;
mockStoreData.lineItems.glassParts = null;
applyMockStoreDataToGetters();
// Act
const wrapper = setupMocks({});
await wrapper.vm.backButtonAction();
// Assert
expect(wrapper.vm.$router.navigateWithoutSaving).toBeCalledWith(
navigationScenarios.CLICKED_BACK_WITH_SKIP_VIN,
wrapper.vm.$route
);
});
test("If not skipvin eligable, go back to estimate", async () => {
// Arrange
// no changes to store
applyMockStoreDataToGetters();
// Act
const wrapper = setupMocks({});
await wrapper.vm.backButtonAction();
// Assert
expect(wrapper.vm.$router.navigateWithoutSaving).toBeCalledWith(
navigationScenarios.CLICKED_BACK,
wrapper.vm.$route
);
});
});
describe("Forward Nav", () => {
test("Repair skips questions flow", async () => {
// Arrange
mockStoreData.damage.isRepair = true;
mockStoreData.damage.numberOfChips = 1;
mockStoreData.damage.glassToReplace = null;
mockStoreData.lineItems.glassParts = null;
applyMockStoreDataToGetters();
// Act
const wrapper = setupMocks({});
jest.spyOn(wrapper.vm, "navigateForwardWithSingleCarMatch").mockImplementation();
await wrapper.vm.forwardButtonAction();
// Assert
expect(wrapper.vm.$router.navigateWithSaving).toBeCalledWith(
navigationScenarios.CLICKED_FORWARD_WITH_NO_QUESTIONS,
wrapper.vm.$route
);
expect(wrapper.vm.navigateForwardWithSingleCarMatch).not.toBeCalled();
});
test("Non-repair enters questions flow", async () => {
// Arrange
mockStoreData.damage.isRepair = false;
applyMockStoreDataToGetters();
// Act
const wrapper = setupMocks({});
jest.spyOn(wrapper.vm, "navigateForwardWithSingleCarMatch").mockImplementation();
await wrapper.vm.forwardButtonAction();
// Assert
expect(wrapper.vm.$router.navigateWithSaving).not.toBeCalled();
expect(wrapper.vm.navigateForwardWithSingleCarMatch).toBeCalled();
});
});
});
describe("Alerts", () => {
test("Invalid zip alert shown if indicated by endpoint", async () => {
// Arrange
// no changes to store
applyMockStoreDataToGetters();
const invalidZipResponse = {
state: "OH",
zipCodeCtu: "TESTCTU",
isValid: false,
isServiceable: true,
};
// Act
const wrapper = setupMocks({ customZipDataResponse: invalidZipResponse });
wrapper.vm.$refs.navbar.removeLoader = jest.fn();
await wrapper.vm.forwardButtonAction();
// Assert
expect(wrapper.vm.displayInvalidZipAlert).toBe(true);
});
test("Non-serviceable zip alert shown if indicated by endpoint", async () => {
// Arrange
// no changes to store
applyMockStoreDataToGetters();
const invalidZipResponse = {
state: "OH",
zipCodeCtu: "TESTCTU",
isValid: true,
isServiceable: false,
};
// Act
const wrapper = setupMocks({ customZipDataResponse: invalidZipResponse });
wrapper.vm.$refs.navbar.removeLoader = jest.fn();
await wrapper.vm.forwardButtonAction();
// Assert
expect(wrapper.vm.displayNonServiceableZipAlert).toBe(true);
});
test("Alerts cleared when valid zip is submitted", async () => {
// Arrange
// no changes to store
applyMockStoreDataToGetters();
// Act
const wrapper = setupMocks({});
wrapper.vm.displayInvalidZipAlert = true;
wrapper.vm.displayNonServiceableZipAlert = true;
jest.spyOn(wrapper.vm, "navigateForwardWithSingleCarMatch").mockImplementation();
await wrapper.vm.forwardButtonAction();
// Assert
expect(wrapper.vm.displayInvalidZipAlert).toBe(false);
expect(wrapper.vm.displayNonServiceableZipAlert).toBe(false);
});
});
});
function setupMocks({ customMountOptions, customZipQuery, customZipDataResponse }) {
const route = { query: { fmgPage: "service-zip" }, params: {} };
if (customZipQuery) {
route.query.zipcode = customZipQuery;
}
const mountOptions = getMountOptions({
...customMountOptions,
route: route,
});
mountOptions.global.mocks["$store"] = store;
mountOptions.global.mocks["$router"] = router;
mountOptions.mixins = [
{
methods: {
getCmsContent: jest.fn().mockImplementation((widgetName, fieldName) => {
if (mockCmsContent[widgetName] && mockCmsContent[widgetName][fieldName])
return mockCmsContent[widgetName][fieldName];
}),
setCmsContent: jest.fn(),
navigateForwardWithSingleCarMatch: jest.fn(),
getZipCodeData: jest.fn().mockImplementation(() => {
if (customZipDataResponse) {
return customZipDataResponse;
} else {
return {
state: "OH",
zipCodeCtu: "TESTCTU",
isValid: true,
isServiceable: true,
};
}
}),
},
},
];
const wrapper = shallowMount(serviceZip, mountOptions);
return wrapper;
}

282
src/layouts/service-zip/service-zip.vue Normal file
View file

@ -0,0 +1,282 @@
<template>
<Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
<loadingModal ref="loadingModal" />
<div class="container-fluid page-container-grouped-styles">
<div class="row justify-content-center">
<div class="col-md-6">
<funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
</div>
</div>
<div class="row justify-content-center">
<div class="col-md-6 col-xl-4">
<vehicleBanner cmsWidgetName="VehicleBannerWidget" />
<funnelSubHeader class="pb-4" cmsWidgetName="FunnelSubHeaderWidget" />
<div>
<textboxQuestion
class="mb-4"
cmsWidgetName="ServiceZipQuestionWidget"
v-model="serviceZipCode"
inputId="serviceZipCode"
mask="#####"
isRequired
validationRules="zip-required|zip-format" />
<textboxQuestion
class="mb-0"
cmsWidgetName="EmailAddressQuestionWidget"
v-model="emailAddress"
inputId="emailAddress"
:isRequired="!IsEmailOptional"
disableAutoFill
:validationRules="EmailValidationRules"
:addOptionalText="IsEmailOptional" />
<textBlock cmsWidgetName="QuoteEmailTextBlockWidget" typeStyle="caption" />
<alert
ref="alertInvalidZip"
v-if="displayInvalidZipAlert"
class="my-4"
cmsWidgetName="AlertInvalidZipWidget"
alertClass="alert-danger"
v-bind:isDismissible="false" />
<alert
class="my-4"
:manualHeadline="AlertNonServiceableZipHeader"
:manualCopy="AlertNonServiceableZipBody"
v-model="customAlertData"
v-if="displayNonServiceableZipAlert"
alertClass="alert-danger" />
<navbar
cmsWidgetName="FunnelFooterWidget"
ref="navbar"
:isForwardActionDisabled="!meta.valid"
@back-clicked="backButtonAction"
@ForwardClicked="forwardButtonAction" />
</div>
</div>
</div>
</div>
</Form>
</template>
<script>
// Components
import funnelHeader from "@/fmg-components/funnel-header/funnel-header";
import navbar from "@/fmg-components/nav-bar/nav-bar";
import vehicleBanner from "@/fmg-components/vehicle-banner/vehicle-banner";
import funnelSubHeader from "@/fmg-components/funnel-sub-header/funnel-sub-header";
import buttonQuestion from "@/digital-components/button-question/button-question";
import alert from "@/ux-components/alert/alert";
import textboxQuestion from "@/digital-components/textbox-question/textbox-question";
import textBlock from "@/digital-components/text-block/text-block";
import loadingModal from "@/fmg-components/loading-modal/loading-modal.vue";
//Supporting Files
import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
import { settleAllPromises } from "@/helpers/layout-helper";
import { required, regex } from "@/helpers/validation-rules";
import { errorMessages } from "@/constants/error-messages";
import { Form, defineRule } from "vee-validate";
import store from "@/store";
import { storeActions } from "@/constants/store-actions";
import { vinLookupMethodSelections } from "@/constants/vin-lookup-method-selections.js";
import {
skipVinLookup,
skipVinLookupNotRepair,
} from "@/helpers/heritage-integration/navigation-helper";
import vinPagesMixin from "@/mixins/vin-pages-mixin";
import { navigateToHeritageFunnel } from "@/helpers/heritage-integration/navigation-helper";
import { saveSession } from "@/helpers/heritage-integration/order-helper.js";
import baseMixin from "@/mixins/base-mixin.js";
import { queryStrings } from "@/constants/query-strings";
// Define Validation Rules
defineRule("zip-required", required(errorMessages.SERVICE_ZIP_REQUIRED));
defineRule("zip-format", regex(/(^\d{5}$)|(^\d{5}-\d{4}$)/, errorMessages.SERVICE_ZIP_FORMAT));
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("option-required", required(errorMessages.OPTION_REQUIRED));
export default {
name: "service-zip",
mixins: [vinPagesMixin],
data() {
return {
serviceZipCode: this.getZipFromStore() ?? this.$route.query.zipcode,
emailAddress: this.getEmailFromStore(),
displayInvalidZipAlert: false,
displayNonServiceableZipAlert: false,
};
},
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);
next((vm) => {
vm.setCmsContent(resultMap.cmsContent);
});
},
methods: {
getZipFromStore() {
return store.getters.order.serviceLocation.zipCode;
},
getEmailFromStore() {
return store.getters.order.customer.emailAddress;
},
arePagePrerequisitesValid() {
return store.getters.damage.isRepair || store.getters.damage.glassToReplace?.length > 0;
},
async backButtonAction() {
const skipVin = await skipVinLookup();
// route to move backwards
if (skipVin) {
this.$router.navigateWithoutSaving(
this.navigationScenarios.CLICKED_BACK_WITH_SKIP_VIN,
this.$route
);
} else {
this.$router.navigateWithoutSaving(
this.navigationScenarios.CLICKED_BACK,
this.$route
);
}
},
async forwardButtonAction() {
const zipCodeData = await this.getZipCodeData(this.serviceZipCode);
await this.dispatchStoreAction(storeActions.SAVE_EMAIL, this.emailAddress, false);
await this.dispatchStoreAction(
storeActions.SAVE_SERVICE_ZIP_CODE_INFO,
{
zipCode: this.serviceZipCode,
state: zipCodeData.state,
zipCodeCtu: zipCodeData.zipCodeCtu,
},
false
);
if (!zipCodeData.isValid) {
this.displayInvalidZipAlert = true;
return this.$refs.navbar.removeLoader();
}
this.displayInvalidZipAlert = false;
if (!zipCodeData.isServiceable) {
this.displayNonServiceableZipAlert = true;
return this.$refs.navbar.removeLoader();
}
this.displayNonServiceableZipAlert = false;
const payment = this.$store.getters.payment;
const policy = this.$store.getters.policy;
const vehicleChangedDuringPolicyLookupInHeritage =
payment.isInsurance &&
payment.insuranceCoverage.coverageStatus &&
policy.policyNumber !== "";
if (vehicleChangedDuringPolicyLookupInHeritage) {
navigateToHeritageFunnel({
shouldSaveSession: true,
pageNameToLog: "estimate",
});
} else if (this.$store.getters.order.referralNumber?.length === 6) {
await this.navigateForwardWithSingleCarMatch();
} else if (this.isRepair) {
const supportingItemsPromise = await this.dispatchStoreActionWithLogging(
storeActions.GET_SUPPORTING_ITEMS,
null,
"estimate"
);
const promiseResultMap = [
{
resultKey: "supportingItems",
promise: supportingItemsPromise,
},
];
const resultMap = await settleAllPromises(promiseResultMap);
this.dispatchStoreAction(
this.storeActions.SAVE_SUPPORTING_ITEMS,
resultMap.supportingItems,
false
);
// call saveSession here - navigateWithSaving saves too late in the flow
await saveSession({ pageNameToLog: "estimate" });
return this.$router.navigateWithSaving(
this.navigationScenarios.CLICKED_FORWARD_WITH_NO_QUESTIONS,
this.$route
);
} else {
// if we're skipping the vin-lookup but it's not a repair, we still need to get the parts
await this.navigateForwardWithSingleCarMatch();
}
},
},
computed: {
AlertNonServiceableZipHeader() {
return this.getCmsContent("AlertNonServiceableZipWidget", "HeadlineText").replaceAll(
"{custom:serviceZip}",
this.serviceZipCode
);
},
AlertNonServiceableZipBody() {
return this.getCmsContent("AlertNonServiceableZipWidget", "BodyText");
},
isRepair() {
return store.getters.damage.isRepair;
},
},
watch: {
serviceZipCode() {
this.displayNonServiceableZipAlert = false;
},
},
components: {
funnelHeader,
vehicleBanner,
funnelSubHeader,
navbar,
Form,
alert,
textboxQuestion,
textBlock,
loadingModal,
},
};
</script>
<style lang="scss">
.vinlookupquestion p {
margin-bottom: 0;
}
.vinlookupquestion strong {
font-weight: 500;
color: $black;
}
.vinlookupquestion p:nth-child(2) {
font-size: 0.875rem;
margin-bottom: 1rem;
}
</style>

14
src/layouts/vehicle-damage/vehicle-damage.spec.js
View file

@ -52,6 +52,20 @@ jest.mock("@/store", () => ({
damage: {
glassToReplace: [],
},
order: {
vehicle: {
carId: "C00000000",
image: "test.jpg",
payment: {
insuranceCoverage: {
isVerified: false,
},
},
},
damage: {
glassToReplace: [],
},
},
},
}));

11
src/layouts/vehicle-damage/vehicle-damage.vue
View file

@ -376,12 +376,12 @@ export default {
payment.insuranceCoverage.coverageStatus !== "" &&
policy.policyNumber !== "";
if (vehicleChangedDuringPolicyLookupInHeritage) {
const skipVin = await skipVinLookup();
const skipVin = await skipVinLookup();
if (vehicleChangedDuringPolicyLookupInHeritage) {
if (skipVin) {
this.$router.navigateWithSaving(
this.navigationScenarios.CLICKED_FORWARD_WITHOUT_VIN,
this.navigationScenarios.CLICKED_FORWARD_WITH_SKIP_VIN,
this.$route
);
} else {
@ -406,6 +406,11 @@ export default {
this.navigationScenarios.CLICKED_FORWARD_WITH_VIN,
this.$route
);
} else if (skipVin) {
this.$router.navigateWithSaving(
this.navigationScenarios.CLICKED_FORWARD_WITH_SKIP_VIN,
this.$route
);
} else {
this.$router.navigateWithSaving(
this.navigationScenarios.CLICKED_FORWARD_WITHOUT_VIN,

1
src/router/router-constants/fmgPage-values.js
View file

@ -9,6 +9,7 @@ const fmgPageValues = {
CAPABILITY_QUESTIONS: "capability-questions",
LICENSE_PLATE_LOOKUP: "license-plate-lookup",
ESTIMATE: "estimate",
SERVICE_ZIP: "service-zip",
ADDRESS_VEHICLES: "address-vehicles",
QUOTE: "quote",
INSURANCE_COMPANY: "insurance-company",

3
src/router/router-constants/navigation-scenarios.js
View file

@ -15,17 +15,20 @@ const navigationScenarios = {
// Vin selection
CLICKED_BACK_WITH_VIN: "CLICKED_BACK_WITH_VIN",
CLICKED_BACK_WITH_SKIP_VIN: "CLICKED_BACK_WITH_SKIP_VIN",
CLICKED_FORWARD_WITH_VIN: "CLICKED_FORWARD_WITH_VIN",
CLICKED_FORWARD_WITH_REPAIR_AND_VERIFIED_INSURANCE:
"CLICKED_FORWARD_WITH_REPAIR_AND_VERIFIED_INSURANCE",
CLICKED_FORWARD_WITH_REPLACE_AND_VERIFIED_INSURANCE:
"CLICKED_FORWARD_WITH_REPLACE_AND_VERIFIED_INSURANCE",
CLICKED_FORWARD_WITHOUT_VIN: "CLICKED_FORWARD_WITHOUT_VIN",
CLICKED_FORWARD_WITH_SKIP_VIN: "CLICKED_FORWARD_WITH_SKIP_VIN",
CLICKED_FORWARD_WITH_MULTIPLE_VEHICLES: "CLICKED_FORWARD_WITH_MULTIPLE_VEHICLES",
SELECTED_VIN_WITH_MISMATCHED_GLASS: "SELECTED_VIN_WITH_MISMATCHED_GLASS",
SELECTED_MANUAL_VIN: "SELECTED_MANUAL_VIN",
SELECTED_LICENSE_PLATE: "SELECTED_LICENSE_PLATE",
SELECTED_HOME_ADDRESS: "SELECTED_HOME_ADDRESS",
SELECTED_NO_VIN: "SELECTED_NO_VIN",
CLICKED_FORWARD_WITH_NO_QUESTIONS: "CLICKED_FORWARD_WITH_NO_QUESTIONS",
CLICKED_VIN_RETRY: "CLICKED_VIN_RETRY",

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

@ -29,10 +29,14 @@ const routingTable = function (store) {
scenario: navigationScenarios.CLICKED_FORWARD_WITHOUT_VIN,
destinationFmgPageValue: fmgPageValues.ESTIMATE,
},
{
scenario: navigationScenarios.CLICKED_FORWARD_WITH_SKIP_VIN,
destinationFmgPageValue: fmgPageValues.SERVICE_ZIP,
},
{
scenario:
navigationScenarios.CLICKED_FORWARD_WITH_REPAIR_AND_VERIFIED_INSURANCE,
destinationFmgPageValue: fmgPageValues.ESTIMATE,
destinationFmgPageValue: fmgPageValues.SERVICE_ZIP,
},
{
scenario:
@ -216,6 +220,23 @@ const routingTable = function (store) {
scenario: navigationScenarios.SELECTED_HOME_ADDRESS,
destinationFmgPageValue: fmgPageValues.ADDRESS_LOOKUP,
},
{
scenario: navigationScenarios.SELECTED_NO_VIN,
destinationFmgPageValue: fmgPageValues.SERVICE_ZIP,
},
],
},
{
fmgPageValue: fmgPageValues.SERVICE_ZIP,
maps: [
{
scenario: navigationScenarios.CLICKED_BACK,
destinationFmgPageValue: fmgPageValues.ESTIMATE,
},
{
scenario: navigationScenarios.CLICKED_BACK_WITH_SKIP_VIN,
destinationFmgPageValue: fmgPageValues.VEHICLE_DAMAGE,
},
{
scenario: navigationScenarios.CLICKED_FORWARD_WITH_NO_QUESTIONS,
destinationFmgPageValue: fmgPageValues.QUOTE,
@ -251,7 +272,7 @@ const routingTable = function (store) {
},
{
scenario: navigationScenarios.CLICKED_BACK_WITH_NO_VIN_NOR_QUESTIONS,
destinationFmgPageValue: fmgPageValues.ESTIMATE,
destinationFmgPageValue: fmgPageValues.SERVICE_ZIP,
},
{
scenario: navigationScenarios.CLICKED_FORWARD_WITH_MULTIPLE_PARTS_TO_CHOOSE,
@ -284,7 +305,7 @@ const routingTable = function (store) {
},
{
scenario: navigationScenarios.CLICKED_BACK_WITH_NO_VIN_NOR_QUESTIONS,
destinationFmgPageValue: fmgPageValues.ESTIMATE,
destinationFmgPageValue: fmgPageValues.SERVICE_ZIP,
},
{
scenario: navigationScenarios.CLICKED_FORWARD_WITH_MOLDING_QUESTIONS,
@ -309,7 +330,7 @@ const routingTable = function (store) {
},
{
scenario: navigationScenarios.CLICKED_BACK_WITH_NO_VIN_NOR_QUESTIONS,
destinationFmgPageValue: fmgPageValues.ESTIMATE,
destinationFmgPageValue: fmgPageValues.SERVICE_ZIP,
},
{
scenario: navigationScenarios.CLICKED_BACK_WITH_PART_QUESTIONS,
@ -338,7 +359,7 @@ const routingTable = function (store) {
},
{
scenario: navigationScenarios.CLICKED_BACK_WITH_NO_VIN_NOR_QUESTIONS,
destinationFmgPageValue: fmgPageValues.ESTIMATE,
destinationFmgPageValue: fmgPageValues.SERVICE_ZIP,
},
{
scenario: navigationScenarios.CLICKED_BACK_WITH_PART_QUESTIONS,
@ -367,7 +388,7 @@ const routingTable = function (store) {
},
{
scenario: navigationScenarios.CLICKED_BACK_WITH_NO_VIN_NOR_QUESTIONS,
destinationFmgPageValue: fmgPageValues.ESTIMATE,
destinationFmgPageValue: fmgPageValues.SERVICE_ZIP,
},
{
scenario: navigationScenarios.CLICKED_BACK_WITH_PART_QUESTIONS,