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

Merge branch 'develop' into feature/CSR-1392

Browse source
This commit is contained in:
CarlNation 2023-11-03 14:22:37 -04:00
commit bad8dbb3f9
15 changed files with 856 additions and 108 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -52,7 +52,7 @@ const storeActions = {
RESET_SAVE_SESSION_PROMISE: "resetSaveSessionPromise",
GET_SIGNATURE: "getSignature",
VALIDATE_ORDER_PROMO_AND_SAVE_SERVER_DATA: "validateOrderPromoAndSaveServerData",
REVALIDATE_ORDER_PROMOS_AND_UPDATE_STORE: "revalidateOrderPromosAndUpdateStore",
REVALIDATE_ORDER_PROMOS_AND_SAVE_SERVER_DATA: "revalidateOrderPromosAndSaveServerData",
// DEPENDENCY MUTATIONS
RESET_DAMAGE_STATE_AND_DEPENDENCIES: "resetDamageAndDependencies",
@ -87,10 +87,14 @@ const storeActions = {
"saveSupportingItemsSuppressingStateResetting",
SAVE_VAPS: "saveVaps",
SAVE_PROMOS: "savePromos",
SAVE_INACTIVE_PROMOS: "saveInactivePromos",
SAVE_CUSTOMER_DETAILS: "saveCustomerDetails",
SAVE_SERVICE_LOCATION_TECH_NOTES: "saveServiceLocationTechNotes",
SAVE_CCTOKEN: "saveCCToken",
SAVE_PAYPAL_TOKEN: "savePaypalToken",
CREATE_SUBMITTED_ORDER: "createSubmittedOrder",
RESET_SUBMITTED_ORDER: "resetSubmittedOrder",
};
export { storeActions };

369
src/fmg-components/cart/cart.spec.js Normal file
View file

@ -0,0 +1,369 @@
// Components
import cart from "@/fmg-components/cart/cart.vue";
// Supporting Files
import { shallowMount } from "@vue/test-utils";
import { getMountOptions } from "@/helpers/unit-test-helper.js";
describe("cart.vue", () => {
describe("cartItem computeds", () => {
test("if there are one or more front wipers on the order, a front wiper cart item should be added to the cart", () => {
// Arrange
const lineItems = {
glassParts: [],
supportingItems: [],
vaps: [
{
cartItemType: "FRONT WIPERS",
description: 'WIPER BLADE STANDARD 18"',
kitPrice: 0,
laborAmount: 0,
partNumber: "WB18",
partType: "FRONT WIPER",
salesTax: 2.44,
sellingPrice: 32.49,
},
{
cartItemType: "FRONT WIPERS",
description: 'WIPER BLADE STANDARD 26"',
kitPrice: 0,
laborAmount: 0,
partNumber: "WB26",
partType: "FRONT WIPER",
salesTax: 2.44,
sellingPrice: 32.49,
},
],
promos: [],
};
const availableLineItems = [];
// Act
const { wrapper } = setupMocks({
props: {
modelValue: lineItems,
availableLineItems: availableLineItems,
},
});
// Assert
expect(wrapper.vm.frontWipersCartItem).not.toBeNull();
expect(wrapper.vm.frontWipersCartItem.subTotal).toEqual(64.98);
expect(wrapper.vm.frontWipersCartItem.salesTax).toEqual(4.88);
const found =
wrapper.vm.cartItems.findIndex(
(cartItem) => cartItem == wrapper.vm.frontWipersCartItem
) >= 0;
expect(found).toBe(true);
});
test("if there are one or more rear wipers on the order, a rear wiper cart item should be added to the cart", () => {
// Arrange
const lineItems = {
glassParts: [],
supportingItems: [],
vaps: [
{
cartItemType: "REAR WIPERS",
description: 'REAR WIPER BLADE STANDARD 18"',
kitPrice: 0,
laborAmount: 0,
partNumber: "EWB18",
partType: "REAR WIPER",
salesTax: 2.44,
sellingPrice: 32.49,
},
{
cartItemType: "REAR WIPERS",
description: 'REAR WIPER BLADE STANDARD 26"',
kitPrice: 0,
laborAmount: 0,
partNumber: "RWB26",
partType: "REAR WIPER",
salesTax: 2.44,
sellingPrice: 32.49,
},
],
promos: [],
};
const availableLineItems = [];
// Act
const { wrapper } = setupMocks({
props: {
modelValue: lineItems,
availableLineItems: availableLineItems,
},
});
// Assert
expect(wrapper.vm.rearWipersCartItem).not.toBeNull();
expect(wrapper.vm.rearWipersCartItem.subTotal).toEqual(64.98);
expect(wrapper.vm.rearWipersCartItem.salesTax).toEqual(4.88);
const found =
wrapper.vm.cartItems.findIndex(
(cartItem) => cartItem == wrapper.vm.rearWipersCartItem
) >= 0;
expect(found).toBe(true);
});
test("if there is Rain Defense on the order, a rain defense cart item should be added to the cart", () => {
// Arrange
const lineItems = {
glassParts: [],
supportingItems: [],
vaps: [
{
cartItemType: "RAIN DEFENSE",
description: null,
kitPrice: 0,
laborAmount: 0,
listPrice: "44.99",
partNumber: "RAIN DEFENSE",
partType: "RAIN DEFENSE",
salesTax: 3.37,
sellingPrice: 44.99,
},
],
promos: [],
};
const availableLineItems = [];
// Act
const { wrapper } = setupMocks({
props: {
modelValue: lineItems,
availableLineItems: availableLineItems,
},
});
// Assert
expect(wrapper.vm.rainDefenseCartItem).not.toBeNull();
expect(wrapper.vm.rainDefenseCartItem.subTotal).toEqual(44.99);
expect(wrapper.vm.rainDefenseCartItem.salesTax).toEqual(3.37);
const found =
wrapper.vm.cartItems.findIndex(
(cartItem) => cartItem == wrapper.vm.rainDefenseCartItem
) >= 0;
expect(found).toBe(true);
});
// test("if there are glass parts on the order, a glass part cart item should be added to the cart but should not be displayed", () => {
// // Arrange
// const windshieldWithChildParts = {
// canSafeliteRecalibrate: true,
// childParts: [
// {
// kitPrice: 0,
// laborAmount: 23.55,
// partNumber: "GGG FW4896",
// salesTax: 1.77,
// sellingPrice: 0,
// },
// ],
// color: "Green Tint",
// description:
// "solar, soundproofing, lane keep assist, lane departure warning system, w/adaptive cruise control",
// id: "db22fd44-10dd-456f-979b-ff88cf68cca6",
// kitPrice: 0,
// laborAmount: 60,
// partNumber: "FW04896GTYN",
// partType: "WINDSHIELD",
// recalibrationType: "STATIC",
// requiresCapabilityQuestions: false,
// requiresRecalibration: true,
// salesTax: 63.86,
// sellingPrice: 791.46,
// };
// const lineItems = {
// glassParts: [windshieldWithChildParts],
// supportingItems: [],
// vaps: [],
// promos: [],
// };
// const availableLineItems = [];
// // Act
// const { wrapper } = setupMocks({
// props: {
// modelValue: lineItems,
// availableLineItems: availableLineItems,
// },
// });
// // Assert
// expect(wrapper.vm.glassPartCartItems[0]).not.toBeNull();
// expect(wrapper.vm.glassPartCartItems[0].subTotal).toEqual(875.01);
// expect(wrapper.vm.glassPartCartItems[0].salesTax).toEqual(65.63);
// expect(wrapper.vm.glassPartCartItems[0].isDisplayed).toEqual(false);
// const found =
// wrapper.vm.cartItems.findIndex(
// (cartItem) => cartItem == wrapper.vm.glassPartsCartItem
// ) >= 0;
// expect(found).toBe(true);
// });
// Recycle Fee Cart Item
test("if there is recycling fee on the order, a recycle fee cart item should be added to the cart", () => {
// Arrange
const lineItems = {
glassParts: [],
supportingItems: [
{
description: null,
id: "9ff98501-03a4-432b-884e-e4e28f884a2f",
kitPrice: 0,
laborAmount: 34.98,
partNumber: "RECYCLE FEE",
partType: "REPLACE FEE",
salesTax: 2.62,
sellingPrice: 0,
},
],
vaps: [],
promos: [],
};
const availableLineItems = [];
// Act
const { wrapper } = setupMocks({
props: {
modelValue: lineItems,
availableLineItems: availableLineItems,
},
});
// Assert
expect(wrapper.vm.recycleFeeCartItem).not.toBeNull();
expect(wrapper.vm.recycleFeeCartItem.subTotal).toEqual(34.98);
expect(wrapper.vm.recycleFeeCartItem.salesTax).toEqual(2.62);
const found =
wrapper.vm.cartItems.findIndex(
(cartItem) => cartItem == wrapper.vm.recycleFeeCartItem
) >= 0;
expect(found).toBe(true);
});
// Mobile Fee Cart Item
test("if there is mobile fee on the order, a mobile fee cart item should be added to the cart", () => {
// Arrange
const lineItems = {
glassParts: [],
supportingItems: [
{
description: null,
id: "9ff98501-03a4-432b-884e-e4e28f884a2f",
kitPrice: 0,
laborAmount: 34.98,
partNumber: "MOBILE FEE",
partType: "REPLACE FEE",
salesTax: 2.62,
sellingPrice: 0,
},
],
vaps: [],
promos: [],
};
const availableLineItems = [];
// Act
const { wrapper } = setupMocks({
props: {
modelValue: lineItems,
availableLineItems: availableLineItems,
},
});
// Assert
expect(wrapper.vm.mobileFeeCartItem).not.toBeNull();
expect(wrapper.vm.mobileFeeCartItem.subTotal).toEqual(34.98);
expect(wrapper.vm.mobileFeeCartItem.salesTax).toEqual(2.62);
const found =
wrapper.vm.cartItems.findIndex(
(cartItem) => cartItem == wrapper.vm.mobileFeeCartItem
) >= 0;
expect(found).toBe(true);
});
// Other Supporting Items Cart Item
test("if there are other supporting items on the order, an other supporting items cart item should be added to the cart but should not be displayed", () => {
// Arrange
const recalibrationLineItem = {
cartItemType: "SUPPORTING ITEMS",
description: null,
id: "8ab6ef9b-8620-430a-8a92-29f7d4bb8b00",
kitPrice: 0,
laborAmount: 450,
partNumber: "RECAL STATIC",
partType: "RECALIBRATION",
salesTax: 33.75,
sellingPrice: 0,
};
const lineItems = {
glassParts: [],
supportingItems: [recalibrationLineItem],
vaps: [],
promos: [],
};
const availableLineItems = [];
// Act
const { wrapper } = setupMocks({
props: {
modelValue: lineItems,
availableLineItems: availableLineItems,
},
});
// Assert
expect(wrapper.vm.otherSupportingItemsCartItem).not.toBeNull();
expect(wrapper.vm.otherSupportingItemsCartItem.subTotal).toEqual(450);
expect(wrapper.vm.otherSupportingItemsCartItem.salesTax).toEqual(33.75);
expect(wrapper.vm.otherSupportingItemsCartItem.isDisplayed).toEqual(false);
const found =
wrapper.vm.cartItems.findIndex(
(cartItem) => cartItem == wrapper.vm.otherSupportingItemsCartItem
) >= 0;
expect(found).toBe(true);
});
});
});
function setupMocks({ options, props }) {
const mountOptions = getMountOptions({
...options,
});
const mockBaseMixin = {
methods: {
getTierOnePackagePrice: jest.fn(),
filterOutFees: jest.fn(),
getCmsContent: jest.fn(),
},
};
if (props) mountOptions.propsData = props;
mountOptions.global.mixins = [mockBaseMixin];
const wrapper = shallowMount(cart, mountOptions);
return { wrapper };
}

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

@ -73,13 +73,18 @@
</template>
<script>
import baseMixin from "@/mixins/base-mixin.js";
import { getHighestFullySatisfiedTier, getPackageContents } from "@/helpers/service-package-helper";
// Components
import textLink from "@/ux-components/text-link/text-link";
import textBlock from "@/digital-components/text-block/text-block";
import { LineItemUtilities } from "@/store";
// Mixins
import baseMixin from "@/mixins/base-mixin.js";
// Helpers
import { deepClone } from "@/helpers/object-helper";
import { getHighestFullySatisfiedTier, getPackageContents } from "@/helpers/service-package-helper";
// Constants
import { partTypeStrings } from "@/constants/part-type-strings";
import { cartItemCategories } from "@/constants/cart-item-categories";
import { cartItemTypes } from "@/constants/cart-item-types";
@ -101,7 +106,6 @@ export default {
currency: "USD",
}),
lineItems: deepClone(this.modelValue),
lineItemUtilities: new LineItemUtilities(),
};
},
methods: {
@ -114,7 +118,7 @@ export default {
let subTotal = 0;
vapsItems.forEach((item) => {
subTotal += item.subTotal; // baseMixin.methods.getTotalLineItemPrice(item);
subTotal += item.subTotal;
});
return subTotal;
@ -175,8 +179,10 @@ export default {
cartItems.push(this.rainDefenseCartItem);
}
if (this.glassPartsCartItem) {
cartItems.push(this.glassPartsCartItem);
if (this.glassPartCartItems) {
this.glassPartCartItems.forEach((glassPartCartItem) => {
cartItems.push(glassPartCartItem);
});
}
if (this.otherSupportingItemsCartItem) {
@ -264,6 +270,10 @@ export default {
return this.damage.glassToReplace;
},
glassParts() {
const glassParts = this.lineItems?.glassParts;
return glassParts?.length > 0 ? glassParts : [];
},
vaps() {
const vaps = this.lineItems?.vaps;
return vaps?.length > 0 ? vaps : [];
@ -403,12 +413,12 @@ export default {
return cartItem;
},
glassPartsCartItem() {
let cartItem = null;
glassPartCartItems() {
const glassPartCartItems = [];
if (this.lineItems?.glassParts?.length > 0) {
this.lineItems?.glassParts?.forEach((lineItem) => {
cartItem = {
if (this.glassParts.length > 0) {
this.glassParts.forEach((lineItem) => {
let glassPartCartItem = {
name: null,
category: cartItemCategories.GLASS_PARTS,
cartItemType: cartItemTypes.GLASS_PARTS,
@ -417,24 +427,27 @@ export default {
(lineItem.kitPrice ?? 0) +
(lineItem.laborAmount ?? 0) +
(lineItem.sellingPrice ?? 0),
salesTax: lineItem.salesTax ?? 0,
lineItems: [],
};
if (lineItem.childParts?.length > 0) {
lineItem.childParts.forEach((childPartLineItem) => {
cartItem.subTotal +=
glassPartCartItem.subTotal +=
(childPartLineItem.kitPrice ?? 0) +
(childPartLineItem.laborAmount ?? 0) +
(childPartLineItem.sellingPrice ?? 0);
cartItem.salesTax += childPartLineItem.salesTax;
glassPartCartItem.salesTax += childPartLineItem.salesTax;
});
}
glassPartCartItems.push(glassPartCartItem);
});
}
return cartItem;
return glassPartCartItems;
},
recycleFeeCartItemName() {
return this.getCmsContent("RecycleFeeTextWidget", "Text");

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

@ -37,6 +37,8 @@ export function getLineItemsThatMatchPromos(promos, availableLineItems) {
return matchingLineItems;
}
// Note: Addable VAPs for the Promo Validation endpoint can also be on the order already
// There is no need to only send un-added VAPs in this array.
export function getAddableVapsFromAvailableLineItems(availableLineItems) {
const addableVaps = [];
addableVaps.push(...findLineItemsWithPartType(partTypeStrings.FRONT_WIPER, availableLineItems));
@ -75,11 +77,22 @@ export async function revalidatePromosAndValidateNewPromo(
if (hasActivePromos || hasHasInactivePromos) {
revalidatePromoResponse = await baseMixin.methods.dispatchStoreActionWithLogging(
storeActions.REVALIDATE_ORDER_PROMOS_AND_UPDATE_STORE,
null,
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,
false
);
}
if (hasNewPromo) {
validatePromoResponse = await baseMixin.methods.dispatchStoreActionWithLogging(

77
src/layouts/confirmation/confirmation.spec.js
View file

@ -19,6 +19,53 @@ beforeEach(() => {
jest.restoreAllMocks();
jest.clearAllMocks();
store.getters = {
submittedOrder: {
schedule: {
date: "2023-01-01",
startTime: "09:00",
endTime: "10:00",
routeCode: "000",
},
lineItems: {
glassParts: [
{
partNumber: "ABC123",
},
],
supportingItems: [],
},
serviceLocation: {
address: "test",
address2: "123",
city: "test",
state: "AZ",
appointmentType: "Inshop",
zipCode: "12345",
zipCodeCtu: "01234",
provider: {
providerNumber: "123",
address: {
streetAddress: "test1",
city: "test",
state: "AZ",
zipCode: "12345",
zipCodeCtu: "01234",
},
},
},
damage: {
isRepair: false,
},
referralNumber: "1234567",
vehicle: {
year: "2004",
make: "Ford",
model: "F Series F250",
},
customer: {
emailAddress: "test@test.com",
},
},
order: {
schedule: {
date: "2023-01-01",
@ -127,9 +174,10 @@ describe("computed properties...", () => {
});
test("ScheduleTimeFormatted should return mobile time in expected format.", () => {
//Arrange
store.getters.order.serviceLocation.appointmentType = AppointmentTypeStrings.MOBILE;
store.getters.order.schedule.startTime = "09:00";
store.getters.order.schedule.endTime = "11:00";
store.getters.submittedOrder.serviceLocation.appointmentType =
AppointmentTypeStrings.MOBILE;
store.getters.submittedOrder.schedule.startTime = "09:00";
store.getters.submittedOrder.schedule.endTime = "11:00";
const { wrapper } = setupMocks({});
// Act
@ -140,9 +188,10 @@ describe("computed properties...", () => {
});
test("ScheduleTimeFormatted should return DROP_OFF time in expected format.", () => {
//Arrange
store.getters.order.serviceLocation.appointmentType = AppointmentTypeStrings.DROP_OFF;
store.getters.order.schedule.startTime = "09:00";
store.getters.order.schedule.endTime = "11:00";
store.getters.submittedOrder.serviceLocation.appointmentType =
AppointmentTypeStrings.DROP_OFF;
store.getters.submittedOrder.schedule.startTime = "09:00";
store.getters.submittedOrder.schedule.endTime = "11:00";
const { wrapper } = setupMocks({});
// Act
@ -153,9 +202,10 @@ describe("computed properties...", () => {
});
test("ScheduleTimeFormatted should return Inshop time in expected format.", () => {
//Arrange
store.getters.order.serviceLocation.appointmentType = AppointmentTypeStrings.IN_SHOP;
store.getters.order.schedule.startTime = "09:00";
store.getters.order.schedule.endTime = "11:00";
store.getters.submittedOrder.serviceLocation.appointmentType =
AppointmentTypeStrings.IN_SHOP;
store.getters.submittedOrder.schedule.startTime = "09:00";
store.getters.submittedOrder.schedule.endTime = "11:00";
const { wrapper } = setupMocks({});
// Act
@ -166,7 +216,8 @@ describe("computed properties...", () => {
});
test("AppointmentWordingText should return mobile text in expected format.", () => {
//Arrange
store.getters.order.serviceLocation.appointmentType = AppointmentTypeStrings.MOBILE;
store.getters.submittedOrder.serviceLocation.appointmentType =
AppointmentTypeStrings.MOBILE;
const { wrapper } = setupMocks({});
// Act
@ -177,7 +228,8 @@ describe("computed properties...", () => {
});
test("AppointmentWordingText should return DROP_OFF text in expected format.", () => {
//Arrange
store.getters.order.serviceLocation.appointmentType = AppointmentTypeStrings.DROP_OFF;
store.getters.submittedOrder.serviceLocation.appointmentType =
AppointmentTypeStrings.DROP_OFF;
const { wrapper } = setupMocks({});
@ -189,7 +241,8 @@ describe("computed properties...", () => {
});
test("AppointmentWordingText should return IN_SHOP text in expected format.", () => {
//Arrange
store.getters.order.serviceLocation.appointmentType = AppointmentTypeStrings.IN_SHOP;
store.getters.submittedOrder.serviceLocation.appointmentType =
AppointmentTypeStrings.IN_SHOP;
const { wrapper } = setupMocks({});

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

@ -57,6 +57,8 @@ import vehicleBanner from "@/fmg-components/vehicle-banner/vehicle-banner";
import navbar from "@/fmg-components/nav-bar/nav-bar";
import addToCalendar from "@/layouts/confirmation/add-to-calendar/add-to-calendar";
//Supporting files
import baseMixin from "@/mixins/base-mixin.js";
import { storeActions } from "@/constants/store-actions";
import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
import { AppointmentTypeStrings } from "@/constants/schedule-constants";
import { settleAllPromises } from "@/helpers/layout-helper";
@ -70,6 +72,8 @@ import { get12HourTimeFormat, get12HourTimeMobileFormat } from "@/helpers/date-h
export default {
name: "confirmation",
async beforeRouteEnter(to, from, next) {
await baseMixin.methods.dispatchStoreAction(storeActions.CREATE_SUBMITTED_ORDER);
// Call APIs
const cmsContentPromise = fetchCmsContentForPage(to.query.fmgPage);
@ -95,7 +99,7 @@ export default {
return this.getCmsContent("ScheduleConfirmationWidget", "Image");
},
CustomerPortalLoginToken() {
return store.getters.order.customerPortalLoginToken;
return store.getters.submittedOrder.customerPortalLoginToken;
},
ConfirmationEmailText() {
return this.getCmsContent("ConfirmationEmailWidget", "BodyText")
@ -105,16 +109,16 @@ export default {
?.replaceAll("&gt;", ">");
},
ScheduleDate() {
return store.getters.order.schedule.date;
return store.getters.submittedOrder.schedule.date;
},
AppointmentType() {
return store.getters.order.serviceLocation.appointmentType;
return store.getters.submittedOrder.serviceLocation.appointmentType;
},
ScheduleStartTime() {
return store.getters.order.schedule.startTime;
return store.getters.submittedOrder.schedule.startTime;
},
ScheduleEndTime() {
return store.getters.order.schedule.endTime;
return store.getters.submittedOrder.schedule.endTime;
},
InShopWordingText() {
return this.getCmsContent("InShopWordingWidget", "BodyText");
@ -126,31 +130,31 @@ export default {
return this.getCmsContent("DropOffWordingWidget", "BodyText");
},
ServiceLocationAddress() {
return store.getters.order.serviceLocation.address;
return store.getters.submittedOrder.serviceLocation.address;
},
ServiceLocationAddress2() {
return store.getters.order.serviceLocation.address2;
return store.getters.submittedOrder.serviceLocation.address2;
},
ServiceLocationCity() {
return store.getters.order.serviceLocation.city;
return store.getters.submittedOrder.serviceLocation.city;
},
ServiceLocationState() {
return store.getters.order.serviceLocation.state;
return store.getters.submittedOrder.serviceLocation.state;
},
ServiceLocationZipCode() {
return store.getters.order.serviceLocation.zipCode;
return store.getters.submittedOrder.serviceLocation.zipCode;
},
ProviderAddress() {
return store.getters.order.serviceLocation.provider.address.streetAddress;
return store.getters.submittedOrder.serviceLocation.provider.address.streetAddress;
},
ProviderCity() {
return store.getters.order.serviceLocation.provider.address.city;
return store.getters.submittedOrder.serviceLocation.provider.address.city;
},
ProviderState() {
return store.getters.order.serviceLocation.provider.address.state;
return store.getters.submittedOrder.serviceLocation.provider.address.state;
},
ProviderZipCode() {
return store.getters.order.serviceLocation.provider.address.zipCode;
return store.getters.submittedOrder.serviceLocation.provider.address.zipCode;
},
AppointmentWordingText() {
if (this.AppointmentType == AppointmentTypeStrings.MOBILE) {
@ -204,6 +208,10 @@ export default {
},
methods: {
arePagePrerequisitesValid() {
if (store.getters.hasSubmittedOrder) {
return true;
}
// Service Location
const serviceLocation = store.getters.order.serviceLocation;
const mobileReqs = !!(

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

@ -84,6 +84,12 @@ import store from "@/store";
import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
import { paymentMethods } from "@/constants/payment-method-constants";
import { experimentSettings } from "@/constants/experiments";
import {
revalidatePromosAndValidateNewPromo,
getAddableVapsFromAvailableLineItems,
} from "@/helpers/promotions-helper";
import { queryStrings } from "@/constants/query-strings";
import { getQuerystringParameter } from "@/helpers/querystring-helper";
import { Form } from "vee-validate";
import { defineRule } from "vee-validate";
@ -159,6 +165,19 @@ export default {
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,
{
@ -174,6 +193,8 @@ export default {
false
);
// Match all available line items to the line items as they are in the store
// and rebuild the original structure.
const lineItems = mapTaxedAvailableLineItemsToStoreFormat(
availableLineItems,
lineItemsFromStore
@ -184,6 +205,8 @@ export default {
vm.setCmsContent(resultMap.cmsContent);
vm.availableLineItems = taxedAvailableLineItems;
vm.lineItems = lineItems;
vm.updateFooterButtonText(vm.customCtaCopy);
});
},
data() {
@ -191,6 +214,7 @@ export default {
lineItems: [],
availableLineItems: [],
paymentMethodInternalModel: this.getPaymentMethodFromStore(),
inactivePromos: this.getInactivePromosFromStore(),
};
},
methods: {
@ -259,6 +283,27 @@ export default {
return paymentMethods.LATER;
}
},
updateFooterButtonText(newValue) {
this.$refs.navbar.updateButtonText(newValue);
},
getInactivePromosFromStore() {
return this.$store.getters.order.payment.inactivePromos;
},
async revalidatePromos() {
const revalidatePromoResponse = await baseMixin.methods.dispatchStoreActionWithLogging(
storeActions.REVALIDATE_ORDER_PROMOS_AND_SAVE_SERVER_DATA,
{
activePromosToUse: this.lineItems.promos,
inactivePromosToUse: this.inactivePromos,
lineItemsToUse: this.lineItems,
},
"payment-method",
false
);
this.lineItems.promos = revalidatePromoResponse.promoLineItems;
this.inactivePromos = revalidatePromoResponse.errors.map((x) => x.promoCode);
},
backButtonAction() {
this.$router.navigateWithoutSaving(this.navigationScenarios.CLICKED_BACK, this.$route);
},
@ -283,6 +328,11 @@ export default {
);
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,
false
);
if (this.paymentMethod == paymentMethods.LATER) {
// this creates the final work order
@ -360,7 +410,7 @@ export default {
},
watch: {
customCtaCopy(newValue) {
this.$refs.navbar.updateButtonText(newValue);
this.updateFooterButtonText(newValue);
},
},
components: {

73
src/layouts/payment/payment-switch/payment-switch-button/payment-switch-button.vue Normal file
View file

@ -0,0 +1,73 @@
<template>
<button
type="button"
class="btn d-flex align-items-center justify-content-center py-3 px-4 delay"
@click="handleClick">
<!-- <span class="m-0">{{ buttonLabelText }}</span> -->
<span v-for="token in tokens" :key="token">
<span v-if="isInlineImageToken(token)">
<img
v-if="hasImage"
class="ms-2"
:src="buttonImage"
:alt="getInlineAltText(token)" />
<span v-else> {{ getInlineAltText(token) }}</span>
</span>
<span v-else>
{{ token }}
</span>
</span>
</button>
</template>
<script>
import { splitCopyOnCMSPlaceHolder } from "@/helpers/cms-content-helper";
const INLINE_IMAGE_TOKEN = "custom:inlineImage";
export default {
name: "payment-switch-button",
props: {
buttonText: String,
buttonImage: String,
buttonImageId: String,
},
methods: {
handleClick(clickValue) {
this.pushEventToGA(
this.$route.query[this.queryStrings.FMG_PAGE],
this.GaActions.CLICKED,
this.buttonText,
true
);
this.$emit("click-event", clickValue);
},
isInlineImageToken(token) {
return token.includes(INLINE_IMAGE_TOKEN);
},
getInlineAltText(token) {
let innerTokens = token.split(",");
return innerTokens[1] ?? "";
},
},
computed: {
tokens() {
return splitCopyOnCMSPlaceHolder(this.buttonText ?? "");
},
hasImage() {
return !!this.buttonImage;
},
buttonLabelText() {
return this.tokens[0];
},
},
};
</script>
<style lang="scss" scoped>
.btn {
border: 1px solid $gray-600;
border-radius: 8px;
}
</style>

99
src/layouts/payment/payment-switch/payment-switch.vue Normal file
View file

@ -0,0 +1,99 @@
<template>
<div class="switch-payment-header pb-3">{{ switchPaymentHeaderText }}</div>
<div class="switch-payment-button">
<paymentSwitchButton
v-if="paymentType !== paymentTypes.cc"
:buttonText="paymentMethodsInfo[paymentTypes.cc]?.buttonText"
:buttonImage="paymentMethodsInfo[paymentTypes.cc]?.answerImageUrl"
:buttonImageId="paymentMethodsInfo[paymentTypes.cc]?.imageId"
@click-event="switchPaymentClick(paymentTypes.cc)" />
</div>
<div class="switch-button-separator py-3" v-if="paymentType !== paymentTypes.cc">or</div>
<div class="switch-payment-button">
<paymentSwitchButton
v-if="paymentType !== paymentTypes.pp"
:buttonText="paymentMethodsInfo[paymentTypes.pp]?.buttonText"
:buttonImage="paymentMethodsInfo[paymentTypes.pp]?.answerImageUrl"
:buttonImageId="paymentMethodsInfo[paymentTypes.pp]?.imageId"
@click-event="switchPaymentClick(paymentTypes.pp)" />
</div>
<div class="switch-button-separator py-3" v-if="paymentType === paymentTypes.cc">or</div>
<div class="switch-payment-button">
<paymentSwitchButton
v-if="paymentType !== paymentTypes.ap"
:buttonText="paymentMethodsInfo[paymentTypes.ap]?.buttonText"
:buttonImage="paymentMethodsInfo[paymentTypes.ap]?.answerImageUrl"
:buttonImageId="paymentMethodsInfo[paymentTypes.ap]?.imageId"
@click-event="switchPaymentClick(paymentTypes.ap)" />
</div>
</template>
<script>
import paymentSwitchButton from "./payment-switch-button/payment-switch-button";
export default {
name: "paymentSwitch",
data() {
return {
paymentTypes: {
cc: "cc",
pp: "pp",
ap: "ap",
},
};
},
props: {
cmsWidgetName: String,
paymentType: String,
},
computed: {
switchPaymentHeaderText() {
return this.getCmsContent(this.cmsWidgetName, "QuestionText");
},
paymentMethodAnswerData() {
const rawData = this.getCmsContent(this.cmsWidgetName, "Answers");
if (!rawData) {
return [];
} else {
return rawData;
}
},
paymentMethodsInfo() {
return this.paymentMethodAnswerData.reduce((accumulator, paymentMethod) => {
accumulator[paymentMethod.Name] = {
buttonText: paymentMethod.Text,
answerImageUrl: paymentMethod.AnswerImageUrl,
imageId: paymentMethod.ImageId,
};
return accumulator;
}, {});
},
},
methods: {
switchPaymentClick(paymentType) {
this.$emit("switch-payment-event", paymentType);
},
},
components: {
paymentSwitchButton,
},
};
</script>
<style lang="scss">
.switch-payment-header {
font-weight: 500;
color: $black;
}
.switch-button-separator {
text-align: center;
color: $black;
}
.switch-payment-button button {
width: 100%;
color: $black;
}
</style>

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

@ -21,39 +21,10 @@
scrolling="no">
</iframe>
</div>
<div>{{ switchPaymentText }}</div>
<div>
<button
v-if="paymentType !== 'cc'"
ref="switchToCCButton"
type="button"
@mousedown="switchPIAMethod('cc')"
aria-label="Switch to Credit Card">
Switch to Credit Card
</button>
</div>
<div v-if="paymentType !== 'cc'">or</div>
<div>
<button
v-if="paymentType !== 'pp'"
ref="switchToPPButton"
type="button"
@mousedown="switchPIAMethod('pp')"
aria-label="Switch to PayPal">
Switch to PayPal
</button>
</div>
<div v-if="paymentType === 'cc'">or</div>
<div>
<button
v-if="paymentType !== 'ap'"
ref="switchToAPButton"
type="button"
@mousedown="switchPIAMethod('ap')"
aria-label="Switch to Afterpay">
Switch to Afterpay
</button>
</div>
<paymentSwitch
cmsWidgetName="PaymentMethodWidget"
:paymentType="paymentType"
@switch-payment-event="switchPIAMethod" />
<navbar
cmsWidgetName="FunnelFooterWidget"
isForwardActionDisabled="true"
@ -193,6 +164,8 @@ 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 paymentSwitch from "./payment-switch/payment-switch.vue";
import { storeActions } from "@/constants/store-actions";
import store from "@/store";
import { externalUrls } from "@/router/router-constants/externalUrl-values";
@ -493,6 +466,7 @@ export default {
funnelHeader,
navbar,
loadingModal,
paymentSwitch,
},
};
</script>

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

@ -83,7 +83,7 @@ import { payWithInsuranceStates } from "@/constants/pay-with-insurance-states";
import { revalidatePromosAndValidateNewPromo } from "@/helpers/promotions-helper";
import { queryStrings } from "@/constants/query-strings";
import { getQuerystringParameter } from "@/helpers/querystring-helper";
import { setTransitionHooks } from "vue";
defineRule("option-required", required(errorMessages.OPTION_REQUIRED));
export default {
@ -168,7 +168,7 @@ export default {
vm.supportingItems = resultMap.supportingItems;
vm.availableLineItems = pricingResults;
vm.isInsuranceSelected = vm.getDefaultIsInsuranceSelectedValue(vm.availableLineItems);
vm.newValidatedPromos = validatePromoResponse?.data.orderPromos;
vm.newValidatedPromos = validatePromoResponse?.orderPromos;
});
},
data() {

2
src/layouts/service-location/shop-question/shop-question.spec.js
View file

@ -452,7 +452,7 @@ describe("shop-question.vue", () => {
// Assert
expect(wrapper.vm.answers.length).toBe(6);
console.log(wrapper.vm.answers);
expect(wrapper.vm.answers).toEqual([
{
buttonBodyCopy: "4403 Executive Pkwy, Westerville, OH 43081",

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

@ -334,6 +334,7 @@ export default {
},
async forwardButtonAction() {
await this.dispatchStoreAction(storeActions.RESET_SUBMITTED_ORDER);
this.dispatchStoreAction(
storeActions.SAVE_VEHICLE,
{

11
src/router/index.js
View file

@ -55,8 +55,17 @@ const routes = [
await GoToFunnelStartOn404(next);
}
// Intercept all navigation if a submitted order exists in storage
if (store.getters.hasSubmittedOrder) {
if (to.query.fmgPage !== "vehicle") {
to.query.fmgPage = "confirmation";
}
}
// On entering the funnel "fresh", read cookie information, decide what to do next. payment pages used to return from safelitehop so exclude here
if (from.redirectedFrom === undefined && !to.query.fmgPage.startsWith("payment")) {
else if (
from.redirectedFrom === undefined &&
!to.query.fmgPage.startsWith("payment")
) {
// clear the saveSessionPromise - if it exists in the vuex store but a new instance was created
// the saveSessionPromise will no longer point to a valid promise
baseMixin.methods.dispatchStoreAction(storeActions.RESET_SAVE_SESSION_PROMISE);

132
src/store/index.js
View file

@ -691,6 +691,8 @@ export const getters = {
.filter((x) => !!x.isActive)
.map((x) => x.settings)
.reduce((r, c) => Object.assign(r, c), {}) ?? {},
submittedOrder: (state) => JSON.parse(window.sessionStorage.getItem("submittedOrder")),
hasSubmittedOrder: (state) => window.sessionStorage.getItem("submittedOrder") !== null,
};
function getNonFalseValuesOfPropertyInArrayOfObjects(array, propertyName) {
@ -2105,6 +2107,9 @@ export const actions = {
savePromos(context, promos) {
context.commit(storeMutations.UPDATE_PROMOS, promos);
},
saveInactivePromos(context, inactivePromos) {
context.commit(storeMutations.UPDATE_INACTIVE_PROMOS, inactivePromos);
},
// Price order actions
async priceOrderItemsAndSaveServerData(
@ -2238,11 +2243,15 @@ export const actions = {
return pricedAvailableLineItems;
},
// The <addableVaps> parameter is an array of ALL available front wipers and rain defense
// for the vehicle. There is no need to confirm an addableVap is not already on the order
// <lineItemsToUse> is an optional parameter if the lineItems in the store may not be up to date
async validateOrderPromoAndSaveServerData(
context,
{ payload: { promoCode, addableVaps }, pageNameToLog }
{ payload: { promoCode, lineItemsToUse, addableVaps }, pageNameToLog }
) {
const order = context.getters.order;
lineItemsToUse = lineItemsToUse ?? order.lineItems;
addGuidToLineItemsIfNotAlreadyThere(addableVaps);
const requestObject = {
promoCode: promoCode,
@ -2254,7 +2263,7 @@ export const actions = {
eon: order.eon,
isRepair: order.damage.isRepair,
glassToReplace: renameGlassToReplaceAttributes(order.damage.glassToReplace),
lineItemsOnOrder: getArrayOfAllLineItems(order.lineItems),
lineItemsOnOrder: getArrayOfAllLineItems(lineItemsToUse),
parentAccountNumber: order.payment.parentAccountNumber,
referralSequenceNumber: order.referralSequenceNumber,
serviceState: order.serviceLocation.state,
@ -2287,13 +2296,22 @@ export const actions = {
);
}
return validateResponse;
return validateResponse?.data;
},
async revalidateOrderPromosAndUpdateStore(context, { pageNameToLog }) {
// All payload parameters are optional - will use store data if not provided
async revalidateOrderPromosAndSaveServerData(
context,
{ payload: { activePromosToUse, inactivePromosToUse, lineItemsToUse }, pageNameToLog }
) {
const order = context.getters.order;
activePromosToUse = activePromosToUse ?? order.lineItems.promos;
inactivePromosToUse = inactivePromosToUse ?? order.payment.inactivePromos;
lineItemsToUse = lineItemsToUse ? deepClone(lineItemsToUse) : deepClone(order.lineItems);
lineItemsToUse.promos = activePromosToUse;
let requestObject = {
inactivePromos: order.payment.inactivePromos,
inactivePromos: inactivePromosToUse,
order: {
appointmentType: order.serviceLocation.appointmentType,
carId: order.vehicle.carId,
@ -2301,7 +2319,7 @@ export const actions = {
eon: order.eon,
isRepair: order.damage.isRepair,
glassToReplace: renameGlassToReplaceAttributes(order.damage.glassToReplace),
lineItemsOnOrder: getArrayOfAllLineItems(order.lineItems),
lineItemsOnOrder: getArrayOfAllLineItems(lineItemsToUse),
parentAccountNumber: order.payment.parentAccountNumber,
referralSequenceNumber: order.referralSequenceNumber,
serviceState: order.serviceLocation.state,
@ -2322,16 +2340,12 @@ export const actions = {
pageNameToLog: pageNameToLog,
});
const revalidationErrorPromoCodes = revalidateResponse.data.errors.map((x) => x.promoCode);
context.commit(storeMutations.UPDATE_PROMOS, revalidateResponse.data.promoLineItems);
context.commit(storeMutations.UPDATE_INACTIVE_PROMOS, revalidationErrorPromoCodes);
context.commit(
storeMutations.UPDATE_LINE_ITEMS_SERVER_DATA,
revalidateResponse.data.lineItemsServerData
);
return revalidateResponse;
return revalidateResponse?.data;
},
// Misc order actions
@ -2441,6 +2455,26 @@ export const actions = {
return false;
},
createSubmittedOrder(context) {
if (context.getters.hasSubmittedOrder) {
return;
}
// create a submitted order object from vuex.
const submittedOrder = context.state.order;
// set to local storage
window.sessionStorage.setItem("submittedOrder", JSON.stringify(submittedOrder));
// clear vuex
context.commit(storeMutations.RESET_STATE);
},
resetSubmittedOrder(context) {
// clear from local storage
window.sessionStorage.removeItem("submittedOrder");
},
};
export default createStore({
@ -2576,15 +2610,6 @@ function addTaxesToPricedLineItems(pricedLineItems, taxingLineItems = []) {
return pricedLineItems;
}
export class LineItemUtilities {
constructor() {
this.getArrayOfAllLineItems = getArrayOfAllLineItems;
this.getFlattenedArrayOfLineItemsWithChildParts =
getFlattenedArrayOfLineItemsWithChildParts;
this.addGuidToLineItemsIfNotAlreadyThere = addGuidToLineItemsIfNotAlreadyThere;
}
}
export function mapTaxedAvailableLineItemsToStoreFormat(availableLineItems, storeLineItems) {
// clone the lineItems array because what we're passing in is referencing the store directly
const lineItems = deepClone(storeLineItems);
@ -2592,12 +2617,69 @@ export function mapTaxedAvailableLineItemsToStoreFormat(availableLineItems, stor
for (let [category, lineItemsInCategory] of Object.entries(lineItems)) {
lineItemsInCategory = lineItemsInCategory ?? [];
for (let lineItemIndex = 0; lineItemIndex < lineItemsInCategory.length; lineItemIndex++) {
const availableLineItem = availableLineItems.find(
(ali) => ali.partNumber == lineItemsInCategory[lineItemIndex].partNumber
if (category == "supportingItems") {
// if the category is supporting items we need to filter out the items that aren't repair chips
const nonRepairChipSupportItemsLineItems = lineItemsInCategory.filter(
(lineItem) => lineItem.partNumber != "WSREPAIR"
);
if (availableLineItem) {
lineItemsInCategory[lineItemIndex].salesTax = availableLineItem.salesTax;
/*
Because repair chips all have the same part number but different prices based on the quantity,
we have to sort the store line items and available line items by descending labor amount in order to
map the tax correctly to each repair chip
*/
// get the supporting items that ARE repair chips and sort them by descending labor amount
let repairChipLineItems = lineItemsInCategory.filter(
(lineItem) => lineItem.partNumber == "WSREPAIR"
);
repairChipLineItems = repairChipLineItems.sort(
(a, b) => parseFloat(b.laborAmount) - parseFloat(a.laborAmount)
);
// get the supporting items from the available line items (taxed) that ARE repair chips and sort them by descending labor amount
let availableRepairChipLineItems = availableLineItems.filter(
(lineItem) => lineItem.partNumber == "WSREPAIR"
);
availableRepairChipLineItems = availableRepairChipLineItems.sort(
(a, b) => parseFloat(b.laborAmount) - parseFloat(a.laborAmount)
);
// go through each one of those mapping the taxes to the correct chip
for (let i = 0; i < availableRepairChipLineItems.length; i++) {
repairChipLineItems[i].salesTax = availableRepairChipLineItems[i].salesTax;
}
// then we map the non-repair chip items based on part number
for (
let lineItemIndex = 0;
lineItemIndex < nonRepairChipSupportItemsLineItems.length;
lineItemIndex++
) {
const availableLineItem = availableLineItems.find(
(ali) =>
ali.partNumber ==
nonRepairChipSupportItemsLineItems[lineItemIndex].partNumber
);
if (availableLineItem) {
nonRepairChipSupportItemsLineItems[lineItemIndex].salesTax =
availableLineItem.salesTax;
}
}
// finally we splice the two arrays back into one
lineItemsInCategory = nonRepairChipSupportItemsLineItems.concat(repairChipLineItems);
} else {
for (
let lineItemIndex = 0;
lineItemIndex < lineItemsInCategory.length;
lineItemIndex++
) {
const availableLineItem = availableLineItems.find(
(ali) => ali.partNumber == lineItemsInCategory[lineItemIndex].partNumber
);
if (availableLineItem) {
lineItemsInCategory[lineItemIndex].salesTax = availableLineItem.salesTax;
}
}
}
}