@developer_tribe/react-native-comnyx 0.14.0 → 0.16.0

package/src/components/ChatList.tsx

@@ -31,6 +31,7 @@ import { ScaledSheet } from './ScaledSheet';
 import { formatDate, getDateKey } from '../utils/formatDate';
 import { activeOpacity } from '../constants/activeOpacity';
 import { useAppStore } from '../store/store';
+import { useSupportConfig } from '../support/SupportConfigContext';
 
 const headphonesIcon = require('../assets/headphones-01.png');
 const closeIcon = require('../assets/x-close.png');
@@ -110,6 +111,7 @@ function CustomToast() {
   const { toastMessage } = useAppStore((s) => ({
     toastMessage: s.toastMessage,
   }));
+  const themeColors = useThemeColors();
 
   const fadeAnim = useRef(new Animated.Value(0)).current;
   const translateY = useRef(new Animated.Value(50)).current;
@@ -157,8 +159,16 @@ function CustomToast() {
         },
       ]}
     >
-      <View style={styles.toastContent}>
-        <AppText style={styles.toastText} localization={toastMessage} />
+      <View
+        style={[
+          styles.toastContent,
+          { backgroundColor: themeColors.toastBackground },
+        ]}
+      >
+        <AppText
+          style={[styles.toastText, { color: themeColors.toastText }]}
+          localization={toastMessage}
+        />
       </View>
     </Animated.View>
   );
@@ -174,6 +184,12 @@ export function ChatList({
   const themeColors = useThemeColors();
   const { height: windowHeight } = useWindowDimensions();
   const insets = useSafeAreaInsets();
+  const {
+    renderHeader: renderHeaderOverride,
+    renderEmptyState: renderEmptyStateOverride,
+    renderErrorState: renderErrorStateOverride,
+    renderMessage: renderMessageOverride,
+  } = useSupportConfig();
   const MESSAGE_MIN_HEIGHT = 60;
   const FLATLIST_PADDING = 20;
   const MESSAGES_PER_PAGE = Math.ceil(
@@ -184,6 +200,17 @@ export function ChatList({
     setLoading((l) => l && initLoading);
   }, [initLoading]);
 
+  const lifecycleAbortRef = useRef<AbortController | null>(null);
+  if (lifecycleAbortRef.current === null) {
+    lifecycleAbortRef.current = new AbortController();
+  }
+  useEffect(() => {
+    const controller = lifecycleAbortRef.current;
+    return () => {
+      controller?.abort();
+    };
+  }, []);
+
   const { data, setData, customer, language } = useAppStore((s) => ({
     data: s.data,
     setData: s.setData,
@@ -192,7 +219,9 @@ export function ChatList({
   }));
   const ref = useRef<SectionList<AppConversationMessage>>(null);
   const [page, setPage] = useState(1);
-  const nextPageStatus = useRef<'fail' | 'loading' | 'empty'>();
+  const nextPageStatus = useRef<'fail' | 'loading' | 'empty' | undefined>(
+    undefined
+  );
   const [nexPageFailed, setNexPageFailed] = useState(false);
   const [initFailed, setInitFailed] = useState(false);
   const [showScrollDownButton, setShowScrollDownButton] = useState(false);
@@ -398,7 +427,8 @@ export function ChatList({
         {
           fake: useAppStore.getState().fake,
           per_page: MESSAGES_PER_PAGE,
-        }
+        },
+        lifecycleAbortRef.current?.signal
       )
         .then((newData) => {
           listChangedRef.current = true;
@@ -445,7 +475,7 @@ export function ChatList({
 
   const renderItem = useCallback(
     ({ item }: { item: AppConversationMessage }) => {
-      return (
+      const defaultNode = (
         <MessageItem
           item={item}
           onShowPopup={() => {
@@ -454,8 +484,12 @@ export function ChatList({
           }}
         />
       );
+      if (renderMessageOverride) {
+        return <>{renderMessageOverride({ message: item, defaultNode })}</>;
+      }
+      return defaultNode;
     },
-    []
+    [renderMessageOverride]
   );
 
   const renderSectionFooter = useCallback(
@@ -515,10 +549,16 @@ export function ChatList({
 
   useEffect(() => {
     if (customer?.external_id && !initFailed) {
-      getCustomerConversation(customer?.external_id, new Date(), 1, {
-        fake: useAppStore.getState().fake,
-        per_page: MESSAGES_PER_PAGE,
-      })
+      getCustomerConversation(
+        customer?.external_id,
+        new Date(),
+        1,
+        {
+          fake: useAppStore.getState().fake,
+          per_page: MESSAGES_PER_PAGE,
+        },
+        lifecycleAbortRef.current?.signal
+      )
         .then((newData) => {
           setData((prevData) => {
             const newMessages = newData?.page?.data ?? [];
@@ -609,6 +649,11 @@ export function ChatList({
   }
 
   if (initFailed) {
+    if (renderErrorStateOverride) {
+      return (
+        <>{renderErrorStateOverride({ retry: () => setInitFailed(false) })}</>
+      );
+    }
     return <InitFailed setInitFailed={setInitFailed} />;
   }
 
@@ -633,49 +678,60 @@ export function ChatList({
             },
           ]}
         >
-          <TouchableOpacity
-            style={[styles.iconContainer, { top: insets.top || 40 }]}
-            onPress={onBack}
-            activeOpacity={activeOpacity}
-          >
-            <Image
-              source={closeIcon}
-              style={[styles.closeIcon, { tintColor: themeColors.text }]}
-            />
-          </TouchableOpacity>
-          <View
-            style={[
-              styles.headerContainer,
-              {
-                backgroundColor: themeColors.background,
-                borderBottomColor: themeColors.lavender,
-              },
-            ]}
-          >
-            <AppText
-              localization="chat.support-team"
-              weight={'600'}
-              style={[styles.header, { color: themeColors.text }]}
-            />
-            <View
-              style={[
-                styles.headerText,
-                { backgroundColor: themeColors.background },
-              ]}
-            >
-              <Image
-                source={headphonesIcon}
-                style={[styles.headphonesIcon, { tintColor: themeColors.text }]}
-              />
-              <AppText
-                localization="chat.live"
-                style={[styles.liveChat, { color: themeColors.text }]}
-              />
+          {renderHeaderOverride ? (
+            <>{renderHeaderOverride({ onBack })}</>
+          ) : (
+            <>
+              <TouchableOpacity
+                style={[styles.iconContainer, { top: insets.top || 40 }]}
+                onPress={onBack}
+                activeOpacity={activeOpacity}
+                accessibilityRole="button"
+                accessibilityLabel="Close support"
+              >
+                <Image
+                  source={closeIcon}
+                  style={[styles.closeIcon, { tintColor: themeColors.text }]}
+                />
+              </TouchableOpacity>
               <View
-                style={[styles.dot, { backgroundColor: themeColors.green }]}
-              />
-            </View>
-          </View>
+                style={[
+                  styles.headerContainer,
+                  {
+                    backgroundColor: themeColors.background,
+                    borderBottomColor: themeColors.lavender,
+                  },
+                ]}
+              >
+                <AppText
+                  localization="chat.support-team"
+                  weight={'600'}
+                  style={[styles.header, { color: themeColors.text }]}
+                />
+                <View
+                  style={[
+                    styles.headerText,
+                    { backgroundColor: themeColors.background },
+                  ]}
+                >
+                  <Image
+                    source={headphonesIcon}
+                    style={[
+                      styles.headphonesIcon,
+                      { tintColor: themeColors.text },
+                    ]}
+                  />
+                  <AppText
+                    localization="chat.live"
+                    style={[styles.liveChat, { color: themeColors.text }]}
+                  />
+                  <View
+                    style={[styles.dot, { backgroundColor: themeColors.green }]}
+                  />
+                </View>
+              </View>
+            </>
+          )}
 
           <View style={styles.listContainer}>
             <SectionList
@@ -691,7 +747,11 @@ export function ChatList({
               style={styles.list}
               ListEmptyComponent={
                 !loading && (!sections || sections.length === 0) ? (
-                  <EmptyList />
+                  renderEmptyStateOverride ? (
+                    <>{renderEmptyStateOverride()}</>
+                  ) : (
+                    <EmptyList />
+                  )
                 ) : null
               }
               ListFooterComponent={loading ? <LoadingItem /> : null}
@@ -722,6 +782,8 @@ export function ChatList({
                 isKeyboardVisible && styles.scrollDownButtonWithKeyboard,
               ]}
               onPress={() => scrollToBottom(true)}
+              accessibilityRole="button"
+              accessibilityLabel="Scroll to latest message"
             >
               <Image
                 source={require('../assets/down.png')}
@@ -880,7 +942,6 @@ const styles = ScaledSheet.create({
     zIndex: 9999,
   },
   toastContent: {
-    backgroundColor: '#333333',
     borderRadius: '8@s',
     paddingHorizontal: '16@s',
     paddingVertical: '12@vs',
@@ -895,7 +956,6 @@ const styles = ScaledSheet.create({
     maxWidth: '90%',
   },
   toastText: {
-    color: '#FFFFFF',
     fontSize: '14@vs',
     fontWeight: '400',
     textAlign: 'center',

package/src/components/ComnyxErrorBoundary.tsx

@@ -0,0 +1,91 @@
+import { Component, type ReactNode, type ErrorInfo } from 'react';
+import { View, TouchableOpacity, Image, Text } from 'react-native';
+import { ScaledSheet } from './ScaledSheet';
+
+const closeIcon = require('../assets/x-close.png');
+
+interface Props {
+  children: ReactNode;
+  onBack?: () => void;
+  fallback?: (reset: () => void) => ReactNode;
+}
+
+interface State {
+  hasError: boolean;
+}
+
+export class ComnyxErrorBoundary extends Component<Props, State> {
+  state: State = { hasError: false };
+
+  static getDerivedStateFromError(): State {
+    return { hasError: true };
+  }
+
+  componentDidCatch(error: Error, info: ErrorInfo) {
+    console.error('[Comnyx] UI error caught by boundary', error, info);
+  }
+
+  reset = () => {
+    this.setState({ hasError: false });
+  };
+
+  render() {
+    if (!this.state.hasError) {
+      return this.props.children;
+    }
+
+    if (this.props.fallback) {
+      return this.props.fallback(this.reset);
+    }
+
+    return (
+      <View style={styles.container}>
+        {this.props.onBack ? (
+          <TouchableOpacity
+            activeOpacity={1}
+            style={styles.iconContainer}
+            onPress={this.props.onBack}
+          >
+            <Image source={closeIcon} style={styles.closeIcon} />
+          </TouchableOpacity>
+        ) : null}
+        <Text style={styles.message}>Something went wrong.</Text>
+        <TouchableOpacity onPress={this.reset} style={styles.retryButton}>
+          <Text style={styles.retryLabel}>Retry</Text>
+        </TouchableOpacity>
+      </View>
+    );
+  }
+}
+
+const styles = ScaledSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingHorizontal: '20@s',
+    paddingVertical: '20@vs',
+  },
+  iconContainer: {
+    position: 'absolute',
+    top: '60@vs',
+    left: '24@s',
+  },
+  closeIcon: {
+    width: '24@vs',
+    height: '24@vs',
+  },
+  message: {
+    textAlign: 'center',
+    fontSize: '14@vs',
+  },
+  retryButton: {
+    marginTop: '16@vs',
+    paddingHorizontal: '16@s',
+    paddingVertical: '10@vs',
+  },
+  retryLabel: {
+    fontSize: '14@vs',
+    fontWeight: '500',
+  },
+});

package/src/components/CustomerForm.tsx

@@ -244,7 +244,7 @@ export function CustomerForm({
                     },
                   ]}
                 >
-                  Email
+                  {localize('customer.form.email')}
                 </AppText>
                 <Controller
                   control={control}
@@ -291,7 +291,7 @@ export function CustomerForm({
                     },
                   ]}
                 >
-                  Phone
+                  {localize('customer.form.phone')}
                 </AppText>
                 <Controller
                   control={control}

package/src/components/MediaMessageItem.tsx

@@ -30,6 +30,7 @@ function MediaThumbnail({
   const [generatedThumb, setGeneratedThumb] = useState<string | null>(null);
   const displayUri = file.local_uri || file.url;
   const isVideo = file.type === 'video';
+  const themeColors = useThemeColors();
 
   useEffect(() => {
     if (isVideo && !file.thumbnail_uri && !isUploading && displayUri) {
@@ -62,8 +63,14 @@ function MediaThumbnail({
   const wrapperStyle = single ? styles.singleMediaWrapper : styles.gridItem;
   const imageStyle = single ? styles.singleMediaImage : styles.gridImage;
   const placeholderStyle = single
-    ? [styles.singleMediaImage, { backgroundColor: '#1a1a2e' }]
-    : [styles.videoPlaceholder, { backgroundColor: '#1a1a2e' }];
+    ? [
+        styles.singleMediaImage,
+        { backgroundColor: themeColors.videoPlaceholder },
+      ]
+    : [
+        styles.videoPlaceholder,
+        { backgroundColor: themeColors.videoPlaceholder },
+      ];
 
   return (
     <TouchableOpacity
@@ -234,7 +241,7 @@ export function MediaMessageItem({
                   {
                     regex:
                       /https?:\/\/(?:[-\w.])+(?::[0-9]+)?(?:\/(?:[\w/_.])*(?:\?(?:[\w&=%.])*)?(?:#(?:[\w.])*)?)?/g,
-                    color: '#0066CC',
+                    color: themeColors.link,
                     navigate: (url) => {
                       if (url) {
                         Linking.openURL(url);

package/src/components/MediaPickerButton.tsx

@@ -1,12 +1,29 @@
-import { TouchableOpacity, Image } from 'react-native';
-import { useCallback } from 'react';
+import {
+  TouchableOpacity,
+  Image,
+  View,
+  Modal,
+  Animated,
+  Dimensions,
+  TouchableWithoutFeedback,
+  Platform,
+} from 'react-native';
+import { useState, useCallback, useRef } from 'react';
 import { useThemeColors } from '../hooks/useThemeColors';
 import { ScaledSheet } from './ScaledSheet';
 import { activeOpacity } from '../constants/activeOpacity';
-import { pickMedia } from '../NativeComnyxMediaPicker';
+import { pickImage, pickVideo } from '../NativeComnyxMediaPicker';
+import { AppText } from './AppText';
+import { useLocalize } from '../hooks/useLocalize';
 import type { MediaAsset } from '../types/MediaTypes';
 
 const paperclipIcon = require('../assets/attachment-01.png');
+const galleryIcon = require('../assets/gallery.png');
+const videoPlayIcon = require('../assets/video-play.png');
+
+const closeCircleIcon = require('../assets/x-circle.png');
+
+const SCREEN_HEIGHT = Dimensions.get('window').height;
 
 export function MediaPickerButton({
   onMediaSelected,
@@ -14,23 +31,166 @@ export function MediaPickerButton({
   onMediaSelected: (assets: MediaAsset[]) => void;
 }) {
   const themeColors = useThemeColors();
+  const localize = useLocalize();
+  const [visible, setVisible] = useState(false);
+  const slideAnim = useRef(new Animated.Value(SCREEN_HEIGHT)).current;
+
+  const open = useCallback(() => {
+    setVisible(true);
+    Animated.spring(slideAnim, {
+      toValue: 0,
+      useNativeDriver: true,
+      bounciness: 4,
+      speed: 14,
+    }).start();
+  }, [slideAnim]);
+
+  const close = useCallback(() => {
+    Animated.timing(slideAnim, {
+      toValue: SCREEN_HEIGHT,
+      duration: 250,
+      useNativeDriver: true,
+    }).start(() => {
+      setVisible(false);
+    });
+  }, [slideAnim]);
+
+  const pendingAction = useRef<(() => void) | null>(null);
+
+  const dismissAndRun = useCallback(
+    (action: () => void) => {
+      slideAnim.setValue(SCREEN_HEIGHT);
+      if (Platform.OS === 'ios') {
+        // Defer action until Modal's onDismiss fires to avoid
+        // "Attempt to present on a VC which is already presenting"
+        pendingAction.current = action;
+        setVisible(false);
+      } else {
+        setVisible(false);
+        action();
+      }
+    },
+    [slideAnim]
+  );
 
-  const showPicker = useCallback(async () => {
-    const assets = await pickMedia();
-    if (assets.length > 0) onMediaSelected(assets);
-  }, [onMediaSelected]);
+  const handlePickImage = useCallback(async () => {
+    dismissAndRun(async () => {
+      try {
+        const assets = await pickImage();
+        if (assets.length > 0) onMediaSelected(assets);
+      } catch (e) {
+        console.error('[Comnyx] pickImage error:', e);
+      }
+    });
+  }, [dismissAndRun, onMediaSelected]);
+
+  const handlePickVideo = useCallback(async () => {
+    dismissAndRun(async () => {
+      try {
+        const assets = await pickVideo();
+        if (assets.length > 0) onMediaSelected(assets);
+      } catch (e) {
+        console.error('[Comnyx] pickVideo error:', e);
+      }
+    });
+  }, [dismissAndRun, onMediaSelected]);
 
   return (
-    <TouchableOpacity
-      style={styles.button}
-      onPress={showPicker}
-      activeOpacity={activeOpacity}
-    >
-      <Image
-        source={paperclipIcon}
-        style={[styles.icon, { tintColor: themeColors.text }]}
-      />
-    </TouchableOpacity>
+    <>
+      <TouchableOpacity
+        style={styles.button}
+        onPress={open}
+        activeOpacity={activeOpacity}
+      >
+        <Image
+          source={paperclipIcon}
+          style={[styles.icon, { tintColor: themeColors.text }]}
+        />
+      </TouchableOpacity>
+
+      <Modal
+        visible={visible}
+        transparent
+        animationType="none"
+        onRequestClose={close}
+        onDismiss={() => {
+          if (pendingAction.current) {
+            const action = pendingAction.current;
+            pendingAction.current = null;
+            action();
+          }
+        }}
+        statusBarTranslucent
+      >
+        <TouchableWithoutFeedback onPress={close}>
+          <View style={styles.overlay}>
+            <TouchableWithoutFeedback>
+              <Animated.View
+                style={[
+                  styles.sheet,
+                  {
+                    backgroundColor: themeColors.background,
+                    transform: [{ translateY: slideAnim }],
+                  },
+                ]}
+              >
+                <View style={styles.handle} />
+
+                <View style={styles.titleRow}>
+                  <AppText style={[styles.title, { color: themeColors.text }]}>
+                    {localize('chat.media.pick.title')}
+                  </AppText>
+                  {Platform.OS === 'android' && (
+                    <TouchableOpacity
+                      onPress={close}
+                      activeOpacity={activeOpacity}
+                      style={styles.closeButton}
+                    >
+                      <Image
+                        source={closeCircleIcon}
+                        style={styles.closeIcon}
+                      />
+                    </TouchableOpacity>
+                  )}
+                </View>
+
+                <TouchableOpacity
+                  style={styles.option}
+                  onPress={handlePickImage}
+                  activeOpacity={activeOpacity}
+                >
+                  <Image
+                    source={galleryIcon}
+                    style={[styles.optionIcon, { tintColor: themeColors.text }]}
+                  />
+                  <AppText
+                    style={[styles.optionText, { color: themeColors.text }]}
+                  >
+                    {localize('chat.media.pick.photo')}
+                  </AppText>
+                </TouchableOpacity>
+
+                <TouchableOpacity
+                  style={styles.option}
+                  onPress={handlePickVideo}
+                  activeOpacity={activeOpacity}
+                >
+                  <Image
+                    source={videoPlayIcon}
+                    style={[styles.optionIcon, { tintColor: themeColors.text }]}
+                  />
+                  <AppText
+                    style={[styles.optionText, { color: themeColors.text }]}
+                  >
+                    {localize('chat.media.pick.video')}
+                  </AppText>
+                </TouchableOpacity>
+              </Animated.View>
+            </TouchableWithoutFeedback>
+          </View>
+        </TouchableWithoutFeedback>
+      </Modal>
+    </>
   );
 }
 
@@ -45,4 +205,65 @@ const styles = ScaledSheet.create({
     width: '28@vs',
     height: '28@vs',
   },
+  overlay: {
+    flex: 1,
+    backgroundColor: 'rgba(0,0,0,0.4)',
+    justifyContent: 'flex-end',
+  },
+  sheet: {
+    borderTopLeftRadius: '16@vs',
+    borderTopRightRadius: '16@vs',
+    paddingBottom: '34@vs',
+    paddingTop: '12@vs',
+    paddingHorizontal: '20@s',
+  },
+  handle: {
+    width: '36@s',
+    height: '4@vs',
+    backgroundColor: '#ccc',
+    borderRadius: '2@vs',
+    alignSelf: 'center',
+    marginBottom: '16@vs',
+  },
+  titleRow: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    marginBottom: '16@vs',
+  },
+  title: {
+    fontSize: '18@vs',
+    fontWeight: '600',
+  },
+  closeButton: {
+    padding: '4@vs',
+  },
+  closeIcon: {
+    width: '22@vs',
+    height: '22@vs',
+  },
+  optionIcon: {
+    width: '24@vs',
+    height: '24@vs',
+    marginRight: '12@s',
+  },
+  option: {
+    paddingVertical: '14@vs',
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  optionText: {
+    fontSize: '16@vs',
+  },
+  cancelButton: {
+    marginTop: '8@vs',
+    paddingVertical: '14@vs',
+    alignItems: 'center',
+    borderTopWidth: 0.5,
+    borderTopColor: '#ddd',
+  },
+  cancelText: {
+    fontSize: '16@vs',
+    opacity: 0.6,
+  },
 });