+
-
+${{ wipersItem.totalFrontPrice }}
+
+${{ wipersModal.totalFrontPrice }}
@@ -40,11 +40,14 @@
class="mb-5"
cmsWidgetName="AddRearBladesQuestionWidget"
v-model="selectedRearWipers" />
-
+${{ wipersItem.totalRearPrice }}
+
+${{ wipersModal.totalRearPrice }}
-
-
+${{ wipersItem.totalFrontPrice }}
+
+
+${{ wipersModal.totalFrontPrice }}
+
+
+
+${{ wipersModal.totalRearPrice }}
@@ -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: {