@envive-ai/react-widgets-v3 0.3.11 → 0.3.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@envive-ai/react-widgets-v3",
-  "version": "0.3.11",
+  "version": "0.3.12",
   "description": "React widget library v3 for Envive services.",
   "keywords": [
     "react",

package/src/CXIntegration/hooks/useUnifiedCXButton.ts

@@ -9,7 +9,8 @@ interface UseUnifiedCXButtonProps {
   enabled: boolean;
   provider: CustomerServiceType;
   suppressMerchantButton?: boolean;
-  onSwitchToAgent?: () => void;
+  onSwitchToAgent: () => void;
+  onCXClose?: () => void;
 }
 
 export const useUnifiedCXButton = ({
@@ -17,6 +18,7 @@ export const useUnifiedCXButton = ({
   provider = CustomerServiceType.unsupported,
   suppressMerchantButton = false,
   onSwitchToAgent,
+  onCXClose,
 }: UseUnifiedCXButtonProps): UnifiedCXButton | undefined => {
   const { isSupported } = usePage();
   const hasParsedVariantInfo = useAtomValue(hasParsedVariantInfoAtom);
@@ -25,6 +27,7 @@ export const useUnifiedCXButton = ({
 
   const selectedCustomerService = customerService({
     onSwitchToAgent,
+    onCXClose,
     suppressMerchantButton,
   });
 

package/src/CXIntegration/implementations/useGladlyUnifiedCXButton.ts

@@ -1,3 +1,6 @@
+import { SelectorFactory } from '@envive-ai/react-hooks/application/utils';
+import { useElementObserver } from '@envive-ai/react-hooks/hooks/ElementObserver';
+import { FLOATING_BUTTON_ID } from '../../widgets/FloatingChatWidget/constants';
 import { CustomerServiceImplProps, UnifiedCXButton } from '../types';
 
 interface UseGladlyUnifiedCXButtonProps extends CustomerServiceImplProps {}
@@ -6,9 +9,11 @@ export const useGladlyUnifiedCXButton = ({
   onSwitchToAgent,
 }: UseGladlyUnifiedCXButtonProps): UnifiedCXButton => {
   const gladlyButton = document.querySelector('[data-aid*="gladlyChatChatButton"]');
+  const enviveFloatingButton = useElementObserver(SelectorFactory.id(FLOATING_BUTTON_ID));
 
   const toggle = () => {
     onSwitchToAgent();
+    enviveFloatingButton.hide();
     if (gladlyButton && gladlyButton instanceof HTMLElement) {
       gladlyButton.click();
     }

package/src/CXIntegration/implementations/useGorgiasUnifiedCXButton.ts

@@ -11,6 +11,7 @@ interface UseGorgiasUnifiedCXButtonProps extends CustomerServiceImplProps {}
 
 export const useGorgiasUnifiedCXButton = ({
   onSwitchToAgent,
+  onCXClose,
   suppressMerchantButton,
 }: UseGorgiasUnifiedCXButtonProps): UnifiedCXButton => {
   const chatWindow = useElementObserver(SelectorFactory.id(CHAT_WINDOW_ID));
@@ -22,10 +23,7 @@ export const useGorgiasUnifiedCXButton = ({
     onSwitchToAgent();
     chatButton.show();
     trigger.fire('click');
-
-    if (suppressMerchantButton) {
-      enviveFloatingButton.hide();
-    }
+    enviveFloatingButton.hide();
   };
 
   const isSwitchEnabled = () => !!SelectorFactory.chain(GORGIAS_BUTTON_SELECTOR).parse();
@@ -38,23 +36,28 @@ export const useGorgiasUnifiedCXButton = ({
   });
 
   chatWindow.onAdd(el => {
-    if (el && suppressMerchantButton) {
+    if (el) {
       const styles = window.getComputedStyle(el);
       const chatWindowDisplay = styles.getPropertyValue('display');
       const chatButtonDisplay = chatButton.targetNode?.style.display;
 
       if (chatWindowDisplay === 'block' && chatButtonDisplay === 'none') {
-        chatButton.show();
+        if (suppressMerchantButton) {
+          chatButton.show();
+        }
         enviveFloatingButton.hide();
       }
     }
   });
 
   chatWindow.onChange(el => {
-    if (el && suppressMerchantButton) {
+    if (el) {
       const styles = window.getComputedStyle(el);
       if (styles.getPropertyValue('display') === 'none') {
-        chatButton.hide();
+        onCXClose?.();
+        if (suppressMerchantButton) {
+          chatButton.hide();
+        }
         enviveFloatingButton.show();
       }
     }

package/src/CXIntegration/implementations/useGrooveUnifiedCXButton.ts

@@ -22,6 +22,7 @@ interface UseGrooveUnifiedCXButtonProps extends CustomerServiceImplProps {}
 
 export const useGrooveUnifiedCXButton = ({
   onSwitchToAgent,
+  onCXClose,
   suppressMerchantButton,
 }: UseGrooveUnifiedCXButtonProps): UnifiedCXButton => {
   const grooveChatContainer = useElementObserver(
@@ -32,10 +33,7 @@ export const useGrooveUnifiedCXButton = ({
   const previousIsOpenRef = useRef<boolean | undefined>(undefined);
 
   const toggle = () => {
-    if (suppressMerchantButton) {
-      enviveFloatingButton.hide();
-    }
-
+    enviveFloatingButton.hide();
     onSwitchToAgent();
     if (windowGrooveWidget) {
       windowGrooveWidget.open();
@@ -48,30 +46,29 @@ export const useGrooveUnifiedCXButton = ({
 
   const hideEnviveFloatingButton = () => {
     enviveFloatingButton.hide();
-    if (windowGrooveWidget) {
+    if (suppressMerchantButton && windowGrooveWidget) {
       windowGrooveWidget.open();
     }
   };
 
   const showEnviveFloatingButton = () => {
+    onCXClose?.();
     enviveFloatingButton.show();
-    if (windowGrooveWidget) {
+    if (suppressMerchantButton && windowGrooveWidget) {
       windowGrooveWidget.close();
     }
   };
 
   grooveChatContainer.onChange(() => {
-    if (suppressMerchantButton) {
-      const isOpen = windowGrooveWidget?.shim.isOpen;
+    const isOpen = windowGrooveWidget?.shim.isOpen;
 
-      if (isOpen !== previousIsOpenRef.current) {
-        previousIsOpenRef.current = isOpen;
+    if (isOpen !== previousIsOpenRef.current) {
+      previousIsOpenRef.current = isOpen;
 
-        if (isOpen) {
-          hideEnviveFloatingButton();
-        } else {
-          showEnviveFloatingButton();
-        }
+      if (isOpen) {
+        hideEnviveFloatingButton();
+      } else {
+        showEnviveFloatingButton();
       }
     }
   });

package/src/CXIntegration/implementations/useKustomerUnifiedCXButton.ts

@@ -7,6 +7,7 @@ interface UseKustomerUnifiedCXButtonProps extends CustomerServiceImplProps {}
 
 export const useKustomerUnifiedCXButton = ({
   onSwitchToAgent,
+  onCXClose,
   suppressMerchantButton,
 }: UseKustomerUnifiedCXButtonProps): UnifiedCXButton => {
   const kustomerButton = useElementObserver(
@@ -24,9 +25,7 @@ export const useKustomerUnifiedCXButton = ({
 
   const toggle = () => {
     onSwitchToAgent();
-    if (suppressMerchantButton) {
-      enviveFloatingButton.hide();
-    }
+    enviveFloatingButton.hide();
     kustomerButton.show();
     kustomerButton.fire('click');
   };
@@ -53,16 +52,17 @@ export const useKustomerUnifiedCXButton = ({
   });
 
   kustomerWidgetRoot.onChange(async el => {
-    if (suppressMerchantButton) {
-      for (const child of el?.children || []) {
-        if ([...child.classList].some(cls => cls.includes('widget__widgetWrapper'))) {
-          enviveFloatingButton.hide();
+    for (const child of el?.children || []) {
+      if ([...child.classList].some(cls => cls.includes('widget__widgetWrapper'))) {
+        enviveFloatingButton.hide();
+        if (suppressMerchantButton) {
           kustomerButton.show();
           kustomerNotification.show();
-        } else if (
-          [...child.classList].some(cls => cls.includes('chatRootIcon__chatIconWrapper'))
-        ) {
-          enviveFloatingButton.show();
+        }
+      } else if ([...child.classList].some(cls => cls.includes('chatRootIcon__chatIconWrapper'))) {
+        onCXClose?.();
+        enviveFloatingButton.show();
+        if (suppressMerchantButton) {
           kustomerButton.hide();
           kustomerNotification.hide();
         }

package/src/CXIntegration/implementations/useReDoUnifiedCXButton.ts

@@ -13,6 +13,7 @@ interface UseReDoUnifiedCXButtonProps extends CustomerServiceImplProps {}
 
 export const useReDoUnifiedCXButton = ({
   onSwitchToAgent,
+  onCXClose,
   suppressMerchantButton,
 }: UseReDoUnifiedCXButtonProps): UnifiedCXButton => {
   const chatContainer = useElementObserver(SelectorFactory.id(REDO_CHAT_CONTAINER_SELECTOR));
@@ -25,10 +26,7 @@ export const useReDoUnifiedCXButton = ({
     onSwitchToAgent();
     chatButton.show();
     chatButton.fire('click');
-
-    if (suppressMerchantButton) {
-      enviveFloatingButton.hide();
-    }
+    enviveFloatingButton.hide();
   };
 
   const isReDoButtonEnabled = () => !!SelectorFactory.chain(REDO_BUTTON_SELECTOR).parse();

package/src/CXIntegration/implementations/useRichpanelUnifiedCXButton.ts

@@ -7,6 +7,7 @@ interface UseRichpanelUnifiedCXButtonProps extends CustomerServiceImplProps {}
 
 export const useRichpanelUnifiedCXButton = ({
   onSwitchToAgent,
+  onCXClose,
   suppressMerchantButton,
 }: UseRichpanelUnifiedCXButtonProps): UnifiedCXButton => {
   const chatWindow = useElementObserver(
@@ -21,21 +22,16 @@ export const useRichpanelUnifiedCXButton = ({
   const toggle = () => {
     chatWindow.show();
     onSwitchToAgent();
+    enviveFloatingButton.hide();
 
     if (chatButton) {
       chatButton.show();
       chatButton.fire('click');
-      if (suppressMerchantButton) {
-        enviveFloatingButton.hide();
-      }
     }
 
     if (chatAlternativeButton) {
       chatAlternativeButton.show();
       chatAlternativeButton.fire('click');
-      if (suppressMerchantButton) {
-        enviveFloatingButton.hide();
-      }
     }
   };
 
@@ -62,16 +58,19 @@ export const useRichpanelUnifiedCXButton = ({
   });
 
   chatWindow.onChange(el => {
-    if (el && suppressMerchantButton) {
+    if (el) {
       const { classList } = el;
       if (classList.contains('opened')) {
         enviveFloatingButton.hide();
         chatWindow.show();
       } else if (classList.length === 1 && classList.contains('rp-messenger-container')) {
+        onCXClose?.();
         enviveFloatingButton.show();
-        chatButton.hide();
-        chatAlternativeButton.hide();
-        chatWindow.hide();
+        if (suppressMerchantButton) {
+          chatButton.hide();
+          chatAlternativeButton.hide();
+          chatWindow.hide();
+        }
       }
     }
   });

package/src/CXIntegration/implementations/useShopifyChatUnifiedCXButton.ts

@@ -7,6 +7,7 @@ interface UseShopifyChatUnifiedCXButtonProps extends CustomerServiceImplProps {}
 
 export const useShopifyChatUnifiedCXButton = ({
   onSwitchToAgent,
+  onCXClose,
   suppressMerchantButton,
 }: UseShopifyChatUnifiedCXButtonProps): UnifiedCXButton => {
   const shopifyChatContainer = useElementObserver(SelectorFactory.id('ShopifyChat'));
@@ -16,9 +17,7 @@ export const useShopifyChatUnifiedCXButton = ({
   const enviveFloatingButton = useElementObserver(SelectorFactory.id(FLOATING_BUTTON_ID));
 
   const toggle = () => {
-    if (suppressMerchantButton) {
-      enviveFloatingButton.hide();
-    }
+    enviveFloatingButton.hide();
     shopifyButton.show();
     onSwitchToAgent();
     shopifyButton.fire('click');
@@ -30,45 +29,36 @@ export const useShopifyChatUnifiedCXButton = ({
 
   const isSwitchEnabled = () => isShopifyButtonEnabled();
 
-  const hideEnviveFloatingButton = () => {
-    enviveFloatingButton.hide();
-    shopifyButton.show();
-  };
-
-  const showEnviveFloatingButton = () => {
-    enviveFloatingButton.show();
-    shopifyButton.hide();
-    shopifyChatContainer.hide();
-  };
-
   const handleChatStateChange = async (isOpen: boolean) => {
     if (isOpen) {
-      hideEnviveFloatingButton();
+      enviveFloatingButton.hide();
+      if (suppressMerchantButton) {
+        shopifyButton.show();
+      }
       return;
     }
 
-    showEnviveFloatingButton();
+    onCXClose?.();
+    enviveFloatingButton.show();
+    if (suppressMerchantButton) {
+      shopifyButton.hide();
+      shopifyChatContainer.hide();
+    }
   };
 
   shopifyButton.onAdd(() => {
-    if (suppressMerchantButton) {
-      const isOpen = shopifyChatContainer.targetNode?.getAttribute('is-open') === 'true';
-      handleChatStateChange(isOpen);
-    }
+    const isOpen = shopifyChatContainer.targetNode?.getAttribute('is-open') === 'true';
+    handleChatStateChange(isOpen);
   });
 
   shopifyChatContainer.onAdd(el => {
-    if (suppressMerchantButton) {
-      const isOpen = el?.getAttribute('is-open') === 'true';
-      handleChatStateChange(isOpen);
-    }
+    const isOpen = el?.getAttribute('is-open') === 'true';
+    handleChatStateChange(isOpen);
   });
 
   shopifyChatContainer.onChange(el => {
-    if (suppressMerchantButton) {
-      const isOpen = el?.getAttribute('is-open') === 'true';
-      handleChatStateChange(isOpen);
-    }
+    const isOpen = el?.getAttribute('is-open') === 'true';
+    handleChatStateChange(isOpen);
   });
 
   return {

package/src/CXIntegration/implementations/useTidioUnifiedCXButton.ts

@@ -1,3 +1,6 @@
+import { SelectorFactory } from '@envive-ai/react-hooks/application/utils';
+import { useElementObserver } from '@envive-ai/react-hooks/hooks/ElementObserver';
+import { FLOATING_BUTTON_ID } from '../../widgets/FloatingChatWidget/constants';
 import { CustomerServiceImplProps, UnifiedCXButton } from '../types';
 
 declare global {
@@ -15,9 +18,11 @@ export const useTidioUnifiedCXButton = ({
   onSwitchToAgent,
 }: UseTidioUnifiedCXButtonProps): UnifiedCXButton => {
   const tidioButton = window.tidioChatApi;
+  const enviveFloatingButton = useElementObserver(SelectorFactory.id(FLOATING_BUTTON_ID));
 
   const toggle = () => {
     onSwitchToAgent();
+    enviveFloatingButton.hide();
     if (tidioButton) {
       tidioButton.open();
     }

package/src/CXIntegration/implementations/useZendeskUnifiedCXButton.ts

@@ -7,6 +7,7 @@ interface UseZendeskUnifiedCXButtonProps extends CustomerServiceImplProps {}
 
 export const useZendeskUnifiedCXButton = ({
   onSwitchToAgent,
+  onCXClose,
   suppressMerchantButton,
 }: UseZendeskUnifiedCXButtonProps): UnifiedCXButton => {
   const zendeskButton = useElementObserver(SelectorFactory.chain('id|launcher @ query|button'));
@@ -18,9 +19,7 @@ export const useZendeskUnifiedCXButton = ({
     zendeskIframe.hide();
     onSwitchToAgent();
     zendeskButton.fire('click');
-    if (suppressMerchantButton) {
-      enviveFloatingButton.hide();
-    }
+    enviveFloatingButton.hide();
   };
 
   const isZendeskButtonEnabled = () => {
@@ -40,22 +39,28 @@ export const useZendeskUnifiedCXButton = ({
   });
 
   zendeskButton.onChange(el => {
-    if (el && suppressMerchantButton) {
+    if (el) {
       const ariaLabel = el.getAttribute('aria-label');
 
       if (ariaLabel === 'Open messaging window') {
+        onCXClose?.();
         enviveFloatingButton.show();
-        zendeskIframe.hide();
+        if (suppressMerchantButton) {
+          zendeskIframe.hide();
+        }
       }
 
       if (ariaLabel === 'Close messaging window') {
         enviveFloatingButton.hide();
-        zendeskIframe.show();
+        if (suppressMerchantButton) {
+          zendeskIframe.show();
+        }
       }
     }
   });
 
   zendeskAlternativeIframe.onRemove(() => {
+    onCXClose?.();
     if (suppressMerchantButton) {
       enviveFloatingButton.show();
       zendeskIframe.hide();

package/src/CXIntegration/implementations/useZowieUnifiedCXButton.ts

@@ -1,3 +1,6 @@
+import { SelectorFactory } from '@envive-ai/react-hooks/application/utils';
+import { useElementObserver } from '@envive-ai/react-hooks/hooks/ElementObserver';
+import { FLOATING_BUTTON_ID } from '../../widgets/FloatingChatWidget/constants';
 import { CustomerServiceImplProps, UnifiedCXButton } from '../types';
 
 declare global {
@@ -15,9 +18,11 @@ export const useZowieUnifiedCXButton = ({
   onSwitchToAgent,
 }: UseZowieUnifiedCXButtonProps): UnifiedCXButton => {
   const zowieButton = window?.Zowie;
+  const enviveFloatingButton = useElementObserver(SelectorFactory.id(FLOATING_BUTTON_ID));
 
   const toggle = () => {
     onSwitchToAgent();
+    enviveFloatingButton.hide();
     if (zowieButton) {
       zowieButton?.open();
     }

package/src/CXIntegration/types.ts

@@ -20,5 +20,6 @@ export interface UnifiedCXButton {
 
 export interface CustomerServiceImplProps {
   onSwitchToAgent: () => void;
+  onCXClose?: () => void;
   suppressMerchantButton?: boolean;
 }

package/src/debug/debugBar.tsx

@@ -3,7 +3,6 @@ import { ReportIssue } from './reportIssue';
 
 export const DebugBar = () => {
   const { showDebugBar } = useSystemSettingsContext();
-  console.log('=== showDebugBar ===', showDebugBar);
   if (!showDebugBar) return null;
   return (
     <div className="envive-tw-flex envive-tw-items-center envive-tw-p-[4px]">