@developer_tribe/react-native-comnyx 0.1.1 → 0.2.1

package/src/components/CustomerForm.tsx

@@ -0,0 +1,300 @@
+import {
+  View,
+  TextInput,
+  StyleSheet,
+  TouchableOpacity,
+  Modal,
+  FlatList,
+  Pressable,
+} 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';
+import { countries } from '../constants/countries';
+import { useState } from 'react';
+
+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 [isCountryModalVisible, setIsCountryModalVisible] = useState(false);
+
+  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 } }) => (
+          <>
+            <Pressable
+              style={[
+                styles.input,
+                {
+                  borderColor: themeColors.border,
+                  backgroundColor: themeColors.background,
+                  justifyContent: 'center',
+                },
+              ]}
+              onPress={() => setIsCountryModalVisible(true)}
+            >
+              <AppText style={{ color: value ? themeColors.text : '#6C757D' }}>
+                {value
+                  ? countries.find((c) => c.code === value)?.name
+                  : localize('customer.form.placeholder.country')}
+              </AppText>
+            </Pressable>
+
+            <Modal
+              visible={isCountryModalVisible}
+              transparent={true}
+              animationType="slide"
+              onRequestClose={() => setIsCountryModalVisible(false)}
+            >
+              <View
+                style={[
+                  styles.modalContainer,
+                  { backgroundColor: 'rgba(0, 0, 0, 0.5)' },
+                ]}
+              >
+                <View
+                  style={[
+                    styles.modalContent,
+                    { backgroundColor: themeColors.background },
+                  ]}
+                >
+                  <FlatList
+                    data={countries}
+                    keyExtractor={(item) => item.code}
+                    initialScrollIndex={countries.findIndex(
+                      (c) => c.code === value
+                    )}
+                    renderItem={({ item }) => (
+                      <Pressable
+                        style={[
+                          styles.countryItem,
+                          {
+                            backgroundColor:
+                              value === item.code
+                                ? themeColors.primary
+                                : themeColors.background,
+                            borderBottomColor: themeColors.border,
+                          },
+                        ]}
+                        onPress={() => {
+                          onChange(item.code);
+                          setIsCountryModalVisible(false);
+                        }}
+                      >
+                        <AppText
+                          style={{
+                            color:
+                              value === item.code
+                                ? themeColors.background
+                                : themeColors.text,
+                            fontSize: 16,
+                          }}
+                        >
+                          {item.name}
+                        </AppText>
+                      </Pressable>
+                    )}
+                  />
+                </View>
+              </View>
+            </Modal>
+          </>
+        )}
+        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,
+  },
+  modalContainer: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  modalContent: {
+    width: '90%',
+    height: '70%',
+    borderRadius: 12,
+    overflow: 'hidden',
+  },
+  countryItem: {
+    padding: 16,
+    borderBottomWidth: 1,
+  },
+});

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) => [
+        {
+          id: null,
+          approved: false,
+          content: value,
+          created_at: date,
+          user: {
+            name: customer.name,
+            profile_photo_url: null,
+          },
+        },
+        ...(data ?? []),
+      ]);
+      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,
+  },
+});

package/src/components/MessageItem.tsx

@@ -0,0 +1,141 @@
+import { View, Image } from 'react-native';
+import { AppText } from './AppText';
+import type { AppConversationMessage } from '../types/Conversation';
+import { StyleSheet } from 'react-native';
+import { useThemeColors } from '../hooks/useThemeColors';
+
+const clockIcon = require('../assets/clock.png');
+const doubleCheckIcon = require('../assets/double-check.png');
+
+export function MessageItem({ item }: { item: AppConversationMessage }) {
+  const themeColors = useThemeColors();
+  const isDeviceOwner = !!item.user;
+  const formattedDate = new Date(item.created_at).toLocaleTimeString([], {
+    hour: '2-digit',
+    minute: '2-digit',
+  });
+
+  return (
+    <View
+      key={item.id}
+      style={[
+        styles.messageItem,
+        isDeviceOwner ? styles.rightMessage : styles.leftMessage,
+      ]}
+    >
+      <View
+        style={[
+          styles.messageBubble,
+          isDeviceOwner
+            ? [styles.rightBubble, { backgroundColor: themeColors.primary }]
+            : [styles.leftBubble, { backgroundColor: themeColors.border }],
+        ]}
+      >
+        <AppText
+          style={[
+            styles.messageText,
+            isDeviceOwner
+              ? styles.rightMessageText
+              : [styles.leftMessageText, { color: themeColors.text }],
+          ]}
+        >
+          {item.content}
+        </AppText>
+        <View style={styles.footer}>
+          <AppText
+            style={[
+              styles.timestamp,
+              isDeviceOwner
+                ? styles.rightTimestamp
+                : [styles.leftTimestamp, { color: themeColors.text }],
+            ]}
+          >
+            {formattedDate}
+          </AppText>
+          {!item.approved ? (
+            <Image
+              source={clockIcon}
+              style={[
+                styles.clockIcon,
+                isDeviceOwner
+                  ? styles.rightClockIcon
+                  : [styles.leftClockIcon, { tintColor: themeColors.text }],
+              ]}
+            />
+          ) : (
+            <Image
+              source={doubleCheckIcon}
+              style={[
+                styles.clockIcon,
+                isDeviceOwner
+                  ? styles.rightClockIcon
+                  : [styles.leftClockIcon, { tintColor: themeColors.text }],
+              ]}
+            />
+          )}
+        </View>
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  messageItem: {
+    marginVertical: 5,
+    maxWidth: '80%',
+    minHeight: 60,
+    minWidth: 100,
+  },
+  leftMessage: {
+    alignSelf: 'flex-start',
+  },
+  rightMessage: {
+    alignSelf: 'flex-end',
+  },
+  messageBubble: {
+    padding: 12,
+    borderRadius: 20,
+  },
+  leftBubble: {
+    borderTopLeftRadius: 4,
+  },
+  rightBubble: {
+    borderTopRightRadius: 4,
+  },
+  messageText: {
+    fontSize: 16,
+  },
+  leftMessageText: {
+    color: '#000000',
+  },
+  rightMessageText: {
+    color: '#FFFFFF',
+  },
+  footer: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    marginTop: 4,
+  },
+  timestamp: {
+    fontSize: 12,
+    opacity: 0.7,
+  },
+  leftTimestamp: {
+    color: '#666666',
+  },
+  rightTimestamp: {
+    color: '#FFFFFF',
+  },
+  clockIcon: {
+    width: 12,
+    height: 12,
+    marginLeft: 4,
+  },
+  leftClockIcon: {
+    tintColor: '#666666',
+  },
+  rightClockIcon: {
+    tintColor: '#FFFFFF',
+  },
+});