@sanctum-key/react-native-sdk 1.0.9 → 1.0.10

package/src/components/KYCElements/CountrySelection.tsx

@@ -1,5 +1,12 @@
-import React from 'react';
-import { View, Text, TouchableOpacity, StyleSheet, ScrollView } from 'react-native';
+import React, { useState, useMemo } from 'react';
+import { 
+  View, 
+  Text, 
+  TouchableOpacity, 
+  StyleSheet, 
+  FlatList, 
+  TextInput 
+} from 'react-native';
 import { KYCElement, KYCElementOption } from '../../types/KYC.types';
 
 interface CountrySelectionProps {
@@ -9,18 +16,198 @@ interface CountrySelectionProps {
   error?: string;
 }
 
-const defaultCountries: KYCElementOption[] = [
+// 🌍 Comprehensive Global Country List
+const ALL_COUNTRIES: KYCElementOption[] = [
+  { value: 'AF', label: 'Afghanistan', icon: '🇦🇫' },
+  { value: 'AL', label: 'Albania', icon: '🇦🇱' },
+  { value: 'DZ', label: 'Algeria', icon: '🇩🇿' },
+  { value: 'AD', label: 'Andorra', icon: '🇦🇩' },
+  { value: 'AO', label: 'Angola', icon: '🇦🇴' },
+  { value: 'AR', label: 'Argentina', icon: '🇦🇷' },
+  { value: 'AM', label: 'Armenia', icon: '🇦🇲' },
+  { value: 'AU', label: 'Australia', icon: '🇦🇺' },
+  { value: 'AT', label: 'Austria', icon: '🇦🇹' },
+  { value: 'AZ', label: 'Azerbaijan', icon: '🇦🇿' },
+  { value: 'BS', label: 'Bahamas', icon: '🇧🇸' },
+  { value: 'BH', label: 'Bahrain', icon: '🇧🇭' },
+  { value: 'BD', label: 'Bangladesh', icon: '🇧🇩' },
+  { value: 'BB', label: 'Barbados', icon: '🇧🇧' },
+  { value: 'BY', label: 'Belarus', icon: '🇧🇾' },
+  { value: 'BE', label: 'Belgium', icon: '🇧🇪' },
+  { value: 'BZ', label: 'Belize', icon: '🇧🇿' },
+  { value: 'BJ', label: 'Benin', icon: '🇧🇯' },
+  { value: 'BT', label: 'Bhutan', icon: '🇧🇹' },
+  { value: 'BO', label: 'Bolivia', icon: '🇧🇴' },
+  { value: 'BA', label: 'Bosnia and Herzegovina', icon: '🇧🇦' },
+  { value: 'BW', label: 'Botswana', icon: '🇧🇼' },
+  { value: 'BR', label: 'Brazil', icon: '🇧🇷' },
+  { value: 'BN', label: 'Brunei', icon: '🇧🇳' },
+  { value: 'BG', label: 'Bulgaria', icon: '🇧🇬' },
+  { value: 'BF', label: 'Burkina Faso', icon: '🇧🇫' },
+  { value: 'BI', label: 'Burundi', icon: '🇧🇮' },
+  { value: 'CV', label: 'Cabo Verde', icon: '🇨🇻' },
+  { value: 'KH', label: 'Cambodia', icon: '🇰🇭' },
+  { value: 'CM', label: 'Cameroon', icon: '🇨🇲' },
+  { value: 'CA', label: 'Canada', icon: '🇨🇦' },
+  { value: 'CF', label: 'Central African Republic', icon: '🇨🇫' },
+  { value: 'TD', label: 'Chad', icon: '🇹🇩' },
+  { value: 'CL', label: 'Chile', icon: '🇨🇱' },
+  { value: 'CN', label: 'China', icon: '🇨🇳' },
+  { value: 'CO', label: 'Colombia', icon: '🇨🇴' },
+  { value: 'KM', label: 'Comoros', icon: '🇰🇲' },
+  { value: 'CG', label: 'Congo', icon: '🇨🇬' },
+  { value: 'CD', label: 'Congo (DRC)', icon: '🇨🇩' },
+  { value: 'CR', label: 'Costa Rica', icon: '🇨🇷' },
+  { value: 'HR', label: 'Croatia', icon: '🇭🇷' },
+  { value: 'CU', label: 'Cuba', icon: '🇨🇺' },
+  { value: 'CY', label: 'Croatia', icon: '🇨🇾' },
+  { value: 'CZ', label: 'Czechia', icon: '🇨🇿' },
+  { value: 'DK', label: 'Denmark', icon: '🇩🇰' },
+  { value: 'DJ', label: 'Djibouti', icon: '🇩🇯' },
+  { value: 'DM', label: 'Dominica', icon: '🇩🇲' },
+  { value: 'DO', label: 'Dominican Republic', icon: '🇩🇴' },
+  { value: 'EC', label: 'Ecuador', icon: '🇪🇨' },
+  { value: 'EG', label: 'Egypt', icon: '🇪🇬' },
+  { value: 'SV', label: 'El Salvador', icon: '🇸🇻' },
+  { value: 'GQ', label: 'Equatorial Guinea', icon: '🇬🇶' },
+  { value: 'ER', label: 'Eritrea', icon: '🇪🇷' },
+  { value: 'EE', label: 'Estonia', icon: '🇪🇪' },
+  { value: 'SZ', label: 'Eswatini', icon: '🇸🇿' },
+  { value: 'ET', label: 'Ethiopia', icon: '🇪🇹' },
+  { value: 'FJ', label: 'Fiji', icon: '🇫🇯' },
+  { value: 'FI', label: 'Finland', icon: '🇫🇮' },
   { value: 'FR', label: 'France', icon: '🇫🇷' },
-  { value: 'BE', label: 'Belgique', icon: '🇧🇪' },
+  { value: 'GA', label: 'Gabon', icon: '🇬🇦' },
+  { value: 'GM', label: 'Gambia', icon: '🇬🇲' },
+  { value: 'GE', label: 'Georgia', icon: '🇬🇪' },
+  { value: 'DE', label: 'Germany', icon: '🇩🇪' },
+  { value: 'GH', label: 'Ghana', icon: '🇬🇭' },
+  { value: 'GR', label: 'Greece', icon: '🇬🇷' },
+  { value: 'GD', label: 'Grenada', icon: '🇬🇩' },
+  { value: 'GT', label: 'Guatemala', icon: '🇬🇹' },
+  { value: 'GN', label: 'Guinea', icon: '🇬🇳' },
+  { value: 'GW', label: 'Guinea-Bissau', icon: '🇬🇼' },
+  { value: 'GY', label: 'Guyana', icon: '🇬🇾' },
+  { value: 'HT', label: 'Haiti', icon: '🇭🇹' },
+  { value: 'HN', label: 'Honduras', icon: '🇭🇳' },
+  { value: 'HU', label: 'Hungary', icon: '🇭🇺' },
+  { value: 'IS', label: 'Iceland', icon: '🇮🇸' },
+  { value: 'IN', label: 'India', icon: '🇮🇳' },
+  { value: 'ID', label: 'Indonesia', icon: '🇮🇩' },
+  { value: 'IR', label: 'Iran', icon: '🇮🇷' },
+  { value: 'IQ', label: 'Iraq', icon: '🇮🇶' },
+  { value: 'IE', label: 'Ireland', icon: '🇮🇪' },
+  { value: 'IL', label: 'Ireland', icon: '🇮🇪' },
+  { value: 'IT', label: 'Italy', icon: '🇮🇹' },
+  { value: 'JM', label: 'Jamaica', icon: '🇯🇲' },
+  { value: 'JP', label: 'Japan', icon: '🇯🇵' },
+  { value: 'JO', label: 'Jordan', icon: '🇯🇴' },
+  { value: 'KZ', label: 'Kazakhstan', icon: '🇰🇿' },
+  { value: 'KE', label: 'Kenya', icon: '🇰🇪' },
+  { value: 'KI', label: 'Kiribati', icon: '🇰🇮' },
+  { value: 'KP', label: 'Korea (North)', icon: '🇰🇵' },
+  { value: 'KR', label: 'Korea (South)', icon: '🇰🇷' },
+  { value: 'KW', label: 'Kuwait', icon: '🇰🇼' },
+  { value: 'KG', label: 'Kyrgyzstan', icon: '🇰🇬' },
+  { value: 'LA', label: 'Laos', icon: '🇱🇦' },
+  { value: 'LV', label: 'Latvia', icon: '🇱🇻' },
+  { value: 'LB', label: 'Lebanon', icon: '🇱🇧' },
+  { value: 'LS', label: 'Lesotho', icon: '🇱🇸' },
+  { value: 'LR', label: 'Liberia', icon: '🇱🇷' },
+  { value: 'LY', label: 'Libya', icon: '🇱🇾' },
+  { value: 'LI', label: 'Liechtenstein', icon: '🇱🇮' },
+  { value: 'LT', label: 'Lithuania', icon: '🇱🇹' },
   { value: 'LU', label: 'Luxembourg', icon: '🇱🇺' },
-  { value: 'DE', label: 'Allemagne', icon: '🇩🇪' },
-  { value: 'IT', label: 'Italie', icon: '🇮🇹' },
-  { value: 'ES', label: 'Espagne', icon: '🇪🇸' },
+  { value: 'MG', label: 'Madagascar', icon: '🇲🇬' },
+  { value: 'MW', label: 'Malawi', icon: '🇲🇼' },
+  { value: 'MY', label: 'Malaysia', icon: '🇲🇾' },
+  { value: 'MV', label: 'Maldives', icon: '🇲🇻' },
+  { value: 'ML', label: 'Mali', icon: '🇲🇱' },
+  { value: 'MT', label: 'Malta', icon: '🇲🇹' },
+  { value: 'MH', label: 'Marshall Islands', icon: '🇲🇭' },
+  { value: 'MR', label: 'Mauritania', icon: '🇲🇷' },
+  { value: 'MU', label: 'Mauritius', icon: '🇲🇺' },
+  { value: 'MX', label: 'Mexico', icon: '🇲🇽' },
+  { value: 'FM', label: 'Micronesia', icon: '🇫🇲' },
+  { value: 'MD', label: 'Moldova', icon: '🇲🇩' },
+  { value: 'MC', label: 'Monaco', icon: '🇲🇨' },
+  { value: 'MN', label: 'Mongolia', icon: '🇲🇳' },
+  { value: 'ME', label: 'Montenegro', icon: '🇲🇪' },
+  { value: 'MA', label: 'Morocco', icon: '🇲🇦' },
+  { value: 'MZ', label: 'Mozambique', icon: '🇲🇿' },
+  { value: 'MM', label: 'Myanmar', icon: '🇲🇲' },
+  { value: 'NA', label: 'Namibia', icon: '🇳🇦' },
+  { value: 'NR', label: 'Nauru', icon: '🇳🇷' },
+  { value: 'NP', label: 'Nepal', icon: '🇳🇵' },
+  { value: 'NL', label: 'Netherlands', icon: '🇳🇱' },
+  { value: 'NZ', label: 'New Zealand', icon: '🇳🇿' },
+  { value: 'NI', label: 'Nicaragua', icon: '🇳🇮' },
+  { value: 'NE', label: 'Niger', icon: '🇳🇪' },
+  { value: 'NG', label: 'Nigeria', icon: '🇳🇬' },
+  { value: 'MK', label: 'North Macedonia', icon: '🇲🇰' },
+  { value: 'NO', label: 'Norway', icon: '🇳🇴' },
+  { value: 'OM', label: 'Oman', icon: '🇴🇲' },
+  { value: 'PK', label: 'Pakistan', icon: '🇵🇰' },
+  { value: 'PW', label: 'Palau', icon: '🇵🇼' },
+  { value: 'PA', label: 'Panama', icon: '🇵🇦' },
+  { value: 'PG', label: 'Papua New Guinea', icon: '🇵🇬' },
+  { value: 'PY', label: 'Paraguay', icon: '🇵🇾' },
+  { value: 'PE', label: 'Peru', icon: '🇵🇪' },
+  { value: 'PH', label: 'Philippines', icon: '🇵🇭' },
+  { value: 'PL', label: 'Poland', icon: '🇵🇱' },
   { value: 'PT', label: 'Portugal', icon: '🇵🇹' },
-  { value: 'AT', label: 'Autriche', icon: '🇦🇹' },
-  { value: 'CH', label: 'Suisse', icon: '🇨🇭' },
-  { value: 'NL', label: 'Pays-Bas', icon: '🇳🇱' },
-  { value: 'OTHER', label: 'Autre', icon: '🌍' },
+  { value: 'QA', label: 'Qatar', icon: '🇶🇦' },
+  { value: 'RO', label: 'Romania', icon: '🇷🇴' },
+  { value: 'RU', label: 'Russia', icon: '🇷🇺' },
+  { value: 'RW', label: 'Rwanda', icon: '🇷🇼' },
+  { value: 'WS', label: 'Samoa', icon: '🇼🇸' },
+  { value: 'SM', label: 'San Marino', icon: '🇸🇲' },
+  { value: 'ST', label: 'Sao Tome and Principe', icon: '🇸🇹' },
+  { value: 'SA', label: 'Saudi Arabia', icon: '🇸🇦' },
+  { value: 'SN', label: 'Senegal', icon: '🇸🇳' },
+  { value: 'RS', label: 'Serbia', icon: '🇷🇸' },
+  { value: 'SC', label: 'Seychelles', icon: '🇸🇨' },
+  { value: 'SL', label: 'Sierra Leone', icon: '🇸🇱' },
+  { value: 'SG', label: 'Singapore', icon: '🇸🇬' },
+  { value: 'SK', label: 'Slovakia', icon: '🇸🇰' },
+  { value: 'SI', label: 'Slovenia', icon: '🇸🇮' },
+  { value: 'SB', label: 'Solomon Islands', icon: '🇸🇧' },
+  { value: 'SO', label: 'Somalia', icon: '🇸🇴' },
+  { value: 'ZA', label: 'South Africa', icon: '🇿🇦' },
+  { value: 'ES', label: 'Spain', icon: '🇪🇸' },
+  { value: 'LK', label: 'Sri Lanka', icon: '🇱🇰' },
+  { value: 'SD', label: 'Sudan', icon: '🇸🇩' },
+  { value: 'SR', label: 'Suriname', icon: '🇸🇷' },
+  { value: 'SE', label: 'Sweden', icon: '🇸🇪' },
+  { value: 'CH', label: 'Switzerland', icon: '🇨🇭' },
+  { value: 'SY', label: 'Syria', icon: '🇸🇾' },
+  { value: 'TW', label: 'Taiwan', icon: '🇹🇼' },
+  { value: 'TJ', label: 'Tajikistan', icon: '🇹🇯' },
+  { value: 'TZ', label: 'Tanzania', icon: '🇹🇿' },
+  { value: 'TH', label: 'Thailand', icon: '🇹🇭' },
+  { value: 'TL', label: 'Timor-Leste', icon: '🇹🇱' },
+  { value: 'TG', label: 'Togo', icon: '🇹🇬' },
+  { value: 'TO', label: 'Tonga', icon: '🇹🇴' },
+  { value: 'TT', label: 'Trinidad and Tobago', icon: '🇹🇹' },
+  { value: 'TN', label: 'Tunisia', icon: '🇹🇳' },
+  { value: 'TR', label: 'Turkey', icon: '🇹🇷' },
+  { value: 'TM', label: 'Turkmenistan', icon: '🇹🇲' },
+  { value: 'TV', label: 'Tuvalu', icon: '🇹🇻' },
+  { value: 'UG', label: 'Uganda', icon: '🇺🇬' },
+  { value: 'UA', label: 'Ukraine', icon: '🇺🇦' },
+  { value: 'AE', label: 'United Arab Emirates', icon: '🇦🇪' },
+  { value: 'GB', label: 'United Kingdom', icon: '🇬🇧' },
+  { value: 'US', label: 'United States', icon: '🇺🇸' },
+  { value: 'UY', label: 'Uruguay', icon: '🇺🇾' },
+  { value: 'UZ', label: 'Uzbekistan', icon: '🇺🇿' },
+  { value: 'VU', label: 'Vanuatu', icon: '🇻🇺' },
+  { value: 'VA', label: 'Vatican City', icon: '🇻🇦' },
+  { value: 'VE', label: 'Venezuela', icon: '🇻🇪' },
+  { value: 'VN', label: 'Vietnam', icon: '🇻🇳' },
+  { value: 'YE', label: 'Yemen', icon: '🇾🇪' },
+  { value: 'ZM', label: 'Zambia', icon: '🇿🇲' },
+  { value: 'ZW', label: 'Zimbabwe', icon: '🇿🇼' },
+  { value: 'OTHER', label: 'Other', icon: '🌍' },
 ];
 
 export const CountrySelection: React.FC<CountrySelectionProps> = ({
@@ -29,43 +216,80 @@ export const CountrySelection: React.FC<CountrySelectionProps> = ({
   onValueChange,
   error,
 }) => {
-  const countries = element.options || defaultCountries;
+  // Use the massive list if the backend didn't supply specific options
+  const countries = element.options && element.options.length > 0 ? element.options : ALL_COUNTRIES;
+  const [searchQuery, setSearchQuery] = useState('');
+
+  // Filter countries based on user input
+  const filteredCountries = useMemo(() => {
+    if (!searchQuery.trim()) return countries;
+    return countries.filter(country =>
+       country.label.toLowerCase().includes(searchQuery.toLowerCase())
+    );
+  }, [countries, searchQuery]);
+
+  // Extract the render logic into a separate function for FlatList performance
+  const renderCountry = ({ item: country }: { item: KYCElementOption }) => (
+    <TouchableOpacity
+      style={[
+        styles.option,
+        value === country.value && styles.selectedOption
+      ]}
+      onPress={() => onValueChange(country.value)}
+      activeOpacity={0.7}
+    >
+      <Text style={styles.optionIcon}>{country.icon}</Text>
+      <View style={styles.optionContent}>
+        <Text style={[
+          styles.optionLabel,
+          value === country.value && styles.selectedOptionLabel
+        ]}>
+          {country.label}
+        </Text>
+        {country.description && (
+          <Text style={styles.optionDescription}>{country.description}</Text>
+        )}
+      </View>
+      {value === country.value && (
+        <View style={styles.checkmark}>
+          <Text style={styles.checkmarkText}>✓</Text>
+        </View>
+      )}
+    </TouchableOpacity>
+  );
 
   return (
     <View style={styles.container}>
-      <Text style={styles.title}>{element.title}</Text>
-      <Text style={styles.description}>{element.description}</Text>
-      
-      <ScrollView style={styles.optionsContainer} showsVerticalScrollIndicator={false}>
-        {countries.map((country) => (
-          <TouchableOpacity
-            key={country.value}
-            style={[
-              styles.option,
-              value === country.value && styles.selectedOption
-            ]}
-            onPress={() => onValueChange(country.value)}
-          >
-            <Text style={styles.optionIcon}>{country.icon}</Text>
-            <View style={styles.optionContent}>
-              <Text style={[
-                styles.optionLabel,
-                value === country.value && styles.selectedOptionLabel
-              ]}>
-                {country.label}
-              </Text>
-              {country.description && (
-                <Text style={styles.optionDescription}>{country.description}</Text>
-              )}
-            </View>
-            {value === country.value && (
-              <View style={styles.checkmark}>
-                <Text style={styles.checkmarkText}>✓</Text>
-              </View>
-            )}
-          </TouchableOpacity>
-        ))}
-      </ScrollView>
+      <View style={styles.headerContainer}>
+        <Text style={styles.title}>{element.title}</Text>
+        <Text style={styles.description}>{element.description}</Text>
+        
+        {/* Search Bar for better UX */}
+        <TextInput
+          style={styles.searchInput}
+          placeholder="Rechercher un pays..."
+          placeholderTextColor="#999"
+          value={searchQuery}
+          onChangeText={setSearchQuery}
+          clearButtonMode="while-editing" // Adds a clear 'x' on iOS
+        />
+      </View>
+
+      <FlatList
+        data={filteredCountries}
+        keyExtractor={(item) => item.value}
+        renderItem={renderCountry}
+        showsVerticalScrollIndicator={false}
+        contentContainerStyle={styles.listContent}
+        keyboardShouldPersistTaps="handled"
+        initialNumToRender={15}
+        maxToRenderPerBatch={20}
+        windowSize={5}
+        removeClippedSubviews={true}
+        ListEmptyComponent={
+          <Text style={styles.emptyText}>Aucun pays trouvé</Text>
+        }
+      />
 
       {error && (
         <Text style={styles.errorText}>{error}</Text>
@@ -77,7 +301,12 @@ export const CountrySelection: React.FC<CountrySelectionProps> = ({
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    padding: 16,
+    backgroundColor: '#fff', 
+  },
+  headerContainer: {
+    paddingHorizontal: 16,
+    paddingTop: 16,
+    paddingBottom: 8,
   },
   title: {
     fontSize: 24,
@@ -90,11 +319,28 @@ const styles = StyleSheet.create({
     fontSize: 16,
     color: '#666',
     textAlign: 'center',
-    marginBottom: 24,
+    marginBottom: 16,
     lineHeight: 22,
   },
-  optionsContainer: {
-    flex: 1,
+  searchInput: {
+    backgroundColor: '#f5f5f5',
+    borderRadius: 10,
+    padding: 12,
+    fontSize: 16,
+    color: '#333',
+    borderWidth: 1,
+    borderColor: '#e5e5e5',
+    marginBottom: 8,
+  },
+  listContent: {
+    paddingHorizontal: 16,
+    paddingBottom: 24, 
+  },
+  emptyText: {
+    textAlign: 'center',
+    color: '#999',
+    marginTop: 20,
+    fontSize: 16,
   },
   option: {
     flexDirection: 'row',
@@ -106,13 +352,10 @@ const styles = StyleSheet.create({
     borderWidth: 2,
     borderColor: '#e5e5e5',
     shadowColor: '#000',
-    shadowOffset: {
-      width: 0,
-      height: 2,
-    },
-    shadowOpacity: 0.1,
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.05, 
     shadowRadius: 3.84,
-    elevation: 5,
+    elevation: 3,
   },
   selectedOption: {
     borderColor: '#4CAF50',
@@ -154,24 +397,7 @@ const styles = StyleSheet.create({
   errorText: {
     color: '#dc2626',
     fontSize: 14,
-    marginTop: 8,},
-  buttonContainer: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    marginTop: 24,
-    gap: 10,
-  },
-  button: {
-    flex: 1,
-    padding: 12,
-    backgroundColor: '#4CAF50',
+    margin: 16,
     textAlign: 'center',
   },
-  buttonText: {
-    color: 'white',
-    fontSize: 16,
-    fontWeight: 'bold',
-    textAlign: 'center',
-  },
-
-}); 
+});