@developer_tribe/react-native-comnyx 0.15.0 → 0.16.1

package/src/components/ChatList.tsx

@@ -31,6 +31,10 @@ import { ScaledSheet } from './ScaledSheet';
 import { formatDate, getDateKey } from '../utils/formatDate';
 import { activeOpacity } from '../constants/activeOpacity';
 import { useAppStore } from '../store/store';
+import {
+  useSupportConfig,
+  reportSupportError,
+} from '../support/SupportConfigContext';
 
 const headphonesIcon = require('../assets/headphones-01.png');
 const closeIcon = require('../assets/x-close.png');
@@ -110,6 +114,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 +162,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 +187,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,15 +203,29 @@ export function ChatList({
     setLoading((l) => l && initLoading);
   }, [initLoading]);
 
-  const { data, setData, customer, language } = useAppStore((s) => ({
+  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, theme } = useAppStore((s) => ({
     data: s.data,
     setData: s.setData,
     customer: s.customer,
     language: s.language,
+    theme: s.theme,
   }));
   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);
@@ -375,7 +408,11 @@ export function ChatList({
               }
             }
 
-            console.error('Mesajı yeniden gönderme hatası:', error);
+            reportSupportError(error, {
+              section: 'send',
+              recoverable: true,
+              extras: { retry: true, contentLength: selectedMessage.length },
+            });
             setSelectedMessage('');
           });
       }
@@ -398,7 +435,8 @@ export function ChatList({
         {
           fake: useAppStore.getState().fake,
           per_page: MESSAGES_PER_PAGE,
-        }
+        },
+        lifecycleAbortRef.current?.signal
       )
         .then((newData) => {
           listChangedRef.current = true;
@@ -433,9 +471,14 @@ export function ChatList({
             }
           });
         })
-        .catch((_) => {
+        .catch((err) => {
           nextPageStatus.current = 'fail';
           setNexPageFailed(true);
+          reportSupportError(err, {
+            section: 'pagination',
+            recoverable: true,
+            extras: { page, perPage: MESSAGES_PER_PAGE },
+          });
         })
         .finally(() => {
           setLoading(false);
@@ -445,7 +488,7 @@ export function ChatList({
 
   const renderItem = useCallback(
     ({ item }: { item: AppConversationMessage }) => {
-      return (
+      const defaultNode = (
         <MessageItem
           item={item}
           onShowPopup={() => {
@@ -454,8 +497,12 @@ export function ChatList({
           }}
         />
       );
+      if (renderMessageOverride) {
+        return <>{renderMessageOverride({ message: item, defaultNode })}</>;
+      }
+      return defaultNode;
     },
-    []
+    [renderMessageOverride]
   );
 
   const renderSectionFooter = useCallback(
@@ -515,10 +562,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 ?? [];
@@ -552,7 +605,11 @@ export function ChatList({
         })
         .catch((e) => {
           setInitFailed(true);
-          console.error(e);
+          reportSupportError(e, {
+            section: 'init',
+            recoverable: true,
+            extras: { perPage: MESSAGES_PER_PAGE },
+          });
         })
         .finally(() => {
           setLoading(false);
@@ -584,38 +641,31 @@ export function ChatList({
 
   if (nexPageFailed) {
     return (
-      <View
-        style={[
-          styles.retryContainer,
-          { backgroundColor: themeColors.background },
-        ]}
-      >
-        <TouchableOpacity
-          style={[styles.retryButton, { backgroundColor: themeColors.primary }]}
-          onPress={() => {
-            setNexPageFailed(false);
-            nextPageStatus.current = undefined;
-            nextPage();
-          }}
-          activeOpacity={activeOpacity}
-        >
-          <AppText
-            localization="chat.load.error"
-            style={[styles.retryText, { color: themeColors.background }]}
-          />
-        </TouchableOpacity>
-      </View>
+      <InitFailed
+        localization="chat.load.error"
+        onBack={onBack}
+        onRetry={() => {
+          setNexPageFailed(false);
+          nextPageStatus.current = undefined;
+          nextPage();
+        }}
+      />
     );
   }
 
   if (initFailed) {
-    return <InitFailed setInitFailed={setInitFailed} />;
+    if (renderErrorStateOverride) {
+      return (
+        <>{renderErrorStateOverride({ retry: () => setInitFailed(false) })}</>
+      );
+    }
+    return <InitFailed onRetry={() => setInitFailed(false)} onBack={onBack} />;
   }
 
   return (
     <>
       <StatusBar
-        barStyle={'dark-content'}
+        barStyle={theme === 'dark' ? 'light-content' : 'dark-content'}
         backgroundColor={themeColors.background}
         animated={false}
         translucent
@@ -633,49 +683,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 +752,11 @@ export function ChatList({
               style={styles.list}
               ListEmptyComponent={
                 !loading && (!sections || sections.length === 0) ? (
-                  <EmptyList />
+                  renderEmptyStateOverride ? (
+                    <>{renderEmptyStateOverride()}</>
+                  ) : (
+                    <EmptyList />
+                  )
                 ) : null
               }
               ListFooterComponent={loading ? <LoadingItem /> : null}
@@ -722,6 +787,8 @@ export function ChatList({
                 isKeyboardVisible && styles.scrollDownButtonWithKeyboard,
               ]}
               onPress={() => scrollToBottom(true)}
+              accessibilityRole="button"
+              accessibilityLabel="Scroll to latest message"
             >
               <Image
                 source={require('../assets/down.png')}
@@ -798,23 +865,6 @@ const styles = ScaledSheet.create({
     width: '18@vs',
     height: '18@vs',
   },
-  retryContainer: {
-    flex: 1,
-    alignItems: 'center',
-    justifyContent: 'center',
-    paddingHorizontal: '20@s',
-    paddingVertical: '20@vs',
-  },
-  retryButton: {
-    padding: 15,
-    borderRadius: '8@s',
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  retryText: {
-    fontSize: '16@vs',
-    fontWeight: '500',
-  },
   headphonesIcon: {
     width: '24@vs',
     height: '24@vs',
@@ -880,7 +930,6 @@ const styles = ScaledSheet.create({
     zIndex: 9999,
   },
   toastContent: {
-    backgroundColor: '#333333',
     borderRadius: '8@s',
     paddingHorizontal: '16@s',
     paddingVertical: '12@vs',
@@ -895,7 +944,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

@@ -23,6 +23,7 @@ import { ScaledSheet } from './ScaledSheet';
 import type { LocalizationKeys } from '../types/LocalizationKeys';
 import { activeOpacity } from '../constants/activeOpacity';
 import { useAppStore } from '../store/store';
+import { reportSupportError } from '../support/SupportConfigContext';
 
 interface CustomerFormData {
   name: string;
@@ -84,7 +85,10 @@ export function CustomerForm({
         useAppStore.getState().setForm(res.customer);
       }
     } catch (error) {
-      console.error('Error creating customer:', error);
+      reportSupportError(error, {
+        section: 'customer-form',
+        recoverable: true,
+      });
     }
   };
 
@@ -244,7 +248,7 @@ export function CustomerForm({
                     },
                   ]}
                 >
-                  Email
+                  {localize('customer.form.email')}
                 </AppText>
                 <Controller
                   control={control}
@@ -291,7 +295,7 @@ export function CustomerForm({
                     },
                   ]}
                 >
-                  Phone
+                  {localize('customer.form.phone')}
                 </AppText>
                 <Controller
                   control={control}

package/src/components/InitFailed.tsx

@@ -1,28 +1,73 @@
-import { TouchableOpacity, View } from 'react-native';
+import { Image, TouchableOpacity, View } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { useThemeColors } from '../hooks/useThemeColors';
 import { AppText } from './AppText';
 import { ScaledSheet } from './ScaledSheet';
 import { activeOpacity } from '../constants/activeOpacity';
+import type { LocalizationKeys } from '../types/LocalizationKeys';
+
+const closeIcon = require('../assets/x-close.png');
+const errorIcon = require('../assets/x-circle.png');
 
 interface InitFailedProps {
-  setInitFailed: (value: boolean) => void;
+  onRetry: () => void;
+  onBack?: () => void;
+  localization?: keyof LocalizationKeys;
 }
 
-export function InitFailed({ setInitFailed }: InitFailedProps) {
+export function InitFailed({
+  onRetry,
+  onBack,
+  localization = 'chat.init.error',
+}: InitFailedProps) {
   const themeColors = useThemeColors();
+  const insets = useSafeAreaInsets();
 
   return (
     <View
       style={[styles.container, { backgroundColor: themeColors.background }]}
     >
+      {onBack ? (
+        <TouchableOpacity
+          activeOpacity={1}
+          style={[styles.closeButton, { top: Math.max(insets.top, 16) + 16 }]}
+          onPress={onBack}
+          accessibilityRole="button"
+          accessibilityLabel="Close support"
+          hitSlop={{ top: 12, bottom: 12, left: 12, right: 12 }}
+        >
+          <Image
+            source={closeIcon}
+            style={[styles.closeIcon, { tintColor: themeColors.text }]}
+          />
+        </TouchableOpacity>
+      ) : null}
+
       <TouchableOpacity
         activeOpacity={activeOpacity}
-        style={[styles.retryButton, { backgroundColor: themeColors.primary }]}
-        onPress={() => setInitFailed(false)}
+        style={styles.card}
+        onPress={onRetry}
+        accessibilityRole="button"
+        accessibilityLabel="Retry"
       >
+        <View
+          style={[
+            styles.iconCircle,
+            {
+              backgroundColor: themeColors.ghost,
+              borderColor: themeColors.lavender,
+            },
+          ]}
+        >
+          <Image
+            source={errorIcon}
+            style={[styles.errorIcon, { tintColor: themeColors.error }]}
+          />
+        </View>
+
         <AppText
-          localization="chat.init.error"
-          style={[styles.retryText, { color: themeColors.background }]}
+          localization={localization}
+          style={[styles.description, { color: themeColors.text }]}
         />
       </TouchableOpacity>
     </View>
@@ -34,18 +79,37 @@ const styles = ScaledSheet.create({
     flex: 1,
     alignItems: 'center',
     justifyContent: 'center',
-    paddingHorizontal: '20@s',
-    paddingVertical: '20@vs',
+    paddingHorizontal: '24@s',
+  },
+  closeButton: {
+    position: 'absolute',
+    left: '24@s',
   },
-  retryButton: {
-    paddingHorizontal: '15@s',
-    paddingVertical: '15@vs',
-    borderRadius: '8@s',
+  closeIcon: {
+    width: '24@vs',
+    height: '24@vs',
+  },
+  card: {
+    alignItems: 'center',
+    gap: '16@vs',
+    maxWidth: '340@s',
+  },
+  iconCircle: {
+    width: '72@vs',
+    height: '72@vs',
+    borderRadius: '36@vs',
+    borderWidth: 1,
     alignItems: 'center',
     justifyContent: 'center',
   },
-  retryText: {
-    fontSize: '16@vs',
-    fontWeight: '500',
+  errorIcon: {
+    width: '36@vs',
+    height: '36@vs',
+  },
+  description: {
+    fontSize: '15@vs',
+    lineHeight: '22@vs',
+    textAlign: 'center',
+    opacity: 0.85,
   },
 });