jason/DigitalConsumer.FixMyGlass
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

CSR-1384: updates to add vaps modals

Browse source
This commit is contained in:
Adam Caouette 2023-10-25 21:48:34 -04:00
parent c75c406c50
commit 77455fa673
1 changed files with 107 additions and 97 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

204
src/layouts/payment-method/add-vaps-modal-buttons/add-vaps-modal-buttons.vue
View file

@ -14,25 +14,25 @@
<contentGroupModal <contentGroupModal
ref="RainDefenseModal" ref="RainDefenseModal"
cmsWidgetName="RainDefenseModal" cmsWidgetName="RainDefenseModal"
v-if="rainDefenseItem" v-if="rainDefenseModal"
@footer-button-action="addRainDefenseToCart('RainDefenseModal', rainDefenseItem)" @footer-button-action="addRainDefenseToCart('RainDefenseModal', rainDefenseModal)"
footerButtonActionName="footer-button-action"> footerButtonActionName="footer-button-action">
<p class="price">+${{ rainDefenseItem.listPrice }}</p> <p class="price">+${{ rainDefenseModal.listPrice }}</p>
</contentGroupModal> </contentGroupModal>
<contentGroupModal <contentGroupModal
ref="WipersModal" ref="WipersModal"
cmsWidgetName="WipersModal" cmsWidgetName="WipersModal"
v-if="wipersItem" v-if="wipersModal"
@footer-button-action="addWipersToCart('WipersModal', wipersItem)" @footer-button-action="addWipersToCart('WipersModal', wipersModal)"
footerButtonActionName="footer-button-action"> footerButtonActionName="footer-button-action">
<div v-if="wipersItem.rearWiperLineItems?.length > 0" class="wiper-options"> <div v-if="wipersToDisplay === 'both'" class="wiper-options">
<div> <div>
<checkboxQuestion <checkboxQuestion
class="mb-5" class="mb-5"
cmsWidgetName="AddFrontBladesQuestionWidget" cmsWidgetName="AddFrontBladesQuestionWidget"
v-model="selectedFrontWipers" /> v-model="selectedFrontWipers" />
<p class="price">+${{ wipersItem.totalFrontPrice }}</p> <p class="price">+${{ wipersModal.totalFrontPrice }}</p>
</div> </div>
<div> <div>
@ -40,11 +40,14 @@
class="mb-5" class="mb-5"
cmsWidgetName="AddRearBladesQuestionWidget" cmsWidgetName="AddRearBladesQuestionWidget"
v-model="selectedRearWipers" /> v-model="selectedRearWipers" />
<p class="price">+${{ wipersItem.totalRearPrice }}</p> <p class="price">+${{ wipersModal.totalRearPrice }}</p>
</div> </div>
</div> </div>
<div v-else> <div v-else-if="wipersToDisplay === 'front'" class="wiper-options">
<p class="price">+${{ wipersItem.totalFrontPrice }}</p> <p class="price">+${{ wipersModal.totalFrontPrice }}</p>
</div>
<div v-else-if="wipersToDisplay === 'rear'" class="wiper-options">
<p class="price">+${{ wipersModal.totalRearPrice }}</p>
</div> </div>
</contentGroupModal> </contentGroupModal>
</div> </div>
@ -67,8 +70,9 @@ export default {
data() { data() {
return { return {
addVapsButton: addVapsButton, addVapsButton: addVapsButton,
selectedFrontWipers: null, selectedFrontWipers: false,
selectedRearWipers: null, selectedRearWipers: false,
wipersToDisplay: null,
}; };
}, },
methods: { methods: {
@ -76,26 +80,29 @@ export default {
this.$refs[modalName].openModal(); this.$refs[modalName].openModal();
}, },
addRainDefenseToCart(modalName, part) { addRainDefenseToCart(modalName, part) {
const alreadyInVaps = this.currentCartItems.vaps.some((item) => { const alreadyInCart = this.currentCartItems.vaps.some((item) => {
return item.partType === part.partType; return item.partType === part.partType;
}); });
if (!alreadyInVaps) { if (!alreadyInCart) {
this.currentCartItems.vaps.push(part); this.currentCartItems.vaps.push(part);
} }
this.$refs[modalName].closeModal(); this.$refs[modalName].closeModal();
}, },
addWipersToCart(modalName, part) { addWipersToCart(modalName, part) {
const frontWipersAlreadyInVaps = this.currentCartItems.vaps.some((item) => { const frontWipersAlreadyInCart = this.currentCartItems.vaps.some((item) => {
return item.partType === part.frontWiperLineItems[0].partType; 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; 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 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) { if (part.frontWiperLineItems) {
// for wipers, a "combined" part (frontWiperLineItems) // for wipers, a "combined" part (frontWiperLineItems)
part.frontWiperLineItems.forEach((part) => { part.frontWiperLineItems.forEach((part) => {
@ -103,7 +110,7 @@ export default {
}); });
} }
} }
if (!rearWipersAlreadyInVaps && this.selectedRearWipers) { if (!rearWipersAlreadyInCart && this.selectedRearWipers) {
if (part.rearWiperLineItems) { if (part.rearWiperLineItems) {
part.rearWiperLineItems.forEach((part) => { part.rearWiperLineItems.forEach((part) => {
this.currentCartItems.vaps.push(part); this.currentCartItems.vaps.push(part);
@ -111,29 +118,21 @@ export default {
} }
} }
this.$refs[modalName].closeModal(); 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: { computed: {
currentCartItems() { currentCartItems() {
return this.modelValue; return this.modelValue;
}, },
showAddRainDefense() { rainDefenseModal() {
// 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() {
const lineItem = this.availableLineItems.find((item) => { const lineItem = this.availableLineItems.find((item) => {
return item.partType === "RAIN DEFENSE"; return item.partType === "RAIN DEFENSE";
}); });
@ -143,83 +142,94 @@ export default {
).toFixed(2); ).toFixed(2);
return lineItem; return lineItem;
}, },
wipersItem() { wipersModal() {
const wiperLineItems = this.availableLineItems.filter((item) => { // create a single wiper item for modal
return item.partType.includes("WIPER"); 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) { // calculate prices to display
wiperLineItem = wiperLineItems[0]; frontWiperLineItems?.forEach((item) => {
wiperLineItem.totalFrontPrice = parseFloat( totalFrontPrice += item?.laborAmount + item?.sellingPrice + item?.kitPrice;
wiperLineItem.laborAmount + wiperLineItem.sellingPrice + wiperLineItem.kitPrice });
).toFixed(2); rearWiperLineItems?.forEach((item) => {
return wiperLineItem; totalRearPrice += item?.laborAmount + item?.sellingPrice + item?.kitPrice;
} else if (wiperLineItems.length > 1) { });
let totalFrontPrice = 0;
let totalRearPrice = 0; wipersModal = {
wiperLineItems?.forEach((item) => { description: "WIPERS ITEM",
if (item.partType === "REAR WIPER") { partType: "WIPERS",
totalRearPrice += item?.laborAmount + item?.sellingPrice + item?.kitPrice; frontWiperLineItems: frontWiperLineItems,
} else { rearWiperLineItems: rearWiperLineItems,
totalFrontPrice += item?.laborAmount + item?.sellingPrice + item?.kitPrice; totalFrontPrice: parseFloat(totalFrontPrice).toFixed(2),
} totalRearPrice: parseFloat(totalRearPrice).toFixed(2),
}); };
wiperLineItem = {
description: "COMBINED ITEM", return wipersModal;
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 [];
}, },
answersCmsData() { answersCmsData() {
return this.getCmsContent(this.vapsTilesCmsName, "Answers"); return this.getCmsContent(this.vapsTilesCmsName, "Answers");
}, },
buttonsToDisplay() { buttonsToDisplay() {
const answers = []; const buttons = [];
if (!this.answersCmsData) return answers; 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 getAnswer = (name, answers) => {
const answerIndex = answers.findIndex((answer) => { const answerIndex = answers.findIndex((answer) => {
return answer.Name === name; return answer.Name === name;
}); });
return answers[answerIndex]; return answers[answerIndex];
}; };
if (this.showAddWipers) {
const answer = getAnswer("WipersModal", this.answersCmsData); if (!rainDefenseInCart) {
if (this.wipersItem.priceRangeText?.length > 0) { // NO RAIN DEFENSE IN CART; SHOW RAIN DEFENSE BUTTON
answer.SubText = this.wipersItem.priceRangeText; 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 { } 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); return buttons;
answer.SubText = "+$" + this.rainDefenseItem.listPrice;
answers.push(answer);
}
return answers;
}, },
}, },
components: { components: {