CSR-1384: updates to add vaps modals
This commit is contained in:
Adam Caouette
parent
c75c406c50
commit
77455fa673
1 changed files with 107 additions and 97 deletions
|
|
@ -14,25 +14,25 @@
|
|||
<contentGroupModal
|
||||
ref="RainDefenseModal"
|
||||
cmsWidgetName="RainDefenseModal"
|
||||
v-if="rainDefenseItem"
|
||||
@footer-button-action="addRainDefenseToCart('RainDefenseModal', rainDefenseItem)"
|
||||
v-if="rainDefenseModal"
|
||||
@footer-button-action="addRainDefenseToCart('RainDefenseModal', rainDefenseModal)"
|
||||
footerButtonActionName="footer-button-action">
|
||||
<p class="price">+${{ rainDefenseItem.listPrice }}</p>
|
||||
<p class="price">+${{ rainDefenseModal.listPrice }}</p>
|
||||
</contentGroupModal>
|
||||
|
||||
<contentGroupModal
|
||||
ref="WipersModal"
|
||||
cmsWidgetName="WipersModal"
|
||||
v-if="wipersItem"
|
||||
@footer-button-action="addWipersToCart('WipersModal', wipersItem)"
|
||||
v-if="wipersModal"
|
||||
@footer-button-action="addWipersToCart('WipersModal', wipersModal)"
|
||||
footerButtonActionName="footer-button-action">
|
||||
<div v-if="wipersItem.rearWiperLineItems?.length > 0" class="wiper-options">
|
||||
<div v-if="wipersToDisplay === 'both'" class="wiper-options">
|
||||
<div>
|
||||
<checkboxQuestion
|
||||
class="mb-5"
|
||||
cmsWidgetName="AddFrontBladesQuestionWidget"
|
||||
v-model="selectedFrontWipers" />
|
||||
<p class="price">+${{ wipersItem.totalFrontPrice }}</p>
|
||||
<p class="price">+${{ wipersModal.totalFrontPrice }}</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
|
|
@ -40,11 +40,14 @@
|
|||
class="mb-5"
|
||||
cmsWidgetName="AddRearBladesQuestionWidget"
|
||||
v-model="selectedRearWipers" />
|
||||
<p class="price">+${{ wipersItem.totalRearPrice }}</p>
|
||||
<p class="price">+${{ wipersModal.totalRearPrice }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else>
|
||||
<p class="price">+${{ wipersItem.totalFrontPrice }}</p>
|
||||
<div v-else-if="wipersToDisplay === 'front'" class="wiper-options">
|
||||
<p class="price">+${{ wipersModal.totalFrontPrice }}</p>
|
||||
</div>
|
||||
<div v-else-if="wipersToDisplay === 'rear'" class="wiper-options">
|
||||
<p class="price">+${{ wipersModal.totalRearPrice }}</p>
|
||||
</div>
|
||||
</contentGroupModal>
|
||||
</div>
|
||||
|
|
@ -67,8 +70,9 @@ export default {
|
|||
data() {
|
||||
return {
|
||||
addVapsButton: addVapsButton,
|
||||
selectedFrontWipers: null,
|
||||
selectedRearWipers: null,
|
||||
selectedFrontWipers: false,
|
||||
selectedRearWipers: false,
|
||||
wipersToDisplay: null,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
|
|
@ -76,26 +80,29 @@ export default {
|
|||
this.$refs[modalName].openModal();
|
||||
},
|
||||
addRainDefenseToCart(modalName, part) {
|
||||
const alreadyInVaps = this.currentCartItems.vaps.some((item) => {
|
||||
const alreadyInCart = this.currentCartItems.vaps.some((item) => {
|
||||
return item.partType === part.partType;
|
||||
});
|
||||
if (!alreadyInVaps) {
|
||||
if (!alreadyInCart) {
|
||||
this.currentCartItems.vaps.push(part);
|
||||
}
|
||||
this.$refs[modalName].closeModal();
|
||||
},
|
||||
addWipersToCart(modalName, part) {
|
||||
const frontWipersAlreadyInVaps = this.currentCartItems.vaps.some((item) => {
|
||||
const frontWipersAlreadyInCart = this.currentCartItems.vaps.some((item) => {
|
||||
return item.partType === part.frontWiperLineItems[0].partType;
|
||||
});
|
||||
const rearWipersAlreadyInVaps = this.currentCartItems.vaps.some((item) => {
|
||||
const rearWipersAlreadyInCart = this.currentCartItems.vaps.some((item) => {
|
||||
return item.partType === part.rearWiperLineItems[0]?.partType;
|
||||
});
|
||||
|
||||
if (!this.wipersItem.priceRangeText?.length > 0) {
|
||||
if (this.wipersToDisplay === "front") {
|
||||
this.selectedFrontWipers = true; // set as true if front wipers is only option
|
||||
}
|
||||
if (!frontWipersAlreadyInVaps && this.selectedFrontWipers) {
|
||||
if (this.wipersToDisplay === "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) => {
|
||||
|
|
@ -103,7 +110,7 @@ export default {
|
|||
});
|
||||
}
|
||||
}
|
||||
if (!rearWipersAlreadyInVaps && this.selectedRearWipers) {
|
||||
if (!rearWipersAlreadyInCart && this.selectedRearWipers) {
|
||||
if (part.rearWiperLineItems) {
|
||||
part.rearWiperLineItems.forEach((part) => {
|
||||
this.currentCartItems.vaps.push(part);
|
||||
|
|
@ -111,29 +118,21 @@ export default {
|
|||
}
|
||||
}
|
||||
this.$refs[modalName].closeModal();
|
||||
|
||||
if (this.wipersToDisplay === "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() {
|
||||
return this.modelValue;
|
||||
},
|
||||
showAddRainDefense() {
|
||||
// show if not in cart
|
||||
return !this.currentCartItems.vaps?.some((vap) => {
|
||||
return vap?.partType === "RAIN DEFENSE";
|
||||
});
|
||||
},
|
||||
showAddWipers() {
|
||||
// show if not in cart
|
||||
if (this.currentCartItems && this.currentCartItems.vaps) {
|
||||
return !this.currentCartItems.vaps.some((vap) => {
|
||||
return vap?.partType?.includes(" WIPER");
|
||||
});
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
},
|
||||
rainDefenseItem() {
|
||||
rainDefenseModal() {
|
||||
const lineItem = this.availableLineItems.find((item) => {
|
||||
return item.partType === "RAIN DEFENSE";
|
||||
});
|
||||
|
|
@ -143,83 +142,94 @@ export default {
|
|||
).toFixed(2);
|
||||
return lineItem;
|
||||
},
|
||||
wipersItem() {
|
||||
const wiperLineItems = this.availableLineItems.filter((item) => {
|
||||
return item.partType.includes("WIPER");
|
||||
wipersModal() {
|
||||
// create a single wiper item for modal
|
||||
const frontWiperLineItems = this.availableLineItems.filter((item) => {
|
||||
return item.partType.includes("FRONT WIPER");
|
||||
});
|
||||
let wiperLineItem;
|
||||
const rearWiperLineItems = this.availableLineItems.filter((item) => {
|
||||
return item.partType.includes("REAR WIPER");
|
||||
});
|
||||
let wipersModal;
|
||||
let totalFrontPrice = 0;
|
||||
let totalRearPrice = 0;
|
||||
|
||||
if (wiperLineItems.length === 1) {
|
||||
wiperLineItem = wiperLineItems[0];
|
||||
wiperLineItem.totalFrontPrice = parseFloat(
|
||||
wiperLineItem.laborAmount + wiperLineItem.sellingPrice + wiperLineItem.kitPrice
|
||||
).toFixed(2);
|
||||
return wiperLineItem;
|
||||
} else if (wiperLineItems.length > 1) {
|
||||
let totalFrontPrice = 0;
|
||||
let totalRearPrice = 0;
|
||||
wiperLineItems?.forEach((item) => {
|
||||
if (item.partType === "REAR WIPER") {
|
||||
totalRearPrice += item?.laborAmount + item?.sellingPrice + item?.kitPrice;
|
||||
} else {
|
||||
totalFrontPrice += item?.laborAmount + item?.sellingPrice + item?.kitPrice;
|
||||
}
|
||||
});
|
||||
wiperLineItem = {
|
||||
description: "COMBINED ITEM",
|
||||
partType: "WIPERS",
|
||||
frontWiperLineItems: [],
|
||||
rearWiperLineItems: [],
|
||||
totalFrontPrice: parseFloat(totalFrontPrice).toFixed(2),
|
||||
totalRearPrice: parseFloat(totalRearPrice).toFixed(2),
|
||||
priceRangeText: "",
|
||||
};
|
||||
wiperLineItems?.forEach((item) => {
|
||||
if (item.partType === "REAR WIPER") {
|
||||
wiperLineItem.rearWiperLineItems.push(item);
|
||||
const priceRanges = [
|
||||
totalFrontPrice,
|
||||
totalRearPrice,
|
||||
totalFrontPrice + totalRearPrice,
|
||||
];
|
||||
priceRanges.sort((a, b) => a - b);
|
||||
wiperLineItem.priceRangeText =
|
||||
"+$" + priceRanges[0] + " - $" + priceRanges[priceRanges.length - 1];
|
||||
} else {
|
||||
wiperLineItem.frontWiperLineItems.push(item);
|
||||
}
|
||||
});
|
||||
return wiperLineItem;
|
||||
}
|
||||
return [];
|
||||
// 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 answers = [];
|
||||
if (!this.answersCmsData) return answers;
|
||||
const buttons = [];
|
||||
if (!this.answersCmsData) return buttons;
|
||||
|
||||
const rainDefenseInCart = this.currentCartItems.vaps?.some((vap) => {
|
||||
return vap?.partType === "RAIN DEFENSE";
|
||||
});
|
||||
const frontWipersInCart = this.currentCartItems.vaps?.some((vap) => {
|
||||
return vap?.partType?.includes("FRONT WIPER");
|
||||
});
|
||||
const rearWipersInCart = this.currentCartItems.vaps?.some((vap) => {
|
||||
return vap?.partType?.includes("REAR WIPER");
|
||||
});
|
||||
|
||||
const getAnswer = (name, answers) => {
|
||||
const answerIndex = answers.findIndex((answer) => {
|
||||
return answer.Name === name;
|
||||
});
|
||||
return answers[answerIndex];
|
||||
};
|
||||
if (this.showAddWipers) {
|
||||
const answer = getAnswer("WipersModal", this.answersCmsData);
|
||||
if (this.wipersItem.priceRangeText?.length > 0) {
|
||||
answer.SubText = this.wipersItem.priceRangeText;
|
||||
|
||||
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("both");
|
||||
buttons.push(modalData);
|
||||
} else {
|
||||
answer.SubText = "+$" + this.wipersItem.totalFrontPrice;
|
||||
// NO FRONT WIPERS IN CART; SHOW ONLY FRONT WIPERS BUTTON
|
||||
modalData.SubText = "+$" + this.wipersModal.totalFrontPrice;
|
||||
this.updateWipersToDisplay("front");
|
||||
buttons.push(modalData);
|
||||
}
|
||||
answers.push(answer);
|
||||
} 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("rear");
|
||||
buttons.push(modalData);
|
||||
}
|
||||
if (this.showAddRainDefense) {
|
||||
const answer = getAnswer("RainDefenseModal", this.answersCmsData);
|
||||
answer.SubText = "+$" + this.rainDefenseItem.listPrice;
|
||||
answers.push(answer);
|
||||
}
|
||||
return answers;
|
||||
|
||||
return buttons;
|
||||
},
|
||||
},
|
||||
components: {
|
||||
|
|
|
|||
Loading…
Reference in a new issue