@transfergratis/react-native-sdk 0.1.4 → 0.1.6

package/src/components/KYCElements/CountrySelectionTemplate.tsx

@@ -1,94 +1,20 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import { View, Text, TouchableOpacity, StyleSheet, ScrollView } from 'react-native';
-import { TemplateComponent, CountrySelectionConfig, LocalizedText } from '../../types/KYC.types';
+import { TemplateComponent, CountrySelectionConfig, LocalizedText, Country } from '../../types/KYC.types';
+import { countryMapping } from '../../config/region_mapping';
+import { useTemplateKYCFlowContext } from '../../hooks/useTemplateKYCFlow';
+import { useI18n } from '../../hooks/useI18n';
+import { Button } from '../ui/Button';
+import { countryData } from '../../config/countriesData';
 
 interface CountrySelectionTemplateProps {
   component: TemplateComponent;
   value?: string;
-  onValueChange: (value: string) => void;
+  onValueChange: (value: Country) => void;
   error?: string;
   language?: string;
 }
 
-const countryData: Record<string, { name: string; flag: string }> = {
-  FR: { name: 'France', flag: '🇫🇷' },
-  CM: { name: 'Cameroun', flag: '🇨🇲' },
-  US: { name: 'États-Unis', flag: '🇺🇸' },
-  DE: { name: 'Allemagne', flag: '🇩🇪' },
-  BE: { name: 'Belgique', flag: '🇧🇪' },
-  LU: { name: 'Luxembourg', flag: '🇱🇺' },
-  IT: { name: 'Italie', flag: '🇮🇹' },
-  ES: { name: 'Espagne', flag: '🇪🇸' },
-  PT: { name: 'Portugal', flag: '🇵🇹' },
-  AT: { name: 'Autriche', flag: '🇦🇹' },
-  CH: { name: 'Suisse', flag: '🇨🇭' },
-  NL: { name: 'Pays-Bas', flag: '🇳🇱' },
-  CA: { name: 'Canada', flag: '🇨🇦' },
-  GB: { name: 'Royaume-Uni', flag: '🇬🇧' },
-  AU: { name: 'Australie', flag: '🇦🇺' },
-  JP: { name: 'Japon', flag: '🇯🇵' },
-  KR: { name: 'Corée du Sud', flag: '🇰🇷' },
-  SG: { name: 'Singapour', flag: '🇸🇬' },
-  HK: { name: 'Hong Kong', flag: '🇭🇰' },
-  AE: { name: 'Émirats Arabes Unis', flag: '🇦🇪' },
-  SA: { name: 'Arabie Saoudite', flag: '🇸🇦' },
-  QA: { name: 'Qatar', flag: '🇶🇦' },
-  KW: { name: 'Koweït', flag: '🇰🇼' },
-  BH: { name: 'Bahreïn', flag: '🇧🇭' },
-  OM: { name: 'Oman', flag: '🇴🇲' },
-  JO: { name: 'Jordanie', flag: '🇯🇴' },
-  LB: { name: 'Liban', flag: '🇱🇧' },
-  EG: { name: 'Égypte', flag: '🇪🇬' },
-  MA: { name: 'Maroc', flag: '🇲🇦' },
-  TN: { name: 'Tunisie', flag: '🇹🇳' },
-  DZ: { name: 'Algérie', flag: '🇩🇿' },
-  SN: { name: 'Sénégal', flag: '🇸🇳' },
-  CI: { name: 'Côte d\'Ivoire', flag: '🇨🇮' },
-  NG: { name: 'Nigeria', flag: '🇳🇬' },
-  KE: { name: 'Kenya', flag: '🇰🇪' },
-  ZA: { name: 'Afrique du Sud', flag: '🇿🇦' },
-  BR: { name: 'Brésil', flag: '🇧🇷' },
-  MX: { name: 'Mexique', flag: '🇲🇽' },
-  AR: { name: 'Argentine', flag: '🇦🇷' },
-  CL: { name: 'Chili', flag: '🇨🇱' },
-  PE: { name: 'Pérou', flag: '🇵🇪' },
-  CO: { name: 'Colombie', flag: '🇨🇴' },
-  VE: { name: 'Venezuela', flag: '🇻🇪' },
-  EC: { name: 'Équateur', flag: '🇪🇨' },
-  UY: { name: 'Uruguay', flag: '🇺🇾' },
-  PY: { name: 'Paraguay', flag: '🇵🇾' },
-  BO: { name: 'Bolivie', flag: '🇧🇴' },
-  IN: { name: 'Inde', flag: '🇮🇳' },
-  CN: { name: 'Chine', flag: '🇨🇳' },
-  TH: { name: 'Thaïlande', flag: '🇹🇭' },
-  VN: { name: 'Vietnam', flag: '🇻🇳' },
-  ID: { name: 'Indonésie', flag: '🇮🇩' },
-  MY: { name: 'Malaisie', flag: '🇲🇾' },
-  PH: { name: 'Philippines', flag: '🇵🇭' },
-  TR: { name: 'Turquie', flag: '🇹🇷' },
-  IL: { name: 'Israël', flag: '🇮🇱' },
-  RU: { name: 'Russie', flag: '🇷🇺' },
-  UA: { name: 'Ukraine', flag: '🇺🇦' },
-  PL: { name: 'Pologne', flag: '🇵🇱' },
-  CZ: { name: 'République Tchèque', flag: '🇨🇿' },
-  HU: { name: 'Hongrie', flag: '🇭🇺' },
-  RO: { name: 'Roumanie', flag: '🇷🇴' },
-  BG: { name: 'Bulgarie', flag: '🇧🇬' },
-  HR: { name: 'Croatie', flag: '🇭🇷' },
-  SI: { name: 'Slovénie', flag: '🇸🇮' },
-  SK: { name: 'Slovaquie', flag: '🇸🇰' },
-  LT: { name: 'Lituanie', flag: '🇱🇹' },
-  LV: { name: 'Lettonie', flag: '🇱🇻' },
-  EE: { name: 'Estonie', flag: '🇪🇪' },
-  FI: { name: 'Finlande', flag: '🇫🇮' },
-  SE: { name: 'Suède', flag: '🇸🇪' },
-  NO: { name: 'Norvège', flag: '🇳🇴' },
-  DK: { name: 'Danemark', flag: '🇩🇰' },
-  IS: { name: 'Islande', flag: '🇮🇸' },
-  IE: { name: 'Irlande', flag: '🇮🇪' },
-  NZ: { name: 'Nouvelle-Zélande', flag: '🇳🇿' },
-};
-
 export const CountrySelectionTemplate: React.FC<CountrySelectionTemplateProps> = ({
   component,
   value,
@@ -96,9 +22,15 @@ export const CountrySelectionTemplate: React.FC<CountrySelectionTemplateProps> =
   error,
   language = 'en',
 }) => {
+  const { t } = useI18n();
   const config = component.config as CountrySelectionConfig;
-  const allowedCountries = config.allowed_countries || Object.keys(countryData);
-  const defaultCountry = config.default_country || 'FR';
+  const allowedCountries = (config.allowed_countries || Object.keys(countryData));
+  const defaultCountry = config.default_country || 'CM';
+  const { actions, state} = useTemplateKYCFlowContext();
+
+  console.log({ language }, state.currentLanguage);
+
+  const [selectedCountry, setSelectedCountry] = useState<Country>({ code: defaultCountry, ...countryData[defaultCountry] });
 
   const getLocalizedText = (text: LocalizedText): string => {
     return text[language] || text.en || '';
@@ -114,68 +46,110 @@ export const CountrySelectionTemplate: React.FC<CountrySelectionTemplateProps> =
     }))
     .sort((a, b) => a.name.localeCompare(b.name));
 
+    useEffect(() => {
+      if (selectedCountry) {
+        const mapping = selectedCountry.code ? countryMapping[selectedCountry.code as keyof typeof countryMapping] : undefined;
+        onValueChange({ ...selectedCountry, regionMapping: mapping });
+      }
+    }, [selectedCountry]);
+
   return (
-    <View style={styles.container}>
-      <Text style={styles.title}>{getLocalizedText(component.labels)}</Text>
-      <Text style={styles.description}>{getLocalizedText(component.instructions)}</Text>
-      
-      <ScrollView style={styles.countriesContainer} showsVerticalScrollIndicator={false}>
-        {filteredCountries.map((country) => (
-          <TouchableOpacity
-            key={country.code}
-            style={[
-              styles.countryOption,
-              selectedValue === country.code && styles.selectedCountryOption
-            ]}
-            onPress={() => onValueChange(country.code)}
-          >
-            <Text style={styles.countryFlag}>{country.flag}</Text>
-            <View style={styles.countryContent}>
-              <Text style={[
-                styles.countryName,
-                selectedValue === country.code && styles.selectedCountryName
-              ]}>
-                {country.name}
-              </Text>
-              <Text style={styles.countryCode}>{country.code}</Text>
-            </View>
-            {selectedValue === country.code && (
-              <View style={[
-                styles.checkmark,
-                { backgroundColor: component.ui.themeColor || '#2DBD60' }
-              ]}>
-                <Text style={styles.checkmarkText}>✓</Text>
+    <View style={styles.root}>
+      <View style={styles.container}>
+        <Text style={styles.title}>{getLocalizedText(component.labels as LocalizedText)}</Text>
+        <Text style={styles.description}>{getLocalizedText(component.instructions as LocalizedText)}</Text>
+
+        <ScrollView style={styles.countriesContainer} showsVerticalScrollIndicator={false}>
+          {filteredCountries.map((country) => (
+            <TouchableOpacity
+              key={country.code}
+              style={[
+                styles.countryOption,
+                selectedCountry.code === country.code && styles.selectedCountryOption
+              ]}
+              onPress={() => {
+                console.log({
+                  country, language
+                });
+
+                setSelectedCountry(country);
+              }}
+            >
+              <Text style={styles.countryFlag}>{country.flag}</Text>
+              <View style={styles.countryContent}>
+                <Text style={[
+                  styles.countryName,
+                  selectedCountry.code === country.code && styles.selectedCountryName
+                ]}>
+                  {state.currentLanguage === "en"? country.name_en: country.name}
+                </Text>
+                <Text style={styles.countryCode}>{country.code}</Text>
               </View>
-            )}
-          </TouchableOpacity>
-        ))}
-      </ScrollView>
+              {selectedCountry.code === country.code && (
+                <View style={[
+                  styles.checkmark,
+                  { backgroundColor: component.ui.themeColor as string || '#2DBD60' }
+                ]}>
+                  <Text style={styles.checkmarkText}>✓</Text>
+                </View>
+              )}
+            </TouchableOpacity>
+          ))}
+        </ScrollView>
+
+        {selectedCountry.code && (
+          <Button title={t('common.next')} onPress={() => {
+
+
+            const mapping = selectedCountry.code ? countryMapping[selectedCountry.code as keyof typeof countryMapping] : undefined;
+            onValueChange({ ...selectedCountry, regionMapping: mapping });
+            setTimeout(() => {
+              actions.nextComponent();
+            }, 500);
+          }}
+            variant="primary"
+            size="large"
+            fullWidth
+          />
+        )}
 
-      {selectedValue && (
-        <View style={styles.selectionInfo}>
-          <Text style={styles.selectionText}>
-            Pays sélectionné: {countryData[selectedValue]?.flag} {countryData[selectedValue]?.name}
-          </Text>
-        </View>
-      )}
+        {config.required && !selectedValue && (
+          <View style={styles.requiredContainer}>
 
-      {config.required && !selectedValue && (
-        <View style={styles.requiredContainer}>
-          <Text style={styles.requiredText}>⚠️ Veuillez sélectionner un pays</Text>
-        </View>
-      )}
 
-      {error && (
-        <Text style={styles.errorText}>{error}</Text>
-      )}
+            <Text style={styles.requiredText}>{
+              state.currentLanguage === "en" ? "⚠️  Please Select your country" : "⚠️ Veuillez sélectionner un pays"
+            }</Text>
+          </View>
+        )}
+
+        {error && (
+          <Text style={styles.errorText}>{error}</Text>
+        )}
+      </View>
     </View>
   );
 };
 
 const styles = StyleSheet.create({
-  container: {
+  root: {
     flex: 1,
-    padding: 16,
+    maxWidth: 760,
+    width: '100%',
+  },
+  container: {
+    backgroundColor: 'white',
+    margin: 10,
+    borderRadius: 10,
+    paddingVertical: 16,
+    paddingHorizontal: 16,
+    // shadow
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.35,
+    shadowRadius: 4.84,
+    elevation: 10,
+
   },
   title: {
     fontSize: 24,
@@ -192,7 +166,8 @@ const styles = StyleSheet.create({
     lineHeight: 22,
   },
   countriesContainer: {
-    flex: 1,
+    height: "80%",
+    maxHeight: 600,
   },
   countryOption: {
     flexDirection: 'row',

package/src/components/KYCElements/FileUploadTemplate.tsx

@@ -2,6 +2,7 @@ import React, { useState } from 'react';
 import { View, Text, TouchableOpacity, StyleSheet, ScrollView, Image, Alert } from 'react-native';
 import { useKYCStore } from '../../stores/kycStore';
 import NativeCameraModule from '../../modules/camera/NativeCameraModule';
+import { useI18n } from '../../hooks/useI18n';
 import { TemplateComponent, FileUploadConfig, LocalizedText } from '../../types/KYC.types';
 
 interface FileUploadTemplateProps {
@@ -26,6 +27,7 @@ export const FileUploadTemplate: React.FC<FileUploadTemplateProps> = ({
   error,
   language = 'en',
 }) => {
+  const { t } = useI18n();
   const [uploadedFiles, setUploadedFiles] = useState<UploadedFile[]>([]);
   const [isUploading, setIsUploading] = useState(false);
   const { setProcessing } = useKYCStore();
@@ -100,6 +102,7 @@ export const FileUploadTemplate: React.FC<FileUploadTemplateProps> = ({
     onValueChange(updatedFiles.map(file => file.uri));
   };
 
+
   const getFileIcon = (fileName: string) => {
     const extension = fileName.split('.').pop()?.toLowerCase();
     switch (extension) {
@@ -136,15 +139,15 @@ export const FileUploadTemplate: React.FC<FileUploadTemplateProps> = ({
 
   return (
     <View style={styles.container}>
-      <Text style={styles.title}>{getLocalizedText(component.labels)}</Text>
-      <Text style={styles.description}>{getLocalizedText(component.instructions)}</Text>
+      <Text style={styles.title}>{getLocalizedText(component.labels as LocalizedText)}</Text>
+      <Text style={styles.description}>{getLocalizedText(component.instructions as LocalizedText)}</Text>
       
       <View style={styles.uploadArea}>
         <TouchableOpacity 
           style={[
             styles.uploadButton,
             isUploading && styles.uploadButtonDisabled,
-            { borderColor: component.ui.themeColor || '#2DBD60' }
+            { borderColor: component.ui.themeColor as string || '#2DBD60' }
           ]}
           onPress={pickDocument}
           disabled={isUploading}
@@ -152,7 +155,7 @@ export const FileUploadTemplate: React.FC<FileUploadTemplateProps> = ({
           <Text style={styles.uploadIcon}>📁</Text>
           <Text style={[
             styles.uploadText,
-            { color: component.ui.themeColor || '#2DBD60' }
+            { color: component.ui.themeColor as string || '#2DBD60' }
           ]}>
             {isUploading ? 'Sélection en cours...' : 'Sélectionner des fichiers'}
           </Text>
@@ -198,9 +201,9 @@ export const FileUploadTemplate: React.FC<FileUploadTemplateProps> = ({
 
       {!hasFiles && (
         <View style={styles.emptyState}>
-          <Text style={styles.emptyStateText}>Aucun fichier sélectionné</Text>
+          <Text style={styles.emptyStateText}>{t('kyc.fileUpload.selectFile')}</Text>
           <Text style={styles.emptyStateSubtext}>
-            {isRequired ? 'Ce document est obligatoire' : 'Ce document est optionnel'}
+            {isRequired ? t('validation.required') : t('common.info')}
           </Text>
         </View>
       )}
@@ -210,11 +213,14 @@ export const FileUploadTemplate: React.FC<FileUploadTemplateProps> = ({
           <TouchableOpacity 
             style={[
               styles.primaryButton,
-              { backgroundColor: component.ui.themeColor || '#2DBD60' }
+              { backgroundColor: component.ui.themeColor as string || '#2DBD60' }
             ]}
+            onPress={() => {
+              onValueChange(uploadedFiles.map(file => file.uri));
+            }}
           >
             <Text style={styles.primaryButtonText}>
-              {getLocalizedText(component.ui.buttonText)}
+              {getLocalizedText(component.ui.buttonText as LocalizedText)}
             </Text>
           </TouchableOpacity>
         </View>