@developer_tribe/react-native-comnyx 0.2.0 → 0.2.1

package/src/components/ChatList.tsx

@@ -55,6 +55,7 @@ export function ChatList() {
     if (nextPageStatus.current) {
       return;
     }
+    console.log('next');
     nextPageStatus.current = 'loading';
     if (customer?.external_id) {
       const newPage = page + 1;
@@ -111,7 +112,7 @@ export function ChatList() {
       const currentScrollY = event.nativeEvent.contentOffset.y;
       const contentHeight = event.nativeEvent.contentSize.height;
       const scrollViewHeight = event.nativeEvent.layoutMeasurement.height;
-      setIsScrollingUp(currentScrollY < 100);
+      setIsScrollingUp(currentScrollY > 100);
 
       if (currentScrollY >= contentHeight - scrollViewHeight - 200) {
         nextPage();
@@ -158,20 +159,13 @@ export function ChatList() {
             }
             return processedMessages;
           });
-          scrollToBottom(false);
         })
         .catch((e) => {
           setInitFailed(true);
           console.error(e);
         });
     }
-  }, [
-    MESSAGES_PER_PAGE,
-    customer?.external_id,
-    initFailed,
-    scrollToBottom,
-    setData,
-  ]);
+  }, [MESSAGES_PER_PAGE, customer?.external_id, initFailed, setData]);
 
   if (nexPageFailed) {
     return (

package/src/components/CustomerForm.tsx

@@ -1,10 +1,20 @@
-import { View, TextInput, StyleSheet, TouchableOpacity } from 'react-native';
+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;
@@ -21,6 +31,7 @@ export function CustomerForm() {
   } = useForm<CustomerFormData>();
   const themeColors = useThemeColors();
   const localize = useLocalize();
+  const [isCountryModalVisible, setIsCountryModalVisible] = useState(false);
 
   const inputStyle = {
     ...styles.input,
@@ -88,13 +99,84 @@ export function CustomerForm() {
         control={control}
         rules={{ required: true }}
         render={({ field: { onChange, value } }) => (
-          <TextInput
-            style={inputStyle}
-            placeholder={localize('customer.form.placeholder.country')}
-            placeholderTextColor="#6C757D"
-            value={value}
-            onChangeText={onChange}
-          />
+          <>
+            <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"
       />
@@ -200,4 +282,19 @@ const styles = StyleSheet.create({
     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/MessageInput.tsx

@@ -25,7 +25,6 @@ export function MessageInput({
     if (value.trim()) {
       const date = new Date();
       useAppStore.getState().setData((data) => [
-        ...(data ?? []),
         {
           id: null,
           approved: false,
@@ -36,6 +35,7 @@ export function MessageInput({
             profile_photo_url: null,
           },
         },
+        ...(data ?? []),
       ]);
       sendCustomerMessage(customer.external_id, value, {
         fake: useAppStore.getState().fake,

package/src/constants/countries.ts

@@ -0,0 +1,200 @@
+export interface Country {
+  name: string;
+  code: string;
+}
+
+export const countries: Country[] = [
+  { name: 'Turkey', code: 'TR' },
+  { name: 'United States of America', code: 'US' },
+  { name: 'Afghanistan', code: 'AF' },
+  { name: 'Albania', code: 'AL' },
+  { name: 'Algeria', code: 'DZ' },
+  { name: 'Andorra', code: 'AD' },
+  { name: 'Angola', code: 'AO' },
+  { name: 'Antigua and Barbuda', code: 'AG' },
+  { name: 'Argentina', code: 'AR' },
+  { name: 'Armenia', code: 'AM' },
+  { name: 'Australia', code: 'AU' },
+  { name: 'Austria', code: 'AT' },
+  { name: 'Azerbaijan', code: 'AZ' },
+  { name: 'Bahamas', code: 'BS' },
+  { name: 'Bahrain', code: 'BH' },
+  { name: 'Bangladesh', code: 'BD' },
+  { name: 'Barbados', code: 'BB' },
+  { name: 'Belarus', code: 'BY' },
+  { name: 'Belgium', code: 'BE' },
+  { name: 'Belize', code: 'BZ' },
+  { name: 'Benin', code: 'BJ' },
+  { name: 'Bhutan', code: 'BT' },
+  { name: 'Bolivia', code: 'BO' },
+  { name: 'Bosnia and Herzegovina', code: 'BA' },
+  { name: 'Botswana', code: 'BW' },
+  { name: 'Brazil', code: 'BR' },
+  { name: 'Brunei', code: 'BN' },
+  { name: 'Bulgaria', code: 'BG' },
+  { name: 'Burkina Faso', code: 'BF' },
+  { name: 'Burundi', code: 'BI' },
+  { name: 'Cabo Verde', code: 'CV' },
+  { name: 'Cambodia', code: 'KH' },
+  { name: 'Cameroon', code: 'CM' },
+  { name: 'Canada', code: 'CA' },
+  { name: 'Central African Republic', code: 'CF' },
+  { name: 'Chad', code: 'TD' },
+  { name: 'Chile', code: 'CL' },
+  { name: 'China', code: 'CN' },
+  { name: 'Colombia', code: 'CO' },
+  { name: 'Comoros', code: 'KM' },
+  { name: 'Congo', code: 'CG' },
+  { name: 'Costa Rica', code: 'CR' },
+  { name: 'Croatia', code: 'HR' },
+  { name: 'Cuba', code: 'CU' },
+  { name: 'Cyprus', code: 'CY' },
+  { name: 'Czech Republic', code: 'CZ' },
+  { name: 'Denmark', code: 'DK' },
+  { name: 'Djibouti', code: 'DJ' },
+  { name: 'Dominica', code: 'DM' },
+  { name: 'Dominican Republic', code: 'DO' },
+  { name: 'Ecuador', code: 'EC' },
+  { name: 'Egypt', code: 'EG' },
+  { name: 'El Salvador', code: 'SV' },
+  { name: 'Equatorial Guinea', code: 'GQ' },
+  { name: 'Eritrea', code: 'ER' },
+  { name: 'Estonia', code: 'EE' },
+  { name: 'Eswatini', code: 'SZ' },
+  { name: 'Ethiopia', code: 'ET' },
+  { name: 'Fiji', code: 'FJ' },
+  { name: 'Finland', code: 'FI' },
+  { name: 'France', code: 'FR' },
+  { name: 'Gabon', code: 'GA' },
+  { name: 'Gambia', code: 'GM' },
+  { name: 'Georgia', code: 'GE' },
+  { name: 'Germany', code: 'DE' },
+  { name: 'Ghana', code: 'GH' },
+  { name: 'Greece', code: 'GR' },
+  { name: 'Grenada', code: 'GD' },
+  { name: 'Guatemala', code: 'GT' },
+  { name: 'Guinea', code: 'GN' },
+  { name: 'Guinea-Bissau', code: 'GW' },
+  { name: 'Guyana', code: 'GY' },
+  { name: 'Haiti', code: 'HT' },
+  { name: 'Honduras', code: 'HN' },
+  { name: 'Hungary', code: 'HU' },
+  { name: 'Iceland', code: 'IS' },
+  { name: 'India', code: 'IN' },
+  { name: 'Indonesia', code: 'ID' },
+  { name: 'Iran', code: 'IR' },
+  { name: 'Iraq', code: 'IQ' },
+  { name: 'Ireland', code: 'IE' },
+  { name: 'Israel', code: 'IL' },
+  { name: 'Italy', code: 'IT' },
+  { name: 'Jamaica', code: 'JM' },
+  { name: 'Japan', code: 'JP' },
+  { name: 'Jordan', code: 'JO' },
+  { name: 'Kazakhstan', code: 'KZ' },
+  { name: 'Kenya', code: 'KE' },
+  { name: 'Kiribati', code: 'KI' },
+  { name: 'Kuwait', code: 'KW' },
+  { name: 'Kyrgyzstan', code: 'KG' },
+  { name: 'Laos', code: 'LA' },
+  { name: 'Latvia', code: 'LV' },
+  { name: 'Lebanon', code: 'LB' },
+  { name: 'Lesotho', code: 'LS' },
+  { name: 'Liberia', code: 'LR' },
+  { name: 'Libya', code: 'LY' },
+  { name: 'Liechtenstein', code: 'LI' },
+  { name: 'Lithuania', code: 'LT' },
+  { name: 'Luxembourg', code: 'LU' },
+  { name: 'Madagascar', code: 'MG' },
+  { name: 'Malawi', code: 'MW' },
+  { name: 'Malaysia', code: 'MY' },
+  { name: 'Maldives', code: 'MV' },
+  { name: 'Mali', code: 'ML' },
+  { name: 'Malta', code: 'MT' },
+  { name: 'Marshall Islands', code: 'MH' },
+  { name: 'Mauritania', code: 'MR' },
+  { name: 'Mauritius', code: 'MU' },
+  { name: 'Mexico', code: 'MX' },
+  { name: 'Micronesia', code: 'FM' },
+  { name: 'Moldova', code: 'MD' },
+  { name: 'Monaco', code: 'MC' },
+  { name: 'Mongolia', code: 'MN' },
+  { name: 'Montenegro', code: 'ME' },
+  { name: 'Morocco', code: 'MA' },
+  { name: 'Mozambique', code: 'MZ' },
+  { name: 'Myanmar', code: 'MM' },
+  { name: 'Namibia', code: 'NA' },
+  { name: 'Nauru', code: 'NR' },
+  { name: 'Nepal', code: 'NP' },
+  { name: 'Netherlands', code: 'NL' },
+  { name: 'New Zealand', code: 'NZ' },
+  { name: 'Nicaragua', code: 'NI' },
+  { name: 'Niger', code: 'NE' },
+  { name: 'Nigeria', code: 'NG' },
+  { name: 'North Korea', code: 'KP' },
+  { name: 'North Macedonia', code: 'MK' },
+  { name: 'Norway', code: 'NO' },
+  { name: 'Oman', code: 'OM' },
+  { name: 'Pakistan', code: 'PK' },
+  { name: 'Palau', code: 'PW' },
+  { name: 'Panama', code: 'PA' },
+  { name: 'Papua New Guinea', code: 'PG' },
+  { name: 'Paraguay', code: 'PY' },
+  { name: 'Peru', code: 'PE' },
+  { name: 'Philippines', code: 'PH' },
+  { name: 'Poland', code: 'PL' },
+  { name: 'Portugal', code: 'PT' },
+  { name: 'Qatar', code: 'QA' },
+  { name: 'Romania', code: 'RO' },
+  { name: 'Russia', code: 'RU' },
+  { name: 'Rwanda', code: 'RW' },
+  { name: 'Saint Kitts and Nevis', code: 'KN' },
+  { name: 'Saint Lucia', code: 'LC' },
+  { name: 'Saint Vincent and the Grenadines', code: 'VC' },
+  { name: 'Samoa', code: 'WS' },
+  { name: 'San Marino', code: 'SM' },
+  { name: 'Sao Tome and Principe', code: 'ST' },
+  { name: 'Saudi Arabia', code: 'SA' },
+  { name: 'Senegal', code: 'SN' },
+  { name: 'Serbia', code: 'RS' },
+  { name: 'Seychelles', code: 'SC' },
+  { name: 'Sierra Leone', code: 'SL' },
+  { name: 'Singapore', code: 'SG' },
+  { name: 'Slovakia', code: 'SK' },
+  { name: 'Slovenia', code: 'SI' },
+  { name: 'Solomon Islands', code: 'SB' },
+  { name: 'Somalia', code: 'SO' },
+  { name: 'South Africa', code: 'ZA' },
+  { name: 'South Korea', code: 'KR' },
+  { name: 'South Sudan', code: 'SS' },
+  { name: 'Spain', code: 'ES' },
+  { name: 'Sri Lanka', code: 'LK' },
+  { name: 'Sudan', code: 'SD' },
+  { name: 'Suriname', code: 'SR' },
+  { name: 'Sweden', code: 'SE' },
+  { name: 'Switzerland', code: 'CH' },
+  { name: 'Syria', code: 'SY' },
+  { name: 'Taiwan', code: 'TW' },
+  { name: 'Tajikistan', code: 'TJ' },
+  { name: 'Tanzania', code: 'TZ' },
+  { name: 'Thailand', code: 'TH' },
+  { name: 'Timor-Leste', code: 'TL' },
+  { name: 'Togo', code: 'TG' },
+  { name: 'Tonga', code: 'TO' },
+  { name: 'Trinidad and Tobago', code: 'TT' },
+  { name: 'Tunisia', code: 'TN' },
+  { name: 'Turkmenistan', code: 'TM' },
+  { name: 'Tuvalu', code: 'TV' },
+  { name: 'Uganda', code: 'UG' },
+  { name: 'Ukraine', code: 'UA' },
+  { name: 'United Arab Emirates', code: 'AE' },
+  { name: 'United Kingdom', code: 'GB' },
+  { name: 'Uruguay', code: 'UY' },
+  { name: 'Uzbekistan', code: 'UZ' },
+  { name: 'Vanuatu', code: 'VU' },
+  { name: 'Vatican City', code: 'VA' },
+  { name: 'Venezuela', code: 'VE' },
+  { name: 'Vietnam', code: 'VN' },
+  { name: 'Yemen', code: 'YE' },
+  { name: 'Zambia', code: 'ZM' },
+  { name: 'Zimbabwe', code: 'ZW' }
+]; 

package/src/store.ts

@@ -64,7 +64,7 @@ const storeCreator: StateCreator<AppStoreState> = (set, get) => ({
 
 export const useAppStore = createWithEqualityFn<AppStoreState>()(
   persist(storeCreator, {
-    name: 'appStore-9',
+    name: 'commonyx_appStore-10',
     storage: createJSONStorage(() => AsyncStorage),
     skipHydration: false,
     partialize: (state) => ({