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

package/src/components/KYCElements/CountrySelectionTemplate.tsx

@@ -1,10 +1,11 @@
 import React, { useState, useMemo, useEffect } from 'react';
-import { View, Text, TouchableOpacity, StyleSheet, ScrollView } from 'react-native';
+import { View, Text, TouchableOpacity, StyleSheet, ScrollView, TextInput } from 'react-native';
 import { TemplateComponent, CountrySelectionConfig, LocalizedText, Country, IDCardConfig } from '../../types/KYC.types';
 import { countryMapping } from '../../config/region_mapping';
 import { useTemplateKYCFlowContext } from '../../hooks/useTemplateKYCFlow';
 import { Button } from '../ui/Button';
 import { countryData } from '../../config/countriesData';
+import REGION_MAPPING from '../../config/region_mapping.json';
 
 interface CountrySelectionTemplateProps {
   component: TemplateComponent;
@@ -23,8 +24,33 @@ type ExtendedIDCardConfig = IDCardConfig & {
   instructionsByDocumentType?: Record<string, LocalizedText>;
 };
 
-// Standard ISO 3166-2:CA codes for Canadian provinces and territories
-const CANADIAN_PROVINCES = ['AB', 'BC', 'MB', 'NB', 'NL', 'NT', 'NS', 'NU', 'ON', 'PE', 'QC', 'SK', 'YT'];
+const ISO_TO_COUNTRY_NAME: Record<string, string> = { 'KE': 'Kenya', 'CM': 'Cameroon', 'NG': 'Nigeria', 'CA': 'Canada', 'FR': 'France', 'GH': 'Ghana', 'ZA': 'South Africa', 'GB': 'Britain', 'CI': 'Ivory Coast', 'SN': 'Senegal', 'TG': 'Togo', 'ML': 'Mali' };
+
+const jsonDocMap: Record<string, string> = {
+  'nationalId': 'identity_card',
+  'national_id': 'identity_card',
+  'passport': 'passport',
+  'driversLicense': 'drivers_licence',
+  'drivers_licence': 'drivers_licence',
+  'residencePermit': 'permanent_residence',
+  'healthInsuranceCard': 'health_insurance_card'
+};
+
+const SUB_REGION_CODES: Record<string, string> = {
+  "Alberta": "AB",
+  "British Columbia": "BC",
+  "Manitoba": "MB",
+  "New Brunswick": "NB",
+  "Newfoundland and Labrador": "NL",
+  "Northwest Territories": "NT",
+  "Nova Scotia": "NS",
+  "Nunavut": "NU",
+  "Ontario": "ON",
+  "Prince Edward Island": "PE",
+  "Quebec": "QC",
+  "Saskatchewan": "SK",
+  "Yukon": "YT"
+};
 
 export const CountrySelectionTemplate: React.FC<CountrySelectionTemplateProps> = ({
   component,
@@ -55,20 +81,34 @@ export const CountrySelectionTemplate: React.FC<CountrySelectionTemplateProps> =
   const [selectedCountryCode, setSelectedCountryCode] = useState<string | null>(value?.code || null);
   const [selectedDocumentType, setSelectedDocumentType] = useState<string | null>(value?.documentType || null);
   const [selectedRegion, setSelectedRegion] = useState<string | null>(value?.region || null);
+  
+  const [searchQuery, setSearchQuery] = useState('');
 
   useEffect(() => {
     if (value?.code && value?.documentType) {
       setSelectedCountryCode(value.code);
       setSelectedDocumentType(value.documentType);
       setSelectedRegion(value.region || null);
-      
+
       if (value.region) {
         setCurrentStep('region');
       } else {
-        // Check config regions OR enforce Canadian provinces for non-passports
         let regionsCheck = idCardConfig?.regionsByCountry?.[value.code]?.[value.documentType] || [];
-        if (regionsCheck.length === 0 && value.code === 'CA' && value.documentType !== 'passport') {
-          regionsCheck = CANADIAN_PROVINCES;
+        
+        if (regionsCheck.length === 0) {
+          const rawCountryName = ISO_TO_COUNTRY_NAME[value.code] || value.code;
+          const searchDocType = jsonDocMap[value.documentType] || value.documentType;
+          const baseMapping = (REGION_MAPPING as any).regionMapping || REGION_MAPPING;
+          
+          let countryMapping = baseMapping[rawCountryName];
+          if (!countryMapping) {
+            const foundKey = Object.keys(baseMapping).find(k => k.toLowerCase() === rawCountryName.toLowerCase());
+            if (foundKey) countryMapping = baseMapping[foundKey];
+          }
+
+          if (countryMapping && countryMapping[searchDocType]) {
+            regionsCheck = Object.keys(countryMapping[searchDocType]).filter(k => k !== 'root');
+          }
         }
 
         if (Array.isArray(regionsCheck) && regionsCheck.length > 0) {
@@ -92,32 +132,90 @@ export const CountrySelectionTemplate: React.FC<CountrySelectionTemplateProps> =
   }, []);
 
   const availableCountries = useMemo(() => {
-    const countries = idCardConfig?.selectedCountries || config.allowed_countries || Object.keys(countryData);
-    return countries
+    const explicitlyAllowed = idCardConfig?.selectedCountries || config.allowed_countries || [];
+    
+    const configuredCodes = new Set(explicitlyAllowed);
+
+    return Array.from(configuredCodes)
       .filter((code: string) => countryData[code])
       .map((code: string) => ({ code, ...countryData[code] }))
-      .sort((a: Country & { code?: string }, b: Country & { code?: string }) => a.name.localeCompare(b.name));
+      .sort((a: Country, b: Country) => a.name.localeCompare(b.name));
   }, [idCardConfig?.selectedCountries, config.allowed_countries]);
 
+  const filteredCountries = useMemo(() => {
+    if (!searchQuery.trim()) return availableCountries;
+    const cleanQuery = searchQuery.toLowerCase().trim();
+
+    return availableCountries.filter(country => 
+      country.name.toLowerCase().includes(cleanQuery) || 
+      country.name_en.toLowerCase().includes(cleanQuery) || 
+      country.code.toLowerCase().includes(cleanQuery)
+    );
+  }, [searchQuery, availableCountries]);
+
   const availableDocumentTypes = useMemo(() => {
-    if (!selectedCountryCode || !idCardConfig?.documentTypesByCountry) return [];
-    return idCardConfig.documentTypesByCountry[selectedCountryCode] || [];
+    if (!selectedCountryCode) return [];
+    
+    // Check if custom layout configuration explicitly defined items for it
+    if (idCardConfig?.documentTypesByCountry?.[selectedCountryCode]) {
+      return idCardConfig.documentTypesByCountry[selectedCountryCode];
+    }
+
+    // Default Fallback: Query mapping matrix dynamically
+    const rawCountryName = ISO_TO_COUNTRY_NAME[selectedCountryCode] || selectedCountryCode;
+    const baseMapping = (REGION_MAPPING as any).regionMapping || REGION_MAPPING;
+    
+    let countryMapping = baseMapping[rawCountryName];
+    if (!countryMapping) {
+      const foundKey = Object.keys(baseMapping).find(k => k.toLowerCase() === rawCountryName.toLowerCase());
+      if (foundKey) countryMapping = baseMapping[foundKey];
+    }
+
+    if (countryMapping) {
+      const inverseDocMap: Record<string, string> = {
+        'identity_card': 'nationalId',
+        'passport': 'passport',
+        'drivers_licence': 'driversLicense',
+        'permanent_residence': 'residencePermit',
+        'health_insurance_card': 'healthInsuranceCard'
+      };
+      return Object.keys(countryMapping).map(key => inverseDocMap[key] || key);
+    }
+
+    return ['nationalId', 'passport', 'driversLicense'];
   }, [selectedCountryCode, idCardConfig?.documentTypesByCountry]);
 
   const availableRegions = useMemo(() => {
     if (!selectedCountryCode || !selectedDocumentType) return [];
+
+    let rawRegions: string[] = [];
     
-    let regions: string[] = [];
     if (idCardConfig?.regionsByCountry?.[selectedCountryCode]?.[selectedDocumentType]) {
-      regions = idCardConfig.regionsByCountry[selectedCountryCode][selectedDocumentType];
+      rawRegions = idCardConfig.regionsByCountry[selectedCountryCode][selectedDocumentType];
     }
 
-    
-    if (regions.length === 0 && selectedCountryCode === 'CA' && selectedDocumentType !== 'passport') {
-      regions = CANADIAN_PROVINCES;
+    if (rawRegions.length === 0) {
+      const rawCountryName = ISO_TO_COUNTRY_NAME[selectedCountryCode] || selectedCountryCode;
+      const searchDocType = jsonDocMap[selectedDocumentType] || selectedDocumentType;
+      const baseMapping = (REGION_MAPPING as any).regionMapping || REGION_MAPPING;
+      
+      let countryMapping = baseMapping[rawCountryName];
+      if (!countryMapping) {
+        const foundKey = Object.keys(baseMapping).find(k => k.toLowerCase() === rawCountryName.toLowerCase());
+        if (foundKey) countryMapping = baseMapping[foundKey];
+      }
+
+      if (countryMapping && countryMapping[searchDocType]) {
+        rawRegions = Object.keys(countryMapping[searchDocType]).filter(k => k !== 'root');
+      }
     }
 
-    return Array.isArray(regions) ? regions : [];
+    if (!Array.isArray(rawRegions)) return [];
+
+    return rawRegions.sort((a, b) => a.localeCompare(b)).map(region => ({
+      label: region,
+      value: SUB_REGION_CODES[region] || region
+    }));
   }, [selectedCountryCode, selectedDocumentType, idCardConfig?.regionsByCountry]);
 
   const needsRegion = useMemo(() => {
@@ -139,8 +237,8 @@ export const CountrySelectionTemplate: React.FC<CountrySelectionTemplateProps> =
     setSelectedRegion(null);
   };
 
-  const handleRegionSelect = (region: string) => {
-    setSelectedRegion(region);
+  const handleRegionSelect = (regionValue: string) => {
+    setSelectedRegion(regionValue);
   };
 
   const finalizeSelection = (countryCode: string, docType: string, region: string | null) => {
@@ -171,6 +269,7 @@ export const CountrySelectionTemplate: React.FC<CountrySelectionTemplateProps> =
       setCurrentStep('country');
       setSelectedDocumentType(null);
       setSelectedRegion(null);
+      setSearchQuery('');
     } else if (currentStep === 'country') {
       actions.previousComponent();
     }
@@ -197,8 +296,16 @@ export const CountrySelectionTemplate: React.FC<CountrySelectionTemplateProps> =
   const renderCountrySelection = () => {
     return (
       <>
+        <TextInput 
+          style={styles.searchBar}
+          placeholder={state.currentLanguage === "en" ? "🔍 Search country..." : "🔍 Rechercher un pays..."}
+          placeholderTextColor="#94A3B8"
+          value={searchQuery}
+          onChangeText={setSearchQuery}
+          autoCorrect={false}
+        />
         <ScrollView style={styles.listContainer} showsVerticalScrollIndicator={false}>
-          {availableCountries.map((country: Country & { code?: string }) => (
+          {filteredCountries.map((country: Country & { code?: string }) => (
             <TouchableOpacity
               key={country.code}
               style={[
@@ -208,6 +315,7 @@ export const CountrySelectionTemplate: React.FC<CountrySelectionTemplateProps> =
               onPress={() => handleCountrySelect(country.code!)}
             >
               <Text style={styles.flag}>{country.flag}</Text>
+              
               <View style={styles.optionContent}>
                 <Text style={[
                   styles.optionName,
@@ -217,6 +325,7 @@ export const CountrySelectionTemplate: React.FC<CountrySelectionTemplateProps> =
                 </Text>
                 <Text style={styles.optionCode}>{country.code}</Text>
               </View>
+
               {selectedCountryCode === country.code && (
                 <View style={[
                   styles.checkmark,
@@ -227,6 +336,12 @@ export const CountrySelectionTemplate: React.FC<CountrySelectionTemplateProps> =
               )}
             </TouchableOpacity>
           ))}
+          
+          {filteredCountries.length === 0 && (
+            <Text style={styles.emptyText}>
+              {state.currentLanguage === "en" ? "No matching countries found." : "Aucun pays trouvé."}
+            </Text>
+          )}
         </ScrollView>
       </>
     );
@@ -296,26 +411,28 @@ export const CountrySelectionTemplate: React.FC<CountrySelectionTemplateProps> =
     return (
       <>
         <ScrollView style={styles.listContainer} showsVerticalScrollIndicator={false}>
-          {availableRegions.map((region: string, index: number) => {
-            const regionLabel = typeof region === 'string' ? region : String(region);
+          {availableRegions.map((regionObj, index: number) => {
             return (
               <TouchableOpacity
                 key={index}
                 style={[
                   styles.option,
-                  selectedRegion === regionLabel && styles.selectedOption
+                  selectedRegion === regionObj.value && styles.selectedOption
                 ]}
-                onPress={() => handleRegionSelect(regionLabel)}
+                onPress={() => handleRegionSelect(regionObj.value)}
               >
                 <View style={styles.optionContent}>
                   <Text style={[
                     styles.optionName,
-                    selectedRegion === regionLabel && styles.selectedOptionName
+                    selectedRegion === regionObj.value && styles.selectedOptionName
                   ]}>
-                    {regionLabel}
+                    {regionObj.label}
                   </Text>
+                  {regionObj.value !== regionObj.label && (
+                     <Text style={styles.optionCode}>{regionObj.value}</Text>
+                  )}
                 </View>
-                {selectedRegion === regionLabel && (
+                {selectedRegion === regionObj.value && (
                   <View style={[
                     styles.checkmark,
                     { backgroundColor: component.ui.themeColor as string || '#2DBD60' }
@@ -429,7 +546,8 @@ const styles = StyleSheet.create({
   progressText: { fontSize: 14, color: '#666', fontWeight: '500' },
   title: { fontSize: 24, fontWeight: 'bold', color: '#333', marginBottom: 8, textAlign: 'center' },
   description: { fontSize: 16, color: '#666', textAlign: 'center', marginBottom: 24, lineHeight: 22 },
-  listContainer: { maxHeight: 400, marginBottom: 24 },
+  searchBar: { height: 52, backgroundColor: '#F1F5F9', borderRadius: 12, paddingHorizontal: 16, fontSize: 16, color: '#1E293B', marginBottom: 16, borderWidth: 1, borderColor: '#CBD5E1', fontWeight: '500' },
+  listContainer: { maxHeight: 360, marginBottom: 24 },
   option: { flexDirection: 'row', alignItems: 'center', padding: 16, backgroundColor: '#F8F9FA', borderRadius: 12, marginBottom: 12, borderWidth: 2, borderColor: '#E9ECEF', minHeight: 64 },
   selectedOption: { borderColor: '#2DBD60', backgroundColor: '#F0F9F0' },
   flag: { fontSize: 32, marginRight: 16 },
@@ -443,4 +561,5 @@ const styles = StyleSheet.create({
   infoText: { fontSize: 14, color: '#666', lineHeight: 20 },
   buttonContainer: { flexDirection: 'row', marginTop: 24, gap: 12 },
   errorText: { color: '#dc2626', fontSize: 14, marginTop: 8, textAlign: 'center' },
+  emptyText: { textAlign: 'center', color: '#64748B', fontSize: 16, marginTop: 24, fontWeight: '500' }
 });