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

Merge branch 'develop' into feature/CSR-1393.1

Browse source
This commit is contained in:
AMSNEHA 2023-11-13 13:23:37 +05:30 committed by GitHub
commit bbdcbe65af
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
28 changed files with 712 additions and 242 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
public/css/site-2020Styling.css
View file

@ -87,6 +87,20 @@
display: none;
}
.buy-backdrop {
background-color: rgba(0, 0, 0, 0.3) !important;
}
.buy-backdrop #afterpay__iframe-checkout-container {
width: 100%;
}
.buy-backdrop #afterpay__iframe-checkout-container .style_closeWrapper__lIHJe {
display: none;
}
.buy-container-closer {
display: none;
}
@keyframes rotate {
0% {
transform: rotate(0);

18
public/scss/site-2020Styling.scss
View file

@ -90,6 +90,24 @@
}
}
// AfterPay Styles
.buy-backdrop {
background-color: rgba(0,0,0,.3)!important;
#afterpay__iframe-checkout-container {
width: 100%;
.style_closeWrapper__lIHJe {
display: none;
}
}
}
.buy-container-closer {
display: none;
}
// Modal Spinner
@keyframes rotate {
0% { transform: rotate(0)}
100% { transform: rotate(360deg)}

1
src/constants/cart-item-types.js
View file

@ -5,6 +5,7 @@ const cartItemTypes = {
GLASS_PARTS: "GLASS PARTS",
RAIN_DEFENSE: "RAIN DEFENSE",
RECYCLE_FEE: "RECYCLE FEE",
REPLACE_FEE: "REPLACE FEE",
MOBILE_FEE: "MOBILE FEE",
PROMOS: "PROMOS",
EARLY_BIRD: "EARLY BIRD",

1
src/constants/part-type-strings.js
View file

@ -3,6 +3,7 @@ const partTypeStrings = {
REAR_WIPER: "REAR WIPER",
RAIN_DEFENSE: "RAIN DEFENSE",
RECALIBRATION: "RECALIBRATION",
REPLACE_FEE: "REPLACE FEE",
RECYCLE_FEE: "RECYCLE FEE",
MOBILE_FEE: "MOBILE FEE",
REPAIR_FEE: "REPAIR FEE",

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

@ -86,8 +86,7 @@ const storeActions = {
SAVE_SUPPORTING_ITEMS_SUPPRESSING_STATE_RESETTING:
"saveSupportingItemsSuppressingStateResetting",
SAVE_VAPS: "saveVaps",
SAVE_PROMOS: "savePromos",
SAVE_INACTIVE_PROMOS: "saveInactivePromos",
SAVE_ACTIVE_AND_OR_INACTIVE_PROMOS: "saveActiveAndOrInactivePromos",
SAVE_CUSTOMER_DETAILS: "saveCustomerDetails",
SAVE_SERVICE_LOCATION_TECH_NOTES: "saveServiceLocationTechNotes",
SAVE_CCTOKEN: "saveCCToken",

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

@ -54,6 +54,7 @@ const storeMutations = {
UPDATE_PIA_TYPE: "updatePiaType",
WORK_ORDER_NUMBER: "updateWorkOrderNumber",
Customer_Portal_Login_Token: "updateCustomerPortalLoginToken",
LOCK_TOKEN: "updateLockToken",
// EVENT BUS MUTATIONS
ADD_EVENT_TO_BUS: "addEventToBus",

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

@ -37,13 +37,13 @@ describe("cart.vue", () => {
promos: [],
};
const availableLineItems = [];
const availableVaps = [];
// Act
const { wrapper } = setupMocks({
props: {
modelValue: lineItems,
availableLineItems: availableLineItems,
availableVaps: availableVaps,
},
});
@ -89,13 +89,13 @@ describe("cart.vue", () => {
promos: [],
};
const availableLineItems = [];
const availableVaps = [];
// Act
const { wrapper } = setupMocks({
props: {
modelValue: lineItems,
availableLineItems: availableLineItems,
availableVaps: availableVaps,
},
});
@ -132,13 +132,13 @@ describe("cart.vue", () => {
promos: [],
};
const availableLineItems = [];
const availableVaps = [];
// Act
const { wrapper } = setupMocks({
props: {
modelValue: lineItems,
availableLineItems: availableLineItems,
availableVaps: availableVaps,
},
});
@ -189,13 +189,13 @@ describe("cart.vue", () => {
// promos: [],
// };
// const availableLineItems = [];
// const availableVaps = [];
// // Act
// const { wrapper } = setupMocks({
// props: {
// modelValue: lineItems,
// availableLineItems: availableLineItems,
// availableVaps: availableVaps,
// },
// });
@ -234,13 +234,13 @@ describe("cart.vue", () => {
promos: [],
};
const availableLineItems = [];
const availableVaps = [];
// Act
const { wrapper } = setupMocks({
props: {
modelValue: lineItems,
availableLineItems: availableLineItems,
availableVaps: availableVaps,
},
});
@ -277,13 +277,13 @@ describe("cart.vue", () => {
promos: [],
};
const availableLineItems = [];
const availableVaps = [];
// Act
const { wrapper } = setupMocks({
props: {
modelValue: lineItems,
availableLineItems: availableLineItems,
availableVaps: availableVaps,
},
});
@ -321,13 +321,13 @@ describe("cart.vue", () => {
promos: [],
};
const availableLineItems = [];
const availableVaps = [];
// Act
const { wrapper } = setupMocks({
props: {
modelValue: lineItems,
availableLineItems: availableLineItems,
availableVaps: availableVaps,
},
});

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

@ -3,25 +3,22 @@
<div class="px-0">
<div
class="row vin-toggle flex align-items-center"
:class="[isActive ? 'active' : '']"
@click="toggleClass()">
:class="[isExpanded ? 'expanded' : '']"
@click="toggleIsExpanded()">
<div class="col d-flex justify-content-between">
<span class="label">{{ amountDueText }}</span
><span class="label amount-due">{{ currencyFormatter.format(amountDue) }}</span>
</div>
</div>
<div class="price-table">
<div class="service-type" :class="{ packageWithVAPS: packageWithVAPS }">
<div class="service-type">
<textBlock :cmsWidgetName="servicePackageTitleWidget" /><span>{{
currencyFormatter.format(packagePrice)
}}</span>
</div>
<!-- Packaged Cart Items -->
<div
v-for="(cartItem, i) in packageCartItems"
:key="i"
:class="[this.packageCartItems ? 'vaps' : '']">
<div v-for="(cartItem, i) in packageCartItems" :key="i" class="packaged-cart-item">
<span>{{ cartItem.name }}</span>
<textLink
v-if="allowItemRemoval"
@ -34,53 +31,29 @@
<!-- Nonpackaged Cart Items -->
<div
class="premium-appt-cart-item"
v-for="(cartItem, i) in nonpackageCartItems"
:key="i">
<span>{{ cartItem.name }}</span>
: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"
v-if="allowItemRemoval && cartItem.isRemovable"
ref="removeLink"
linkType="text"
:text="removeLinkText"
href="#!"
@click-event="removeItem(cartItem.cartItemType, cartItem.category)" />
<span>{{ currencyFormatter.format(cartItem.subTotal) }}</span>
</div>
<!-- Fees -->
<div v-if="recycleFeeCartItem">
<textLink
v-else-if="cartItem == recycleFeeCartItem"
linkType="text"
:text="recycleFeeCartItem.name"
href="#!"
@click-event="openModal(recyclingModalCmsWidgetName)" />
<span>{{ currencyFormatter.format(recycleFeeCartItem.subTotal) }}</span>
<span>{{ currencyFormatter.format(cartItem.subTotal) }}</span>
</div>
<div v-if="mobileFeeCartItem">
<span>{{ mobileFeeCartItem.name }}</span
><span>{{ currencyFormatter.format(mobileFeeCartItem.subTotal) }}</span>
</div>
<div v-if="premiumAppointmentDiscountCartItem" class="premium-appt-cart-item">
<span>{{ premiumAppointmentDiscountCartItem.name }}</span>
<textLink
v-if="allowItemRemoval"
ref="removeLink"
linkType="text"
:text="removeLinkText"
href="#!"
@click-event="
removeItem(
premiumAppointmentDiscountCartItem.cartItemType,
'supportingItems'
)
" />
<span>{{
currencyFormatter.format(premiumAppointmentDiscountCartItem.subTotal)
}}</span>
</div>
<!-- promos here -->
<!-- Sub total, sales tax, total columns -->
<div class="sub-total">
@ -127,14 +100,13 @@ export default {
modelValue: Object,
damage: Object,
servicePackageOptionsCmsName: String,
availableLineItems: Object,
availableVaps: Object,
allowItemRemoval: Boolean,
recyclingModalCmsWidgetName: String,
},
data() {
return {
isActive: false,
packageWithVAPS: false,
isExpanded: false,
currencyFormatter: new Intl.NumberFormat("en-US", {
style: "currency",
currency: "USD",
@ -146,8 +118,8 @@ export default {
openModal(modalName) {
this.$refs[modalName].openModal();
},
toggleClass: function (event) {
this.isActive = !this.isActive;
toggleIsExpanded() {
this.isExpanded = !this.isExpanded;
},
getVapsPrice(packageName) {
const vapsItems = this.getVapsCartItemsForSelectedPackage(packageName);
@ -200,6 +172,16 @@ export default {
},
},
computed: {
availableLineItems() {
if (!this.lineItems || this.lineItems.length < 1) {
return [];
}
return [
...(this.lineItems.glassParts ?? []),
...(this.lineItems.supportingItems ?? []),
...(this.availableVaps ?? []),
];
},
cartItems: {
get: function () {
let cartItems = [];
@ -244,12 +226,17 @@ export default {
cartItemType: promoLineItem?.partType,
isDisplayed: true,
subTotal:
(promoLineItem?.kitPrice ?? 0) +
(promoLineItem?.laborAmount ?? 0) +
(promoLineItem?.sellingPrice ?? 0),
salesTax: promoLineItem?.salesTax,
};
promoLineItem.cartItemType = cartItem.cartItemType;
cartItem.lineItems.push(promoLineItem);
cartItems.push(cartItem);
});
@ -335,14 +322,6 @@ export default {
const nonpackageCartItems = [];
this.cartItems.forEach((cartItem) => {
if (
cartItem == this.recycleFeeCartItem ||
cartItem == this.mobileFeeCartItem ||
cartItem == this.premiumAppointmentDiscountCartItem
) {
return;
}
if (!this.packageCartItems.find((packageCartItem) => packageCartItem == cartItem)) {
if (cartItem.isDisplayed) {
nonpackageCartItems.push(cartItem);
@ -440,6 +419,7 @@ export default {
category: cartItemCategories.VAPS,
cartItemType: cartItemTypes.RAIN_DEFENSE,
isDisplayed: true,
isRemovable: true,
subTotal: 0,
salesTax: 0,
lineItems: [],
@ -468,6 +448,7 @@ export default {
category: cartItemCategories.GLASS_PARTS,
cartItemType: cartItemTypes.GLASS_PARTS,
isDisplayed: false,
isRemovable: false,
subTotal:
(lineItem.kitPrice ?? 0) +
(lineItem.laborAmount ?? 0) +
@ -501,15 +482,16 @@ export default {
let cartItem = null;
const recycleFeeLineItem = this.supportingItems.find(
(supportingItem) => supportingItem.partNumber == partTypeStrings.RECYCLE_FEE
(supportingItem) => supportingItem.partType == partTypeStrings.REPLACE_FEE
);
if (recycleFeeLineItem) {
cartItem = {
name: this.recycleFeeCartItemName,
category: cartItemCategories.SUPPORTING_ITEMS,
cartItemType: cartItemTypes.RECYCLE_FEE,
cartItemType: cartItemTypes.REPLACE_FEE,
isDisplayed: true,
isRemovable: false,
subTotal: 0,
salesTax: 0,
lineItems: [],
@ -544,6 +526,7 @@ export default {
category: cartItemCategories.SUPPORTING_ITEMS,
cartItemType: cartItemTypes.MOBILE_FEE,
isDisplayed: true,
isRemovable: false,
subTotal: 0,
salesTax: 0,
lineItems: [],
@ -578,6 +561,7 @@ export default {
category: cartItemCategories.SUPPORTING_ITEMS,
cartItemType: cartItemTypes.SUPPORTING_ITEMS,
isDisplayed: false,
isRemovable: false,
subTotal: 0,
salesTax: 0,
lineItems: [],
@ -713,9 +697,6 @@ export default {
display: flex;
justify-content: space-between;
padding: 0.5rem 1.5rem;
&:nth-child(odd) {
background-color: #f5f5f5;
}
&:nth-last-child(-n + 3) {
background-color: #e3f2ea;
}
@ -724,7 +705,11 @@ export default {
color: #ffffff;
}
}
.vaps {
.service-type {
background-color: #f5f5f5;
align-items: center;
}
.packaged-cart-item {
background-color: #f5f5f5;
padding-left: 2.5rem;
align-items: center;
@ -742,6 +727,28 @@ export default {
font-size: 0.875rem;
}
}
.non-packaged-cart-item {
&.odd {
background: var(--neutrals-gray-100, #f4f4f4);
}
}
.non-packaged-cart-item {
&.even {
background-color: var(--neutrals-white, #fff);
}
}
// Custom order/wrap for removable nonpackaged Cart Items
.removable-cart-item {
flex-wrap: wrap;
span {
display: flex;
justify-content: space-between;
}
a {
order: 3;
margin-right: 100%;
}
}
.package-type,
.service-type {
//background-color: #f5f5f5;
@ -763,18 +770,6 @@ export default {
padding: 0;
}
}
// Custom order/wrap for nonpackaged Cart Items
.premium-appt-cart-item {
flex-wrap: wrap;
span {
display: flex;
justify-content: space-between;
}
a {
order: 3;
margin-right: 100%;
}
}
}
.vin-toggle {
&:after {
@ -791,10 +786,10 @@ export default {
margin: 1rem 0 1rem 1rem;
cursor: pointer;
}
&.active:after {
&.expanded:after {
transform: rotate(180deg);
}
&.active + .price-table {
&.expanded + .price-table {
max-height: 650px;
transition: all 350ms ease-in;
overflow: hidden;

56
src/fmg-components/funnel-header/funnel-header.vue
View file

@ -5,18 +5,18 @@
<img class="logo-image img-fluid" :src="imageSrc" alt="Safelite logo" />
<menuModal />
</div>
<transition name="fade" mode="out-in">
<alert
v-if="displayGlobalAlert"
class="rounded-0 w-100 border-0 shadow-sm"
cmsWidgetName="GlobalAlert"
:manualHeadline="globalAlertMessage.messageHeadline"
:manualCopy="globalAlertMessage.messageCopy"
:alertClass="globalAlertMessage.type"
:onAlertCloseCallback="onAlertClose"
v-bind:isDismissible="globalAlertMessage.isDismissible" />
</transition>
<template v-for="globalAlert in globalAlertMessages" :key="globalAlert.id">
<transition name="fade" mode="out-in">
<alert
v-if="globalAlert.displayAlert"
class="rounded-0 w-100 border-0 shadow-sm"
cmsWidgetName="GlobalAlert"
:manualHeadline="globalAlert.messageHeadline"
:manualCopy="globalAlert.messageCopy"
:alertClass="globalAlert.type"
v-bind:isDismissible="globalAlert.isDismissible" />
</transition>
</template>
</template>
<script>
@ -32,14 +32,8 @@ export default {
name: "funnel-header",
data() {
return {
displayGlobalAlert: false,
globalAlertMessage: {
isDismissible: false,
messageCopy: "",
messageHeadline: "",
type: "",
},
countdownTimer: () => {},
alertIdCounter: 0,
globalAlertMessages: [],
};
},
props: {
@ -51,18 +45,18 @@ export default {
},
},
methods: {
triggerGlobalAlert(alertEvent, isAutoDismissing) {
clearTimeout(this.countdownTimer);
this.displayGlobalAlert = true;
this.globalAlertMessage = alertEvent;
pushGlobalAlert(alertToPush, isAutoDismissing) {
alertToPush.displayAlert = true;
alertToPush.id = this.alertIdCounter;
this.alertIdCounter++;
if (isAutoDismissing) {
this.countdownTimer = setTimeout(() => {
this.displayGlobalAlert = false;
setTimeout(() => {
alertToPush.displayAlert = false;
// force a re-evaluation of the globalAlertMessages to detect the v-if change
this.globalAlertMessages = this.globalAlertMessages.splice(0);
}, ALERT_DURATION);
}
},
onAlertClose() {
this.displayGlobalAlert = false;
this.globalAlertMessages.push(alertToPush);
},
},
components: {
@ -77,8 +71,8 @@ export default {
);
// If alert event is on the bus, then display the alert
if (alertEvent !== undefined) {
this.displayGlobalAlert = true;
this.globalAlertMessage = alertEvent;
alertEvent.displayAlert = true;
this.globalAlertMessages.push(alertEvent);
}
},
};

1
src/helpers/heritage-integration/order-helper.js
View file

@ -163,6 +163,7 @@ async function saveSessionHelper(
eon: savedSessionInfo.data.eon,
workOrderNumber: savedSessionInfo.data.workOrderNumber,
customerPortalLoginToken: savedSessionInfo.data.customerPortalLoginToken,
lockToken: savedSessionInfo.data.lockToken,
},
false
);

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

@ -16,6 +16,32 @@ export const addableVapsPromoPartNumbers = [
promoPartNumberStrings.WIPER_DISCOUNT_PART_NUMBER,
];
const promoErrorCodes = {
UNKNOWN: "Unknown",
PROMO_NOT_YET_IN_USE: "PromoNotYetInUse",
PROMO_USAGE_COUNT_EXCEEDED: "PromoUsageCountExceeded",
PROMO_EXPIRED: "PromoExpired",
PROMO_DOES_NOT_EXIST: "PromoDoesNotExist",
PROMO_STACKING_NOT_ALLOWED: "PromoStackingNotAllowed",
SIMILAR_PROMO_ALREADY_ON_ORDER: "SimilarPromoAlreadyOnOrder",
INVALID_PROMO_ON_ORDER: "InvalidPromoOnOrder",
PROMO_VALIDATION_ERROR: "PromoValidationError",
NO_SUITABLE_ITEM_FOR_PROMO: "NoSuitableItemForPromo",
};
const stackingPromoErrorCodes = [
promoErrorCodes.PROMO_STACKING_NOT_ALLOWED,
promoErrorCodes.SIMILAR_PROMO_ALREADY_ON_ORDER,
];
const excludeFromInactivePromoErrorCodes = [
promoErrorCodes.UNKNOWN,
promoErrorCodes.PROMO_NOT_YET_IN_USE,
promoErrorCodes.PROMO_USAGE_COUNT_EXCEEDED,
promoErrorCodes.PROMO_EXPIRED,
promoErrorCodes.PROMO_DOES_NOT_EXIST,
];
export const pagesToStripPromoQueryStringFrom = ["quote", "payment-method"];
export function getPromosWithAddableVaps(promoList) {
@ -63,35 +89,36 @@ export function removeVapsPromosFromPromoArray(promoArray) {
return filteredPromoArray;
}
export async function revalidatePromosAndValidateNewPromo(
export async function revalidatePromosAndValidateQueryStringPromo(
newPromo,
pricedLineItems,
pageNameToLog
) {
const hasActivePromos = store.getters.order.lineItems.promos;
const hasHasInactivePromos = store.getters.order.lineItems.inactivePromos;
const hasInactivePromos = store.getters.payment.inactivePromos;
const hasNewPromo = !!newPromo;
const addableVaps = getAddableVapsFromAvailableLineItems(pricedLineItems);
let validatePromoResponse = null;
let revalidatePromoResponse = null;
if (hasActivePromos || hasHasInactivePromos) {
if (
(hasActivePromos && hasActivePromos.length) ||
(hasInactivePromos && hasInactivePromos.length)
) {
revalidatePromoResponse = await baseMixin.methods.dispatchStoreActionWithLogging(
storeActions.REVALIDATE_ORDER_PROMOS_AND_SAVE_SERVER_DATA,
{},
pageNameToLog,
false
);
baseMixin.methods.dispatchStoreAction(
storeActions.SAVE_PROMOS,
revalidatePromoResponse.promoLineItems,
false
);
const revalidationErrorPromoCodes = revalidatePromoResponse.errors.map((x) => x.promoCode);
baseMixin.methods.dispatchStoreAction(
storeActions.SAVE_INACTIVE_PROMOS,
revalidationErrorPromoCodes,
storeActions.SAVE_ACTIVE_AND_OR_INACTIVE_PROMOS,
{
activePromos: revalidatePromoResponse.promoLineItems,
inactivePromos: revalidationErrorPromoCodes,
},
false
);
}
@ -105,11 +132,78 @@ export async function revalidatePromosAndValidateNewPromo(
pageNameToLog,
false
);
if (!excludeFromInactivePromoErrorCodes.includes(validatePromoResponse.errorCode)) {
// Save any valid (applied or not) query string promoCode to inactivePromos
// in order to not lose the query string promoCode if back button is pressed
const inactivePromoCodes = store.getters.payment.inactivePromos ?? [];
if (!inactivePromoCodes.includes(newPromo)) {
inactivePromoCodes.push(newPromo);
baseMixin.methods.dispatchStoreAction(
storeActions.SAVE_ACTIVE_AND_OR_INACTIVE_PROMOS,
{
inactivePromos: inactivePromoCodes,
},
false
);
}
}
}
return { validatePromoResponse, revalidatePromoResponse };
}
export function buildToastMessagesFromRevalidateOrValidatePromoResponse(
promoResponse,
oldActivePromos = [],
oldInactivePromos = []
) {
const alerts = [];
// Revalidate always has an "errors" array
if (promoResponse.errors) {
const oldPromoCodes = oldActivePromos.map((promo) =>
getPromoCodeWithoutBundleIdentifier(promo.promoCode)
);
const activePromoCodesFromResponse = getPromoCodesFromPromoObjectsWithoutDuplicates(
promoResponse.promoLineItems
);
const newlyActivatedPromoCodes = activePromoCodesFromResponse.filter(
(newPromoCode) => !oldPromoCodes.includes(newPromoCode)
);
newlyActivatedPromoCodes.forEach((newlyActivatedPromoCode) => {
alerts.push(createPromoSuccessAlert(newlyActivatedPromoCode));
});
const inactivePromoCodesFromResponse = getPromoCodesFromPromoObjectsWithoutDuplicates(
promoResponse.errors
);
const newlyInactivatedPromos = inactivePromoCodesFromResponse.filter(
(errorPromoCode) => !oldInactivePromos.includes(errorPromoCode)
);
newlyInactivatedPromos.forEach((newlyInactivatedPromo) => {
alerts.push(createPromoErrorAlert(newlyInactivatedPromo));
});
}
// validate response
else {
if (promoResponse.orderPromos) {
const promoCodeToDisplay = getPromoCodeWithoutBundleIdentifier(
promoResponse.orderPromos[0].promoCode
);
alerts.push(createPromoSuccessAlert(promoCodeToDisplay));
} else {
alerts.push(
createPromoErrorAlert(
promoResponse.promoCode,
promoResponse.errorCode,
promoResponse.additionalInfo
)
);
}
}
return alerts;
}
export function getPromosThatMatchLineItemsOnOrder(promos, lineItemsOnOrder) {
const matchingPromos = [];
promos.forEach((promo) => {
@ -152,6 +246,11 @@ export function getVapsThatNeedToBeAddedToSatisfyPromos(
}
}
// bundle promos look like: "bundlePromo/###"" for each promo, this returns "bundlePromo" only
export function getPromoCodeWithoutBundleIdentifier(promoCode) {
return promoCode.split("/")[0];
}
export function shouldStripPromoQueryString(fmgPageQueryValue) {
return pagesToStripPromoQueryStringFrom.includes(fmgPageQueryValue);
}
@ -163,3 +262,42 @@ function findLineItemsWithPartType(typeToFind, itemsToSearch) {
);
return partTypeMatches;
}
// returns a list of promo codes (string) only without duplicates or bundle identifiers
// <promos> parameter must be an array of objects with a 'promoCode' field
function getPromoCodesFromPromoObjectsWithoutDuplicates(promos) {
const promoCodes = [];
promos.forEach((promo) => {
const promoCodeToDisplay = getPromoCodeWithoutBundleIdentifier(promo.promoCode);
if (!promoCodes.includes(promoCodeToDisplay)) {
promoCodes.push(promoCodeToDisplay);
}
});
return promoCodes;
}
function createPromoSuccessAlert(promoCode) {
return {
messageHeadline: "Promo applied!",
messageCopy: `Promo "${promoCode.toUpperCase()}" was successfully applied to your cart.`,
type: "alert-success",
isDismissible: true,
shouldAutoFade: true,
};
}
function createPromoErrorAlert(promoCode, errorCode = null, additionalInfo) {
const alert = {
messageHeadline: "Promo error",
type: "alert-danger",
shouldAutoFade: false,
isDismissible: true,
};
if (stackingPromoErrorCodes.includes(errorCode)) {
alert.messageCopy = `Sorry, promo code "${promoCode.toUpperCase()}" cannot be combined with "${additionalInfo[0].toUpperCase()}"`;
} else {
alert.messageCopy = `Sorry, promo code "${promoCode.toUpperCase()}" is not valid`;
}
return alert;
}

2
src/layouts/confirmation/add-to-calendar/add-to-calendar.spec.js
View file

@ -12,7 +12,7 @@ beforeEach(() => {
jest.restoreAllMocks();
jest.clearAllMocks();
store.getters = {
order: {
submittedOrder: {
schedule: {
date: "2019-01-01",
startTime: "09:00",

8
src/layouts/confirmation/add-to-calendar/add-to-calendar.vue
View file

@ -110,11 +110,11 @@ export default {
return this.getCmsContent(this.sameDayDropOffWidgetName, "BodyText");
},
UniqueId() {
return store.getters.order.referralNumber?.toString();
return store.getters.submittedOrder.referralNumber?.toString();
},
ServiceType() {
const isRepair = store.getters.order.damage.isRepair;
const funnelHasRecalibrationPart = store.getters.funnelHasRecalibrationPart;
const isRepair = store.getters.submittedOrder.damage.isRepair;
const funnelHasRecalibrationPart = store.getters.isRecalibrationOnSubmittedOrder;
if (!isRepair) {
if (funnelHasRecalibrationPart) {
return serviceType.REPLACEMENT_AND_RECALIBRATION;
@ -125,7 +125,7 @@ export default {
return serviceType.REPAIR;
},
RouteCode() {
return store.getters.order.schedule.routeCode;
return store.getters.submittedOrder.schedule.routeCode;
},
Appointment() {
var subject = "";

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

@ -14,6 +14,7 @@
<div>
<vehicleBanner
cmsWidgetName="VehicleBannerWidget"
:displayVehicleImage="vehicleBannerImageUrl"
:displayGenericVehicleImage="false" />
</div>
<div class="scheduleText">
@ -205,6 +206,9 @@ export default {
return `at ${get12HourTimeFormat(this.ScheduleStartTime)}`;
}
},
vehicleBannerImageUrl() {
return store.getters.submittedOrder?.vehicle.imageUrl;
},
},
methods: {
arePagePrerequisitesValid() {
@ -238,7 +242,11 @@ export default {
const schedule = store.getters.order.schedule;
const scheduleReqs = !!(schedule.date && schedule.startTime && schedule.endTime);
return serviceLocationReqs && scheduleReqs;
// Customer
const customer = store.getters.order.customer;
const customerReqs = !!customer.emailAddress;
return serviceLocationReqs && scheduleReqs && customerReqs;
},
forwardButtonAction() {
window.location.assign("//www.safelite.com/");

86
src/layouts/payment-method/add-vaps-modal-buttons/add-vaps-modal-buttons.vue
View file

@ -76,13 +76,12 @@ export default {
name: "add-vaps-modal-buttons",
props: {
vapsTilesCmsName: String,
availableLineItems: Object,
availableVaps: Object,
modelValue: Object,
},
data() {
return {
addVapsButton: addVapsButton,
wipersOffered: null,
isModalOpened: false,
selectedWipers: this.getSelectedWipers(),
};
@ -206,7 +205,7 @@ export default {
return modelValue;
},
rainDefenseModal() {
const lineItem = this.availableLineItems.find((item) => {
const lineItem = this.availableVaps.find((item) => {
return item.partType === partTypeStrings.RAIN_DEFENSE;
});
if (lineItem)
@ -217,10 +216,10 @@ export default {
},
wipersModal() {
// create a single wiper item for modal
const frontWiperLineItems = this.availableLineItems.filter((item) => {
const frontWiperLineItems = this.availableVaps.filter((item) => {
return item.partType.includes(partTypeStrings.FRONT_WIPER);
});
const rearWiperLineItems = this.availableLineItems.filter((item) => {
const rearWiperLineItems = this.availableVaps.filter((item) => {
return item.partType.includes(partTypeStrings.REAR_WIPER);
});
let wipersModal;
@ -249,20 +248,38 @@ export default {
answersCmsData() {
return this.getCmsContent(this.vapsTilesCmsName, "Answers");
},
rainDefenseInCart() {
return this.currentCartItems.vaps?.some((vap) => {
return vap?.partType === partTypeStrings.RAIN_DEFENSE;
});
},
frontWipersInCart() {
return this.currentCartItems.vaps?.some((vap) => {
return vap?.partType?.includes(partTypeStrings.FRONT_WIPER);
});
},
rearWipersInCart() {
return this.currentCartItems.vaps?.some((vap) => {
return vap?.partType?.includes(partTypeStrings.REAR_WIPER);
});
},
wipersOffered() {
let result;
if (!this.frontWipersInCart) {
if (!this.rearWipersInCart && this.wipersModal?.rearWiperLineItems.length > 0) {
result = wipersOfferedStrings.BOTH;
} else {
result = wipersOfferedStrings.FRONT;
}
} else if (!this.rearWipersInCart && this.wipersModal?.rearWiperLineItems.length > 0) {
result = wipersOfferedStrings.REAR;
}
return result;
},
buttonsToDisplay() {
const buttons = [];
if (!this.answersCmsData) return buttons;
const rainDefenseInCart = this.currentCartItems.vaps?.some((vap) => {
return vap?.partType === partTypeStrings.RAIN_DEFENSE;
});
const frontWipersInCart = this.currentCartItems.vaps?.some((vap) => {
return vap?.partType?.includes(partTypeStrings.FRONT_WIPER);
});
const rearWipersInCart = this.currentCartItems.vaps?.some((vap) => {
return vap?.partType?.includes(partTypeStrings.REAR_WIPER);
});
const getAnswer = (name, answers) => {
const answerIndex = answers.findIndex((answer) => {
return answer.Name === name;
@ -270,7 +287,7 @@ export default {
return answers[answerIndex];
};
if (!rainDefenseInCart) {
if (!this.rainDefenseInCart) {
// NO RAIN DEFENSE IN CART; SHOW RAIN DEFENSE BUTTON
const modalData = getAnswer("RainDefenseModal", this.answersCmsData);
modalData.SubText = "+$" + this.rainDefenseModal?.listPrice;
@ -278,27 +295,26 @@ export default {
}
const modalData = getAnswer("WipersModal", this.answersCmsData);
if (!frontWipersInCart) {
if (!rearWipersInCart && this.wipersModal?.rearWiperLineItems.length > 0) {
// NO REAR WIPERS or FRONT WIPERS IN CART; SHOW COMBO BUTTON
const prices = [
this.wipersModal?.totalFrontPrice,
this.wipersModal?.totalRearPrice,
];
prices.sort((a, b) => a - b);
modalData.SubText = "+$" + prices[0] + " - $" + prices[prices.length - 1];
this.updateWipersOffered(wipersOfferedStrings.BOTH);
buttons.push(modalData);
} else {
// NO FRONT WIPERS IN CART; SHOW ONLY FRONT WIPERS BUTTON
modalData.SubText = "+$" + this.wipersModal?.totalFrontPrice;
this.updateWipersOffered(wipersOfferedStrings.FRONT);
buttons.push(modalData);
}
} else if (!rearWipersInCart && this.wipersModal?.rearWiperLineItems.length > 0) {
if (this.wipersOffered === wipersOfferedStrings.BOTH) {
// NO REAR WIPERS or FRONT WIPERS IN CART; SHOW COMBO BUTTON
const prices = [
this.wipersModal?.totalFrontPrice,
this.wipersModal?.totalRearPrice,
];
prices.sort((a, b) => a - b);
modalData.SubText = "+$" + prices[0] + " - $" + prices[prices.length - 1];
buttons.push(modalData);
}
if (this.wipersOffered === wipersOfferedStrings.FRONT) {
// NO FRONT WIPERS IN CART; SHOW ONLY FRONT WIPERS BUTTON
modalData.SubText = "+$" + this.wipersModal?.totalFrontPrice;
buttons.push(modalData);
}
if (this.wipersOffered === wipersOfferedStrings.REAR) {
// NO REAR WIPERS IN CART; SHOW ONLY REAR WIPERS BUTTON
modalData.SubText = "+$" + this.wipersModal?.totalRearPrice;
this.updateWipersOffered(wipersOfferedStrings.REAR);
buttons.push(modalData);
}

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

@ -23,11 +23,10 @@
<cart
:damage="damageInfo"
:availableLineItems="availableLineItems"
:availableVaps="availableVaps"
:allowItemRemoval="true"
v-model="lineItems"
servicePackageOptionsCmsName="ServicePackageTitle"
@cart-remove="cartRemove"
recyclingModalCmsWidgetName="RecycleModal" />
<hr class="my-5" />
@ -51,7 +50,7 @@
<add-vaps-modal-buttons
v-model="lineItems"
:availableLineItems="availableLineItems"
:availableVaps="availableVaps"
vapsTilesCmsName="VapsProductTiles"
@added-to-cart="showAlert" />
@ -95,19 +94,20 @@ import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
import { paymentMethods } from "@/constants/payment-method-constants";
import { experimentSettings } from "@/constants/experiments";
import {
revalidatePromosAndValidateNewPromo,
getPromosWithAddableVaps,
revalidatePromosAndValidateQueryStringPromo,
buildToastMessagesFromRevalidateOrValidatePromoResponse,
getVapsThatNeedToBeAddedToSatisfyPromos,
} from "@/helpers/promotions-helper";
import { queryStrings } from "@/constants/query-strings";
import { getQuerystringParameter } from "@/helpers/querystring-helper";
import { deepClone } from "@/helpers/object-helper";
import { Form } from "vee-validate";
import { defineRule } from "vee-validate";
import { required } from "@/helpers/validation-rules";
import { errorMessages } from "@/constants/error-messages";
import { AppointmentTypeStrings } from "@/constants/schedule-constants";
import { mapTaxedAvailableLineItemsToStoreFormat } from "../../store";
import { mapTaxedLineItemsToStoreFormat } from "../../store";
defineRule("option-required", required(errorMessages.OPTION_REQUIRED));
@ -129,12 +129,6 @@ export default {
"payment-method"
);
const supportingItemsPromise = baseMixin.methods.dispatchStoreActionWithLogging(
storeActions.GET_SUPPORTING_ITEMS,
null,
"payment-method"
);
const promiseResultMap = [
{
resultKey: "cmsContent",
@ -148,50 +142,49 @@ export default {
resultKey: "rainDefense",
promise: rainDefensePromise,
},
{
resultKey: "supportingItems",
promise: supportingItemsPromise,
},
];
const resultMap = await settleAllPromises(promiseResultMap);
const lineItemsFromStore = deepClone(store.getters.order.lineItems);
const glassParts = lineItemsFromStore.glassParts ?? [];
const supportingItems = lineItemsFromStore.supportingItems ?? [];
const glassParts = store.getters.order.lineItems.glassParts ?? [];
let availableLineItems = [
const lineItemsToTax = [
resultMap.rainDefense,
...resultMap.supportingItems,
...supportingItems,
...resultMap.wipers,
...glassParts,
];
const availableVaps = [resultMap.rainDefense, ...resultMap.wipers];
const lineItemsFromStore = store.getters.order.lineItems;
await baseMixin.methods.dispatchStoreActionWithLogging(
const pricedLineItemsToTax = await baseMixin.methods.dispatchStoreActionWithLogging(
storeActions.PRICE_ORDER_ITEMS_AND_SAVE_SERVER_DATA,
{
availableLineItems: availableLineItems,
availableLineItems: lineItemsToTax,
},
"payment-method",
false
);
// Promo logic
const promoCodeFromQueryString = getQuerystringParameter(queryStrings.PROMO);
// Populate the previous state of promos for toast message usage in "next()"
const oldActivePromos = store.getters.lineItems.promos?.slice(0);
const oldInactivePromos = store.getters.order.payment.inactivePromos?.slice(0);
const promoCodeFromQueryString = getQuerystringParameter(queryStrings.PROMO);
const { validatePromoResponse, revalidatePromoResponse } =
await revalidatePromosAndValidateNewPromo(
await revalidatePromosAndValidateQueryStringPromo(
promoCodeFromQueryString,
availableLineItems,
pricedLineItemsToTax,
"payment-method"
);
const newValidatedPromos = validatePromoResponse?.orderPromos ?? [];
availableLineItems.push(...newValidatedPromos);
pricedLineItemsToTax.push(...newValidatedPromos);
// End of promo logic
const taxedAvailableLineItems = await baseMixin.methods.dispatchStoreActionWithLogging(
const taxedLineItems = await baseMixin.methods.dispatchStoreActionWithLogging(
storeActions.TAX_ORDER_ITEMS_AND_SAVE_SERVER_DATA,
{
billToAccountNumber: "87291",
@ -200,41 +193,60 @@ export default {
serviceLocationCity: store.getters.order.serviceLocation.city,
serviceLocationState: store.getters.order.serviceLocation.state,
serviceLocationZipCode: store.getters.order.serviceLocation.zipCode,
pricedAvailableLineItems: availableLineItems,
pricedLineItems: pricedLineItemsToTax,
},
"payment-method",
false
);
// Match all available line items to the line items as they are in the store
// Match all line items to the line items as they are in the store
// and rebuild the original structure.
const lineItems = mapTaxedAvailableLineItemsToStoreFormat(
availableLineItems,
lineItemsFromStore
);
const lineItems = mapTaxedLineItemsToStoreFormat(taxedLineItems, lineItemsFromStore);
const taxedVaps = mapTaxedLineItemsToStoreFormat(taxedLineItems, availableVaps);
// Add items that were not in the store yet but added via query string promo validation
lineItems.promos = lineItems.promos ?? [];
lineItems.promos.push(...newValidatedPromos);
const vapsToAddToCart = getVapsThatNeedToBeAddedToSatisfyPromos(
newValidatedPromos,
availableLineItems,
taxedVaps,
lineItems
);
lineItems.vaps = lineItems.vaps ?? [];
lineItems.vaps.push(...vapsToAddToCart);
// Call the "next" function to complete the transition to this page.
next((vm) => {
vm.setCmsContent(resultMap.cmsContent);
vm.availableLineItems = taxedAvailableLineItems;
vm.availableVaps = taxedVaps;
vm.lineItems = lineItems;
vm.updateFooterButtonText(vm.customCtaCopy);
if (revalidatePromoResponse) {
const revalidateAlerts = buildToastMessagesFromRevalidateOrValidatePromoResponse(
revalidatePromoResponse,
oldActivePromos,
oldInactivePromos
);
revalidateAlerts.forEach((alert) => {
vm.$refs.funnelHeader.pushGlobalAlert(alert, alert.shouldAutoFade);
});
}
if (validatePromoResponse) {
const validateAlerts =
buildToastMessagesFromRevalidateOrValidatePromoResponse(validatePromoResponse);
vm.$refs.funnelHeader.pushGlobalAlert(
validateAlerts[0],
validateAlerts[0].shouldAutoFade
);
}
});
},
data() {
return {
lineItems: [],
availableLineItems: [],
availableVaps: [],
paymentMethodInternalModel: this.getPaymentMethodFromStore(),
inactivePromos: this.getInactivePromosFromStore(),
};
@ -274,7 +286,7 @@ export default {
const scheduleReqs = !!(
schedule.date &&
schedule.startTime &&
(!isMobile || schedule.endTime) &&
schedule.endTime &&
schedule.jobMaxMinutes &&
schedule.jobMinMinutes
);
@ -322,6 +334,14 @@ export default {
"payment-method",
false
);
const revalidateAlerts = buildToastMessagesFromRevalidateOrValidatePromoResponse(
revalidatePromoResponse,
this.lineItems.promos,
this.inactivePromos
);
revalidateAlerts.forEach((alert) => {
this.$refs.funnelHeader.pushGlobalAlert(alert, alert.shouldAutoFade);
});
this.lineItems.promos = revalidatePromoResponse.promoLineItems;
this.inactivePromos = revalidatePromoResponse.errors.map((x) => x.promoCode);
@ -349,10 +369,12 @@ export default {
false
);
await this.dispatchStoreAction(storeActions.SAVE_VAPS, this.lineItems.vaps, false);
await this.dispatchStoreAction(storeActions.SAVE_PROMOS, this.lineItems.promos, false);
await this.dispatchStoreAction(
storeActions.SAVE_INACTIVE_PROMOS,
this.inactivePromos,
this.dispatchStoreAction(
storeActions.SAVE_ACTIVE_AND_OR_INACTIVE_PROMOS,
{
activePromos: this.lineItems.promos,
inactivePromos: this.inactivePromos,
},
false
);
@ -394,7 +416,7 @@ export default {
);
},
showAlert(alert) {
this.$refs.funnelHeader.triggerGlobalAlert(alert, true);
this.$refs.funnelHeader.pushGlobalAlert(alert, true);
},
},
computed: {
@ -417,10 +439,11 @@ export default {
}
},
isPiaDisabled() {
const piaExperience =
this.getSettingValue(experimentSettings.PIA_EXPERIENCE) === "PIA Optional";
const piaExperience = this.getSettingValue(experimentSettings.PIA_EXPERIENCE);
return !piaExperience;
const isEnabled = piaExperience === "PIA Optional" || piaExperience === "PIA Required";
return !isEnabled;
},
paymentMethod() {
if (this.isPiaDisabled) {

1
src/layouts/payment-pia-return/payment-pia-return.vue
View file

@ -131,6 +131,7 @@ export default {
}
this.$refs.loadingModal.isModalVisible = false;
await baseMixin.methods.dispatchStoreAction(storeActions.CREATE_SUBMITTED_ORDER);
this.$router.navigateWithoutSaving(this.navigationScenarios.PIA_SUCCESS, this.$route);
},
forwardButtonAction() {

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

@ -21,6 +21,19 @@
scrolling="no">
</iframe>
</div>
<hr />
<cart
:damage="damageInfo"
:availableLineItems="availableLineItems"
:allowItemRemoval="false"
v-model="lineItems"
servicePackageOptionsCmsName="ServicePackageTitle"
recyclingModalCmsWidgetName="RecycleModal" />
<hr />
<paymentSwitch
cmsWidgetName="PaymentMethodWidget"
:paymentType="paymentType"
@ -163,7 +176,7 @@
import funnelHeader from "@/fmg-components/funnel-header/funnel-header";
import navbar from "@/fmg-components/nav-bar/nav-bar";
import loadingModal from "@/fmg-components/loading-modal/loading-modal.vue";
import cart from "@/fmg-components/cart/cart";
import paymentSwitch from "./payment-switch/payment-switch.vue";
import { storeActions } from "@/constants/store-actions";
@ -175,6 +188,15 @@ import { applicationConfig } from "@/constants/application-config";
import { paymentMethods } from "@/constants/payment-method-constants";
import { AppointmentTypeStrings } from "@/constants/schedule-constants";
import baseMixin from "@/mixins/base-mixin.js";
import { mapTaxedLineItemsToStoreFormat } from "../../store";
import {
revalidatePromosAndValidateQueryStringPromo,
getAddableVapsFromAvailableLineItems,
getVapsThatNeedToBeAddedToSatisfyPromos,
} from "@/helpers/promotions-helper";
import { queryStrings } from "@/constants/query-strings";
import { getQuerystringParameter } from "@/helpers/querystring-helper";
import { deepClone } from "@/helpers/object-helper";
import iframeResize from "../../../node_modules/iframe-resizer/js/iframeResizer.js";
@ -207,6 +229,8 @@ export default {
displayAmount: this.getDisplayAmountDue(),
piaLineItems: this.getPiaLineItems(),
paypalPayment: this.isPaypal(),
lineItems: [],
availableVaps: [],
};
},
directives: {
@ -231,6 +255,24 @@ export default {
"payment"
);
const wipersPromise = baseMixin.methods.dispatchStoreActionWithLogging(
storeActions.GET_WIPERS,
null,
"payment"
);
const rainDefensePromise = baseMixin.methods.dispatchStoreActionWithLogging(
storeActions.GET_RAIN_DEFENSE,
null,
"payment"
);
const supportingItemsPromise = baseMixin.methods.dispatchStoreActionWithLogging(
storeActions.GET_SUPPORTING_ITEMS,
null,
"payment"
);
// TODO: Data fetching Promise declarations
const promiseResultMap = [
@ -242,14 +284,94 @@ export default {
resultKey: "signature",
promise: signaturePromise,
},
{
resultKey: "wipers",
promise: wipersPromise,
},
{
resultKey: "rainDefense",
promise: rainDefensePromise,
},
{
resultKey: "supportingItems",
promise: supportingItemsPromise,
},
];
const resultMap = await settleAllPromises(promiseResultMap);
const lineItemsFromStore = deepClone(store.getters.order.lineItems);
const glassParts = lineItemsFromStore.glassParts ?? [];
const supportingItems = lineItemsFromStore.supportingItems ?? [];
const lineItemsToTax = [
resultMap.rainDefense,
...supportingItems,
...resultMap.wipers,
...glassParts,
];
const availableVaps = [resultMap.rainDefense, ...resultMap.wipers];
const pricedLineItemsToTax = await baseMixin.methods.dispatchStoreActionWithLogging(
storeActions.PRICE_ORDER_ITEMS_AND_SAVE_SERVER_DATA,
{
availableLineItems: lineItemsToTax,
},
"payment",
false
);
// Promo logic
const promoCodeFromQueryString = getQuerystringParameter(queryStrings.PROMO);
const { validatePromoResponse, revalidatePromoResponse } =
await revalidatePromosAndValidateQueryStringPromo(
promoCodeFromQueryString,
pricedLineItemsToTax,
"payment"
);
const newValidatedPromos = validatePromoResponse?.orderPromos ?? [];
pricedLineItemsToTax.push(...newValidatedPromos);
// End of promo logic
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",
false
);
// Match all line items to the line items as they are in the store
// and rebuild the original structure.
const lineItems = mapTaxedLineItemsToStoreFormat(taxedLineItems, lineItemsFromStore);
const taxedVaps = mapTaxedLineItemsToStoreFormat(taxedLineItems, availableVaps);
// Add items that were not in the store yet but added via query string promo validation
lineItems.promos = lineItems.promos ?? [];
lineItems.promos.push(...newValidatedPromos);
const vapsToAddToCart = getVapsThatNeedToBeAddedToSatisfyPromos(
newValidatedPromos,
taxedVaps,
lineItems
);
lineItems.vaps.push(...vapsToAddToCart);
// Call the "next" function to complete the transition to this page.
next(async (vm) => {
vm.setCmsContent(resultMap.cmsContent);
vm.fetchSignatureInfo(resultMap.signature);
vm.availableVaps = taxedVaps;
vm.lineItems = lineItems;
});
},
computed: {
@ -276,6 +398,9 @@ export default {
switchPaymentText() {
return this.getCmsContent("PaymentMethodWidget", "QuestionText");
},
damageInfo() {
return this.$store.getters.damage;
},
},
methods: {
arePagePrerequisitesValid() {
@ -312,7 +437,7 @@ export default {
const scheduleReqs = !!(
schedule.date &&
schedule.startTime &&
(!isMobile || schedule.endTime) &&
schedule.endTime &&
schedule.jobMaxMinutes &&
schedule.jobMinMinutes
);
@ -466,6 +591,7 @@ export default {
funnelHeader,
navbar,
loadingModal,
cart,
paymentSwitch,
},
};
@ -474,7 +600,7 @@ export default {
<style lang="scss">
.hop-iframe {
position: relative;
min-height: 1120px;
min-height: 650px;
width: 100%;
border: 0 none;
}

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

@ -22,7 +22,7 @@ jest.mock("@/helpers/heritage-integration/navigation-helper", () => ({
}));
jest.mock("@/helpers/promotions-helper", () => ({
revalidatePromosAndValidateNewPromo: jest.fn(() => {
revalidatePromosAndValidateQueryStringPromo: jest.fn(() => {
return { validatePromoResponse: null, revalidatePromoResponse: null };
}),
}));
@ -258,10 +258,14 @@ describe("quote.vue", () => {
test("should have non-null values for necessary data members after 'beforeRouteEnter'", async () => {
//Arrange
store.getters = {
lineItems: {
glassParts: ["item", "item2"],
},
order: {
lineItems: {
glassParts: ["item", "item2"],
},
payment: {},
},
};
const { wrapper } = setupMocks({});
@ -286,6 +290,9 @@ describe("quote.vue", () => {
test("should default to insurance if query param 'isInsurance' is true", async () => {
//Arrange
store.getters = {
lineItems: {
glassParts: ["item", "item2"],
},
order: {
lineItems: {
glassParts: ["item", "item2"],
@ -315,6 +322,9 @@ describe("quote.vue", () => {
test("should default to cash if query param 'isInsurance' is false", async () => {
//Arrange
store.getters = {
lineItems: {
glassParts: ["item", "item2"],
},
order: {
lineItems: {
glassParts: ["item", "item2"],
@ -345,6 +355,9 @@ describe("quote.vue", () => {
//Arrange
store.getters = {
lineItems: {
glassParts: ["item", "item2"],
},
order: {
lineItems: {
glassParts: ["item", "item2"],
@ -375,6 +388,9 @@ describe("quote.vue", () => {
test("should default to cash if cash selection is saved to store", async () => {
//Arrange
store.getters = {
lineItems: {
glassParts: ["item", "item2"],
},
order: {
lineItems: {
glassParts: ["item", "item2"],
@ -406,6 +422,9 @@ describe("quote.vue", () => {
// Also needs no query parameter or previous selection in store to be present
//Arrange
store.getters = {
lineItems: {
glassParts: ["item", "item2"],
},
order: {
lineItems: {
glassParts: ["item", "item2"],
@ -439,6 +458,9 @@ describe("quote.vue", () => {
//Arrange
store.getters = {
lineItems: {
glassParts: ["item", "item2"],
},
order: {
lineItems: {
glassParts: ["item", "item2"],
@ -467,10 +489,13 @@ describe("quote.vue", () => {
//Assert
expect(wrapper.vm.isInsuranceSelected).toBe(true);
});
test("Should default to insurence if user Service zip is from certain States", async () => {
test("Should default to insurance if user Service zip is from certain States", async () => {
//Arrange
store.getters = {
lineItems: {
glassParts: ["item", "item2"],
},
order: {
lineItems: {
glassParts: ["item", "item2"],

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

@ -80,7 +80,10 @@ import { Form, defineRule } from "vee-validate";
import { navigateToHeritageFunnel } from "@/helpers/heritage-integration/navigation-helper";
import { applicationConfig } from "@/constants/application-config";
import { payWithInsuranceStates } from "@/constants/pay-with-insurance-states";
import { revalidatePromosAndValidateNewPromo } from "@/helpers/promotions-helper";
import {
revalidatePromosAndValidateQueryStringPromo,
buildToastMessagesFromRevalidateOrValidatePromoResponse,
} from "@/helpers/promotions-helper";
import { queryStrings } from "@/constants/query-strings";
import { getQuerystringParameter } from "@/helpers/querystring-helper";
@ -151,10 +154,14 @@ export default {
);
// Promo logic
// Populate the previous state of promos for toast message usage in "next()"
const oldActivePromos = store.getters.lineItems.promos?.slice(0);
const oldInactivePromos = store.getters.order.payment.inactivePromos?.slice(0);
const promoCodeFromQueryString = getQuerystringParameter(queryStrings.PROMO);
const { validatePromoResponse, revalidatePromoResponse } =
await revalidatePromosAndValidateNewPromo(
await revalidatePromosAndValidateQueryStringPromo(
promoCodeFromQueryString,
pricingResults,
"quote"
@ -169,6 +176,25 @@ export default {
vm.availableLineItems = pricingResults;
vm.isInsuranceSelected = vm.getDefaultIsInsuranceSelectedValue(vm.availableLineItems);
vm.newValidatedPromos = validatePromoResponse?.orderPromos;
if (revalidatePromoResponse) {
const revalidateAlerts = buildToastMessagesFromRevalidateOrValidatePromoResponse(
revalidatePromoResponse,
oldActivePromos,
oldInactivePromos
);
revalidateAlerts.forEach((alert) => {
vm.$refs.funnelHeader.pushGlobalAlert(alert, alert.shouldAutoFade);
});
}
if (validatePromoResponse) {
const validateAlerts =
buildToastMessagesFromRevalidateOrValidatePromoResponse(validatePromoResponse);
vm.$refs.funnelHeader.pushGlobalAlert(
validateAlerts[0],
validateAlerts[0].shouldAutoFade
);
}
});
},
data() {
@ -265,7 +291,11 @@ export default {
}
this.dispatchStoreAction(this.storeActions.SAVE_VAPS, this.selectedVaps, false);
this.dispatchStoreAction(this.storeActions.SAVE_PROMOS, this.allActivePromos, false);
this.dispatchStoreAction(
this.storeActions.SAVE_ACTIVE_AND_OR_INACTIVE_PROMOS,
{ activePromos: this.allActivePromos },
false
);
const payment = this.$store.getters.payment;
if (payment.isInsurance) {

2
src/layouts/review/review.vue
View file

@ -207,7 +207,7 @@ export default {
const scheduleReqs = !!(
schedule.date &&
schedule.startTime &&
(!isMobile || schedule.endTime) &&
schedule.endTime &&
schedule.jobMaxMinutes &&
schedule.jobMinMinutes
);

6
src/layouts/service-location/service-location.spec.js
View file

@ -286,6 +286,7 @@ describe("service-location.vue", () => {
const newServiceZipCodeQuestion = {
zipCode: "61606",
state: "IL",
zipCodeCtu: "01526",
};
const serviceZipCodeComponent = wrapper.findComponent({
@ -316,6 +317,7 @@ describe("service-location.vue", () => {
const newServiceZipCodeQuestion = {
zipCode: "61606",
state: "IL",
zipCodeCtu: "01526",
};
const mobileLocationQuestions = {
@ -365,6 +367,7 @@ describe("service-location.vue", () => {
const newServiceZipCodeQuestion = {
zipCode: "61606",
state: "IL",
zipCodeCtu: "01526",
};
wrapper.vm.selectedAppointmentType = "Inshop";
@ -395,6 +398,7 @@ describe("service-location.vue", () => {
const newServiceZipCodeQuestion = {
zipCode: "45433",
state: "OH",
zipCodeCtu: "01526",
};
// Act
@ -511,11 +515,13 @@ describe("service-location.vue", () => {
wrapper.vm.serviceZipCodeQuestion = {
zipCode: "61606",
state: "IL",
zipCodeCtu: "01526",
};
const newServiceZipCodeInfo = {
state: "OH",
zipCode: "43081",
zipCodeCtu: "01526",
};
// Act

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

@ -245,6 +245,7 @@ export default {
return {
state: this.state,
zipCode: this.zipCode,
zipCodeCtu: this.zipCodeCtu,
};
},
set: function (newValue) {
@ -256,6 +257,7 @@ export default {
this.state = newValue.state;
this.zipCode = newValue.zipCode;
this.zipCodeCtu = newValue.zipCodeCtu;
this.$nextTick();
},

9
src/layouts/service-location/service-zip-modal-question/service-zip-modal-question.spec.js
View file

@ -113,6 +113,7 @@ describe("service-zip-modal-question.vue", () => {
let serviceZipCodeQuestion = {
state: "",
zipCode: "",
zipCodeCtu: "",
};
// Arrange
@ -135,6 +136,7 @@ describe("service-zip-modal-question.vue", () => {
let serviceZipCodeQuestion = {
state: "OH",
zipCode: "43235",
zipCodeCtu: "01820",
};
const wrapper = mount(serviceZipModalQuestion, {
@ -156,6 +158,7 @@ describe("service-zip-modal-question.vue", () => {
let serviceZipCodeQuestion = {
state: "IL",
zipCode: "61606",
zipCodeCtu: "01526",
};
const zip = "43235";
@ -176,7 +179,7 @@ describe("service-zip-modal-question.vue", () => {
await wrapper.vm.setZipCode();
let expectedEmit = [[{ state: "OH", zipCode: "43235" }]];
let expectedEmit = [[{ state: "OH", zipCode: "43235", zipCodeCtu: "01820" }]];
// Assert
expect(wrapper.emitted("update:modelValue")).toEqual(expectedEmit);
@ -187,6 +190,7 @@ describe("service-zip-modal-question.vue", () => {
let serviceZipCodeQuestion = {
state: "IL",
zipCode: "61606",
zipCodeCtu: "01526",
};
const zip = "";
@ -214,6 +218,7 @@ describe("service-zip-modal-question.vue", () => {
let serviceZipCodeQuestion = {
state: "IL",
zipCode: "61606",
zipCodeCtu: "01526",
};
const zip = "11111";
@ -241,6 +246,7 @@ describe("service-zip-modal-question.vue", () => {
let serviceZipCodeQuestion = {
state: "IL",
zipCode: "61606",
zipCodeCtu: "01526",
};
const zip = "";
@ -269,6 +275,7 @@ describe("service-zip-modal-question.vue", () => {
let serviceZipCodeQuestion = {
state: "IL",
zipCode: "61606",
zipCodeCtu: "01526",
};
const zip = "123";

1
src/layouts/service-location/service-zip-modal-question/service-zip-modal-question.vue
View file

@ -141,6 +141,7 @@ export default {
this.resetModalButtonStyle();
} else {
this.internalModel.state = zipCodeData.state;
this.internalModel.zipCodeCtu = zipCodeData.zipCodeCtu;
// retrieve mobile fee part
const serviceZipCode = this.internalModel.zipCode;

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

@ -95,7 +95,7 @@ export default {
filterOutFees(lineItems) {
const filteredLineItems = lineItems.filter((item) => {
return (
!item.partType.includes("FEE") ||
(!item.partType.includes("FEE") && !item.partType.includes("EARLY BIRD")) ||
(item.partType === "REPAIR FEE" && item.partNumber != "SUPPLIES-REPAIR")
);
});

11
src/router/index.js
View file

@ -169,7 +169,16 @@ router.beforeEach(async (to, from, next) => {
showFmgLoadingModal(true);
}
next();
const toQueryPage = to.query?.fmgPage;
const notToPIAReturn = toQueryPage != "payment-pia-return";
const isInIframe = window !== window.top;
if (isInIframe && notToPIAReturn) {
const newUrl = `${window.top.location.origin}${to.href}`;
window.top.location.href = newUrl;
} else {
next();
}
});
router.afterEach(async (to, from) => {

72
src/store/index.js
View file

@ -23,7 +23,7 @@ import {
getDisplayTextForDurationLength,
} from "@/layouts/schedule/helpers/schedule-helper";
import { paymentMethods } from "@/constants/payment-method-constants";
import { getPromoCodeWithoutBundleIdentifier } from "@/helpers/promotions-helper";
import { getDateDifferenceInDays } from "@/helpers/date-helper";
// Export State
const getDefaultState = () => {
@ -127,6 +127,7 @@ const getDefaultState = () => {
eon: null,
workOrderNumber: null,
customerPortalLoginToken: null,
lockToken: null,
},
applicationUser: {
eventBus: [],
@ -249,6 +250,9 @@ export const mutations = {
updateCustomerPortalLoginToken(state, customerPortalLoginToken) {
state.order.customerPortalLoginToken = customerPortalLoginToken;
},
updateLockToken(state, lockToken) {
state.order.lockToken = lockToken;
},
updateCCToken(state, ccToken) {
state.order.payment.ccToken.subscriptionId = ccToken.subscriptionId;
state.order.payment.ccToken.expMonth = ccToken.expMonth;
@ -591,6 +595,15 @@ export const getters = {
isRecalibrationOnOrder: (state) => {
return getHasRecalibrationPart(state);
},
isRecalibrationOnSubmittedOrder: (state) => {
if (window.sessionStorage.getItem("submittedOrder") !== null) {
return getHasRecalibrationPart({
order: JSON.parse(window.sessionStorage.getItem("submittedOrder")),
});
}
return false;
},
areRearWipersOnOrder: (state) => {
return !!state.order.lineItems.vaps?.some(
(vap) => vap.partType.toUpperCase() === partTypeStrings.REAR_WIPER.toUpperCase()
@ -1022,6 +1035,7 @@ export const actions = {
crmCustomerId,
workOrderNumber,
customerPortalLoginToken,
lockToken,
}
) {
context.commit(storeMutations.UPDATE_REFERRAL_NUMBER, referralNumber);
@ -1033,6 +1047,7 @@ export const actions = {
context.commit(storeMutations.UPDATE_SAVED_SESSION_ID, savedSessionId);
context.commit(storeMutations.UPDATE_CRM_CUSTOMER_ID, crmCustomerId);
context.commit(storeMutations.WORK_ORDER_NUMBER, workOrderNumber);
context.commit(storeMutations.LOCK_TOKEN, lockToken);
context.commit(storeMutations.Customer_Portal_Login_Token, customerPortalLoginToken);
},
@ -1707,6 +1722,7 @@ export const actions = {
referralSequenceNumber: order.referralSequenceNumber,
eon: order.eon,
createDeleteStatusWorkOrderForPia: createDeleteStatusWorkOrderForPia,
lockToken: order.lockToken,
},
},
logApiCall: true,
@ -2104,6 +2120,7 @@ export const actions = {
addGuidToLineItemsIfNotAlreadyThere(vaps);
context.commit(storeMutations.UPDATE_VAPS, vaps);
},
// COMBINE THESE
savePromos(context, promos) {
addGuidToLineItemsIfNotAlreadyThere(promos);
context.commit(storeMutations.UPDATE_PROMOS, promos);
@ -2111,6 +2128,46 @@ export const actions = {
saveInactivePromos(context, inactivePromos) {
context.commit(storeMutations.UPDATE_INACTIVE_PROMOS, inactivePromos);
},
// Manage promo saving to ensure a promoCode never ends up in both active and inactive
saveActiveAndOrInactivePromos(context, { activePromos = null, inactivePromos = null }) {
let activePromosToSave;
let inactivePromosToSave;
if (!activePromos && !inactivePromos) {
// Allow double null to save empty arrays to store
activePromosToSave = [];
inactivePromosToSave = [];
} else if (activePromos && inactivePromos) {
// Prioritize active promos when both inactive and active are supplied
activePromosToSave = activePromos;
const activePromoCodes = activePromos.map((promoObject) =>
getPromoCodeWithoutBundleIdentifier(promoObject.promoCode)
);
inactivePromosToSave = inactivePromos.filter((inactivePromo) => {
return !activePromoCodes.includes(inactivePromo);
});
} else if (!activePromos) {
// Only inactivePromos supplied
inactivePromosToSave = inactivePromos;
activePromosToSave = (context.getters.lineItems.promos ?? []).filter((activePromo) => {
return !inactivePromosToSave.includes(
getPromoCodeWithoutBundleIdentifier(activePromo.promoCode)
);
});
} else if (!inactivePromos) {
// Only activePromos supplied
activePromosToSave = activePromos;
const activePromoCodes = activePromos.map((promoObject) =>
getPromoCodeWithoutBundleIdentifier(promoObject.promoCode)
);
inactivePromosToSave = (context.getters.payment.inactivePromos ?? []).filter(
(inactivePromo) => {
return !activePromoCodes.includes(inactivePromo);
}
);
}
context.commit(storeMutations.UPDATE_PROMOS, activePromosToSave);
context.commit(storeMutations.UPDATE_INACTIVE_PROMOS, inactivePromosToSave);
},
// Price order actions
async priceOrderItemsAndSaveServerData(
@ -2181,13 +2238,13 @@ export const actions = {
serviceLocationCity,
serviceLocationState,
serviceLocationZipCode,
pricedAvailableLineItems,
pricedLineItems,
},
pageNameToLog,
}
) {
const flattenedLineItemsWithChildParts =
getFlattenedArrayOfLineItemsWithChildParts(pricedAvailableLineItems);
getFlattenedArrayOfLineItemsWithChildParts(pricedLineItems);
const lineItemsWithOnlyPriceInfo = flattenedLineItemsWithChildParts.map((lineItem) => ({
partNumber: lineItem.partNumber,
@ -2236,12 +2293,9 @@ export const actions = {
context.commit(storeMutations.UPDATE_LINE_ITEMS_SERVER_DATA, response.data.serverData);
pricedAvailableLineItems = addTaxesToPricedLineItems(
pricedAvailableLineItems,
response.data.taxedLineItems
);
pricedLineItems = addTaxesToPricedLineItems(pricedLineItems, response.data.taxedLineItems);
return pricedAvailableLineItems;
return pricedLineItems;
},
// The <addableVaps> parameter is an array of ALL available front wipers and rain defense
@ -2611,7 +2665,7 @@ function addTaxesToPricedLineItems(pricedLineItems, taxingLineItems = []) {
return pricedLineItems;
}
export function mapTaxedAvailableLineItemsToStoreFormat(availableLineItems, storeLineItems) {
export function mapTaxedLineItemsToStoreFormat(availableLineItems, storeLineItems) {
// clone the lineItems array because what we're passing in is referencing the store directly
const lineItems = deepClone(storeLineItems);