102 lines
3.2 KiB
Vue
102 lines
3.2 KiB
Vue
<template>
|
|
<transition name="fade" mode="out-in">
|
|
<div class="add-vaps-buttons" aria-live="polite" v-if="isDisplayed">
|
|
<buttonQuestion
|
|
ref="buttonQuestion"
|
|
:answers="answersToDisplay"
|
|
groupName="addVaps"
|
|
v-model="selectedValues"
|
|
buttonTypeString="addVapsButton"
|
|
:buttonTypeObject="addVapsButton"
|
|
:isWide="answersToDisplay.length > 1 ? false : true" />
|
|
</div>
|
|
</transition>
|
|
</template>
|
|
|
|
<script>
|
|
import buttonQuestion from "@/digital-components/button-question/button-question";
|
|
import addVapsButton from "./add-vaps-button/add-vaps-button";
|
|
|
|
export default {
|
|
name: "add-vaps-modal-buttons",
|
|
props: {
|
|
cart: Object,
|
|
rainDefenseItem: Object,
|
|
wiperItems: Object,
|
|
vapsTilesCmsName: String,
|
|
},
|
|
data() {
|
|
return {
|
|
addVapsButton: addVapsButton,
|
|
};
|
|
},
|
|
computed: {
|
|
selectedValues: {
|
|
get: function () {
|
|
return this.answersToDisplay;
|
|
},
|
|
set: function (newValue) {
|
|
// TODO - emit event to open modal
|
|
},
|
|
},
|
|
isDisplayed() {
|
|
return this.showAddRainDefense || this.showAddWipers;
|
|
},
|
|
showAddRainDefense() {
|
|
// if it's not found in the cart
|
|
return !this.cart.some((vap) => {
|
|
return vap.partType === "RAIN DEFENSE";
|
|
});
|
|
},
|
|
showAddWipers() {
|
|
// if it's not found in the cart
|
|
return !this.cart.some((vap) => {
|
|
return vap.partType.includes(" WIPER");
|
|
});
|
|
},
|
|
rainDefensePrice() {
|
|
const lineItem = this.rainDefenseItem;
|
|
const price = lineItem.laborAmount + lineItem.sellingPrice + lineItem.kitPrice;
|
|
return parseFloat(price).toFixed(2);
|
|
},
|
|
wipersPrice() {
|
|
let price = 0;
|
|
const lineItems = this.wiperItems;
|
|
lineItems?.forEach((item) => {
|
|
price += item.laborAmount + item.sellingPrice + item.kitPrice;
|
|
});
|
|
return parseFloat(price).toFixed(2);
|
|
},
|
|
answersCmsData() {
|
|
return this.getCmsContent(this.vapsTilesCmsName, "Answers");
|
|
},
|
|
answersToDisplay() {
|
|
const answers = [];
|
|
if (!this.answersCmsData) return answers;
|
|
|
|
const getAnswer = (name, answers) => {
|
|
const answerIndex = answers.findIndex((answer) => {
|
|
return answer.Name === name;
|
|
});
|
|
return answers[answerIndex];
|
|
};
|
|
|
|
if (this.showAddWipers) {
|
|
const answer = getAnswer("ADD WIPER BLADES", this.answersCmsData);
|
|
answer.SubText = "+$" + this.wipersPrice;
|
|
answers.push(answer);
|
|
}
|
|
if (this.showAddRainDefense) {
|
|
const answer = getAnswer("ADD RAIN DEFENSE", this.answersCmsData);
|
|
answer.SubText = "+$" + this.rainDefensePrice;
|
|
answers.push(answer);
|
|
}
|
|
|
|
return answers;
|
|
},
|
|
},
|
|
components: {
|
|
buttonQuestion,
|
|
},
|
|
};
|
|
</script>
|