From 7eea3baa13b002c003cd9212d597fc5cb30064cf Mon Sep 17 00:00:00 2001
From: Scott Kiener <scott.kiener@safelite.com>
Date: Thu, 9 Nov 2023 14:52:18 -0500
Subject: [PATCH] CSR-1452 | Alerts for promos and alert.vue refactoring

---
 src/fmg-components/cart/cart.vue              |  3 +-
 .../funnel-header/funnel-header.vue           | 56 +++++++++----------
 src/helpers/promotions-helper.js              | 18 +++---
 src/layouts/payment-method/payment-method.vue | 17 ++++--
 src/layouts/quote/quote.vue                   | 10 ++--
 5 files changed, 53 insertions(+), 51 deletions(-)

diff --git a/src/fmg-components/cart/cart.vue b/src/fmg-components/cart/cart.vue
index 7390495f2..a44ef3c07 100644
--- a/src/fmg-components/cart/cart.vue
+++ b/src/fmg-components/cart/cart.vue
@@ -221,7 +221,7 @@ export default {
                     let cartItem = null;
 
                     cartItem = {
-                        name: "Some Kind of Promo", // get from CMS?
+                        name: promoLineItem.promoCode,
                         category: cartItemCategories.PROMOS,
                         cartItemType: promoLineItem.partType,
                         isDisplayed: true,
@@ -230,6 +230,7 @@ export default {
                             (promoLineItem.laborAmount ?? 0) +
                             (promoLineItem.sellingPrice ?? 0),
                         salesTax: promoLineItem.salesTax,
+                        lineItems: [],
                     };
 
                     promoLineItem.cartItemType = cartItem.cartItemType;
diff --git a/src/fmg-components/funnel-header/funnel-header.vue b/src/fmg-components/funnel-header/funnel-header.vue
index d9c598bb4..26a9652d4 100644
--- a/src/fmg-components/funnel-header/funnel-header.vue
+++ b/src/fmg-components/funnel-header/funnel-header.vue
@@ -5,18 +5,18 @@
         <img class="logo-image img-fluid" :src="imageSrc" alt="Safelite logo" />
         <menuModal />
     </div>
-
-    <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 v-for="globalAlert in globalAlertMessages" :key="globalAlert.id">
+        <transition name="fade" mode="out-in">
+            <alert
+                v-if="globalAlert.displayAlert"
+                class="rounded-0 w-100 border-0 shadow-sm"
+                cmsWidgetName="GlobalAlert"
+                :manualHeadline="globalAlert.messageHeadline"
+                :manualCopy="globalAlert.messageCopy"
+                :alertClass="globalAlert.type"
+                v-bind:isDismissible="globalAlert.isDismissible" />
+        </transition>
+    </template>
 </template>
 
 <script>
@@ -32,14 +32,8 @@ export default {
     name: "funnel-header",
     data() {
         return {
-            displayGlobalAlert: false,
-            globalAlertMessage: {
-                isDismissible: false,
-                messageCopy: "",
-                messageHeadline: "",
-                type: "",
-            },
-            countdownTimer: () => {},
+            alertIdCounter: 0,
+            globalAlertMessages: [],
         };
     },
     props: {
@@ -51,18 +45,18 @@ export default {
         },
     },
     methods: {
-        triggerGlobalAlert(alertEvent, isAutoDismissing) {
-            clearTimeout(this.countdownTimer);
-            this.displayGlobalAlert = true;
-            this.globalAlertMessage = alertEvent;
+        pushGlobalAlert(alertToPush, isAutoDismissing) {
+            alertToPush.displayAlert = true;
+            alertToPush.id = this.alertIdCounter;
+            this.alertIdCounter++;
             if (isAutoDismissing) {
-                this.countdownTimer = setTimeout(() => {
-                    this.displayGlobalAlert = false;
+                setTimeout(() => {
+                    alertToPush.displayAlert = false;
+                    // force a re-evaluation of the globalAlertMessages to detect the v-if change
+                    this.globalAlertMessages = this.globalAlertMessages.splice(0);
                 }, ALERT_DURATION);
             }
-        },
-        onAlertClose() {
-            this.displayGlobalAlert = false;
+            this.globalAlertMessages.push(alertToPush);
         },
     },
     components: {
@@ -77,8 +71,8 @@ export default {
         );
         // If alert event is on the bus, then display the alert
         if (alertEvent !== undefined) {
-            this.displayGlobalAlert = true;
-            this.globalAlertMessage = alertEvent;
+            alertEvent.displayAlert = true;
+            this.globalAlertMessages.push(alertEvent);
         }
     },
 };
diff --git a/src/helpers/promotions-helper.js b/src/helpers/promotions-helper.js
index 40ef6cafd..04d2fdbe9 100644
--- a/src/helpers/promotions-helper.js
+++ b/src/helpers/promotions-helper.js
@@ -115,9 +115,6 @@ export async function revalidatePromosAndValidateNewPromo(
 }
 
 export function buildToastMessagesFromRevalidateOrValidatePromoResponse(promoResponse, oldActivePromos = [], oldInactivePromos = []) {
-    console.log('oldActivePromos', oldActivePromos);
-    console.log('oldInactivePromos', oldInactivePromos);
-    console.log('promoResponse', promoResponse);
     const alerts = [];
     // Revalidate always has an "errors" array
     if (promoResponse.errors) {
@@ -130,10 +127,14 @@ export function buildToastMessagesFromRevalidateOrValidatePromoResponse(promoRes
                 activePromoCodesFromResponse.push(promoCodeToDisplay);
             }
         });
-        console.log('oldPromoCodes', oldPromoCodes);
-        console.log('activePromoCodesFromResponse', activePromoCodesFromResponse);
+        const inactivePromoCodesFromResponse = [];
+        promoResponse.errors.forEach(newInactive => {
+            const promoCodeToDisplay = getPromoCodeWithoutBundleIdentifier(newInactive.promoCode);
+            if (!inactivePromoCodesFromResponse.includes(promoCodeToDisplay)) {
+                inactivePromoCodesFromResponse.push(promoCodeToDisplay);
+            }
+        });
         const newlyActivatedPromoCodes = activePromoCodesFromResponse.filter(newPromoCode => !oldPromoCodes.includes(newPromoCode));
-        const newlyInactivatedPromos = promoResponse.errors.filter(error => !oldInactivePromos.includes(error.promoCode));
         newlyActivatedPromoCodes.forEach(newlyActivatedPromoCode => {
             alerts.push({
                 messageHeadline: "Promo applied!",
@@ -143,8 +144,9 @@ export function buildToastMessagesFromRevalidateOrValidatePromoResponse(promoRes
                 shouldAutoFade: true,
             });
         });
+
+        const newlyInactivatedPromos = inactivePromoCodesFromResponse.filter(errorPromoCode => !oldInactivePromos.includes(errorPromoCode));
         newlyInactivatedPromos.forEach(newlyInactivatedPromo => {
-            console.log(newlyInactivatedPromo);
             alerts.push({
                 messageHeadline: "Promo error",
                 messageCopy: `Sorry, promo code "${newlyInactivatedPromo}" is not valid`,
@@ -225,7 +227,7 @@ export function getVapsThatNeedToBeAddedToSatisfyPromos(
 
 // bundle promos look like: "bundlePromo/###"" for each promo, this returns "bundlePromo" only
 export function getPromoCodeWithoutBundleIdentifier(promoCode) {
-    return promoCode.substring(0, promoCode.indexOf("/"));
+    return promoCode.split("/")[0];
 }
 
 export function shouldStripPromoQueryString(fmgPageQueryValue) {
diff --git a/src/layouts/payment-method/payment-method.vue b/src/layouts/payment-method/payment-method.vue
index 0a6f20b83..5bf7997c5 100644
--- a/src/layouts/payment-method/payment-method.vue
+++ b/src/layouts/payment-method/payment-method.vue
@@ -214,14 +214,15 @@ export default {
             vm.updateFooterButtonText(vm.customCtaCopy);
 
             if (revalidatePromoResponse) {
-                const validateAlerts = buildToastMessagesFromRevalidateOrValidatePromoResponse(revalidatePromoResponse, oldActivePromos, oldInactivePromos);
-                if (validateAlerts.length) {
-                    vm.$refs.funnelHeader.triggerGlobalAlert(validateAlerts[0], validateAlerts[0].shouldAutoFade);
-                }   
+                const revalidateAlerts = buildToastMessagesFromRevalidateOrValidatePromoResponse(revalidatePromoResponse, oldActivePromos, oldInactivePromos);
+
+                revalidateAlerts.forEach(alert => {
+                    vm.$refs.funnelHeader.pushGlobalAlert(alert, alert.shouldAutoFade);
+                });
             }
             if (validatePromoResponse) {
                 const validateAlerts = buildToastMessagesFromRevalidateOrValidatePromoResponse(validatePromoResponse);
-                vm.$refs.funnelHeader.triggerGlobalAlert(validateAlerts[0], validateAlerts[0].shouldAutoFade);
+                vm.$refs.funnelHeader.pushGlobalAlert(validateAlerts[0], validateAlerts[0].shouldAutoFade);
             }
         });
     },
@@ -316,6 +317,10 @@ export default {
                 "payment-method",
                 false
             );
+            const revalidateAlerts = buildToastMessagesFromRevalidateOrValidatePromoResponse(revalidatePromoResponse, this.lineItems.promos, this.inactivePromos);
+            revalidateAlerts.forEach(alert => {
+                this.$refs.funnelHeader.pushGlobalAlert(alert, alert.shouldAutoFade);
+            });
 
             this.lineItems.promos = revalidatePromoResponse.promoLineItems;
             this.inactivePromos = revalidatePromoResponse.errors.map((x) => x.promoCode);
@@ -388,7 +393,7 @@ export default {
             );
         },
         showAlert(alert) {
-            this.$refs.funnelHeader.triggerGlobalAlert(alert, true);
+            this.$refs.funnelHeader.pushGlobalAlert(alert, true);
         },
     },
     computed: {
diff --git a/src/layouts/quote/quote.vue b/src/layouts/quote/quote.vue
index 46f36b330..83bc8653e 100644
--- a/src/layouts/quote/quote.vue
+++ b/src/layouts/quote/quote.vue
@@ -176,14 +176,14 @@ export default {
             vm.newValidatedPromos = validatePromoResponse?.orderPromos;
 
             if (revalidatePromoResponse) {
-                const validateAlerts = buildToastMessagesFromRevalidateOrValidatePromoResponse(revalidatePromoResponse, oldActivePromos, oldInactivePromos);
-                if (validateAlerts.length) {
-                    vm.$refs.funnelHeader.triggerGlobalAlert(validateAlerts[0], validateAlerts[0].shouldAutoFade);
-                }   
+                const revalidateAlerts = buildToastMessagesFromRevalidateOrValidatePromoResponse(revalidatePromoResponse, oldActivePromos, oldInactivePromos);
+                revalidateAlerts.forEach(alert => {
+                    vm.$refs.funnelHeader.pushGlobalAlert(alert, alert.shouldAutoFade);
+                });
             }
             if (validatePromoResponse) {
                 const validateAlerts = buildToastMessagesFromRevalidateOrValidatePromoResponse(validatePromoResponse);
-                vm.$refs.funnelHeader.triggerGlobalAlert(validateAlerts[0], validateAlerts[0].shouldAutoFade);
+                vm.$refs.funnelHeader.pushGlobalAlert(validateAlerts[0], validateAlerts[0].shouldAutoFade);
             }
         });
     },