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

Merge branch 'develop' into CSR-1891-insurance-search-page

Browse source
This commit is contained in:
bmauger 2024-03-07 11:49:57 -05:00 committed by GitHub
commit e687793ddb
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
56 changed files with 1953 additions and 450 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
jest.config.js
View file

@ -31,7 +31,7 @@ module.exports = {
testMatch: ["**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)"],
coverageThreshold: {
global: {
statements: 78,
statements: 77,
},
},
// Uncomment this to avoid the massive amount of warnings we are getting for onSubmit and onInvalidSubmit

23
src/App.vue
View file

@ -1,8 +1,8 @@
<template>
<router-view v-slot="{ Component }">
<router-view v-slot="{ Component }" ref="router-view">
<transition :duration="{ enter: 200, leave: 200 }" name="route-fade" mode="out-in">
<!-- The above durations should be kept in sync with the global css class "fade-on-route-transition" -->
<component :is="Component" @focusin="handleAnyComponentFocus" />
<component :is="Component" ref="component" @focusin="handleAnyComponentFocus" />
</transition>
</router-view>
<loadingModal :showLoader="shouldShowLoader" :showTextCarousel="shouldShowTextCarousel" />
@ -12,6 +12,7 @@
import { handleAnyComponentFocus } from "@/helpers/button-question-focus-helper";
import loadingModal from "@/fmg-components/loading-modal/loading-modal.vue";
import { showFmgLoadingModal } from "@/helpers/loading-modal-helper";
export default {
name: "app",
setup() {
@ -33,6 +34,24 @@ export default {
loadingModal,
},
};
// Add a global Javascript exception handler for logging exceptions, this handler will log when there is an uncaught exception
window.onerror = (msg, url, line, col, error) => {
// Log the windows error
// Note that col & error are new to the HTML 5 spec and may not be
// supported in every browser. It worked for me in Chrome.
global.$logger.logError(msg, {
url: url,
line: line,
column: col ?? "",
error: error ?? "",
});
// If you return true, then error alerts (like in older versions of
// Internet Explorer) will be suppressed.
var suppressErrorAlert = true;
return suppressErrorAlert;
};
</script>
<style lang="scss">

2
src/constants/application-config.js
View file

@ -11,6 +11,7 @@ const applicationConfig = {
PAGE_QUERYSTRING: "fmgPage",
SITE_ENTRY_TRIGGER_VALUE: "FixMyGlass",
CASH_PARENT_ACCOUNT_NUMBER: 167132,
CASH_DEFAULT_BILL_TO_ACCOUNT_NUMBER: "87291",
MY_ACCOUNT: process.env.VUE_APP_MY_ACCOUNT,
PIA_RESPONSE_URL:
location.protocol +
@ -27,6 +28,7 @@ const applicationConfig = {
YAHOO_CALENDAR: "https://calendar.yahoo.com/?v=60",
OUTLOOK_CALENDAR:
"https://outlook.office.com/calendar/deeplink/compose?path=/calendar/action/compose&rru=addevent",
FRONTEND_LOGGER_URL: process.env.VUE_APP_CONSUMER_CF_DISTRO + "/analytics/api/v1/logging",
};
export { applicationConfig };

11
src/constants/axios-response-interceptor-messages.js Normal file
View file

@ -0,0 +1,11 @@
const axiosResponseInterceptorMessages = {
NETWORK_ERROR:
"A network error occurred. " +
"This could be a bad URL, a CORS issue, or a dropped internet connection. " +
"It is impossible for us to know.",
STATUS_CODE_ERROR: "Status Code Error",
NO_RESPONSE_ERROR: "The request was made but no response was received",
GENERIC_ERROR: "Error",
};
export default axiosResponseInterceptorMessages;

18
src/constants/coverage-status.js Normal file
View file

@ -0,0 +1,18 @@
const coverageStatus = {
PENDING: "Pending",
NOCOMP: "NoComp",
VERIFIED: "Verified",
};
export function coverageStatusValue(intCoverageStatus) {
switch (intCoverageStatus) {
case 0:
return coverageStatus.PENDING;
case 1:
return coverageStatus.NOCOMP;
case 2:
return coverageStatus.VERIFIED;
default:
return null;
}
}

2
src/constants/experiments.js
View file

@ -7,7 +7,9 @@ const experimentSettings = {
SUPPRESS_VIN_CAPTURE: "SuppressVinCapture",
DISPLAY_AVAILABILITY_INDICATORS: "DisplayAvailabilityIndicators",
PIA_EXPERIENCE: "PIA Experience",
PIA_INSURANCE: "DisplayPIAInsurance",
SUBMIT_ORDER_ENABLE_PIA: "SubmitOrder_Enable_PIA",
IS_EMAIL_OPTIONAL: "isEmailOptional",
};
const experimentTriggers = {

8
src/constants/logging-endpoint-methods.js Normal file
View file

@ -0,0 +1,8 @@
const loggingEndpointMethods = {
LOG_INFORMATION: "log-information",
LOG_WARNING: "log-warning",
LOG_ERROR: "log-error",
LOG_CRITICAL: "log-critical",
};
export default loggingEndpointMethods;

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

@ -21,6 +21,10 @@ const queryStrings = {
TRANS_REFERENCE_NUMBER: "auth_trans_ref_no",
LAST_FOUR: "last_four",
DISPLAY_PIA_ALERT: "displayPiaAlert",
PAGE_ERROR: "pageerror",
REFERRAL_NUMBER: "rn",
PARENT_ACCOUNT: "pa",
CORRELATION_ID: "ci",
};
export { queryStrings };

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

@ -81,6 +81,7 @@ const storeActions = {
SAVE_PAYMENT_TYPE: "savePaymentType",
SAVE_PAYMENT_METHOD_CHOICE: "savePaymentMethodChoice",
SAVE_PARENT_ACCOUNT_NUMBER: "saveParentAccountNumber",
SAVE_BILL_TO_ACCOUNT_NUMBER: "saveBillToAccountNumber",
SAVE_SUPPORTING_ITEMS: "saveSupportingItems",
SAVE_SUPPORTING_ITEMS_SUPPRESSING_STATE_RESETTING:
"saveSupportingItemsSuppressingStateResetting",

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

@ -46,6 +46,7 @@ const storeMutations = {
UPDATE_REFERRAL_DATE: "updateReferralDate",
UPDATE_REFERRAL_CORRELATION_ID: "updateReferralCorrelationId",
UPDATE_PARENT_ACCT_NUMBER: "updateParentAcctNumber",
UPDATE_BILL_TO_ACCT_NUMBER: "updateBillToAcctNumber",
UPDATE_EON: "updateEON",
UPDATE_IS_INSURANCE: "updateIsInsurance",
UPDATE_SAVED_SESSION_ID: "updateSavedSessionId",

9
src/digital-components/textbox-question/textbox-question.vue
View file

@ -125,6 +125,11 @@ export default {
hideInput: Boolean,
centerErrorMessage: Boolean,
keyDownHandler: Function,
addOptionalText: {
type: Boolean,
default: false,
isRequired: false,
},
},
setup(props) {
const uuid = uuidv4();
@ -202,7 +207,9 @@ export default {
},
computed: {
questionText() {
return this.getCmsContent(this.cmsWidgetName, "QuestionText");
return this.addOptionalText
? this.getCmsContent(this.cmsWidgetName, "QuestionText") + " (optional)"
: this.getCmsContent(this.cmsWidgetName, "QuestionText");
},
value: {
get: function () {

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

@ -13,78 +13,105 @@
<span class="label amount-due">{{ getFormattedAmount("", amountDue) }}</span>
</a>
</div>
<div class="price-table">
<div class="service-type">
<textBlock :cmsWidgetName="servicePackageTitleWidget" />
<span>
{{ getFormattedAmount("", packagePrice) }}
</span>
</div>
<div class="cart-panel">
<div class="price-table">
<div class="service-type">
<textBlock :cmsWidgetName="servicePackageTitleWidget" />
<span>
{{ getFormattedAmount("", packagePrice) }}
</span>
<span
v-if="packagePriceWithoutDiscount > packagePrice"
class="struck-out-price">
{{ getFormattedAmount("", packagePriceWithoutDiscount) }}
</span>
</div>
<!-- Packaged Cart Items -->
<div v-for="(cartItem, i) in packageCartItems" :key="i" class="packaged-cart-item">
<span>{{ cartItem.name }}</span>
<textLink
v-if="allowItemRemoval"
ref="removeLink"
linkType="text"
:text="removeLinkText"
href="javascript:void(0)"
@click-event="removeItem(cartItem.cartItemType, cartItem.category)">
<template v-slot:after-text>
<span class="sr-only">{{ cartItem.name }}</span>
</template>
</textLink>
</div>
<!-- Packaged Cart Items -->
<div
v-for="(cartItem, i) in packageCartItems"
:key="i"
class="packaged-cart-item">
<span
><span v-if="cartItem.category === 'promos'"></span>{{ cartItem.name
}}<span v-if="cartItem.category === 'promos'"></span
></span>
<textLink
v-if="allowItemRemoval"
ref="removeLink"
linkType="text"
:text="removeLinkText"
href="javascript:void(0)"
@click-event="removeItem(cartItem.cartItemType, cartItem.category)">
<template v-slot:after-text>
<span class="sr-only">{{ cartItem.name }}</span>
</template>
</textLink>
</div>
<!-- Nonpackaged Cart Items -->
<div
v-for="(cartItem, i) in nonpackageCartItems"
:key="i"
class="non-packaged-cart-item"
:class="[
i % 2 == 0 ? 'even' : 'odd',
cartItem.isRemovable ? 'removable-cart-item' : '',
]">
<span v-if="cartItem != recycleFeeCartItem">{{ cartItem.name }}</span>
<textLink
v-if="allowItemRemoval && cartItem.isRemovable"
ref="removeLink"
linkType="text"
:text="removeLinkText"
href="javascript:void(0)"
@click-event="removeItem(cartItem.cartItemType, cartItem.category)" />
<textLink
v-else-if="cartItem == recycleFeeCartItem && recyclingModalCmsWidgetName"
linkType="text"
:text="recycleFeeCartItem.name"
href="javascript:void(0)"
@click-event="openModal(recyclingModalCmsWidgetName)" />
<span v-else-if="cartItem == recycleFeeCartItem">
{{ recycleFeeCartItem.name }}
</span>
<span>{{ getFormattedAmount(cartItem.category, cartItem.subTotal) }}</span>
</div>
<!-- Nonpackaged Cart Items -->
<div
v-for="(cartItem, i) in nonpackageCartItems"
:key="i"
class="non-packaged-cart-item"
:class="[
i % 2 == 0 ? 'even' : 'odd',
cartItem.isRemovable ? 'removable-cart-item' : '',
]">
<span v-if="cartItem != recycleFeeCartItem">{{ cartItem.name }}</span>
<textLink
v-if="allowItemRemoval && cartItem.isRemovable"
ref="removeLink"
linkType="text"
:text="removeLinkText"
href="javascript:void(0)"
@click-event="removeItem(cartItem.cartItemType, cartItem.category)" />
<textLink
v-else-if="
cartItem == recycleFeeCartItem && recyclingModalCmsWidgetName
"
linkType="text"
:text="recycleFeeCartItem.name"
href="javascript:void(0)"
@click-event="openModal(recyclingModalCmsWidgetName)" />
<span v-else-if="cartItem == recycleFeeCartItem">
{{ recycleFeeCartItem.name }}
</span>
<span>{{ getFormattedAmount(cartItem.category, cartItem.subTotal) }}</span>
</div>
<!-- Sub total, sales tax, total columns -->
<div class="sub-total">
<span>{{ subtotalText }}</span
><span>{{ getFormattedAmount("", subTotal) }}</span>
</div>
<div class="sales-tax">
<span>{{ salesTaxText }}</span
><span>{{ getFormattedAmount("", salesTax) }}</span>
</div>
<div v-if="showAsPaid" class="amount-paid">
<span>{{ amountPaidText }}</span
><span>{{ getFormattedAmount("", amountPaid) }}</span>
</div>
<div class="amount-due">
<span>{{ amountDueText }}</span
><span>{{ getFormattedAmount("", amountDue) }}</span>
<!-- Sub total, sales tax, total columns -->
<div class="sub-total">
<span>{{ subtotalText }}</span
><span>{{ getFormattedAmount("", subTotal) }}</span>
</div>
<div class="sales-tax">
<span>{{ salesTaxText }}</span
><span>{{ getFormattedAmount("", salesTax) }}</span>
</div>
<div v-if="showAsPaid" class="amount-paid">
<span>{{ amountPaidText }}</span
><span>{{ getFormattedAmount("", amountPaid) }}</span>
</div>
<div class="amount-due">
<span>{{ amountDueText }}</span
><span>{{ getFormattedAmount("", amountDue) }}</span>
</div>
</div>
<promoModalQuestion
ref="promoModalQuestion"
class="small mt-4"
v-model="lineItems"
:availableVaps="availableVaps"
modalWidgetName="PromoModalWidget" />
</div>
</div>
<div
class="my-2 lh-1 applied-promo"
v-for="(promoCode, i) in this.getPromoCodeList()"
:key="i">
<span class="caption">Promo code {{ promoCode }} applied </span>
</div>
<contentGroupModal ref="RecycleModal" cmsWidgetName="RecycleModal">
<textBlock cmsWidgetName="RecycleTextBlock" />
</contentGroupModal>
@ -96,6 +123,7 @@
import textLink from "@/ux-components/text-link/text-link";
import textBlock from "@/digital-components/text-block/text-block";
import contentGroupModal from "@/fmg-components/content-group-modal/content-group-modal";
import promoModalQuestion from "@/fmg-components/promo-modal-question/promo-modal-question";
// Mixins
import baseMixin from "@/mixins/base-mixin.js";
@ -128,7 +156,6 @@ export default {
style: "currency",
currency: "USD",
}),
lineItems: deepClone(this.modelValue),
};
},
methods: {
@ -149,6 +176,17 @@ export default {
return subTotal;
},
getPromoDiscounts() {
const promoItems = this.promoCartItems;
let subTotal = 0;
promoItems?.forEach((item) => {
subTotal += item.subTotal;
});
return subTotal;
},
getVapsCartItemsForSelectedPackage(packageName) {
const packageContentTypes = getPackageContents(
this.glassToReplace,
@ -167,6 +205,12 @@ export default {
});
});
if (this.promoCartItems) {
this.promoCartItems.forEach((promoCartItem) => {
vapsCartItemsForSelectedPackage.push(promoCartItem);
});
}
return vapsCartItemsForSelectedPackage;
},
getCmsContentForVapsType(vapsType) {
@ -189,11 +233,23 @@ export default {
this.lineItems[category] = this.lineItems[category].filter(
(lineItemsToKeep) => lineItemsToKeep.cartItemType != cartItemType
);
this.$emit("update:modelValue", this.lineItems);
},
getPromoCodeList() {
if (this.$refs["promoModalQuestion"]) {
return this.$refs["promoModalQuestion"].getPromoCodeList();
}
return [];
},
},
computed: {
lineItems: {
get: function () {
return this.modelValue;
},
set: function (newValue) {
this.$emit("update:modelValue", newValue);
},
},
screenReaderTotalAmountDueText() {
return this.getCmsContent("ScreenReaderTotalAmountDueWidget", "Text");
},
@ -313,6 +369,12 @@ export default {
return packagePrice;
},
packagePriceWithoutDiscount() {
let fullPrice = this.packagePrice;
let discount = this.getPromoDiscounts();
fullPrice += Math.abs(discount);
return fullPrice;
},
isRepair() {
if (!this.damage) {
return;
@ -540,7 +602,6 @@ export default {
return cartItem;
},
suppliesRepairCartItemName() {
return this.getCmsContent("SuppliesRepairTextWidget", "Text");
},
@ -578,7 +639,6 @@ export default {
return cartItem;
},
mobileFeeCartItemName() {
return this.getCmsContent("MobileServiceTextWidget", "Text");
},
@ -734,7 +794,6 @@ export default {
return promoCartItems;
},
removeLinkText() {
return this.getCmsContent("RemoveCartItemTextWidget", "Text");
},
@ -783,18 +842,11 @@ export default {
return this.subTotal + this.salesTax;
},
},
watch: {
modelValue: {
handler(newValue) {
this.lineItems = deepClone(newValue);
},
deep: true,
},
},
components: {
textBlock,
textLink,
contentGroupModal,
promoModalQuestion,
},
};
</script>
@ -824,12 +876,14 @@ export default {
.amount-due {
color: $green;
}
.price-table {
.cart-panel {
max-height: 0;
transition: all 350ms ease-in;
overflow: hidden;
visibility: hidden;
color: $gray-600;
}
.price-table {
div {
display: flex;
justify-content: space-between;
@ -846,6 +900,10 @@ export default {
background-color: $gray-100;
align-items: center;
}
.struck-out-price {
text-decoration: line-through;
padding-left: 0.5rem;
}
.packaged-cart-item {
background-color: $gray-100;
padding-left: 2.5rem;
@ -934,17 +992,26 @@ export default {
&.expanded:after {
transform: rotate(180deg);
}
&.expanded + .price-table {
&.expanded + .cart-panel {
max-height: 650px;
transition: all 150ms ease-in;
overflow: hidden;
padding-top: 1rem;
padding: 1rem 0 0.5rem;
visibility: visible;
}
a {
text-decoration: none;
}
}
.applied-promo {
span {
color: $green-700;
font-weight: 500;
padding: 2px 8px;
background-color: $green-100;
border-radius: 12px;
}
}
}
.payment-method-question {
.question-text {

400
src/fmg-components/promo-modal-question/promo-modal-question.spec.js Normal file
View file

@ -0,0 +1,400 @@
import { mount, shallowMount } from "@vue/test-utils";
import promoModalQuestion from "./promo-modal-question";
import { storeActions } from "@/constants/store-actions";
import baseMixin from "@/mixins/base-mixin.js";
import {
promoErrorCodes,
getPromoCodesFromPromoObjectsWithoutDuplicates,
getPromoCodeWithoutBundleIdentifier,
} from "@/helpers/promotions-helper";
import { cartItemCategories } from "@/constants/cart-item-categories";
let mockReturnsForStoreActions = {};
jest.mock("@/mixins/base-mixin", () => ({
...jest.requireActual("@/mixins/base-mixin"),
methods: {
dispatchStoreActionWithLogging: jest.fn(
(action, { promoCode, addableVaps }, pageNameToLog, someBool) => {
return mockReturnsForStoreActions[action];
}
),
},
}));
afterEach(() => {
// reset store action returns
mockReturnsForStoreActions = {};
});
jest.mock("@/digital-components/textbox-question/textbox-question", () => ({
getCmsContent: jest.fn((widgetName, cmsFieldName) => {
return widgetName[cmsFieldName];
}),
}));
jest.mock("@/digital-components/modal/modal", () => ({
methods: {
closeModal: jest.fn(),
resetButtonStyle: jest.fn(),
resetForm: jest.fn(),
},
}));
const modalWidgetName = "modalWidgetName";
const mockModalCmsContent = {
FooterText: "Sample modal footer text here.",
};
const mockMixin = {
methods: {
getCmsContent: jest.fn((widgetName, cmsFieldName) => {
if (widgetName === modalWidgetName) {
return mockModalCmsContent[cmsFieldName];
}
return null;
}),
},
};
describe("promo-modal-question.vue", () => {
it("Should reset all alerts on onModalClosed", async () => {
// Arrange
const wrapper = mount(promoModalQuestion, {
mixins: [mockMixin],
props: {
modalWidgetName: modalWidgetName,
},
attachTo: document.body,
});
// Act
wrapper.vm.onModalClosed();
// Assert
expect(wrapper.vm.displayInvalidPromoAlert).toBe(false);
expect(wrapper.vm.displayStackingPromoAlert).toBe(false);
expect(wrapper.vm.displayInShopPromoAlert).toBe(false);
expect(wrapper.vm.displaySimilarPromoAlert).toBe(false);
});
it("Should emit update:modelValue on Modal closed", async () => {
// Arrange
const lineItems = {
glassParts: [],
supportingItems: [],
vaps: [],
promos: [],
};
const wrapper = mount(promoModalQuestion, {
mixins: [mockMixin],
props: {
modelValue: lineItems,
modalWidgetName: modalWidgetName,
},
attachTo: document.body,
});
// Act
await wrapper.vm.onModalClosed();
// Assert
expect(wrapper.emitted("update:modelValue")).toEqual([[lineItems]]);
});
it("focuses on the input element when focusOnPromoInput is called", async () => {
// Arrange
const lineItems = {
glassParts: [],
supportingItems: [],
vaps: [],
promos: [],
};
const wrapper = mount(promoModalQuestion, {
mixins: [mockMixin],
props: {
modelValue: lineItems,
modalWidgetName: modalWidgetName,
},
attachTo: document.body,
});
const focusMock = jest.fn();
const inputMock = { focus: focusMock };
// Mock document.getElementById to return the inputMock
jest.spyOn(document, "getElementById").mockReturnValue(inputMock);
//Act
wrapper.vm.focusOnPromoInput();
await wrapper.vm.$nextTick();
//Assert
expect(focusMock).toHaveBeenCalled();
});
it("returns a validate response on applying promo", async () => {
// Arrange
const newPromo = "testPromo";
const pageNameToLog = "testPage";
const validateResponse = { orderPromos: [] };
const addableVaps = [];
mockReturnsForStoreActions[storeActions.VALIDATE_ORDER_PROMO_AND_SAVE_SERVER_DATA] =
validateResponse;
const lineItems = {
glassParts: [],
supportingItems: [],
vaps: [],
promos: [],
};
const wrapper = mount(promoModalQuestion, {
mixins: [mockMixin],
props: {
modelValue: lineItems,
modalWidgetName: modalWidgetName,
},
attachTo: document.body,
});
// Act
wrapper.vm.getPromoCodeData();
const promoValidationResponse = await baseMixin.methods.dispatchStoreActionWithLogging(
storeActions.VALIDATE_ORDER_PROMO_AND_SAVE_SERVER_DATA,
{
newPromo,
lineItems,
addableVaps,
},
pageNameToLog,
false
);
// Assert
expect(promoValidationResponse).toEqual(validateResponse);
});
test("If promocode is valid return taxed lineItems", async () => {
//Arrange
const taxedlineItems = {};
mockReturnsForStoreActions[storeActions.TAX_ORDER_ITEMS_AND_SAVE_SERVER_DATA] =
taxedlineItems;
const lineItems = {
glassParts: [],
supportingItems: [],
vaps: [],
promos: [],
};
let promoCode = "1wiper0";
const pricedLineItemsToTax = [];
pricedLineItemsToTax.push(promoCode);
const wrapper = mount(promoModalQuestion, {
mixins: [mockMixin],
props: {
modelValue: lineItems,
modalWidgetName: modalWidgetName,
},
attachTo: document.body,
});
wrapper.vm.addPromoCode();
const taxedLineItems = await baseMixin.methods.dispatchStoreActionWithLogging(
storeActions.TAX_ORDER_ITEMS_AND_SAVE_SERVER_DATA,
{
billToAccountNumber: "87291",
providerNumber: 2,
appointmentType: "IN_SHOP",
serviceLocationCity: "city",
serviceLocationState: "state",
serviceLocationZipCode: "12345",
pricedLineItems: pricedLineItemsToTax,
},
"payment-method",
false
);
// Assert
expect(taxedLineItems).toEqual(taxedlineItems);
});
test("Get promoCode list will return the applied promos", async () => {
// Arrange
const promos = [
{ promoCode: "duplicatePromo" },
{ promoCode: "duplicatePromo" },
{ promoCode: "bundlePromo/400" },
{ promoCode: "bundlePromo/401" },
];
const appliedPromos = ["duplicatePromo", "bundlePromo"];
const lineItems = {
glassParts: [],
supportingItems: [],
vaps: [],
promos: [],
};
const wrapper = mount(promoModalQuestion, {
mixins: [mockMixin],
props: {
modelValue: lineItems,
modalWidgetName: modalWidgetName,
},
attachTo: document.body,
});
// Act
wrapper.vm.getPromoCodeList();
const promoCodeToDisplay = getPromoCodesFromPromoObjectsWithoutDuplicates(promos);
// Assert
expect(promoCodeToDisplay).toEqual(appliedPromos);
});
test("On clicking remove the promo gets removed from the lineItems", async () => {
//Arrange
const lineItems = {
glassParts: [],
supportingItems: [],
vaps: [],
promos: [{ promoCode: "duplicatePromo" }, { promoCode: "duplicatePromo" }],
};
const wrapper = mount(promoModalQuestion, {
mixins: [mockMixin],
props: {
modelValue: lineItems,
modalWidgetName: modalWidgetName,
},
attachTo: document.body,
});
const promo = ["bundlePromo"];
//Act
wrapper.vm.removeItem(promo);
const existingPromo = (lineItems[cartItemCategories.PROMOS] = lineItems[
cartItemCategories.PROMOS
].filter(
(lineItemsToKeep) =>
getPromoCodeWithoutBundleIdentifier(lineItemsToKeep.promoCode) != promo
));
//Assert
expect(existingPromo).toEqual(lineItems.promos);
});
test("Getting stacking alert on stack promo error code", async () => {
// Arrange
const lineItems = {
glassParts: [],
supportingItems: [],
vaps: [],
promos: [],
};
const wrapper = mount(promoModalQuestion, {
mixins: [mockMixin],
props: {
modelValue: lineItems,
modalWidgetName: modalWidgetName,
},
attachTo: document.body,
});
const additionalInfo = ["testAdditionalInfo"];
const stackingErrorCode = promoErrorCodes.PROMO_STACKING_NOT_ALLOWED;
// Act
wrapper.vm.getErrorMessage(stackingErrorCode, additionalInfo);
// Assert
expect(wrapper.vm.displayStackingPromoAlert).toBe(true);
});
test("Getting invalid promo alert on invalid promoCode", async () => {
// Arrange
const lineItems = {
glassParts: [],
supportingItems: [],
vaps: [],
promos: [],
};
const wrapper = mount(promoModalQuestion, {
mixins: [mockMixin],
props: {
modelValue: lineItems,
modalWidgetName: modalWidgetName,
},
attachTo: document.body,
});
const additionalInfo = ["testAdditionalInfo"];
const invalidErrorCode = promoErrorCodes.INVALID_PROMO_ON_ORDER;
// Act
wrapper.vm.getErrorMessage(invalidErrorCode, additionalInfo);
// Assert
expect(wrapper.vm.displayInvalidPromoAlert).toBe(true);
});
test("Getting invalid promo alert on invalid promoCode", async () => {
// Arrange
const lineItems = {
glassParts: [],
supportingItems: [],
vaps: [],
promos: [],
};
const wrapper = mount(promoModalQuestion, {
mixins: [mockMixin],
props: {
modelValue: lineItems,
modalWidgetName: modalWidgetName,
},
attachTo: document.body,
});
const additionalInfo = ["APPOINTMENT_TYPE"];
const invalidErrorCode = promoErrorCodes.INVALID_PROMO_ON_ORDER;
// Act
wrapper.vm.getErrorMessage(invalidErrorCode, additionalInfo);
// Assert
expect(wrapper.vm.displayInShopPromoAlert).toBe(true);
});
test("Get conflicting promoCodes on applying more than one promo", async () => {
// Arrange
const lineItems = {
glassParts: [],
supportingItems: [],
vaps: [],
promos: [],
};
const wrapper = mount(promoModalQuestion, {
mixins: [mockMixin],
props: {
modelValue: lineItems,
modalWidgetName: modalWidgetName,
},
attachTo: document.body,
});
const additionalInfo = ["1wiper0", "Glass30"];
const conflictingCodes = ["1wiper0", "Glass30"];
//Act
wrapper.vm.getConflictingPromoCode(additionalInfo);
//Assert
expect(conflictingCodes).toEqual(additionalInfo);
});
});

87
src/layouts/payment-method/promo-modal-question/promo-modal-question.vue → src/fmg-components/promo-modal-question/promo-modal-question.vue
View file

@ -64,7 +64,7 @@
</template>
<script>
import textLink from "@/ux-components/text-link/text-link";
import promoQuestion from "@/layouts/payment-method/promo-modal-question/promo-question/promo-question";
import promoQuestion from "@/fmg-components/promo-modal-question/promo-question/promo-question";
import modal from "@/digital-components/modal/modal";
import alert from "@/ux-components/alert/alert";
import { storeActions } from "@/constants/store-actions.js";
@ -99,7 +99,13 @@ export default {
props: {
modelValue: Object,
modalWidgetName: String,
availableVaps: Object,
addableVaps: Object,
pageName: String,
taxPromos: {
type: Boolean,
required: false,
default: true,
},
},
computed: {
promoLinkText() {
@ -180,14 +186,14 @@ export default {
resetModalButtonStyle() {
this.modal.resetButtonStyle();
},
async getPromoCodeData(promoCode, lineItems, availableVaps, pageNameToLog = null) {
async getPromoCodeData(promoCode, lineItems, addableVaps, pageNameToLog = null) {
const pageName = pageNameToLog ?? this.$options?.name;
const promoValidationResponse = await baseMixin.methods.dispatchStoreActionWithLogging(
storeActions.VALIDATE_ORDER_PROMO_AND_SAVE_SERVER_DATA,
{
promoCode: promoCode,
lineItemsToUse: lineItems,
addableVaps: availableVaps,
addableVaps: addableVaps,
},
pageName,
false
@ -252,45 +258,52 @@ export default {
const promoCodeData = await this.getPromoCodeData(
this.promoCode,
this.lineItems,
this.availableVaps,
"payment-method"
this.addableVaps,
this.pageName
);
if (promoCodeData.isValid) {
const pricedLineItemsToTax = [];
pricedLineItemsToTax.push(...promoCodeData.promoCode);
const taxedLineItems = await baseMixin.methods.dispatchStoreActionWithLogging(
storeActions.TAX_ORDER_ITEMS_AND_SAVE_SERVER_DATA,
{
billToAccountNumber: "87291",
providerNumber:
store.getters.order.serviceLocation.provider.providerNumber,
appointmentType: store.getters.order.serviceLocation.appointmentType,
serviceLocationCity: store.getters.order.serviceLocation.city,
serviceLocationState: store.getters.order.serviceLocation.state,
serviceLocationZipCode: store.getters.order.serviceLocation.zipCode,
pricedLineItems: pricedLineItemsToTax,
},
"payment-method",
false
);
if (this.taxPromos) {
const pricedLineItemsToTax = [];
pricedLineItemsToTax.push(...promoCodeData.promoCode);
const taxedLineItems =
await baseMixin.methods.dispatchStoreActionWithLogging(
storeActions.TAX_ORDER_ITEMS_AND_SAVE_SERVER_DATA,
{
billToAccountNumber: "87291",
providerNumber:
store.getters.order.serviceLocation.provider.providerNumber,
appointmentType:
store.getters.order.serviceLocation.appointmentType,
serviceLocationCity: store.getters.order.serviceLocation.city,
serviceLocationState: store.getters.order.serviceLocation.state,
serviceLocationZipCode:
store.getters.order.serviceLocation.zipCode,
pricedLineItems: pricedLineItemsToTax,
},
"payment-method",
false
);
// Match all line items to the line items as they are in the store
// and rebuild the original structure.
this.lineItems = mapTaxedLineItemsToStoreFormat(taxedLineItems, this.lineItems);
const taxedVaps = mapTaxedLineItemsToStoreFormat(
taxedLineItems,
this.availableVaps
);
// Match all line items to the line items as they are in the store
// and rebuild the original structure.
this.lineItems = mapTaxedLineItemsToStoreFormat(
taxedLineItems,
this.lineItems
);
const taxedVaps = mapTaxedLineItemsToStoreFormat(
taxedLineItems,
this.addableVaps
);
const getVaps = getVapsThatNeedToBeAddedToSatisfyPromos(
promoCodeData.promoCode,
taxedVaps,
this.lineItems
);
const getVaps = getVapsThatNeedToBeAddedToSatisfyPromos(
promoCodeData.promoCode,
taxedVaps,
this.lineItems
);
this.lineItems.vaps?.push(...getVaps);
}
this.lineItems?.promos.push(...promoCodeData.promoCode);
this.lineItems.vaps?.push(...getVaps);
this.closeModal();
} else {
this.getErrorMessage(promoCodeData.errorCode, promoCodeData.additionalInfo);

0
src/layouts/payment-method/promo-modal-question/promo-question/promo-question.spec.js → src/fmg-components/promo-modal-question/promo-question/promo-question.spec.js
View file

0
src/layouts/payment-method/promo-modal-question/promo-question/promo-question.vue → src/fmg-components/promo-modal-question/promo-question/promo-question.vue
View file

54
src/global-methods.js
View file

@ -1,11 +1,50 @@
import axios from "axios";
import analyticsMixIn from "@/mixins/analytics-mixin.js";
import store from "@/store";
import router from "@/router";
import store from "@/store";
import { applicationConfig } from "@/constants/application-config.js";
import { GaCategories, GaActions, GaLabels } from "@/constants/analytics";
import { headerKeys } from "@/constants/header-keys";
import axiosResponseInterceptorMessages from "@/constants/axios-response-interceptor-messages.js";
// Add a response interceptor for global axios error handing.
axios.interceptors.response.use(
(response) => response,
(error) => {
let rejectionError = "";
if (typeof error.response === "undefined") {
// The request was not made, could be a bad url, bad connection, or a CORS error.
rejectionError = {
response: error,
message: axiosResponseInterceptorMessages.NETWORK_ERROR,
};
} else if (error.response) {
// The request was made and the server responded with a status code
// that falls out of the range of 2xx
rejectionError = {
response: error.response,
message: axiosResponseInterceptorMessages.STATUS_CODE_ERROR,
};
} else if (error.request) {
// The request was made but no response was received
// `error.request` is an instance of XMLHttpRequest in the browser and an instance of
// http.ClientRequest in node.js
rejectionError = {
response: error.request,
message: axiosResponseInterceptorMessages.NO_RESPONSE_ERROR,
};
} else {
// Something happened in setting up the request that triggered an Error
rejectionError = {
response: error.message,
message: axiosResponseInterceptorMessages.GENERIC_ERROR,
};
}
return Promise.reject(rejectionError);
}
);
export default {
callHttpClient({
@ -50,8 +89,6 @@ export default {
return resolve(response);
},
(error) => {
console.error(error);
if (logApiCall) {
analyticsMixIn.methods.pushEventToGA(
GaCategories.API_RESPONSE,
@ -61,7 +98,16 @@ export default {
);
}
//router.navigateError();
// Do not route to error logic when no wipers found or no promo found (404s)
if (error.response.status != "404") {
router.navigateError();
}
global.$logger.logError(
`${method}: ${endpoint}: ${error.message}`,
error.response
);
return reject(error.response);
}
);

9
src/global-methods.spec.js
View file

@ -1,11 +1,19 @@
import globalMethods from "@/global-methods";
import axios from "axios";
import analyticsMixIn from "@/mixins/analytics-mixin";
import router from "@/router";
//Mock external dependencies
jest.mock("axios");
jest.mock("@/mixins/analytics-mixin");
global.$logger = {
logInformation: jest.fn(),
logWarning: jest.fn(),
logError: jest.fn(),
logCritical: jest.fn(),
};
it("Global Methods - Call Http Client - Should Resolve Promise", () => {
//Arrange
const endpoint = "https://mock.safelite.com";
@ -29,6 +37,7 @@ it("Global Methods - Call Http Client - Should Reject Promise", () => {
isError: true,
});
analyticsMixIn.methods.pushEventToGA = jest.fn();
router.navigateError = jest.fn();
//Act
globalMethods.callHttpClient(httpArgs).catch((err) => {

2
src/helpers/heritage-integration/cookie-helper.js
View file

@ -18,7 +18,7 @@ export function updateOrCreateFunnelCookie() {
ReferralNumber: store.getters.order.referralNumber,
ReferralDate: store.getters.order.referralDate,
ReferralCorrelationId: store.getters.order.referralCorrelationId,
ReferralParentAccountNumber: store.getters.order.accountNumber,
ReferralParentAccountNumber: store.getters.order.payment.parentAccountNumber,
HasDelayedClaimRegistration: wasClaimRegistrationDelayed,
SuppressConceptFunnel: shouldSuppressConceptFunnel,
SavedSessionId: store.getters.applicationUser.savedSessionId,

20
src/helpers/heritage-integration/navigation-helper.js
View file

@ -36,12 +36,7 @@ export async function getPageToRouteExistingOrderTo(toRoute = {}) {
// If navigating to a specific page, and that page is not part of the vin pages.
// Return that page, so that it can navigate like normal.
if (
toRoute.query[queryStrings.FMG_PAGE] !== undefined &&
toRoute.query[queryStrings.FMG_PAGE] !== fmgPageValues.SERVICE_LOCATION &&
toRoute.query[queryStrings.FMG_PAGE] !== fmgPageValues.SCHEDULE &&
!isVinRelatedPage(toRoute)
) {
if (toRoute.query[queryStrings.FMG_PAGE] !== undefined && !isVinRelatedPage(toRoute)) {
return overrideYmmsDirectionIfNeeded(toRoute);
}
@ -78,6 +73,13 @@ export async function navigateToHeritageFunnel({ shouldSaveSession, pageNameToLo
heritageParms["promo"] = promo;
}
if (
process.env.VUE_APP_HERITAGE_FUNNEL.includes("fixmyglassdev") &&
process.env.VUE_APP_CURRENT_ENVIRONMENT === "Localhost"
) {
heritageParms["forceEndToEndInsurance"] = true;
}
router.navigateToExternalUrl(externalUrls.HERITAGE_FUNNEL, heritageParms);
}
@ -139,11 +141,7 @@ async function getLatestPageForRedirection() {
} else if (!estimateComponent.methods.arePagePrerequisitesValid()) {
return fmgPageValues.VEHICLE_DAMAGE;
} else {
if (scheduleComponent.methods.arePagePrerequisitesValid()) {
return fmgPageValues.SCHEDULE;
} else if (serviceLocationComponent.methods.arePagePrerequisitesValid()) {
return fmgPageValues.SERVICE_LOCATION;
} else if (quoteComponent.methods.arePagePrerequisitesValid()) {
if (quoteComponent.methods.arePagePrerequisitesValid()) {
return fmgPageValues.QUOTE;
} else if (capabilityQuestionsComponent.methods.arePagePrerequisitesValid()) {
return fmgPageValues.CAPABILITY_QUESTIONS;

74
src/helpers/logger.js Normal file
View file

@ -0,0 +1,74 @@
import { applicationConfig } from "@/constants/application-config.js";
import axios from "axios";
import store from "@/store";
import loggingEndpointMethods from "@/constants/logging-endpoint-methods";
import { headerKeys } from "@/constants/header-keys";
export class Logger {
logInformation(message, details) {
this.writeLogEntry(
loggingEndpointMethods.LOG_INFORMATION,
this.formatLogEntry(message, details)
);
}
logWarning(message, details) {
this.writeLogEntry(
loggingEndpointMethods.LOG_WARNING,
this.formatLogEntry(message, details)
);
}
logError(message, details) {
this.writeLogEntry(loggingEndpointMethods.LOG_ERROR, this.formatLogEntry(message, details));
}
logCritical(message, details) {
this.writeLogEntry(
loggingEndpointMethods.LOG_CRITICAL,
this.formatLogEntry(message, details)
);
}
formatLogEntry(message, details) {
return `Application: ${applicationConfig.APPLICATION_NAME}\n${message}\n${
details ? JSON.stringify(details, undefined, 2) : ""
}`;
}
writeLogEntry(endpoint, logEntry) {
return new Promise((resolve, reject) => {
// If running locally or in the Dev environment show the log entries in the console.
if (
applicationConfig.CURRENT_ENVIRONMENT === "Localhost" ||
applicationConfig.CURRENT_ENVIRONMENT === "Dev"
) {
console.log(logEntry);
}
const url = applicationConfig.FRONTEND_LOGGER_URL;
const headers = {
[headerKeys.EXPERIMENT]: JSON.stringify(store.getters.experimentSettings),
};
axios({
method: "POST",
url: `${url}/${endpoint}`,
data: { entry: logEntry },
crossDomain: true,
responseType: {},
headers: headers,
}).then(
(response) => {
return resolve(response);
},
(error) => {
return reject(error);
}
);
});
}
}
export default Logger;

16
src/helpers/promotions-helper.js
View file

@ -331,10 +331,10 @@ export function getNewlyInactivatedPromos(oldInactivePromos, newInactivePromos)
export function createPromoSuccessAlert(promoCode) {
return {
messageHeadline: "Promo applied!",
messageCopy: `Promo "${getPromoCodeWithoutBundleIdentifier(
messageHeadline: "Promo code applied!",
messageCopy: `Promo code ${getPromoCodeWithoutBundleIdentifier(
promoCode.toUpperCase()
)}" was successfully applied to your cart.`,
)} was successfully applied to your cart.`,
type: "alert-success",
isDismissible: true,
shouldAutoFade: true,
@ -343,19 +343,19 @@ export function createPromoSuccessAlert(promoCode) {
export function createPromoErrorAlert(promoCode, errorCode = null, additionalInfo) {
const alert = {
messageHeadline: "Promo error",
messageHeadline: "Promo code error",
type: "alert-danger",
shouldAutoFade: false,
isDismissible: true,
};
if (stackingPromoErrorCodes.includes(errorCode)) {
alert.messageCopy = `Sorry, promo code "${getPromoCodeWithoutBundleIdentifier(
alert.messageCopy = `Sorry, promo code ${getPromoCodeWithoutBundleIdentifier(
promoCode.toUpperCase()
)}" cannot be combined with "${additionalInfo[0].toUpperCase()}"`;
)} cannot be combined with ${additionalInfo[0].toUpperCase()}`;
} else {
alert.messageCopy = `Sorry, promo code "${getPromoCodeWithoutBundleIdentifier(
alert.messageCopy = `Sorry, promo code ${getPromoCodeWithoutBundleIdentifier(
promoCode.toUpperCase()
)}" is not valid`;
)} is not valid`;
}
return alert;
}

13
src/layouts/address-lookup/address-lookup.spec.js
View file

@ -10,6 +10,7 @@ import { storeMutations } from "@/constants/store-mutations";
import { navigationScenarios } from "@/router/router-constants/navigation-scenarios";
import store from "@/store";
import { navigateToHeritageFunnel } from "@/helpers/heritage-integration/navigation-helper";
import { experimentSettings } from "@/constants/experiments";
jest.mock("@/helpers/damage-helper", () => ({
isGlassAvailableForCarId: jest.fn().mockImplementation(() => true),
@ -641,6 +642,17 @@ describe("address-lookup.vue", () => {
});
});
const mockMixin = {
methods: {
getSettingValue: jest.fn((settingName) => {
if (settingName === experimentSettings.IS_EMAIL_OPTIONAL) {
return "true";
}
return "false";
}),
},
};
function setupMocks({
isZipValid = true,
isZipServiceable = true,
@ -709,6 +721,7 @@ function setupMocks({
},
},
},
mixins: [mockMixin],
})
);

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

@ -20,7 +20,11 @@
<funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" ref="funnelSubHeader" />
<customerQuestions ref="customerQuestions" v-model="customerQuestions" />
<customerQuestions
ref="customerQuestions"
v-model="customerQuestions"
:validationRules="EmailValidationRules"
:isEmailOptional="IsEmailOptional" />
<alert
ref="alertVinNotFound"

5
src/layouts/address-lookup/customer-questions/customer-questions.vue
View file

@ -27,7 +27,9 @@
v-model="customerModel.emailAddress"
ref="emailAddress"
customInputId="emailAddress"
validationRules="email-address-required|email-address-format" />
:isRequired="!isEmailOptional"
:validationRules="validationRules"
:addOptionalText="isEmailOptional" />
</div>
</div>
<div class="row mb-0">
@ -79,6 +81,7 @@ export default {
}),
},
validationRules: String,
isEmailOptional: Boolean,
},
computed: {
customerModel: {

1
src/layouts/address-vehicles/address-vehicles.vue
View file

@ -164,7 +164,6 @@ export default {
if (
store.getters.order.vehicle.carId &&
store.getters.order.serviceLocation.zipCode &&
store.getters.order.customer.emailAddress &&
store.getters.pageData(fmgPageValues.ADDRESS_VEHICLES)
) {
return true;

48
src/layouts/bailout/bailout.spec.js Normal file
View file

@ -0,0 +1,48 @@
// Components
import bailout from "@/layouts/bailout/bailout.vue";
// Supporting Files
import { shallowMount } from "@vue/test-utils";
import { getMountOptions } from "@/helpers/unit-test-helper.js";
// Mock our module for promises.
jest.mock("@/helpers/layout-helper.js", () => ({
settleAllPromises: jest.fn(),
}));
// Mock fetchCmsContentForPage
jest.mock("@/helpers/cms-content-helper", () => ({
fetchCmsContentForPage: jest.fn(),
}));
describe("bailout.vue", () => {
test("arePagePrerequisitesValid should be true ", async () => {
//Arrange
const { wrapper } = setupMocks();
//Act
let arePagePrerequisitesValid = wrapper.vm.arePagePrerequisitesValid();
//Assert
expect(arePagePrerequisitesValid).toBe(true);
});
});
function setupMocks() {
const mountOptions = getMountOptions({});
//Mock props
const mockMixin = {
methods: {
getCmsContent: jest.fn(),
},
};
mountOptions.mixins = [mockMixin];
const wrapper = shallowMount(bailout, mountOptions);
wrapper.vm.setCmsContent = jest.fn();
wrapper.vm.backButtonAction = jest.fn();
return { wrapper };
}

79
src/layouts/bailout/bailout.vue Normal file
View file

@ -0,0 +1,79 @@
<template>
<Form>
<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"
:displayGenericVehicleImage="false" />
<funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" />
<navbar
cmsWidgetName="FunnelFooterWidget"
isForwardActionDisabled="true"
isSubmitHidden="true"
@back-clicked="backButtonAction" />
</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 loadingModal from "@/fmg-components/loading-modal/loading-modal.vue";
// Supporting files
import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
import { settleAllPromises } from "@/helpers/layout-helper";
export default {
name: "bailout",
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);
// Call the "next" function to complete the transition to this page.
next((vm) => {
vm.setCmsContent(resultMap.cmsContent);
});
},
methods: {
arePagePrerequisitesValid() {
return true;
},
backButtonAction() {
this.$router.go(-1);
},
},
components: {
funnelHeader,
navbar,
vehicleBanner,
funnelSubHeader,
loadingModal,
},
};
</script>

1
src/layouts/confirmation/confirmation.vue
View file

@ -135,7 +135,6 @@ export default {
vm.setCmsContent(resultMap.cmsContent);
vm.lineItems = lineItemsFromSubmittedOrder;
vm.vaps = availableVaps;
analyticsMixin.methods.pushSubmittedOrderToDataLayer();
});
},
data() {

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

@ -11,6 +11,7 @@ import { settleAllPromises } from "@/helpers/layout-helper.js";
import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
import baseMixin from "../../mixins/base-mixin";
import { vinLookupMethodSelections } from "@/constants/vin-lookup-method-selections.js";
import { experimentSettings } from "@/constants/experiments";
// Mock our module for promises.
jest.mock("@/helpers/layout-helper.js", () => ({
@ -273,12 +274,24 @@ function setupMocks({
Answers: cmsAnswers,
FunnelFooterWidget: FunnelFooterWidget,
};
const mockMixin = {
methods: {
getSettingValue: jest.fn((settingName) => {
if (settingName === experimentSettings.IS_EMAIL_OPTIONAL) {
return "true";
}
return "false";
}),
},
};
const apiPromise = Promise.resolve({ cmsContent });
settleAllPromises.mockImplementation(() => apiPromise);
fetchCmsContentForPage.mockImplementation(() => Promise.resolve());
const mountOptions = getMountOptions({ ...mountOptionsMockData, mixins: [baseMixin] });
const mountOptions = getMountOptions({
...mountOptionsMockData,
mixins: [baseMixin, mockMixin],
});
mountOptions["attachTo"] = document.body;
const wrapper = shallowMount(estimate, mountOptions);

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

@ -52,9 +52,10 @@
cmsWidgetName="EmailAddressQuestionWidget"
v-model="emailAddress"
inputId="emailAddress"
isRequired
:isRequired="!IsEmailOptional"
disableAutoFill
validationRules="email-address-required|email-address-format" />
:validationRules="EmailValidationRules"
:addOptionalText="IsEmailOptional" />
<textBlock cmsWidgetName="QuoteEmailTextBlockWidget" typeStyle="caption" />
<alert

14
src/layouts/license-plate-lookup/license-plate-lookup.spec.js
View file

@ -11,6 +11,7 @@ import { nextTick } from "vue";
import { storeActions } from "@/constants/store-actions";
import { storeMutations } from "@/constants/store-mutations";
import store from "@/store";
import { experimentSettings } from "@/constants/experiments";
jest.mock("@/assets/img/loader.gif", () => "loader.gif");
jest.mock("@/assets/img/windshield.png", () => "windshield.png");
@ -692,11 +693,20 @@ function setupMocks({
};
const apiPromise = Promise.resolve(apiResponses);
const mockMixin = {
methods: {
getSettingValue: jest.fn((settingName) => {
if (settingName === experimentSettings.IS_EMAIL_OPTIONAL) {
return "true";
}
return "false";
}),
},
};
settleAllPromises.mockImplementation(() => apiPromise);
fetchCmsContentForPage.mockImplementation(() => Promise.resolve());
const mountOptions = getMountOptions(mountOptionsMockData);
const mountOptions = getMountOptions({ ...mountOptionsMockData, mixins: [mockMixin] });
mountOptions["attachTo"] = document.body; // append wrapper to document.body to test DOM methods
const wrapper = shallowMount(licensePlateLookup, mountOptions);

4
src/layouts/license-plate-lookup/license-plate-lookup.vue
View file

@ -34,7 +34,9 @@
cmsWidgetName="EmailAddressQuestionWidget"
v-model="email"
customInputId="email"
validationRules="email-address-required|email-address-format" />
:isRequired="!IsEmailOptional"
:validationRules="EmailValidationRules"
:addOptionalText="IsEmailOptional" />
<textBlock cmsWidgetName="QuoteEmailTextBlockWidget" typeStyle="caption" />

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

@ -29,12 +29,6 @@
servicePackageOptionsCmsName="ServicePackageTitle"
recyclingModalCmsWidgetName="RecycleModal" />
<promoModalQuestion
class="small mt-4"
v-model="lineItems"
:availableVaps="availableVaps"
modalWidgetName="PromoModalWidget" />
<hr class="my-5" />
<div>
@ -82,7 +76,6 @@ import paymentMethodQuestion from "@/layouts/payment-method/payment-method-quest
import loadingModal from "@/fmg-components/loading-modal/loading-modal.vue";
import cart from "@/fmg-components/cart/cart";
import reviewDropdown from "@/layouts/payment-method/review-dropdown/review-dropdown";
import promoModalQuestion from "@/layouts/payment-method/promo-modal-question/promo-modal-question";
import { submitWorkOrder } from "@/helpers/heritage-integration/order-helper.js";
import alert from "@/ux-components/alert/alert";
@ -244,7 +237,7 @@ export default {
const taxedLineItems = await baseMixin.methods.dispatchStoreActionWithLogging(
storeActions.TAX_ORDER_ITEMS_AND_SAVE_SERVER_DATA,
{
billToAccountNumber: "87291",
billToAccountNumber: store.getters.payment.billToAccountNumber,
providerNumber: store.getters.order.serviceLocation.provider.providerNumber,
appointmentType: store.getters.order.serviceLocation.appointmentType,
serviceLocationCity: store.getters.order.serviceLocation.city,
@ -314,9 +307,6 @@ export default {
},
methods: {
arePagePrerequisitesValid() {
// Line Items
const packageReqs = !!store.getters.order.lineItems.supportingItems;
// Service Location
const serviceLocation = store.getters.order.serviceLocation;
const mobileReqs = !!(
@ -361,9 +351,7 @@ export default {
customer.emailAddress
);
return (
packageReqs && serviceLocationReqs && isInsuranceSet && scheduleReqs && customerReqs
);
return serviceLocationReqs && isInsuranceSet && scheduleReqs && customerReqs;
},
getPaymentMethodFromStore() {
const piaType = store.getters.order.payment.piaType;
@ -405,7 +393,7 @@ export default {
await baseMixin.methods.dispatchStoreActionWithLogging(
storeActions.TAX_ORDER_ITEMS_AND_SAVE_SERVER_DATA,
{
billToAccountNumber: "87291",
billToAccountNumber: store.getters.payment.billToAccountNumber,
providerNumber:
this.$store.getters.order.serviceLocation.provider.providerNumber,
appointmentType: this.$store.getters.order.serviceLocation.appointmentType,
@ -524,8 +512,12 @@ export default {
},
isPiaDisabled() {
const piaExperience = this.getSettingValue(experimentSettings.PIA_EXPERIENCE);
const piaInsurance = this.getSettingValue(experimentSettings.PIA_INSURANCE);
const isEnabled = piaExperience === "PIA Optional" || piaExperience === "PIA Required";
const isEnabled =
piaExperience === "PIA Optional" ||
piaExperience === "PIA Required" ||
piaInsurance === "true";
return !isEnabled;
},
@ -596,7 +588,6 @@ export default {
cart,
alert,
paymentMethodQuestion,
promoModalQuestion,
reviewDropdown,
},
};

82
src/layouts/payment-method/promo-modal-question/promo-modal-question.spec.js
View file

@ -1,82 +0,0 @@
import { mount, shallowMount } from "@vue/test-utils";
import promoModalQuestion from "./promo-modal-question";
jest.mock("@/digital-components/textbox-question/textbox-question", () => ({
getCmsContent: jest.fn((widgetName, cmsFieldName) => {
return widgetName[cmsFieldName];
}),
}));
jest.mock("@/digital-components/modal/modal", () => ({
methods: {
closeModal: jest.fn(),
resetButtonStyle: jest.fn(),
resetForm: jest.fn(),
},
}));
const modalWidgetName = "modalWidgetName";
const mockModalCmsContent = {
FooterText: "Sample modal footer text here.",
};
const mockMixin = {
methods: {
getCmsContent: jest.fn((widgetName, cmsFieldName) => {
if (widgetName === modalWidgetName) {
return mockModalCmsContent[cmsFieldName];
}
return null;
}),
},
};
describe("promo-modal-question.vue", () => {
it("Should reset all alerts on onModalClosed", async () => {
// Arrange
const wrapper = mount(promoModalQuestion, {
mixins: [mockMixin],
props: {
modalWidgetName: modalWidgetName,
},
attachTo: document.body,
});
// Act
wrapper.vm.onModalClosed();
// Assert
expect(wrapper.vm.displayInvalidPromoAlert).toBe(false);
expect(wrapper.vm.displayStackingPromoAlert).toBe(false);
expect(wrapper.vm.displayInShopPromoAlert).toBe(false);
expect(wrapper.vm.displaySimilarPromoAlert).toBe(false);
});
it("Should emit update:modelValue on Modal closed", async () => {
// Arrange
const lineItems = {
glassParts: [],
supportingItems: [],
vaps: [],
promos: [],
};
const wrapper = mount(promoModalQuestion, {
mixins: [mockMixin],
props: {
modelValue: lineItems,
modalWidgetName: modalWidgetName,
},
attachTo: document.body,
});
// Act
await wrapper.vm.onModalClosed();
// Assert
expect(wrapper.emitted("update:modelValue")).toEqual([[lineItems]]);
});
});

6
src/layouts/payment/payment.spec.js
View file

@ -512,7 +512,7 @@ describe("payment.vue", () => {
});
});
describe("handleIFrameContentWindwMessage", () => {
describe("handleIFrameContentWindowMessage", () => {
test("Navigates back if afterpay is closed", () => {
// Arrange
const event = {
@ -524,7 +524,7 @@ describe("payment.vue", () => {
wrapper.vm.backButtonAction = jest.fn();
// Act
wrapper.vm.handleIFrameContentWindwMessage(event);
wrapper.vm.handleIFrameContentWindowMessage(event);
// Assert
expect(wrapper.vm.backButtonAction).toBeCalled();
@ -539,7 +539,7 @@ describe("payment.vue", () => {
const wrapper = setupMocks({});
// Act
wrapper.vm.handleIFrameContentWindwMessage(event);
wrapper.vm.handleIFrameContentWindowMessage(event);
// Assert
expect(wrapper.vm.shouldBlockInteraction).toBe(true);

22
src/layouts/payment/payment.vue
View file

@ -356,7 +356,7 @@ export default {
const taxedLineItems = await baseMixin.methods.dispatchStoreActionWithLogging(
storeActions.TAX_ORDER_ITEMS_AND_SAVE_SERVER_DATA,
{
billToAccountNumber: "87291",
billToAccountNumber: store.getters.payment.billToAccountNumber,
providerNumber: store.getters.order.serviceLocation.provider.providerNumber,
appointmentType: store.getters.order.serviceLocation.appointmentType,
serviceLocationCity: store.getters.order.serviceLocation.city,
@ -440,9 +440,6 @@ export default {
},
methods: {
arePagePrerequisitesValid() {
// Line Items
const packageReqs = !!store.getters.order.lineItems.supportingItems;
// Service Location
const serviceLocation = store.getters.order.serviceLocation;
const mobileReqs = !!(
@ -492,7 +489,6 @@ export default {
(store.getters.order.payment.isPia || !!store.getters.order.payment.piaType);
return (
packageReqs &&
serviceLocationReqs &&
isInsuranceSet &&
scheduleReqs &&
@ -647,17 +643,19 @@ export default {
this.submitHopForm();
},
handleIFrameContentWindwMessage(event) {
if (event.data.indexOf("afterpayClosed") > -1) {
this.backButtonAction();
}
if (event.data.indexOf("creditCardSubmit") > -1) {
this.setUIBlock(true);
handleIFrameContentWindowMessage(event) {
if (typeof event.data === "string") {
if (event.data.indexOf("afterpayClosed") > -1) {
this.backButtonAction();
}
if (event.data.indexOf("creditCardSubmit") > -1) {
this.setUIBlock(true);
}
}
},
setIFrameListener() {
window.addEventListener("message", (event) =>
this.handleIFrameContentWindwMessage(event)
this.handleIFrameContentWindowMessage(event)
);
},
setUIBlock(val) {

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

@ -133,8 +133,6 @@ describe("quote.vue", () => {
};
});
wrapper.vm.pricedGlassParts = [];
//Act
await wrapper.vm.forwardButtonAction();
@ -250,8 +248,8 @@ describe("quote.vue", () => {
);
//Assert
expect(wrapper.vm.pricedGlassParts !== null).toBe(true);
expect(wrapper.vm.supportingItems !== null).toBe(true);
expect(wrapper.vm.lineItems !== null).toBe(true);
expect(wrapper.vm.availableVaps !== null).toBe(true);
expect(wrapper.vm.availableLineItems !== null).toBe(true);
// This should have its own test
//expect(vm.isInsuranceSelected !== null).toBe(true);
@ -510,6 +508,31 @@ describe("quote.vue", () => {
//Assert
expect(wrapper.vm.isInsuranceSelected).toBe(true);
});
test("On forward button action save promos", async () => {
//Arrange
store.getters.payment = {
insuranceCoverage: {},
isInsurance: false,
};
store.getters.order = {
lineItems: [],
payment: {
parentAccountNumber: 167132,
},
};
const { wrapper } = setupMocks({
customMountOptions: {
router: {
navigateWithSaving: jest.fn(),
},
route: { quote },
},
});
wrapper.vm.forwardButtonAction();
expect(wrapper.vm.lineItems.promos !== null).toBe(true);
});
});
function setupMocks({ customMountOptions }) {

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

@ -29,7 +29,7 @@
:availableLineItems="availableLineItems"
:isInsuranceSelected="isInsuranceSelected"
@vapsItemsSelected="vapsItemsSelectedAction"
:activePromos="allActivePromos"
:activePromos="lineItems.promos"
v-on="{ 'buttonEvent.openModal': openModalAction }"
validationRules="option-required"
isRequired />
@ -39,6 +39,14 @@
cmsWidgetName="AfterpayModalWidget"
:lineItems="availableLineItems" />
<promoModalQuestion
class="small mt-4"
v-model="lineItems"
:addableVaps="addableVaps"
pageName="quote"
:taxPromos="false"
modalWidgetName="PromoModalWidget" />
<textBlock
cmsWidgetName="quoteDisclaimer"
justifyText="left"
@ -78,6 +86,7 @@ import baseMixin from "@/mixins/base-mixin.js";
import vehicleQuestionsMixin from "../../mixins/vehicle-questions-mixin";
import { settleAllPromises } from "@/helpers/layout-helper";
import { storeActions } from "@/constants/store-actions";
import { deepClone } from "@/helpers/object-helper";
import store from "@/store";
import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
import { required } from "@/helpers/validation-rules";
@ -89,9 +98,11 @@ import { payWithInsuranceStates } from "@/constants/pay-with-insurance-states";
import {
revalidatePromosAndValidateQueryStringPromo,
buildToastMessagesFromRevalidateOrValidatePromoResponse,
createPromoSuccessAlert,
} from "@/helpers/promotions-helper";
import { queryStrings } from "@/constants/query-strings";
import { getQuerystringParameter } from "@/helpers/querystring-helper";
import promoModalQuestion from "@/fmg-components/promo-modal-question/promo-modal-question";
defineRule("option-required", required(errorMessages.OPTION_REQUIRED));
@ -139,7 +150,9 @@ export default {
];
const resultMap = await settleAllPromises(promiseResultMap);
const nullSafeGlassParts = store.getters.order.lineItems.glassParts ?? [];
const lineItems = deepClone(store.getters.order.lineItems);
lineItems.vaps = lineItems.vaps ?? [];
const nullSafeGlassParts = lineItems.glassParts ?? [];
const availableLineItems = [
resultMap.rainDefense,
...resultMap.supportingItems,
@ -161,6 +174,8 @@ export default {
resultMap.supportingItems,
false
);
lineItems.supportingItems = resultMap.supportingItems;
const addableVaps = [...resultMap.wipers, resultMap.rainDefense];
// Promo logic
// Populate the previous state of promos for toast message usage in "next()"
@ -168,20 +183,21 @@ export default {
const oldInactivePromos = store.getters.order.payment.inactivePromos?.slice(0);
const promoCodeFromQueryString = getQuerystringParameter(queryStrings.PROMO);
const { validatePromoResponse, revalidatePromoResponse } =
await revalidatePromosAndValidateQueryStringPromo(
promoCodeFromQueryString,
pricingResults,
"quote"
);
// Sync local promos with any new promos added by validate/revalidate
lineItems.promos = store.getters.lineItems.promos ?? [];
// End of promo logic
// Call the "next" function to complete the transition to this page.
next((vm) => {
vm.setCmsContent(resultMap.cmsContent);
vm.pricedGlassParts = nullSafeGlassParts;
vm.supportingItems = resultMap.supportingItems;
vm.addableVaps = addableVaps;
vm.lineItems = lineItems;
vm.availableLineItems = pricingResults;
vm.isInsuranceSelected = vm.getDefaultIsInsuranceSelectedValue(vm.availableLineItems);
@ -208,15 +224,14 @@ export default {
data() {
return {
isInsuranceSelected: null,
selectedVaps: null,
availableLineItems: null,
supportingItems: null,
pricedGlassParts: null,
lineItems: [],
addableVaps: [],
};
},
computed: {
allActivePromos() {
return this.$store.getters.order.lineItems.promos ?? [];
lineItemsCloneForWatcher() {
return Object.assign({}, this.lineItems);
},
},
methods: {
@ -258,7 +273,7 @@ export default {
}
},
vapsItemsSelectedAction(vapsItemsSelected) {
this.selectedVaps = vapsItemsSelected;
this.lineItems.vaps = vapsItemsSelected;
},
backButtonAction() {
vehicleQuestionsMixin.methods.navigateBack(this);
@ -276,31 +291,48 @@ export default {
applicationConfig.CASH_PARENT_ACCOUNT_NUMBER,
false
);
this.dispatchStoreAction(
this.storeActions.SAVE_BILL_TO_ACCOUNT_NUMBER,
applicationConfig.CASH_DEFAULT_BILL_TO_ACCOUNT_NUMBER,
false
);
}
if (
this.$store.getters.order.payment.parentAccountNumber !=
applicationConfig.CASH_PARENT_ACCOUNT_NUMBER
) {
this.supportingItems = this.filterOutFees(this.supportingItems);
this.lineItems.supportingItems = this.filterOutFees(this.lineItems.supportingItems);
}
if (this.pricedGlassParts.length > 0) {
if (this.lineItems.glassParts?.length > 0) {
this.dispatchStoreAction(
this.storeActions.SAVE_GLASS_PARTS_SUPPRESSING_STATE_RESETTING,
this.pricedGlassParts,
this.lineItems.glassParts,
false
);
}
this.dispatchStoreAction(this.storeActions.SAVE_VAPS, this.selectedVaps, false);
this.dispatchStoreAction(this.storeActions.SAVE_VAPS, this.lineItems.vaps, false);
this.dispatchStoreAction(
storeActions.SAVE_ACTIVE_AND_OR_INACTIVE_PROMOS,
{
activePromos: this.lineItems.promos,
},
false
);
const payment = this.$store.getters.payment;
if (payment.isInsurance) {
this.$router.navigateWithSaving(
this.navigationScenarios.CLICKED_FORWARD_WITH_INSURANCE,
this.$route
);
navigateToHeritageFunnel({
shouldSaveSession: true,
pageNameToLog: "quote",
loadingModal: this.$refs.loadingModal,
});
// this.$router.navigateWithSaving(
// this.navigationScenarios.CLICKED_FORWARD_WITH_INSURANCE,
// this.$route
// );
} else {
this.$router.navigateWithSaving(
this.navigationScenarios.CLICKED_FORWARD_WITH_CASH,
@ -309,6 +341,32 @@ export default {
}
},
},
watch: {
lineItemsCloneForWatcher: {
handler(newValue, oldValue) {
if (
!oldValue ||
oldValue.length == 0 ||
!oldValue.vaps ||
!newValue ||
newValue.length == 0
) {
return;
}
if (oldValue.promos.length < newValue.promos.length) {
const oldPromoCodes = oldValue.promos.map(
(promoObject) => promoObject.promoCode
);
const newlyActivatedPromoCodes = newValue.promos.filter(
(newPromo) => !oldPromoCodes.includes(newPromo.promoCode)
);
const alert = createPromoSuccessAlert(newlyActivatedPromoCodes[0].promoCode);
this.$refs.funnelHeader.pushGlobalAlert(alert, alert.shouldAutoFade);
}
},
deep: true,
},
},
components: {
funnelHeader,
navbar,
@ -321,6 +379,7 @@ export default {
contentGroupModal,
loadingModal,
afterpayModalBanner,
promoModalQuestion,
},
};
</script>

51
src/layouts/quote/service-package-question/service-package-question.spec.js
View file

@ -256,6 +256,57 @@ describe("service-package-question.vue", () => {
// Assert
expect(wrapper.vm.selectedPackageName).toBe("TierThree");
});
it("should select default package if promos are added", async () => {
//Arrange
mockProps.activePromos != null;
const wrapper = setupMocks({
mountOptionsMockData: {
store: {
getters: {
order: {
damage: {
isRepair: false,
glassToReplace: [{ glassLocation: "Windshield" }],
},
},
lineItems: {
vaps: [],
},
hasAnyNonWindshieldGlassParts: false,
payment: {
isInsurance: false,
},
},
},
},
});
//Act
wrapper.setProps({
activePromos: [
{
discountedLineItemIds: [
{
0: "428ec73c-38e4-4e14-8703-a987b0391898",
1: "79db94d7-163c-4408-a1ec-f83e58c11992",
},
],
partType: "PROMO_DISCOUNT",
promoCode: "1WIPER0",
partNumber: "WIPER DISCOUNT",
laborAmount: 0,
sellingPrice: -10,
kitPrice: 0,
salesTax: null,
},
],
});
const selectDefaultPackageMock = jest.spyOn(wrapper.vm, "selectDefaultPackage");
await nextTick();
//Assert
expect(selectDefaultPackageMock).toHaveBeenCalled();
});
});
describe("service-package-question.vue, matching business rules for package display", () => {
// mock scenarios in figma:

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

@ -63,6 +63,9 @@ export default {
this.selectDefaultPackage();
}
},
activePromos() {
if (this.activePromos?.length) this.selectDefaultPackage();
},
selectedPackageName(newValue) {
const VapsProductsInSelectedPackage = this.getVapsLineItemsForSelectedPackage(newValue);
this.$emit("vapsItemsSelected", VapsProductsInSelectedPackage);

18
src/layouts/schedule/schedule.vue
View file

@ -314,14 +314,13 @@ export default {
serviceLocation.provider.providerNumber);
const paymentInfo = store.getters.payment.isInsurance !== null;
const supportingItems = store.getters.lineItems.supportingItems !== null;
const damageInfo =
store.getters.order.damage.isRepair ||
(store.getters.order.lineItems?.glassParts != null &&
store.getters.order.lineItems.glassParts.length > 0);
return serviceLocationPreReqs && paymentInfo && supportingItems && damageInfo;
return serviceLocationPreReqs && paymentInfo && damageInfo;
},
async getAvailableDatesMethod(startDate, endDate) {
const newShopTimeSlots = await getAvailableDates(
@ -348,9 +347,14 @@ export default {
},
getSelectedTimeSlotInfo() {
const supportingItems = this.getSupportingItems();
const isPremiumAppointment =
!!supportingItems.filter((lineItem) => lineItem.partType === PREMIUM_FEE_PART_TYPE)
.length > 0;
var isPremiumAppointment = false;
if (supportingItems) {
isPremiumAppointment =
!!supportingItems.filter(
(lineItem) => lineItem.partType === PREMIUM_FEE_PART_TYPE
).length > 0;
}
const selectedTimeSlotInfo = {
timeSlot: store.getters.order.schedule,
@ -461,6 +465,10 @@ export default {
false
);
} else {
if (!supportingItems) {
return;
}
// if it's not a mobile and/or premium early bird, then make sure we remove any that may have been added
const removePremiumFeeIndex = supportingItems.findIndex(
(item) => item.partType == PREMIUM_FEE_PART_TYPE

8
src/layouts/service-location/helpers/service-location-helper/service-location-helper.js
View file

@ -16,6 +16,14 @@ export async function getPricedMobileFeePart(serviceZipCode, pageNameToLog) {
false
);
if (
mobileFeePart.data === null ||
mobileFeePart.data === undefined ||
mobileFeePart.data === ""
) {
return null;
}
// Get the Mobile Fee Part Price
const pricingResults = await baseMixin.methods.dispatchStoreActionWithLogging(
storeActions.PRICE_ORDER_ITEMS_AND_SAVE_SERVER_DATA,

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

@ -138,6 +138,7 @@ import {
getServiceabilityDetails,
getShopProviderData,
} from "@/layouts/service-location/helpers/service-location-helper/service-location-helper";
import { navigateToHeritageFunnel } from "@/helpers/heritage-integration/navigation-helper";
import { Provider } from "@/layouts/service-location/classes/provider";
@ -348,11 +349,19 @@ export default {
},
methods: {
arePagePrerequisitesValid() {
return (
store.getters.lineItems.supportingItems !== null &&
store.getters.order.serviceLocation.zipCode !== null &&
store.getters.payment.isInsurance !== null
);
// insurance drops the recycle fee on replace orders so it won't be in supportingItems
if (store.getters.payment.isInsurance && !store.getters.order.damage.isRepair) {
return (
store.getters.order.serviceLocation.zipCode !== null &&
store.getters.payment.isInsurance !== null
);
} else {
return (
store.getters.lineItems.supportingItems !== null &&
store.getters.order.serviceLocation.zipCode !== null &&
store.getters.payment.isInsurance !== null
);
}
},
setData(zipCodeData, serviceabilityDetails, mobileFeePart, shopProviderData) {
if (zipCodeData) {
@ -438,7 +447,14 @@ export default {
this.recalibrationInformationModal.openModal();
},
backButtonAction() {
this.$router.navigateWithoutSaving(this.navigationScenarios.CLICKED_BACK, this.$route);
if (store.getters.order.payment.isInsurance) {
navigateToHeritageFunnel({ shouldSaveSession: false });
} else {
this.$router.navigateWithoutSaving(
this.navigationScenarios.CLICKED_BACK,
this.$route
);
}
},
updateAndSaveSupportingItems() {
const supportingItems = store.getters.lineItems.supportingItems;
@ -453,7 +469,7 @@ export default {
supportingItems[mobileFeeIndex].sellingPrice = this.mobileFeePart.sellingPrice;
supportingItems[mobileFeeIndex].kitPrice = this.mobileFeePart.kitPrice;
} else {
supportingItems.push(this.mobileFeePart);
if (this.mobileFeePart !== null) supportingItems.push(this.mobileFeePart);
}
this.dispatchStoreAction(
@ -463,7 +479,7 @@ export default {
);
} else {
// if it's not a mobile, then make sure we remove any that may have been added
const removeMobileFeeIndex = supportingItems.findIndex(
const removeMobileFeeIndex = supportingItems?.findIndex(
(item) => item.partType == MOBILE_FEE_PART_TYPE
);

15
src/layouts/vehicle-parts/glass-part-question/glass-part-question.vue
View file

@ -95,19 +95,14 @@ export default {
},
tintSelectionOptions() {
let tintOptions = [];
Object.keys(this.featureListData).forEach((tintOption) => {
tintOptions.push({
const tintOptions = Object.keys(this.featureListData).map((tintOption) => {
const buttonImage = this.getTintSourceImage(this.glassLocation, tintOption);
return {
value: tintOption,
buttonLabel: tintOption,
buttonImage: require(`@/assets/img/tints/${this.getTintSourceImage(
this.glassLocation,
tintOption
)}`),
});
buttonImage: buttonImage ? require(`@/assets/img/tints/${buttonImage}`) : null,
};
});
return tintOptions;
},

7
src/layouts/vin-lookup/vin-lookup.spec.js
View file

@ -3,6 +3,7 @@ import vinLookup from "./vin-lookup.vue";
import { getMountOptions } from "@/helpers/unit-test-helper.js";
import { navigationScenarios } from "@/router/router-constants/navigation-scenarios.js";
import { settleAllPromises } from "@/helpers/layout-helper.js";
import { experimentSettings } from "@/constants/experiments";
import store from "@/store";
@ -378,5 +379,11 @@ function mockOutStubFunctions(wrapper) {
const mockMixin = {
methods: {
getCmsContent: jest.fn(() => "placeholder CMS content"),
getSettingValue: jest.fn((settingName) => {
if (settingName === experimentSettings.IS_EMAIL_OPTIONAL) {
return "true";
}
return "false";
}),
},
};

5
src/layouts/vin-lookup/vin-lookup.vue
View file

@ -53,8 +53,9 @@
cmsWidgetName="EmailAddressQuestionWidget"
v-model="emailAddress"
customInputId="emailAddress"
isRequired
validationRules="email-address-required|email-address-format" />
:isRequired="!IsEmailOptional"
:validationRules="EmailValidationRules"
:addOptionalText="IsEmailOptional" />
<textBlock cmsWidgetName="QuoteEmailTextBlockWidget" typeStyle="caption" />

11
src/main.js
View file

@ -13,6 +13,10 @@ import "../node_modules/jquery-ui/dist/jquery-ui.min.js";
// Make jQuery avaialble globally
window.$ = window.jQuery = require("jquery");
import Logger from "@/helpers/logger";
// Instantiate global logging object
global.$logger = new Logger();
// Vue App Setup
const vueApp = createApp(App);
@ -24,4 +28,11 @@ vueApp.mixin(baseMixin);
vueApp.mixin(analyticsMixin);
vueApp.mixin(experimentMixin);
// Vue Error Handling
vueApp.config.errorHandler = (err, vm, info) => {
global.$logger.logError(
`Page Name - ${vm.getPageName()} - ${info}: ${err.message}\n${err.stack}`
);
};
vueApp.mount("#app");

213
src/mixins/analytics-mixin.js
View file

@ -120,77 +120,182 @@ export default {
await this.logPageView(analyticsPageEvents.ENTRY);
},
pushSubmittedOrderToDataLayer() {
// check if submitted order exists; exit if not.
const hasSubmittedOrder = store.getters.hasSubmittedOrder;
pushOrderToDataLayer() {
// helper check for if an object is defined (but maybe falsey)
const isDefined = (x) => x !== null && x !== undefined;
if (!hasSubmittedOrder) {
return;
// Get correct order object
const hasSubmittedOrder = store.getters.hasSubmittedOrder;
const order = hasSubmittedOrder ? store.getters.submittedOrder : store.getters.order;
// Begin assembling payload for data layer
const payload = {};
// Service Zip
if (
order.serviceLocation.appointmentType === AppointmentTypeStrings.MOBILE &&
isDefined(order.serviceLocation.zipCode)
) {
payload.serviceZipCode = order.serviceLocation.zipCode;
} else if (
isDefined(order.serviceLocation.appointmentType) &&
order.serviceLocation.appointmentType !== AppointmentTypeStrings.MOBILE &&
isDefined(order.serviceLocation.provider.address.zipCode)
) {
payload.serviceZipCode = order.serviceLocation.provider.address.zipCode;
} else {
payload.serviceZipCode = "";
}
const order = store.getters.submittedOrder;
// Damage Type
if (isDefined(order.damage.isRepair)) {
payload.damageType = order.damage.isRepair ? "repair" : "replace";
} else {
payload.damageType = "";
}
// assemble data for payload
// // reduce promocode array
// Account Type
if (isDefined(order.payment.isInsurance)) {
payload.accountType = order.payment.isInsurance ? "insurance" : "cash";
} else {
payload.accountType = "";
}
// Promo Codes
const promos = order.lineItems.promos ?? [];
const promoCodes = promos.map((promo) => promo.promoCode);
const promoString =
promoCodes.length === 0 ? "" : promoCodes.reduce((prev, next) => `${prev},${next}`);
if (promos.length === 0) {
payload.promoCodes = "";
} else {
const promoCodes = promos.map((promo) => promo.promoCode);
const promoString = promoCodes.reduce((prev, next) => `${prev},${next}`);
payload.promoCodes = promoString;
}
// // reduce glass array
const glassToReplace = order.damage.glassToReplace ?? [];
const glassToReplaceNames = glassToReplace.map(
(glassPiece) => `${glassPiece.glassLocation}/${glassPiece.glassName}`
);
const glassString =
glassToReplaceNames.length === 0
? ""
: glassToReplaceNames.reduce((prev, next) => `${prev},${next}`);
// Vehicle info
if (isDefined(order.vehicle.year)) {
// Ensure cast to string.
payload.vehicleYear = `${order.vehicle.year}`;
} else {
payload.vehicleYear = "";
}
// // calculate subtotal
const lineItems = order.lineItems;
if (isDefined(order.vehicle.make)) {
payload.vehicleMake = order.vehicle.make;
} else {
payload.vehicleMake = "";
}
if (isDefined(order.vehicle.model)) {
payload.vehicleModel = order.vehicle.model;
} else {
payload.vehicleModel = "";
}
if (isDefined(order.vehicle.style)) {
payload.vehicleStyle = order.vehicle.style;
} else {
payload.vehicleStyle = "";
}
// Glass pieces
const glass = order.damage.glassToReplace ?? [];
if (glass.length === 0) {
payload.glassToReplace = "";
} else {
const glassNames = glass.map((g) => `${g.glassLocation}/${g.glassName}`);
const glassString = glassNames.reduce((prev, next) => `${prev},${next}`);
payload.glassToReplace = glassString;
}
// Work Order Id
if (order.workOrderId) {
const parsedId = parseInt(order.workOrderId);
if (!isNaN(parsedId)) {
payload.workOrderId = parsedId;
} else {
payload.workOrderId = "";
}
} else {
payload.workOrderId = "";
}
// Provider Ctu
if (isDefined(order.serviceLocation.zipCodeCtu)) {
const parsedCtu = parseInt(order.serviceLocation.zipCodeCtu);
if (!isNaN(parsedCtu)) {
payload.providerCtu = parseInt(order.serviceLocation.zipCodeCtu);
} else {
payload.providerCtu = "";
}
} else {
payload.providerCtu = "";
}
// Work Order Number
if (order.workOrderNumber) {
payload.orderNumber = order.workOrderNumber;
} else {
payload.orderNumber = "";
}
// Pricing
// Only fire for completed orders?
const lineItems = order.lineItems ?? {};
const combinedLineItems = [
...(lineItems.glassParts ?? []),
...(lineItems.supportingItems ?? []),
...(lineItems.vaps ?? []),
...(lineItems.promos ?? []),
];
const subtotal = baseMixin.methods
.getTotalPriceOfAllLineItemsAndChildParts(combinedLineItems, false)
.toFixed(2);
// // get correct zip code
const providerZip = order.serviceLocation.provider.address.zipCode;
const serviceZip =
order.serviceLocation.appointmentType === AppointmentTypeStrings.MOBILE
? order.serviceLocation.zipCode
: providerZip;
const isPricingAvailable =
combinedLineItems.length > 0 &&
combinedLineItems.every(
(lineItem) =>
isDefined(lineItem.kitPrice) &&
isDefined(lineItem.laborAmount) &&
isDefined(lineItem.sellingPrice)
);
const isTaxAvailable =
isPricingAvailable &&
combinedLineItems.every((lineItem) => isDefined(lineItem.salesTax));
// // calculate total
const total = baseMixin.methods
.getTotalPriceOfAllLineItemsAndChildParts(combinedLineItems, true)
.toFixed(2);
if (isPricingAvailable) {
const subtotal = baseMixin.methods
.getTotalPriceOfAllLineItemsAndChildParts(combinedLineItems, false)
.toFixed(2);
const payload = {
serviceZipCode: serviceZip,
damageType: order.damage.isRepair ? "repair" : "replace",
accountType: order.payment.isInsurance ? "insurance" : "cash",
promoCodes: promoString,
vehicleYear: `${order.vehicle.year}`,
vehicleMake: order.vehicle.make,
vehicleModel: order.vehicle.model,
vehicleStyle: order.vehicle.style,
glassToReplace: glassString,
workOrderId: parseInt(order.workOrderId),
providerCtu: parseInt(order.serviceLocation.zipCodeCtu),
orderNumber: order.workOrderNumber,
priceTotal: parseFloat(total),
priceSubTotal: parseFloat(subtotal),
isRecalibrationOnOrder: store.getters.isRecalibrationOnSubmittedOrder,
appointmentType: order.serviceLocation.appointmentType,
};
payload.priceSubTotal = parseFloat(subtotal);
} else {
payload.priceSubTotal = "";
}
if (isTaxAvailable) {
const total = baseMixin.methods
.getTotalPriceOfAllLineItemsAndChildParts(combinedLineItems, true)
.toFixed(2);
payload.priceTotal = parseFloat(total);
} else {
payload.priceTotal = "";
}
// Recalibration
if (hasSubmittedOrder) {
payload.isRecalibrationOnOrder = store.getters.isRecalibrationOnSubmittedOrder;
} else {
payload.isRecalibrationOnOrder = store.getters.isRecalibrationOnOrder;
}
// Appointment Type
if (isDefined(order.serviceLocation.appointmentType)) {
payload.appointmentType = order.serviceLocation.appointmentType;
} else {
payload.appointmentType = "";
}
// push to data layer.
pushToDataLayerIfDefined(payload);
},

247
src/mixins/analytics-mixin.spec.js
View file

@ -38,27 +38,38 @@ const parts = {
requiresRecalibration: true,
salesTax: 63.86,
sellingPrice: 791.46,
kitPrice: 0,
laborAmount: 0,
},
frontWipers: {
name: "front wipers",
partNumber: "SBB16",
description: "SAFELITE BEAM BLADE 16",
partType: "FRONT WIPER",
price: 32.64,
sellingPrice: 32.64,
kitPrice: 0,
laborAmount: 0,
salesTax: 1,
},
rearWipers: {
name: "rear wipers",
partNumber: "SBBR12A",
description: "SAFELITE REAR BLADE 12A",
partType: "REAR WIPER",
price: 24.48,
sellingPrice: 24.48,
kitPrice: 0,
laborAmount: 0,
salesTax: 2,
},
rainDefense: {
name: "rain defense",
partNumber: "RAIN DEFENSE",
description: null,
partType: "RAIN DEFENSE",
price: 35.5,
sellingPrice: 35.5,
kitPrice: 0,
laborAmount: 0,
salesTax: 0,
},
};
@ -324,10 +335,10 @@ describe("analyticsMixin.js", () => {
]);
});
describe("pushSubmittedOrderToDataLayer", () => {
describe("pushOrderToDataLayer", () => {
beforeEach(() => {
store.getters.hasSubmittedOrder = true;
store.getters.submittedOrder = {
store.getters.hasSubmittedOrder = false;
store.getters.order = {
vehicle: {
year: "2020",
make: "acura",
@ -342,8 +353,8 @@ describe("analyticsMixin.js", () => {
address2: "add2",
city: "city",
state: "state",
zipCode: "zip",
zipCodeCtu: "zipCtu",
zipCode: "11111",
zipCodeCtu: "11110",
appointmentType: "IN_SHOP",
isVehicleProtected: true,
provider: {
@ -352,8 +363,8 @@ describe("analyticsMixin.js", () => {
streetAddress: "add3",
city: "city2",
state: "state2",
zipCode: "zip2",
zipCodeCtu: "zipCtu2",
zipCode: "22222",
zipCodeCtu: "22220",
},
},
techNotes: "",
@ -368,13 +379,28 @@ describe("analyticsMixin.js", () => {
damage: {
isRepair: false,
numberOfChips: null,
glassToReplace: [{ glassName: "single", location: "windshield" }],
glassToReplace: [{ glassName: "single", glassLocation: "windshield" }],
},
lineItems: {
glassParts: [parts.windshield],
supportingItems: [],
vaps: [parts.frontWipers],
promos: [{ promoCode: "promoTEST" }, { promoCode: "promoTEST2" }],
promos: [
{
promoCode: "promoTEST",
kitPrice: 0,
sellingPrice: 0,
laborAmount: 0,
salesTax: 0,
},
{
promoCode: "promoTEST2",
kitPrice: 0,
sellingPrice: 0,
laborAmount: 0,
salesTax: 0,
},
],
},
payment: {
isInsurance: false,
@ -397,6 +423,8 @@ describe("analyticsMixin.js", () => {
workOrderNumber: "01820-111111",
workOrderId: "222222222222",
};
store.getters.isRecalibrationOnOrder = true;
store.getters.isRecalibrationOnSubmittedOrder = false;
});
test("Pushes to data layer if nominal", () => {
@ -408,28 +436,203 @@ describe("analyticsMixin.js", () => {
};
// Act
analyticsMixin.methods.pushSubmittedOrderToDataLayer();
analyticsMixin.methods.pushOrderToDataLayer();
// Assert
expect(mockDataLayerFn).toHaveBeenCalled();
});
test("Does not push to data layer if no submitted order available.", () => {
test("Pushes populated data to data layer", () => {
// Arrange
store.getters.hasSubmittedOrder = false;
store.getters.submittedOrder = undefined;
window.dataLayer = [];
const mockDataLayerFn = jest.fn();
// Act
analyticsMixin.methods.pushOrderToDataLayer();
window.dataLayer = {
push: mockDataLayerFn,
const result = window.dataLayer[0];
// Assert
console.log(result);
const allFieldsPopulated = Object.keys(result).every(
(key) => result[key] === false || !!result[key]
);
expect(allFieldsPopulated).toBe(true);
});
test("Pushes correct data when submitted order is present", () => {
// Arrange
window.dataLayer = [];
store.getters.hasSubmittedOrder = true;
store.getters.submittedOrder = store.getters.order;
store.getters.order = {
vehicle: {
year: null,
make: null,
model: null,
style: null,
carId: null,
category: null,
vin: 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: null,
numberOfChips: null,
glassToReplace: null,
},
lineItems: {
glassParts: null,
supportingItems: null,
vaps: null,
promos: null,
},
payment: {
isInsurance: null,
insuranceCoverage: {
isVerified: null,
coverageStatus: null,
coverageVerificationType: null,
},
isPia: null,
piaType: null,
inactivePromos: null,
},
schedule: {
date: null,
startTime: null,
endTime: null,
jobMinMinutes: null,
jobMaxMinutes: null,
},
workOrderNumber: null,
workOrderId: null,
};
// Act
analyticsMixin.methods.pushSubmittedOrderToDataLayer();
analyticsMixin.methods.pushOrderToDataLayer();
const result = window.dataLayer[0];
// Assert
expect(mockDataLayerFn).not.toHaveBeenCalled();
console.log(result);
const allFieldsPopulated = Object.keys(result).every(
(key) => result[key] === false || !!result[key]
);
expect(allFieldsPopulated).toBe(true);
});
test("Pushes default values when data is missing", () => {
// Arrange
window.dataLayer = [];
store.getters.order = {
vehicle: {
year: null,
make: null,
model: null,
style: null,
carId: null,
category: null,
vin: 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: null,
numberOfChips: null,
glassToReplace: null,
},
lineItems: {
glassParts: null,
supportingItems: null,
vaps: null,
promos: null,
},
payment: {
isInsurance: null,
insuranceCoverage: {
isVerified: null,
coverageStatus: null,
coverageVerificationType: null,
},
isPia: null,
piaType: null,
inactivePromos: null,
},
schedule: {
date: null,
startTime: null,
endTime: null,
jobMinMinutes: null,
jobMaxMinutes: null,
},
workOrderNumber: null,
workOrderId: null,
};
// Act
analyticsMixin.methods.pushOrderToDataLayer();
const result = window.dataLayer[0];
// Assert
console.log(result);
const allFieldsPopulatedOrDefault = Object.keys(result).every(
(key) => result[key] === false || !!result[key] || result[key] === ""
);
expect(allFieldsPopulatedOrDefault).toBe(true);
});
test("Glass and Promo strings correctly formatted", () => {
@ -437,7 +640,7 @@ describe("analyticsMixin.js", () => {
window.dataLayer = [];
// Act
analyticsMixin.methods.pushSubmittedOrderToDataLayer();
analyticsMixin.methods.pushOrderToDataLayer();
// Assert
const glassString = window.dataLayer[0].glassToReplace;

12
src/mixins/vin-pages-mixin.js
View file

@ -2,8 +2,20 @@ import { storeActions } from "@/constants/store-actions.js";
import store from "@/store";
import vehicleQuestionsMixin from "@/mixins/vehicle-questions-mixin";
import { saveSession } from "@/helpers/heritage-integration/order-helper.js";
import { experimentSettings } from "@/constants/experiments";
export default {
computed: {
IsEmailOptional() {
const emailOptional = this.getSettingValue(experimentSettings.IS_EMAIL_OPTIONAL);
return emailOptional === "true";
},
EmailValidationRules() {
return this.IsEmailOptional
? "email-address-format"
: "email-address-required|email-address-format";
},
},
methods: {
async navigateForwardWithSingleCarMatch() {
const pageName = this.$options?.name;

75
src/router/index.js
View file

@ -32,8 +32,14 @@ import analyticsMixin from "@/mixins/analytics-mixin";
import { experimentTriggers } from "../constants/experiments";
import { applicationConfig } from "../constants/application-config";
import { shouldStripPromoQueryString } from "@/helpers/promotions-helper";
import bailout from "@/layouts/bailout/bailout";
const routes = [
{
path: "/bailout",
name: "bailout",
component: bailout,
},
{
path: "/",
name: "root",
@ -66,9 +72,28 @@ const routes = [
// the saveSessionPromise will no longer point to a valid promise
baseMixin.methods.dispatchStoreAction(storeActions.RESET_SAVE_SESSION_PROMISE);
if (!to.query.fmgPage.startsWith("payment")) {
if (!to.query.fmgPage?.startsWith("payment")) {
//payment pages used to return from safelitehop so exclude here
// Remove the parameter after quote release
// for testing end to end locally, see if there is a referralNumber on the querystring
// that could have changed in heritage and then stick it in the store and then update the cookie
// so load-session runs properly. this can be removed when heritage goes away
const referralNumber = getQuerystringParameter(
queryStrings.REFERRAL_NUMBER
);
const parentAccount = getQuerystringParameter(queryStrings.PARENT_ACCOUNT);
const correlationId = getQuerystringParameter(queryStrings.CORRELATION_ID);
if (referralNumber) {
store.commit(storeMutations.UPDATE_REFERRAL_NUMBER, referralNumber);
store.commit(storeMutations.UPDATE_PARENT_ACCT_NUMBER, parentAccount);
store.commit(
storeMutations.UPDATE_REFERRAL_CORRELATION_ID,
correlationId
);
updateOrCreateFunnelCookie();
}
const loadSessionResponse = await loadSessionIfPresent(
to.query.isInsurance != null
? to.query.isInsurance == "true"
@ -103,6 +128,7 @@ const routes = [
}
if (!arePagePrerequisitesValid(component)) {
console.log("Page prereq error: " + component.default.name);
GoToFunnelStartOn404(next);
}
@ -110,6 +136,7 @@ const routes = [
}
if (!isExistingFmgPageName(to.query.fmgPage)) {
console.log("Not an existing fmg page name:" + to.query.fmgPage);
GoToFunnelStartOn404(next);
}
@ -131,6 +158,9 @@ const routes = [
.components.default();
if (!arePagePrerequisitesValid(nextComponent)) {
console.log(
"Page Prereqs not valid for next component: " + nextComponent.default.name
);
GoToFunnelStartOn404(next);
}
@ -141,7 +171,7 @@ const routes = [
params: to.params,
});
} catch (error) {
console.log(error);
global.$logger.logError(`Routing ${error.stack}`);
if (to.query?.fmgPage === funnelStartPageName) {
deleteFunnelCookie();
@ -220,6 +250,9 @@ router.afterEach(async (to, from) => {
// Push experiments to Data Layer
analyticsMixin.methods.pushExperimentsToDataLayer();
// Push current order status to Data Layer
analyticsMixin.methods.pushOrderToDataLayer();
});
router.navigateWithoutSaving = (
@ -321,6 +354,7 @@ async function navigate(
const hasZip = getQuerystringParameter(queryStrings.ZIP_CODE);
const zip = getQuerystringParameter(queryStrings.ZIP_CODE);
const promo = getQuerystringParameter(queryStrings.PROMO);
const pageError = getQuerystringParameter(queryStrings.PAGE_ERROR);
if (
hasZip &&
@ -336,6 +370,10 @@ async function navigate(
queryStringsObject[queryStrings.PROMO] = promo;
}
if (pageError) {
queryStringsObject[queryStrings.PAGE_ERROR] = pageError;
}
router.push({
name: "root",
query: Object.assign(optionalQuery, queryStringsObject),
@ -428,7 +466,38 @@ async function DisplayPageError() {
);
baseMixin.methods.dispatchStoreAction(storeActions.RESET_SAVE_SESSION_PROMISE);
location.reload();
const pageError = getQuerystringParameter(queryStrings.PAGE_ERROR);
// we use the pageError querystring as a counter to how many times a user has experienced an error and been routed here.
// once they receive more than 1 pageerrors, we'll reset their state to hopefully correct any issues they may be having.
var navPage = fmgPageValues.VEHICLE;
if (store.getters.payment.insuranceCoverage.isVerified) {
navPage = fmgPageValues.VEHICLE_DAMAGE;
}
if (pageError) {
var errorCount = Number(pageError);
if (errorCount > 1) {
deleteFunnelCookie();
await baseMixin.methods.dispatchStoreAction(storeActions.RESET_STATE);
router.push({
path: "/",
query: { fmgPage: navPage },
});
} else {
errorCount++;
router.push({
path: "/",
query: { fmgPage: navPage, pageError: errorCount },
});
}
} else {
router.push({
path: "/",
query: { fmgPage: navPage, pageError: "1" },
});
}
}
function isExistingFmgPageName(pageName) {

136
src/store/index.js
View file

@ -29,6 +29,7 @@ import {
} from "@/helpers/promotions-helper";
import { getDateDifferenceInDays } from "@/helpers/date-helper";
import sharedMutations from "./vuex-shared-mutations/vuexSharedMutations";
import { coverageStatusValue } from "@/constants/coverage-status";
// Export State
const getDefaultState = () => {
return {
@ -83,6 +84,8 @@ const getDefaultState = () => {
partQuestionAnswers: null,
moldingQuestionAnswers: null,
capabilityQuestionAnswers: null,
dateOfLoss: null,
damageCause: null,
},
lineItems: {
glassParts: null,
@ -122,9 +125,10 @@ const getDefaultState = () => {
policy: {
currentDeductible: 0,
policyNumber: null,
dateOfLoss: null,
isItac: false,
additionalAuthFlag: null,
isNoComp: false,
insuranceCompanyName: null,
},
schedule: {
date: null,
@ -248,6 +252,9 @@ export const mutations = {
updateParentAcctNumber(state, parentAcctNumber) {
state.order.payment.parentAccountNumber = parentAcctNumber;
},
updateBillToAcctNumber(state, billToAcctNumber) {
state.order.payment.billToAccountNumber = billToAcctNumber;
},
updateEON(state, eon) {
state.order.eon = eon;
},
@ -507,6 +514,8 @@ export const mutations = {
state.order.damage.glassToReplace = sessionInformation.order.damage.glassToReplace;
state.order.damage.isRepair = sessionInformation.order.damage.isRepair;
state.order.damage.numberOfChips = sessionInformation.order.damage.numberOfChips;
state.order.damage.dateOfLoss = sessionInformation.order.damage?.dateOfLoss;
state.order.damage.damageCause = sessionInformation.order.damage?.damageCause;
state.order.damage.partQuestionAnswers =
sessionInformation.order.damage.partQuestionAnswers;
@ -523,6 +532,8 @@ export const mutations = {
state.order.payment.parentAccountNumber =
sessionInformation.order.payment.parentAccountNumber;
state.order.payment.billToAccountNumber =
sessionInformation.order.payment.billToAccountNumber;
state.order.payment.inactivePromos = sessionInformation.order.payment.inactivePromos;
state.order.serviceLocation.address =
@ -557,8 +568,9 @@ export const mutations = {
state.order.payment.isInsurance = sessionInformation.order.payment.isInsurance;
state.order.payment.insuranceCoverage.isVerified =
sessionInformation?.order.payment.insuranceCoverage.isVerified;
state.order.payment.insuranceCoverage.coverageStatus =
sessionInformation?.order.payment.insuranceCoverage.coverageStatus;
state.order.payment.insuranceCoverage.coverageStatus = coverageStatusValue(
sessionInformation?.order.payment.insuranceCoverage.coverageStatus
);
state.order.payment.insuranceCoverage.coverageVerificationType =
sessionInformation?.order.payment.insuranceCoverage.coverageVerificationType;
@ -573,12 +585,25 @@ export const mutations = {
state.applicationUser.pageData = sessionInformation.applicationUser.pageData;
state.applicationUser.lastPage = sessionInformation.applicationUser.lastPage;
if (sessionInformation.applicationUser.savedSessionId) {
state.applicationUser.savedSessionId =
sessionInformation.applicationUser.savedSessionId;
}
state.order.schedule.date = sessionInformation.order.schedule?.date;
state.order.schedule.startTime = sessionInformation.order.schedule?.startTime;
state.order.schedule.endTime = sessionInformation.order.schedule?.endTime;
state.order.schedule.routeCode = sessionInformation.order.schedule?.routeCode;
state.order.schedule.jobMaxMinutes = sessionInformation.order.schedule?.jobMaxMinutes;
state.order.schedule.jobMinMinutes = sessionInformation.order.schedule?.jobMinMinutes;
state.order.policy.currentDeductible = sessionInformation.order.policy?.currentDeductible;
state.order.policy.additionalAuthFlag = sessionInformation.order.policy?.additionalAuthFlag;
state.order.policy.isItac = sessionInformation.order.policy?.isItac;
state.order.policy.policyNumber = sessionInformation.order.policy?.policyNumber;
state.order.policy.insuranceCompanyName =
sessionInformation.order.policy?.insuranceCompanyName;
state.order.policy.isNoComp = sessionInformation.order.policy?.noComprehensive;
},
updateExperiments(state, experiments) {
state.applicationUser.experiments = experiments;
@ -1076,6 +1101,10 @@ export const actions = {
parentAccountNumber,
}
) {
if (!pageName) {
return;
}
var payload = {
userId: userId,
sessionKey: sessionKey,
@ -1097,14 +1126,9 @@ export const actions = {
payload: payload,
logApiCall: false,
})
.then(
(response) => {
return response;
},
(error) => {
console.log("Analytics Service Error: " + error.data);
}
);
.then((response) => {
return response;
});
},
logCustomEvent(
@ -1124,6 +1148,10 @@ export const actions = {
parentAccountNumber,
}
) {
if (!pageName) {
return;
}
var payload = {
userId: userId,
sessionKey: sessionKey,
@ -1147,14 +1175,9 @@ export const actions = {
payload: payload,
logApiCall: false,
})
.then(
(response) => {
return response;
},
(error) => {
console.log("Analytics Service Error: " + error.data);
}
);
.then((response) => {
return response;
});
},
initializeSession(context, { userId, deviceId, sessionId, userAgent, referrer }) {
var payload = {
@ -1175,14 +1198,9 @@ export const actions = {
payload: payload,
logApiCall: false,
})
.then(
(response) => {
return response;
},
(error) => {
console.log("Analytics Service Error: " + error.data);
}
);
.then((response) => {
return response;
});
},
// Misc Actions
@ -1343,7 +1361,7 @@ export const actions = {
getMobileFeePart(context, { pageNameToLog }) {
const damageType = context.getters.damage.isRepair ? "Repair" : "Replace";
const parentAccountNumber = context.getters.payment.parentAccountNumber;
const billToAccountNumber = 87291; // TODO: MAKE THIS REAL
const billToAccountNumber = context.getters.payment.billToAccountNumber;
return globalMethods.callHttpClient({
method: endpoints.GetMobileFeePart.method,
@ -1354,15 +1372,19 @@ export const actions = {
},
getServiceabilityDetails(context, { payload: { serviceZipCode }, pageNameToLog }) {
const lineItemsWithOnlyPartNumbers = context.getters.order.lineItems.supportingItems.map(
const lineItemsWithOnlyPartNumbers = context.getters.order.lineItems.supportingItems?.map(
(lineItem) => ({
partNumber: lineItem.partNumber,
})
);
const lineItems = buildQueryStringParameterFromArrayOfComplexObjects(
lineItemsWithOnlyPartNumbers,
"lineItems"
);
var lineItems = null;
if (lineItemsWithOnlyPartNumbers) {
lineItems = buildQueryStringParameterFromArrayOfComplexObjects(
lineItemsWithOnlyPartNumbers,
"lineItems"
);
}
const vehicle = context.getters.vehicle;
const carId = vehicle.carId;
@ -1374,9 +1396,18 @@ export const actions = {
"glassPieces"
);
var endPoint = `${endpoints.GetServiceabilityDetails.url}?zip=${serviceZipCode}&carId=${carId}`;
if (lineItems) {
endPoint += `&${lineItems}`;
}
if (glassPieces) {
endPoint += `&${glassPieces}`;
}
return globalMethods.callHttpClient({
method: endpoints.GetServiceabilityDetails.method,
endpoint: `${endpoints.GetServiceabilityDetails.url}?zip=${serviceZipCode}&carId=${carId}&${lineItems}&${glassPieces}`,
endpoint: endPoint,
logApiCall: true,
pageNameToLog: pageNameToLog,
});
@ -1453,7 +1484,7 @@ export const actions = {
) {
const order = context.state.order;
const vehicle = context.state.order.vehicle;
const payment = context.state.order.payment;
let lineItems = [
...(order.lineItems.supportingItems ?? []),
...(order.lineItems.vaps ?? []),
@ -1475,15 +1506,16 @@ export const actions = {
endDate: endDate,
shopAppointmentType: shopAppointmentType,
applicationName: applicationConfig.APPLICATION_NAME,
parentAccountNumber: context.getters.payment.parentAccountNumber,
parentAccountNumber: payment.parentAccountNumber,
carId: vehicle.carId,
lineItems: lineItems,
glassPieces: glassPieces,
eon: order.eon,
billToAccountNumber: context.getters.payment.billToAccountNumber,
coverage: {
status: "",
deductible: 0,
additionalAuthFlag: "",
status: payment.insuranceCoverage.coverageStatus,
deductible: order.policy.currentDeductible,
additionalAuthFlag: order.policy.additionalAuthFlag,
},
partSelection: {
hasAnsweredPartQuestions: !!order.damage.partQuestionAnswers?.length,
@ -1521,6 +1553,7 @@ export const actions = {
getMobileTimeSlots(context, { payload: { startDate, endDate }, pageNameToLog }) {
const order = context.state.order;
const vehicle = context.state.order.vehicle;
const payment = context.state.order.payment;
let lineItems = [
...(order.lineItems.supportingItems ?? []),
...(order.lineItems.vaps ?? []),
@ -1539,15 +1572,16 @@ export const actions = {
startDate: startDate,
endDate: endDate,
applicationName: applicationConfig.APPLICATION_NAME,
parentAccountNumber: context.getters.payment.parentAccountNumber,
parentAccountNumber: payment.parentAccountNumber,
carId: vehicle.carId,
lineItems: lineItems,
glassPieces: glassPieces,
eon: order.eon,
billToAccountNumber: context.getters.payment.billToAccountNumber,
coverage: {
status: "",
deductible: 0,
additionalAuthFlag: "",
status: payment.insuranceCoverage.coverageStatus,
deductible: order.policy.currentDeductible,
additionalAuthFlag: order.policy.additionalAuthFlag,
},
partSelection: {
hasAnsweredPartQuestions: !!order.damage.partQuestionAnswers?.length,
@ -1566,6 +1600,7 @@ export const actions = {
},
zipCode: order.serviceLocation.zipCode,
};
return globalMethods.callHttpClient({
method: endpoints.GetMobileTimeSlots.method,
endpoint: endpoints.GetMobileTimeSlots.url,
@ -2117,6 +2152,9 @@ export const actions = {
saveParentAccountNumber(context, parentAccountNumber) {
context.commit(storeMutations.UPDATE_PARENT_ACCT_NUMBER, parentAccountNumber);
},
saveBillToAccountNumber(context, billToAccountNumber) {
context.commit(storeMutations.UPDATE_BILL_TO_ACCT_NUMBER, billToAccountNumber);
},
saveSupportingItems(context, supportingItems) {
if (!deepEqual(supportingItems, context.state.order.lineItems.supportingItems)) {
@ -2210,6 +2248,7 @@ export const actions = {
const vehicle = context.getters.order.vehicle;
// TODO: Insurance pricing...`ParentAccountNumber=${context.getters.order.payment.parentAccountNumber}`
let queryString =
`ParentAccountNumber=${applicationConfig.CASH_PARENT_ACCOUNT_NUMBER}` +
`&CTU=${ctuToUse}` +
@ -2320,6 +2359,9 @@ export const actions = {
) {
const order = context.getters.order;
lineItemsToUse = lineItemsToUse ?? order.lineItems;
addGuidToLineItemsIfNotAlreadyThere(lineItemsToUse.vaps);
syncLineItemIds(addableVaps, lineItemsToUse.vaps);
// addableVaps still won't have IDs if they weren't already in lineItemsToUse
addGuidToLineItemsIfNotAlreadyThere(addableVaps);
const requestObject = {
promoCode: promoCode,
@ -2860,12 +2902,18 @@ function syncLineItemIds(lineItemsWithoutIds, lineItemsWithIds) {
if (!lineItemsWithIds || !lineItemsWithoutIds) {
return;
}
var clonedLineItemsWithIds = deepClone(lineItemsWithIds);
lineItemsWithoutIds.forEach((noId) => {
lineItemsWithIds.forEach((withId) => {
var matchedLineItemIndex = -1;
clonedLineItemsWithIds.forEach((withId, index) => {
if (noId.partNumber === withId.partNumber && noId.partType === withId.partType) {
matchedLineItemIndex = index;
noId.id = withId.id;
}
});
if (matchedLineItemIndex > -1) {
clonedLineItemsWithIds.splice(matchedLineItemIndex, 1);
}
});
}

134
src/store/store.spec.js
View file

@ -2929,11 +2929,135 @@ describe("Actions", () => {
});
});
describe("validateOrderPromoAndSaveServerData", () => {
it("should add GUIDs if not there to provided lineItemsToUse.vaps before sending the http call", async () => {
// Arrange
const context = state;
const promoCode = "testPromo";
const lineItemsToUse = { vaps: [{ partNumber: 1 }], promos: [2] };
const addableVaps = [{ partNumber: "addableVap" }];
context["getters"] = {
order: {
serviceLocation: {
appointmentType: "test",
state: "test",
zipCodeCtu: "test",
},
vehicle: {
carId: "test",
year: "test",
},
referralCorrelationId: "test",
eon: "test",
damage: {
isRepair: true,
glassToReplace: null,
},
payment: {
parentAccountNumber: "test",
},
referralSequenceNumber: "test",
lineItems: {
serverData: "test",
},
},
};
globalMethods.callHttpClient = jest.fn().mockResolvedValue({
data: {},
});
crypto.randomUUID = jest.fn(() => "GUID");
// Act
actions.validateOrderPromoAndSaveServerData(context, {
payload: {
promoCode: promoCode,
lineItemsToUse: lineItemsToUse,
addableVaps: addableVaps,
},
pageNameToLog: "test",
});
const firstCallArgs = globalMethods.callHttpClient.mock.calls[0];
// Assert
const vapsItem = firstCallArgs[0].payload.order.lineItemsOnOrder.filter(
(item) => item.partNumber == 1
)[0];
expect(vapsItem.id).toEqual("GUID");
});
it("should not duplicate ids during syncing if there are two identical vaps items", async () => {
// Arrange
const context = state;
const promoCode = "testPromo";
// AddableVaps will sync its ids to vaps already on the order
const lineItemsToUse = {
vaps: [
{ partNumber: "SBB22", id: "GUID1" },
{ partNumber: "SBB22", id: "GUID2" },
],
promos: [2],
};
const addableVaps = [{ partNumber: "SBB22" }, { partNumber: "SBB22" }];
context["getters"] = {
order: {
serviceLocation: {
appointmentType: "test",
state: "test",
zipCodeCtu: "test",
},
vehicle: {
carId: "test",
year: "test",
},
referralCorrelationId: "test",
eon: "test",
damage: {
isRepair: true,
glassToReplace: null,
},
payment: {
parentAccountNumber: "test",
},
referralSequenceNumber: "test",
lineItems: {
serverData: "test",
},
},
};
globalMethods.callHttpClient = jest.fn().mockResolvedValue({
data: {},
});
crypto.randomUUID = jest.fn(() => "GUID");
// Act
actions.validateOrderPromoAndSaveServerData(context, {
payload: {
promoCode: promoCode,
lineItemsToUse: lineItemsToUse,
addableVaps: addableVaps,
},
pageNameToLog: "test",
});
const firstCallArgs = globalMethods.callHttpClient.mock.calls[0];
// Assert
const vapsItems = firstCallArgs[0].payload.addableVaps.filter(
(item) => item.partNumber == "SBB22"
);
expect(vapsItems[1].id).toEqual("GUID1");
expect(vapsItems[0].id).toEqual("GUID2");
});
it("should add GUIDs if not there to provided addableVaps before sending the http call", async () => {
// Arrange
const context = state;
const promoCode = "testPromo";
const lineItemsToUse = { vaps: [1], promos: [2] };
const lineItemsToUse = { vaps: [{ partNumber: 1 }], promos: [2] };
const addableVaps = [{ partNumber: "addableVap" }];
context["getters"] = {
@ -3013,7 +3137,7 @@ describe("Actions", () => {
},
referralSequenceNumber: "test",
lineItems: {
vaps: [1],
vaps: [{ partNumber: 1 }],
promos: [2],
serverData: "test",
},
@ -3026,7 +3150,7 @@ describe("Actions", () => {
crypto.randomUUID = jest.fn(() => "GUID");
const expectedLineItemsOnOrder = [1, 2];
const expectedLineItemsOnOrder = [{ partNumber: 1, id: "GUID" }, 2];
// Act
actions.validateOrderPromoAndSaveServerData(context, {
@ -3073,7 +3197,7 @@ describe("Actions", () => {
},
referralSequenceNumber: "test",
lineItems: {
vaps: [1],
vaps: [{ partNumber: 1 }],
promos: [2],
serverData: "test",
},
@ -3131,7 +3255,7 @@ describe("Actions", () => {
},
referralSequenceNumber: "test",
lineItems: {
vaps: [1],
vaps: [{ partNumber: 1 }],
promos: [2],
serverData: "test",
},

1
src/ux-components/list-card/list-card.vue
View file

@ -10,6 +10,7 @@
class="d-flex w-100 align-items-center px-2 h-100 list-card-content button-content rounded-3"
:class="labelClasses">
<img
v-if="buttonImage"
:id="buttonImageId"
:class="!isWide ? 'order-1' : 'ms-auto order-3'"
:src="buttonImage"

3
vue.config.js
View file

@ -1,5 +1,6 @@
process.env.VUE_APP_CONSUMER_CF_DISTRO = "https://digitalapi.dev.safelite.io";
process.env.VUE_APP_HERITAGE_FUNNEL = "http://localhost:38000/default.aspx";
//process.env.VUE_APP_HERITAGE_FUNNEL = "http://localhost:38000/default.aspx";
process.env.VUE_APP_HERITAGE_FUNNEL = "https://fixmyglassdev.safelite.com/default.aspx";
process.env.VUE_APP_GOOGLE_PLACES_API_KEY = "AIzaSyDptGCkOPgN2uWJOy4ou4M33phRD4MAoJo";
process.env.VUE_APP_CURRENT_ENVIRONMENT = "Localhost";
process.env.VUE_APP_MY_ACCOUNT = "https://myaccountdev.safelite.com/";