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

Merge branch 'develop' into CSR-2115-remove-recal-from-cart

Browse source
This commit is contained in:
Chloe Herd 2024-07-09 10:07:48 -04:00
commit 4d4b978678
36 changed files with 1685 additions and 398 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
src/constants/query-strings.js
View file

@ -25,6 +25,14 @@ const queryStrings = {
REFERRAL_NUMBER: "rn",
PARENT_ACCOUNT: "pa",
CORRELATION_ID: "ci",
VEHICLE_YEAR: "vehicleyear",
VEHICLE_MAKE: "vehiclemake",
VEHICLE_MODEL: "vehiclemodel",
VEHICLE_STYLE: "vehiclestyle",
VEHICLE_DAMAGE: "vehicledamage",
SERVICE_ZIP: "servicezip",
EMAIL: "email",
IS_INSURANCE: "isinsurance",
};
export { queryStrings };

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

@ -96,6 +96,7 @@ const storeActions = {
CREATE_SUBMITTED_ORDER: "createSubmittedOrder",
RESET_SUBMITTED_ORDER: "resetSubmittedOrder",
RESET_IS_LEAD_GEN: "resetIsLeadGen",
};
export { storeActions };

1
src/constants/store-mutations.js
View file

@ -60,6 +60,7 @@ const storeMutations = {
Customer_Portal_Login_Token: "updateCustomerPortalLoginToken",
LOCK_TOKEN: "updateLockToken",
UPDATE_SETTLED_TENDER_AMOUNT: "updateSettledTenderAmount",
UPDATE_IS_LEAD_GEN: "updateIsLeadGen",
// EVENT BUS MUTATIONS
ADD_EVENT_TO_BUS: "addEventToBus",

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 };

4
src/digital-components/button-question/button-question.vue
View file

@ -213,7 +213,7 @@ export default {
classes = "ui-checkbox d-flex";
break;
case "servicePackageRadio":
classes = "package-main";
classes = "package-main d-md-flex justify-content-center";
break;
}
return classes;
@ -226,7 +226,7 @@ export default {
if (this.buttonTypeString == "radio") {
classes += " radio-button-container";
} else if (this.buttonTypeString == "servicePackageRadio") {
classes = "package-wrapper";
classes = "package-wrapper col-md-4";
}
if (this.buttonTypeString == "listCard" && this.buttonsInfo.length > 2) {

5
src/fmg-components/address-questions/address-questions.vue
View file

@ -243,11 +243,11 @@ export default {
this.fillInAddress
);
// When the Street Address textbox receives focus,
// When the Street Address textbox receives input for the first time,
// append the search results list container to the bottom of the textbox
// and disable browser autofill
this.addressField1.addEventListener(
"focus",
"keydown",
(e) => {
// Make place results box stick to the input on scroll
const streetAddressField = document.getElementById("streetAddressField");
@ -276,6 +276,7 @@ export default {
const addressFields = document.querySelectorAll(
".address-questions input, .address-questions select"
);
for (let addressField of addressFields) {
addressField.addEventListener("input", (e) => {
switch (e.inputType) {

43
src/fmg-components/cart/cart.spec.js
View file

@ -263,49 +263,6 @@ describe("cart.vue", () => {
expect(found).toBe(true);
});
// Mobile Fee Cart Item
test("if there is mobile fee on the order, a mobile fee cart item should be added to the cart", () => {
// Arrange
const lineItems = {
glassParts: [],
supportingItems: [
{
description: null,
id: "9ff98501-03a4-432b-884e-e4e28f884a2f",
kitPrice: 0,
laborAmount: 34.98,
partNumber: "MOBILE FEE",
partType: "MOBILE FEE",
salesTax: 2.62,
sellingPrice: 0,
},
],
vaps: [],
promos: [],
};
const availableVaps = [];
// Act
const { wrapper } = setupMocks({
props: {
modelValue: lineItems,
availableVaps: availableVaps,
},
});
// Assert
expect(wrapper.vm.mobileFeeCartItem).not.toBeNull();
expect(wrapper.vm.mobileFeeCartItem.subTotal).toEqual(34.98);
expect(wrapper.vm.mobileFeeCartItem.salesTax).toEqual(2.62);
const found =
wrapper.vm.cartItems.findIndex(
(cartItem) => cartItem == wrapper.vm.mobileFeeCartItem
) >= 0;
expect(found).toBe(true);
});
// Service package discount Fee Cart Item
test("if there is service package discount fee on the order, a service package discount cart item should be added to the cart", () => {
// Arrange

62
src/fmg-components/cart/cart.vue
View file

@ -377,9 +377,6 @@ export default {
cartItems.push(this.suppliesRepairCartItem);
}
if (this.mobileFeeCartItem) {
cartItems.push(this.mobileFeeCartItem);
}
if (this.servicePackageDiscountCartItem) {
cartItems.push(this.servicePackageDiscountCartItem);
}
@ -670,13 +667,27 @@ export default {
recycleFeeCartItemName() {
return this.getCmsContent("RecycleFeeTextWidget", "Text");
},
requiresRecycleFeeCartItem() {
return !this.isRepair;
},
recycleFeeCartItem() {
let cartItem = null;
const recycleFeeLineItem = this.supportingItems.find(
let recycleFeeLineItem = this.supportingItems.find(
(supportingItem) => supportingItem.partType == partTypeStrings.REPLACE_FEE
);
if (!recycleFeeLineItem && this.requiresRecycleFeeCartItem) {
recycleFeeLineItem = {
partNumber: partTypeStrings.RECYCLE_FEE,
partType: partTypeStrings.REPLACE_FEE,
laborAmount: 0,
kitPrice: 0,
sellingPrice: 0,
salesTax: 0,
};
}
if (recycleFeeLineItem) {
cartItem = {
name: this.recycleFeeCartItemName,
@ -745,44 +756,6 @@ export default {
return cartItem;
},
mobileFeeCartItemName() {
return this.getCmsContent("MobileServiceTextWidget", "Text");
},
mobileFeeCartItem() {
let cartItem = null;
const mobileFeeLineItem = this.supportingItems.find(
(lineItem) => lineItem.partType == partTypeStrings.MOBILE_FEE
);
if (mobileFeeLineItem) {
cartItem = {
name: this.mobileFeeCartItemName,
category: cartItemCategories.SUPPORTING_ITEMS,
cartItemType: cartItemTypes.MOBILE_FEE,
isDisplayed: true,
isRemovable: false,
subTotal: 0,
salesTax: 0,
lineItems: [],
isCoveredByInsurance: cartItemTypesCoveredByInsurance.includes(
cartItemTypes.MOBILE_FEE
),
};
mobileFeeLineItem.cartItemType = cartItem.cartItemType;
cartItem.lineItems.push(mobileFeeLineItem);
cartItem.subTotal +=
(mobileFeeLineItem.kitPrice ?? 0) +
(mobileFeeLineItem.laborAmount ?? 0) +
(mobileFeeLineItem.sellingPrice ?? 0);
cartItem.salesTax += mobileFeeLineItem.salesTax ?? 0;
}
return cartItem;
},
servicePackageDiscountCartItemName() {
return this.getCmsContent("ServicePackageDiscountTextWidget", "Text");
},
@ -986,7 +959,10 @@ export default {
if (!this.showAsPaid) {
return 0;
}
return this.subTotal + this.salesTax;
// unary plus operator to convert string amount to numeric so we can add them together
var amtPaid = +this.subTotal + +this.salesTax;
return amtPaid;
},
},
components: {

36
src/fmg-components/content-group-modal/content-group-modal.vue
View file

@ -4,15 +4,17 @@
:modalId="ModalName"
:footerButtonText="ModalCloseButtonText"
@footer-button-event="footerButtonClick">
<img :src="ModalImage" class="mw-100 d-flex mx-auto mb-4" alt="" />
<h5 class="mb-4" v-html="ModalHeadline"></h5>
<p class="fw-bold mb-2 subheader-text" v-html="ModalSubheadertext"></p>
<p class="mb-0" v-html="ModalBodyText"></p>
<p
class="my-4 caption modal-sub-body"
v-if="ModalSubBodyText"
v-html="ModalSubBodyText"></p>
<slot></slot>
<div :class="[isRecal ? 'recal-modal' : '']">
<img :src="ModalImage" class="mw-100 d-flex mx-auto mb-4" alt="" />
<h5 class="mb-4" v-html="ModalHeadline"></h5>
<p class="fw-bold mb-2 subheader-text" v-html="ModalSubheadertext"></p>
<p class="mb-0" v-html="ModalBodyText"></p>
<p
class="my-4 caption modal-sub-body"
v-if="ModalSubBodyText"
v-html="ModalSubBodyText"></p>
<slot></slot>
</div>
</modal>
</template>
@ -27,6 +29,7 @@ export default {
type: String,
default: null,
},
isRecal: Boolean,
},
computed: {
ModalName() {
@ -78,6 +81,21 @@ export default {
.modal-dialog {
.modal-content {
.modal-body {
.recal-modal {
display: flex;
flex-direction: column;
h5 {
text-align: center;
line-height: 32px;
order: 1;
}
p {
order: 3;
}
img {
order: 2;
}
}
.modal-sub-body {
color: $gray-600;
}

77
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,33 @@ 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,
});
describe("estimate.vue", () => {
test("should call forwardButtonAction if isLeadGen is true", async () => {
// update store with isLeadGen as true
store.commit(storeMutations.UPDATE_IS_LEAD_GEN, true);
store.commit(storeMutations.UPDATE_IS_REPAIR, isRepair);
// Set up the component
const { wrapper } = setupMocks({});
wrapper.vm.forwardButtonAction = jest.fn();
const nextFunction = jest.fn((c) => {
c(wrapper.vm);
});
expect(wrapper.vm.alertInfo).toEqual(expectedAlertInfo);
expect(wrapper.vm.isRepair).toEqual(isRepair);
}
);
// Set selectedVinLookupMethod to decline
wrapper.setData({ selectedVinLookupMethod: vinLookupMethodSelections.DECLINE });
// Call the method that contains the if-else logic
await estimate.beforeRouteEnter.call(
wrapper.vm,
{ query: { fmgPage: "estimate" } },
undefined,
nextFunction
);
expect(nextFunction).toHaveBeenCalled();
expect(wrapper.vm.forwardButtonAction).toHaveBeenCalled();
});
});
function setupMocks({

197
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) {
@ -213,15 +145,16 @@ export default {
}
vm.setCmsContent(resultMap.cmsContent);
if (store.getters.isLeadGen) {
vm.selectedVinLookupMethod = vinLookupMethodSelections.DECLINE;
vm.forwardButtonAction();
} else {
baseMixin.methods.dispatchStoreAction(storeActions.RESET_IS_LEAD_GEN);
baseMixin.methods.hideFmgLoadingModal();
}
});
},
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 +163,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 +182,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 +200,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 +211,6 @@ export default {
navbar,
buttonQuestion,
Form,
alert,
textboxQuestion,
textBlock,
loadingModal,
},
};

4
src/layouts/insurance-company/insurance-company.vue
View file

@ -76,6 +76,10 @@ export default {
next((vm) => {
vm.setCmsContent(resultMap.cmsContent);
vm.originalList = resultMap.insuranceCompanyList;
if (store.getters.isLeadGen) {
baseMixin.methods.dispatchStoreAction(storeActions.RESET_IS_LEAD_GEN);
baseMixin.methods.hideFmgLoadingModal();
}
});
},
data() {

6
src/layouts/part-questions/part-questions.vue
View file

@ -29,6 +29,8 @@ import { Form, defineRule } from "vee-validate";
import { required } from "@/helpers/validation-rules";
import { errorMessages } from "@/constants/error-messages";
import vehicleQuestionsMixin from "@/mixins/vehicle-questions-mixin";
import baseMixin from "@/mixins/base-mixin.js";
import { storeActions } from "@/constants/store-actions";
// DEFINE VALIDATION RULES
defineRule("questions-required", required(errorMessages.OPTION_REQUIRED));
@ -53,6 +55,10 @@ export default {
// Call the "next" function to complete the transition to this page.
next((vm) => {
vm.setCmsContent(resultMap.cmsContent);
if (store.getters.isLeadGen) {
baseMixin.methods.dispatchStoreAction(storeActions.RESET_IS_LEAD_GEN);
baseMixin.methods.hideFmgLoadingModal();
}
});
},
data() {

8
src/layouts/payment-method/payment-method.spec.js
View file

@ -51,6 +51,14 @@ function setupMocks() {
order: {
payment: {
isPia: false,
insuranceCoverage: {
isVerified: true,
},
},
policy: {
currentDeductible: 123,
isNoComp: false,
isItac: false,
},
},
policy: {

19
src/layouts/payment-method/payment-method.vue
View file

@ -22,6 +22,7 @@
<hr class="my-0" />
<cart
ref="cart"
:damage="damageInfo"
:availableVaps="availableVaps"
:allowItemRemoval="true"
@ -64,12 +65,12 @@
</div>
<paymentMethodQuestion
v-if="!isPiaDisabled"
v-if="isPiaEnabled && totalAmountDue > 0"
v-model="paymentMethodInternalModel"
validationRules="payment-method-required" />
<alert
v-if="isPiaDisabled"
v-if="!isPiaEnabled && totalAmountDue > 0"
:isDismissible="false"
alertClass="alert-info"
cmsWidgetName="NoPiaDisclaimerWidget"
@ -623,21 +624,21 @@ export default {
return null;
}
},
isPiaDisabled() {
totalAmountDue() {
return baseMixin.methods.getAmountDue(this.lineItems);
},
isPiaEnabled() {
const piaExperience = this.getSettingValue(experimentSettings.PIA_EXPERIENCE);
const piaInsurance = this.getSettingValue(experimentSettings.PIA_INSURANCE);
var isEnabled = false;
if (this.isInsurance) {
isEnabled = piaInsurance === "true" && this.currentDeductible !== 0;
return piaInsurance === "true" && this.currentDeductible > 0;
} else {
isEnabled = piaExperience === "PIA Optional" || piaExperience === "PIA Required";
return piaExperience === "PIA Optional" || piaExperience === "PIA Required";
}
return !isEnabled;
},
paymentMethod() {
if (this.isPiaDisabled) {
if (!this.isPiaEnabled) {
return paymentMethods.LATER;
}

116
src/layouts/quote/quote.spec.js
View file

@ -8,6 +8,7 @@ import * as navigateToHeritage from "@/helpers/heritage-integration/navigation-h
import { nextTick } from "vue";
import { experimentSettings } from "@/constants/experiments";
import baseMixin from "@/mixins/base-mixin.js";
import { containsLineItemWithPartType } from "../../helpers/service-package-helper";
jest.mock("@/store", () => ({
commit: jest.fn(),
@ -22,6 +23,9 @@ jest.mock("@/helpers/cms-content-helper", () => ({
jest.mock("@/helpers/heritage-integration/navigation-helper", () => ({
navigateToHeritageFunnel: jest.fn(),
}));
jest.mock("@/helpers/service-package-helper", () => ({
containsLineItemWithPartType: jest.fn(),
}));
jest.mock("@/helpers/promotions-helper", () => ({
revalidatePromosAndValidateQueryStringPromo: jest.fn(() => {
@ -636,12 +640,122 @@ describe("quote.vue", () => {
);
});
});
describe("quote.vue", () => {
test("should call forwardButtonAction if isLeadGen is true and Insurance is true", async () => {
// Set up the store with isLeadGen as true
store.getters = {
lineItems: {
glassParts: ["item", "item2"],
},
order: {
lineItems: {
glassParts: ["item", "item2"],
},
serviceLocation: {
zipCode: "12345",
zipCodeCtu: "value",
},
damage: {
isRepair: false,
},
referralNumber: "1234567",
payment: {
isInsurance: true,
inactivePromos: [],
},
},
isLeadGen: true,
payment: {
isInsurance: true,
inactivePromos: [],
},
vehicle: {
cardId: "123",
},
experimentSettings: {
settingName: "SERVICE_PACKAGE_DISCOUNT",
},
};
// Set up the component
const { wrapper } = setupMocks({});
wrapper.vm.$route = { query: null };
wrapper.vm.forwardButtonAction = jest.fn();
const nextFunction = jest.fn((c) => {
c(wrapper.vm);
});
// Call the method that contains the if-else logic
await quote.beforeRouteEnter.call(
wrapper.vm,
{ query: { fmgPage: "quote" } },
undefined,
nextFunction
);
expect(nextFunction).toHaveBeenCalled();
expect(wrapper.vm.forwardButtonAction).toHaveBeenCalled();
});
test("should not call forwardButtonAction if isLeadGen is true and Insurance is false", async () => {
// Set up the store with isLeadGen as true
store.getters = {
lineItems: {
glassParts: ["item", "item2"],
},
order: {
lineItems: {
glassParts: ["item", "item2"],
},
serviceLocation: {
zipCode: "12345",
zipCodeCtu: "value",
},
damage: {
isRepair: false,
},
referralNumber: "1234567",
payment: {
isInsurance: null,
inactivePromos: [],
},
},
isLeadGen: true,
payment: {
isInsurance: null,
inactivePromos: [],
},
vehicle: {
cardId: "123",
},
experimentSettings: {
settingName: "SERVICE_PACKAGE_DISCOUNT",
},
};
// Set up the component
const { wrapper } = setupMocks({});
wrapper.vm.$route = { query: null };
wrapper.vm.forwardButtonAction = jest.fn();
const nextFunction = jest.fn((c) => {
c(wrapper.vm);
});
// Call the method that contains the if-else logic
await quote.beforeRouteEnter.call(
wrapper.vm,
{ query: { fmgPage: "quote" } },
undefined,
nextFunction
);
expect(wrapper.vm.forwardButtonAction).not.toHaveBeenCalled();
});
});
function setupMocks({ customMountOptions }) {
const mountOptions = getMountOptions({
...customMountOptions,
});
baseMixin.methods.hideFmgLoadingModal = jest.fn();
mountOptions.global.mocks["$store"] = store;
mountOptions["attachTo"] = document.body;

55
src/layouts/quote/quote.vue
View file

@ -1,7 +1,7 @@
<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="container-fluid page-container-grouped-styles quote">
<div class="row justify-content-center">
<div class="col-md-6">
<funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
@ -20,7 +20,10 @@
cmsWidgetName="CashOrInsuranceQuestionWidget"
v-model="isInsuranceSelected"
groupName="CashOrInsuranceQuestion" />
</div>
</div>
<div class="row justify-content-center">
<div class="col-md-6 col-lg-4">
<servicePackageQuestion
ref="servicePackage"
cashCmsWidgetName="CashServicePackageQuestionWidget"
@ -34,14 +37,23 @@
v-on="{ 'buttonEvent.openModal': openModalAction }"
validationRules="option-required"
isRequired />
</div>
</div>
<div class="row justify-content-center">
<div class="col-md-6 col-xl-4">
<afterpayModalBanner
v-if="!isInsuranceSelected"
v-if="!isInsuranceSelected && !isRecalibrationOnOrder"
cmsWidgetName="AfterpayModalWidget"
:activePromos="lineItems.promos"
:availableLineItems="availableLineItems"
:lineItems="lineItems" />
<recalDisclaimer
cmsWidgetName="RecalDisclaimerWidget"
v-if="isRecalibrationOnOrder"
v-on="{ textLinkClicked: openModalAction }"
alertClass="alert-info" />
<promoModalQuestion
class="small mt-4"
v-model="lineItems"
@ -60,7 +72,7 @@
<contentGroupModal ref="RainDefenseModal" cmsWidgetName="RainDefenseModal" />
<contentGroupModal ref="FrontWiperModal" cmsWidgetName="FrontWiperModal" />
<contentGroupModal ref="RearWiperModal" cmsWidgetName="RearWiperModal" />
<contentGroupModal ref="RecalModal" cmsWidgetName="RecalModal" />
<contentGroupModal ref="RecalModal" cmsWidgetName="RecalModal" isRecal />
<navbar
cmsWidgetName="FunnelFooterWidget"
@ -86,6 +98,7 @@ import textBlock from "@/digital-components/text-block/text-block";
import contentGroupModal from "@/fmg-components/content-group-modal/content-group-modal";
import loadingModal from "@/fmg-components/loading-modal/loading-modal.vue";
import afterpayModalBanner from "@/layouts/quote/afterpay-modal-banner/afterpay-modal-banner";
import recalDisclaimer from "@/layouts/quote/recal-disclaimer/recal-disclaimer.vue";
import baseMixin from "@/mixins/base-mixin.js";
import experimentMixin from "@/mixins/experiment-mixin.js";
import vehicleQuestionsMixin from "../../mixins/vehicle-questions-mixin";
@ -108,6 +121,8 @@ import { queryStrings } from "@/constants/query-strings";
import { getQuerystringParameter } from "@/helpers/querystring-helper";
import promoModalQuestion from "@/fmg-components/promo-modal-question/promo-modal-question";
import { experimentSettings } from "@/constants/experiments";
import { partTypeStrings } from "@/constants/part-type-strings";
import { containsLineItemWithPartType } from "@/helpers/service-package-helper";
defineRule("option-required", required(errorMessages.OPTION_REQUIRED));
export default {
@ -182,6 +197,18 @@ export default {
...servicePackageDiscountPart,
];
// When calling pricing from the quote page, always use the cash parent account
baseMixin.methods.dispatchStoreAction(
storeActions.SAVE_PARENT_ACCOUNT_NUMBER,
applicationConfig.CASH_PARENT_ACCOUNT_NUMBER,
false
);
baseMixin.methods.dispatchStoreAction(
storeActions.SAVE_BILL_TO_ACCOUNT_NUMBER,
applicationConfig.CASH_DEFAULT_BILL_TO_ACCOUNT_NUMBER,
false
);
const pricingResults = await baseMixin.methods.dispatchStoreActionWithLogging(
storeActions.PRICE_ORDER_ITEMS_AND_SAVE_SERVER_DATA,
{
@ -242,6 +269,17 @@ export default {
validateAlerts[0].shouldAutoFade
);
}
if (store.getters.isLeadGen) {
if (store.getters.order.payment.isInsurance == true) {
vm.forwardButtonAction();
} else {
baseMixin.methods.dispatchStoreAction(storeActions.RESET_IS_LEAD_GEN);
baseMixin.methods.hideFmgLoadingModal();
}
} else {
baseMixin.methods.dispatchStoreAction(storeActions.RESET_IS_LEAD_GEN);
baseMixin.methods.hideFmgLoadingModal();
}
});
},
data() {
@ -256,6 +294,12 @@ export default {
lineItemsCloneForWatcher() {
return Object.assign({}, this.lineItems);
},
isRecalibrationOnOrder() {
return containsLineItemWithPartType(
partTypeStrings.RECALIBRATION,
this?.availableLineItems
);
},
},
methods: {
openModalAction(modalName) {
@ -405,6 +449,7 @@ export default {
loadingModal,
afterpayModalBanner,
promoModalQuestion,
recalDisclaimer,
},
};
</script>

51
src/layouts/quote/recal-disclaimer/recal-disclaimer.spec.js Normal file
View file

@ -0,0 +1,51 @@
import { mount } from "@vue/test-utils";
import recalDisclamer from "./recal-disclaimer";
describe("recal-disclaimer.vue", () => {
it("Should display header text when HeaderText is defined in the CMS", async () => {
const wrapper = mount(recalDisclamer, {
mixins: [mockMixin],
props: {
cmsWidgetName: "test",
},
attachTo: document.body,
});
expect(wrapper.html()).toEqual(expect.stringContaining(mockCmsContent["HeaderText"]));
});
it("Should insert image url when Image is defined in the CMS", async () => {
const wrapper = mount(recalDisclamer, {
mixins: [mockMixin],
props: {
cmsWidgetName: "test",
},
attachTo: document.body,
});
expect(wrapper.html()).toEqual(expect.stringContaining(mockCmsContent["Image"]));
});
it("Should display subheader text when SubheaderText is defined in the CMS", async () => {
const wrapper = mount(recalDisclamer, {
mixins: [mockMixin],
props: {
cmsWidgetName: "test",
},
attachTo: document.body,
});
expect(wrapper.html()).toEqual(expect.stringContaining(mockCmsContent["SubheaderText"]));
});
});
const mockMixin = {
methods: {
getCmsContent: jest.fn((widgetName, cmsFieldName) => {
return mockCmsContent[cmsFieldName];
}),
},
};
const mockCmsContent = {
HeaderText: "Sample header text here.",
SubheaderText: "Sample subheader text here.",
Image: "https://www.sampleImage.sample",
};

115
src/layouts/quote/recal-disclaimer/recal-disclaimer.vue Normal file
View file

@ -0,0 +1,115 @@
<template>
<div class="alert fade show alert-info recal-alert" role="alert">
<div class="alert-heading">
<span>
<img v-if="hasImage" :src="imageUrl" />
<span class="px-2"> {{ recalHeaderText }}</span>
</span>
</div>
<div>
<span v-for="copy in recalBody" :key="copy">
<span v-if="doesCopyContainTextLink(copy)" class="recal-link">
<textLink
linkType="text"
:text="getRouterLinkDisplayTextFromCopy(copy)"
href="#!"
@click-event="$emit('textLinkClicked', getRouterLinkRouteFromCopy(copy))"
:data-bs-target="'#' + getRouterLinkRouteFromCopy(copy)" />
</span>
<span v-else v-html="copy" class="alert-body"></span>
</span>
</div>
</div>
</template>
<script>
import textLink from "@/ux-components/text-link/text-link";
// Supporting files
import {
doesCopyContainTextLink,
splitCopyOnCMSPlaceHolder,
getRouterLinkRouteFromCopy,
getRouterLinkDisplayTextFromCopy,
getExternalLink,
} from "@/helpers/cms-content-helper";
function getInlineAltText(token) {
const innerTokens = token.split(",");
return innerTokens[1] ?? "";
}
export default {
name: "recal-disclaimer",
props: {
cmsWidgetName: String,
},
data() {
return {};
},
methods: {
getInlineAltText,
doesCopyContainTextLink,
splitCopyOnCMSPlaceHolder,
getRouterLinkRouteFromCopy,
getRouterLinkDisplayTextFromCopy,
getExternalLink,
},
computed: {
imageUrl() {
return this.getCmsContent(this.cmsWidgetName, "Image");
},
hasImage() {
return !!this.imageUrl;
},
recalHeaderText() {
return this.getCmsContent(this.cmsWidgetName, "HeaderText");
},
recalBody() {
return splitCopyOnCMSPlaceHolder(
this.getCmsContent(this.cmsWidgetName, "SubheaderText")
);
},
},
components: {
textLink,
},
};
</script>
<style lang="scss" scoped>
.alert {
text-align: center;
&.recal-alert {
padding: 16px 18px;
}
&.alert-info {
background-color: #e5f1fa;
color: #525656;
.alert-heading {
color: #0070d1;
font-weight: 600;
font-size: 14px;
line-height: 17.3px;
}
svg {
fill: #0070d1;
width: 1rem;
height: 1rem;
}
}
& .alert-heading {
font-size: 14px;
}
.alert-body {
font-size: 14px;
font-weight: 400px;
}
.recal-link {
font-size: 14px;
line-height: 24px;
font-weight: 600;
}
}
</style>

7
src/layouts/quote/service-package-question/service-package-question.vue
View file

@ -234,10 +234,15 @@ export default {
},
getPackagePrice(packageName, { discountedPrice = false, servicePackageDiscount = false }) {
var lineItemsToPrice = [...this.nullSafeAvailableLineItems];
if (this.isRecalibrationOnOrder) {
lineItemsToPrice = lineItemsToPrice.filter((item) => {
return item.partType != partTypeStrings.RECALIBRATION;
});
}
//remove service package discount part
if (this.isServicePackageDiscountOnOrder) {
lineItemsToPrice = this.nullSafeAvailableLineItems.filter((item) => {
lineItemsToPrice = lineItemsToPrice.filter((item) => {
return item.partType != this.servicePackageDiscountParts[0].partType;
});
}

67
src/layouts/quote/service-package-question/service-package-radio/service-package-radio.vue
View file

@ -12,7 +12,9 @@
]"
for="testradio">
<div class="package-specs">
<div v-if="this.additionalButtonData.servicePackageDiscount" class="row">
<div
v-if="this.additionalButtonData.servicePackageDiscount"
class="row justify-content-between">
<div class="col md-6">
<p class="m-0">
<span v-html="this.buttonLabel"></span>
@ -136,24 +138,20 @@ export default {
</script>
<style lang="scss">
.discount-text {
line-height: 36px;
display: flex;
border-top-right-radius: 0.5rem;
border-top-left-radius: 0.5rem;
background-color: #469d2a;
align-items: center;
justify-content: center;
padding: 5px;
width: 100%;
color: white;
}
.package-main {
.package-wrapper {
margin: 0.5rem 0;
margin: 1rem 0;
@include media-breakpoint-up(md) {
margin: 0.5rem 0;
}
position: relative;
@include media-breakpoint-up(md) {
margin: 1rem 0.5rem;
}
label {
display: block;
height: 100%;
}
input[type="radio"] {
@ -174,13 +172,21 @@ export default {
border-radius: 0.5rem;
overflow: hidden;
min-height: 60px;
@include media-breakpoint-up(md) {
max-height: 500px;
height: 100%;
}
&.has-subheader {
min-height: 80px;
}
&.has-text {
border-radius: 0 0 0.5rem 0.5rem;
border: 1px solid #469d2a !important;
border: 1px solid #469d2a;
@include media-breakpoint-up(md) {
border-radius: 0.5rem;
padding-top: 3.75rem;
}
}
&:before {
@ -265,6 +271,9 @@ export default {
width: 100%;
max-height: 0;
transition: all 0.5s ease;
@include media-breakpoint-up(md) {
max-height: 500px;
}
p {
font-weight: 500;
@ -337,6 +346,34 @@ export default {
.hide-when-closed {
display: none;
@include media-breakpoint-up(md) {
display: flex;
flex-direction: column;
}
}
}
.discount-text {
line-height: 36px;
display: flex;
border-top-right-radius: 0.5rem;
border-top-left-radius: 0.5rem;
background-color: #469d2a;
align-items: center;
justify-content: center;
padding: 5px;
width: 100%;
color: white;
height: 2.875rem;
@include media-breakpoint-up(md) {
position: absolute;
z-index: 1;
~ label {
.package-label {
&:after {
top: 68px;
}
}
}
}
}
}

21
src/layouts/service-location/mobile-location-modal-questions/mobile-location-modal-questions.vue
View file

@ -24,11 +24,6 @@
{{ errorMessage }}
</span>
</div>
<textBlock
v-if="mobileFeeApplies"
:customText="mobileFeeText"
cmsWidgetName="MobileFeeDisclaimerWidget"
typeStyle="caption" />
</div>
<modal
:ref="modalName"
@ -154,7 +149,6 @@ export default {
alertInvalidZipWidgetName: String,
customComponentId: String,
validationRules: String,
mobileFeeApplies: Boolean,
},
computed: {
mobileLocationLinkPromptText() {
@ -182,21 +176,6 @@ export default {
modalHeaderText() {
return this.getCmsContent(this.modalWidgetName, "HeaderText");
},
mobileFeeText() {
const cmsContentText = this.getCmsContent("MobileFeeDisclaimerWidget", "Text");
return cmsContentText.replaceAll("{custom:mobileFee}", this.mobileFee);
},
mobileFee() {
if (!this.mobileFeePart) {
return 0;
}
return (
this.mobileFeePart.laborAmount +
this.mobileFeePart.sellingPrice +
this.mobileFeePart.kitPrice
);
},
modalFooterText() {
return this.getCmsContent(this.modalWidgetName, "FooterText");
},

10
src/layouts/service-location/service-location.vue
View file

@ -57,6 +57,12 @@
cmsWidgetName="AlertNoShopsWidget"
v-if="displayNoShopsAlert"
alertClass="alert-warning" />
<alert
ref="alertMobileFeeFree"
class="my-5"
cmsWidgetName="AlertMobileFeeFreeWidget"
v-if="isServiceableMobile && !isInsurance"
alertClass="alert-success" />
</div>
</div>
<div class="row justify-content-center appointment-type">
@ -81,7 +87,6 @@
v-if="selectedAppointmentType === 'Mobile'"
v-model="mobileLocationQuestions"
:mobileFeePart="mobileFeePart"
:mobileFeeApplies="mobileFeeApplies"
@updated-mobile-fee-part="setMobileFeePart"
@updated-serviceability="setServiceabilityDetails"
@updated-contains-military-base="setContainsMilitaryBase"
@ -355,6 +360,9 @@ export default {
recalibrationInformationModal() {
return this.$refs.recalibrationInformationModal;
},
isInsurance() {
return store.getters.payment.isInsurance;
},
},
methods: {
arePagePrerequisitesValid() {

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

@ -0,0 +1,488 @@
// 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);
});
});
});
describe("service-zip.vue", () => {
test("should call forwardButtonAction if isLeadGen is true and form is valid", async () => {
// Set up the store with isLeadGen as true
store.getters.isLeadGen = true;
// Set up the component
const wrapper = setupMocks({});
wrapper.vm.forwardButtonAction = jest.fn();
const nextFunction = jest.fn((c) => {
c(wrapper.vm);
});
// Mock the isFormValid method
wrapper.vm.isFormValid = jest.fn().mockImplementation(() => {
return true;
});
// Call the method that contains the if-else logic
await serviceZip.beforeRouteEnter.call(
wrapper.vm,
{ query: { fmgPage: "service-zip" } },
undefined,
nextFunction
);
expect(nextFunction).toHaveBeenCalled();
expect(wrapper.vm.forwardButtonAction).toHaveBeenCalled();
});
test("should not call forwardButtonAction if isLeadGen is true and form is invalid", async () => {
// Set up the store with isLeadGen as true
store.getters.isLeadGen = true;
// Set up the component
const wrapper = setupMocks({});
wrapper.vm.forwardButtonAction = jest.fn();
const nextFunction = jest.fn((c) => {
c(wrapper.vm);
});
// Mock the isFormValid method
wrapper.vm.isFormValid = jest.fn().mockImplementation(() => {
return false;
});
// Call the method that contains the if-else logic
await serviceZip.beforeRouteEnter.call(
wrapper.vm,
{ query: { fmgPage: "service-zip" } },
undefined,
nextFunction
);
expect(wrapper.vm.forwardButtonAction).not.toHaveBeenCalled();
});
});
function setupMocks({ customMountOptions, customZipQuery, customZipDataResponse }) {
const route = { query: { fmgPage: "service-zip" }, params: {} };
if (customZipQuery) {
route.query.zipcode = customZipQuery;
}
baseMixin.methods.hideFmgLoadingModal = jest.fn();
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;
}

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

@ -0,0 +1,304 @@
<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(async (vm) => {
vm.setCmsContent(resultMap.cmsContent);
if (store.getters.isLeadGen) {
const isValid = await vm.isFormValid();
if (isValid) {
vm.forwardButtonAction();
} else {
baseMixin.methods.dispatchStoreAction(storeActions.RESET_IS_LEAD_GEN);
baseMixin.methods.hideFmgLoadingModal();
}
}
});
},
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;
if (store.getters.isLeadGen) {
baseMixin.methods.dispatchStoreAction(storeActions.RESET_IS_LEAD_GEN);
baseMixin.methods.hideFmgLoadingModal();
}
return this.$refs.navbar.removeLoader();
}
this.displayInvalidZipAlert = false;
if (!zipCodeData.isServiceable) {
this.displayNonServiceableZipAlert = true;
if (store.getters.isLeadGen) {
baseMixin.methods.dispatchStoreAction(storeActions.RESET_IS_LEAD_GEN);
baseMixin.methods.hideFmgLoadingModal();
}
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();
}
},
async isFormValid() {
const form = this.$refs.theForm;
const formValidateResponse = await form.validate();
return formValidateResponse?.valid;
},
},
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>

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

@ -52,6 +52,21 @@ jest.mock("@/store", () => ({
damage: {
glassToReplace: [],
},
order: {
vehicle: {
carId: "C00000000",
image: "test.jpg",
payment: {
insuranceCoverage: {
isVerified: false,
},
},
},
damage: {
glassToReplace: [],
},
},
isLeadGen: false,
},
}));
@ -746,6 +761,56 @@ describe("vehicle-damage.vue", () => {
expect(wrapper.vm.shouldHideBackButton).toBeFalsy();
});
});
describe("vehicle-damage.vue", () => {
test("should call forwardButtonAction if isLeadGen is true and selectedDamageLocations is not empty", async () => {
// Set up the store with isLeadGen as true
store.getters.isLeadGen = true;
// Set up the component
const { wrapper } = setupMocks({});
wrapper.vm.forwardButtonAction = jest.fn();
const nextFunction = jest.fn((c) => {
c(wrapper.vm);
});
// Set selectedDamageLocations
wrapper.setData({ selectedDamageLocations: ["windshield"] });
// Call the method that contains the if-else logic
await vehicleDamage.beforeRouteEnter.call(
wrapper.vm,
{ query: { fmgPage: "vehicle-damage" } },
undefined,
nextFunction
);
expect(nextFunction).toHaveBeenCalled();
expect(wrapper.vm.forwardButtonAction).toHaveBeenCalled();
});
test("should not call forwardButtonAction if isLeadGen is true and selectedDamageLocations is empty", async () => {
// Set up the store with isLeadGen as true
store.getters.isLeadGen = true;
// Set up the component
const { wrapper } = setupMocks({});
wrapper.vm.forwardButtonAction = jest.fn();
const nextFunction = jest.fn((c) => {
c(wrapper.vm);
});
// Set selectedDamageLocations to empty
wrapper.setData({ selectedDamageLocations: [] });
// Call the method that contains the if-else logic
await vehicleDamage.beforeRouteEnter.call(
wrapper.vm,
{ query: { fmgPage: "vehicle-damage" } },
undefined,
nextFunction
);
expect(wrapper.vm.forwardButtonAction).not.toHaveBeenCalled();
});
});
});
function setupMocks({ pageHeaderWidgetHeaderText, mountOptionsMockData, funnelCookie = {} }) {
@ -769,6 +834,7 @@ function setupMocks({ pageHeaderWidgetHeaderText, mountOptionsMockData, funnelCo
isVerified: false,
},
},
isLeadGen: false,
},
},
};
@ -781,6 +847,7 @@ function setupMocks({ pageHeaderWidgetHeaderText, mountOptionsMockData, funnelCo
//Mock api responses
baseMixin.methods.dispatchStoreAction = jest.fn();
baseMixin.methods.dispatchStoreActionWithLogging = jest.fn();
baseMixin.methods.hideFmgLoadingModal = jest.fn();
const apiResponses = {
cmsContent: {
FunnelSubHeaderWidget: pageHeaderWidgetHeaderText,

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

@ -149,6 +149,17 @@ export default {
vm.$refs.backGlassOptions.initializeComponent(
resultMap.damageOptions.backGlassOptions.availableReplacementOptions
);
if (store.getters.isLeadGen) {
if (vm.selectedDamageLocations?.length > 0) {
vm.forwardButtonAction();
} else {
baseMixin.methods.dispatchStoreAction(storeActions.RESET_IS_LEAD_GEN);
baseMixin.methods.hideFmgLoadingModal();
}
} else {
baseMixin.methods.dispatchStoreAction(storeActions.RESET_IS_LEAD_GEN);
baseMixin.methods.hideFmgLoadingModal();
}
});
},
data() {
@ -376,12 +387,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 +417,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,

128
src/layouts/vehicle/vehicle.spec.js
View file

@ -2,11 +2,13 @@
import vehicle from "@/layouts/vehicle/vehicle.vue";
// Supporting Files
import store from "@/store";
import { shallowMount } from "@vue/test-utils";
import { nextTick } from "vue";
import { getMountOptions } from "@/helpers/unit-test-helper.js";
import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
import baseMixin from "../../mixins/base-mixin";
import { settleAllPromises } from "@/helpers/layout-helper.js";
// Mock our module for promises.
jest.mock("@/helpers/layout-helper.js", () => ({
@ -18,6 +20,32 @@ jest.mock("@/helpers/cms-content-helper", () => ({
fetchCmsContentForPage: jest.fn(),
}));
// Mock Store
jest.mock("@/store", () => ({
commit: jest.fn(),
dispatch: jest.fn(),
getters: {
applicationUser: {
experiments: [{ universeName: "ConceptFunnel" }],
},
isLeadGen: false,
vehicle: {
carId: "C00000000",
image: "test.jpg",
},
order: {
vehicle: {
year: 2018,
make: "Honda",
model: "Accord",
style: "4 door sedan",
carId: "C00000000",
image: "test.jpg",
},
},
},
}));
describe("vehicle.vue", () => {
test("arePagePrerequisitesValid should be true ", async () => {
//Arrange
@ -58,25 +86,101 @@ describe("vehicle.vue", () => {
});
});
function setupMocks() {
const mountOptions = getMountOptions({
router: {
navigate: jest.fn(),
navigate: jest.fn(),
navigateWithSaving: jest.fn(),
navigateWithoutSaving: jest.fn(),
},
});
describe("vehicle.vue", () => {
test("should call forwardButtonAction if isLeadGen is true and displayNoServiceAlert is false", async () => {
// Set up the store with isLeadGen as true
store.getters.isLeadGen = true;
// Set up the component
const { wrapper } = setupMocks();
wrapper.vm.forwardButtonAction = jest.fn();
const nextFunction = jest.fn((c) => {
c(wrapper.vm);
});
// Set displayNoServiceAlert to false
wrapper.setData({ displayNoServiceAlert: false });
// Mock the getVehicleDetails method
wrapper.vm.getVehicleDetails = jest.fn();
// Call the method that contains the if-else logic
await vehicle.beforeRouteEnter.call(
wrapper.vm,
{ query: { fmgPage: "vehicle" } },
undefined,
nextFunction
);
expect(nextFunction).toHaveBeenCalled();
expect(wrapper.vm.forwardButtonAction).toHaveBeenCalled();
});
test("should not call forwardButtonAction if isLeadGen is true and displayNoServiceAlert is true", async () => {
// Set up the store with isLeadGen as true
store.getters.isLeadGen = true;
// Set up the component
const { wrapper } = setupMocks();
wrapper.vm.forwardButtonAction = jest.fn();
const nextFunction = jest.fn((c) => {
c(wrapper.vm);
});
// Set displayNoServiceAlert to false
wrapper.setData({ displayNoServiceAlert: true });
// Mock the getVehicleDetails method
wrapper.vm.getVehicleDetails = jest.fn();
// Call the method that contains the if-else logic
await vehicle.beforeRouteEnter.call(
wrapper.vm,
{ query: { fmgPage: "vehicle" } },
undefined,
nextFunction
);
expect(wrapper.vm.forwardButtonAction).not.toHaveBeenCalled();
});
});
function setupMocks() {
const groupName = "vehicle";
const cmsQuestionText = "Vehicle Year";
const cmsAnswers = [{ Name: "Vehicle year" }];
const FunnelFooterWidget = { ForwardButtonText: "vehicle button" };
//Mock CMS Content
const cmsContent = {
groupName: groupName,
QuestionText: cmsQuestionText,
Answers: cmsAnswers,
FunnelFooterWidget: FunnelFooterWidget,
};
//Mock props
const mockMixin = {
methods: {
getCmsContent: jest.fn(),
},
};
const mountOptionsMockData = {
router: {
navigate: jest.fn(),
navigateWithSaving: jest.fn(),
navigateWithoutSaving: jest.fn(),
},
route: {
query: {},
},
};
const apiPromise = Promise.resolve({ cmsContent });
settleAllPromises.mockImplementation(() => apiPromise);
const mountOptions = getMountOptions({
...mountOptionsMockData,
mixins: [baseMixin, mockMixin],
});
mountOptions["attachTo"] = document.body;
mountOptions.mixins = [mockMixin];
const wrapper = shallowMount(vehicle, mountOptions);
return { wrapper };
wrapper.vm.isDisabled = jest.fn();
return { wrapper, apiPromise };
}

14
src/layouts/vehicle/vehicle.vue
View file

@ -218,7 +218,7 @@ export default {
let resultMap = await settleAllPromises(promiseResultMap);
// Call the "next" function to complete the transition to this page.
next((vm) => {
next(async (vm) => {
vm.setCmsContent(resultMap.cmsContent);
vm.initializeYearComponent(resultMap.yearQuestionInitialData);
@ -232,6 +232,18 @@ export default {
resultMap.modelQuestionInitialData,
resultMap.styleQuestionInitialData
);
if (store.getters.isLeadGen) {
await vm.getVehicleDetails();
if (!vm.displayNoServiceAlert) {
vm.forwardButtonAction();
} else {
baseMixin.methods.dispatchStoreAction(storeActions.RESET_IS_LEAD_GEN);
baseMixin.methods.hideFmgLoadingModal();
}
} else {
baseMixin.methods.dispatchStoreAction(storeActions.RESET_IS_LEAD_GEN);
baseMixin.methods.hideFmgLoadingModal();
}
});
},

4
src/mixins/base-mixin.js
View file

@ -7,6 +7,7 @@ import { routerParams } from "@/router/router-constants/router-params";
import { queryStrings } from "@/constants/query-strings";
import { dynamicStrings } from "@/constants/dynamic-strings";
import { partTypeStrings } from "../constants/part-type-strings";
import { showFmgLoadingModal } from "@/helpers/loading-modal-helper";
export default {
data() {
@ -192,6 +193,9 @@ export default {
const container = document.getElementsByClassName("page-container-grouped-styles")[0];
container.scrollTo({ top: container.scrollHeight, left: 0, behavior: "smooth" });
},
hideFmgLoadingModal() {
showFmgLoadingModal(false);
},
},
computed: {
storeActions() {

75
src/router/index.js
View file

@ -84,6 +84,14 @@ const routes = [
);
const parentAccount = getQuerystringParameter(queryStrings.PARENT_ACCOUNT);
const correlationId = getQuerystringParameter(queryStrings.CORRELATION_ID);
const vehicleYear = getQuerystringParameter(queryStrings.VEHICLE_YEAR);
const vehicleMake = getQuerystringParameter(queryStrings.VEHICLE_MAKE);
const vehicleModel = getQuerystringParameter(queryStrings.VEHICLE_MODEL);
const vehicleStyle = getQuerystringParameter(queryStrings.VEHICLE_STYLE);
const vehicleDamage = getQuerystringParameter(queryStrings.VEHICLE_DAMAGE);
const serviceZip = getQuerystringParameter(queryStrings.SERVICE_ZIP);
const email = getQuerystringParameter(queryStrings.EMAIL);
const isInsurance = getQuerystringParameter(queryStrings.IS_INSURANCE);
if (referralNumber) {
store.commit(storeMutations.UPDATE_REFERRAL_NUMBER, referralNumber);
store.commit(storeMutations.UPDATE_PARENT_ACCT_NUMBER, parentAccount);
@ -93,6 +101,50 @@ const routes = [
);
updateOrCreateFunnelCookie();
}
if (
vehicleYear &&
vehicleMake &&
vehicleModel &&
vehicleStyle &&
vehicleDamage &&
serviceZip &&
email &&
isInsurance
) {
if (!store.getters.applicationUser.triggeredSiteEntry) {
store.commit(storeMutations.UPDATE_YEAR, vehicleYear);
store.commit(storeMutations.UPDATE_MAKE, vehicleMake);
store.commit(storeMutations.UPDATE_MODEL, vehicleModel);
store.commit(storeMutations.UPDATE_STYLE, vehicleStyle);
store.commit(storeMutations.UPDATE_IS_LEAD_GEN, true);
if (vehicleDamage == "windshieldReplace") {
store.commit(storeMutations.UPDATE_IS_REPAIR, false);
store.commit(storeMutations.UPDATE_NUMBER_OF_CHIPS, null);
const glassToReplace = [
{ glassLocation: "Windshield", glassName: "Single" },
];
store.commit(
storeMutations.UPDATE_GLASS_TO_REPLACE,
glassToReplace
);
} else if (vehicleDamage == "windshieldRepair") {
store.commit(storeMutations.UPDATE_IS_REPAIR, true);
store.commit(storeMutations.UPDATE_NUMBER_OF_CHIPS, 1);
}
const serviceZipInfo = {
state: null,
zipCode: serviceZip,
zipCodeCtu: null,
};
store.commit(storeMutations.UPDATE_SERVICE_ZIP, serviceZipInfo);
store.commit(storeMutations.UPDATE_CUSTOMER_EMAIL_ADDRESS, email);
if (isInsurance == "true") {
store.commit(storeMutations.UPDATE_IS_INSURANCE, true);
} else {
store.commit(storeMutations.UPDATE_IS_INSURANCE, null);
}
}
}
const loadSessionResponse = await loadSessionIfPresent(
to.query.isInsurance != null
@ -234,6 +286,22 @@ router.beforeEach(async (to, from, next) => {
const notToPIAReturn = toQueryPage != fmgPageValues.PAYMENT_PIA_RETURN;
const isInIframe = window !== window.top;
if (store.getters.isLeadGen) {
// Check if alert event is on the bus
const alertEvent = eventBus.readEventFromBus(
globalEvents.Categories.GLOBAL_ALERT,
globalEvents.SubCategories.PAGE_NOT_FOUND
);
//Uknown alerts most likely were added by a failed api call in global-methods
const unknownAlertEvent = eventBus.readEventFromBus(
globalEvents.Categories.GLOBAL_ALERT,
globalEvents.SubCategories.UNKNOWN_ERROR
);
// If alert event is on the bus, then display the alert
if (alertEvent !== undefined || unknownAlertEvent !== undefined) {
store.commit(storeMutations.UPDATE_IS_LEAD_GEN, false);
}
}
// fromPaymentToConfirmation workaround for navigating from an iframe but
// isInIframe evaluates to false for some reason when navigating from payment to confirmation
const fromPaymentToConfirmation =
@ -265,8 +333,9 @@ router.afterEach(async (to, from) => {
await saveSession({ pageNameToLog: to.query.fmgPage });
}
}
showFmgLoadingModal(false);
if (!store.getters.isLeadGen) {
showFmgLoadingModal(false);
}
// Push page view to GA
analyticsMixin.methods.pushPageViewToGA();
@ -487,7 +556,7 @@ async function DisplayPageError() {
type: globalEventTypes.Danger,
}
);
store.commit(storeMutations.UPDATE_IS_LEAD_GEN, false);
baseMixin.methods.dispatchStoreAction(storeActions.RESET_SAVE_SESSION_PROMISE);
const pageError = getQuerystringParameter(queryStrings.PAGE_ERROR);

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,

17
src/store/index.js
View file

@ -160,6 +160,7 @@ const getDefaultState = () => {
customerPortalLoginToken: null,
lockToken: null,
settledTenderAmount: 0,
isLeadGen: false,
},
applicationUser: {
eventBus: [],
@ -294,6 +295,9 @@ export const mutations = {
updateSettledTenderAmount(state, settledTenderAmount) {
state.order.settledTenderAmount = settledTenderAmount;
},
updateIsLeadGen(state, isLeadGen) {
state.order.isLeadGen = isLeadGen;
},
updateCCToken(state, ccToken) {
state.order.payment.ccToken.subscriptionId = ccToken.subscriptionId;
state.order.payment.ccToken.expMonth = ccToken.expMonth;
@ -674,6 +678,7 @@ export const getters = {
isOvernightDropOffAppointment: (state) => {
return state.order.schedule.routeCode?.includes(RouteCodeFlags.OVERNIGHT_DROP_OFF);
},
isLeadGen: (state) => state.order.isLeadGen,
isRecalibrationOnOrder: (state) => {
return getHasRecalibrationPart(state);
},
@ -1927,10 +1932,13 @@ export const actions = {
context.state.order.vehicle.year != year ||
context.state.order.vehicle.make != make ||
context.state.order.vehicle.model != model ||
context.state.order.vehicle.style != style
context.state.order.vehicle.style != style ||
context.state.order.isLeadGen
) {
context.dispatch(storeActions.RESET_DAMAGE_STATE_AND_DEPENDENCIES);
context.dispatch(storeActions.RESET_REGISTRATION_STATE_AND_DEPENDENCIES);
if (!context.state.order.isLeadGen) {
context.dispatch(storeActions.RESET_DAMAGE_STATE_AND_DEPENDENCIES);
context.dispatch(storeActions.RESET_REGISTRATION_STATE_AND_DEPENDENCIES);
}
context.commit(storeMutations.UPDATE_VEHICLE_VIN, null);
context.commit(storeMutations.UPDATE_YEAR, year);
context.commit(storeMutations.UPDATE_MAKE, make);
@ -2701,6 +2709,9 @@ export const actions = {
// clear from local storage
window.sessionStorage.removeItem("submittedOrder");
},
resetIsLeadGen(context) {
context.commit(storeMutations.UPDATE_IS_LEAD_GEN, false);
},
};
export default createStore({

13
src/styles/common-styles.scss
View file

@ -37,6 +37,19 @@ body {
max-width: 100%;
}
}
// Quote page desktop
&.quote {
.col-md-6,
.col-lg-4 {
max-width: 1200px;
}
.col-md-6.col-lg-4 {
@include media-breakpoint-up(lg) {
width: 100%;
max-width: 910px;
}
}
}
//END set max-width on columns
}
.pointer {