Merge pull request #1451 from Safelite/feature/CSR-1382-loose-ends
Feature/csr 1382 loose ends
This commit is contained in:
commit
350e850a3a
7 changed files with 515 additions and 167 deletions
8
src/constants/cart-item-categories.js
Normal file
8
src/constants/cart-item-categories.js
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
const cartItemCategories = {
|
||||
VAPS: "vaps",
|
||||
GLASS_PARTS: "glassParts",
|
||||
SUPPORTING_ITEMS: "supportingItems",
|
||||
PROMOS: "promos",
|
||||
};
|
||||
|
||||
export { cartItemCategories };
|
||||
11
src/constants/cart-item-types.js
Normal file
11
src/constants/cart-item-types.js
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
const cartItemTypes = {
|
||||
FRONT_WIPER: "FRONT WIPER",
|
||||
REAR_WIPER: "REAR WIPER",
|
||||
SUPPORTING_ITEMS: "SUPPORTING ITEMS",
|
||||
GLASS_PARTS: "GLASS PARTS",
|
||||
RAIN_DEFENSE: "RAIN DEFENSE",
|
||||
RECYCLE_FEE: "RECYCLE FEE",
|
||||
MOBILE_FEE: "MOBILE FEE",
|
||||
};
|
||||
|
||||
export { cartItemTypes };
|
||||
|
|
@ -3,6 +3,8 @@ const partTypeStrings = {
|
|||
REAR_WIPER: "REAR WIPER",
|
||||
RAIN_DEFENSE: "RAIN DEFENSE",
|
||||
RECALIBRATION: "RECALIBRATION",
|
||||
RECYCLE_FEE: "RECYCLE FEE",
|
||||
MOBILE_FEE: "MOBILE FEE",
|
||||
};
|
||||
|
||||
export { partTypeStrings };
|
||||
|
|
|
|||
|
|
@ -92,11 +92,11 @@ export default {
|
|||
answers.push(answer);
|
||||
}
|
||||
|
||||
if (this.showAddRainDefense) {
|
||||
const answer = getAnswer("RainDefenseModal", this.answersCmsData);
|
||||
answer.SubText = "+$" + this.rainDefensePrice;
|
||||
answers.push(answer);
|
||||
}
|
||||
// if (this.showAddRainDefense) {
|
||||
// const answer = getAnswer("RainDefenseModal", this.answersCmsData);
|
||||
// answer.SubText = "+$" + this.rainDefensePrice;
|
||||
// answers.push(answer);
|
||||
// }
|
||||
|
||||
return answers;
|
||||
},
|
||||
|
|
|
|||
|
|
@ -1,60 +1,71 @@
|
|||
<template>
|
||||
<div class="cart">
|
||||
<div class="container-fluid px-0">
|
||||
<div class="px-0">
|
||||
<div
|
||||
class="row vin-toggle flex align-items-center"
|
||||
:class="[isActive ? 'active' : '']"
|
||||
@click="toggleClass()">
|
||||
<div class="col d-flex justify-content-between">
|
||||
<span class="label">Amount Due</span
|
||||
<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 }">
|
||||
<textBlock :cmsWidgetName="packageNameWidget" /><span>{{
|
||||
<textBlock :cmsWidgetName="servicePackageTitleWidget" /><span>{{
|
||||
currencyFormatter.format(packagePrice)
|
||||
}}</span>
|
||||
</div>
|
||||
|
||||
<!-- Packaged Cart Items -->
|
||||
<div
|
||||
v-for="(lineItem, i) in displayedPackageLineItems"
|
||||
v-for="(cartItem, i) in packageCartItems"
|
||||
:key="i"
|
||||
:class="[this.displayedPackageLineItems ? 'vaps' : '']">
|
||||
<span>{{ lineItem.name }}</span>
|
||||
:class="[this.packageCartItems ? 'vaps' : '']">
|
||||
<span>{{ cartItem.name }}</span>
|
||||
<textLink
|
||||
ref="removeLink"
|
||||
linkType="text"
|
||||
text="removeLinkText"
|
||||
:text="removeLinkText"
|
||||
href="#!"
|
||||
@click-event="removeItem(lineItem)" />
|
||||
@click-event="removeItem(cartItem.cartItemType, cartItem.category)" />
|
||||
</div>
|
||||
|
||||
<!-- Nonpackaged Cart Items -->
|
||||
<hr style="background: red" />
|
||||
<div
|
||||
v-for="(lineItem, i) in displayedNonPackageLineItems"
|
||||
:key="i"
|
||||
:class="[this.displayedNonPackageLineItems ? 'vaps' : '']">
|
||||
<span>{{ lineItem.name }}</span>
|
||||
<div v-for="(cartItem, i) in nonpackageCartItems" :key="i">
|
||||
<span>{{ cartItem.name }}</span>
|
||||
<textLink
|
||||
ref="removeLink"
|
||||
linkType="text"
|
||||
text="removeLinkText"
|
||||
:text="removeLinkText"
|
||||
href="#!"
|
||||
@click-event="removeItem(lineItem)" />
|
||||
<span>{{ lineItem.price }}</span>
|
||||
@click-event="removeItem(cartItem.cartItemType, cartItem.category)" />
|
||||
<span>{{ currencyFormatter.format(cartItem.subTotal) }}</span>
|
||||
</div>
|
||||
<div v-if="hasRecycleLineItem">
|
||||
<span>{{ recycleLabel }}</span
|
||||
><span>{{ recycleFee }}</span>
|
||||
|
||||
<!-- Fees -->
|
||||
<div v-if="recycleFeeCartItem">
|
||||
<span>{{ recycleFeeCartItem.name }}</span
|
||||
><span>{{ currencyFormatter.format(recycleFeeCartItem.subTotal) }}</span>
|
||||
</div>
|
||||
<div v-if="mobileFeeCartItem">
|
||||
<span>{{ mobileFeeCartItem.name }}</span
|
||||
><span>{{ currencyFormatter.format(mobileFeeCartItem.subTotal) }}</span>
|
||||
</div>
|
||||
|
||||
<!-- Sub total, sales tax, total columns -->
|
||||
<div class="sub-total">
|
||||
<span>Subtotal</span><span>{{ currencyFormatter.format(subTotal) }}</span>
|
||||
<span>{{ subtotalText }}</span
|
||||
><span>{{ currencyFormatter.format(subTotal) }}</span>
|
||||
</div>
|
||||
<div class="sales-tax">
|
||||
<span>Sales tax</span><span>{{ currencyFormatter.format(salesTax) }}</span>
|
||||
<span>{{ salesTaxText }}</span
|
||||
><span>{{ currencyFormatter.format(salesTax) }}</span>
|
||||
</div>
|
||||
<div class="amount-due">
|
||||
<span>Amount due</span><span>{{ currencyFormatter.format(amountDue) }}</span>
|
||||
<span>{{ amountDueText }}</span
|
||||
><span>{{ currencyFormatter.format(amountDue) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -63,22 +74,23 @@
|
|||
|
||||
<script>
|
||||
import baseMixin from "@/mixins/base-mixin.js";
|
||||
import {
|
||||
getHighestFullySatisfiedTier,
|
||||
containsLineItemWithPartType,
|
||||
getPackageContents,
|
||||
findLineItemsWithPartType,
|
||||
} from "@/helpers/service-package-helper";
|
||||
import { getHighestFullySatisfiedTier, getPackageContents } from "@/helpers/service-package-helper";
|
||||
|
||||
import textLink from "@/ux-components/text-link/text-link";
|
||||
import textBlock from "@/digital-components/text-block/text-block";
|
||||
import { LineItemUtilities } from "@/store";
|
||||
import { deepClone } from "@/helpers/object-helper";
|
||||
import { partTypeStrings } from "@/constants/part-type-strings";
|
||||
import { cartItemCategories } from "@/constants/cart-item-categories";
|
||||
import { cartItemTypes } from "@/constants/cart-item-types";
|
||||
|
||||
export default {
|
||||
name: "modal",
|
||||
name: "cart",
|
||||
props: {
|
||||
modelValue: Object,
|
||||
damage: Object,
|
||||
servicePackageOptionsCmsName: String,
|
||||
availableLineItems: Object,
|
||||
lineItems: Object,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
|
@ -88,6 +100,8 @@ export default {
|
|||
style: "currency",
|
||||
currency: "USD",
|
||||
}),
|
||||
lineItems: deepClone(this.modelValue),
|
||||
lineItemUtilities: new LineItemUtilities(),
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
|
|
@ -95,23 +109,17 @@ export default {
|
|||
this.isActive = !this.isActive;
|
||||
},
|
||||
getVapsPrice(packageName) {
|
||||
const vapsItems = this.getVapsLineItemsForSelectedPackage(packageName);
|
||||
const vapsItems = this.getVapsCartItemsForSelectedPackage(packageName);
|
||||
|
||||
let price = 0;
|
||||
let subTotal = 0;
|
||||
|
||||
vapsItems.forEach((item) => {
|
||||
price += baseMixin.methods.getTotalLineItemPrice(item);
|
||||
subTotal += item.subTotal; // baseMixin.methods.getTotalLineItemPrice(item);
|
||||
});
|
||||
|
||||
return price;
|
||||
return subTotal;
|
||||
},
|
||||
getAmountDue() {
|
||||
return baseMixin.methods.getDisplayAmountDue(this.storeLineItems);
|
||||
},
|
||||
removeItem(item) {
|
||||
this.$emit("cart-remove", item);
|
||||
},
|
||||
getVapsLineItemsForSelectedPackage(packageName) {
|
||||
getVapsCartItemsForSelectedPackage(packageName) {
|
||||
const packageContentTypes = getPackageContents(
|
||||
this.glassToReplace,
|
||||
this.availableLineItems,
|
||||
|
|
@ -119,18 +127,83 @@ export default {
|
|||
packageName
|
||||
);
|
||||
|
||||
let vapsLineItemsForSelectedPackage = [];
|
||||
let vapsCartItemsForSelectedPackage = [];
|
||||
|
||||
packageContentTypes.forEach((vapType) => {
|
||||
vapsLineItemsForSelectedPackage.push(
|
||||
...findLineItemsWithPartType(vapType, this.availableLineItems)
|
||||
);
|
||||
console.log(this.cartItems);
|
||||
console.log(packageContentTypes);
|
||||
this.cartItems.forEach((cartItem) => {
|
||||
packageContentTypes.forEach((vapType) => {
|
||||
if (vapType == cartItem.cartItemType) {
|
||||
vapsCartItemsForSelectedPackage.push(cartItem);
|
||||
}
|
||||
});
|
||||
});
|
||||
return vapsLineItemsForSelectedPackage;
|
||||
|
||||
return vapsCartItemsForSelectedPackage;
|
||||
},
|
||||
getCmsContentForVapsType(vapsType) {
|
||||
const vapsItemDescriptions = this.getCmsContent("VapsItemDescriptions", "Answers");
|
||||
|
||||
if (!vapsItemDescriptions) {
|
||||
return "";
|
||||
}
|
||||
|
||||
const vapsTypeName = vapsItemDescriptions.find((entry) => entry.Name === vapsType);
|
||||
|
||||
return vapsTypeName.Text;
|
||||
},
|
||||
removeItem(cartItemType, category) {
|
||||
console.log(
|
||||
this.lineItems[category].filter(
|
||||
(lineItemsToKeep) => lineItemsToKeep.cartItemType != cartItemType
|
||||
)
|
||||
);
|
||||
this.lineItems[category] = this.lineItems[category].filter(
|
||||
(lineItemsToKeep) => lineItemsToKeep.cartItemType != cartItemType
|
||||
);
|
||||
|
||||
//console.log(`lineItemToDelete: ${lineItemIdToDelete}`)
|
||||
|
||||
this.$emit("update:modelValue", this.lineItems);
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
packageNameWidget() {
|
||||
cartItems: {
|
||||
get: function () {
|
||||
let cartItems = [];
|
||||
|
||||
if (this.frontWipersCartItem) {
|
||||
cartItems.push(this.frontWipersCartItem);
|
||||
}
|
||||
|
||||
if (this.rearWipersCartItem) {
|
||||
cartItems.push(this.rearWipersCartItem);
|
||||
}
|
||||
|
||||
if (this.rainDefenseCartItem) {
|
||||
cartItems.push(this.rainDefenseCartItem);
|
||||
}
|
||||
|
||||
if (this.glassPartsCartItem) {
|
||||
cartItems.push(this.glassPartsCartItem);
|
||||
}
|
||||
|
||||
if (this.supportingItemsCartItem) {
|
||||
cartItems.push(this.supportingItemsCartItem);
|
||||
}
|
||||
|
||||
if (this.recycleFeeCartItem) {
|
||||
cartItems.push(this.recycleFeeCartItem);
|
||||
}
|
||||
|
||||
if (this.mobileFeeCartItem) {
|
||||
cartItems.push(this.mobileFeeCartItem);
|
||||
}
|
||||
|
||||
return cartItems;
|
||||
},
|
||||
},
|
||||
servicePackageTitleWidget() {
|
||||
const servicePackageNames = this.getCmsContent(
|
||||
this.servicePackageOptionsCmsName,
|
||||
"Answers"
|
||||
|
|
@ -167,62 +240,20 @@ export default {
|
|||
|
||||
return packagePrice;
|
||||
},
|
||||
displayedPackageLineItems() {
|
||||
const displayedPackageLineItems = [];
|
||||
const packageLineItems = this.getVapsLineItemsForSelectedPackage(this.packageLevel);
|
||||
isRepair() {
|
||||
if (!this.damage) {
|
||||
return;
|
||||
}
|
||||
|
||||
// TODO Determine if we could get the same list from this.lineItems?
|
||||
packageLineItems?.forEach((item) => {
|
||||
let price = item.sellingPrice + item.kitPrice + item.laborAmount;
|
||||
const packageLineItem = {
|
||||
name: item.partType,
|
||||
price: "$" + parseFloat(price).toFixed(2),
|
||||
partType: item.partType,
|
||||
isRemovable: item.isRemovable,
|
||||
};
|
||||
displayedPackageLineItems.push(packageLineItem);
|
||||
});
|
||||
|
||||
return displayedPackageLineItems;
|
||||
},
|
||||
displayedNonPackageLineItems() {
|
||||
const displayedNonPackageLineItems = [];
|
||||
const possibleLineItems = [...this.vaps, ...this.supportingItems];
|
||||
possibleLineItems?.forEach((item) => {
|
||||
let price = item.sellingPrice + item.kitPrice + item.laborAmount;
|
||||
const isAllowed = this.allowableLineItems?.findIndex((lineItem) => {
|
||||
return lineItem.partType === item.partType;
|
||||
});
|
||||
const indexFound = this.displayedPackageLineItems?.findIndex((packageLineItem) => {
|
||||
return packageLineItem.partType === item.partType;
|
||||
});
|
||||
const isInPackage = this.displayedPackageLineItems?.findIndex((packageLineItem) => {
|
||||
return packageLineItem.partType === item.partType;
|
||||
});
|
||||
if (isInPackage === -1 && isAllowed > -1) {
|
||||
const nonPackageLineItem = {
|
||||
name: item.partType,
|
||||
price: "$" + parseFloat(price).toFixed(2),
|
||||
partType: item.partType,
|
||||
isRemovable: item.isRemovable,
|
||||
};
|
||||
displayedNonPackageLineItems.push(nonPackageLineItem);
|
||||
}
|
||||
});
|
||||
return displayedNonPackageLineItems;
|
||||
return this.damage.isRepair;
|
||||
},
|
||||
glassToReplace() {
|
||||
if (!this.damage) {
|
||||
return;
|
||||
}
|
||||
|
||||
return this.damage.glassToReplace;
|
||||
},
|
||||
isRepair() {
|
||||
if (!this.damage) {
|
||||
return;
|
||||
}
|
||||
return this.damage.isRepair;
|
||||
},
|
||||
vaps() {
|
||||
const vaps = this.lineItems?.vaps;
|
||||
return vaps?.length > 0 ? vaps : [];
|
||||
|
|
@ -231,40 +262,294 @@ export default {
|
|||
const supportingItems = this.lineItems?.supportingItems;
|
||||
return supportingItems?.length > 0 ? supportingItems : [];
|
||||
},
|
||||
// Cart Items
|
||||
packageCartItems() {
|
||||
return this.getVapsCartItemsForSelectedPackage(this.packageLevel);
|
||||
},
|
||||
nonpackageCartItems() {
|
||||
const nonpackageCartItems = [];
|
||||
|
||||
console.log("packageCartItems");
|
||||
|
||||
this.cartItems.forEach((cartItem) => {
|
||||
if (cartItem == this.recycleFeeCartItem || cartItem == this.mobileFeeCartItem) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (!this.packageCartItems.find((packageCartItem) => packageCartItem == cartItem)) {
|
||||
if (cartItem.isDisplayed) {
|
||||
nonpackageCartItems.push(cartItem);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
return nonpackageCartItems;
|
||||
},
|
||||
frontWiperCartItemName() {
|
||||
return this.getCmsContentForVapsType(partTypeStrings.FRONT_WIPER);
|
||||
},
|
||||
frontWipersCartItem() {
|
||||
let cartItem = null;
|
||||
|
||||
const frontWiperLineItems = this.vaps.filter(
|
||||
(vapsLineItem) => vapsLineItem.partType == partTypeStrings.FRONT_WIPER
|
||||
);
|
||||
|
||||
if (frontWiperLineItems.length > 0) {
|
||||
cartItem = {
|
||||
name: this.frontWiperCartItemName,
|
||||
category: cartItemCategories.VAPS,
|
||||
cartItemType: cartItemTypes.FRONT_WIPER,
|
||||
isDisplayed: true,
|
||||
subTotal: 0,
|
||||
salesTax: 0,
|
||||
lineItems: [],
|
||||
};
|
||||
|
||||
frontWiperLineItems.forEach((lineItem) => {
|
||||
lineItem.cartItemType = cartItem.cartItemType;
|
||||
cartItem.lineItems.push(lineItem);
|
||||
|
||||
cartItem.subTotal +=
|
||||
(lineItem.kitPrice ?? 0) +
|
||||
(lineItem.laborAmount ?? 0) +
|
||||
(lineItem.sellingPrice ?? 0);
|
||||
|
||||
cartItem.salesTax += lineItem.salesTax ?? 0;
|
||||
});
|
||||
}
|
||||
|
||||
return cartItem;
|
||||
},
|
||||
rearWiperCartItemName() {
|
||||
return this.getCmsContentForVapsType(partTypeStrings.REAR_WIPER);
|
||||
},
|
||||
rearWipersCartItem() {
|
||||
let cartItem = null;
|
||||
|
||||
const rearWiperLineItems = this.vaps.filter(
|
||||
(vapsLineItem) => vapsLineItem.partType == partTypeStrings.REAR_WIPER
|
||||
);
|
||||
|
||||
if (rearWiperLineItems.length > 0) {
|
||||
cartItem = {
|
||||
name: this.rearWiperCartItemName,
|
||||
category: cartItemCategories.VAPS,
|
||||
cartItemType: cartItemTypes.REAR_WIPER,
|
||||
isDisplayed: true,
|
||||
subTotal: 0,
|
||||
salesTax: 0,
|
||||
lineItems: [],
|
||||
};
|
||||
|
||||
rearWiperLineItems.forEach((lineItem) => {
|
||||
lineItem.cartItemType = cartItem.cartItemType;
|
||||
cartItem.lineItems.push(lineItem);
|
||||
|
||||
cartItem.subTotal +=
|
||||
(lineItem.kitPrice ?? 0) +
|
||||
(lineItem.laborAmount ?? 0) +
|
||||
(lineItem.sellingPrice ?? 0);
|
||||
|
||||
cartItem.salesTax += lineItem.salesTax ?? 0;
|
||||
});
|
||||
}
|
||||
|
||||
return cartItem;
|
||||
},
|
||||
rainDefenseCartItemName() {
|
||||
return this.getCmsContentForVapsType(partTypeStrings.RAIN_DEFENSE);
|
||||
},
|
||||
rainDefenseCartItem() {
|
||||
let cartItem = null;
|
||||
|
||||
const rainDefenseLineItem = this.vaps.find(
|
||||
(vapsLineItem) => vapsLineItem.partType == partTypeStrings.RAIN_DEFENSE
|
||||
);
|
||||
|
||||
if (rainDefenseLineItem) {
|
||||
cartItem = {
|
||||
name: this.getCmsContentForVapsType(partTypeStrings.RAIN_DEFENSE),
|
||||
category: cartItemCategories.VAPS,
|
||||
cartItemType: cartItemTypes.RAIN_DEFENSE,
|
||||
isDisplayed: true,
|
||||
subTotal: 0,
|
||||
salesTax: 0,
|
||||
lineItems: [],
|
||||
};
|
||||
|
||||
rainDefenseLineItem.cartItemType = cartItem.cartItemType;
|
||||
cartItem.lineItems.push(rainDefenseLineItem);
|
||||
|
||||
cartItem.subTotal +=
|
||||
(rainDefenseLineItem.kitPrice ?? 0) +
|
||||
(rainDefenseLineItem.laborAmount ?? 0) +
|
||||
(rainDefenseLineItem.sellingPrice ?? 0);
|
||||
|
||||
cartItem.salesTax += rainDefenseLineItem.salesTax ?? 0;
|
||||
}
|
||||
|
||||
return cartItem;
|
||||
},
|
||||
glassPartsCartItem() {
|
||||
let cartItem = null;
|
||||
|
||||
const flattenedGlassPartsLineItems =
|
||||
this.lineItemUtilities.getFlattenedArrayOfLineItemsWithChildParts(
|
||||
this.lineItems.glassParts
|
||||
);
|
||||
|
||||
if (flattenedGlassPartsLineItems.length > 0) {
|
||||
cartItem = {
|
||||
name: null,
|
||||
category: cartItemCategories.GLASS_PARTS,
|
||||
cartItemType: cartItemTypes.GLASS_PARTS,
|
||||
isDisplayed: false,
|
||||
subTotal: 0,
|
||||
salesTax: 0,
|
||||
lineItems: [],
|
||||
};
|
||||
|
||||
flattenedGlassPartsLineItems.forEach((lineItem) => {
|
||||
lineItem.cartItemType = cartItem.cartItemType;
|
||||
cartItem.lineItems.push(lineItem);
|
||||
|
||||
cartItem.subTotal +=
|
||||
(lineItem.kitPrice ?? 0) +
|
||||
(lineItem.laborAmount ?? 0) +
|
||||
(lineItem.sellingPrice ?? 0);
|
||||
|
||||
cartItem.salesTax += lineItem.salesTax ?? 0;
|
||||
});
|
||||
}
|
||||
|
||||
return cartItem;
|
||||
},
|
||||
supportingItemsCartItem() {
|
||||
let cartItem = null;
|
||||
|
||||
if (this.supportingItems.length > 0) {
|
||||
cartItem = {
|
||||
name: null,
|
||||
category: cartItemCategories.SUPPORTING_ITEMS,
|
||||
cartItemType: cartItemTypes.SUPPORTING_ITEMS,
|
||||
isDisplayed: false,
|
||||
subTotal: 0,
|
||||
salesTax: 0,
|
||||
lineItems: [],
|
||||
};
|
||||
|
||||
this.supportingItems.forEach((lineItem) => {
|
||||
lineItem.cartItemType = cartItem.cartItemType;
|
||||
cartItem.lineItems.push(lineItem);
|
||||
|
||||
cartItem.subTotal +=
|
||||
(lineItem.kitPrice ?? 0) +
|
||||
(lineItem.laborAmount ?? 0) +
|
||||
(lineItem.sellingPrice ?? 0);
|
||||
|
||||
cartItem.salesTax += lineItem.salesTax ?? 0;
|
||||
});
|
||||
}
|
||||
|
||||
return cartItem;
|
||||
},
|
||||
recycleFeeCartItemName() {
|
||||
return this.getCmsContent("RecycleFeeTextWidget", "Text");
|
||||
},
|
||||
recycleFeeCartItem() {
|
||||
let cartItem = null;
|
||||
|
||||
const recycleFeeLineItem = this.supportingItems.find(
|
||||
(supportingItem) => supportingItem.partNumber == partTypeStrings.RECYCLE_FEE
|
||||
);
|
||||
|
||||
if (recycleFeeLineItem) {
|
||||
cartItem = {
|
||||
name: this.recycleFeeCartItemName,
|
||||
category: cartItemCategories.SUPPORTING_ITEMS,
|
||||
cartItemType: cartItemTypes.RECYCLE_FEE,
|
||||
isDisplayed: true,
|
||||
subTotal: 0,
|
||||
salesTax: 0,
|
||||
lineItems: [],
|
||||
};
|
||||
|
||||
recycleFeeLineItem.cartItemType = cartItem.cartItemType;
|
||||
cartItem.lineItems.push(recycleFeeLineItem);
|
||||
|
||||
cartItem.subTotal +=
|
||||
(recycleFeeLineItem.kitPrice ?? 0) +
|
||||
(recycleFeeLineItem.laborAmount ?? 0) +
|
||||
(recycleFeeLineItem.sellingPrice ?? 0);
|
||||
|
||||
cartItem.salesTax += recycleFeeLineItem.salesTax ?? 0;
|
||||
}
|
||||
|
||||
return cartItem;
|
||||
},
|
||||
mobileFeeCartItemName() {
|
||||
return this.getCmsContent("MobileServiceTextWidget", "Text");
|
||||
},
|
||||
mobileFeeCartItem() {
|
||||
let cartItem = null;
|
||||
|
||||
const mobileFeeLineItem = this.supportingItems.find(
|
||||
(lineItem) => lineItem.partNumber == partTypeStrings.MOBILE_FEE
|
||||
);
|
||||
|
||||
if (mobileFeeLineItem) {
|
||||
cartItem = {
|
||||
name: this.mobileFeeCartItemName,
|
||||
category: cartItemCategories.SUPPORTING_ITEMS,
|
||||
cartItemType: cartItemTypes.MOBILE_FEE,
|
||||
isDisplayed: true,
|
||||
subTotal: 0,
|
||||
salesTax: 0,
|
||||
lineItems: [],
|
||||
};
|
||||
|
||||
mobileFeeLineItem.cartItemType = cartItem.cartItemType;
|
||||
cartItem.lineItems.push(mobileFeeLineItem);
|
||||
|
||||
cartItem.subTotal +=
|
||||
(mobileFeeLineItem.kitPrice ?? 0) +
|
||||
(mobileFeeLineItem.laborAmount ?? 0) +
|
||||
(mobileFeeLineItem.sellingPrice ?? 0);
|
||||
|
||||
cartItem.salesTax += mobileFeeLineItem.salesTax ?? 0;
|
||||
}
|
||||
|
||||
return cartItem;
|
||||
},
|
||||
removeLinkText() {
|
||||
return "Remove"; // TODO: get from CMS
|
||||
return this.getCmsContent("RemoveCartItemTextWidget", "Text");
|
||||
},
|
||||
recycleLabel() {
|
||||
return "Recycling";
|
||||
recycleFeeText() {
|
||||
return this.getCmsContent("RecycleFeeTextWidget", "Text");
|
||||
},
|
||||
recycleFee() {
|
||||
return "$35.00";
|
||||
salesTaxText() {
|
||||
return this.getCmsContent("SalesTaxTextWidget", "Text");
|
||||
},
|
||||
hasRecycleLineItem() {
|
||||
//TO DO
|
||||
// if (this.lineItems.supportingItems[0].partNumber === "RECYCLE FEE") {
|
||||
// return true;
|
||||
// } else {
|
||||
// return false;
|
||||
// }
|
||||
return true;
|
||||
amountDueText() {
|
||||
return this.getCmsContent("AmountDueTextWidget", "Text");
|
||||
},
|
||||
subtotalText() {
|
||||
return this.getCmsContent("SubtotalTextWidget", "Text");
|
||||
},
|
||||
subTotal() {
|
||||
let subTotal = 0;
|
||||
|
||||
this.lineItems.forEach((lineItem) => {
|
||||
subTotal +=
|
||||
(lineItem.kitPrice ?? 0) +
|
||||
(lineItem.laborAmount ?? 0) +
|
||||
(lineItem.sellingPrice ?? 0);
|
||||
this.cartItems.forEach((cartItem) => {
|
||||
subTotal += cartItem.subTotal;
|
||||
});
|
||||
|
||||
return subTotal;
|
||||
},
|
||||
salesTax() {
|
||||
let salesTax = 0;
|
||||
this.lineItems.forEach((lineItem) => {
|
||||
salesTax += lineItem.salesTax;
|
||||
this.cartItems.forEach((cartItem) => {
|
||||
salesTax += cartItem.salesTax ?? 0;
|
||||
});
|
||||
|
||||
return salesTax;
|
||||
|
|
@ -273,6 +558,14 @@ export default {
|
|||
return this.subTotal + this.salesTax;
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
modelValue: {
|
||||
handler(newValue) {
|
||||
this.lineItems = deepClone(newValue);
|
||||
},
|
||||
deep: true,
|
||||
},
|
||||
},
|
||||
components: {
|
||||
textBlock,
|
||||
textLink,
|
||||
|
|
|
|||
|
|
@ -27,7 +27,7 @@
|
|||
<cart
|
||||
:damage="damageInfo"
|
||||
:availableLineItems="availableLineItems"
|
||||
:lineItems="taxedLineItems"
|
||||
v-model="lineItems"
|
||||
servicePackageOptionsCmsName="ServicePackageTitle"
|
||||
@cart-remove="cartRemove" />
|
||||
|
||||
|
|
@ -90,6 +90,7 @@ import { defineRule } from "vee-validate";
|
|||
import { required } from "@/helpers/validation-rules";
|
||||
import { errorMessages } from "@/constants/error-messages";
|
||||
import { AppointmentTypeStrings } from "@/constants/schedule-constants";
|
||||
import { LineItemUtilities, mapTaxedAvailableLineItemsToStoreFormat } from "../../store";
|
||||
|
||||
defineRule("option-required", required(errorMessages.OPTION_REQUIRED));
|
||||
|
||||
|
|
@ -98,6 +99,7 @@ export default {
|
|||
async beforeRouteEnter(to, from, next) {
|
||||
// Call APIs
|
||||
const cmsContentPromise = fetchCmsContentForPage(to.query.fmgPage);
|
||||
|
||||
const wipersPromise = baseMixin.methods.dispatchStoreActionWithLogging(
|
||||
storeActions.GET_WIPERS,
|
||||
null,
|
||||
|
|
@ -139,14 +141,16 @@ export default {
|
|||
|
||||
const glassParts = store.getters.order.lineItems.glassParts ?? [];
|
||||
|
||||
const availableLineItems = [
|
||||
let availableLineItems = [
|
||||
resultMap.rainDefense,
|
||||
...resultMap.supportingItems,
|
||||
...resultMap.wipers,
|
||||
...glassParts,
|
||||
];
|
||||
|
||||
const pricedAvailableLineItems = await baseMixin.methods.dispatchStoreActionWithLogging(
|
||||
const lineItemsFromStore = store.getters.order.lineItems;
|
||||
|
||||
await baseMixin.methods.dispatchStoreActionWithLogging(
|
||||
storeActions.PRICE_ORDER_ITEMS_AND_SAVE_SERVER_DATA,
|
||||
{
|
||||
availableLineItems: availableLineItems,
|
||||
|
|
@ -155,14 +159,7 @@ export default {
|
|||
false
|
||||
);
|
||||
|
||||
const lineItems = store.getters.order.lineItems;
|
||||
|
||||
const combinedLineItems = [];
|
||||
combinedLineItems.push(lineItems.glassParts ?? []);
|
||||
combinedLineItems.push(lineItems.supportingItems ?? []);
|
||||
combinedLineItems.push(lineItems.vaps ?? []);
|
||||
|
||||
const taxedLineItems = await baseMixin.methods.dispatchStoreActionWithLogging(
|
||||
const taxedAvailableLineItems = await baseMixin.methods.dispatchStoreActionWithLogging(
|
||||
storeActions.TAX_ORDER_ITEMS_AND_SAVE_SERVER_DATA,
|
||||
{
|
||||
billToAccountNumber: "87291",
|
||||
|
|
@ -170,28 +167,30 @@ export default {
|
|||
appointmentType: store.getters.order.serviceLocation.appointmentType,
|
||||
serviceLocationState: store.getters.order.serviceLocation.state,
|
||||
serviceLocationZipCode: store.getters.order.serviceLocation.zipCode,
|
||||
pricedLineItems: combinedLineItems,
|
||||
pricedAvailableLineItems: availableLineItems,
|
||||
},
|
||||
"payment-method",
|
||||
false
|
||||
);
|
||||
|
||||
const lineItemUtilities = new LineItemUtilities();
|
||||
lineItemUtilities.addGuidToLineItemsIfNotAlreadyThere(availableLineItems);
|
||||
|
||||
const lineItems = mapTaxedAvailableLineItemsToStoreFormat(
|
||||
availableLineItems,
|
||||
lineItemsFromStore
|
||||
);
|
||||
|
||||
// Call the "next" function to complete the transition to this page.
|
||||
next((vm) => {
|
||||
vm.cartItems = combinedLineItems; // TOBEREMOVED BY AJC IN CSR-1384
|
||||
|
||||
vm.setCmsContent(resultMap.cmsContent);
|
||||
vm.availableLineItems = pricedAvailableLineItems;
|
||||
vm.taxedLineItems = taxedLineItems;
|
||||
vm.availableLineItems = taxedAvailableLineItems;
|
||||
vm.lineItems = lineItems;
|
||||
});
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
cartItems: [], // TOBEREMOVED BY AJC IN CSR-1384
|
||||
|
||||
lineItems: [],
|
||||
taxedLineItems: [], // temporary, for use by cart.vue
|
||||
availableLineItems: [],
|
||||
paymentMethodInternalModel: this.getPaymentMethodFromStore(),
|
||||
};
|
||||
|
|
@ -262,17 +261,6 @@ export default {
|
|||
return paymentMethods.LATER;
|
||||
}
|
||||
},
|
||||
cartRemove(item) {
|
||||
const matchedIndices = [];
|
||||
this.cartItems.forEach((cartItem, i) => {
|
||||
if (cartItem.partType === item.partType) {
|
||||
matchedIndices.push(i);
|
||||
}
|
||||
});
|
||||
this.cartItems = this.cartItems.filter((cartItem, index) => {
|
||||
return cartItem.partType !== item.partType;
|
||||
});
|
||||
},
|
||||
backButtonAction() {
|
||||
this.$router.navigateWithoutSaving(this.navigationScenarios.CLICKED_BACK, this.$route);
|
||||
},
|
||||
|
|
|
|||
|
|
@ -1291,6 +1291,7 @@ export const actions = {
|
|||
});
|
||||
|
||||
syncLineItemIds(response.data, context.getters.order.lineItems.vaps);
|
||||
console.log(response.data);
|
||||
return response;
|
||||
},
|
||||
|
||||
|
|
@ -2151,9 +2152,9 @@ export const actions = {
|
|||
|
||||
context.commit(storeMutations.UPDATE_LINE_ITEMS_SERVER_DATA, response.data.serverData);
|
||||
|
||||
const pricedLineItems = addPricesToLineItems(availableLineItems, response.data.lineItems);
|
||||
availableLineItems = addPricesToLineItems(availableLineItems, response.data.lineItems);
|
||||
|
||||
return pricedLineItems;
|
||||
return availableLineItems;
|
||||
},
|
||||
|
||||
// Tax order actions
|
||||
|
|
@ -2166,14 +2167,15 @@ export const actions = {
|
|||
appointmentType,
|
||||
serviceLocationState,
|
||||
serviceLocationZipCode,
|
||||
pricedLineItems,
|
||||
pricedAvailableLineItems,
|
||||
},
|
||||
pageNameToLog,
|
||||
}
|
||||
) {
|
||||
// const flattenedLineItemsWithChildParts =
|
||||
// getFlattenedArrayOfLineItemsWithChildParts(pricedLineItems);
|
||||
const lineItemsWithOnlyPriceInfo = pricedLineItems.map((lineItem) => ({
|
||||
|
||||
const lineItemsWithOnlyPriceInfo = pricedAvailableLineItems.map((lineItem) => ({
|
||||
partNumber: lineItem.partNumber,
|
||||
laborAmount: lineItem.laborAmount ?? 0,
|
||||
kitPrice: lineItem.kitPrice ?? 0,
|
||||
|
|
@ -2207,14 +2209,22 @@ export const actions = {
|
|||
pageNameToLog: pageNameToLog,
|
||||
});
|
||||
|
||||
context.commit(storeMutations.UPDATE_LINE_ITEMS_SERVER_DATA, response.data.serverData);
|
||||
//context.commit(storeMutations.UPDATE_LINE_ITEMS_SERVER_DATA, response.data.serverData);
|
||||
|
||||
const taxedLineItems = addTaxesToPricedLineItems(
|
||||
pricedLineItems,
|
||||
// pricedLineItems.forEach((pricedLineItem) => {
|
||||
// for (const [key, value] of Object.entries(storeLineItems)) {
|
||||
// storeLineItems[key] = pricedLineItem;
|
||||
// }
|
||||
// });
|
||||
|
||||
// console.log(pricedLineItems)
|
||||
|
||||
pricedAvailableLineItems = addTaxesToPricedLineItems(
|
||||
pricedAvailableLineItems,
|
||||
response.data.taxedLineItems
|
||||
);
|
||||
|
||||
return taxedLineItems;
|
||||
return pricedAvailableLineItems;
|
||||
},
|
||||
|
||||
async validateOrderPromoAndSaveServerData(
|
||||
|
|
@ -2533,34 +2543,67 @@ function addPricesToLineItems(lineItems, pricingLineItems) {
|
|||
return lineItems;
|
||||
}
|
||||
|
||||
function addTaxesToPricedLineItems(lineItems, taxingLineItems) {
|
||||
const taxedLineItems = deepClone(lineItems);
|
||||
taxedLineItems.forEach((lineItem) => {
|
||||
function addTaxesToPricedLineItems(pricedLineItems, taxingLineItems = []) {
|
||||
pricedLineItems.forEach((pricedLineItem) => {
|
||||
let lineItemIndex = taxingLineItems.findIndex(
|
||||
(taxingLineItem) => taxingLineItem.partNumber === lineItem.partNumber
|
||||
(taxingLineItem) => taxingLineItem.partNumber === pricedLineItem.partNumber
|
||||
);
|
||||
|
||||
if (lineItem.childParts) {
|
||||
addTaxesToPricedLineItems(lineItem.childParts, taxingLineItems);
|
||||
if (pricedLineItem.childParts) {
|
||||
addTaxesToPricedLineItems(pricedLineItem.childParts, taxingLineItems);
|
||||
}
|
||||
|
||||
let taxedLineItem = taxingLineItems.splice(lineItemIndex, 1)[0];
|
||||
lineItem.salesTax = taxedLineItem.salesTax;
|
||||
pricedLineItem.salesTax = taxedLineItem?.salesTax ?? 0;
|
||||
});
|
||||
|
||||
return taxedLineItems;
|
||||
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);
|
||||
|
||||
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 (availableLineItem) {
|
||||
lineItemsInCategory[lineItemIndex].salesTax = availableLineItem.salesTax;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return lineItems;
|
||||
}
|
||||
|
||||
function getArrayOfAllLineItems(lineItems) {
|
||||
let consolidatedLineItemsArray = [];
|
||||
|
||||
if (lineItems.glassParts != null)
|
||||
consolidatedLineItemsArray = [...consolidatedLineItemsArray, ...lineItems.glassParts];
|
||||
|
||||
if (lineItems.supportingItems != null)
|
||||
consolidatedLineItemsArray = [...consolidatedLineItemsArray, ...lineItems.supportingItems];
|
||||
|
||||
if (lineItems.vaps != null)
|
||||
consolidatedLineItemsArray = [...consolidatedLineItemsArray, ...lineItems.vaps];
|
||||
|
||||
if (lineItems.promos != null)
|
||||
consolidatedLineItemsArray = [...consolidatedLineItemsArray, ...lineItems.promos];
|
||||
|
||||
return consolidatedLineItemsArray;
|
||||
}
|
||||
|
||||
|
|
@ -2575,6 +2618,7 @@ function getFlattenedArrayOfLineItemsWithChildParts(lineItems) {
|
|||
];
|
||||
}
|
||||
});
|
||||
|
||||
return flattenedArray;
|
||||
}
|
||||
|
||||
|
|
@ -2621,7 +2665,9 @@ function syncLineItemIds(lineItemsWithoutIds, lineItemsWithIds) {
|
|||
return;
|
||||
}
|
||||
lineItemsWithoutIds.forEach((noId) => {
|
||||
debugger; // eslint-disable-line no-debugger
|
||||
lineItemsWithIds.forEach((withId) => {
|
||||
debugger; // eslint-disable-line no-debugger
|
||||
if (noId.partNumber === withId.partNumber && noId.partType === withId.partType) {
|
||||
noId.id = withId.id;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue