@developer_tribe/react-native-comnyx 0.3.9 → 0.3.11

package/src/components/CustomerForm.tsx

@@ -5,6 +5,7 @@ import {
   Keyboard,
   Image,
   ScrollView,
+  StatusBar,
 } from 'react-native';
 import { useForm, Controller } from 'react-hook-form';
 import { useAppStore } from '../store';
@@ -95,209 +96,222 @@ export function CustomerForm({ onBack }: { onBack: () => void }) {
   };
 
   return (
-    <TouchableOpacity
-      style={[styles.container, { backgroundColor: themeColors.background }]}
-      onPress={Keyboard.dismiss}
-      activeOpacity={activeOpacity}
-    >
-      <ScrollView
-        contentContainerStyle={styles.scrollContainer}
-        keyboardShouldPersistTaps="handled"
+    <>
+      <StatusBar
+        barStyle={'dark-content'}
+        backgroundColor={themeColors.dark_background}
+        animated={false}
+        translucent
+      />
+      <TouchableOpacity
+        style={[styles.container, { backgroundColor: themeColors.background }]}
+        onPress={Keyboard.dismiss}
+        activeOpacity={1}
       >
-        <View
-          style={[
-            styles.container,
-            { backgroundColor: themeColors.background },
-          ]}
+        <ScrollView
+          contentContainerStyle={styles.scrollContainer}
+          keyboardShouldPersistTaps="handled"
         >
-          <TouchableOpacity
-            activeOpacity={activeOpacity}
-            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 },
+              styles.container,
+              { backgroundColor: themeColors.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
+            <TouchableOpacity
+              activeOpacity={activeOpacity}
               style={[
-                styles.title,
-                {
-                  color: themeColors.slate,
-                },
+                styles.iconContainer,
+                { backgroundColor: themeColors.dark_background },
               ]}
+              onPress={onBack}
             >
-              {localize('customer.form.name')}
-            </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.ghost },
-                  ]}
-                >
-                  <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
+              <Image
+                source={closeIcon}
+                style={[
+                  styles.closeIcon,
+                  { tintColor: themeColors.light_text },
+                ]}
+              />
+            </TouchableOpacity>
+            <View
               style={[
-                styles.title,
-                {
-                  color: themeColors.slate,
-                },
+                styles.headerContainer,
+                { backgroundColor: themeColors.dark_background },
               ]}
             >
-              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.inputContainer,
-                    { borderBottomColor: themeColors.ghost },
-                  ]}
-                >
-                  <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'}
+              <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.title,
+                  {
+                    color: themeColors.slate,
+                  },
+                ]}
+              >
+                {localize('customer.form.name')}
+              </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.ghost },
+                    ]}
+                  >
+                    <TextInput
+                      style={inputStyle}
+                      placeholder={localize('customer.form.placeholder.name')}
+                      placeholderTextColor={themeColors.gainsboro}
+                      value={value}
+                      onChangeText={onChange}
                     />
-                  )}
-                </View>
-              )}
-              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.ghost },
-                  ]}
-                >
-                  <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'}
+                    {errors.name && (
+                      <InfoButton
+                        title={'customer.form.failed.name'}
+                        description={'customer.form.failed.name.desc'}
+                      />
+                    )}
+                  </View>
+                )}
+                name="name"
+              />
+              <AppText
+                style={[
+                  styles.title,
+                  {
+                    color: themeColors.slate,
+                  },
+                ]}
+              >
+                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.inputContainer,
+                      { borderBottomColor: themeColors.ghost },
+                    ]}
+                  >
+                    <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>
+                )}
+                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.ghost },
+                    ]}
+                  >
+                    <TextInput
+                      style={inputStyle}
+                      placeholder={localize('customer.form.placeholder.phone')}
+                      placeholderTextColor={themeColors.gainsboro}
+                      value={value}
+                      onChangeText={onChange}
+                      keyboardType="phone-pad"
                     />
-                  )}
-                </View>
-              )}
-              name="phone"
-            />
+                    {errors.phone && (
+                      <InfoButton
+                        title={'customer.form.failed.phone'}
+                        description={'customer.form.failed.phone.desc'}
+                      />
+                    )}
+                  </View>
+                )}
+                name="phone"
+              />
+            </View>
           </View>
-          <TouchableOpacity
-            activeOpacity={activeOpacity}
-            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: '' });
-        }}
-        buttonText={'customer.form.cancel' as keyof LocalizationKeys}
-      />
-    </TouchableOpacity>
+        </ScrollView>
+        <TouchableOpacity
+          activeOpacity={activeOpacity}
+          style={[
+            styles.button,
+            { backgroundColor: themeColors.dark_background },
+          ]}
+          onPress={handleSubmit(onSubmit)}
+        >
+          <AppText
+            localization="customer.form.submit"
+            style={[styles.buttonText, { color: themeColors.light_text }]}
+          />
+        </TouchableOpacity>
+        <CustomPopup
+          isVisible={popupVisible}
+          onClose={() => setPopupVisible(false)}
+          title={popupContent.title}
+          description={popupContent.description}
+          onCancelButton={() => {
+            setPopupVisible(false);
+            setPopupContent({ title: '', description: '' });
+          }}
+          buttonText={'customer.form.cancel' as keyof LocalizationKeys}
+        />
+      </TouchableOpacity>
+    </>
   );
 }
 

package/src/components/MessageItem.tsx

@@ -176,6 +176,7 @@ const styles = ScaledSheet.create({
     maxWidth: '80%',
     minHeight: 60,
     minWidth: 100,
+    marginVertical: '5@vs',
   },
   leftMessage: {
     alignSelf: 'flex-start',

package/src/constants/translations.ts

@@ -10,8 +10,7 @@ export const LocalizationList: Record<LanguageCode, LocalizationKeys> = {
     'customer.form.country': 'Country',
     'customer.form.submit': 'Contact Now',
     'customer.form.error': 'Please fill in all required fields',
-    'customer.form.instructions':
-      'Complete the form below to receive personalized service',
+    'customer.form.instructions': 'How Can We Help You?',
     'customer.form.error.country': 'Country is required',
     'customer.form.error.email': 'Valid email is required',
     'customer.form.error.phone': 'Phone is required',
@@ -57,9 +56,8 @@ export const LocalizationList: Record<LanguageCode, LocalizationKeys> = {
     'customer.form.country': 'Ülke',
     'customer.form.submit': 'Şimdi İletişime Geç',
     'customer.form.error': 'Lütfen tüm zorunlu alanları doldurun',
-    'customer.form.instructions':
-      'Kişiselleştirilmiş hizmet almak için aşağıdaki formu doldurun',
-    'customer.form.error.country': 'Ülke alanı zorunludur',
+    'customer.form.instructions': 'Size Nasıl Yardımcı Olabiliriz?',
+    'customer.form.error.country': 'Ülke zorunludur',
     'customer.form.error.email': 'Geçerli bir e-posta adresi gerekli',
     'customer.form.error.phone': 'Telefon alanı zorunludur',
     'customer.form.placeholder.name': 'Adınızı girin',
@@ -104,9 +102,8 @@ export const LocalizationList: Record<LanguageCode, LocalizationKeys> = {
     'customer.form.country': 'País',
     'customer.form.submit': 'Contactar Ahora',
     'customer.form.error': 'Por favor complete todos los campos requeridos',
-    'customer.form.instructions':
-      'Complete el formulario a continuación para recibir un servicio personalizado',
-    'customer.form.error.country': 'El país es requerido',
+    'customer.form.instructions': '¿Cómo Podemos Ayudarte?',
+    'customer.form.error.country': 'País es obligatorio',
     'customer.form.error.email': 'Se requiere un correo electrónico válido',
     'customer.form.error.phone': 'El teléfono es requerido',
     'customer.form.placeholder.name': 'Ingrese su nombre',
@@ -153,9 +150,8 @@ export const LocalizationList: Record<LanguageCode, LocalizationKeys> = {
     'customer.form.country': 'Pays',
     'customer.form.submit': 'Contacter Maintenant',
     'customer.form.error': 'Veuillez remplir tous les champs obligatoires',
-    'customer.form.instructions':
-      'Complétez le formulaire ci-dessous pour recevoir un service personnalisé',
-    'customer.form.error.country': 'Le pays est requis',
+    'customer.form.instructions': 'Comment Pouvons-Nous Vous Aider?',
+    'customer.form.error.country': 'Le pays est obligatoire',
     'customer.form.error.email': 'Un email valide est requis',
     'customer.form.error.phone': 'Le téléphone est requis',
     'customer.form.placeholder.name': 'Entrez votre nom',
@@ -203,8 +199,7 @@ export const LocalizationList: Record<LanguageCode, LocalizationKeys> = {
     'customer.form.country': 'Land',
     'customer.form.submit': 'Jetzt Kontaktieren',
     'customer.form.error': 'Bitte füllen Sie alle erforderlichen Felder aus',
-    'customer.form.instructions':
-      'Füllen Sie das folgende Formular aus, um einen personalisierten Service zu erhalten',
+    'customer.form.instructions': 'Wie Können Wir Ihnen Helfen?',
     'customer.form.error.country': 'Land ist erforderlich',
     'customer.form.error.email': 'Eine gültige E-Mail-Adresse ist erforderlich',
     'customer.form.error.phone': 'Telefon ist erforderlich',
@@ -254,8 +249,7 @@ export const LocalizationList: Record<LanguageCode, LocalizationKeys> = {
     'customer.form.country': 'Paese',
     'customer.form.submit': 'Contatta Ora',
     'customer.form.error': 'Si prega di compilare tutti i campi obbligatori',
-    'customer.form.instructions':
-      'Completa il modulo sottostante per ricevere un servizio personalizzato',
+    'customer.form.instructions': 'Come Possiamo Aiutarti?',
     'customer.form.error.country': 'Il paese è obbligatorio',
     'customer.form.error.email': "È richiesta un'email valida",
     'customer.form.error.phone': 'Il telefono è obbligatorio',
@@ -302,9 +296,8 @@ export const LocalizationList: Record<LanguageCode, LocalizationKeys> = {
     'customer.form.country': 'País',
     'customer.form.submit': 'Contactar Agora',
     'customer.form.error': 'Por favor, preencha todos os campos obrigatórios',
-    'customer.form.instructions':
-      'Complete o formulário abaixo para receber um serviço personalizado',
-    'customer.form.error.country': 'O país é obrigatório',
+    'customer.form.instructions': 'Como Podemos Ajudar Você?',
+    'customer.form.error.country': 'País é obrigatório',
     'customer.form.error.email': 'Um email válido é obrigatório',
     'customer.form.error.phone': 'O telefone é obrigatório',
     'customer.form.placeholder.name': 'Digite seu nome',
@@ -327,7 +320,7 @@ export const LocalizationList: Record<LanguageCode, LocalizationKeys> = {
     'customer.form.validation.name.maxLength':
       'O nome deve ter menos de 30 caracteres',
     'chat.empty.title': 'Você não tem mensagens.',
-    'chat.empty.description': 'As mensagens da equipe serão exibidas aqui.',
+    'chat.empty.description': 'As mensaggi da equipe serão exibidas aqui.',
     'chat.live': 'Chat ao Vivo',
     'chat.support-team': 'Equipe de Suporte',
     'customer.form.resend': 'Reenviar',
@@ -352,8 +345,7 @@ export const LocalizationList: Record<LanguageCode, LocalizationKeys> = {
     'customer.form.country': 'Страна',
     'customer.form.submit': 'Связаться Сейчас',
     'customer.form.error': 'Пожалуйста, заполните все обязательные поля',
-    'customer.form.instructions':
-      'Заполните форму ниже, чтобы получить персонализированное обслуживание',
+    'customer.form.instructions': 'Как Мы Можем Вам Помочь?',
     'customer.form.error.country': 'Страна обязательна',
     'customer.form.error.email': 'Требуется действительный email',
     'customer.form.error.phone': 'Телефон обязателен',
@@ -402,8 +394,7 @@ export const LocalizationList: Record<LanguageCode, LocalizationKeys> = {
     'customer.form.country': '国',
     'customer.form.submit': '今すぐ連絡する',
     'customer.form.error': '必須項目をすべて入力してください',
-    'customer.form.instructions':
-      'パーソナライズされたサービスを受けるには、以下のフォームに記入してください',
+    'customer.form.instructions': 'どのようにお手伝いできますか？',
     'customer.form.error.country': '国は必須です',
     'customer.form.error.email': '有効なメールアドレスが必要です',
     'customer.form.error.phone': '電話番号は必須です',
@@ -449,7 +440,7 @@ export const LocalizationList: Record<LanguageCode, LocalizationKeys> = {
     'customer.form.country': '国家',
     'customer.form.submit': '立即联系',
     'customer.form.error': '请填写所有必填字段',
-    'customer.form.instructions': '填写以下表格以获取个性化服务',
+    'customer.form.instructions': '我们能为您做什么？',
     'customer.form.error.country': '国家为必填项',
     'customer.form.error.email': '需要有效的电子邮件',
     'customer.form.error.phone': '电话为必填项',