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

package/src/widgets/FloatingChatWidget/FloatingChatWidget.tsx

@@ -1,4 +1,4 @@
-import { Suspense, lazy, useEffect, useMemo, useRef } from 'react';
+import { ReactNode, Suspense, lazy, useEffect, useMemo, useRef, useState } from 'react';
 import {
   FloatingChatConfig,
   LookAndFeelConfig,
@@ -28,11 +28,44 @@ import { useUnifiedCXButton } from '../../CXIntegration/hooks/useUnifiedCXButton
 import { FLOATING_BUTTON_ID } from './constants';
 import { CustomerServiceType } from '../../CXIntegration/types';
 import { useFloatingButtonVisibility } from './hooks/useFloatingButtonVisibility';
+import { useAutoPopup } from './hooks/useAutoPopup';
 
 const FloatingChat = lazy(async () => ({
   default: (await import('@envive-ai/react-toolkit-v3/FloatingChat')).FloatingChat,
 }));
 
+/**
+ * Wrapper component that isolates the useUnifiedCXButton hook call.
+ * Provider implementations use different React hooks internally, so the
+ * provider value must be stable across renders. Use a `key` prop based on
+ * provider to force a clean remount when the provider changes.
+ */
+const CXButtonProvider = ({
+  provider,
+  enabled,
+  suppressMerchantButton,
+  onSwitchToAgent,
+  onCXClose,
+  children,
+}: {
+  provider: CustomerServiceType;
+  enabled: boolean;
+  suppressMerchantButton: boolean;
+  onSwitchToAgent: () => void;
+  onCXClose: () => void;
+  children: (cxButton: { isSwitchEnabled?: () => boolean; toggle?: () => void }) => ReactNode;
+}) => {
+  const unifiedCXButton = useUnifiedCXButton({
+    provider,
+    enabled,
+    suppressMerchantButton,
+    onSwitchToAgent,
+    onCXClose,
+  });
+  const { isSwitchEnabled, toggle } = unifiedCXButton ?? {};
+  return <>{children({ isSwitchEnabled, toggle })}</>;
+};
+
 interface FloatingChatWidgetHandlerProps extends BaseWidgetProps {
   previewButtonOnly?: boolean;
   previewChatAlwaysOpen?: boolean;
@@ -47,26 +80,21 @@ const FloatingChatWidgetHandler = (props: FloatingChatWidgetHandlerProps) => {
   // TODO: Get hardcopy
   const { uiConfig, isUiConfigLoading, hardcopyContent } = props;
 
-  // TODO: Figure out the issue and reenable this functionality
-  // const { customerServiceIntegration } = uiConfig ?? {};
-  // const unifiedCXButton = useUnifiedCXButton({
-  //   provider: customerServiceIntegration?.provider as CustomerServiceType,
-  //   enabled: customerServiceIntegration?.enabled,
-  //   suppressMerchantButton: customerServiceIntegration?.suppressMerchantButton,
-  // });
-  const unifiedCXButton = useUnifiedCXButton({
-    provider: CustomerServiceType.unsupported,
-    enabled: false,
-    suppressMerchantButton: false,
-  });
-
-  const { isSwitchEnabled, toggle } = unifiedCXButton ?? {};
-
-  const { floatingButton } = uiConfig ?? {};
+  const { customerServiceIntegration, floatingButton, floatingChat } = uiConfig ?? {};
+  const cxProvider =
+    (customerServiceIntegration?.provider as CustomerServiceType) ??
+    CustomerServiceType.unsupported;
 
   // TODO: Get hardcopy content
   const { isOpen, openChat, closeChat } = useChatToggle();
 
+  const [isCXOpen, setIsCXOpen] = useState(false);
+
+  // Reset CX open state when the envive widget is reopened
+  useEffect(() => {
+    if (isOpen) setIsCXOpen(false);
+  }, [isOpen]);
+
   const { shouldShowFloatingButton } = useFloatingButtonVisibility({
     floatingButtonShowConfig: floatingButton?.showOption as FloatingButtonShow,
     isChatOpen: isOpen,
@@ -76,7 +104,9 @@ const FloatingChatWidgetHandler = (props: FloatingChatWidgetHandlerProps) => {
   // Override isOpen for preview modes
   const effectiveIsOpen = previewChatAlwaysOpen ? true : isOpen;
   const effectiveShouldRenderFloatingButton = !effectiveIsOpen && shouldShowFloatingButton;
-  const buttonShouldRender = previewButtonOnly ? true : effectiveShouldRenderFloatingButton;
+  const buttonShouldRender = previewButtonOnly
+    ? true
+    : effectiveShouldRenderFloatingButton && !isCXOpen;
 
   const theme = useMemo(() => {
     if (isUiConfigLoading || !uiConfig) {
@@ -86,6 +116,8 @@ const FloatingChatWidgetHandler = (props: FloatingChatWidgetHandlerProps) => {
     return (uiConfig?.lookAndFeel?.theme as Theme) ?? Theme.GLOBAL_CUSTOM;
   }, [isUiConfigLoading, uiConfig]);
 
+  useAutoPopup({ autoPopupConfig: floatingChat?.autoPopupConfig });
+
   const { trackEvent } = useAmplitude();
   const hasTrackedEvent = useRef(false);
   // When we add support for initially hidden floating buttons, we will need to update this to handle that case
@@ -103,60 +135,71 @@ const FloatingChatWidgetHandler = (props: FloatingChatWidgetHandlerProps) => {
   }, [trackEvent, buttonShouldRender]);
 
   return (
-    <>
-      {/* Render chat when always open preview OR when normally open */}
-      {(previewChatAlwaysOpen || effectiveIsOpen) && !previewButtonOnly && (
-        <FloatingChatOverlay
-          isOpened={effectiveIsOpen}
-          onClose={
-            previewChatAlwaysOpen
-              ? () => {}
-              : () => closeChat(ChatElementDisplayLocationV3.FLOATING_CHAT_OVERLAY)
-          }
-          previewMode={!!previewChatAlwaysOpen}
-        >
-          <Suspense>
-            <FloatingChat
-              theme={theme}
-              salesAgentData={salesAgentData}
-              hardcopyContent={hardcopyContent}
-              floatingChatConfig={uiConfig?.floatingChat ?? ({} as FloatingChatConfig)}
-              lookAndFeelConfig={uiConfig?.lookAndFeel ?? ({} as LookAndFeelConfig)}
-              isCXButtonSwitchEnabled={!!isSwitchEnabled?.()}
-              isFloatingChatOpen={effectiveIsOpen}
-              onToggleCXButton={toggle}
-              debugBar={<DebugBar />}
+    <CXButtonProvider
+      key={cxProvider}
+      provider={cxProvider}
+      enabled={customerServiceIntegration?.enabled ?? false}
+      suppressMerchantButton={customerServiceIntegration?.suppressMerchantButton ?? false}
+      onSwitchToAgent={() => setIsCXOpen(true)}
+      onCXClose={() => setIsCXOpen(false)}
+    >
+      {({ isSwitchEnabled, toggle }) => (
+        <>
+          {/* Render chat when always open preview OR when normally open */}
+          {(previewChatAlwaysOpen || effectiveIsOpen) && !previewButtonOnly && (
+            <FloatingChatOverlay
+              isOpened={effectiveIsOpen}
               onClose={
                 previewChatAlwaysOpen
                   ? () => {}
-                  : () => closeChat(ChatElementDisplayLocationV3.FLOATING_CHAT_CLOSE_BUTTON)
+                  : () => closeChat(ChatElementDisplayLocationV3.FLOATING_CHAT_OVERLAY)
               }
+              previewMode={!!previewChatAlwaysOpen}
+            >
+              <Suspense>
+                <FloatingChat
+                  theme={theme}
+                  salesAgentData={salesAgentData}
+                  hardcopyContent={hardcopyContent}
+                  floatingChatConfig={uiConfig?.floatingChat ?? ({} as FloatingChatConfig)}
+                  lookAndFeelConfig={uiConfig?.lookAndFeel ?? ({} as LookAndFeelConfig)}
+                  isCXButtonSwitchEnabled={!!isSwitchEnabled?.()}
+                  isFloatingChatOpen={effectiveIsOpen}
+                  onToggleCXButton={toggle}
+                  debugBar={<DebugBar />}
+                  onClose={
+                    previewChatAlwaysOpen
+                      ? () => {}
+                      : () => closeChat(ChatElementDisplayLocationV3.FLOATING_CHAT_CLOSE_BUTTON)
+                  }
+                />
+              </Suspense>
+            </FloatingChatOverlay>
+          )}
+
+          {/* Render button when preview button only OR when chat is closed */}
+          {buttonShouldRender && (
+            <FloatingButton
+              id={FLOATING_BUTTON_ID}
+              variant={floatingButton?.style as FloatingButtonVariant}
+              mode={floatingButton?.mode as FloatingButtonMode}
+              backgroundColor={floatingButton?.backgroundColor as FloatingButtonBackgroundColor}
+              onClick={
+                previewButtonOnly
+                  ? () => {}
+                  : () => openChat(ChatElementDisplayLocationV3.FLOATING_BUTTON)
+              }
+              customIcon={floatingButton?.iconSVGSrc}
+              show={floatingButton?.showOption as FloatingButtonShow}
+              location={floatingButton?.position as FloatingButtonLocation}
+              hasInteractionHappened={userHasInteractedValue}
+              ariaLabel="Open chat"
+              previewMode={!!previewButtonOnly}
             />
-          </Suspense>
-        </FloatingChatOverlay>
-      )}
-
-      {/* Render button when preview button only OR when chat is closed */}
-      {buttonShouldRender && (
-        <FloatingButton
-          id={FLOATING_BUTTON_ID}
-          variant={floatingButton?.style as FloatingButtonVariant}
-          mode={floatingButton?.mode as FloatingButtonMode}
-          backgroundColor={floatingButton?.backgroundColor as FloatingButtonBackgroundColor}
-          onClick={
-            previewButtonOnly
-              ? () => {}
-              : () => openChat(ChatElementDisplayLocationV3.FLOATING_BUTTON)
-          }
-          customIcon={floatingButton?.iconSVGSrc}
-          show={floatingButton?.showOption as FloatingButtonShow}
-          location={floatingButton?.position as FloatingButtonLocation}
-          hasInteractionHappened={userHasInteractedValue}
-          ariaLabel="Open chat"
-          previewMode={!!previewButtonOnly}
-        />
+          )}
+        </>
       )}
-    </>
+    </CXButtonProvider>
   );
 };
 

package/src/widgets/FloatingChatWidget/hooks/useAutoPopup.ts

@@ -0,0 +1,65 @@
+import { useCallback, useEffect, useMemo, useRef } from 'react';
+import { useFeatureFlagService } from '@envive-ai/react-hooks/contexts/featureFlagServiceContext';
+import { AutoPopupConfig } from '@envive-ai/react-hooks/contexts/typesV3';
+import { useChatToggle } from '@envive-ai/react-hooks/hooks/ChatToggle';
+import {
+  ChatElementDisplayLocationV3,
+  FeatureGates,
+} from '@envive-ai/react-hooks/application/models';
+
+export const useAutoPopup = ({ autoPopupConfig }: { autoPopupConfig?: AutoPopupConfig }) => {
+  const { isOpen, openChat } = useChatToggle();
+  const { featureFlagService } = useFeatureFlagService();
+  const hasBeenOpenedRef = useRef(false);
+  const autoPopupTimerRef = useRef<NodeJS.Timeout | null>(null);
+
+  const isReferrerBasedPromptEnabled = useMemo(
+    () => featureFlagService.isFeatureGateEnabled(FeatureGates.IsReferrerBasedPromptEnabled),
+    [featureFlagService],
+  );
+
+  useEffect(() => {
+    if (!hasBeenOpenedRef.current && isOpen) {
+      hasBeenOpenedRef.current = true;
+    }
+  }, [isOpen]);
+
+  const openChatSafely = useCallback(
+    (triggerLocation: ChatElementDisplayLocationV3) => {
+      if (!hasBeenOpenedRef.current) {
+        hasBeenOpenedRef.current = true;
+        openChat(triggerLocation);
+      }
+    },
+    [openChat],
+  );
+  useEffect(() => {
+    const cleanup = () => {
+      if (autoPopupTimerRef.current) {
+        clearTimeout(autoPopupTimerRef.current);
+      }
+    };
+    if (!autoPopupConfig || hasBeenOpenedRef.current) {
+      return cleanup;
+    }
+    for (const trigger of autoPopupConfig.triggers) {
+      if (trigger.trigger.type === 'referrer') {
+        if (!isReferrerBasedPromptEnabled) {
+          break;
+        }
+        const utmSource = new URLSearchParams(window.location.search).get('utm_source');
+        if (trigger.trigger.referrers.includes(utmSource)) {
+          autoPopupTimerRef.current = setTimeout(() => {
+            openChatSafely(ChatElementDisplayLocationV3.REFERRER_BASED_PROMPT);
+          }, trigger.delay);
+        }
+      }
+      if (trigger.trigger.type === 'automatic') {
+        autoPopupTimerRef.current = setTimeout(() => {
+          openChatSafely(ChatElementDisplayLocationV3.AUTOMATIC_PROMPT);
+        }, trigger.delay);
+      }
+    }
+    return cleanup;
+  }, [autoPopupConfig, isOpen, isReferrerBasedPromptEnabled, openChatSafely]);
+};

package/src/widgets/PromptCarouselWidget/PromptCarouselWidget.tsx

@@ -56,7 +56,7 @@ const PromptCarouselWidgetHandler = (props: BaseWidgetProps) => {
   const promptButtonType = promptCarouselWidgetConfig?.promptButtonType as PromptButtonVariant;
   const promptCarouselRows = promptCarouselWidgetConfig?.promptCarouselRows;
   const animationSpeed = isLoading
-    ? AnimationSpeed.FAST
+    ? AnimationSpeed.NONE
     : promptCarouselWidgetConfig?.animationSpeed;
 
   const { trackEvent } = useAmplitude();

package/src/widgets/TitledPromptCarouselWidget/TitledPromptCarouselWidget.tsx

@@ -50,7 +50,7 @@ const TitledPromptCarouselWidgetHandler = (props: BaseWidgetProps) => {
     titledPromptCarouselWidgetConfig?.promptButtonType as PromptButtonVariant;
   const promptCarouselRows = titledPromptCarouselWidgetConfig?.promptCarouselRows;
   const animationSpeed = isLoading
-    ? AnimationSpeed.FAST
+    ? AnimationSpeed.NONE
     : titledPromptCarouselWidgetConfig?.animationSpeed;
 
   const { trackEvent } = useAmplitude();