@repzo/widget-react-native 1.1.0 → 1.2.1

package/src/ui/WidgetProvider.tsx

@@ -6,7 +6,7 @@
  * the modal (or never mounting it) never drops a conversation.
  */
 
-import { useCallback, useMemo } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import {
   ActivityIndicator,
   Modal,
@@ -29,10 +29,11 @@ import {
 import { controller } from '../controller';
 import { buildLabels, createTranslator, formatLabel, localizeWelcomeText } from '../i18n';
 import { useWidgetState } from '../state/use-widget-state';
-import type { AgentUiAction, OutgoingAttachment, WidgetSpaceType } from '../types';
+import type { AgentUiAction, OutgoingAttachment, PostInteractionKind, WidgetSpaceType } from '../types';
 import { WidgetErrorBoundary } from './components/ErrorBoundary';
 import { AlertIcon } from './components/icons';
 import { InAppNotification } from './components/InAppNotification';
+import { PostOverlay } from './components/Post';
 import { OutboundMessageCard } from './components/OutboundMessageCard';
 import { WidgetPanel } from './components/WidgetPanel';
 import { useKeyboardOverlap } from './hooks/use-keyboard-overlap';
@@ -62,6 +63,9 @@ export interface RepzoWidgetProviderProps {
   presentationStyle?: 'pageSheet' | 'fullScreen';
 }
 
+/** Longest the messenger's iOS slide-out is waited on when `onDismiss` doesn't arrive. */
+const MESSENGER_DISMISS_FALLBACK_MS = 600;
+
 export function RepzoWidgetProvider({
   children,
   presentationStyle = 'pageSheet',
@@ -235,6 +239,57 @@ export function RepzoWidgetProvider({
   );
   const handleDismissNotification = useCallback(() => store.dismissInAppNotification(), [store]);
 
+  // iOS can't present the post's modal while the messenger's is still sliding
+  // away (it would silently never show), so a post waits for that to finish.
+  // `onDismiss` is the signal; the timer covers React Native versions where it
+  // doesn't fire.
+  const [messengerOnScreen, setMessengerOnScreen] = useState(state.isOpen);
+  useEffect(() => {
+    if (state.isOpen || Platform.OS !== 'ios') {
+      setMessengerOnScreen(state.isOpen);
+      return undefined;
+    }
+    const timer = setTimeout(() => setMessengerOnScreen(false), MESSENGER_DISMISS_FALLBACK_MS);
+    return () => clearTimeout(timer);
+  }, [state.isOpen]);
+  const handleMessengerDismiss = useCallback(() => setMessengerOnScreen(false), []);
+
+  const handlePostShown = useCallback((campaignId: string) => store.postDidShow(campaignId), [store]);
+  const handlePostExpand = useCallback((campaignId: string) => store.expandPost(campaignId), [store]);
+  const handlePostMinimize = useCallback((campaignId: string) => store.minimizePost(campaignId), [store]);
+  const handlePostCollapse = useCallback((campaignId: string) => store.collapsePost(campaignId), [store]);
+  // The post steps aside first: iOS can't present the messenger while the post's modal is still up.
+  const handlePostOpenConversation = useCallback(
+    (campaignId: string, conversationId: string) => {
+      store.collapsePost(campaignId);
+      setTimeout(() => void store.openConversation(conversationId), Platform.OS === 'ios' ? 400 : 0);
+    },
+    [store]
+  );
+  const handlePostInteract = useCallback(
+    (campaignId: string, kind: Exclude<PostInteractionKind, 'view' | 'open' | 'minimize'>, value?: string) =>
+      store.recordPostInteraction(campaignId, kind, value),
+    [store]
+  );
+  const postLabels = useMemo(
+    () => ({
+      from: labels.postFrom,
+      newMessage: labels.postNewMessage,
+      openHint: labels.postOpenHint,
+      close: labels.postClose,
+      minimize: labels.postMinimize,
+      replyPlaceholder: labels.postReplyPlaceholder,
+      send: labels.postSend,
+      sent: labels.postSent,
+      replyFailed: labels.postReplyFailed,
+      reactions: labels.postReactions,
+      thanks: labels.postThanks,
+      conversation: labels.postConversation,
+      continueChat: labels.postContinueChat,
+    }),
+    [labels]
+  );
+
   const handleTabChange = useCallback((tab: WidgetSpaceType) => store.setActiveTab(tab), [store]);
 
   // Rejections reach ChatView, which keeps unsent attachments for a retry.
@@ -463,6 +518,26 @@ export function RepzoWidgetProvider({
   return (
     <>
       {children}
+      {/* A post steps aside while the messenger is open, and its card while a reply card shows. */}
+      {state.post && !state.isOpen && !messengerOnScreen && (state.postExpanded || !state.inAppNotification) ? (
+        <WidgetErrorBoundary resetKey={state.post.id} fallback={() => null}>
+          <PostOverlay
+            // A new post remounts, so it reports its view.
+            key={state.post.id}
+            post={state.post}
+            expanded={state.postExpanded}
+            color={theme.primaryColor}
+            insets={insets}
+            labels={postLabels}
+            onShown={handlePostShown}
+            onExpand={handlePostExpand}
+            onMinimize={handlePostMinimize}
+            onCollapse={handlePostCollapse}
+            onOpenConversation={handlePostOpenConversation}
+            onInteract={handlePostInteract}
+          />
+        </WidgetErrorBoundary>
+      ) : null}
       {state.inAppNotification ? (
         <InAppNotification
           // A new reply remounts the card, so it slides in fresh.
@@ -486,6 +561,7 @@ export function RepzoWidgetProvider({
         animationType="slide"
         presentationStyle={Platform.OS === 'ios' ? presentationStyle : undefined}
         onRequestClose={handleClose}
+        onDismiss={handleMessengerDismiss}
         // Edge to edge on every Android version, so the insets below are the
         // only top spacing (a non-translucent modal used to add a second one).
         statusBarTranslucent>