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

package/dist/src/CXIntegration/hooks/useUnifiedCXButton.d.ts

@@ -0,0 +1,10 @@
+import { CustomerServiceType, UnifiedCXButton } from '../types';
+interface UseUnifiedCXButtonProps {
+    enabled: boolean;
+    provider: CustomerServiceType;
+    suppressMerchantButton?: boolean;
+    onSwitchToAgent: () => void;
+    onCXClose?: () => void;
+}
+export declare const useUnifiedCXButton: ({ enabled, provider, suppressMerchantButton, onSwitchToAgent, onCXClose, }: UseUnifiedCXButtonProps) => UnifiedCXButton | undefined;
+export {};

package/dist/src/CXIntegration/hooks/useUnifiedCXButton.js

@@ -0,0 +1,29 @@
+import { useAtomValue } from 'jotai';
+import { hasParsedVariantInfoAtom } from '@envive-ai/react-hooks/atoms/app';
+import { usePage } from '@envive-ai/react-hooks/contexts/pageContext';
+import { findCustomerServiceImpl } from '../utils/functions';
+import { CustomerServiceType } from '../types';
+export const useUnifiedCXButton = ({ enabled = false, provider = CustomerServiceType.unsupported, suppressMerchantButton = false, onSwitchToAgent, onCXClose, }) => {
+    const { isSupported } = usePage();
+    const hasParsedVariantInfo = useAtomValue(hasParsedVariantInfoAtom);
+    const customerService = findCustomerServiceImpl(provider);
+    const selectedCustomerService = customerService({
+        onSwitchToAgent,
+        onCXClose,
+        suppressMerchantButton,
+    });
+    if (!enabled)
+        return undefined;
+    if (suppressMerchantButton) {
+        const showUnifiedButton = hasParsedVariantInfo && isSupported;
+        if (!showUnifiedButton)
+            return undefined;
+    }
+    if (!selectedCustomerService.isSwitchEnabled() && !window?._spiffy?.selectedCustomizeOption) {
+        return undefined;
+    }
+    if (window?._spiffy?.selectedCustomizeOption && provider === CustomerServiceType.unsupported) {
+        return undefined;
+    }
+    return selectedCustomerService;
+};

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

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

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

@@ -0,0 +1,6 @@
+export const useDefaultUnifiedCXButton = () => {
+    return {
+        toggle: () => { },
+        isSwitchEnabled: () => false,
+    };
+};

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

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

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

@@ -0,0 +1,63 @@
+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 EIGHT_BY_EIGHT_BUBBLE_SELECTOR = 'div[id^="__8x8-chat-button-container-script"]';
+const EIGHT_BY_EIGHT_BUTTON_SELECTOR = `${EIGHT_BY_EIGHT_BUBBLE_SELECTOR} a[data-type="online"], ${EIGHT_BY_EIGHT_BUBBLE_SELECTOR} a[data-type="offline"]`;
+const EIGHT_BY_EIGHT_CHAT_WINDOW_SELECTOR = 'div.__8x8Chat-Container';
+export const useEightByEightUnifiedCXButton = ({ onSwitchToAgent, onCXClose, suppressMerchantButton, }) => {
+    const eightByEightBubble = useElementObserver(SelectorFactory.query(EIGHT_BY_EIGHT_BUBBLE_SELECTOR));
+    const eightByEightChatWindow = useElementObserver(SelectorFactory.query(EIGHT_BY_EIGHT_CHAT_WINDOW_SELECTOR));
+    const enviveFloatingButton = useElementObserver(SelectorFactory.id(FLOATING_BUTTON_ID));
+    const isEightByEightEnabled = () => !!document.querySelector(EIGHT_BY_EIGHT_BUTTON_SELECTOR);
+    const toggle = () => {
+        const button = document.querySelector(EIGHT_BY_EIGHT_BUTTON_SELECTOR);
+        if (!button) {
+            return;
+        }
+        onSwitchToAgent();
+        enviveFloatingButton.hide();
+        button.click();
+    };
+    const isSwitchEnabled = () => isEightByEightEnabled();
+    eightByEightBubble.onAdd(el => {
+        if (suppressMerchantButton && el) {
+            eightByEightBubble.hide();
+        }
+        enviveFloatingButton.show();
+    });
+    eightByEightBubble.onChange(el => {
+        if (!el || !suppressMerchantButton)
+            return;
+        const styles = window.getComputedStyle(el);
+        const display = styles.getPropertyValue('display');
+        if (display !== 'none') {
+            eightByEightBubble.hide();
+        }
+    });
+    eightByEightChatWindow.onChange(el => {
+        if (!el)
+            return;
+        const rect = el.getBoundingClientRect();
+        const isOpen = rect.width > 50 && rect.height > 50;
+        if (isOpen) {
+            enviveFloatingButton.hide();
+            return;
+        }
+        onCXClose?.();
+        if (suppressMerchantButton) {
+            eightByEightBubble.hide();
+        }
+        enviveFloatingButton.show();
+    });
+    eightByEightChatWindow.onRemove(() => {
+        onCXClose?.();
+        if (suppressMerchantButton) {
+            eightByEightBubble.hide();
+        }
+        enviveFloatingButton.show();
+    });
+    return {
+        toggle,
+        isSwitchEnabled,
+    };
+};

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

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

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

@@ -0,0 +1,23 @@
+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 useGladlyUnifiedCXButton = ({ onSwitchToAgent, }) => {
+    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();
+        }
+    };
+    const isGladlyButtonEnabled = () => {
+        const gladlyButtonElement = document.getElementById('gladlyChat_container');
+        return !!gladlyButtonElement;
+    };
+    const isSwitchEnabled = () => isGladlyButtonEnabled();
+    return {
+        toggle,
+        isSwitchEnabled,
+    };
+};

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

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

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

@@ -0,0 +1,54 @@
+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 CHAT_WINDOW_ID = 'chat-window';
+const CHAT_BUTTON_ID = 'chat-button';
+const GORGIAS_BUTTON_SELECTOR = 'id|chat-button @ id|gorgias-chat-messenger-button';
+export const useGorgiasUnifiedCXButton = ({ onSwitchToAgent, onCXClose, suppressMerchantButton, }) => {
+    const chatWindow = useElementObserver(SelectorFactory.id(CHAT_WINDOW_ID));
+    const chatButton = useElementObserver(SelectorFactory.id(CHAT_BUTTON_ID));
+    const trigger = useElementObserver(SelectorFactory.chain(GORGIAS_BUTTON_SELECTOR));
+    const enviveFloatingButton = useElementObserver(SelectorFactory.id(FLOATING_BUTTON_ID));
+    const toggle = () => {
+        onSwitchToAgent();
+        chatButton.show();
+        trigger.fire('click');
+        enviveFloatingButton.hide();
+    };
+    const isSwitchEnabled = () => !!SelectorFactory.chain(GORGIAS_BUTTON_SELECTOR).parse();
+    chatButton.onAdd(() => {
+        if (suppressMerchantButton) {
+            chatButton.hide();
+            enviveFloatingButton.show();
+        }
+    });
+    chatWindow.onAdd(el => {
+        if (el) {
+            const styles = window.getComputedStyle(el);
+            const chatWindowDisplay = styles.getPropertyValue('display');
+            const chatButtonDisplay = chatButton.targetNode?.style.display;
+            if (chatWindowDisplay === 'block' && chatButtonDisplay === 'none') {
+                if (suppressMerchantButton) {
+                    chatButton.show();
+                }
+                enviveFloatingButton.hide();
+            }
+        }
+    });
+    chatWindow.onChange(el => {
+        if (el) {
+            const styles = window.getComputedStyle(el);
+            if (styles.getPropertyValue('display') === 'none') {
+                onCXClose?.();
+                if (suppressMerchantButton) {
+                    chatButton.hide();
+                }
+                enviveFloatingButton.show();
+            }
+        }
+    });
+    return {
+        toggle,
+        isSwitchEnabled,
+    };
+};

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

@@ -0,0 +1,18 @@
+import { CustomerServiceImplProps, UnifiedCXButton } from '../types';
+declare global {
+    interface Window {
+        groove?: {
+            widget: {
+                open: () => void;
+                close: () => void;
+                shim: {
+                    isOpen: boolean;
+                };
+            };
+        };
+    }
+}
+interface UseGrooveUnifiedCXButtonProps extends CustomerServiceImplProps {
+}
+export declare const useGrooveUnifiedCXButton: ({ onSwitchToAgent, onCXClose, suppressMerchantButton, }: UseGrooveUnifiedCXButtonProps) => UnifiedCXButton;
+export {};

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

@@ -0,0 +1,48 @@
+import { SelectorFactory } from '@envive-ai/react-hooks/application/utils';
+import { useElementObserver } from '@envive-ai/react-hooks/hooks/ElementObserver';
+import { useRef } from 'react';
+import { FLOATING_BUTTON_ID } from '../../widgets/FloatingChatWidget/constants';
+export const useGrooveUnifiedCXButton = ({ onSwitchToAgent, onCXClose, suppressMerchantButton, }) => {
+    const grooveChatContainer = useElementObserver(SelectorFactory.query('div[id*="groove-container"]'));
+    const windowGrooveWidget = window.groove?.widget;
+    const enviveFloatingButton = useElementObserver(SelectorFactory.id(FLOATING_BUTTON_ID));
+    const previousIsOpenRef = useRef(undefined);
+    const toggle = () => {
+        enviveFloatingButton.hide();
+        onSwitchToAgent();
+        if (windowGrooveWidget) {
+            windowGrooveWidget.open();
+        }
+    };
+    const isGrooveWidgetEnabled = () => !!windowGrooveWidget;
+    const isSwitchEnabled = () => isGrooveWidgetEnabled();
+    const hideEnviveFloatingButton = () => {
+        enviveFloatingButton.hide();
+        if (suppressMerchantButton && windowGrooveWidget) {
+            windowGrooveWidget.open();
+        }
+    };
+    const showEnviveFloatingButton = () => {
+        onCXClose?.();
+        enviveFloatingButton.show();
+        if (suppressMerchantButton && windowGrooveWidget) {
+            windowGrooveWidget.close();
+        }
+    };
+    grooveChatContainer.onChange(() => {
+        const isOpen = windowGrooveWidget?.shim.isOpen;
+        if (isOpen !== previousIsOpenRef.current) {
+            previousIsOpenRef.current = isOpen;
+            if (isOpen) {
+                hideEnviveFloatingButton();
+            }
+            else {
+                showEnviveFloatingButton();
+            }
+        }
+    });
+    return {
+        toggle,
+        isSwitchEnabled,
+    };
+};

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

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

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,
+    };
+};