@sanctum-key/react-native-sdk 1.0.23 → 1.0.25

package/src/components/KYCElements/CountrySelection.tsx

@@ -1,12 +1,5 @@
 import React, { useState, useMemo } from 'react';
-import { 
-  View, 
-  Text, 
-  TouchableOpacity, 
-  StyleSheet, 
-  FlatList, 
-  TextInput 
-} from 'react-native';
+import { View, Text, TouchableOpacity, StyleSheet, FlatList, TextInput } from 'react-native';
 import { KYCElement, KYCElementOption } from '../../types/KYC.types';
 
 interface CountrySelectionProps {
@@ -16,255 +9,74 @@ interface CountrySelectionProps {
   error?: string;
 }
 
-// 🌍 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: '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: '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: '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> = ({
   element,
   value,
   onValueChange,
   error,
 }) => {
-  // 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 countries = element.options || [];
+  console.log(`Countries options: ${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())
+      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>
+  const renderCountry = ({ item: country }: { item: KYCElementOption }) => {
+    const isSelected = value === country.value;
+
+    return (
+      <TouchableOpacity
+        style={[
+          styles.option,
+          isSelected && styles.selectedOption
+        ]}
+        onPress={() => onValueChange(country.value)}
+        activeOpacity={0.7}
+        // Accessibility Enhancements
+        accessible={true}
+        accessibilityRole="button"
+        accessibilityState={{ selected: isSelected }}
+        accessibilityLabel={`${country.label}. ${isSelected ? 'Selected' : 'Unselected'}.`}
+        accessibilityHint={`Tap to select ${country.label} as your country`}
+      >
+        <Text style={styles.optionIcon}>{country.icon}</Text>
+        
+        <View style={styles.optionContent}>
+          <Text style={[
+            styles.optionLabel,
+            isSelected && styles.selectedOptionLabel
+          ]}>
+            {country.label}
+          </Text>
+          {country.description && (
+            <Text style={styles.optionDescription}>{country.description}</Text>
+          )}
         </View>
-      )}
-    </TouchableOpacity>
-  );
+
+        {isSelected && (
+          <View style={styles.checkmark}>
+            <Text style={styles.checkmarkText}>✓</Text>
+          </View>
+        )}
+      </TouchableOpacity>
+    );
+  };
 
   return (
     <View style={styles.container}>
       <View style={styles.headerContainer}>
-        <Text style={styles.title}>{element.title}</Text>
+        <Text style={styles.title} accessibilityRole="header">{element.title}</Text>
         <Text style={styles.description}>{element.description}</Text>
         
-        {/* Search Bar for better UX */}
+        {/* Search Bar */}
         <TextInput
           style={styles.searchInput}
           placeholder="Rechercher un pays..."
@@ -272,6 +84,10 @@ export const CountrySelection: React.FC<CountrySelectionProps> = ({
           value={searchQuery}
           onChangeText={setSearchQuery}
           clearButtonMode="while-editing" // Adds a clear 'x' on iOS
+          // Accessibility for Search
+          accessibilityRole="search"
+          accessibilityLabel="Search countries"
+          accessibilityHint="Type to filter the list of configured countries below"
         />
       </View>
 
@@ -279,20 +95,24 @@ export const CountrySelection: React.FC<CountrySelectionProps> = ({
         data={filteredCountries}
         keyExtractor={(item) => item.value}
         renderItem={renderCountry}
-        showsVerticalScrollIndicator={false}
+        showsVerticalScrollIndicator={true} // Enable scroll indicator for better UX visibility
         contentContainerStyle={styles.listContent}
         keyboardShouldPersistTaps="handled"
+        keyboardDismissMode="on-drag" // 🚨 UX FIX: Hides keyboard naturally when user starts scrolling
         initialNumToRender={15}
         maxToRenderPerBatch={20}
         windowSize={5}
         removeClippedSubviews={true}
+        accessibilityRole="list"
         ListEmptyComponent={
-          <Text style={styles.emptyText}>Aucun pays trouvé</Text>
+          <Text style={styles.emptyText} accessibilityRole="text">
+            Aucun pays configuré ou trouvé.
+          </Text>
         }
       />
 
       {error && (
-        <Text style={styles.errorText}>{error}</Text>
+        <Text style={styles.errorText} accessibilityRole="alert">{error}</Text>
       )}
     </View>
   );
@@ -301,7 +121,7 @@ export const CountrySelection: React.FC<CountrySelectionProps> = ({
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    backgroundColor: '#fff', 
+    backgroundColor: '#fff',
   },
   headerContainer: {
     paddingHorizontal: 16,
@@ -334,7 +154,7 @@ const styles = StyleSheet.create({
   },
   listContent: {
     paddingHorizontal: 16,
-    paddingBottom: 24, 
+    paddingBottom: 24,
   },
   emptyText: {
     textAlign: 'center',
@@ -353,7 +173,7 @@ const styles = StyleSheet.create({
     borderColor: '#e5e5e5',
     shadowColor: '#000',
     shadowOffset: { width: 0, height: 2 },
-    shadowOpacity: 0.05, 
+    shadowOpacity: 0.05,
     shadowRadius: 3.84,
     elevation: 3,
   },