@envive-ai/react-widgets-v3 0.3.14 → 0.3.15-alpha.1

package/dist/src/CXIntegration/implementations/useHelpScoutUnifiedCXButton.js

@@ -0,0 +1,84 @@
+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';
+const BEACON_CONTAINER_ID = 'beacon-container';
+export const useHelpScoutUnifiedCXButton = ({ onSwitchToAgent, suppressMerchantButton, }) => {
+    const beaconContainer = useElementObserver(SelectorFactory.id(BEACON_CONTAINER_ID));
+    const enviveFloatingButton = useElementObserver(SelectorFactory.id(FLOATING_BUTTON_ID));
+    const toggle = () => {
+        onSwitchToAgent();
+        // Try using the Help Scout Beacon API first
+        if (typeof window.Beacon !== 'undefined') {
+            window.Beacon('open');
+        }
+        else {
+            // Fallback: Find and click the FAB button
+            const container = document.getElementById(BEACON_CONTAINER_ID);
+            const fabButton = container?.querySelector('.BeaconFabButtonFrame');
+            if (fabButton) {
+                fabButton.style.display = '';
+                fabButton.click();
+            }
+        }
+        if (suppressMerchantButton) {
+            enviveFloatingButton.hide();
+        }
+    };
+    const isHelpScoutButtonEnabled = () => {
+        // Check for the main Help Scout Beacon container
+        const beaconContainerEl = document.getElementById('beacon-container');
+        if (!beaconContainerEl)
+            return false;
+        // Check for the FAB button (Floating Action Button) or the global Beacon API
+        const fabButton = beaconContainerEl.querySelector('.BeaconFabButtonFrame');
+        const hasBeaconAPI = typeof window.Beacon !== 'undefined';
+        return !!(fabButton || hasBeaconAPI);
+    };
+    const isSwitchEnabled = () => isHelpScoutButtonEnabled();
+    // Hide Help Scout FAB button when beacon container is added
+    beaconContainer.onAdd(() => {
+        if (suppressMerchantButton) {
+            const fabButton = document
+                .getElementById(BEACON_CONTAINER_ID)
+                ?.querySelector('.BeaconFabButtonFrame');
+            if (fabButton) {
+                fabButton.style.display = 'none';
+            }
+            enviveFloatingButton.show();
+        }
+    });
+    // Observe the beacon container for visibility changes
+    // Help Scout Beacon adds/removes classes to show/hide the widget
+    beaconContainer.onChange(el => {
+        if (el && suppressMerchantButton) {
+            // Check if the BeaconContainer widget is open
+            const beaconWidget = el.querySelector('.BeaconContainer');
+            const fabButton = el.querySelector('.BeaconFabButtonFrame');
+            if (beaconWidget && fabButton) {
+                const { classList } = beaconWidget;
+                // When beacon is open (has enter-done class)
+                if (classList.contains('BeaconContainer-enter-done') ||
+                    classList.contains('BeaconContainer-enter-active')) {
+                    fabButton.style.display = '';
+                    enviveFloatingButton.hide();
+                }
+                // When beacon is closed (has exit class)
+                if (classList.contains('BeaconContainer-exit') ||
+                    classList.contains('BeaconContainer-exit-active')) {
+                    fabButton.style.display = 'none';
+                    enviveFloatingButton.show();
+                }
+            }
+        }
+    });
+    // Cleanup when container is removed
+    beaconContainer.onRemove(() => {
+        if (suppressMerchantButton) {
+            enviveFloatingButton.show();
+        }
+    });
+    return {
+        toggle,
+        isSwitchEnabled,
+    };
+};

package/dist/src/CXIntegration/implementations/useKustomerUnifiedCXButton.d.ts

@@ -0,0 +1,5 @@
+import { CustomerServiceImplProps, UnifiedCXButton } from '../types';
+interface UseKustomerUnifiedCXButtonProps extends CustomerServiceImplProps {
+}
+export declare const useKustomerUnifiedCXButton: ({ onSwitchToAgent, onCXClose, suppressMerchantButton, }: UseKustomerUnifiedCXButtonProps) => UnifiedCXButton;
+export {};

package/dist/src/CXIntegration/implementations/useKustomerUnifiedCXButton.js

@@ -0,0 +1,86 @@
+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';
+export const useKustomerUnifiedCXButton = ({ onSwitchToAgent, onCXClose, suppressMerchantButton, }) => {
+    const kustomerButton = useElementObserver(SelectorFactory.chain('id|kustomer-ui-sdk-iframe @ query|div[role="button"]'));
+    const kustomerNotification = useElementObserver(SelectorFactory.chain('id|kustomer-ui-sdk-iframe @ query|div[class^="unread__unread"]'));
+    const kustomerWidgetRoot = useElementObserver(SelectorFactory.chain('id|kustomer-ui-sdk-iframe @ id|root'));
+    const enviveFloatingButton = useElementObserver(SelectorFactory.id(FLOATING_BUTTON_ID));
+    const toggle = () => {
+        onSwitchToAgent();
+        enviveFloatingButton.hide();
+        kustomerButton.show();
+        kustomerButton.fire('click');
+    };
+    const isKustomerButtonEnabled = () => {
+        const kustomerButtonElement = document.getElementById('kustomer-ui-sdk-iframe')?.contentWindow?.document.getElementById('root')?.children?.length;
+        return !!kustomerButtonElement;
+    };
+    const isSwitchEnabled = () => isKustomerButtonEnabled();
+    kustomerButton.onAdd(() => {
+        if (suppressMerchantButton) {
+            kustomerButton.hide();
+        }
+    });
+    kustomerNotification.onAdd(() => {
+        if (suppressMerchantButton) {
+            kustomerNotification.hide();
+        }
+    });
+    kustomerWidgetRoot.onChange(async (el) => {
+        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'))) {
+                onCXClose?.();
+                enviveFloatingButton.show();
+                if (suppressMerchantButton) {
+                    kustomerButton.hide();
+                    kustomerNotification.hide();
+                }
+            }
+        }
+    });
+    const observer = new MutationObserver(() => {
+        const iframe = document.getElementById('kustomer-ui-sdk-iframe');
+        const button = iframe.contentWindow?.document.querySelector('div[role="button"]');
+        const notification = iframe.contentWindow?.document.querySelector('div[class^="unread__unread"]');
+        if (button && suppressMerchantButton) {
+            button.setAttribute('style', 'display: none;');
+        }
+        if (notification && suppressMerchantButton) {
+            notification.setAttribute('style', 'display: none;');
+        }
+    });
+    const kustomerIframe = document.getElementById('kustomer-ui-sdk-iframe');
+    if (kustomerIframe?.contentWindow?.document) {
+        observer.observe(kustomerIframe.contentWindow?.document, {
+            childList: true,
+            subtree: true,
+        });
+    }
+    const removeUnifiedCXButton = () => {
+        kustomerButton.show();
+        kustomerNotification.show();
+        // Ensure that we are displaying the buttons when we are removing the unified CX button
+        const iframe = document.getElementById('kustomer-ui-sdk-iframe');
+        const button = iframe.contentWindow?.document.querySelector('div[role="button"]');
+        const notification = iframe.contentWindow?.document.querySelector('div[class^="unread__unread"]');
+        if (button) {
+            button.setAttribute('style', 'display: block;');
+        }
+        if (notification) {
+            notification.setAttribute('style', 'display: block;');
+        }
+    };
+    return {
+        toggle,
+        removeUnifiedCXButton,
+        isSwitchEnabled,
+    };
+};

package/dist/src/CXIntegration/implementations/useReDoUnifiedCXButton.d.ts

@@ -0,0 +1,5 @@
+import { CustomerServiceImplProps, UnifiedCXButton } from '../types';
+interface UseReDoUnifiedCXButtonProps extends CustomerServiceImplProps {
+}
+export declare const useReDoUnifiedCXButton: ({ onSwitchToAgent, onCXClose, suppressMerchantButton, }: UseReDoUnifiedCXButtonProps) => UnifiedCXButton;
+export {};

package/dist/src/CXIntegration/implementations/useReDoUnifiedCXButton.js

@@ -0,0 +1,59 @@
+import { useRef } from 'react';
+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';
+const TIMEOUT = 700;
+const REDO_CHAT_CONTAINER_SELECTOR = 'redo-chat-widget';
+const REDO_CHAT_MODAL_SELECTOR = 'id|redo-chat-widget @ query|div > div';
+const REDO_BUTTON_SELECTOR = 'id|redo-chat-widget @ query|div[data-target=supp-chat-bubble]';
+export const useReDoUnifiedCXButton = ({ onSwitchToAgent, onCXClose, suppressMerchantButton, }) => {
+    const chatContainer = useElementObserver(SelectorFactory.id(REDO_CHAT_CONTAINER_SELECTOR));
+    const chatModal = useElementObserver(SelectorFactory.chain(REDO_CHAT_MODAL_SELECTOR));
+    const chatButton = useElementObserver(SelectorFactory.chain(REDO_BUTTON_SELECTOR));
+    const applyCSSTimeout = useRef(undefined);
+    const enviveFloatingButton = useElementObserver(SelectorFactory.id(FLOATING_BUTTON_ID));
+    const toggle = () => {
+        onSwitchToAgent();
+        chatButton.show();
+        chatButton.fire('click');
+        enviveFloatingButton.hide();
+    };
+    const isReDoButtonEnabled = () => !!SelectorFactory.chain(REDO_BUTTON_SELECTOR).parse();
+    const isSwitchEnabled = () => isReDoButtonEnabled();
+    const hideReDoButtonCSS = (el) => {
+        const shadowRootEl = el?.shadowRoot;
+        if (!shadowRootEl) {
+            return;
+        }
+        const sheet = new CSSStyleSheet();
+        sheet.replaceSync(`
+      div[data-target=supp-chat-bubble] {
+        display: none;
+      }
+    `);
+        shadowRootEl.adoptedStyleSheets.push(sheet);
+        enviveFloatingButton.show();
+    };
+    chatButton.onAdd(() => {
+        if (suppressMerchantButton) {
+            hideReDoButtonCSS(chatContainer.targetNode);
+        }
+    });
+    chatContainer.onAdd(el => {
+        if (suppressMerchantButton) {
+            hideReDoButtonCSS(el);
+        }
+    });
+    chatModal.onChange(() => {
+        if (suppressMerchantButton) {
+            clearTimeout(applyCSSTimeout.current);
+            applyCSSTimeout.current = setTimeout(() => {
+                hideReDoButtonCSS(chatContainer.targetNode);
+            }, TIMEOUT);
+        }
+    });
+    return {
+        toggle,
+        isSwitchEnabled,
+    };
+};

package/dist/src/CXIntegration/implementations/useRichpanelUnifiedCXButton.d.ts

@@ -0,0 +1,5 @@
+import { CustomerServiceImplProps, UnifiedCXButton } from '../types';
+interface UseRichpanelUnifiedCXButtonProps extends CustomerServiceImplProps {
+}
+export declare const useRichpanelUnifiedCXButton: ({ onSwitchToAgent, onCXClose, suppressMerchantButton, }: UseRichpanelUnifiedCXButtonProps) => UnifiedCXButton;
+export {};

package/dist/src/CXIntegration/implementations/useRichpanelUnifiedCXButton.js

@@ -0,0 +1,62 @@
+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';
+export const useRichpanelUnifiedCXButton = ({ onSwitchToAgent, onCXClose, suppressMerchantButton, }) => {
+    const chatWindow = useElementObserver(SelectorFactory.chain('id|richpanel_messenger_iframe @ query|.rp-messenger-container'));
+    const chatButton = useElementObserver(SelectorFactory.query('.rp-messenger-trigger'));
+    const chatAlternativeButton = useElementObserver(SelectorFactory.query('.rp-micro-app-dummy-icon'));
+    const enviveFloatingButton = useElementObserver(SelectorFactory.id(FLOATING_BUTTON_ID));
+    const toggle = () => {
+        chatWindow.show();
+        onSwitchToAgent();
+        enviveFloatingButton.hide();
+        if (chatButton) {
+            chatButton.show();
+            chatButton.fire('click');
+        }
+        if (chatAlternativeButton) {
+            chatAlternativeButton.show();
+            chatAlternativeButton.fire('click');
+        }
+    };
+    const isRichpanelButtonEnabled = () => {
+        return !!chatButton || !!chatAlternativeButton;
+    };
+    const isSwitchEnabled = () => isRichpanelButtonEnabled();
+    chatButton.onAdd(() => {
+        if (suppressMerchantButton) {
+            chatButton.hide();
+            chatWindow.hide();
+        }
+        enviveFloatingButton.show();
+    });
+    chatAlternativeButton.onAdd(() => {
+        if (suppressMerchantButton) {
+            chatAlternativeButton.hide();
+            chatWindow.hide();
+        }
+        enviveFloatingButton.show();
+    });
+    chatWindow.onChange(el => {
+        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();
+                if (suppressMerchantButton) {
+                    chatButton.hide();
+                    chatAlternativeButton.hide();
+                    chatWindow.hide();
+                }
+            }
+        }
+    });
+    return {
+        toggle,
+        isSwitchEnabled,
+    };
+};

package/dist/src/CXIntegration/implementations/useShopifyChatUnifiedCXButton.d.ts

@@ -0,0 +1,5 @@
+import { CustomerServiceImplProps, UnifiedCXButton } from '../types';
+interface UseShopifyChatUnifiedCXButtonProps extends CustomerServiceImplProps {
+}
+export declare const useShopifyChatUnifiedCXButton: ({ onSwitchToAgent, onCXClose, suppressMerchantButton, }: UseShopifyChatUnifiedCXButtonProps) => UnifiedCXButton;
+export {};

package/dist/src/CXIntegration/implementations/useShopifyChatUnifiedCXButton.js

@@ -0,0 +1,49 @@
+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';
+export const useShopifyChatUnifiedCXButton = ({ onSwitchToAgent, onCXClose, suppressMerchantButton, }) => {
+    const shopifyChatContainer = useElementObserver(SelectorFactory.id('ShopifyChat'));
+    const shopifyButton = useElementObserver(SelectorFactory.chain('id|ShopifyChat @ query|.chat-app > button'));
+    const enviveFloatingButton = useElementObserver(SelectorFactory.id(FLOATING_BUTTON_ID));
+    const toggle = () => {
+        enviveFloatingButton.hide();
+        shopifyButton.show();
+        onSwitchToAgent();
+        shopifyButton.fire('click');
+    };
+    const isShopifyButtonEnabled = () => {
+        return !!shopifyButton;
+    };
+    const isSwitchEnabled = () => isShopifyButtonEnabled();
+    const handleChatStateChange = async (isOpen) => {
+        if (isOpen) {
+            enviveFloatingButton.hide();
+            if (suppressMerchantButton) {
+                shopifyButton.show();
+            }
+            return;
+        }
+        onCXClose?.();
+        enviveFloatingButton.show();
+        if (suppressMerchantButton) {
+            shopifyButton.hide();
+            shopifyChatContainer.hide();
+        }
+    };
+    shopifyButton.onAdd(() => {
+        const isOpen = shopifyChatContainer.targetNode?.getAttribute('is-open') === 'true';
+        handleChatStateChange(isOpen);
+    });
+    shopifyChatContainer.onAdd(el => {
+        const isOpen = el?.getAttribute('is-open') === 'true';
+        handleChatStateChange(isOpen);
+    });
+    shopifyChatContainer.onChange(el => {
+        const isOpen = el?.getAttribute('is-open') === 'true';
+        handleChatStateChange(isOpen);
+    });
+    return {
+        toggle,
+        isSwitchEnabled,
+    };
+};

package/dist/src/CXIntegration/implementations/useTalkdeskUnifiedCXButton.d.ts

@@ -0,0 +1,5 @@
+import { CustomerServiceImplProps, UnifiedCXButton } from '../types';
+interface UseTalkdeskUnifiedCXButtonProps extends CustomerServiceImplProps {
+}
+export declare const useTalkdeskUnifiedCXButton: ({ onSwitchToAgent, suppressMerchantButton, }: UseTalkdeskUnifiedCXButtonProps) => UnifiedCXButton;
+export {};

package/dist/src/CXIntegration/implementations/useTalkdeskUnifiedCXButton.js

@@ -0,0 +1,77 @@
+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';
+export const useTalkdeskUnifiedCXButton = ({ onSwitchToAgent, suppressMerchantButton, }) => {
+    const talkdeskButton = useElementObserver(SelectorFactory.id('talkdesk-chat-widget-trigger'));
+    const talkdeskWidget = useElementObserver(SelectorFactory.id('talkdesk-chat-widget'));
+    const talkdeskContainer = useElementObserver(SelectorFactory.id('tdWebchat'));
+    const enviveFloatingButton = useElementObserver(SelectorFactory.id(FLOATING_BUTTON_ID));
+    const toggle = () => {
+        onSwitchToAgent();
+        if (suppressMerchantButton) {
+            enviveFloatingButton.hide();
+        }
+        talkdeskButton.show();
+        talkdeskButton.fire('click');
+    };
+    const isTalkdeskButtonEnabled = () => {
+        // Check for the main Talkdesk container
+        const talkdeskMainContainer = document.getElementById('tdWebchat');
+        if (!talkdeskMainContainer)
+            return false;
+        // Check for the trigger button (it's directly in the DOM, not inside an iframe)
+        const talkdeskTriggerButton = document.getElementById('talkdesk-chat-widget-trigger');
+        return !!talkdeskTriggerButton;
+    };
+    const isSwitchEnabled = () => isTalkdeskButtonEnabled();
+    // Hide Talkdesk button when it's added to DOM (if suppressMerchantButton is enabled)
+    talkdeskButton.onAdd(() => {
+        if (suppressMerchantButton) {
+            talkdeskButton.hide();
+            enviveFloatingButton.show();
+        }
+    });
+    // Observe the widget container (NOT the button) to avoid infinite loops
+    talkdeskWidget.onAdd(el => {
+        if (el && suppressMerchantButton) {
+            const ariaHidden = el.getAttribute('aria-hidden');
+            // Widget is open initially (aria-hidden="false")
+            if (ariaHidden === 'false') {
+                talkdeskButton.show();
+                enviveFloatingButton.hide();
+            }
+            else {
+                // Widget is closed initially
+                talkdeskButton.hide();
+                enviveFloatingButton.show();
+            }
+        }
+    });
+    // Track widget visibility changes
+    talkdeskWidget.onChange(el => {
+        if (el && suppressMerchantButton) {
+            const ariaHidden = el.getAttribute('aria-hidden');
+            // Widget is open (aria-hidden="false")
+            if (ariaHidden === 'false') {
+                talkdeskButton.show();
+                enviveFloatingButton.hide();
+            }
+            // Widget is closed (aria-hidden="true")
+            if (ariaHidden === 'true') {
+                talkdeskButton.hide();
+                enviveFloatingButton.show();
+            }
+        }
+    });
+    // Cleanup when container is removed
+    talkdeskContainer.onRemove(() => {
+        if (suppressMerchantButton) {
+            talkdeskButton.hide();
+            enviveFloatingButton.show();
+        }
+    });
+    return {
+        toggle,
+        isSwitchEnabled,
+    };
+};

package/dist/src/CXIntegration/implementations/useTidioUnifiedCXButton.d.ts

@@ -0,0 +1,13 @@
+import { CustomerServiceImplProps, UnifiedCXButton } from '../types';
+declare global {
+    interface Window {
+        tidioChatApi?: {
+            open: () => void;
+            close: () => void;
+        };
+    }
+}
+interface UseTidioUnifiedCXButtonProps extends CustomerServiceImplProps {
+}
+export declare const useTidioUnifiedCXButton: ({ onSwitchToAgent, }: UseTidioUnifiedCXButtonProps) => UnifiedCXButton;
+export {};

package/dist/src/CXIntegration/implementations/useTidioUnifiedCXButton.js

@@ -0,0 +1,20 @@
+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';
+export const useTidioUnifiedCXButton = ({ onSwitchToAgent, }) => {
+    const tidioButton = window.tidioChatApi;
+    const enviveFloatingButton = useElementObserver(SelectorFactory.id(FLOATING_BUTTON_ID));
+    const toggle = () => {
+        onSwitchToAgent();
+        enviveFloatingButton.hide();
+        if (tidioButton) {
+            tidioButton.open();
+        }
+    };
+    const isTidioButtonEnabled = () => !!document.getElementById('tidio-chat-iframe');
+    const isSwitchEnabled = () => isTidioButtonEnabled();
+    return {
+        toggle,
+        isSwitchEnabled,
+    };
+};

package/dist/src/CXIntegration/implementations/useZendeskUnifiedCXButton.d.ts

@@ -0,0 +1,5 @@
+import { CustomerServiceImplProps, UnifiedCXButton } from '../types';
+interface UseZendeskUnifiedCXButtonProps extends CustomerServiceImplProps {
+}
+export declare const useZendeskUnifiedCXButton: ({ onSwitchToAgent, onCXClose, suppressMerchantButton, }: UseZendeskUnifiedCXButtonProps) => UnifiedCXButton;
+export {};

package/dist/src/CXIntegration/implementations/useZendeskUnifiedCXButton.js

@@ -0,0 +1,55 @@
+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';
+export const useZendeskUnifiedCXButton = ({ onSwitchToAgent, onCXClose, suppressMerchantButton, }) => {
+    const zendeskButton = useElementObserver(SelectorFactory.chain('query|iframe#launcher @ query|button'));
+    const zendeskAlternativeIframe = useElementObserver(SelectorFactory.chain('id|webWidget'));
+    const enviveFloatingButton = useElementObserver(SelectorFactory.id(FLOATING_BUTTON_ID));
+    const zendeskIframe = useElementObserver(SelectorFactory.query('iframe#launcher'));
+    const toggle = () => {
+        zendeskIframe.hide();
+        onSwitchToAgent();
+        zendeskButton.fire('click');
+        enviveFloatingButton.hide();
+    };
+    const isZendeskButtonEnabled = () => {
+        const zendeskMainButton = document?.getElementById('launcher')?.contentWindow?.document?.querySelector('button');
+        return !!zendeskMainButton;
+    };
+    const isSwitchEnabled = () => isZendeskButtonEnabled();
+    zendeskIframe.onAdd(() => {
+        if (suppressMerchantButton) {
+            enviveFloatingButton.show();
+            zendeskIframe.hide();
+        }
+    });
+    zendeskButton.onChange(el => {
+        if (el) {
+            const ariaLabel = el.getAttribute('aria-label');
+            if (ariaLabel === 'Open messaging window') {
+                onCXClose?.();
+                enviveFloatingButton.show();
+                if (suppressMerchantButton) {
+                    zendeskIframe.hide();
+                }
+            }
+            if (ariaLabel === 'Close messaging window') {
+                enviveFloatingButton.hide();
+                if (suppressMerchantButton) {
+                    zendeskIframe.show();
+                }
+            }
+        }
+    });
+    zendeskAlternativeIframe.onRemove(() => {
+        onCXClose?.();
+        if (suppressMerchantButton) {
+            enviveFloatingButton.show();
+            zendeskIframe.hide();
+        }
+    });
+    return {
+        toggle,
+        isSwitchEnabled,
+    };
+};

package/dist/src/CXIntegration/implementations/useZowieUnifiedCXButton.d.ts

@@ -0,0 +1,13 @@
+import { CustomerServiceImplProps, UnifiedCXButton } from '../types';
+declare global {
+    interface Window {
+        Zowie?: {
+            open: () => void;
+            close: () => void;
+        };
+    }
+}
+interface UseZowieUnifiedCXButtonProps extends CustomerServiceImplProps {
+}
+export declare const useZowieUnifiedCXButton: ({ onSwitchToAgent, }: UseZowieUnifiedCXButtonProps) => UnifiedCXButton;
+export {};

package/dist/src/CXIntegration/implementations/useZowieUnifiedCXButton.js

@@ -0,0 +1,20 @@
+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';
+export const useZowieUnifiedCXButton = ({ onSwitchToAgent, }) => {
+    const zowieButton = window?.Zowie;
+    const enviveFloatingButton = useElementObserver(SelectorFactory.id(FLOATING_BUTTON_ID));
+    const toggle = () => {
+        onSwitchToAgent();
+        enviveFloatingButton.hide();
+        if (zowieButton) {
+            zowieButton?.open();
+        }
+    };
+    const isZowieButtonEnabled = () => !!zowieButton;
+    const isSwitchEnabled = () => isZowieButtonEnabled();
+    return {
+        toggle,
+        isSwitchEnabled,
+    };
+};

package/dist/src/CXIntegration/types.d.ts

@@ -0,0 +1,26 @@
+export declare enum CustomerServiceType {
+    shopify = "shopify",
+    gorgias = "gorgias",
+    kustomer = "kustomer",
+    groove = "groove",
+    tidio = "tidio",
+    zowie = "zowie",
+    redo = "redo",
+    gladly = "gladly",
+    richpanel = "richpanel",
+    zendesk = "zendesk",
+    helpscout = "helpscout",
+    talkdesk = "talkdesk",
+    eightByEight = "8x8",
+    unsupported = "unsupported"
+}
+export interface UnifiedCXButton {
+    isSwitchEnabled: () => boolean;
+    toggle: () => void;
+    removeUnifiedCXButton?: () => void;
+}
+export interface CustomerServiceImplProps {
+    onSwitchToAgent: () => void;
+    onCXClose?: () => void;
+    suppressMerchantButton?: boolean;
+}

package/dist/src/CXIntegration/types.js

@@ -0,0 +1,17 @@
+export var CustomerServiceType;
+(function (CustomerServiceType) {
+    CustomerServiceType["shopify"] = "shopify";
+    CustomerServiceType["gorgias"] = "gorgias";
+    CustomerServiceType["kustomer"] = "kustomer";
+    CustomerServiceType["groove"] = "groove";
+    CustomerServiceType["tidio"] = "tidio";
+    CustomerServiceType["zowie"] = "zowie";
+    CustomerServiceType["redo"] = "redo";
+    CustomerServiceType["gladly"] = "gladly";
+    CustomerServiceType["richpanel"] = "richpanel";
+    CustomerServiceType["zendesk"] = "zendesk";
+    CustomerServiceType["helpscout"] = "helpscout";
+    CustomerServiceType["talkdesk"] = "talkdesk";
+    CustomerServiceType["eightByEight"] = "8x8";
+    CustomerServiceType["unsupported"] = "unsupported";
+})(CustomerServiceType || (CustomerServiceType = {}));

package/dist/src/CXIntegration/utils/functions.d.ts

@@ -0,0 +1,2 @@
+import { CustomerServiceImplProps, CustomerServiceType, UnifiedCXButton } from '../types';
+export declare const findCustomerServiceImpl: (provider: CustomerServiceType) => ((props: CustomerServiceImplProps) => UnifiedCXButton);