@developer_tribe/react-native-comnyx 0.3.2 → 0.3.4

package/src/components/CustomerForm.tsx

@@ -1,12 +1,11 @@
 import {
   View,
   TextInput,
-  StyleSheet,
   TouchableOpacity,
-  Modal,
-  FlatList,
   Pressable,
   Keyboard,
+  Image,
+  ScrollView,
 } from 'react-native';
 import { useForm, Controller } from 'react-hook-form';
 import { useAppStore } from '../store';
@@ -14,8 +13,9 @@ import { createCustomer } from '../api';
 import { AppText } from './AppText';
 import { useLocalize } from '../hooks/useLocalize';
 import { useThemeColors } from '../hooks/useThemeColors';
+import CustomPopup from './CustomAlert';
 import { useState } from 'react';
-import { countries } from '../constants/countries';
+import { ScaledSheet } from './ScaledSheet';
 
 interface CustomerFormData {
   name: string;
@@ -24,7 +24,15 @@ interface CustomerFormData {
   phone: string;
 }
 
-export function CustomerForm() {
+const closeIcon = require('../assets/x-close.png');
+const infoIcon = require('../assets/info-circle.png');
+
+interface InfoButtonProps {
+  title: string;
+  description: string;
+}
+
+export function CustomerForm({ onBack }: { onBack: () => void }) {
   const {
     control,
     handleSubmit,
@@ -32,14 +40,18 @@ export function CustomerForm() {
   } = useForm<CustomerFormData>();
   const themeColors = useThemeColors();
   const localize = useLocalize();
-  const [isCountryModalVisible, setIsCountryModalVisible] = useState(false);
 
   const inputStyle = {
     ...styles.input,
     color: themeColors.text,
-    borderColor: themeColors.border,
+    borderColor: themeColors.gainsboro,
     backgroundColor: themeColors.background,
   };
+  const [popupVisible, setPopupVisible] = useState(false);
+  const [popupContent, setPopupContent] = useState({
+    title: '',
+    description: 'null',
+  });
 
   const onSubmit = async (data: CustomerFormData) => {
     try {
@@ -61,265 +73,273 @@ export function CustomerForm() {
     }
   };
 
+  const showErrorPopup = (title: string, description: string) => {
+    setPopupVisible(true);
+    setPopupContent({
+      title: title ?? 'customer.form.failed.name',
+      description: description ?? 'customer.form.failed.name.desc',
+    });
+  };
+
+  // eslint-disable-next-line react/no-unstable-nested-components
+  const InfoButton = ({ title, description }: InfoButtonProps) => {
+    return (
+      <TouchableOpacity
+        onPress={() => showErrorPopup(title, description)}
+        activeOpacity={1}
+      >
+        <Image source={infoIcon} style={styles.infoIcon} />
+      </TouchableOpacity>
+    );
+  };
+
   return (
     <Pressable
       style={[styles.container, { backgroundColor: themeColors.background }]}
       onPress={Keyboard.dismiss}
     >
-      <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={{
-          maxLength: {
-            value: 30,
-            message: localize('customer.form.validation.name.maxLength'),
-          },
-        }}
-        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={errors.name.message ? undefined : 'customer.form.error'}
-          style={[styles.error, { color: themeColors.error }]}
+      <ScrollView
+        contentContainerStyle={styles.scrollContainer}
+        keyboardShouldPersistTaps="handled"
+      >
+        <View
+          style={[
+            styles.container,
+            { backgroundColor: themeColors.background },
+          ]}
         >
-          {errors.name.message}
-        </AppText>
-      )}
-
-      <Controller
-        control={control}
-        rules={{
-          maxLength: {
-            value: 2,
-            message: localize('customer.form.validation.country.maxLength'),
-          },
-        }}
-        render={({ field: { onChange, value } }) => (
-          <>
-            <Pressable
+          <TouchableOpacity
+            style={[
+              styles.iconContainer,
+              { backgroundColor: themeColors.dark_background },
+            ]}
+            onPress={onBack}
+          >
+            <Image
+              source={closeIcon}
+              style={[styles.closeIcon, { tintColor: themeColors.light_text }]}
+            />
+          </TouchableOpacity>
+          <View
+            style={[
+              styles.headerContainer,
+              { backgroundColor: themeColors.dark_background },
+            ]}
+          >
+            <AppText
+              localization="customer.form.title"
+              style={[styles.headerText, { color: themeColors.gainsboro }]}
+            />
+            <AppText
+              localization="customer.form.instructions"
+              style={[styles.headerText, { color: themeColors.light_text }]}
+            />
+          </View>
+          <View style={styles.titleContainer}>
+            <AppText
               style={[
-                styles.input,
+                styles.title,
                 {
-                  borderColor: themeColors.border,
-                  backgroundColor: themeColors.background,
-                  justifyContent: 'center',
+                  color: themeColors.slate,
                 },
               ]}
-              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)}
+              {localize('customer.form.title')}
+            </AppText>
+            <Controller
+              control={control}
+              rules={{
+                maxLength: {
+                  value: 30,
+                  message: localize('customer.form.validation.name.maxLength'),
+                },
+              }}
+              render={({ field: { onChange, value } }) => (
+                <View
+                  style={[
+                    styles.inputContainer,
+                    { borderBottomColor: themeColors.gainsboro },
+                  ]}
+                >
+                  <TextInput
+                    style={inputStyle}
+                    placeholder={localize('customer.form.placeholder.name')}
+                    placeholderTextColor={themeColors.gainsboro}
+                    value={value}
+                    onChangeText={onChange}
+                  />
+                  {errors.name && (
+                    <InfoButton
+                      title={'customer.form.failed.name'}
+                      description={'customer.form.failed.name.desc'}
+                    />
+                  )}
+                </View>
+              )}
+              name="name"
+            />
+            <AppText
+              style={[
+                styles.title,
+                {
+                  color: themeColors.slate,
+                },
+              ]}
             >
-              <View
-                style={[
-                  styles.modalContainer,
-                  { backgroundColor: 'rgba(0, 0, 0, 0.5)' },
-                ]}
-              >
+              Email
+            </AppText>
+            <Controller
+              control={control}
+              rules={{
+                pattern: {
+                  value: /^\S+@\S+$/i,
+                  message: localize('customer.form.validation.email.pattern'),
+                },
+              }}
+              render={({ field: { onChange, value } }) => (
                 <View
                   style={[
-                    styles.modalContent,
-                    { backgroundColor: themeColors.background },
+                    styles.inputContainer,
+                    { borderBottomColor: themeColors.gainsboro },
                   ]}
                 >
-                  <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>
-                    )}
+                  <TextInput
+                    style={inputStyle}
+                    placeholder={localize('customer.form.placeholder.email')}
+                    placeholderTextColor={themeColors.gainsboro}
+                    value={value}
+                    onChangeText={onChange}
+                    keyboardType="email-address"
                   />
+                  {errors.email && (
+                    <InfoButton
+                      title={'customer.form.failed.email'}
+                      description={'customer.form.failed.email.desc'}
+                    />
+                  )}
                 </View>
-              </View>
-            </Modal>
-          </>
-        )}
-        name="country"
-      />
-      {errors.country && (
-        <AppText
-          localization={
-            errors.country.message ? undefined : 'customer.form.error'
-          }
-          style={[styles.error, { color: themeColors.error }]}
-        >
-          {errors.country.message}
-        </AppText>
-      )}
-
-      <Controller
-        control={control}
-        rules={{
-          pattern: {
-            value: /^\S+@\S+$/i,
-            message: localize('customer.form.validation.email.pattern'),
-          },
+              )}
+              name="email"
+            />
+            <AppText
+              style={[
+                styles.title,
+                {
+                  color: themeColors.slate,
+                },
+              ]}
+            >
+              Phone
+            </AppText>
+            <Controller
+              control={control}
+              rules={{
+                validate: (value) => {
+                  if (!value) return true;
+                  return (
+                    typeof value === 'string' ||
+                    localize('customer.form.validation.phone.invalid')
+                  );
+                },
+              }}
+              render={({ field: { onChange, value } }) => (
+                <View
+                  style={[
+                    styles.inputContainer,
+                    { borderBottomColor: themeColors.gainsboro },
+                  ]}
+                >
+                  <TextInput
+                    style={inputStyle}
+                    placeholder={localize('customer.form.placeholder.phone')}
+                    placeholderTextColor={themeColors.gainsboro}
+                    value={value}
+                    onChangeText={onChange}
+                    keyboardType="phone-pad"
+                  />
+                  {errors.phone && (
+                    <InfoButton
+                      title={'customer.form.failed.phone'}
+                      description={'customer.form.failed.phone.desc'}
+                    />
+                  )}
+                </View>
+              )}
+              name="phone"
+            />
+          </View>
+          <TouchableOpacity
+            style={[
+              styles.button,
+              { backgroundColor: themeColors.dark_background },
+            ]}
+            onPress={handleSubmit(onSubmit)}
+          >
+            <AppText
+              localization="customer.form.submit"
+              style={[styles.buttonText, { color: themeColors.light_text }]}
+            />
+          </TouchableOpacity>
+        </View>
+      </ScrollView>
+      <CustomPopup
+        isVisible={popupVisible}
+        onClose={() => setPopupVisible(false)}
+        title={popupContent.title}
+        description={popupContent.description}
+        onCancelButton={() => {
+          setPopupVisible(false);
+          setPopupContent({ title: '', description: '' });
         }}
-        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={
-            errors.email.message ? undefined : 'customer.form.error'
-          }
-          style={[styles.error, { color: themeColors.error }]}
-        >
-          {errors.email.message}
-        </AppText>
-      )}
-
-      <Controller
-        control={control}
-        rules={{
-          validate: (value) => {
-            if (!value) return true;
-            return (
-              typeof value === 'string' ||
-              localize('customer.form.validation.phone.invalid')
-            );
-          },
+        onResendButton={() => {
+          setPopupVisible(false);
         }}
-        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={
-            errors.phone.message ? undefined : 'customer.form.error'
-          }
-          style={[styles.error, { color: themeColors.error }]}
-        >
-          {errors.phone.message}
-        </AppText>
-      )}
-      <TouchableOpacity
-        style={[styles.button, { backgroundColor: themeColors.primary }]}
-        onPress={handleSubmit(onSubmit)}
-      >
-        <AppText
-          localization="customer.form.submit"
-          style={styles.buttonText}
-        />
-      </TouchableOpacity>
     </Pressable>
   );
 }
 
-const styles = StyleSheet.create({
+const styles = ScaledSheet.create({
   container: {
-    padding: 24,
+    paddingBottom: '24@vs',
     flex: 1,
-    justifyContent: 'center',
+    justifyContent: 'space-between',
   },
   headerContainer: {
-    marginBottom: 24,
+    paddingHorizontal: '24@s',
+    marginBottom: '24@vs',
+    paddingBottom: '32@vs',
   },
   headerText: {
-    fontSize: 15,
+    fontSize: '30@vs',
     fontWeight: '600',
-    textAlign: 'center',
+    textAlign: 'left',
   },
   input: {
-    height: 56,
-    borderWidth: 1,
-    borderRadius: 12,
-    paddingHorizontal: 16,
-    fontSize: 16,
+    borderRadius: '12@s',
+    paddingHorizontal: '12@s',
+    fontSize: '16@vs',
     backgroundColor: 'white',
-    marginBottom: 16,
+    paddingVertical: '8@vs',
+    width: '95%',
   },
   button: {
-    padding: 16,
-    borderRadius: 12,
+    paddingHorizontal: '16@s',
+    paddingVertical: '16@vs',
+    borderRadius: '12@s',
     alignItems: 'center',
-    marginTop: 24,
+    marginTop: '24@vs',
+    marginHorizontal: '20@s',
   },
   buttonText: {
     color: 'white',
-    fontSize: 16,
+    fontSize: '16@vs',
     fontWeight: '600',
   },
   error: {
-    fontSize: 14,
-    marginLeft: 16,
-    top: -16,
+    fontSize: '14@vs',
+    marginLeft: '16@s',
+    top: '-16@vs',
   },
   modalContainer: {
     flex: 1,
@@ -329,11 +349,39 @@ const styles = StyleSheet.create({
   modalContent: {
     width: '90%',
     height: '70%',
-    borderRadius: 12,
+    borderRadius: '12@s',
     overflow: 'hidden',
   },
   countryItem: {
-    padding: 16,
+    paddingHorizontal: '16@s',
+    paddingVertical: '16@vs',
+    borderBottomWidth: 1,
+  },
+  title: {
+    fontSize: '16@vs',
+  },
+  iconContainer: {
+    paddingHorizontal: '20@s',
+    paddingVertical: '10@vs',
+  },
+  inputContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
     borderBottomWidth: 1,
+    marginBottom: '8@vs',
+  },
+  closeIcon: {
+    width: '24@vs',
+    height: '24@vs',
+  },
+  scrollContainer: {
+    flexGrow: 1,
+    justifyContent: 'space-between',
+  },
+  infoIcon: {
+    width: '24@vs',
+    height: '24@vs',
+    tintColor: 'red',
   },
+  titleContainer: { marginHorizontal: '20@s', flex: 1 },
 });

package/src/components/EmptyList.tsx

@@ -1,6 +1,10 @@
-import { View, StyleSheet } from 'react-native';
+import { View, Image } from 'react-native';
 import { useThemeColors } from '../hooks/useThemeColors';
 import { AppText } from './AppText';
+import type { LocalizationKeys } from '../types/LocalizationKeys';
+import { ScaledSheet } from './ScaledSheet';
+
+const notificationIcon = require('../assets/message-notification-square.png');
 
 export function EmptyList() {
   const themeColors = useThemeColors();
@@ -9,24 +13,44 @@ export function EmptyList() {
     <View
       style={[styles.container, { backgroundColor: themeColors.background }]}
     >
+      <Image
+        source={notificationIcon}
+        style={[styles.notificationIcon, { tintColor: themeColors.text }]}
+      />
+      <AppText
+        localization={'chat.empty.title' as keyof LocalizationKeys}
+        style={[styles.title, { color: themeColors.text }]}
+      />
       <AppText
-        localization="chat.empty"
-        style={[styles.text, { color: themeColors.text }]}
+        localization={'chat.empty.description' as keyof LocalizationKeys}
+        style={[styles.description, { color: themeColors.text }]}
       />
     </View>
   );
 }
 
-const styles = StyleSheet.create({
+const styles = ScaledSheet.create({
   container: {
     flex: 1,
     alignItems: 'center',
     justifyContent: 'center',
-    padding: 20,
+    paddingHorizontal: '20@s',
+    paddingVertical: '20@vs',
     transform: [{ rotate: '180deg' }], //TODO: inverted list
+    gap: 15,
   },
-  text: {
-    fontSize: 16,
+  title: {
+    fontSize: '18@vs',
     textAlign: 'center',
+    fontWeight: 600,
+  },
+  description: {
+    fontSize: '16@vs',
+    textAlign: 'center',
+    fontWeight: 400,
+  },
+  notificationIcon: {
+    width: '40@vs',
+    height: '40@vs',
   },
 });

package/src/components/InitFailed.tsx

@@ -1,6 +1,7 @@
-import { TouchableOpacity, View, StyleSheet } from 'react-native';
+import { TouchableOpacity, View } from 'react-native';
 import { useThemeColors } from '../hooks/useThemeColors';
 import { AppText } from './AppText';
+import { ScaledSheet } from './ScaledSheet';
 
 interface InitFailedProps {
   setInitFailed: (value: boolean) => void;
@@ -26,21 +27,23 @@ export function InitFailed({ setInitFailed }: InitFailedProps) {
   );
 }
 
-const styles = StyleSheet.create({
+const styles = ScaledSheet.create({
   container: {
     flex: 1,
     alignItems: 'center',
     justifyContent: 'center',
-    padding: 20,
+    paddingHorizontal: '20@s',
+    paddingVertical: '20@vs',
   },
   retryButton: {
-    padding: 15,
-    borderRadius: 8,
+    paddingHorizontal: '15@s',
+    paddingVertical: '15@vs',
+    borderRadius: '8@s',
     alignItems: 'center',
     justifyContent: 'center',
   },
   retryText: {
-    fontSize: 16,
+    fontSize: '16@vs',
     fontWeight: '500',
   },
 });