@developer_tribe/react-native-comnyx 0.1.1 → 0.2.0

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',
+  },
+});

package/src/constants/translations.ts

@@ -0,0 +1,232 @@
+import type { LocalizationKeys } from '../types/LocalizationKeys';
+import type { LanguageCode } from '../types/Language';
+
+export const LocalizationList: Record<LanguageCode, LocalizationKeys> = {
+  en: {
+    'customer.form.title': 'Customer Information',
+    'customer.form.email': 'Email',
+    'customer.form.phone': 'Phone',
+    'customer.form.country': 'Country',
+    'customer.form.submit': 'Submit',
+    'customer.form.error': 'Please fill in all required fields',
+    'customer.form.instructions':
+      'Complete the form below to receive personalized service',
+    'customer.form.error.country': 'Country is required',
+    'customer.form.error.email': 'Valid email is required',
+    'customer.form.error.phone': 'Phone is required',
+    'customer.form.placeholder.name': 'Enter your name',
+    'customer.form.placeholder.country': 'Enter your country',
+    'customer.form.placeholder.email': 'Enter your email',
+    'customer.form.placeholder.phone': 'Enter your phone number',
+    'chat.messageInput.placeholder': 'Type your message...',
+    'app.initialization.required': 'Please initialize first',
+    'chat.load.error': 'Failed to load messages. Tap to retry',
+    'chat.init.error': 'Failed to initialize chat. Tap to retry',
+    'chat.empty': 'No messages yet',
+  },
+  tr: {
+    'customer.form.title': 'Müşteri Bilgileri',
+    'customer.form.email': 'E-posta',
+    'customer.form.phone': 'Telefon',
+    'customer.form.country': 'Ülke',
+    'customer.form.submit': 'Gönder',
+    '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.error.email': 'Geçerli bir e-posta adresi gerekli',
+    'customer.form.error.phone': 'Telefon alanı zorunludur',
+    'customer.form.placeholder.name': 'Adınızı girin',
+    'customer.form.placeholder.country': 'Ülkenizi girin',
+    'customer.form.placeholder.email': 'E-posta adresinizi girin',
+    'customer.form.placeholder.phone': 'Telefon numaranızı girin',
+    'chat.messageInput.placeholder': 'Mesajınızı yazın...',
+    'app.initialization.required': 'Lütfen önce başlatın',
+    'chat.load.error': 'Mesajlar yüklenemedi. Tekrar denemek için dokunun',
+    'chat.init.error': 'Sohbet başlatılamadı. Tekrar denemek için dokunun',
+    'chat.empty': 'Henüz mesaj yok',
+  },
+  es: {
+    'customer.form.title': 'Información del Cliente',
+    'customer.form.email': 'Correo Electrónico',
+    'customer.form.phone': 'Teléfono',
+    'customer.form.country': 'País',
+    'customer.form.submit': 'Enviar',
+    '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.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',
+    'customer.form.placeholder.country': 'Ingrese su país',
+    'customer.form.placeholder.email': 'Ingrese su correo electrónico',
+    'customer.form.placeholder.phone': 'Ingrese su número de teléfono',
+    'chat.messageInput.placeholder': 'Escribe tu mensaje...',
+    'app.initialization.required': 'Por favor inicialice primero',
+    'chat.load.error': 'Error al cargar mensajes. Toque para reintentar',
+    'chat.init.error': 'Error al inicializar el chat. Toque para reintentar',
+    'chat.empty': 'Aún no hay mensajes',
+  },
+  fr: {
+    'customer.form.title': 'Informations Client',
+    'customer.form.email': 'Email',
+    'customer.form.phone': 'Téléphone',
+    'customer.form.country': 'Pays',
+    'customer.form.submit': 'Envoyer',
+    '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.error.email': 'Un email valide est requis',
+    'customer.form.error.phone': 'Le téléphone est requis',
+    'customer.form.placeholder.name': 'Entrez votre nom',
+    'customer.form.placeholder.country': 'Entrez votre pays',
+    'customer.form.placeholder.email': 'Entrez votre email',
+    'customer.form.placeholder.phone': 'Entrez votre numéro de téléphone',
+    'chat.messageInput.placeholder': 'Tapez votre message...',
+    'app.initialization.required': "Veuillez initialiser d'abord",
+    'chat.load.error':
+      'Échec du chargement des messages. Appuyez pour réessayer',
+    'chat.init.error':
+      "Échec de l'initialisation du chat. Appuyez pour réessayer",
+    'chat.empty': 'Aucun message pour le moment',
+  },
+  de: {
+    'customer.form.title': 'Kundeninformationen',
+    'customer.form.email': 'E-Mail',
+    'customer.form.phone': 'Telefon',
+    'customer.form.country': 'Land',
+    'customer.form.submit': 'Absenden',
+    '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.error.country': 'Land ist erforderlich',
+    'customer.form.error.email': 'Eine gültige E-Mail-Adresse ist erforderlich',
+    'customer.form.error.phone': 'Telefon ist erforderlich',
+    'customer.form.placeholder.name': 'Geben Sie Ihren Namen ein',
+    'customer.form.placeholder.country': 'Geben Sie Ihr Land ein',
+    'customer.form.placeholder.email': 'Geben Sie Ihre E-Mail-Adresse ein',
+    'customer.form.placeholder.phone': 'Geben Sie Ihre Telefonnummer ein',
+    'chat.messageInput.placeholder': 'Geben Sie Ihre Nachricht ein...',
+    'app.initialization.required': 'Bitte initialisieren Sie zuerst',
+    'chat.load.error':
+      'Nachrichten konnten nicht geladen werden. Tippen Sie zum Wiederholen',
+    'chat.init.error':
+      'Chat konnte nicht initialisiert werden. Tippen Sie zum Wiederholen',
+    'chat.empty': 'Noch keine Nachrichten',
+  },
+  it: {
+    'customer.form.title': 'Informazioni Cliente',
+    'customer.form.email': 'Email',
+    'customer.form.phone': 'Telefono',
+    'customer.form.country': 'Paese',
+    'customer.form.submit': 'Invia',
+    '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.error.country': 'Il paese è obbligatorio',
+    'customer.form.error.email': "È richiesta un'email valida",
+    'customer.form.error.phone': 'Il telefono è obbligatorio',
+    'customer.form.placeholder.name': 'Inserisci il tuo nome',
+    'customer.form.placeholder.country': 'Inserisci il tuo paese',
+    'customer.form.placeholder.email': 'Inserisci la tua email',
+    'customer.form.placeholder.phone': 'Inserisci il tuo numero di telefono',
+    'chat.messageInput.placeholder': 'Scrivi il tuo messaggio...',
+    'app.initialization.required': 'Si prega di inizializzare prima',
+    'chat.load.error': 'Impossibile caricare i messaggi. Tocca per riprovare',
+    'chat.init.error': 'Impossibile inizializzare la chat. Tocca per riprovare',
+    'chat.empty': 'Ancora nessun messaggio',
+  },
+  pt: {
+    'customer.form.title': 'Informações do Cliente',
+    'customer.form.email': 'Email',
+    'customer.form.phone': 'Telefone',
+    'customer.form.country': 'País',
+    'customer.form.submit': 'Enviar',
+    '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.error.email': 'Um email válido é obrigatório',
+    'customer.form.error.phone': 'O telefone é obrigatório',
+    'customer.form.placeholder.name': 'Digite seu nome',
+    'customer.form.placeholder.country': 'Digite seu país',
+    'customer.form.placeholder.email': 'Digite seu email',
+    'customer.form.placeholder.phone': 'Digite seu número de telefone',
+    'chat.messageInput.placeholder': 'Digite sua mensagem...',
+    'app.initialization.required': 'Por favor, inicialize primeiro',
+    'chat.load.error':
+      'Falha ao carregar mensagens. Toque para tentar novamente',
+    'chat.init.error':
+      'Falha ao inicializar o chat. Toque para tentar novamente',
+    'chat.empty': 'Ainda não há mensagens',
+  },
+  ru: {
+    'customer.form.title': 'Информация о клиенте',
+    'customer.form.email': 'Электронная почта',
+    'customer.form.phone': 'Телефон',
+    'customer.form.country': 'Страна',
+    'customer.form.submit': 'Отправить',
+    'customer.form.error': 'Пожалуйста, заполните все обязательные поля',
+    'customer.form.instructions':
+      'Заполните форму ниже, чтобы получить персонализированное обслуживание',
+    'customer.form.error.country': 'Страна обязательна',
+    'customer.form.error.email': 'Требуется действительный email',
+    'customer.form.error.phone': 'Телефон обязателен',
+    'customer.form.placeholder.name': 'Введите ваше имя',
+    'customer.form.placeholder.country': 'Введите вашу страну',
+    'customer.form.placeholder.email': 'Введите ваш email',
+    'customer.form.placeholder.phone': 'Введите ваш номер телефона',
+    'chat.messageInput.placeholder': 'Введите ваше сообщение...',
+    'app.initialization.required': 'Пожалуйста, сначала инициализируйте',
+    'chat.load.error':
+      'Не удалось загрузить сообщения. Нажмите, чтобы повторить попытку',
+    'chat.init.error':
+      'Не удалось инициализировать чат. Нажмите, чтобы повторить попытку',
+    'chat.empty': 'Пока нет сообщений',
+  },
+  ja: {
+    'customer.form.title': '顧客情報',
+    'customer.form.email': 'メールアドレス',
+    'customer.form.phone': '電話番号',
+    'customer.form.country': '国',
+    'customer.form.submit': '送信',
+    'customer.form.error': '必須項目をすべて入力してください',
+    'customer.form.instructions':
+      'パーソナライズされたサービスを受けるには、以下のフォームに記入してください',
+    'customer.form.error.country': '国は必須です',
+    'customer.form.error.email': '有効なメールアドレスが必要です',
+    'customer.form.error.phone': '電話番号は必須です',
+    'customer.form.placeholder.name': 'お名前を入力してください',
+    'customer.form.placeholder.country': '国を入力してください',
+    'customer.form.placeholder.email': 'メールアドレスを入力してください',
+    'customer.form.placeholder.phone': '電話番号を入力してください',
+    'chat.messageInput.placeholder': 'メッセージを入力...',
+    'app.initialization.required': 'まず初期化してください',
+    'chat.load.error': 'メッセージの読み込みに失敗しました。タップして再試行',
+    'chat.init.error': 'チャットの初期化に失敗しました。タップして再試行',
+    'chat.empty': 'まだメッセージはありません',
+  },
+  zh: {
+    'customer.form.title': '客户信息',
+    'customer.form.email': '电子邮件',
+    'customer.form.phone': '电话',
+    'customer.form.country': '国家',
+    'customer.form.submit': '提交',
+    'customer.form.error': '请填写所有必填字段',
+    'customer.form.instructions': '填写以下表格以获取个性化服务',
+    'customer.form.error.country': '国家为必填项',
+    'customer.form.error.email': '需要有效的电子邮件',
+    'customer.form.error.phone': '电话为必填项',
+    'customer.form.placeholder.name': '请输入您的姓名',
+    'customer.form.placeholder.country': '请输入您的国家',
+    'customer.form.placeholder.email': '请输入您的电子邮件',
+    'customer.form.placeholder.phone': '请输入您的电话号码',
+    'chat.messageInput.placeholder': '输入您的消息...',
+    'app.initialization.required': '请先初始化',
+    'chat.load.error': '加载消息失败。点击重试',
+    'chat.init.error': '初始化聊天失败。点击重试',
+    'chat.empty': '暂无消息',
+  },
+} as const;