339 lines
12 KiB
Vue
339 lines
12 KiB
Vue
<template>
|
|
<div class="cart">
|
|
<div class="container-fluid 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 amount-due">$321.00</span>
|
|
</div>
|
|
</div>
|
|
<div class="price-table">
|
|
<div class="service-type" :class="{ packageWithVAPS: packageWithVAPS }">
|
|
<textBlock :cmsWidgetName="packageNameWidget" /><span>{{ packagePrice }}</span>
|
|
</div>
|
|
<div v-for="(lineItem, i) in displayedPackageLineItems" :key="i"
|
|
:class="[this.displayedPackageLineItems ? 'vaps' : '']">
|
|
<span>{{ lineItem.name }}</span>
|
|
<span><a href="#">Remove</a></span>
|
|
</div>
|
|
<hr style="background: red;">
|
|
<div v-for="(lineItem, i) in displayedNonPackageLineItems" :key="i"
|
|
:class="[this.displayedNonPackageLineItems ? 'vaps' : '']">
|
|
<span>{{ lineItem.name }}</span>
|
|
<span><a href="#">Remove</a></span>
|
|
<span>{{ lineItem.price }}</span>
|
|
</div>
|
|
<div v-if="hasRecycleLineItem">
|
|
<span>{{ recycleLabel }}</span
|
|
><span>{{ recycleFee }}</span>
|
|
</div>
|
|
<!-- Sub total, sales tax, total columns -->
|
|
<div class="sub-total"><span>Subtotal</span><span>$320</span></div>
|
|
<div class="sales-tax"><span>Sales tax</span><span>$1</span></div>
|
|
<div class="amount-due"><span>Amount due</span><span>$321</span></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import cart from "@/fmg-components/cart/cart";
|
|
import baseMixin from "@/mixins/base-mixin.js";
|
|
import funnelSubHeader from "@/fmg-components/funnel-sub-header/funnel-sub-header";
|
|
import { packageNames } from "@/constants/package-names";
|
|
import {
|
|
getHighestFullySatisfiedTier,
|
|
containsLineItemWithPartType,
|
|
getPackageContents,
|
|
findLineItemsWithPartType,
|
|
} from "@/helpers/service-package-helper";
|
|
import reviewBlock from "@/layouts/review/review-block/review-block";
|
|
import textBlock from "@/digital-components/text-block/text-block";
|
|
|
|
export default {
|
|
name: "modal",
|
|
props: {
|
|
headerCmsWidgetName: String,
|
|
servicePackageOptionsCmsName: String,
|
|
damage: Object,
|
|
orderLineItems: Object,
|
|
availableLineItems: Object,
|
|
allowableCartItems: Object,
|
|
},
|
|
data() {
|
|
return {
|
|
isActive: false,
|
|
//availableVaps: [], TO DO Do we need this?
|
|
packageWithVAPS: false,
|
|
// packageLevel: "",
|
|
};
|
|
},
|
|
methods: {
|
|
toggleClass: function (event) {
|
|
this.isActive = !this.isActive;
|
|
},
|
|
initializeComponent(apiResponses) {
|
|
//TO DO Do we need this?
|
|
// const vapsFromApi = [...apiResponses.wipers, apiResponses.rainDefense];
|
|
// this.availableVaps = vapsFromApi;
|
|
},
|
|
getPackagePriceString(packageName) {
|
|
const formattedPriceFloat = parseFloat(this.getPackagePrice(packageName)).toFixed(2);
|
|
return (this.isInsuranceSelected ? "As little as $" : "$") + formattedPriceFloat;
|
|
},
|
|
getPackagePrice(packageName) {
|
|
let priceFloat = this.isInsuranceSelected
|
|
? 0
|
|
: baseMixin.methods.getTierOnePackagePrice(
|
|
baseMixin.methods.filterOutFees(this.nullSafeAvailableLineItems)
|
|
);
|
|
|
|
priceFloat += this.getVapsPrice(packageName);
|
|
|
|
return priceFloat;
|
|
},
|
|
getVapsPrice(packageName) {
|
|
const vapsItems = this.getVapsLineItemsForSelectedPackage(packageName);
|
|
|
|
let price = 0;
|
|
|
|
vapsItems.forEach((item) => {
|
|
price += baseMixin.methods.getTotalLineItemPrice(item);
|
|
});
|
|
|
|
return price;
|
|
},
|
|
//START HERE
|
|
getVapsLineItemsForSelectedPackage(packageName) {
|
|
const packageContentTypes = getPackageContents(
|
|
this.glassToReplace,
|
|
this.nullSafeAvailableLineItems,
|
|
this.isRepair,
|
|
packageName
|
|
);
|
|
|
|
let vapsLineItemsForSelectedPackage = [];
|
|
|
|
packageContentTypes.forEach((vapType) => {
|
|
vapsLineItemsForSelectedPackage.push(
|
|
...findLineItemsWithPartType(vapType, this.nullSafeAvailableLineItems)
|
|
);
|
|
});
|
|
console.log("VapsLineItems:", vapsLineItemsForSelectedPackage);
|
|
return vapsLineItemsForSelectedPackage;
|
|
},
|
|
},
|
|
computed: {
|
|
packageNameWidget() {
|
|
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 packagePriceString;
|
|
if (this.packageLevel.length > 0) {
|
|
packagePriceString = this.getPackagePriceString(this.packageLevel);
|
|
}
|
|
return packagePriceString;
|
|
// return (packagePriceString.length > 0) ? packagePriceString : "Test String";
|
|
},
|
|
displayedPackageLineItems() {
|
|
const displayedPackageLineItems = [];
|
|
const packageLineItems = this.getVapsLineItemsForSelectedPackage(this.packageLevel);
|
|
//TO DO Could we get the same list from this.orderLineItems?
|
|
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);
|
|
});
|
|
console.log("What displayedPackageLineItems is", packageLineItems);
|
|
return displayedPackageLineItems;
|
|
},
|
|
displayedNonPackageLineItems() {
|
|
const displayedNonPackageLineItems = [];
|
|
const possibleLineItems = [
|
|
...this.orderLineItems.vaps,
|
|
...this.orderLineItems.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;
|
|
},
|
|
glassToReplace() {
|
|
return this.damage.glassToReplace;
|
|
},
|
|
isRepair() {
|
|
return this.damage.isRepair;
|
|
},
|
|
vaps() {
|
|
return this.orderLineItems?.vaps;
|
|
},
|
|
recycleLabel() {
|
|
return "Recycling";
|
|
},
|
|
recycleFee() {
|
|
return "$35.00";
|
|
},
|
|
hasRecycleLineItem() {
|
|
//TO DO
|
|
// if (this.lineItems.supportingItems[0].partNumber === "RECYCLE FEE") {
|
|
// return true;
|
|
// } else {
|
|
// return false;
|
|
// }
|
|
return true;
|
|
},
|
|
nullSafeAvailableLineItems() {
|
|
return this.availableLineItems ?? [];
|
|
},
|
|
},
|
|
components: {
|
|
textBlock,
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.cart {
|
|
h5 {
|
|
border-bottom: 1px solid $gray-500;
|
|
color: $black;
|
|
}
|
|
.border-bottom {
|
|
color: $gray;
|
|
}
|
|
.label {
|
|
font-weight: 500;
|
|
}
|
|
.amount-due {
|
|
color: $green;
|
|
}
|
|
.price-table {
|
|
max-height: 0;
|
|
transition: all 350ms ease-in;
|
|
overflow: hidden;
|
|
div {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
padding: 0.5rem 1.5rem;
|
|
&:nth-child(odd) {
|
|
background-color: #f5f5f5;
|
|
}
|
|
&:nth-last-child(-n + 3) {
|
|
background-color: #e3f2ea;
|
|
}
|
|
&:last-child {
|
|
background-color: #0c7e47;
|
|
color: #ffffff;
|
|
}
|
|
}
|
|
.vaps {
|
|
background-color: #f5f5f5;
|
|
padding-left: 2.5rem;
|
|
align-items: center;
|
|
span {
|
|
display: flex;
|
|
width: 33.33333%;
|
|
&:nth-child(2) {
|
|
justify-content: flex-end;
|
|
}
|
|
&:last-child {
|
|
justify-content: flex-end;
|
|
}
|
|
}
|
|
}
|
|
.package-type,
|
|
.service-type {
|
|
//background-color: #f5f5f5;
|
|
align-items: center;
|
|
}
|
|
.sub-total,
|
|
.sales-tax,
|
|
.amount-due {
|
|
font-weight: 500;
|
|
}
|
|
.sub-total {
|
|
border-top: 1px solid #0c7e47;
|
|
}
|
|
.service-type {
|
|
// background-color: #f5f5f5;
|
|
.text-block {
|
|
background: transparent;
|
|
margin-top: 0;
|
|
padding: 0;
|
|
}
|
|
}
|
|
}
|
|
.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: 1rem 0 1rem 1rem;
|
|
cursor: pointer;
|
|
}
|
|
&.active:after {
|
|
transform: rotate(180deg);
|
|
}
|
|
&.active + .price-table {
|
|
max-height: 650px;
|
|
transition: all 350ms ease-in;
|
|
overflow: hidden;
|
|
}
|
|
}
|
|
}
|
|
</style>
|