diff --git a/src/digital-components/salesforce-webchat/salesforce-webchat.vue b/src/digital-components/salesforce-webchat/salesforce-webchat.vue index 2cac40833..20ac8e44f 100644 --- a/src/digital-components/salesforce-webchat/salesforce-webchat.vue +++ b/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() { diff --git a/src/digital-components/sierra-webchat/sierra-webchat.vue b/src/digital-components/sierra-webchat/sierra-webchat.vue index 0d686202f..e12ab053e 100644 --- a/src/digital-components/sierra-webchat/sierra-webchat.vue +++ b/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(); + } }, }; diff --git a/src/fmg-components/funnel-header/funnel-header.vue b/src/fmg-components/funnel-header/funnel-header.vue index fc77336d3..f7d55b354 100644 --- a/src/fmg-components/funnel-header/funnel-header.vue +++ b/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 - this.syncSierraExperimentFlag(); - // Show if Sierra experiment is active and chat is not open - if (this.webchatGlobalNonpersistedState.shouldLaunchSierra) { - return !this.sierraChatOpen; + // Hide the chat icon if Sierra chat is open + if (this.sierraChatOpen) { + return false; } - // 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.showWebchatButton + (this.webchatGlobalNonpersistedState.shouldLaunchSierra || + 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 - this._handleSierraChatClosed = () => { - this.sierraChatOpen = false; + // Listen for Sierra chat open/close events from sierra-webchat + this._handleSierraChatVisibility = (event) => { + 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); }, };