@developer_tribe/react-native-comnyx 0.1.0 → 0.2.0

package/src/components/ChatList.tsx

@@ -0,0 +1,305 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { useAppStore } from '../store';
+import {
+  FlatList,
+  View,
+  useWindowDimensions,
+  ActivityIndicator,
+  Image,
+  TouchableOpacity,
+} from 'react-native';
+import { getCustomerConversation } from '../api';
+import type { AppConversationMessage } from '../types/Conversation';
+import { StyleSheet } from 'react-native';
+import { MessageItem } from './MessageItem';
+import { MessageInput } from './MessageInput';
+import { useThemeColors } from '../hooks/useThemeColors';
+import { AppText } from './AppText';
+import { InitFailed } from './InitFailed';
+import { EmptyList } from './EmptyList';
+
+function LoadingItem() {
+  const themeColors = useThemeColors();
+  return (
+    <View
+      style={[styles.loadingItem, { backgroundColor: themeColors.background }]}
+    >
+      <ActivityIndicator size="large" color={themeColors.primary} />
+    </View>
+  );
+}
+
+export function ChatList() {
+  const themeColors = useThemeColors();
+  const { height: windowHeight } = useWindowDimensions();
+  const MESSAGE_MIN_HEIGHT = 60;
+  const FLATLIST_PADDING = 20;
+  const MESSAGES_PER_PAGE = Math.ceil(
+    (windowHeight - FLATLIST_PADDING) / MESSAGE_MIN_HEIGHT
+  );
+  const [loading, setLoading] = useState(true);
+  const { customer, data, setData } = useAppStore((s) => ({
+    customer: s.customer,
+    data: s.data,
+    setData: s.setData,
+  }));
+  const ref = useRef<FlatList<AppConversationMessage>>(null);
+  const [page, setPage] = useState(1);
+  const nextPageStatus = useRef<'fail' | 'loading' | 'empty'>();
+  const [nexPageFailed, setNexPageFailed] = useState(false);
+  const [initFailed, setInitFailed] = useState(false);
+  const [isScrollingUp, setIsScrollingUp] = useState(false);
+  const listChangedRef = useRef(false);
+
+  const nextPage = useCallback(() => {
+    if (nextPageStatus.current) {
+      return;
+    }
+    nextPageStatus.current = 'loading';
+    if (customer?.external_id) {
+      const newPage = page + 1;
+      setPage(newPage);
+      const firstMessage = useAppStore.getState().firstMessage;
+      getCustomerConversation(
+        customer?.external_id,
+        firstMessage?.created_at,
+        newPage,
+        {
+          fake: useAppStore.getState().fake,
+          per_page: MESSAGES_PER_PAGE,
+        }
+      )
+        .then((newData) => {
+          listChangedRef.current = true;
+          setData((prevData) => {
+            const newMessages = newData.page.data;
+            const existingIds = new Set(prevData?.map((msg) => msg.id));
+            const uniqueNewMessages = newMessages.filter(
+              (msg) => !existingIds.has(msg.id)
+            );
+
+            const processedMessages = uniqueNewMessages.map((u) => ({
+              ...u,
+              created_at: new Date(u.created_at),
+              approved: true,
+            }));
+            if (processedMessages.length === 0) {
+              nextPageStatus.current = 'empty';
+            } else {
+              nextPageStatus.current = undefined;
+            }
+            return [...(prevData ?? []), ...processedMessages];
+          });
+        })
+        .catch((_) => {
+          nextPageStatus.current = 'fail';
+          setNexPageFailed(true);
+        })
+        .finally(() => {
+          setLoading(false);
+        });
+    }
+  }, [MESSAGES_PER_PAGE, customer?.external_id, page, setData]);
+
+  const renderItem = useCallback(
+    ({ item }: { item: AppConversationMessage }) => <MessageItem item={item} />,
+    []
+  );
+
+  const handleScroll = useCallback(
+    (event: any) => {
+      const currentScrollY = event.nativeEvent.contentOffset.y;
+      const contentHeight = event.nativeEvent.contentSize.height;
+      const scrollViewHeight = event.nativeEvent.layoutMeasurement.height;
+      setIsScrollingUp(currentScrollY < 100);
+
+      if (currentScrollY >= contentHeight - scrollViewHeight - 200) {
+        nextPage();
+      }
+    },
+    [nextPage]
+  );
+
+  const scrollToBottom = useCallback(
+    (animated: boolean) => {
+      if (ref.current && data?.length) {
+        ref.current.scrollToOffset({
+          offset: 0,
+          animated,
+        });
+      }
+    },
+    [data]
+  );
+
+  useEffect(() => {
+    if (customer?.external_id && !initFailed) {
+      getCustomerConversation(customer?.external_id, new Date(), 1, {
+        fake: useAppStore.getState().fake,
+        per_page: MESSAGES_PER_PAGE,
+      })
+        .then((newData) => {
+          setData((prevData) => {
+            const newMessages = newData.page.data;
+            const existingIds = new Set(prevData?.map((msg) => msg.id));
+            const uniqueNewMessages = newMessages.filter(
+              (msg) => !existingIds.has(msg.id)
+            );
+            const processedMessages = uniqueNewMessages.map((u) => ({
+              ...u,
+              created_at: new Date(u.created_at),
+              approved: true,
+            }));
+            useAppStore.setState({
+              firstMessage: processedMessages[0],
+            });
+            if (processedMessages.length === 0) {
+              setLoading(false);
+            }
+            return processedMessages;
+          });
+          scrollToBottom(false);
+        })
+        .catch((e) => {
+          setInitFailed(true);
+          console.error(e);
+        });
+    }
+  }, [
+    MESSAGES_PER_PAGE,
+    customer?.external_id,
+    initFailed,
+    scrollToBottom,
+    setData,
+  ]);
+
+  if (nexPageFailed) {
+    return (
+      <View
+        style={[
+          styles.retryContainer,
+          { backgroundColor: themeColors.background },
+        ]}
+      >
+        <TouchableOpacity
+          style={[styles.retryButton, { backgroundColor: themeColors.primary }]}
+          onPress={() => {
+            setNexPageFailed(false);
+            nextPageStatus.current = undefined;
+            nextPage();
+          }}
+        >
+          <AppText
+            localization="chat.load.error"
+            style={[styles.retryText, { color: themeColors.background }]}
+          />
+        </TouchableOpacity>
+      </View>
+    );
+  }
+
+  if (initFailed) {
+    return <InitFailed setInitFailed={setInitFailed} />;
+  }
+  return (
+    <View
+      style={[styles.container, { backgroundColor: themeColors.background }]}
+    >
+      <FlatList
+        ref={ref}
+        data={data}
+        inverted
+        renderItem={renderItem}
+        contentContainerStyle={[
+          styles.contentContainer,
+          { backgroundColor: themeColors.background },
+        ]}
+        style={styles.list}
+        ListEmptyComponent={
+          !loading && (!data || data.length === 0) ? <EmptyList /> : null
+        }
+        ListFooterComponent={loading ? <LoadingItem /> : null}
+        keyExtractor={(item) => item.id + '-' + item.created_at}
+        removeClippedSubviews={true}
+        maxToRenderPerBatch={10}
+        windowSize={21}
+        initialNumToRender={MESSAGES_PER_PAGE}
+        getItemLayout={(_, index) => ({
+          length: MESSAGE_MIN_HEIGHT + 10,
+          offset: (MESSAGE_MIN_HEIGHT + 10) * index,
+          index,
+        })}
+        onScroll={handleScroll}
+        scrollEventThrottle={16}
+      />
+      {isScrollingUp && (
+        <TouchableOpacity
+          style={[
+            styles.scrollDownButton,
+            { backgroundColor: themeColors.background },
+          ]}
+          onPress={() => scrollToBottom(true)}
+        >
+          <Image
+            source={require('../assets/down.png')}
+            style={[styles.scrollUpIcon, { tintColor: themeColors.text }]}
+          />
+        </TouchableOpacity>
+      )}
+      <MessageInput scrollToBottom={scrollToBottom} />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  list: {
+    flex: 1,
+  },
+  contentContainer: {
+    paddingVertical: 10,
+    paddingHorizontal: 10,
+  },
+  loadingItem: {
+    height: 200,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  scrollDownButton: {
+    position: 'absolute',
+    right: 20,
+    bottom: '15%',
+    borderRadius: 25,
+    padding: 10,
+    shadowColor: '#000',
+    shadowOffset: {
+      width: 0,
+      height: 2,
+    },
+    shadowOpacity: 0.25,
+    shadowRadius: 3.84,
+    elevation: 5,
+  },
+  scrollUpIcon: {
+    width: 24,
+    height: 24,
+  },
+  retryContainer: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    padding: 20,
+  },
+  retryButton: {
+    padding: 15,
+    borderRadius: 8,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  retryText: {
+    fontSize: 16,
+    fontWeight: '500',
+  },
+});

package/src/components/CustomerForm.tsx

@@ -0,0 +1,203 @@
+import { View, TextInput, StyleSheet, TouchableOpacity } from 'react-native';
+import { useForm, Controller } from 'react-hook-form';
+import { useAppStore } from '../store';
+import { createCustomer } from '../api';
+import { AppText } from './AppText';
+import { useLocalize } from '../hooks/useLocalize';
+import { useThemeColors } from '../hooks/useThemeColors';
+
+interface CustomerFormData {
+  name: string;
+  country: string;
+  email: string;
+  phone: string;
+}
+
+export function CustomerForm() {
+  const {
+    control,
+    handleSubmit,
+    formState: { errors },
+  } = useForm<CustomerFormData>();
+  const themeColors = useThemeColors();
+  const localize = useLocalize();
+
+  const inputStyle = {
+    ...styles.input,
+    color: themeColors.text,
+    borderColor: themeColors.border,
+    backgroundColor: themeColors.background,
+  };
+
+  const onSubmit = async (data: CustomerFormData) => {
+    try {
+      const customer = await createCustomer(
+        {
+          ...data,
+          language: 'en',
+          externalId: useAppStore.getState().externalId || '',
+          ipAddress: '192.168.1.1',
+          customParameters: [],
+        },
+        { fake: useAppStore.getState().fake }
+      );
+      if (customer !== undefined) {
+        useAppStore.getState().initForm(customer);
+      }
+    } catch (error) {
+      console.error('Error creating customer:', error);
+    }
+  };
+
+  return (
+    <View
+      style={[styles.container, { backgroundColor: themeColors.background }]}
+    >
+      <View style={styles.headerContainer}>
+        <AppText
+          localization="customer.form.title"
+          style={[styles.headerText, { color: themeColors.text }]}
+        />
+        <AppText
+          localization="customer.form.instructions"
+          style={[styles.headerText, { color: themeColors.text }]}
+        />
+      </View>
+      <Controller
+        control={control}
+        rules={{ required: true }}
+        render={({ field: { onChange, value } }) => (
+          <TextInput
+            style={inputStyle}
+            placeholder={localize('customer.form.placeholder.name')}
+            placeholderTextColor="#6C757D"
+            value={value}
+            onChangeText={onChange}
+          />
+        )}
+        name="name"
+      />
+      {errors.name && (
+        <AppText
+          localization="customer.form.error"
+          style={[styles.error, { color: themeColors.error }]}
+        />
+      )}
+
+      <Controller
+        control={control}
+        rules={{ required: true }}
+        render={({ field: { onChange, value } }) => (
+          <TextInput
+            style={inputStyle}
+            placeholder={localize('customer.form.placeholder.country')}
+            placeholderTextColor="#6C757D"
+            value={value}
+            onChangeText={onChange}
+          />
+        )}
+        name="country"
+      />
+      {errors.country && (
+        <AppText
+          localization="customer.form.error.country"
+          style={[styles.error, { color: themeColors.error }]}
+        />
+      )}
+
+      <Controller
+        control={control}
+        rules={{ required: true, pattern: /^\S+@\S+$/i }}
+        render={({ field: { onChange, value } }) => (
+          <TextInput
+            style={inputStyle}
+            placeholder={localize('customer.form.placeholder.email')}
+            placeholderTextColor="#6C757D"
+            value={value}
+            onChangeText={onChange}
+            keyboardType="email-address"
+          />
+        )}
+        name="email"
+      />
+      {errors.email && (
+        <AppText
+          localization="customer.form.error.email"
+          style={[styles.error, { color: themeColors.error }]}
+        />
+      )}
+
+      <Controller
+        control={control}
+        rules={{ required: true }}
+        render={({ field: { onChange, value } }) => (
+          <TextInput
+            style={inputStyle}
+            placeholder={localize('customer.form.placeholder.phone')}
+            placeholderTextColor="#6C757D"
+            value={value}
+            onChangeText={onChange}
+            keyboardType="phone-pad"
+          />
+        )}
+        name="phone"
+      />
+      {errors.phone && (
+        <AppText
+          localization="customer.form.error.phone"
+          style={[styles.error, { color: themeColors.error }]}
+        />
+      )}
+      <TouchableOpacity
+        style={[styles.button, { backgroundColor: themeColors.primary }]}
+        onPress={handleSubmit(onSubmit)}
+      >
+        <AppText
+          localization="customer.form.submit"
+          style={styles.buttonText}
+        />
+      </TouchableOpacity>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    padding: 24,
+    flex: 1,
+    justifyContent: 'center',
+  },
+  headerContainer: {
+    marginBottom: 24,
+  },
+  headerText: {
+    fontSize: 15,
+    fontWeight: '600',
+    textAlign: 'center',
+  },
+  input: {
+    height: 56,
+    borderWidth: 1,
+    borderRadius: 12,
+    paddingHorizontal: 16,
+    fontSize: 16,
+    backgroundColor: 'white',
+    marginBottom: 16,
+  },
+  button: {
+    padding: 16,
+    borderRadius: 12,
+    alignItems: 'center',
+    marginTop: 24,
+  },
+  buttonText: {
+    color: 'white',
+    fontSize: 16,
+    fontWeight: '600',
+  },
+  error: {
+    fontSize: 14,
+    marginLeft: 16,
+    top: -16,
+  },
+});

package/src/components/EmptyList.tsx

@@ -0,0 +1,32 @@
+import { View, StyleSheet } from 'react-native';
+import { useThemeColors } from '../hooks/useThemeColors';
+import { AppText } from './AppText';
+
+export function EmptyList() {
+  const themeColors = useThemeColors();
+
+  return (
+    <View
+      style={[styles.container, { backgroundColor: themeColors.background }]}
+    >
+      <AppText
+        localization="chat.empty"
+        style={[styles.text, { color: themeColors.text }]}
+      />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    padding: 20,
+    transform: [{ rotate: '180deg' }], //TODO: inverted list
+  },
+  text: {
+    fontSize: 16,
+    textAlign: 'center',
+  },
+});

package/src/components/InitFailed.tsx

@@ -0,0 +1,46 @@
+import { TouchableOpacity, View, StyleSheet } from 'react-native';
+import { useThemeColors } from '../hooks/useThemeColors';
+import { AppText } from './AppText';
+
+interface InitFailedProps {
+  setInitFailed: (value: boolean) => void;
+}
+
+export function InitFailed({ setInitFailed }: InitFailedProps) {
+  const themeColors = useThemeColors();
+
+  return (
+    <View
+      style={[styles.container, { backgroundColor: themeColors.background }]}
+    >
+      <TouchableOpacity
+        style={[styles.retryButton, { backgroundColor: themeColors.primary }]}
+        onPress={() => setInitFailed(false)}
+      >
+        <AppText
+          localization="chat.init.error"
+          style={[styles.retryText, { color: themeColors.background }]}
+        />
+      </TouchableOpacity>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    padding: 20,
+  },
+  retryButton: {
+    padding: 15,
+    borderRadius: 8,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  retryText: {
+    fontSize: 16,
+    fontWeight: '500',
+  },
+});

package/src/components/MessageInput.tsx

@@ -0,0 +1,133 @@
+import {
+  StyleSheet,
+  TextInput,
+  View,
+  Image,
+  TouchableOpacity,
+} from 'react-native';
+import { useAppStore } from '../store';
+import { useState } from 'react';
+import { sendCustomerMessage } from '../api';
+import { useThemeColors } from '../hooks/useThemeColors';
+
+const sendDark = require('../assets/send.png');
+
+export function MessageInput({
+  scrollToBottom,
+}: {
+  scrollToBottom: (animated: boolean) => void;
+}) {
+  const [value, setValue] = useState('');
+  const customer = useAppStore((s) => s.customer!);
+  const themeColors = useThemeColors();
+
+  const sendMessage = () => {
+    if (value.trim()) {
+      const date = new Date();
+      useAppStore.getState().setData((data) => [
+        ...(data ?? []),
+        {
+          id: null,
+          approved: false,
+          content: value,
+          created_at: date,
+          user: {
+            name: customer.name,
+            profile_photo_url: null,
+          },
+        },
+      ]);
+      sendCustomerMessage(customer.external_id, value, {
+        fake: useAppStore.getState().fake,
+      }).then((res) => {
+        const data = useAppStore.getState().data;
+        if (data) {
+          const itemIndex = data.findIndex(
+            (item) =>
+              item.id === null &&
+              new Date(item.created_at).getTime() === date.getTime()
+          );
+          if (itemIndex === -1) {
+            //TODO:??
+          } else {
+            const alteredData = [...data];
+            alteredData[itemIndex] = {
+              id: res.message.id,
+              content: res.message.content,
+              user: res.message.user ?? alteredData[itemIndex]?.user,
+              created_at: new Date(res.message.created_at),
+              approved: true,
+            };
+            useAppStore.setState({
+              data: alteredData,
+            });
+            scrollToBottom(false);
+          }
+        } else {
+          //TODO: ??
+        }
+      });
+      setValue('');
+    }
+  };
+
+  return (
+    <View
+      style={[styles.container, { backgroundColor: themeColors.background }]}
+    >
+      <TextInput
+        value={value}
+        onChangeText={(newValue) => setValue(newValue)}
+        onSubmitEditing={sendMessage}
+        returnKeyType="send"
+        style={[
+          styles.textInput,
+          {
+            backgroundColor: themeColors.background,
+            color: themeColors.text,
+            borderColor: themeColors.border,
+          },
+        ]}
+        placeholder="Type a message..."
+        placeholderTextColor={themeColors.text + '80'}
+      />
+      <TouchableOpacity
+        style={[styles.sendButton, { backgroundColor: themeColors.primary }]}
+        onPress={sendMessage}
+      >
+        <Image
+          style={[styles.sendIcon, { tintColor: themeColors.text }]}
+          source={sendDark}
+        />
+      </TouchableOpacity>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    padding: 10,
+    borderTopWidth: 1,
+  },
+  textInput: {
+    flex: 1,
+    borderWidth: 1,
+    borderRadius: 20,
+    paddingHorizontal: 15,
+    paddingVertical: 8,
+    marginRight: 10,
+    fontSize: 16,
+  },
+  sendButton: {
+    width: 40,
+    height: 40,
+    borderRadius: 20,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  sendIcon: {
+    width: 20,
+    height: 20,
+  },
+});