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

Merge remote-tracking branch 'origin/develop' into feature/skiener/CSR-1452

Browse source
This commit is contained in:
Scott Kiener 2023-11-09 09:11:32 -05:00
commit 2600e70755
21 changed files with 372 additions and 180 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",

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

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

@ -1,27 +1,24 @@
<template>
<div class="cart mb-4">
<div class="cart mb-5">
<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"
@ -33,55 +30,30 @@
</div>
<!-- Nonpackaged Cart Items -->
<hr style="background: red" />
<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">
@ -128,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",
@ -147,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);
@ -201,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 = [];
@ -251,6 +232,9 @@ export default {
salesTax: promoLineItem.salesTax,
};
promoLineItem.cartItemType = cartItem.cartItemType;
cartItem.lineItems.push(promoLineItem);
cartItems.push(cartItem);
});
@ -336,14 +320,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);
@ -441,6 +417,7 @@ export default {
category: cartItemCategories.VAPS,
cartItemType: cartItemTypes.RAIN_DEFENSE,
isDisplayed: true,
isRemovable: true,
subTotal: 0,
salesTax: 0,
lineItems: [],
@ -469,6 +446,7 @@ export default {
category: cartItemCategories.GLASS_PARTS,
cartItemType: cartItemTypes.GLASS_PARTS,
isDisplayed: false,
isRemovable: false,
subTotal:
(lineItem.kitPrice ?? 0) +
(lineItem.laborAmount ?? 0) +
@ -502,15 +480,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: [],
@ -545,6 +524,7 @@ export default {
category: cartItemCategories.SUPPORTING_ITEMS,
cartItemType: cartItemTypes.MOBILE_FEE,
isDisplayed: true,
isRemovable: false,
subTotal: 0,
salesTax: 0,
lineItems: [],
@ -579,6 +559,7 @@ export default {
category: cartItemCategories.SUPPORTING_ITEMS,
cartItemType: cartItemTypes.SUPPORTING_ITEMS,
isDisplayed: false,
isRemovable: false,
subTotal: 0,
salesTax: 0,
lineItems: [],
@ -714,9 +695,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;
}
@ -725,7 +703,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;
@ -743,6 +725,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;
@ -764,18 +768,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 {
@ -792,14 +784,22 @@ 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;
}
}
}
.payment-method-question {
.question-text {
margin: 1rem 0 0.5rem 0;
}
span {
line-height: 24px;
}
}
</style>

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

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

1
src/layouts/payment-method/payment-method-question/payment-method-question.vue
View file

@ -77,6 +77,7 @@ export default {
.payment-method-question {
.question-text span {
text-align: left;
line-height: 24px;
}
}
</style>

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

@ -23,14 +23,13 @@
<cart
:damage="damageInfo"
:availableLineItems="availableLineItems"
:availableVaps="availableVaps"
:allowItemRemoval="true"
v-model="lineItems"
servicePackageOptionsCmsName="ServicePackageTitle"
@cart-remove="cartRemove"
recyclingModalCmsWidgetName="RecycleModal" />
<hr />
<hr class="my-5" />
<div>
<alert
@ -44,7 +43,7 @@
<add-vaps-modal-buttons
v-model="lineItems"
:availableLineItems="availableLineItems"
:availableVaps="availableVaps"
vapsTilesCmsName="VapsProductTiles"
@added-to-cart="showAlert" />
@ -93,13 +92,14 @@ import {
} 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));
@ -121,12 +121,6 @@ export default {
"payment-method"
);
const supportingItemsPromise = baseMixin.methods.dispatchStoreActionWithLogging(
storeActions.GET_SUPPORTING_ITEMS,
null,
"payment-method"
);
const promiseResultMap = [
{
resultKey: "cmsContent",
@ -140,29 +134,25 @@ 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
@ -177,16 +167,16 @@ export default {
const { validatePromoResponse, revalidatePromoResponse } =
await revalidatePromosAndValidateNewPromo(
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",
@ -195,24 +185,23 @@ 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.push(...vapsToAddToCart);
@ -220,7 +209,7 @@ export default {
// 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);
@ -239,7 +228,7 @@ export default {
data() {
return {
lineItems: [],
availableLineItems: [],
availableVaps: [],
paymentMethodInternalModel: this.getPaymentMethodFromStore(),
inactivePromos: this.getInactivePromosFromStore(),
};
@ -279,7 +268,7 @@ export default {
const scheduleReqs = !!(
schedule.date &&
schedule.startTime &&
(!isMobile || schedule.endTime) &&
schedule.endTime &&
schedule.jobMaxMinutes &&
schedule.jobMinMinutes
);
@ -422,10 +411,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) {

117
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,13 @@ 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 {
revalidatePromosAndValidateNewPromo,
getAddableVapsFromAvailableLineItems,
} from "@/helpers/promotions-helper";
import { queryStrings } from "@/constants/query-strings";
import { getQuerystringParameter } from "@/helpers/querystring-helper";
import iframeResize from "../../../node_modules/iframe-resizer/js/iframeResizer.js";
@ -207,6 +227,8 @@ export default {
displayAmount: this.getDisplayAmountDue(),
piaLineItems: this.getPiaLineItems(),
paypalPayment: this.isPaypal(),
lineItems: [],
availableLineItems: [],
};
},
directives: {
@ -231,6 +253,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 +282,81 @@ export default {
resultKey: "signature",
promise: signaturePromise,
},
{
resultKey: "wipers",
promise: wipersPromise,
},
{
resultKey: "rainDefense",
promise: rainDefensePromise,
},
{
resultKey: "supportingItems",
promise: supportingItemsPromise,
},
];
const resultMap = await settleAllPromises(promiseResultMap);
const glassParts = store.getters.order.lineItems.glassParts ?? [];
let availableLineItems = [
resultMap.rainDefense,
...resultMap.supportingItems,
...resultMap.wipers,
...glassParts,
];
const lineItemsFromStore = store.getters.order.lineItems;
await baseMixin.methods.dispatchStoreActionWithLogging(
storeActions.PRICE_ORDER_ITEMS_AND_SAVE_SERVER_DATA,
{
availableLineItems: availableLineItems,
},
"payment",
false
);
// Promo logic
const promoCodeFromQueryString = getQuerystringParameter(queryStrings.PROMO);
const { validatePromoResponse, revalidatePromoResponse } =
await revalidatePromosAndValidateNewPromo(
promoCodeFromQueryString,
availableLineItems,
"payment-method"
);
availableLineItems.push(...(validatePromoResponse?.orderPromos ?? []));
// End of promo logic
const taxedAvailableLineItems = 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,
pricedAvailableLineItems: availableLineItems,
},
"payment-method",
false
);
// Match all available line items to the line items as they are in the store
// and rebuild the original structure.
const lineItems = mapTaxedLineItemsToStoreFormat(availableLineItems, lineItemsFromStore);
// Call the "next" function to complete the transition to this page.
next(async (vm) => {
vm.setCmsContent(resultMap.cmsContent);
vm.fetchSignatureInfo(resultMap.signature);
vm.availableLineItems = taxedAvailableLineItems;
vm.lineItems = lineItems;
});
},
computed: {
@ -276,6 +383,9 @@ export default {
switchPaymentText() {
return this.getCmsContent("PaymentMethodWidget", "QuestionText");
},
damageInfo() {
return this.$store.getters.damage;
},
},
methods: {
arePagePrerequisitesValid() {
@ -312,7 +422,7 @@ export default {
const scheduleReqs = !!(
schedule.date &&
schedule.startTime &&
(!isMobile || schedule.endTime) &&
schedule.endTime &&
schedule.jobMaxMinutes &&
schedule.jobMinMinutes
);
@ -466,6 +576,7 @@ export default {
funnelHeader,
navbar,
loadingModal,
cart,
paymentSwitch,
},
};
@ -474,7 +585,7 @@ export default {
<style lang="scss">
.hop-iframe {
position: relative;
min-height: 1120px;
min-height: 650px;
width: 100%;
border: 0 none;
}

3
src/layouts/review/review-block/review-block.vue
View file

@ -55,4 +55,7 @@ export default {
:deep(.review-block-content > ul) {
margin-bottom: 0rem;
}
.review-block-content {
width: 90%;
}
</style>

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

29
src/store/index.js
View file

@ -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;
@ -1022,6 +1026,7 @@ export const actions = {
crmCustomerId,
workOrderNumber,
customerPortalLoginToken,
lockToken,
}
) {
context.commit(storeMutations.UPDATE_REFERRAL_NUMBER, referralNumber);
@ -1033,7 +1038,15 @@ 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.Customer_Portal_Login_Token, customerPortalLoginToken);
context.commit(storeMutations.LOCK_TOKEN, lockToken);
// if we already have the token, do not update it. pia does 2 work order submits and the value is not persisted after the first submit
if (
state.order.customerPortalLoginToken != null &&
state.order.customerPortalLoginToken != "00000000-0000-0000-0000-000000000000"
) {
context.commit(storeMutations.Customer_Portal_Login_Token, customerPortalLoginToken);
}
},
logPageView(
@ -1707,6 +1720,7 @@ export const actions = {
referralSequenceNumber: order.referralSequenceNumber,
eon: order.eon,
createDeleteStatusWorkOrderForPia: createDeleteStatusWorkOrderForPia,
lockToken: order.lockToken,
},
},
logApiCall: true,
@ -2181,13 +2195,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 +2250,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 +2622,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);