CASH-805 - Hide chat button when sierra or salesforce chat are opened in different pages

src/digital-components/salesforce-webchat/salesforce-webchat.vue

@@ -34,6 +34,29 @@ export default {
         script.src = "https://service.force.com/embeddedservice/5.0/esw.min.js";
         script.onload = this.initializeSalesforceWebchat;
         document.body.appendChild(script);
+
+        // Notify funnel-header about Salesforce chat open/close state
+        this._salesforceChatOpenObserver = new MutationObserver(() => {
+            const isOpen = !!document.querySelector(".embeddedServiceSidebar");
+            window.dispatchEvent(
+                new CustomEvent("salesforce-chat-visibility", { detail: { open: isOpen } })
+            );
+        });
+        this._salesforceChatOpenObserver.observe(document.body, {
+            childList: true,
+            subtree: true,
+        });
+    },
+    beforeUnmount() {
+        // Clean up event listeners and observers
+        window.removeEventListener(
+            "salesforce-chat-visibility",
+            this._handleSalesforceChatVisibility
+        );
+        window.removeEventListener("sierra-chat-transfer", this._handleSierraToSalesforceTransfer);
+        if (this._salesforceChatOpenObserver) {
+            this._salesforceChatOpenObserver.disconnect();
+        }
     },
     methods: {
         initializeSalesforceWebchat() {

src/digital-components/sierra-webchat/sierra-webchat.vue

@@ -93,7 +93,6 @@ export default {
                         Email: transfer.data.email,
                         Subject: transfer.data.chat_summary, // for now passing in chat_summery in Subject. But this will be changed in future.
                     };
-                    // Start chat immediately if required fields are present
                     if (
                         window.embedded_svc.liveAgentAPI &&
                         typeof window.embedded_svc.liveAgentAPI.startChat === "function"
@@ -106,10 +105,25 @@ export default {
             }
         };
         window.addEventListener("sierra-chat-transfer", this._handleSierraTransfer);
+
+        // Notify funnel-header about Sierra chat open/close state
+        this._sierraChatContainerObserver = new MutationObserver(() => {
+            const isOpen = !!document.querySelector("[data-sierra-chat-container]");
+            window.dispatchEvent(
+                new CustomEvent("sierra-chat-visibility", { detail: { open: isOpen } })
+            );
+        });
+        this._sierraChatContainerObserver.observe(document.body, {
+            childList: true,
+            subtree: true,
+        });
     },
     beforeUnmount() {
         window.removeEventListener("launch-sierra-webchat", this.triggerSierraChat);
         window.removeEventListener("sierra-chat-transfer", this._handleSierraTransfer);
+        if (this._sierraChatContainerObserver) {
+            this._sierraChatContainerObserver.disconnect();
+        }
     },
 };
 </script>

src/fmg-components/funnel-header/funnel-header.vue

@@ -55,6 +55,8 @@ export default {
         return {
             globalAlertMessages: [],
             sierraChatOpen: false,
+            salesforceChatOpen: false,
+            isSalesforceTransferInProgress: false,
         };
     },
     props: {
@@ -73,16 +75,19 @@ export default {
             return this.getCmsContent(this.cmsWidgetName, "LogoImage");
         },
         shouldShowWebchatButton() {
-            // Always update experiment flag before computing visibility
+            // Hide the chat icon if Sierra chat is open
-            this.syncSierraExperimentFlag();
+            if (this.sierraChatOpen) {
-            // Show if Sierra experiment is active and chat is not open
+                return false;
-            if (this.webchatGlobalNonpersistedState.shouldLaunchSierra) {
-                return !this.sierraChatOpen;
             }
-            // Otherwise, use Salesforce logic
+            // Hide the chat icon if Salesforce chat is open or transfer is in progress
+            if (this.salesforceChatOpen || this.isSalesforceTransferInProgress) {
+                return false;
+            }
+            // Show if either Sierra is enabled or Salesforce button is available and not hidden by page
             return (
-                !this.shouldHideWebchatButtonOnPage &&
+                (this.webchatGlobalNonpersistedState.shouldLaunchSierra ||
-                this.webchatGlobalNonpersistedState.showWebchatButton
+                    this.webchatGlobalNonpersistedState.showWebchatButton) &&
+                !this.shouldHideWebchatButtonOnPage
             );
         },
     },
@@ -123,6 +128,7 @@ export default {
         progressBar,
     },
     mounted() {
+        this.syncSierraExperimentFlag();
         // Check if alert event is on the bus
         const alertEvent = eventBus.readAndPopEventFromBus(
             globalEvents.Categories.GLOBAL_ALERT,
@@ -144,14 +150,47 @@ export default {
             unknownAlertEvent.displayAlert = true;
             this.globalAlertMessages.push(unknownAlertEvent);
         }
-        // Listen for Sierra chat close event to re-enable the chat button if needed
+        // Listen for Sierra chat open/close events from sierra-webchat
-        this._handleSierraChatClosed = () => {
+        this._handleSierraChatVisibility = (event) => {
-            this.sierraChatOpen = false;
+            this.sierraChatOpen = !!(event.detail && event.detail.open);
+            if (this.sierraChatOpen) {
+                this.isSalesforceTransferInProgress = false;
+            }
         };
-        window.addEventListener("sierra-chat-closed", this._handleSierraChatClosed);
+        window.addEventListener("sierra-chat-visibility", this._handleSierraChatVisibility);
+
+        // Listen for Salesforce chat open/close events from salesforce-webchat
+        this._handleSalesforceChatVisibility = (event) => {
+            this.salesforceChatOpen = !!(event.detail && event.detail.open === true);
+        };
+        window.addEventListener("salesforce-chat-visibility", this._handleSalesforceChatVisibility);
+
+        // Listen for transfer event to set transfer-in-progress flag
+        this._handleSierraToSalesforceTransfer = () => {
+            this.isSalesforceTransferInProgress = true;
+        };
+        window.addEventListener("sierra-chat-transfer", this._handleSierraToSalesforceTransfer);
+
+        // Reset transfer flag when Salesforce chat opens
+        this._handleSalesforceChatOpened = (event) => {
+            if (event.detail && event.detail.open === true) {
+                this.isSalesforceTransferInProgress = false;
+                this.salesforceChatOpen = true;
+            } else {
+                this.salesforceChatOpen = false;
+            }
+        };
+        window.addEventListener("salesforce-chat-visibility", this._handleSalesforceChatOpened);
     },
     beforeUnmount() {
         window.removeEventListener("sierra-chat-closed", this._handleSierraChatClosed);
+        window.removeEventListener("sierra-chat-visibility", this._handleSierraChatVisibility);
+        window.removeEventListener(
+            "salesforce-chat-visibility",
+            this._handleSalesforceChatVisibility
+        );
+        window.removeEventListener("sierra-chat-transfer", this._handleSierraToSalesforceTransfer);
+        window.removeEventListener("salesforce-chat-visibility", this._handleSalesforceChatOpened);
     },
 };
 </script>