Merge pull request #3050 from Safelite/feature/CASH-2262

CASH-2262 | Button visibility issues

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

@@ -41,9 +41,6 @@ export default {
     beforeUnmount() {
         // Clean up event listeners and observers
         window.removeEventListener("sierra-chat-transfer", this._handleSierraToSalesforceTransfer);
-        if (this._salesforceChatOpenObserver) {
-            this._salesforceChatOpenObserver.disconnect();
-        }
     },
     methods: {
         initializeSalesforceWebchat() {

src/digital-components/sierra-webchat/sierra-webchat.spec.js

@@ -59,14 +59,6 @@ describe("sierraWebchat.vue", () => {
         expect(window.sierraChat.closeChatModal).toHaveBeenCalled();
     });
 
-    it("dispatches sierra-chat-closed on handleSierraOnClose", () => {
-        const eventSpy = jest.spyOn(window, "dispatchEvent");
-        wrapper.vm.createSierraConfig().onClose();
-        expect(eventSpy).toHaveBeenCalledWith(
-            expect.objectContaining({ type: "sierra-chat-closed" })
-        );
-    });
-
     it("dispatches sierra-chat-transfer on handleSierraOnTransfer", () => {
         const eventSpy = jest.spyOn(window, "dispatchEvent");
         const transfer = {

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

@@ -7,10 +7,20 @@ import analyticsMixin from "@/mixins/analytics-mixin";
 import store from "@/store";
 import { routeData } from "@/router/constants/routes";
 import { deepClone } from "@/helpers/object-helper";
+import { webchatHelper } from "@/helpers/webchat-helper";
 
 export default {
     name: "sierraWebchat",
     mixins: [analyticsMixin],
+    data() {
+        return {
+            transferInProgress: false,
+        };
+    },
+    setup() {
+        const { webchatGlobalNonpersistedState, launchWebchat } = webchatHelper();
+        return { webchatGlobalNonpersistedState, launchWebchat };
+    },
     methods: {
         openSierraChatModal() {
             const sierra = window.sierraChat || window.sierra || window.SierraChat;
@@ -35,11 +45,18 @@ export default {
                 display: "corner",
                 onLoad: () => this.openSierraChatModal(),
                 onOpen: () => {},
-                onClose: () => window.dispatchEvent(new CustomEvent("sierra-chat-closed")),
+                onClose: () => {
-                onTransfer: (transfer) =>
+                    if (!this.transferInProgress) {
+                        this.webchatGlobalNonpersistedState.showWebchatButton = true;
+                        this.transferInProgress = false;
+                    }
+                },
+                onTransfer: (transfer) => {
+                    this.transferInProgress = true;
                     window.dispatchEvent(
                         new CustomEvent("sierra-chat-transfer", { detail: transfer })
-                    ),
+                    );
+                },
             };
         },
         getSierraContext() {
@@ -152,37 +169,16 @@ export default {
                         LastName: transfer.data.last_name,
                         Email: transfer.data.email,
                     });
-                    if (
-                        window.embeddedservice_bootstrap.utilAPI &&
-                        typeof window.embeddedservice_bootstrap.utilAPI.launchChat === "function"
-                    ) {
-                        window.embeddedservice_bootstrap.utilAPI.launchChat();
-                        return;
-                    }
                 }
-                window.embeddedservice_bootstrap.utilAPI.launchChat();
+                this.webchatGlobalNonpersistedState.shouldLaunchSierra = false;
+                this.launchWebchat();
             }
         };
         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

@@ -79,16 +79,7 @@ export default {
             return this.getCmsContent(this.cmsWidgetName, "LogoImage");
         },
         shouldShowWebchatButton() {
-            // Hide the chat icon if Sierra chat is open
+            return this.webchatGlobalNonpersistedState.showWebchatButton;
-            if (this.sierraChatOpen) {
-                return false;
-            }
-            // Show if either Sierra is enabled or Salesforce button is available and not hidden by page
-            return (
-                (this.webchatGlobalNonpersistedState.shouldLaunchSierra ||
-                    this.webchatGlobalNonpersistedState.showWebchatButton) &&
-                !this.shouldHideWebchatButtonOnPage
-            );
         },
     },
     methods: {
@@ -116,10 +107,6 @@ export default {
         webchatClicked(event) {
             event.preventDefault();
             this.launchWebchat();
-            // Only set sierraChatOpen if Sierra experiment is active
-            if (this.webchatGlobalNonpersistedState.shouldLaunchSierra) {
-                this.sierraChatOpen = true;
-            }
         },
         syncSierraExperimentFlag() {
             const experiments = store.getters.applicationUser.experiments;
@@ -159,11 +146,6 @@ export default {
             unknownAlertEvent.displayAlert = true;
             this.globalAlertMessages.push(unknownAlertEvent);
         }
-        // Listen for Sierra chat open/close events from sierra-webchat
-        this._handleSierraChatVisibility = (event) => {
-            this.sierraChatOpen = !!(event.detail && event.detail.open);
-        };
-        window.addEventListener("sierra-chat-visibility", this._handleSierraChatVisibility);
 
         // Add scroll listener for header shadow effect
         this._handleScroll = () => {
@@ -172,8 +154,6 @@ export default {
         window.addEventListener("scroll", this._handleScroll);
     },
     beforeUnmount() {
-        window.removeEventListener("sierra-chat-closed", this._handleSierraChatClosed);
-        window.removeEventListener("sierra-chat-visibility", this._handleSierraChatVisibility);
         window.removeEventListener("sierra-chat-transfer", this._handleSierraToSalesforceTransfer);
         window.removeEventListener("scroll", this._handleScroll);
     },

src/helpers/webchat-helper.js

@@ -8,6 +8,7 @@ const webchatGlobalNonpersistedState = reactive({
 
 export const webchatHelper = () => {
     function launchWebchat() {
+        webchatGlobalNonpersistedState.showWebchatButton = false;
         if (webchatGlobalNonpersistedState.shouldLaunchSierra) {
             window.dispatchEvent(new CustomEvent("launch-sierra-webchat")); // launches the sierra chat
         } else {