From 20cda7ef69607e32fd980323485620f81cb30d82 Mon Sep 17 00:00:00 2001
From: Adam Caouette <adam.caouette@safelite.com>
Date: Mon, 6 Nov 2023 13:42:50 -0500
Subject: [PATCH] CSR-1384: work to add a auto-dismissing alert / 'toast'
 message for adding vap to cart

---
 .../funnel-header/funnel-header.vue           | 39 +++++++++---
 .../add-vaps-modal-buttons.vue                | 63 ++++++++++++++++---
 src/layouts/payment-method/payment-method.vue |  6 +-
 src/ux-components/alert/alert.vue             | 37 ++++++-----
 4 files changed, 113 insertions(+), 32 deletions(-)

diff --git a/src/fmg-components/funnel-header/funnel-header.vue b/src/fmg-components/funnel-header/funnel-header.vue
index b5775e649..d9c598bb4 100644
--- a/src/fmg-components/funnel-header/funnel-header.vue
+++ b/src/fmg-components/funnel-header/funnel-header.vue
@@ -5,14 +5,18 @@
         <img class="logo-image img-fluid" :src="imageSrc" alt="Safelite logo" />
         <menuModal />
     </div>
-    <alert
-        v-if="displayGlobalAlert"
-        class="rounded-0 w-100 border-0 shadow-sm"
-        cmsWidgetName="GlobalAlert"
-        :manualHeadline="globalAlertMessage.messageHeadline"
-        :manualCopy="globalAlertMessage.messageCopy"
-        :alertClass="globalAlertMessage.type"
-        v-bind:isDismissible="globalAlertMessage.isDismissible" />
+
+    <transition name="fade" mode="out-in">
+        <alert
+            v-if="displayGlobalAlert"
+            class="rounded-0 w-100 border-0 shadow-sm"
+            cmsWidgetName="GlobalAlert"
+            :manualHeadline="globalAlertMessage.messageHeadline"
+            :manualCopy="globalAlertMessage.messageCopy"
+            :alertClass="globalAlertMessage.type"
+            :onAlertCloseCallback="onAlertClose"
+            v-bind:isDismissible="globalAlertMessage.isDismissible" />
+    </transition>
 </template>
 
 <script>
@@ -21,6 +25,9 @@ import eventBus from "@/helpers/event-bus/event-bus";
 import { globalEvents } from "@/constants/events";
 import menuModal from "@/fmg-components/funnel-header/menu-modal/menu-modal";
 
+// Constants
+const ALERT_DURATION = 3000; // millisecond time to display alert before dismissal
+
 export default {
     name: "funnel-header",
     data() {
@@ -32,6 +39,7 @@ export default {
                 messageHeadline: "",
                 type: "",
             },
+            countdownTimer: () => {},
         };
     },
     props: {
@@ -42,6 +50,21 @@ export default {
             return this.getCmsContent(this.cmsWidgetName, "LogoImage");
         },
     },
+    methods: {
+        triggerGlobalAlert(alertEvent, isAutoDismissing) {
+            clearTimeout(this.countdownTimer);
+            this.displayGlobalAlert = true;
+            this.globalAlertMessage = alertEvent;
+            if (isAutoDismissing) {
+                this.countdownTimer = setTimeout(() => {
+                    this.displayGlobalAlert = false;
+                }, ALERT_DURATION);
+            }
+        },
+        onAlertClose() {
+            this.displayGlobalAlert = false;
+        },
+    },
     components: {
         alert,
         menuModal,
diff --git a/src/layouts/payment-method/add-vaps-modal-buttons/add-vaps-modal-buttons.vue b/src/layouts/payment-method/add-vaps-modal-buttons/add-vaps-modal-buttons.vue
index c502fb165..bb378c619 100644
--- a/src/layouts/payment-method/add-vaps-modal-buttons/add-vaps-modal-buttons.vue
+++ b/src/layouts/payment-method/add-vaps-modal-buttons/add-vaps-modal-buttons.vue
@@ -37,8 +37,7 @@
                         v-model="selectedWipers"
                         isMultiSelect
                         isRequired
-                        validationRules="checkbox-required"
-                        :additionalButtonData="additionalButtonData" />
+                        validationRules="checkbox-required" />
                 </div>
                 <div v-else-if="wipersOffered === wipersOfferedStrings.FRONT" class="wiper-options">
                     <p class="price">+${{ wipersModal.totalFrontPrice }}</p>
@@ -62,6 +61,7 @@ import { partTypeStrings } from "@/constants/part-type-strings";
 import { defineRule } from "vee-validate";
 import { required } from "@/helpers/validation-rules";
 import { errorMessages } from "@/constants/error-messages";
+import { processIfStatements } from "@/helpers/cms-content-helper";
 
 // DEFINE VALIDATION RULES
 defineRule("checkbox-required", required(errorMessages.OPTION_REQUIRED));
@@ -88,20 +88,23 @@ export default {
         };
     },
     methods: {
+        processIfStatements,
         openModal(modalName) {
+            this.selectedWipers = this.getSelectedWipers(); // reset selectedWipers to null upon modal open
             this.$refs[modalName].openModal();
         },
         closeModal(modalName) {
             this.$refs[modalName].closeModal();
         },
         addRainDefenseToCart(modalName, part) {
-            const alreadyInCart = this.currentCartItems.vaps.some((item) => {
-                return item.partType === part.partType;
-            });
-            if (!alreadyInCart) {
-                this.currentCartItems.vaps.push(part);
-            }
+            this.currentCartItems.vaps.push(part);
             this.closeModal(modalName);
+            const message = this.getRainDefenseAddedMessage();
+            this.$emit("added-to-cart", {
+                messageHeadline: message,
+                type: "alert-success",
+                isDismissible: true,
+            });
         },
         addWipersToCart(modalName, part) {
             const itemsForCart = [];
@@ -123,9 +126,11 @@ export default {
                     this.wipersOffered === wipersOfferedStrings.FRONT
                 ) {
                     itemsForCart.push(wipersOfferedStrings.FRONT);
+                    this.selectedWipers = ["FRONT"];
                 }
                 if (!rearWipersAlreadyInCart && this.wipersOffered === wipersOfferedStrings.REAR) {
                     itemsForCart.push(wipersOfferedStrings.REAR);
+                    this.selectedWipers = ["REAR"];
                 }
             }
 
@@ -143,7 +148,13 @@ export default {
             });
 
             this.closeModal(modalName);
-            this.selectedWipers;
+
+            const message = this.getWipersAddedMessage();
+            this.$emit("added-to-cart", {
+                messageHeadline: message,
+                type: "alert-success",
+                isDismissible: true,
+            });
         },
         updateWipersOffered(value) {
             this.wipersOffered = value;
@@ -151,6 +162,34 @@ export default {
         getSelectedWipers() {
             return null;
         },
+        getRainDefenseAddedMessage() {
+            return this.AddRainDefenseSuccessMessageFromCms;
+        },
+        getWipersAddedMessage() {
+            return this.processIfStatements(
+                this.AddWipersSuccessMessageFromCms,
+                "custom",
+                this.getCustomValueFromString
+            );
+        },
+        getCustomValueFromString(str) {
+            switch (str) {
+                case "vapsAddedIsFrontWipers":
+                    return (
+                        this.selectedWipers?.length === 1 &&
+                        this.selectedWipers[0] === wipersOfferedStrings.FRONT
+                    );
+                case "vapsAddedIsRearWipers":
+                    return (
+                        this.selectedWipers?.length === 1 &&
+                        this.selectedWipers[0] === wipersOfferedStrings.REAR
+                    );
+                case "vapsAddedIsBothWipers":
+                    return this.selectedWipers?.length > 1;
+                default:
+                    return null;
+            }
+        },
     },
     computed: {
         currentCartItems() {
@@ -302,6 +341,12 @@ export default {
 
             return wipersOptions;
         },
+        AddRainDefenseSuccessMessageFromCms() {
+            return this.getCmsContent("AddRainDefenseSuccessMessageWidget", "Text");
+        },
+        AddWipersSuccessMessageFromCms() {
+            return this.getCmsContent("AddWipersSuccessMessageWidget", "Text");
+        },
     },
     components: {
         buttonQuestion,
diff --git a/src/layouts/payment-method/payment-method.vue b/src/layouts/payment-method/payment-method.vue
index d0ea3da47..96fc9265d 100644
--- a/src/layouts/payment-method/payment-method.vue
+++ b/src/layouts/payment-method/payment-method.vue
@@ -44,7 +44,8 @@
                     <add-vaps-modal-buttons
                         v-model="lineItems"
                         :availableLineItems="availableLineItems"
-                        vapsTilesCmsName="VapsProductTiles" />
+                        vapsTilesCmsName="VapsProductTiles"
+                        @added-to-cart="showAlert" />
 
                     <paymentMethodQuestion
                         v-if="!isPiaDisabled"
@@ -321,6 +322,9 @@ export default {
                 this.$route
             );
         },
+        showAlert(alert) {
+            this.$refs.funnelHeader.triggerGlobalAlert(alert, true);
+        },
     },
     computed: {
         damageInfo() {
diff --git a/src/ux-components/alert/alert.vue b/src/ux-components/alert/alert.vue
index ce4e6b60f..cd403061c 100644
--- a/src/ux-components/alert/alert.vue
+++ b/src/ux-components/alert/alert.vue
@@ -2,18 +2,19 @@
     <div
         class="alert fade show text-center mb-0 py-2 px-4 border-0"
         role="alert"
+        v-on="{ 'close.bs.alert': onAlertClose }"
         :class="[
             isDismissible ? 'alert-dismissible' : '',
             this.alertClass,
             this.cssClassNameForCmsWidget,
         ]">
-        <p class="m-0 fw-bold alert-heading">{{ alertHeadline }}</p>
+        <p class="mx-6 my-0 fw-bold alert-heading">{{ alertHeadline }}</p>
         <template v-for="paragraph in splitAlertCopyForParagraphTag" :key="paragraph">
             <p
-                class="m-0 text-body small"
+                class="mx-4 mt-1 text-body small"
                 v-if="!doesCopyContainRouterLink(paragraph) && !doesCopyContainTextLink(paragraph)"
                 v-html="paragraph"></p>
-            <p class="m-0 text-body small" v-else>
+            <p class="mx-4 mt-1 text-body small" v-else>
                 <template v-if="doesCopyContainRouterLink(paragraph)">
                     <textBlock :customText="paragraph" class="mb-1" marginTopSizeOverride="0" />
                 </template>
@@ -32,7 +33,7 @@
                 </template>
             </p>
         </template>
-        <button type="button" class="btn-close p-2" data-bs-dismiss="alert" aria-label="Close">
+        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close">
             <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 23.7 23.7" xml:space="preserve">
                 <path
                     d="m23.24 2.7-9.15 9.15L23.24 21a1.581 1.581 0 0 1-1.12 2.7c-.42 0-.82-.16-1.12-.46l-9.15-9.15-9.15 9.15c-.3.3-.7.46-1.12.46A1.581 1.581 0 0 1 .46 21l8.47-8.47.68-.68L.46 2.7c-.62-.62-.62-1.62 0-2.24.62-.62 1.62-.62 2.24 0l8.47 8.47.68.68L21 .46a1.57 1.57 0 0 1 2.23 0c.63.62.63 1.62.01 2.24z" />
@@ -58,14 +59,14 @@ export default {
     name: "alert",
     props: {
         isDismissible: Boolean,
-        /*
-    alertClass class names:
-    alert-success (green)
-    alert-danger (red)
-    alert-warning (yellow)
-    alert-info (blue)
-    */
         alertClass: String,
+        /*
+            alertClass class names:
+            alert-success (green)
+            alert-danger (red)
+            alert-warning (yellow)
+            alert-info (blue)
+        */
         cmsWidgetName: {
             type: String,
             default(rawProps) {
@@ -81,6 +82,9 @@ export default {
             type: Boolean,
             default: true,
         },
+        onAlertCloseCallback: {
+            type: Function,
+        },
     },
     computed: {
         pageQueryString() {
@@ -124,6 +128,9 @@ export default {
                         document.documentElement.clientHeight - footerHeight)
             );
         },
+        onAlertClose() {
+            this.onAlertCloseCallback?.();
+        },
     },
     mounted() {
         this.ensureAlertIsInViewPort();
@@ -137,6 +144,8 @@ export default {
 
 <style lang="scss">
 .alert {
+    padding: 0.675rem 0;
+
     button {
         display: none;
     }
@@ -145,12 +154,13 @@ export default {
         opacity: 1;
         width: 0.75rem;
         height: 0.75rem;
+        padding: 0;
     }
     &.alert-dismissible {
         button {
             display: flex;
-            top: 2px;
-            right: 2px;
+            top: 0.875rem;
+            right: 1rem;
         }
     }
     &.alert-info {
@@ -199,7 +209,6 @@ export default {
     }
     & p {
         font-size: 0.875rem;
-        margin-bottom: 0.25rem;
     }
 }
 </style>