CSR-1384: set up modals

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

@@ -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) {
+        addRainDefenseToCart(modalName, part) {
-            const vapsItems = this.currentCartItems.vaps;
+            const alreadyInVaps = this.currentCartItems.vaps.some((item) => {
-            const alreadyInVaps = vapsItems.some((item) => {
                 return item.partType === part.partType;
             });
             if (!alreadyInVaps) {
-                if (part.subItems) {
+                this.currentCartItems.vaps.push(part);
-                    // for wipers, a "combined" part (w/ subItems)
+            }
-                    part.subItems.forEach((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: [],
+                    frontWiperLineItems: [],
-                    listPrice: parseFloat(combinedPrice).toFixed(2),
+                    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>