Merge pull request #1459 from Safelite/feature/CSR-1384-modals-for-add-vaps

Feature/CSR-1384 modals for add vaps

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

@@ -3,39 +3,71 @@
         <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"
+                v-if="rainDefenseModal"
-                @footer-button-action="addToCart('RainDefenseModal', rainDefenseItem)"
+                @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"
+                v-if="wipersModal"
-                @footer-button-action="addToCart('WipersModal', wipersItem)"
+                @footer-button-action="addWipersToCart('WipersModal', wipersModal)"
                 footerButtonActionName="footer-button-action">
-                <p class="price">{{ wipersItem.listPrice }}</p>
+                <div v-if="wipersToDisplay === 'both'" class="wiper-options">
+                    <div>
+                        <checkboxQuestion
+                            class="mb-5"
+                            cmsWidgetName="AddFrontBladesQuestionWidget"
+                            v-model="selectedFrontWipers" />
+                        <p class="price">+${{ wipersModal.totalFrontPrice }}</p>
+                    </div>
+                    <div>
+                        <checkboxQuestion
+                            class="mb-5"
+                            cmsWidgetName="AddRearBladesQuestionWidget"
+                            v-model="selectedRearWipers" />
+                        <p class="price">+${{ wipersModal.totalRearPrice }}</p>
+                    </div>
+                </div>
+                <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>
     </transition>
 </template>
 
 <script>
+// COMPONENTS
 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";
+
+// SUPPORTING
+import { partTypeStrings } from "@/constants/part-type-strings";
+
+const wipersToDisplayStrings = {
+    FRONT: "FRONT",
+    REAR: "REAR",
+    BOTH: "BOTH",
+};
 
 export default {
     name: "add-vaps-modal-buttons",
@@ -47,54 +79,71 @@ export default {
     data() {
         return {
             addVapsButton: addVapsButton,
+            selectedFrontWipers: false,
+            selectedRearWipers: false,
+            wipersToDisplay: null,
         };
     },
     methods: {
         openModal(modalName) {
             this.$refs[modalName].openModal();
         },
-        addToCart(modalName, part) {
+        addRainDefenseToCart(modalName, part) {
-            const vapsItems = this.currentCartItems.vaps;
+            const alreadyInCart = this.currentCartItems.vaps.some((item) => {
-            const alreadyInVaps = vapsItems.some((item) => {
                 return item.partType === part.partType;
             });
-            if (!alreadyInVaps) {
+            if (!alreadyInCart) {
-                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 frontWipersAlreadyInCart = this.currentCartItems.vaps.some((item) => {
+                return item.partType === part.frontWiperLineItems[0].partType;
+            });
+            const rearWipersAlreadyInCart = this.currentCartItems.vaps.some((item) => {
+                return item.partType === part.rearWiperLineItems[0]?.partType;
+            });
+
+            if (this.wipersToDisplay === wipersToDisplayStrings.FRONT) {
+                this.selectedFrontWipers = true; // set as true if front wipers is only option
+            }
+            if (this.wipersToDisplay === wipersToDisplayStrings.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) => {
+                        this.currentCartItems.vaps.push(part);
+                    });
+                }
+            }
+            if (!rearWipersAlreadyInCart && 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();
+
+            if (this.wipersToDisplay === wipersToDisplayStrings.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() {
+        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) => {
-                return item.partType === "RAIN DEFENSE";
+                return item.partType === partTypeStrings.FRONT_WIPER;
             });
             if (lineItem)
                 lineItem.listPrice = parseFloat(
@@ -102,63 +151,158 @@ export default {
                 ).toFixed(2);
             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(partTypeStrings.FRONT_WIPER);
             });
-            let wiperLineItem;
+            const rearWiperLineItems = this.availableLineItems.filter((item) => {
-            if (wiperLineItems.length === 1) {
+                return item.partType.includes(partTypeStrings.REAR_WIPER);
-                wiperLineItem = wiperLineItems[0];
+            });
-                wiperLineItem.listPrice = parseFloat(
+            let wipersModal;
-                    wiperLineItem.laborAmount + wiperLineItem.sellingPrice + wiperLineItem.kitPrice
+            let totalFrontPrice = 0;
-                ).toFixed(2);
+            let totalRearPrice = 0;
-                return wiperLineItem;
+
-            } else if (wiperLineItems.length > 1) {
+            // calculate prices to display
-                let combinedPrice = 0;
+            frontWiperLineItems?.forEach((item) => {
-                wiperLineItems?.forEach((item) => {
+                totalFrontPrice += item?.laborAmount + item?.sellingPrice + item?.kitPrice;
-                    combinedPrice += item?.laborAmount + item?.sellingPrice + item?.kitPrice;
+            });
-                });
+            rearWiperLineItems?.forEach((item) => {
-                wiperLineItem = {
+                totalRearPrice += item?.laborAmount + item?.sellingPrice + item?.kitPrice;
-                    description: "COMBINED ITEM",
+            });
-                    partType: "WIPERS",
+
-                    subItems: [],
+            wipersModal = {
-                    listPrice: parseFloat(combinedPrice).toFixed(2),
+                description: "WIPERS ITEM",
-                };
+                partType: "WIPERS",
-                wiperLineItems?.forEach((item) => {
+                frontWiperLineItems: frontWiperLineItems,
-                    wiperLineItem.subItems.push(item);
+                rearWiperLineItems: rearWiperLineItems,
-                });
+                totalFrontPrice: parseFloat(totalFrontPrice).toFixed(2),
-                return wiperLineItem;
+                totalRearPrice: parseFloat(totalRearPrice).toFixed(2),
-            }
+            };
-            return [];
+
+            return wipersModal;
         },
         answersCmsData() {
             return this.getCmsContent(this.vapsTilesCmsName, "Answers");
         },
-        answersToDisplay() {
+        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 === partTypeStrings.FRONT_WIPER;
+            });
+            const frontWipersInCart = this.currentCartItems.vaps?.some((vap) => {
+                return vap?.partType?.includes(partTypeStrings.FRONT_WIPER);
+            });
+            const rearWipersInCart = this.currentCartItems.vaps?.some((vap) => {
+                return vap?.partType?.includes(partTypeStrings.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 (!rainDefenseInCart) {
-                answer.SubText = "+$" + this.wipersItem.listPrice;
+                // NO RAIN DEFENSE IN CART; SHOW RAIN DEFENSE BUTTON
-                answers.push(answer);
+                const modalData = getAnswer("RainDefenseModal", this.answersCmsData);
+                modalData.SubText = "+$" + this.rainDefenseModal.listPrice;
+                buttons.push(modalData);
             }
-            if (this.showAddRainDefense) {
+
-                const answer = getAnswer("RainDefenseModal", this.answersCmsData);
+            const modalData = getAnswer("WipersModal", this.answersCmsData);
-                answer.SubText = "+$" + this.rainDefenseItem.listPrice;
+            if (!frontWipersInCart) {
-                answers.push(answer);
+                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(wipersToDisplayStrings.BOTH);
+                    buttons.push(modalData);
+                } else {
+                    // NO FRONT WIPERS IN CART; SHOW ONLY FRONT WIPERS BUTTON
+                    modalData.SubText = "+$" + this.wipersModal.totalFrontPrice;
+                    this.updateWipersToDisplay(wipersToDisplayStrings.FRONT);
+                    buttons.push(modalData);
+                }
+            } 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(wipersToDisplayStrings.REAR);
+                buttons.push(modalData);
             }
-            return answers;
+
+            return buttons;
         },
     },
     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>