@envive-ai/react-widgets-v3 0.3.2

package/src/CXIntegration/implementations/useShopifyChatUnifiedCXButton.ts

@@ -0,0 +1,78 @@
+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 UseShopifyChatUnifiedCXButtonProps extends CustomerServiceImplProps {}
+
+export const useShopifyChatUnifiedCXButton = ({
+  onSwitchToAgent,
+  suppressMerchantButton,
+}: UseShopifyChatUnifiedCXButtonProps): UnifiedCXButton => {
+  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 = () => {
+    if (suppressMerchantButton) {
+      enviveFloatingButton.hide();
+    }
+    shopifyButton.show();
+    onSwitchToAgent();
+    shopifyButton.fire('click');
+  };
+
+  const isShopifyButtonEnabled = () => {
+    return !!shopifyButton;
+  };
+
+  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();
+      return;
+    }
+
+    showEnviveFloatingButton();
+  };
+
+  shopifyButton.onAdd(() => {
+    if (suppressMerchantButton) {
+      const isOpen = shopifyChatContainer.targetNode?.getAttribute('is-open') === 'true';
+      handleChatStateChange(isOpen);
+    }
+  });
+
+  shopifyChatContainer.onAdd(el => {
+    if (suppressMerchantButton) {
+      const isOpen = el?.getAttribute('is-open') === 'true';
+      handleChatStateChange(isOpen);
+    }
+  });
+
+  shopifyChatContainer.onChange(el => {
+    if (suppressMerchantButton) {
+      const isOpen = el?.getAttribute('is-open') === 'true';
+      handleChatStateChange(isOpen);
+    }
+  });
+
+  return {
+    toggle,
+    isSwitchEnabled,
+  };
+};

package/src/CXIntegration/implementations/useTidioUnifiedCXButton.ts

@@ -0,0 +1,34 @@
+import { CustomerServiceImplProps, UnifiedCXButton } from '../types';
+
+declare global {
+  interface Window {
+    tidioChatApi?: {
+      open: () => void;
+      close: () => void;
+    };
+  }
+}
+
+interface UseTidioUnifiedCXButtonProps extends CustomerServiceImplProps {}
+
+export const useTidioUnifiedCXButton = ({
+  onSwitchToAgent,
+}: UseTidioUnifiedCXButtonProps): UnifiedCXButton => {
+  const tidioButton = window.tidioChatApi;
+
+  const toggle = () => {
+    onSwitchToAgent();
+    if (tidioButton) {
+      tidioButton.open();
+    }
+  };
+
+  const isTidioButtonEnabled = () => !!document.getElementById('tidio-chat-iframe');
+
+  const isSwitchEnabled = () => isTidioButtonEnabled();
+
+  return {
+    toggle,
+    isSwitchEnabled,
+  };
+};

package/src/CXIntegration/implementations/useZendeskUnifiedCXButton.ts

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

package/src/CXIntegration/implementations/useZowieUnifiedCXButton.ts

@@ -0,0 +1,34 @@
+import { CustomerServiceImplProps, UnifiedCXButton } from '../types';
+
+declare global {
+  interface Window {
+    Zowie?: {
+      open: () => void;
+      close: () => void;
+    };
+  }
+}
+
+interface UseZowieUnifiedCXButtonProps extends CustomerServiceImplProps {}
+
+export const useZowieUnifiedCXButton = ({
+  onSwitchToAgent,
+}: UseZowieUnifiedCXButtonProps): UnifiedCXButton => {
+  const zowieButton = window?.Zowie;
+
+  const toggle = () => {
+    onSwitchToAgent();
+    if (zowieButton) {
+      zowieButton?.open();
+    }
+  };
+
+  const isZowieButtonEnabled = () => !!zowieButton;
+
+  const isSwitchEnabled = () => isZowieButtonEnabled();
+
+  return {
+    toggle,
+    isSwitchEnabled,
+  };
+};

package/src/CXIntegration/types.ts

@@ -0,0 +1,24 @@
+export enum CustomerServiceType {
+  shopify = 'shopify',
+  gorgias = 'gorgias',
+  kustomer = 'kustomer',
+  groove = 'groove',
+  tidio = 'tidio',
+  zowie = 'zowie',
+  redo = 'redo',
+  gladly = 'gladly',
+  richpanel = 'richpanel',
+  zendesk = 'zendesk',
+  unsupported = 'unsupported',
+}
+
+export interface UnifiedCXButton {
+  isSwitchEnabled: () => boolean;
+  toggle: () => void;
+  removeUnifiedCXButton?: () => void;
+}
+
+export interface CustomerServiceImplProps {
+  onSwitchToAgent: () => void;
+  suppressMerchantButton?: boolean;
+}

package/src/CXIntegration/utils/functions.ts

@@ -0,0 +1,50 @@
+import { CustomerServiceImplProps, CustomerServiceType, UnifiedCXButton } from '../types';
+
+import { useGrooveUnifiedCXButton } from '../implementations/useGrooveUnifiedCXButton';
+import { useShopifyChatUnifiedCXButton } from '../implementations/useShopifyChatUnifiedCXButton';
+import { useGladlyUnifiedCXButton } from '../implementations/useGladlyUnifiedCXButton';
+import { useGorgiasUnifiedCXButton } from '../implementations/useGorgiasUnifiedCXButton';
+import { useTidioUnifiedCXButton } from '../implementations/useTidioUnifiedCXButton';
+import { useZowieUnifiedCXButton } from '../implementations/useZowieUnifiedCXButton';
+import { useReDoUnifiedCXButton } from '../implementations/useReDoUnifiedCXButton';
+import { useRichpanelUnifiedCXButton } from '../implementations/useRichpanelUnifiedCXButton';
+import { useZendeskUnifiedCXButton } from '../implementations/useZendeskUnifiedCXButton';
+import { useKustomerUnifiedCXButton } from '../implementations/useKustomerUnifiedCXButton';
+import { useDefaultUnifiedCXButton } from '../implementations/useDefaultUnifiedCXButton';
+
+export const findCustomerServiceImpl = (
+  provider: CustomerServiceType,
+): ((props: CustomerServiceImplProps) => UnifiedCXButton) => {
+  if (provider === CustomerServiceType.kustomer) {
+    return useKustomerUnifiedCXButton;
+  }
+  if (provider === CustomerServiceType.groove) {
+    return useGrooveUnifiedCXButton;
+  }
+  if (provider === CustomerServiceType.gladly) {
+    return useGladlyUnifiedCXButton;
+  }
+  if (provider === CustomerServiceType.shopify) {
+    return useShopifyChatUnifiedCXButton;
+  }
+  if (provider === CustomerServiceType.gorgias) {
+    return useGorgiasUnifiedCXButton;
+  }
+  if (provider === CustomerServiceType.tidio) {
+    return useTidioUnifiedCXButton;
+  }
+  if (provider === CustomerServiceType.zowie) {
+    return useZowieUnifiedCXButton;
+  }
+  if (provider === CustomerServiceType.redo) {
+    return useReDoUnifiedCXButton;
+  }
+  if (provider === CustomerServiceType.richpanel) {
+    return useRichpanelUnifiedCXButton;
+  }
+  if (provider === CustomerServiceType.zendesk) {
+    return useZendeskUnifiedCXButton;
+  }
+
+  return useDefaultUnifiedCXButton;
+};