1232 lines
44 KiB
Vue
1232 lines
44 KiB
Vue
<template>
|
|
<div class="cart">
|
|
<div class="px-0">
|
|
<!-- set class to 'expaned' on line 7 so cart is open on page load. This may be temporary -->
|
|
<div
|
|
class="row vin-toggle flex align-items-center pt-4"
|
|
:class="[isExpanded ? '' : 'expanded']"
|
|
@click="toggleIsExpanded()">
|
|
<a
|
|
aria-label="expand cart"
|
|
href="javascript:void(0)"
|
|
class="col d-flex justify-content-between py-0">
|
|
<span class="label">{{ amountDueText }}</span>
|
|
<span class="label amount-due">{{
|
|
getLineItemAmount(amountDue, showCoverageAsPending)
|
|
}}</span>
|
|
</a>
|
|
</div>
|
|
<div class="cart-panel">
|
|
<div class="price-table">
|
|
<!-- Deductible, if applicable -->
|
|
<div v-if="deductibleLineItem" class="deductible">
|
|
<textBlock cmsWidgetName="DeductibleTextWidget" />
|
|
<span>
|
|
{{
|
|
getLineItemAmount(
|
|
deductibleLineItem.subTotal,
|
|
showCoverageAsPending
|
|
)
|
|
}}
|
|
</span>
|
|
</div>
|
|
|
|
<!-- Service Type -->
|
|
<div class="service-type">
|
|
<textBlock :cmsWidgetName="servicePackageTitleWidget" />
|
|
<span>
|
|
{{ getLineItemAmount(packagePrice) }}
|
|
</span>
|
|
<span
|
|
v-if="packagePriceWithoutDiscount > packagePrice"
|
|
class="struck-out-price">
|
|
{{ getLineItemAmount(packagePriceWithoutDiscount) }}
|
|
</span>
|
|
</div>
|
|
|
|
<!-- Packaged Cart Items -->
|
|
<div
|
|
v-for="(cartItem, i) in packageCartItems"
|
|
:key="i"
|
|
class="packaged-cart-item">
|
|
<span
|
|
><span :class="cartItem.category === 'promos' ? 'promo' : ''">{{
|
|
cartItem.name
|
|
}}</span></span
|
|
>
|
|
<textLink
|
|
v-if="allowItemRemoval"
|
|
ref="removeLink"
|
|
linkType="text"
|
|
:text="removeLinkText"
|
|
href="javascript:void(0)"
|
|
@click-event="removeItem(cartItem.cartItemType, cartItem.category)">
|
|
<template v-slot:after-text>
|
|
<span class="sr-only">{{ cartItem.name }}</span>
|
|
</template>
|
|
</textLink>
|
|
</div>
|
|
|
|
<!-- Nonpackaged Cart Items -->
|
|
<div
|
|
v-for="(cartItem, i) in nonpackageCartItems"
|
|
:key="i"
|
|
class="non-packaged-cart-item"
|
|
:class="[
|
|
i % 2 == 0 ? 'even' : 'odd',
|
|
cartItem.isRemovable ? 'removable-cart-item' : '',
|
|
]">
|
|
<span v-if="cartItem != recycleFeeCartItem">{{ cartItem.name }}</span>
|
|
<textLink
|
|
v-if="allowItemRemoval && cartItem.isRemovable"
|
|
ref="removeLink"
|
|
linkType="text"
|
|
:text="removeLinkText"
|
|
href="javascript:void(0)"
|
|
@click-event="removeItem(cartItem.cartItemType, cartItem.category)" />
|
|
<textLink
|
|
v-else-if="
|
|
cartItem == recycleFeeCartItem && recyclingModalCmsWidgetName
|
|
"
|
|
linkType="text"
|
|
:text="recycleFeeCartItem.name"
|
|
href="javascript:void(0)"
|
|
@click-event="openModal(recyclingModalCmsWidgetName)" />
|
|
<span v-else-if="cartItem == recycleFeeCartItem">
|
|
{{ recycleFeeCartItem.name }}
|
|
</span>
|
|
<span
|
|
v-if="
|
|
!showCoverageAsVerified ||
|
|
(showCoverageAsVerified && !cartItem.isCoveredByInsurance)
|
|
"
|
|
>{{
|
|
getLineItemAmount(cartItem.subTotal, null, cartItem.category)
|
|
}}</span
|
|
>
|
|
</div>
|
|
|
|
<!-- Sub total, sales tax, total columns -->
|
|
<div class="sub-total">
|
|
<span>{{ subtotalText }}</span>
|
|
<span>{{ getLineItemAmount(subTotal, showCoverageAsPending) }}</span>
|
|
</div>
|
|
<div class="sales-tax">
|
|
<span>{{ salesTaxText }}</span>
|
|
<span>{{ getLineItemAmount(salesTax) }}</span>
|
|
</div>
|
|
<div v-if="showAsPaid" class="amount-paid">
|
|
<span>{{ amountPaidText }}</span>
|
|
<span>{{ getLineItemAmount(amountPaid) }}</span>
|
|
</div>
|
|
<div class="amount-due">
|
|
<span>{{ amountDueText }}</span>
|
|
<span>{{ getLineItemAmount(amountDue, showCoverageAsPending) }}</span>
|
|
</div>
|
|
</div>
|
|
<div
|
|
v-if="insuranceCompanyName && (showCoverageAsVerified || showCoverageAsPending)"
|
|
class="insurance-company-name caption">
|
|
{{ insuranceCompanyName }}
|
|
</div>
|
|
<promoModalQuestion
|
|
ref="promoModalQuestion"
|
|
class="small mt-4"
|
|
v-model="lineItems"
|
|
:addableVaps="availableVaps"
|
|
:pageName="pageName"
|
|
modalWidgetName="PromoModalWidget" />
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="my-2 lh-1 applied-promo-tag"
|
|
v-for="(promoCode, i) in this.getPromoCodeList()"
|
|
:key="i">
|
|
<span class="caption"
|
|
>Promo code <span class="promo-code">{{ promoCode }}</span> applied
|
|
</span>
|
|
</div>
|
|
<contentGroupModal ref="RecycleModal" cmsWidgetName="RecycleModal">
|
|
<textBlock cmsWidgetName="RecycleTextBlock" />
|
|
</contentGroupModal>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
// Components
|
|
import textLink from "@/ux-components/text-link/text-link";
|
|
import textBlock from "@/digital-components/text-block/text-block";
|
|
import contentGroupModal from "@/fmg-components/content-group-modal/content-group-modal";
|
|
import promoModalQuestion from "@/fmg-components/promo-modal-question/promo-modal-question";
|
|
|
|
// Mixins
|
|
import baseMixin from "@/mixins/base-mixin.js";
|
|
|
|
// Helpers
|
|
import { deepClone } from "@/helpers/object-helper";
|
|
import { getHighestFullySatisfiedTier, getPackageContents } from "@/helpers/service-package-helper";
|
|
import { getPromoCodeWithoutBundleIdentifier } from "@/helpers/promotions-helper";
|
|
|
|
// Constants
|
|
import { partTypeStrings } from "@/constants/part-type-strings";
|
|
import { cartItemCategories } from "@/constants/cart-item-categories";
|
|
import { cartItemTypes } from "@/constants/cart-item-types";
|
|
import { coverageStatus, cartItemTypesCoveredByInsurance } from "@/constants/insurance";
|
|
|
|
export default {
|
|
name: "cart",
|
|
props: {
|
|
modelValue: Object,
|
|
damage: Object,
|
|
servicePackageOptionsCmsName: String,
|
|
availableVaps: Object,
|
|
pageName: String,
|
|
allowItemRemoval: Boolean,
|
|
recyclingModalCmsWidgetName: String,
|
|
showAsPaid: Boolean,
|
|
isInsurance: Boolean,
|
|
insuranceDeductible: Number,
|
|
insuranceCompanyName: String,
|
|
showInsuranceCoverageAs: String,
|
|
},
|
|
data() {
|
|
return {
|
|
isExpanded: false,
|
|
currencyFormatter: new Intl.NumberFormat("en-US", {
|
|
style: "currency",
|
|
currency: "USD",
|
|
}),
|
|
};
|
|
},
|
|
methods: {
|
|
openModal(modalName) {
|
|
this.$refs[modalName].openModal();
|
|
},
|
|
toggleIsExpanded() {
|
|
this.isExpanded = !this.isExpanded;
|
|
},
|
|
getVapsPrice(packageName) {
|
|
const vapsItems = this.getVapsCartItemsForSelectedPackage(packageName);
|
|
|
|
let subTotal = 0;
|
|
|
|
vapsItems.forEach((item) => {
|
|
subTotal += item.subTotal;
|
|
});
|
|
|
|
return subTotal;
|
|
},
|
|
getPromoDiscounts() {
|
|
const promoItems = this.promoCartItems;
|
|
|
|
let subTotal = 0;
|
|
|
|
promoItems?.forEach((item) => {
|
|
subTotal += item.subTotal;
|
|
});
|
|
|
|
return subTotal;
|
|
},
|
|
getServicePackageDiscount() {
|
|
const servicePackageDiscountLineItems = this.servicePackageDiscountCartItem;
|
|
let subTotal = 0;
|
|
|
|
subTotal += servicePackageDiscountLineItems?.subTotal ?? 0;
|
|
return subTotal;
|
|
},
|
|
getVapsCartItemsForSelectedPackage(packageName) {
|
|
const packageContentTypes = getPackageContents(
|
|
this.glassToReplace,
|
|
this.availableLineItems,
|
|
this.isRepair,
|
|
packageName
|
|
);
|
|
|
|
let vapsCartItemsForSelectedPackage = [];
|
|
|
|
this.cartItems.forEach((cartItem) => {
|
|
packageContentTypes.forEach((vapType) => {
|
|
if (cartItem.cartItemType.includes(vapType)) {
|
|
vapsCartItemsForSelectedPackage.push(cartItem);
|
|
}
|
|
});
|
|
});
|
|
|
|
if (this.promoCartItems) {
|
|
this.promoCartItems.forEach((promoCartItem) => {
|
|
vapsCartItemsForSelectedPackage.push(promoCartItem);
|
|
});
|
|
}
|
|
|
|
return vapsCartItemsForSelectedPackage;
|
|
},
|
|
getCmsContentForVapsType(vapsType) {
|
|
const vapsItemDescriptions = this.getCmsContent("VapsItemDescriptions", "Answers");
|
|
|
|
if (!vapsItemDescriptions) {
|
|
return "";
|
|
}
|
|
|
|
const vapsTypeName = vapsItemDescriptions.find((entry) => entry.Name === vapsType);
|
|
|
|
return vapsTypeName.Text;
|
|
},
|
|
|
|
getLineItemAmount(amount, useVerifyingText, category) {
|
|
if (useVerifyingText) return this.verifyingCoverageText;
|
|
return category == "promos" || category == "servicePackageDiscount"
|
|
? "(" + this.currencyFormatter.format(amount * -1) + ")"
|
|
: this.currencyFormatter.format(amount);
|
|
},
|
|
|
|
removeItem(cartItemType, category) {
|
|
this.lineItems[category] = this.lineItems[category].filter(
|
|
(lineItemsToKeep) => lineItemsToKeep.cartItemType != cartItemType
|
|
);
|
|
},
|
|
getPromoCodeList() {
|
|
if (this.$refs["promoModalQuestion"]) {
|
|
return this.$refs["promoModalQuestion"].getPromoCodeList();
|
|
}
|
|
return [];
|
|
},
|
|
},
|
|
computed: {
|
|
lineItems: {
|
|
get: function () {
|
|
return this.modelValue;
|
|
},
|
|
set: function (newValue) {
|
|
this.$emit("update:modelValue", newValue);
|
|
},
|
|
},
|
|
lineItemsWithoutRecal() {
|
|
if (!this.lineItems || this.lineItems.length < 1) return;
|
|
const lineItemsCopy = this.lineItems;
|
|
lineItemsCopy.supportingItems = baseMixin.methods.filterOutRecalibration(this.lineItems.supportingItems);
|
|
return lineItemsCopy;
|
|
},
|
|
showCoverageAsPending() {
|
|
return this.showInsuranceCoverageAs === coverageStatus.PENDING;
|
|
},
|
|
showCoverageAsVerified() {
|
|
return this.showInsuranceCoverageAs === coverageStatus.VERIFIED;
|
|
},
|
|
currentDeductible() {
|
|
const deductible = this.insuranceDeductible;
|
|
if (!(deductible === 0 || deductible > 0)) {
|
|
global.$logger.logError("Error: currentDeductible should not be null");
|
|
}
|
|
return deductible;
|
|
},
|
|
screenReaderTotalAmountDueText() {
|
|
return this.getCmsContent("ScreenReaderTotalAmountDueWidget", "Text");
|
|
},
|
|
screenReaderPackagePriceText() {
|
|
return this.getCmsContent("ScreenReaderPackagePriceTextWidget", "Text");
|
|
},
|
|
screenReaderRemoveVapsText() {
|
|
return this.getCmsContent("ScreenReaderRemoveVapsWidget", "Text");
|
|
},
|
|
screenReaderRecycleFeeText() {
|
|
return this.getCmsContent("ScreenReaderRecycleFeeWidget", "Text");
|
|
},
|
|
screenReaderSubTotalText() {
|
|
return this.getCmsContent("ScreenReaderSubTotalWidget", "Text");
|
|
},
|
|
screenReaderAmountPaidText() {
|
|
return this.getCmsContent("ScreenReaderAmountPaidWidget", "Text");
|
|
},
|
|
screenReaderSalesTaxText() {
|
|
return this.getCmsContent("ScreenReaderSalesTaxWidget", "Text");
|
|
},
|
|
availableLineItems() {
|
|
if (!this.lineItems || this.lineItems.length < 1) {
|
|
return [];
|
|
}
|
|
return [
|
|
...(this.lineItems.glassParts ?? []),
|
|
...(this.lineItems.supportingItems ?? []),
|
|
...(this.availableVaps ?? []),
|
|
];
|
|
},
|
|
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.glassPartCartItems) {
|
|
this.glassPartCartItems.forEach((glassPartCartItem) => {
|
|
cartItems.push(glassPartCartItem);
|
|
});
|
|
}
|
|
|
|
if (this.otherSupportingItemsCartItem) {
|
|
cartItems.push(this.otherSupportingItemsCartItem);
|
|
}
|
|
|
|
if (this.recycleFeeCartItem) {
|
|
cartItems.push(this.recycleFeeCartItem);
|
|
}
|
|
|
|
if (this.suppliesRepairCartItem) {
|
|
cartItems.push(this.suppliesRepairCartItem);
|
|
}
|
|
|
|
if (this.mobileFeeCartItem) {
|
|
cartItems.push(this.mobileFeeCartItem);
|
|
}
|
|
|
|
if (this.servicePackageDiscountCartItem) {
|
|
cartItems.push(this.servicePackageDiscountCartItem);
|
|
}
|
|
|
|
if (this.premiumAppointmentDiscountCartItem) {
|
|
cartItems.push(this.premiumAppointmentDiscountCartItem);
|
|
}
|
|
|
|
if (this.promoCartItems) {
|
|
this.promoCartItems.forEach((promoCartItem) => {
|
|
cartItems.push(promoCartItem);
|
|
});
|
|
}
|
|
|
|
return cartItems;
|
|
},
|
|
},
|
|
servicePackageTitleWidget() {
|
|
const servicePackageNames = this.getCmsContent(
|
|
this.servicePackageOptionsCmsName,
|
|
"Answers"
|
|
);
|
|
|
|
if (!servicePackageNames) {
|
|
return "";
|
|
}
|
|
|
|
const currentPackage = servicePackageNames.find(
|
|
(entry) => entry.Name === this.packageLevel
|
|
);
|
|
|
|
return currentPackage.SubWidgetName;
|
|
},
|
|
packageLevel() {
|
|
const tier = getHighestFullySatisfiedTier(
|
|
this.glassToReplace,
|
|
this.availableLineItems,
|
|
this.isRepair,
|
|
this.vaps
|
|
);
|
|
|
|
return tier;
|
|
},
|
|
packagePrice() {
|
|
let packagePrice = 0;
|
|
|
|
if (!this.showCoverageAsVerified && !this.showCoverageAsPending) {
|
|
packagePrice = baseMixin.methods.getTierOnePackagePrice(
|
|
baseMixin.methods.filterOutFees(this.availableLineItems)
|
|
);
|
|
}
|
|
|
|
packagePrice += this.getVapsPrice(this.packageLevel);
|
|
if (this.servicePackageDiscountCartItem) {
|
|
packagePrice -= this.getServicePackageDiscount();
|
|
}
|
|
|
|
return packagePrice;
|
|
},
|
|
packagePriceWithoutDiscount() {
|
|
let fullPrice = this.packagePrice;
|
|
let discount = this.getPromoDiscounts();
|
|
fullPrice += Math.abs(discount);
|
|
return fullPrice;
|
|
},
|
|
isRepair() {
|
|
if (!this.damage) {
|
|
return;
|
|
}
|
|
|
|
return this.damage.isRepair;
|
|
},
|
|
glassToReplace() {
|
|
if (!this.damage) {
|
|
return;
|
|
}
|
|
|
|
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 : [];
|
|
},
|
|
supportingItems() {
|
|
const supportingItems = this.lineItems?.supportingItems;
|
|
return supportingItems?.length > 0 ? supportingItems : [];
|
|
},
|
|
promos() {
|
|
const promos = this.lineItems?.promos;
|
|
return promos?.length > 0 ? promos : [];
|
|
},
|
|
deductibleLineItemName() {
|
|
return this.getCmsContent("DeductibleTextWidget", "Text");
|
|
},
|
|
deductibleLineItem() {
|
|
let lineItem = null;
|
|
|
|
if (this.showCoverageAsVerified || this.showCoverageAsPending) {
|
|
lineItem = {
|
|
name: this.deductibleLineItemName,
|
|
subTotal: this.currentDeductible,
|
|
};
|
|
}
|
|
|
|
return lineItem;
|
|
},
|
|
verifyingCoverageText() {
|
|
return this.getCmsContent("VerifyingCoverageTextWidget", "Text");
|
|
},
|
|
// Cart Item Groupings
|
|
packageCartItems() {
|
|
return this.getVapsCartItemsForSelectedPackage(this.packageLevel);
|
|
},
|
|
nonpackageCartItems() {
|
|
const nonpackageCartItems = [];
|
|
|
|
this.cartItems.forEach((cartItem) => {
|
|
if (!this.packageCartItems.find((packageCartItem) => packageCartItem == cartItem)) {
|
|
if (cartItem.isDisplayed) {
|
|
nonpackageCartItems.push(cartItem);
|
|
}
|
|
}
|
|
});
|
|
return nonpackageCartItems;
|
|
},
|
|
// Individual Cart Items
|
|
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_WIPERS,
|
|
isDisplayed: true,
|
|
isRemovable: true,
|
|
subTotal: 0,
|
|
salesTax: 0,
|
|
lineItems: [],
|
|
isCoveredByInsurance: cartItemTypesCoveredByInsurance.includes(
|
|
cartItemTypes.FRONT_WIPERS
|
|
),
|
|
};
|
|
|
|
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_WIPERS,
|
|
isDisplayed: true,
|
|
isRemovable: true,
|
|
subTotal: 0,
|
|
salesTax: 0,
|
|
lineItems: [],
|
|
isCoveredByInsurance: cartItemTypesCoveredByInsurance.includes(
|
|
cartItemTypes.REAR_WIPERS
|
|
),
|
|
};
|
|
|
|
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,
|
|
isRemovable: true,
|
|
subTotal: 0,
|
|
salesTax: 0,
|
|
lineItems: [],
|
|
isCoveredByInsurance: cartItemTypesCoveredByInsurance.includes(
|
|
cartItemTypes.RAIN_DEFENSE
|
|
),
|
|
};
|
|
|
|
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;
|
|
},
|
|
glassPartCartItems() {
|
|
const glassPartCartItems = [];
|
|
|
|
if (this.glassParts.length > 0) {
|
|
this.glassParts.forEach((lineItem) => {
|
|
let cartItem = {
|
|
name: null,
|
|
category: cartItemCategories.GLASS_PARTS,
|
|
cartItemType: cartItemTypes.GLASS_PARTS,
|
|
isDisplayed: false,
|
|
isRemovable: false,
|
|
subTotal:
|
|
(lineItem.kitPrice ?? 0) +
|
|
(lineItem.laborAmount ?? 0) +
|
|
(lineItem.sellingPrice ?? 0),
|
|
salesTax: lineItem.salesTax ?? 0,
|
|
lineItems: [],
|
|
isCoveredByInsurance: cartItemTypesCoveredByInsurance.includes(
|
|
cartItemTypes.GLASS_PARTS
|
|
),
|
|
};
|
|
|
|
if (lineItem.childParts?.length > 0) {
|
|
lineItem.childParts.forEach((childPartLineItem) => {
|
|
cartItem.subTotal +=
|
|
(childPartLineItem.kitPrice ?? 0) +
|
|
(childPartLineItem.laborAmount ?? 0) +
|
|
(childPartLineItem.sellingPrice ?? 0);
|
|
|
|
cartItem.salesTax += childPartLineItem.salesTax;
|
|
});
|
|
}
|
|
|
|
glassPartCartItems.push(cartItem);
|
|
});
|
|
}
|
|
|
|
return glassPartCartItems;
|
|
},
|
|
recycleFeeCartItemName() {
|
|
return this.getCmsContent("RecycleFeeTextWidget", "Text");
|
|
},
|
|
requiresRecycleFeeCartItem() {
|
|
return !this.isRepair;
|
|
},
|
|
recycleFeeCartItem() {
|
|
let cartItem = null;
|
|
|
|
let recycleFeeLineItem = this.supportingItems.find(
|
|
(supportingItem) => supportingItem.partType == partTypeStrings.REPLACE_FEE
|
|
);
|
|
|
|
if (!recycleFeeLineItem && this.requiresRecycleFeeCartItem) {
|
|
recycleFeeLineItem = {
|
|
partNumber: partTypeStrings.RECYCLE_FEE,
|
|
partType: partTypeStrings.REPLACE_FEE,
|
|
laborAmount: 0,
|
|
kitPrice: 0,
|
|
sellingPrice: 0,
|
|
salesTax: 0,
|
|
};
|
|
}
|
|
|
|
if (recycleFeeLineItem) {
|
|
cartItem = {
|
|
name: this.recycleFeeCartItemName,
|
|
category: cartItemCategories.SUPPORTING_ITEMS,
|
|
cartItemType: cartItemTypes.REPLACE_FEE,
|
|
isDisplayed: true,
|
|
isRemovable: false,
|
|
subTotal: 0,
|
|
salesTax: 0,
|
|
lineItems: [],
|
|
isCoveredByInsurance: cartItemTypesCoveredByInsurance.includes(
|
|
cartItemTypes.REPLACE_FEE
|
|
),
|
|
};
|
|
|
|
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;
|
|
},
|
|
suppliesRepairCartItemName() {
|
|
return this.getCmsContent("SuppliesRepairTextWidget", "Text");
|
|
},
|
|
suppliesRepairCartItem() {
|
|
let cartItem = null;
|
|
|
|
const suppliesRepairLineItem = this.supportingItems.find(
|
|
(supportingItem) =>
|
|
supportingItem.partType == partTypeStrings.REPAIR_FEE &&
|
|
supportingItem.partNumber != "WSREPAIR"
|
|
);
|
|
|
|
if (suppliesRepairLineItem) {
|
|
cartItem = {
|
|
name: this.suppliesRepairCartItemName,
|
|
category: cartItemCategories.SUPPORTING_ITEMS,
|
|
cartItemType: cartItemTypes.SUPPLIES_REPAIR,
|
|
isDisplayed: true,
|
|
isRemovable: false,
|
|
subTotal: 0,
|
|
salesTax: 0,
|
|
lineItems: [],
|
|
isCoveredByInsurance: cartItemTypesCoveredByInsurance.includes(
|
|
cartItemTypes.SUPPLIES_REPAIR
|
|
),
|
|
};
|
|
|
|
suppliesRepairLineItem.cartItemType = cartItem.cartItemType;
|
|
cartItem.lineItems.push(suppliesRepairLineItem);
|
|
|
|
cartItem.subTotal +=
|
|
(suppliesRepairLineItem.kitPrice ?? 0) +
|
|
(suppliesRepairLineItem.laborAmount ?? 0) +
|
|
(suppliesRepairLineItem.sellingPrice ?? 0);
|
|
|
|
cartItem.salesTax = suppliesRepairLineItem.salesTax ?? 0;
|
|
}
|
|
|
|
return cartItem;
|
|
},
|
|
mobileFeeCartItemName() {
|
|
return this.getCmsContent("MobileServiceTextWidget", "Text");
|
|
},
|
|
mobileFeeCartItem() {
|
|
let cartItem = null;
|
|
const mobileFeeLineItem = this.supportingItems.find(
|
|
(lineItem) => lineItem.partType == partTypeStrings.MOBILE_FEE
|
|
);
|
|
|
|
var mobileTotal =
|
|
(mobileFeeLineItem?.kitPrice ?? 0) +
|
|
(mobileFeeLineItem?.laborAmount ?? 0) +
|
|
(mobileFeeLineItem?.sellingPrice ?? 0);
|
|
|
|
if (mobileFeeLineItem && mobileTotal > 0) {
|
|
cartItem = {
|
|
name: this.mobileFeeCartItemName,
|
|
category: cartItemCategories.SUPPORTING_ITEMS,
|
|
cartItemType: cartItemTypes.MOBILE_FEE,
|
|
isDisplayed: true,
|
|
isRemovable: false,
|
|
subTotal: 0,
|
|
salesTax: 0,
|
|
lineItems: [],
|
|
isCoveredByInsurance: cartItemTypesCoveredByInsurance.includes(
|
|
cartItemTypes.MOBILE_FEE
|
|
),
|
|
};
|
|
mobileFeeLineItem.cartItemType = cartItem.cartItemType;
|
|
cartItem.lineItems.push(mobileFeeLineItem);
|
|
cartItem.subTotal += mobileTotal;
|
|
cartItem.salesTax += mobileFeeLineItem.salesTax ?? 0;
|
|
}
|
|
return cartItem;
|
|
},
|
|
servicePackageDiscountCartItemName() {
|
|
return this.getCmsContent("ServicePackageDiscountTextWidget", "Text");
|
|
},
|
|
servicePackageDiscountCartItem() {
|
|
let cartItem = null;
|
|
|
|
const servicePackageDiscountLineItem = this.supportingItems.find(
|
|
(lineItem) => lineItem.partType == partTypeStrings.SERVICE_PACKAGE_DISCOUNT
|
|
);
|
|
|
|
if (servicePackageDiscountLineItem) {
|
|
cartItem = {
|
|
name:
|
|
this.servicePackageDiscountCartItemName +
|
|
Math.abs(
|
|
baseMixin.methods.getTotalLineItemPrice(servicePackageDiscountLineItem)
|
|
),
|
|
category: cartItemCategories.SERVICE_PACKAGE_DISCOUNT,
|
|
cartItemType: cartItemTypes.SERVICE_PACKAGE_DISCOUNT,
|
|
isDisplayed: true,
|
|
isRemovable: false,
|
|
subTotal: 0,
|
|
salesTax: 0,
|
|
lineItems: [],
|
|
isCoveredByInsurance: false,
|
|
};
|
|
|
|
servicePackageDiscountLineItem.cartItemType = cartItem.cartItemType;
|
|
cartItem.lineItems.push(servicePackageDiscountLineItem);
|
|
|
|
cartItem.subTotal +=
|
|
(servicePackageDiscountLineItem.kitPrice ?? 0) +
|
|
(servicePackageDiscountLineItem.laborAmount ?? 0) +
|
|
(servicePackageDiscountLineItem.sellingPrice ?? 0);
|
|
|
|
cartItem.salesTax += servicePackageDiscountLineItem.salesTax ?? 0;
|
|
}
|
|
|
|
return cartItem;
|
|
},
|
|
otherSupportingItemsCartItem() {
|
|
let cartItem = null;
|
|
|
|
const otherSupportingItems = this.supportingItems.filter((item) => {
|
|
return item.partType != partTypeStrings.SERVICE_PACKAGE_DISCOUNT;
|
|
});
|
|
// Don't include fees they are part of the package total
|
|
let otherSupportingItemsLineItems =
|
|
baseMixin.methods.filterOutFees(otherSupportingItems);
|
|
|
|
if (otherSupportingItemsLineItems.length > 0) {
|
|
cartItem = {
|
|
name: null,
|
|
category: cartItemCategories.SUPPORTING_ITEMS,
|
|
cartItemType: cartItemTypes.SUPPORTING_ITEMS,
|
|
isDisplayed: false,
|
|
isRemovable: false,
|
|
subTotal: 0,
|
|
salesTax: 0,
|
|
lineItems: [],
|
|
isCoveredByInsurance: cartItemTypesCoveredByInsurance.includes(
|
|
cartItemTypes.SUPPORTING_ITEMS
|
|
),
|
|
};
|
|
|
|
otherSupportingItemsLineItems.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;
|
|
},
|
|
premiumAppointmentDiscountCartItemName() {
|
|
return this.getCmsContent("PremiumAppointmentTextWidget", "Text");
|
|
},
|
|
premiumAppointmentDiscountCartItem() {
|
|
let cartItem = null;
|
|
|
|
const premiumAppointmentDiscountLineItem = this.supportingItems.find(
|
|
(lineItem) => lineItem.partType == partTypeStrings.EARLY_BIRD
|
|
);
|
|
|
|
if (premiumAppointmentDiscountLineItem) {
|
|
cartItem = {
|
|
name: this.premiumAppointmentDiscountCartItemName,
|
|
category: cartItemCategories.SUPPORTING_ITEMS,
|
|
cartItemType: cartItemTypes.EARLY_BIRD,
|
|
isDisplayed: true,
|
|
isRemovable: true,
|
|
subTotal: 0,
|
|
salesTax: 0,
|
|
lineItems: [],
|
|
isCoveredByInsurance: cartItemTypesCoveredByInsurance.includes(
|
|
cartItemTypes.EARLY_BIRD
|
|
),
|
|
};
|
|
|
|
premiumAppointmentDiscountLineItem.cartItemType = cartItem.cartItemType;
|
|
cartItem.lineItems.push(premiumAppointmentDiscountLineItem);
|
|
|
|
cartItem.subTotal +=
|
|
(premiumAppointmentDiscountLineItem.kitPrice ?? 0) +
|
|
(premiumAppointmentDiscountLineItem.laborAmount ?? 0) +
|
|
(premiumAppointmentDiscountLineItem.sellingPrice ?? 0);
|
|
|
|
cartItem.salesTax += premiumAppointmentDiscountLineItem.salesTax ?? 0;
|
|
}
|
|
|
|
return cartItem;
|
|
},
|
|
promoCartItems() {
|
|
const promoCartItems = [];
|
|
|
|
// clone the promos array
|
|
const promosClone = deepClone(this.promo);
|
|
// get unique promo codes
|
|
const uniquePromoCodes = [
|
|
...new Set(
|
|
this.promos.map((promo) => getPromoCodeWithoutBundleIdentifier(promo.promoCode))
|
|
),
|
|
];
|
|
|
|
uniquePromoCodes.forEach((promoCode) => {
|
|
// get the codes with the prefix from the promo array
|
|
const promoLineItems = this.promos.filter(
|
|
(promo) => getPromoCodeWithoutBundleIdentifier(promo.promoCode) == promoCode
|
|
);
|
|
|
|
// Create a cart item for each promo
|
|
let cartItem = null;
|
|
|
|
cartItem = {
|
|
name: promoCode,
|
|
category: cartItemCategories.PROMOS,
|
|
cartItemType: promoCode,
|
|
isDisplayed: true,
|
|
isRemovable: true,
|
|
subTotal: 0,
|
|
salesTax: 0,
|
|
lineItems: [],
|
|
isCoveredByInsurance: cartItemTypesCoveredByInsurance.includes(promoCode),
|
|
};
|
|
|
|
promoLineItems.forEach((promoLineItem) => {
|
|
promoLineItem.cartItemType = cartItem.cartItemType;
|
|
|
|
cartItem.subTotal +=
|
|
(promoLineItem.kitPrice ?? 0) +
|
|
(promoLineItem.laborAmount ?? 0) +
|
|
(promoLineItem.sellingPrice ?? 0);
|
|
|
|
cartItem.salesTax += promoLineItem.salesTax ?? 0;
|
|
|
|
cartItem.lineItems.push(promoLineItem);
|
|
});
|
|
|
|
promoCartItems.push(cartItem);
|
|
});
|
|
|
|
return promoCartItems;
|
|
},
|
|
removeLinkText() {
|
|
return this.getCmsContent("RemoveCartItemTextWidget", "Text");
|
|
},
|
|
recycleFeeText() {
|
|
return this.getCmsContent("RecycleFeeTextWidget", "Text");
|
|
},
|
|
salesTaxText() {
|
|
return this.getCmsContent("SalesTaxTextWidget", "Text");
|
|
},
|
|
amountDueText() {
|
|
return this.getCmsContent("AmountDueTextWidget", "Text");
|
|
},
|
|
amountPaidText() {
|
|
return this.getCmsContent("AmountPaidTextWidget", "Text");
|
|
},
|
|
subtotalText() {
|
|
return this.getCmsContent("SubtotalTextWidget", "Text");
|
|
},
|
|
subTotal() {
|
|
if (!this.lineItems || this.lineItems.length < 1) return;
|
|
return this.isInsurance
|
|
? baseMixin.methods.getSubTotal(this.lineItems)
|
|
: baseMixin.methods.getSubTotal(this.lineItemsWithoutRecal);
|
|
},
|
|
salesTax() {
|
|
if (!this.lineItems || this.lineItems.length < 1) return;
|
|
return this.isInsurance
|
|
? baseMixin.methods.getSalesTax(this.lineItems)
|
|
: baseMixin.methods.getSalesTax(this.lineItemsWithoutRecal);
|
|
},
|
|
amountDue() {
|
|
if (!this.lineItems || this.lineItems.length < 1) return;
|
|
if (this.showAsPaid) return 0;
|
|
return this.isInsurance
|
|
? baseMixin.methods.getAmountDue(this.lineItems)
|
|
: baseMixin.methods.getAmountDue(this.lineItemsWithoutRecal);
|
|
},
|
|
amountPaid() {
|
|
if (!this.showAsPaid) {
|
|
return 0;
|
|
}
|
|
|
|
// unary plus operator to convert string amount to numeric so we can add them together
|
|
var amtPaid = +this.subTotal + +this.salesTax;
|
|
return amtPaid;
|
|
},
|
|
},
|
|
components: {
|
|
textBlock,
|
|
textLink,
|
|
contentGroupModal,
|
|
promoModalQuestion,
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.cart {
|
|
margin-bottom: 1rem;
|
|
|
|
h5 {
|
|
border-bottom: 1px solid $gray-500;
|
|
color: $black;
|
|
}
|
|
.modal-body {
|
|
h5 {
|
|
text-align: center;
|
|
border-bottom: none;
|
|
}
|
|
}
|
|
.border-bottom {
|
|
color: $gray;
|
|
}
|
|
.label {
|
|
color: $black;
|
|
font-weight: 500;
|
|
line-height: 1.625;
|
|
}
|
|
.amount-due {
|
|
color: $green;
|
|
}
|
|
.cart-panel {
|
|
max-height: 0;
|
|
transition: all 350ms ease-in;
|
|
overflow: hidden;
|
|
visibility: hidden;
|
|
color: $gray-600;
|
|
}
|
|
.price-table {
|
|
div {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
padding: 0.5rem 1.5rem;
|
|
&:nth-last-child(-n + 3) {
|
|
background-color: $green-100;
|
|
}
|
|
&:last-child {
|
|
background-color: $green;
|
|
color: #ffffff;
|
|
}
|
|
}
|
|
.deductible {
|
|
background-color: $gray-100;
|
|
}
|
|
.service-type {
|
|
background-color: $gray-100;
|
|
}
|
|
.deductible ~ .service-type {
|
|
background: $white;
|
|
}
|
|
.service-type ~ .packaged-cart-item {
|
|
background-color: $gray-100;
|
|
}
|
|
.deductible ~ .packaged-cart-item {
|
|
background: $white;
|
|
}
|
|
.struck-out-price {
|
|
text-decoration: line-through;
|
|
padding-left: 0.5rem;
|
|
}
|
|
.packaged-cart-item {
|
|
padding-left: 2.5rem;
|
|
align-items: center;
|
|
span {
|
|
display: flex;
|
|
font-size: 0.875rem;
|
|
&:nth-child(2) {
|
|
justify-content: flex-end;
|
|
}
|
|
&:last-child {
|
|
justify-content: flex-end;
|
|
}
|
|
&.promo {
|
|
text-transform: uppercase;
|
|
}
|
|
}
|
|
a {
|
|
font-size: 0.875rem;
|
|
text-decoration: none;
|
|
line-height: 1.75;
|
|
}
|
|
}
|
|
.non-packaged-cart-item {
|
|
&.odd {
|
|
background: $gray-100;
|
|
}
|
|
}
|
|
.deductible ~ .non-packaged-cart-item {
|
|
&.odd {
|
|
background: $white;
|
|
}
|
|
}
|
|
.non-packaged-cart-item {
|
|
&.even {
|
|
background-color: $white;
|
|
}
|
|
a {
|
|
line-height: 1.625;
|
|
}
|
|
}
|
|
.deductible ~ .non-packaged-cart-item {
|
|
&.even {
|
|
background-color: $gray-100;
|
|
}
|
|
}
|
|
// Custom order/wrap for removable nonpackaged Cart Items
|
|
.removable-cart-item {
|
|
flex-wrap: wrap;
|
|
span {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
a {
|
|
order: 3;
|
|
margin-right: 100%;
|
|
text-decoration: none;
|
|
}
|
|
}
|
|
.package-type,
|
|
.service-type,
|
|
.deductible {
|
|
align-items: center;
|
|
}
|
|
.sub-total,
|
|
.sales-tax,
|
|
.amount-due,
|
|
.amount-paid {
|
|
font-weight: 500;
|
|
color: $black;
|
|
}
|
|
.sub-total {
|
|
border-top: 1px solid $green;
|
|
}
|
|
.service-type,
|
|
.deductible {
|
|
.text-block {
|
|
background: transparent;
|
|
margin-top: 0;
|
|
padding: 0;
|
|
width: 50%;
|
|
}
|
|
}
|
|
}
|
|
.insurance-company-name {
|
|
margin-top: 0.5rem;
|
|
}
|
|
.vin-toggle {
|
|
&:after {
|
|
content: "";
|
|
transition: all 0.5s ease;
|
|
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 8.9' xml:space='preserve'%3e%3cpath d='M8 8.9c-.2 0-.5-.1-.6-.3L.3 1.5C.1 1.4 0 1.1 0 .9 0 .7.1.4.3.3.4.1.7 0 .9 0c.2 0 .5.1.6.3L8 6.7 14.5.2c.1-.1.4-.2.6-.2.2 0 .5.1.6.3s.3.4.3.6c0 .2-.1.5-.3.6L8.6 8.6c-.1.2-.4.3-.6.3z' fill='%231474a2'/%3e%3c/svg%3e");
|
|
background-repeat: no-repeat;
|
|
background-position: right center;
|
|
width: 16px;
|
|
height: 9px;
|
|
display: inline-flex;
|
|
position: relative;
|
|
right: 0.75rem;
|
|
margin: 0.5rem 0 0.5rem 1rem;
|
|
cursor: pointer;
|
|
}
|
|
&.expanded:after {
|
|
transform: rotate(180deg);
|
|
}
|
|
&.expanded + .cart-panel {
|
|
max-height: 650px;
|
|
transition: all 150ms ease-in;
|
|
overflow: hidden;
|
|
padding: 1rem 0 0.5rem;
|
|
visibility: visible;
|
|
}
|
|
a {
|
|
text-decoration: none;
|
|
}
|
|
}
|
|
.applied-promo-tag {
|
|
span {
|
|
color: $green-700;
|
|
font-weight: 500;
|
|
padding: 2px 8px;
|
|
background-color: $green-100;
|
|
border-radius: 12px;
|
|
|
|
&.promo-code {
|
|
text-transform: uppercase;
|
|
padding: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.payment-method-question {
|
|
.question-text {
|
|
margin: 1rem 0 0.5rem 0;
|
|
}
|
|
span {
|
|
line-height: 24px;
|
|
}
|
|
}
|
|
</style>
|