Merge remote-tracking branch 'origin/develop' into feature/skiener/CSR-1452
This commit is contained in:
Scott Kiener
commit
bc1786da1e
20 changed files with 824 additions and 109 deletions
18
package-lock.json
generated
18
package-lock.json
generated
|
|
@ -14,6 +14,7 @@
|
|||
"canvas-confetti": "^1.4.0",
|
||||
"core-js": "^3.6.5",
|
||||
"http-status-codes": "^2.1.4",
|
||||
"iframe-resizer": "^4.3.7",
|
||||
"jest-junit": "^13.0.0",
|
||||
"maska": "^1.5.0",
|
||||
"vee-validate": "^4.5.7",
|
||||
|
|
@ -11813,6 +11814,18 @@
|
|||
"integrity": "sha1-xg7taebY/bazEEofy8ocGS3FtQE=",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/iframe-resizer": {
|
||||
"version": "4.3.7",
|
||||
"resolved": "https://registry.npmjs.org/iframe-resizer/-/iframe-resizer-4.3.7.tgz",
|
||||
"integrity": "sha512-a3EGVScU9NtUpj6lWvGhVw3EfOw5AopRs5xGsQU385kWdgQt++OsD6PCnTV+8YkgBu/g28rLIh0EztFg9UQr1Q==",
|
||||
"engines": {
|
||||
"node": ">=0.8.0"
|
||||
},
|
||||
"funding": {
|
||||
"type": "individual",
|
||||
"url": "https://github.com/davidjbradshaw/iframe-resizer/blob/master/FUNDING.md"
|
||||
}
|
||||
},
|
||||
"node_modules/ignore": {
|
||||
"version": "4.0.6",
|
||||
"resolved": "https://registry.npmjs.org/ignore/-/ignore-4.0.6.tgz",
|
||||
|
|
@ -33845,6 +33858,11 @@
|
|||
"integrity": "sha1-xg7taebY/bazEEofy8ocGS3FtQE=",
|
||||
"dev": true
|
||||
},
|
||||
"iframe-resizer": {
|
||||
"version": "4.3.7",
|
||||
"resolved": "https://registry.npmjs.org/iframe-resizer/-/iframe-resizer-4.3.7.tgz",
|
||||
"integrity": "sha512-a3EGVScU9NtUpj6lWvGhVw3EfOw5AopRs5xGsQU385kWdgQt++OsD6PCnTV+8YkgBu/g28rLIh0EztFg9UQr1Q=="
|
||||
},
|
||||
"ignore": {
|
||||
"version": "4.0.6",
|
||||
"resolved": "https://registry.npmjs.org/ignore/-/ignore-4.0.6.tgz",
|
||||
|
|
|
|||
|
|
@ -17,6 +17,7 @@
|
|||
"canvas-confetti": "^1.4.0",
|
||||
"core-js": "^3.6.5",
|
||||
"http-status-codes": "^2.1.4",
|
||||
"iframe-resizer": "^4.3.7",
|
||||
"jest-junit": "^13.0.0",
|
||||
"maska": "^1.5.0",
|
||||
"vee-validate": "^4.5.7",
|
||||
|
|
|
|||
|
|
@ -75,14 +75,11 @@ body .creditCardSpecific div {
|
|||
padding: 8px 0;
|
||||
}
|
||||
body .creditCardSpecific div .headerlinecontainer {
|
||||
padding: 0;
|
||||
display: none;
|
||||
}
|
||||
body .creditCardSpecific div label {
|
||||
font-weight: 500;
|
||||
}
|
||||
body .creditCardSpecific div:first-child {
|
||||
display: none;
|
||||
}
|
||||
body .creditCardSpecific #infoRow2 {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -88,14 +88,11 @@ body {
|
|||
div {
|
||||
padding: 8px 0;
|
||||
.headerlinecontainer {
|
||||
padding: 0;
|
||||
display: none;
|
||||
}
|
||||
label {
|
||||
font-weight: 500;
|
||||
}
|
||||
&:first-child {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
#infoRow2 {
|
||||
margin-bottom: 0;
|
||||
|
|
|
|||
18
src/App.vue
18
src/App.vue
|
|
@ -5,15 +5,33 @@
|
|||
<component :is="Component" @focusin="handleAnyComponentFocus" />
|
||||
</transition>
|
||||
</router-view>
|
||||
<loadingModal :showLoader="shouldShowLoader" :showTextCarousel="shouldShowTextCarousel" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { handleAnyComponentFocus } from "@/helpers/button-question-focus-helper";
|
||||
import loadingModal from "@/fmg-components/loading-modal/loading-modal.vue";
|
||||
import { showFmgLoadingModal } from "@/helpers/loading-modal-helper";
|
||||
export default {
|
||||
name: "app",
|
||||
setup() {
|
||||
const { globalNonpersistedState } = showFmgLoadingModal();
|
||||
return { globalNonpersistedState };
|
||||
},
|
||||
methods: {
|
||||
handleAnyComponentFocus: handleAnyComponentFocus,
|
||||
},
|
||||
computed: {
|
||||
shouldShowLoader() {
|
||||
return this.globalNonpersistedState.showLoadingModal;
|
||||
},
|
||||
shouldShowTextCarousel() {
|
||||
return this.globalNonpersistedState.showTextCarousel;
|
||||
},
|
||||
},
|
||||
components: {
|
||||
loadingModal,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
|
|
|
|||
|
|
@ -91,6 +91,9 @@ const storeActions = {
|
|||
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
369
src/fmg-components/cart/cart.spec.js
Normal 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 };
|
||||
}
|
||||
|
|
@ -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");
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div v-if="isModalVisible">
|
||||
<div v-if="showModalContent">
|
||||
<div v-if="notFullScreen" class="dimmer-overlay"></div>
|
||||
<div class="modal-loader" :class="layoutClass">
|
||||
<div class="row g-2 h-100 d-flex align-items-center">
|
||||
|
|
@ -11,7 +11,7 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div v-if="showTextCarouselContent" class="row">
|
||||
<div class="col">
|
||||
<div class="text-container slide">
|
||||
<p>
|
||||
|
|
@ -59,6 +59,7 @@ export default {
|
|||
data() {
|
||||
return {
|
||||
isModalVisible: false,
|
||||
isModalTextCarouselVisible: false,
|
||||
};
|
||||
},
|
||||
props: {
|
||||
|
|
@ -66,15 +67,30 @@ export default {
|
|||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
showLoader: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
showTextCarousel: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
layoutClass() {
|
||||
return this.notFullScreen ? "card-layout" : "full-screen container-fluid";
|
||||
},
|
||||
showModalContent() {
|
||||
return this.isModalVisible || this.showLoader;
|
||||
},
|
||||
showTextCarouselContent() {
|
||||
return this.isModalTextCarouselVisible || this.showTextCarousel;
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
showModal() {
|
||||
showModal(showTextCarousel = true) {
|
||||
//Display modal
|
||||
this.isModalTextCarouselVisible = showTextCarousel;
|
||||
this.isModalVisible = true;
|
||||
//Force page reload on back button
|
||||
window.addEventListener(
|
||||
|
|
|
|||
18
src/helpers/loading-modal-helper.js
Normal file
18
src/helpers/loading-modal-helper.js
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
import { reactive } from "vue";
|
||||
|
||||
// state encapsulated and managed by the composable
|
||||
const globalNonpersistedState = reactive({
|
||||
showLoadingModal: true,
|
||||
showTextCarousel: false,
|
||||
});
|
||||
|
||||
export const showFmgLoadingModal = (newValue, showTextCarousel = false) => {
|
||||
if (newValue !== undefined) {
|
||||
globalNonpersistedState.showLoadingModal = newValue;
|
||||
}
|
||||
if (showTextCarousel !== undefined) {
|
||||
globalNonpersistedState.showTextCarousel = showTextCarousel;
|
||||
}
|
||||
|
||||
return { globalNonpersistedState };
|
||||
};
|
||||
|
|
@ -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({});
|
||||
|
||||
|
|
|
|||
|
|
@ -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(">", ">");
|
||||
},
|
||||
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 = !!(
|
||||
|
|
|
|||
|
|
@ -174,6 +174,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
|
||||
|
|
|
|||
|
|
@ -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
99
src/layouts/payment/payment-switch/payment-switch.vue
Normal 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>
|
||||
|
|
@ -12,6 +12,7 @@
|
|||
<div class="col-md-6 col-xl-4 p-0">
|
||||
<div id="card-container">
|
||||
<iframe
|
||||
v-resize
|
||||
ref="paymentFrame"
|
||||
class="hop-iframe payment-iframe"
|
||||
name="card-frame"
|
||||
|
|
@ -20,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"
|
||||
|
|
@ -192,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";
|
||||
|
|
@ -202,7 +176,7 @@ import { paymentMethods } from "@/constants/payment-method-constants";
|
|||
import { AppointmentTypeStrings } from "@/constants/schedule-constants";
|
||||
import baseMixin from "@/mixins/base-mixin.js";
|
||||
|
||||
// Validation
|
||||
import iframeResize from "../../../node_modules/iframe-resizer/js/iframeResizer.js";
|
||||
|
||||
export default {
|
||||
name: "payment",
|
||||
|
|
@ -235,6 +209,18 @@ export default {
|
|||
paypalPayment: this.isPaypal(),
|
||||
};
|
||||
},
|
||||
directives: {
|
||||
resize: {
|
||||
mounted: function (el) {
|
||||
el.addEventListener("load", () => {
|
||||
iframeResize({ checkOrigin: false }, el);
|
||||
});
|
||||
},
|
||||
unmounted: function (el) {
|
||||
el.iFrameResizer.removeListeners();
|
||||
},
|
||||
},
|
||||
},
|
||||
async beforeRouteEnter(to, from, next) {
|
||||
// Call APIs
|
||||
const cmsContentPromise = fetchCmsContentForPage(to.query.fmgPage);
|
||||
|
|
@ -480,6 +466,7 @@ export default {
|
|||
funnelHeader,
|
||||
navbar,
|
||||
loadingModal,
|
||||
paymentSwitch,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
@ -487,7 +474,7 @@ export default {
|
|||
<style lang="scss">
|
||||
.hop-iframe {
|
||||
position: relative;
|
||||
min-height: 1320px;
|
||||
min-height: 1120px;
|
||||
width: 100%;
|
||||
border: 0 none;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -334,6 +334,7 @@ export default {
|
|||
},
|
||||
|
||||
async forwardButtonAction() {
|
||||
await this.dispatchStoreAction(storeActions.RESET_SUBMITTED_ORDER);
|
||||
this.dispatchStoreAction(
|
||||
storeActions.SAVE_VEHICLE,
|
||||
{
|
||||
|
|
|
|||
|
|
@ -89,7 +89,7 @@ export default {
|
|||
);
|
||||
});
|
||||
|
||||
let totalPrice = this.getTotalPriceOfAllLineItemsAndChildParts(lineItemsToPrice);
|
||||
let totalPrice = this.getTotalPriceOfAllLineItemsAndChildParts(lineItemsToPrice, false);
|
||||
return totalPrice;
|
||||
},
|
||||
filterOutFees(lineItems) {
|
||||
|
|
@ -101,22 +101,30 @@ export default {
|
|||
});
|
||||
return filteredLineItems;
|
||||
},
|
||||
getTotalPriceOfAllLineItemsAndChildParts(lineItems) {
|
||||
getTotalPriceOfAllLineItemsAndChildParts(lineItems, includeTax) {
|
||||
let totalPrice = 0;
|
||||
lineItems.forEach((lineItem) => {
|
||||
totalPrice += this.getTotalLineItemPrice(lineItem);
|
||||
totalPrice += this.getTotalLineItemPrice(lineItem, includeTax);
|
||||
if (lineItem.childParts) {
|
||||
totalPrice += this.getTotalPriceOfAllLineItemsAndChildParts(
|
||||
lineItem.childParts
|
||||
lineItem.childParts,
|
||||
includeTax
|
||||
);
|
||||
}
|
||||
});
|
||||
return totalPrice;
|
||||
},
|
||||
getTotalLineItemPrice(lineItem) {
|
||||
return (
|
||||
lineItem.kitPrice + lineItem.laborAmount + lineItem.sellingPrice + lineItem.salesTax
|
||||
);
|
||||
getTotalLineItemPrice(lineItem, includeTax) {
|
||||
if (includeTax) {
|
||||
return (
|
||||
lineItem.kitPrice +
|
||||
lineItem.laborAmount +
|
||||
lineItem.sellingPrice +
|
||||
lineItem.salesTax
|
||||
);
|
||||
} else {
|
||||
return lineItem.kitPrice + lineItem.laborAmount + lineItem.sellingPrice;
|
||||
}
|
||||
},
|
||||
getDisplayAmountDue(lineItems) {
|
||||
return this.getAmountDue(lineItems).toLocaleString("en-US", {
|
||||
|
|
@ -127,15 +135,19 @@ export default {
|
|||
getAmountDue(lineItems) {
|
||||
var amountDue = 0;
|
||||
if (lineItems.glassParts) {
|
||||
amountDue = this.getTotalPriceOfAllLineItemsAndChildParts(lineItems.glassParts);
|
||||
amountDue = this.getTotalPriceOfAllLineItemsAndChildParts(
|
||||
lineItems.glassParts,
|
||||
true
|
||||
);
|
||||
}
|
||||
if (lineItems.supportingItems) {
|
||||
amountDue += this.getTotalPriceOfAllLineItemsAndChildParts(
|
||||
lineItems.supportingItems
|
||||
lineItems.supportingItems,
|
||||
true
|
||||
);
|
||||
}
|
||||
if (lineItems.vaps) {
|
||||
amountDue += this.getTotalPriceOfAllLineItemsAndChildParts(lineItems.vaps);
|
||||
amountDue += this.getTotalPriceOfAllLineItemsAndChildParts(lineItems.vaps, true);
|
||||
}
|
||||
return amountDue;
|
||||
},
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@ import { globalEvents, globalEventTypes } from "@/constants/events";
|
|||
import { queryStrings } from "@/constants/query-strings";
|
||||
import { getQuerystringParameter } from "@/helpers/querystring-helper";
|
||||
import { getDeviceIdValue } from "@/helpers/heritage-integration/cookie-helper";
|
||||
import { showFmgLoadingModal } from "@/helpers/loading-modal-helper";
|
||||
|
||||
// Heritage integration
|
||||
import { isSavedSessionStillActive } from "@/helpers/heritage-integration/session-helper";
|
||||
|
|
@ -54,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);
|
||||
|
|
@ -154,6 +164,11 @@ router.beforeEach(async (to, from, next) => {
|
|||
// use current page url query string name when to.name is "root" (due to unresolved navigation in beforeEach)
|
||||
router.lastNavigationPage = to.name == "root" ? analyticsMixin.methods.getPageName() : to.name;
|
||||
|
||||
const fromQueryPage = from.query?.fmgPage;
|
||||
if (fromQueryPage === undefined) {
|
||||
showFmgLoadingModal(true);
|
||||
}
|
||||
|
||||
next();
|
||||
});
|
||||
|
||||
|
|
@ -171,6 +186,8 @@ router.afterEach(async (to, from) => {
|
|||
}
|
||||
}
|
||||
|
||||
showFmgLoadingModal(false);
|
||||
|
||||
// Push page view to GA
|
||||
analyticsMixin.methods.pushPageViewToGA();
|
||||
|
||||
|
|
|
|||
|
|
@ -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) {
|
||||
|
|
@ -2441,6 +2443,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 +2598,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);
|
||||
|
|
|
|||
Loading…
Reference in a new issue