317 lines
12 KiB
Vue
317 lines
12 KiB
Vue
<template>
|
|
<transition name="fade" mode="out-in">
|
|
<div class="add-vaps-buttons" aria-live="polite">
|
|
<buttonQuestion
|
|
ref="buttonQuestion"
|
|
:answers="buttonsToDisplay"
|
|
groupName="addVaps"
|
|
v-model="buttonsToDisplay"
|
|
buttonTypeString="addVapsButton"
|
|
:buttonTypeObject="addVapsButton"
|
|
:isWide="buttonsToDisplay.length > 1 ? false : true"
|
|
@update:modelValue="openModal" />
|
|
|
|
<contentGroupModal
|
|
ref="RainDefenseModal"
|
|
cmsWidgetName="RainDefenseModal"
|
|
v-if="rainDefenseModal"
|
|
@footer-button-action="addRainDefenseToCart('RainDefenseModal', rainDefenseModal)"
|
|
footerButtonActionName="footer-button-action">
|
|
<p class="price">+${{ rainDefenseModal.listPrice }}</p>
|
|
</contentGroupModal>
|
|
|
|
<contentGroupModal
|
|
ref="WipersModal"
|
|
cmsWidgetName="WipersModal"
|
|
v-if="wipersModal"
|
|
@footer-button-action="addWipersToCart('WipersModal', wipersModal)"
|
|
footerButtonActionName="footer-button-action">
|
|
<div v-if="wipersToDisplay === wipersToDisplayStrings.BOTH" class="wiper-options">
|
|
<div>
|
|
<checkboxQuestion
|
|
class="mb-5"
|
|
cmsWidgetName="AddFrontBladesQuestionWidget"
|
|
v-model="selectedFrontWipers" />
|
|
<p class="price">+${{ wipersModal.totalFrontPrice }}</p>
|
|
</div>
|
|
<div>
|
|
<checkboxQuestion
|
|
class="mb-5"
|
|
cmsWidgetName="AddRearBladesQuestionWidget"
|
|
v-model="selectedRearWipers" />
|
|
<p class="price">+${{ wipersModal.totalRearPrice }}</p>
|
|
</div>
|
|
</div>
|
|
<div
|
|
v-else-if="wipersToDisplay === wipersToDisplayStrings.FRONT"
|
|
class="wiper-options">
|
|
<p class="price">+${{ wipersModal.totalFrontPrice }}</p>
|
|
</div>
|
|
<div
|
|
v-else-if="wipersToDisplay === wipersToDisplayStrings.REAR"
|
|
class="wiper-options">
|
|
<p class="price">+${{ wipersModal.totalRearPrice }}</p>
|
|
</div>
|
|
</contentGroupModal>
|
|
</div>
|
|
</transition>
|
|
</template>
|
|
|
|
<script>
|
|
// COMPONENTS
|
|
import buttonQuestion from "@/digital-components/button-question/button-question";
|
|
import addVapsButton from "./add-vaps-button/add-vaps-button";
|
|
import contentGroupModal from "@/fmg-components/content-group-modal/content-group-modal";
|
|
import checkboxQuestion from "@/digital-components/checkbox-question/checkbox-question";
|
|
|
|
// SUPPORTING
|
|
import { partTypeStrings } from "@/constants/part-type-strings";
|
|
|
|
const wipersToDisplayStrings = {
|
|
FRONT: "FRONT",
|
|
REAR: "REAR",
|
|
BOTH: "BOTH",
|
|
};
|
|
|
|
export default {
|
|
name: "add-vaps-modal-buttons",
|
|
props: {
|
|
vapsTilesCmsName: String,
|
|
availableLineItems: Object,
|
|
modelValue: Object,
|
|
},
|
|
data() {
|
|
return {
|
|
addVapsButton: addVapsButton,
|
|
selectedFrontWipers: false,
|
|
selectedRearWipers: false,
|
|
wipersToDisplay: null,
|
|
};
|
|
},
|
|
methods: {
|
|
openModal(modalName) {
|
|
this.$refs[modalName].openModal();
|
|
},
|
|
addRainDefenseToCart(modalName, part) {
|
|
const alreadyInCart = this.currentCartItems.vaps.some((item) => {
|
|
return item.partType === part.partType;
|
|
});
|
|
if (!alreadyInCart) {
|
|
this.currentCartItems.vaps.push(part);
|
|
}
|
|
this.$refs[modalName].closeModal();
|
|
},
|
|
addWipersToCart(modalName, part) {
|
|
const frontWipersAlreadyInCart = this.currentCartItems.vaps.some((item) => {
|
|
return item.partType === part.frontWiperLineItems[0].partType;
|
|
});
|
|
const rearWipersAlreadyInCart = this.currentCartItems.vaps.some((item) => {
|
|
return item.partType === part.rearWiperLineItems[0]?.partType;
|
|
});
|
|
|
|
if (this.wipersToDisplay === wipersToDisplayStrings.FRONT) {
|
|
this.selectedFrontWipers = true; // set as true if front wipers is only option
|
|
}
|
|
if (this.wipersToDisplay === wipersToDisplayStrings.REAR) {
|
|
this.selectedRearWipers = true; // set as true if rear wipers is only option
|
|
}
|
|
if (!frontWipersAlreadyInCart && this.selectedFrontWipers) {
|
|
if (part.frontWiperLineItems) {
|
|
// for wipers, a "combined" part (frontWiperLineItems)
|
|
part.frontWiperLineItems.forEach((part) => {
|
|
this.currentCartItems.vaps.push(part);
|
|
});
|
|
}
|
|
}
|
|
if (!rearWipersAlreadyInCart && this.selectedRearWipers) {
|
|
if (part.rearWiperLineItems) {
|
|
part.rearWiperLineItems.forEach((part) => {
|
|
this.currentCartItems.vaps.push(part);
|
|
});
|
|
}
|
|
}
|
|
this.$refs[modalName].closeModal();
|
|
|
|
if (this.wipersToDisplay === wipersToDisplayStrings.BOTH) {
|
|
this.selectedFrontWipers = false; // set as false if both options are given
|
|
this.selectedRearWipers = false; // set as false if both options are given
|
|
}
|
|
},
|
|
updateWipersToDisplay(value) {
|
|
this.wipersToDisplay = value;
|
|
},
|
|
},
|
|
computed: {
|
|
currentCartItems() {
|
|
const modelValue = this.modelValue;
|
|
if (!modelValue.vaps) modelValue.vaps = [];
|
|
return modelValue;
|
|
},
|
|
rainDefenseModal() {
|
|
const lineItem = this.availableLineItems.find((item) => {
|
|
return item.partType === partTypeStrings.RAIN_DEFENSE;
|
|
});
|
|
if (lineItem)
|
|
lineItem.listPrice = parseFloat(
|
|
lineItem?.laborAmount + lineItem?.sellingPrice + lineItem?.kitPrice
|
|
).toFixed(2);
|
|
return lineItem;
|
|
},
|
|
wipersModal() {
|
|
// create a single wiper item for modal
|
|
const frontWiperLineItems = this.availableLineItems.filter((item) => {
|
|
return item.partType.includes(partTypeStrings.FRONT_WIPER);
|
|
});
|
|
const rearWiperLineItems = this.availableLineItems.filter((item) => {
|
|
return item.partType.includes(partTypeStrings.REAR_WIPER);
|
|
});
|
|
let wipersModal;
|
|
let totalFrontPrice = 0;
|
|
let totalRearPrice = 0;
|
|
|
|
// calculate prices to display
|
|
frontWiperLineItems?.forEach((item) => {
|
|
totalFrontPrice += item?.laborAmount + item?.sellingPrice + item?.kitPrice;
|
|
});
|
|
rearWiperLineItems?.forEach((item) => {
|
|
totalRearPrice += item?.laborAmount + item?.sellingPrice + item?.kitPrice;
|
|
});
|
|
|
|
wipersModal = {
|
|
description: "WIPERS ITEM",
|
|
partType: "WIPERS",
|
|
frontWiperLineItems: frontWiperLineItems,
|
|
rearWiperLineItems: rearWiperLineItems,
|
|
totalFrontPrice: parseFloat(totalFrontPrice).toFixed(2),
|
|
totalRearPrice: parseFloat(totalRearPrice).toFixed(2),
|
|
};
|
|
|
|
return wipersModal;
|
|
},
|
|
answersCmsData() {
|
|
return this.getCmsContent(this.vapsTilesCmsName, "Answers");
|
|
},
|
|
buttonsToDisplay() {
|
|
const buttons = [];
|
|
if (!this.answersCmsData) return buttons;
|
|
|
|
const rainDefenseInCart = this.currentCartItems.vaps?.some((vap) => {
|
|
return vap?.partType === partTypeStrings.RAIN_DEFENSE;
|
|
});
|
|
const frontWipersInCart = this.currentCartItems.vaps?.some((vap) => {
|
|
return vap?.partType?.includes(partTypeStrings.FRONT_WIPER);
|
|
});
|
|
const rearWipersInCart = this.currentCartItems.vaps?.some((vap) => {
|
|
return vap?.partType?.includes(partTypeStrings.REAR_WIPER);
|
|
});
|
|
|
|
const getAnswer = (name, answers) => {
|
|
const answerIndex = answers.findIndex((answer) => {
|
|
return answer.Name === name;
|
|
});
|
|
return answers[answerIndex];
|
|
};
|
|
|
|
if (!rainDefenseInCart) {
|
|
// NO RAIN DEFENSE IN CART; SHOW RAIN DEFENSE BUTTON
|
|
const modalData = getAnswer("RainDefenseModal", this.answersCmsData);
|
|
modalData.SubText = "+$" + this.rainDefenseModal?.listPrice;
|
|
buttons.push(modalData);
|
|
}
|
|
|
|
const modalData = getAnswer("WipersModal", this.answersCmsData);
|
|
if (!frontWipersInCart) {
|
|
if (!rearWipersInCart && this.wipersModal?.rearWiperLineItems.length > 0) {
|
|
// NO REAR WIPERS or FRONT WIPERS IN CART; SHOW COMBO BUTTON
|
|
const prices = [
|
|
this.wipersModal?.totalFrontPrice,
|
|
this.wipersModal?.totalRearPrice,
|
|
];
|
|
prices.sort((a, b) => a - b);
|
|
modalData.SubText = "+$" + prices[0] + " - $" + prices[prices.length - 1];
|
|
this.updateWipersToDisplay(wipersToDisplayStrings.BOTH);
|
|
buttons.push(modalData);
|
|
} else {
|
|
// NO FRONT WIPERS IN CART; SHOW ONLY FRONT WIPERS BUTTON
|
|
modalData.SubText = "+$" + this.wipersModal?.totalFrontPrice;
|
|
this.updateWipersToDisplay(wipersToDisplayStrings.FRONT);
|
|
buttons.push(modalData);
|
|
}
|
|
} else if (!rearWipersInCart && this.wipersModal?.rearWiperLineItems.length > 0) {
|
|
// NO REAR WIPERS IN CART; SHOW ONLY REAR WIPERS BUTTON
|
|
modalData.SubText = "+$" + this.wipersModal?.totalRearPrice;
|
|
this.updateWipersToDisplay(wipersToDisplayStrings.REAR);
|
|
buttons.push(modalData);
|
|
}
|
|
|
|
return buttons;
|
|
},
|
|
wipersToDisplayStrings() {
|
|
return wipersToDisplayStrings;
|
|
},
|
|
},
|
|
components: {
|
|
buttonQuestion,
|
|
contentGroupModal,
|
|
checkboxQuestion,
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.add-vaps-buttons {
|
|
// necessary overrides for modals
|
|
.modal {
|
|
&.modal-component {
|
|
.modal-dialog {
|
|
.modal-content {
|
|
.modal-body {
|
|
padding-bottom: 1.5rem;
|
|
|
|
& > img {
|
|
margin-bottom: 1.5rem;
|
|
line-height: 2;
|
|
text-align: center;
|
|
}
|
|
& > h5 {
|
|
text-align: center;
|
|
}
|
|
p {
|
|
margin-bottom: 1rem;
|
|
}
|
|
p.subheader-text {
|
|
text-align: center;
|
|
}
|
|
p.price {
|
|
text-align: center;
|
|
}
|
|
.wiper-options {
|
|
& > div {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin-bottom: 1rem;
|
|
|
|
&:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.form-check {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
p {
|
|
margin-bottom: 0;
|
|
}
|
|
p.price {
|
|
font-size: 0.875rem;
|
|
padding-left: 0.5rem;
|
|
color: $green;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|