CSR-1384: set up modals
This commit is contained in:
Adam Caouette
parent
2be4b378c1
commit
e104a36886
1 changed files with 149 additions and 24 deletions
|
|
@ -3,30 +3,49 @@
|
|||
<div class="add-vaps-buttons" aria-live="polite">
|
||||
<buttonQuestion
|
||||
ref="buttonQuestion"
|
||||
:answers="answersToDisplay"
|
||||
:answers="buttonsToDisplay"
|
||||
groupName="addVaps"
|
||||
v-model="answersToDisplay"
|
||||
v-model="buttonsToDisplay"
|
||||
buttonTypeString="addVapsButton"
|
||||
:buttonTypeObject="addVapsButton"
|
||||
:isWide="answersToDisplay.length > 1 ? false : true"
|
||||
:isWide="buttonsToDisplay.length > 1 ? false : true"
|
||||
@update:modelValue="openModal" />
|
||||
|
||||
<contentGroupModal
|
||||
ref="RainDefenseModal"
|
||||
cmsWidgetName="RainDefenseModal"
|
||||
v-if="rainDefenseItem"
|
||||
@footer-button-action="addToCart('RainDefenseModal', rainDefenseItem)"
|
||||
@footer-button-action="addRainDefenseToCart('RainDefenseModal', rainDefenseItem)"
|
||||
footerButtonActionName="footer-button-action">
|
||||
<p class="price">{{ rainDefenseItem.listPrice }}</p>
|
||||
<p class="price">+${{ rainDefenseItem.listPrice }}</p>
|
||||
</contentGroupModal>
|
||||
|
||||
<contentGroupModal
|
||||
ref="WipersModal"
|
||||
cmsWidgetName="WipersModal"
|
||||
v-if="wipersItem"
|
||||
@footer-button-action="addToCart('WipersModal', wipersItem)"
|
||||
@footer-button-action="addWipersToCart('WipersModal', wipersItem)"
|
||||
footerButtonActionName="footer-button-action">
|
||||
<p class="price">{{ wipersItem.listPrice }}</p>
|
||||
<div v-if="wipersItem.rearWiperLineItems?.length > 0" class="wiper-options">
|
||||
<div>
|
||||
<checkboxQuestion
|
||||
class="mb-5"
|
||||
cmsWidgetName="AddFrontBladesQuestionWidget"
|
||||
v-model="selectedFrontWipers" />
|
||||
<p class="price">+${{ wipersItem.totalFrontPrice }}</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<checkboxQuestion
|
||||
class="mb-5"
|
||||
cmsWidgetName="AddRearBladesQuestionWidget"
|
||||
v-model="selectedRearWipers" />
|
||||
<p class="price">+${{ wipersItem.totalRearPrice }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else>
|
||||
<p class="price">+${{ wipersItem.totalFrontPrice }}</p>
|
||||
</div>
|
||||
</contentGroupModal>
|
||||
</div>
|
||||
</transition>
|
||||
|
|
@ -36,6 +55,7 @@
|
|||
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";
|
||||
|
||||
export default {
|
||||
name: "add-vaps-modal-buttons",
|
||||
|
|
@ -47,26 +67,47 @@ export default {
|
|||
data() {
|
||||
return {
|
||||
addVapsButton: addVapsButton,
|
||||
selectedFrontWipers: null,
|
||||
selectedRearWipers: null,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
openModal(modalName) {
|
||||
this.$refs[modalName].openModal();
|
||||
},
|
||||
addToCart(modalName, part) {
|
||||
const vapsItems = this.currentCartItems.vaps;
|
||||
const alreadyInVaps = vapsItems.some((item) => {
|
||||
addRainDefenseToCart(modalName, part) {
|
||||
const alreadyInVaps = this.currentCartItems.vaps.some((item) => {
|
||||
return item.partType === part.partType;
|
||||
});
|
||||
if (!alreadyInVaps) {
|
||||
if (part.subItems) {
|
||||
// for wipers, a "combined" part (w/ subItems)
|
||||
part.subItems.forEach((part) => {
|
||||
this.currentCartItems.vaps.push(part);
|
||||
}
|
||||
this.$refs[modalName].closeModal();
|
||||
},
|
||||
addWipersToCart(modalName, part) {
|
||||
const frontWipersAlreadyInVaps = this.currentCartItems.vaps.some((item) => {
|
||||
return item.partType === part.frontWiperLineItems[0].partType;
|
||||
});
|
||||
const rearWipersAlreadyInVaps = this.currentCartItems.vaps.some((item) => {
|
||||
return item.partType === part.rearWiperLineItems[0]?.partType;
|
||||
});
|
||||
|
||||
if (!this.wipersItem.priceRangeText?.length > 0) {
|
||||
this.selectedFrontWipers = true; // set as true if front wipers is only option
|
||||
}
|
||||
if (!frontWipersAlreadyInVaps && this.selectedFrontWipers) {
|
||||
if (part.frontWiperLineItems) {
|
||||
// for wipers, a "combined" part (frontWiperLineItems)
|
||||
part.frontWiperLineItems.forEach((part) => {
|
||||
this.currentCartItems.vaps.push(part);
|
||||
});
|
||||
}
|
||||
}
|
||||
if (!rearWipersAlreadyInVaps && this.selectedRearWipers) {
|
||||
if (part.rearWiperLineItems) {
|
||||
part.rearWiperLineItems.forEach((part) => {
|
||||
this.currentCartItems.vaps.push(part);
|
||||
});
|
||||
} else {
|
||||
// for rain defense, a "single" part (w/o subItems)
|
||||
this.currentCartItems.vaps.push(part);
|
||||
}
|
||||
}
|
||||
this.$refs[modalName].closeModal();
|
||||
|
|
@ -107,25 +148,46 @@ export default {
|
|||
return item.partType.includes("WIPER");
|
||||
});
|
||||
let wiperLineItem;
|
||||
|
||||
if (wiperLineItems.length === 1) {
|
||||
wiperLineItem = wiperLineItems[0];
|
||||
wiperLineItem.listPrice = parseFloat(
|
||||
wiperLineItem.totalFrontPrice = parseFloat(
|
||||
wiperLineItem.laborAmount + wiperLineItem.sellingPrice + wiperLineItem.kitPrice
|
||||
).toFixed(2);
|
||||
return wiperLineItem;
|
||||
} else if (wiperLineItems.length > 1) {
|
||||
let combinedPrice = 0;
|
||||
let totalFrontPrice = 0;
|
||||
let totalRearPrice = 0;
|
||||
wiperLineItems?.forEach((item) => {
|
||||
combinedPrice += item?.laborAmount + item?.sellingPrice + item?.kitPrice;
|
||||
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",
|
||||
subItems: [],
|
||||
listPrice: parseFloat(combinedPrice).toFixed(2),
|
||||
frontWiperLineItems: [],
|
||||
rearWiperLineItems: [],
|
||||
totalFrontPrice: parseFloat(totalFrontPrice).toFixed(2),
|
||||
totalRearPrice: parseFloat(totalRearPrice).toFixed(2),
|
||||
priceRangeText: "",
|
||||
};
|
||||
wiperLineItems?.forEach((item) => {
|
||||
wiperLineItem.subItems.push(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;
|
||||
}
|
||||
|
|
@ -134,7 +196,7 @@ export default {
|
|||
answersCmsData() {
|
||||
return this.getCmsContent(this.vapsTilesCmsName, "Answers");
|
||||
},
|
||||
answersToDisplay() {
|
||||
buttonsToDisplay() {
|
||||
const answers = [];
|
||||
if (!this.answersCmsData) return answers;
|
||||
const getAnswer = (name, answers) => {
|
||||
|
|
@ -145,7 +207,11 @@ export default {
|
|||
};
|
||||
if (this.showAddWipers) {
|
||||
const answer = getAnswer("WipersModal", this.answersCmsData);
|
||||
answer.SubText = "+$" + this.wipersItem.listPrice;
|
||||
if (this.wipersItem.priceRangeText?.length > 0) {
|
||||
answer.SubText = this.wipersItem.priceRangeText;
|
||||
} else {
|
||||
answer.SubText = "+$" + this.wipersItem.totalFrontPrice;
|
||||
}
|
||||
answers.push(answer);
|
||||
}
|
||||
if (this.showAddRainDefense) {
|
||||
|
|
@ -159,6 +225,65 @@ export default {
|
|||
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>
|
||||
|
|
|
|||
Loading…
Reference in a new issue