@transfergratis/react-native-sdk 0.1.22 → 0.1.24

package/src/components/KYCElements/CountrySelectionTemplate.tsx

@@ -1,20 +1,29 @@
-import React, { useEffect, useState } from 'react';
+import React, { useState, useMemo, useEffect } from 'react';
 import { View, Text, TouchableOpacity, StyleSheet, ScrollView } from 'react-native';
-import { TemplateComponent, CountrySelectionConfig, LocalizedText, Country } from '../../types/KYC.types';
+import { TemplateComponent, CountrySelectionConfig, LocalizedText, Country, IDCardConfig } 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: Country) => void;
+  value?: any;
+  onValueChange: (value: Country & { documentType?: string; region?: string }) => void;
   error?: string;
   language?: string;
 }
 
+type SelectionStep = 'country' | 'documentType' | 'region';
+
+// Type étendu pour IDCardConfig avec les propriétés additionnelles
+type ExtendedIDCardConfig = IDCardConfig & {
+  selectedCountries?: string[];
+  documentTypesByCountry?: Record<string, string[]>;
+  regionsByCountry?: Record<string, Record<string, string[]>>;
+  instructionsByDocumentType?: Record<string, LocalizedText>;
+};
+
 export const CountrySelectionTemplate: React.FC<CountrySelectionTemplateProps> = ({
   component,
   value,
@@ -22,70 +31,197 @@ 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 || 'CM';
-  const { actions, state} = useTemplateKYCFlowContext();
+  const { actions, state } = useTemplateKYCFlowContext();
 
-  console.log({ language }, state.currentLanguage);
+  // Récupérer les données depuis le composant id_card
+  const idCardComponent = useMemo(() => {
+    return state.template.components.find(c => c.type === 'id_card');
+  }, [state.template.components]);
 
-  const [selectedCountry, setSelectedCountry] = useState<Country>({ code: defaultCountry, ...countryData[defaultCountry] });
+  const idCardConfig = useMemo(() => {
+    return idCardComponent?.config as ExtendedIDCardConfig | undefined;
+  }, [idCardComponent]);
+
+  // États de navigation - initialiser depuis value si disponible
+  const [currentStep, setCurrentStep] = useState<SelectionStep>(() => {
+    // Si value existe, on a déjà sélectionné -> aller à la dernière étape nécessaire
+    if (value?.code && value?.documentType) {
+      if (value.region) return 'region';
+      return 'documentType';
+    }
+    return 'country';
+  });
+  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);
+
+  // Restaurer l'état depuis value si le composant est remonté avec des données
+  useEffect(() => {
+    if (value?.code && value?.documentType) {
+      setSelectedCountryCode(value.code);
+      setSelectedDocumentType(value.documentType);
+      setSelectedRegion(value.region || null);
+      // Déterminer l'étape actuelle
+      if (value.region) {
+        setCurrentStep('region');
+      } else {
+        // Vérifier si une région est nécessaire
+        const needsRegionCheck = value.code && value.documentType && idCardConfig?.regionsByCountry?.[value.code]?.[value.documentType];
+        if (needsRegionCheck && Array.isArray(needsRegionCheck) && needsRegionCheck.length > 0) {
+          setCurrentStep('region');
+        } else {
+          setCurrentStep('documentType');
+        }
+      }
+    } else {
+      // Réinitialiser si value est vide
+      setSelectedCountryCode(null);
+      setSelectedDocumentType(null);
+      setSelectedRegion(null);
+      setCurrentStep('country');
+    }
+  }, [value?.code, value?.documentType, value?.region, idCardConfig]);
+
+  // Récupérer les pays disponibles
+  const availableCountries = useMemo(() => {
+    const countries = idCardConfig?.selectedCountries || config.allowed_countries || Object.keys(countryData);
+    return countries
+      .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));
+  }, [idCardConfig?.selectedCountries, config.allowed_countries]);
+
+  // Récupérer les types de documents disponibles pour le pays sélectionné
+  const availableDocumentTypes = useMemo(() => {
+    if (!selectedCountryCode || !idCardConfig?.documentTypesByCountry) return [];
+    return idCardConfig.documentTypesByCountry[selectedCountryCode] || [];
+  }, [selectedCountryCode, idCardConfig?.documentTypesByCountry]);
+
+  // Récupérer les régions disponibles pour le pays et type de document sélectionnés
+  const availableRegions = useMemo(() => {
+    if (!selectedCountryCode || !selectedDocumentType || !idCardConfig?.regionsByCountry) return [];
+    const regions = idCardConfig.regionsByCountry[selectedCountryCode];
+    if (!regions) return [];
+    return Array.isArray(regions[selectedDocumentType]) ? regions[selectedDocumentType] : [];
+  }, [selectedCountryCode, selectedDocumentType, idCardConfig?.regionsByCountry]);
+
+  // Vérifier si une région est nécessaire
+  const needsRegion = useMemo(() => {
+    return availableRegions.length > 0;
+  }, [availableRegions]);
 
   const getLocalizedText = (text: LocalizedText): string => {
-    return text[language] || text.en || '';
+    return text[state.currentLanguage] || text.en || '';
   };
 
-  const selectedValue = value || defaultCountry;
-
-  const filteredCountries = allowedCountries
-    .filter(code => countryData[code])
-    .map(code => ({
-      code,
-      ...countryData[code]
-    }))
-    .sort((a, b) => a.name.localeCompare(b.name));
+  // Navigation entre les étapes
+  const handleCountrySelect = (countryCode: string) => {
+    setSelectedCountryCode(countryCode);
+    setSelectedDocumentType(null);
+    setSelectedRegion(null);
+    setCurrentStep('documentType');
+  };
 
-    useEffect(() => {
-      if (selectedCountry) {
-        const mapping = selectedCountry.code ? countryMapping[selectedCountry.code as keyof typeof countryMapping] : undefined;
-        onValueChange({ ...selectedCountry, regionMapping: mapping });
+  const handleDocumentTypeSelect = (docType: string) => {
+    setSelectedDocumentType(docType);
+    setSelectedRegion(null);
+    // Vérifier si une région est nécessaire (doit être recalculé après setSelectedDocumentType)
+    const regions = selectedCountryCode && idCardConfig?.regionsByCountry?.[selectedCountryCode]?.[docType];
+    if (regions && Array.isArray(regions) && regions.length > 0) {
+      setCurrentStep('region');
+    } else {
+      // Pas de région nécessaire, on peut finaliser
+      if (selectedCountryCode) {
+        finalizeSelection(selectedCountryCode, docType, null);
       }
-    }, [selectedCountry]);
+    }
+  };
 
-  return (
-    <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>
+  const handleRegionSelect = (region: string) => {
+    setSelectedRegion(region);
+    if (selectedCountryCode && selectedDocumentType) {
+      finalizeSelection(selectedCountryCode, selectedDocumentType, region);
+    }
+  };
+
+  const finalizeSelection = (countryCode: string, docType: string, region: string | null) => {
+    const country = countryData[countryCode];
+    if (!country) return;
+
+    const mapping = countryMapping[countryCode as keyof typeof countryMapping];
+    const countryObj: Country & { documentType?: string; region?: string } = {
+      code: countryCode,
+      ...country,
+      regionMapping: mapping,
+      documentType: docType,
+      region: region || undefined,
+    };
+
+    onValueChange(countryObj);
+    // Passer à l'étape suivante après un court délai
+    setTimeout(() => {
+      actions.nextComponent();
+    }, 300);
+  };
 
-        <ScrollView style={styles.countriesContainer} showsVerticalScrollIndicator={false}>
-          {filteredCountries.map((country) => (
+  const handleBack = () => {
+    if (currentStep === 'region') {
+      setCurrentStep('documentType');
+      setSelectedRegion(null);
+    } else if (currentStep === 'documentType') {
+      setCurrentStep('country');
+      setSelectedDocumentType(null);
+      setSelectedRegion(null);
+    } else if (currentStep === 'country') {
+      // Retour au composant précédent
+      actions.previousComponent();
+    }
+  };
+
+  const handleNext = () => {
+    if (currentStep === 'country' && selectedCountryCode) {
+      setCurrentStep('documentType');
+    } else if (currentStep === 'documentType' && selectedDocumentType) {
+      if (needsRegion) {
+        setCurrentStep('region');
+      } else {
+        if (selectedCountryCode) {
+          finalizeSelection(selectedCountryCode, selectedDocumentType, null);
+        }
+      }
+    } else if (currentStep === 'region' && selectedRegion) {
+      if (selectedCountryCode && selectedDocumentType) {
+        finalizeSelection(selectedCountryCode, selectedDocumentType, selectedRegion);
+      }
+    }
+  };
+
+  // Rendu de l'étape de sélection du pays
+  const renderCountrySelection = () => {
+    return (
+      <>
+        <ScrollView style={styles.listContainer} showsVerticalScrollIndicator={false}>
+          {availableCountries.map((country: Country & { code?: string }) => (
             <TouchableOpacity
               key={country.code}
               style={[
-                styles.countryOption,
-                selectedCountry.code === country.code && styles.selectedCountryOption
+                styles.option,
+                selectedCountryCode === country.code && styles.selectedOption
               ]}
-              onPress={() => {
-                console.log({
-                  country, language
-                });
-
-                setSelectedCountry(country);
-              }}
+              onPress={() => handleCountrySelect(country.code!)}
             >
-              <Text style={styles.countryFlag}>{country.flag}</Text>
-              <View style={styles.countryContent}>
+              <Text style={styles.flag}>{country.flag}</Text>
+              <View style={styles.optionContent}>
                 <Text style={[
-                  styles.countryName,
-                  selectedCountry.code === country.code && styles.selectedCountryName
+                  styles.optionName,
+                  selectedCountryCode === country.code && styles.selectedOptionName
                 ]}>
-                  {state.currentLanguage === "en"? country.name_en: country.name}
+                  {state.currentLanguage === "en" ? country.name_en : country.name}
                 </Text>
-                <Text style={styles.countryCode}>{country.code}</Text>
+                <Text style={styles.optionCode}>{country.code}</Text>
               </View>
-              {selectedCountry.code === country.code && (
+              {selectedCountryCode === country.code && (
                 <View style={[
                   styles.checkmark,
                   { backgroundColor: component.ui.themeColor as string || '#2DBD60' }
@@ -96,32 +232,201 @@ export const CountrySelectionTemplate: React.FC<CountrySelectionTemplateProps> =
             </TouchableOpacity>
           ))}
         </ScrollView>
+      </>
+    );
+  };
 
-        {selectedCountry.code && (
-          <Button title={t('common.next')} onPress={() => {
+  // Rendu de l'étape de sélection du type de document
+  const renderDocumentTypeSelection = () => {
+    const instructions = selectedDocumentType && idCardConfig?.instructionsByDocumentType?.[selectedDocumentType]
+      ? getLocalizedText(idCardConfig.instructionsByDocumentType[selectedDocumentType])
+      : null;
 
+    // Mapping des labels pour l'affichage
+    const documentTypeLabels: Record<string, { en: string; fr: string; icon?: string }> = {
+      'nationalId': { en: 'National ID', fr: 'Carte nationale d\'identité', icon: '🏛️' },
+      'passport': { en: 'Passport', fr: 'Passeport', icon: '📘' },
+      'driversLicense': { en: 'Driver\'s License', fr: 'Permis de conduire', icon: '🚗' },
+      'residencePermit': { en: 'Residence Permit', fr: 'Permis de séjour', icon: '🏠' },
+      'healthInsuranceCard': { en: 'Health Insurance Card', fr: 'Carte d\'assurance maladie', icon: '🗳️' },
+    };
 
-            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
-          />
+    return (
+      <>
+        {instructions && (
+          <View style={styles.infoBox}>
+            <Text style={styles.infoText}>{instructions}</Text>
+          </View>
         )}
+        <ScrollView style={styles.listContainer} showsVerticalScrollIndicator={false}>
+          {availableDocumentTypes.map((docType: string) => {
+            const label = documentTypeLabels[docType];
+            const displayName = label ? (state.currentLanguage === "en" ? label.en : label.fr) : docType;
+            const icon = label?.icon || '📄';
 
-        {config.required && !selectedValue && (
-          <View style={styles.requiredContainer}>
+            return (
+              <TouchableOpacity
+                key={docType}
+                style={[
+                  styles.option,
+                  selectedDocumentType === docType && styles.selectedOption
+                ]}
+                onPress={() => handleDocumentTypeSelect(docType)}
+              >
+                <Text style={styles.flag}>{icon}</Text>
+                <View style={styles.optionContent}>
+                  <Text style={[
+                    styles.optionName,
+                    selectedDocumentType === docType && styles.selectedOptionName
+                  ]}>
+                    {displayName}
+                  </Text>
+                </View>
+                {selectedDocumentType === docType && (
+                  <View style={[
+                    styles.checkmark,
+                    { backgroundColor: component.ui.themeColor as string || '#2DBD60' }
+                  ]}>
+                    <Text style={styles.checkmarkText}>✓</Text>
+                  </View>
+                )}
+              </TouchableOpacity>
+            );
+          })}
+        </ScrollView>
+      </>
+    );
+  };
 
+  // Rendu de l'étape de sélection de la région
+  const renderRegionSelection = () => {
+    return (
+      <>
+        <ScrollView style={styles.listContainer} showsVerticalScrollIndicator={false}>
+          {availableRegions.map((region: string, index: number) => {
+            const regionLabel = typeof region === 'string' ? region : String(region);
+            return (
+              <TouchableOpacity
+                key={index}
+                style={[
+                  styles.option,
+                  selectedRegion === regionLabel && styles.selectedOption
+                ]}
+                onPress={() => handleRegionSelect(regionLabel)}
+              >
+                <View style={styles.optionContent}>
+                  <Text style={[
+                    styles.optionName,
+                    selectedRegion === regionLabel && styles.selectedOptionName
+                  ]}>
+                    {regionLabel}
+                  </Text>
+                </View>
+                {selectedRegion === regionLabel && (
+                  <View style={[
+                    styles.checkmark,
+                    { backgroundColor: component.ui.themeColor as string || '#2DBD60' }
+                  ]}>
+                    <Text style={styles.checkmarkText}>✓</Text>
+                  </View>
+                )}
+              </TouchableOpacity>
+            );
+          })}
+        </ScrollView>
+      </>
+    );
+  };
 
-            <Text style={styles.requiredText}>{
-              state.currentLanguage === "en" ? "⚠️  Please Select your country" : "⚠️ Veuillez sélectionner un pays"
-            }</Text>
-          </View>
-        )}
+  // Titres des étapes
+  const getStepTitle = (): string => {
+    switch (currentStep) {
+      case 'country':
+        return getLocalizedText(component.labels as LocalizedText);
+      case 'documentType':
+        return state.currentLanguage === "en" ? "Select Document Type" : "Sélectionnez le type de document";
+      case 'region':
+        return state.currentLanguage === "en" ? "Select Region" : "Sélectionnez la région";
+      default:
+        return '';
+    }
+  };
+
+  const getStepDescription = (): string => {
+    switch (currentStep) {
+      case 'country':
+        return getLocalizedText(component.instructions as LocalizedText);
+      case 'documentType':
+        return state.currentLanguage === "en" 
+          ? "Choose the type of document you want to use"
+          : "Choisissez le type de document que vous souhaitez utiliser";
+      case 'region':
+        return state.currentLanguage === "en"
+          ? "Select your region"
+          : "Sélectionnez votre région";
+      default:
+        return '';
+    }
+  };
+
+  // Indicateur de progression
+  const getProgressStep = (): number => {
+    if (currentStep === 'country') return 1;
+    if (currentStep === 'documentType') return 2;
+    return 3;
+  };
+
+  const getTotalSteps = (): number => {
+    return needsRegion ? 3 : 2;
+  };
+
+  const canGoNext = (): boolean => {
+    if (currentStep === 'country') return selectedCountryCode !== null;
+    if (currentStep === 'documentType') return selectedDocumentType !== null;
+    if (currentStep === 'region') return selectedRegion !== null;
+    return false;
+  };
+
+  return (
+    <View style={styles.root}>
+      <View style={styles.container}>
+        {/* Indicateur de progression */}
+        <View style={styles.progressContainer}>
+          <Text style={styles.progressText}>
+            {state.currentLanguage === "en" 
+              ? `Step ${getProgressStep()} of ${getTotalSteps()}`
+              : `Étape ${getProgressStep()} sur ${getTotalSteps()}`}
+          </Text>
+        </View>
+
+        <Text style={styles.title}>{getStepTitle()}</Text>
+        <Text style={styles.description}>{getStepDescription()}</Text>
+
+        {/* Contenu de l'étape actuelle */}
+        {currentStep === 'country' && renderCountrySelection()}
+        {currentStep === 'documentType' && renderDocumentTypeSelection()}
+        {currentStep === 'region' && renderRegionSelection()}
+
+        {/* Boutons de navigation */}
+        <View style={styles.buttonContainer}>
+          <Button
+            title={state.currentLanguage === "en" ? "Back" : "Retour"}
+            onPress={handleBack}
+            variant={currentStep === 'country' ? "secondary" : "outline"}
+            size="large"
+            style={currentStep === 'country' ? { flex: 1 } : { flex: 1, marginRight: 8 }}
+          />
+          {currentStep !== 'country' && (
+            <Button
+              title={state.currentLanguage === "en" ? "Next" : "Suivant"}
+              onPress={handleNext}
+              variant="primary"
+              size="large"
+              style={{ flex: 1 }}
+              disabled={!canGoNext()}
+            />
+          )}
+        </View>
 
         {error && (
           <Text style={styles.errorText}>{error}</Text>
@@ -143,13 +448,20 @@ const styles = StyleSheet.create({
     borderRadius: 10,
     paddingVertical: 16,
     paddingHorizontal: 16,
-    // shadow
     shadowColor: '#000',
     shadowOffset: { width: 0, height: 2 },
     shadowOpacity: 0.35,
     shadowRadius: 4.84,
     elevation: 10,
-
+  },
+  progressContainer: {
+    marginBottom: 16,
+    alignItems: 'center',
+  },
+  progressText: {
+    fontSize: 14,
+    color: '#666',
+    fontWeight: '500',
   },
   title: {
     fontSize: 24,
@@ -165,48 +477,41 @@ const styles = StyleSheet.create({
     marginBottom: 24,
     lineHeight: 22,
   },
-  countriesContainer: {
-    height: "80%",
-    maxHeight: 600,
+  listContainer: {
+    maxHeight: 400,
+    marginBottom: 24,
   },
-  countryOption: {
+  option: {
     flexDirection: 'row',
     alignItems: 'center',
     padding: 16,
-    backgroundColor: 'white',
+    backgroundColor: '#F8F9FA',
     borderRadius: 12,
     marginBottom: 12,
     borderWidth: 2,
-    borderColor: '#e5e5e5',
-    shadowColor: '#000',
-    shadowOffset: {
-      width: 0,
-      height: 2,
-    },
-    shadowOpacity: 0.1,
-    shadowRadius: 3.84,
-    elevation: 5,
+    borderColor: '#E9ECEF',
+    minHeight: 64,
   },
-  selectedCountryOption: {
+  selectedOption: {
     borderColor: '#2DBD60',
-    backgroundColor: '#f0f9f0',
+    backgroundColor: '#F0F9F0',
   },
-  countryFlag: {
+  flag: {
     fontSize: 32,
     marginRight: 16,
   },
-  countryContent: {
+  optionContent: {
     flex: 1,
   },
-  countryName: {
+  optionName: {
     fontSize: 18,
     fontWeight: '600',
     color: '#333',
   },
-  selectedCountryName: {
+  selectedOptionName: {
     color: '#2DBD60',
   },
-  countryCode: {
+  optionCode: {
     fontSize: 14,
     color: '#666',
     marginTop: 4,
@@ -224,29 +529,21 @@ const styles = StyleSheet.create({
     fontSize: 16,
     fontWeight: 'bold',
   },
-  selectionInfo: {
-    backgroundColor: '#f0f9f0',
-    padding: 16,
-    borderRadius: 8,
-    marginTop: 16,
-    alignItems: 'center',
-  },
-  selectionText: {
-    fontSize: 16,
-    fontWeight: '600',
-    color: '#2DBD60',
+  infoBox: {
+    backgroundColor: '#F9FAFB',
+    padding: 12,
+    borderRadius: 12,
+    marginBottom: 16,
   },
-  requiredContainer: {
-    backgroundColor: '#fff3cd',
-    padding: 16,
-    borderRadius: 8,
-    marginTop: 16,
-    alignItems: 'center',
+  infoText: {
+    fontSize: 14,
+    color: '#666',
+    lineHeight: 20,
   },
-  requiredText: {
-    fontSize: 16,
-    fontWeight: '600',
-    color: '#856404',
+  buttonContainer: {
+    flexDirection: 'row',
+    marginTop: 24,
+    gap: 12,
   },
   errorText: {
     color: '#dc2626',
@@ -254,4 +551,4 @@ const styles = StyleSheet.create({
     marginTop: 8,
     textAlign: 'center',
   },
-}); 
+});

package/src/components/KYCElements/FileUpload.tsx

@@ -1,5 +1,6 @@
 import React, { useState } from 'react';
-import { View, Text, TouchableOpacity, StyleSheet, ScrollView, Image, Alert } from 'react-native';
+import { View, Text, TouchableOpacity, StyleSheet, ScrollView, Image } from 'react-native';
+import { showAlert } from '../../utils/platformAlert';
 import { useKYCStore } from '../../stores/kycStore';
 import NativeCameraModule from '../../modules/camera/NativeCameraModule';
 import { KYCElement } from '../../types/KYC.types';
@@ -51,7 +52,7 @@ export const FileUpload: React.FC<FileUploadProps> = ({
 
         // Vérifier le nombre maximum de fichiers
         if (uploadedFiles.length >= uploadConfig.maxFiles) {
-          Alert.alert('Limite atteinte', `Vous ne pouvez sélectionner que ${uploadConfig.maxFiles} fichiers maximum.`);
+          showAlert('Limite atteinte', `Vous ne pouvez sélectionner que ${uploadConfig.maxFiles} fichiers maximum.`);
           return;
         }
 
@@ -59,11 +60,11 @@ export const FileUpload: React.FC<FileUploadProps> = ({
         setUploadedFiles(updatedFiles);
         onValueChange(updatedFiles.map(file => file.uri));
       } else if (result.error) {
-        Alert.alert('Erreur', result.error);
+        showAlert('Erreur', result.error);
       }
     } catch (error) {
       console.error('Erreur lors de la sélection de fichiers:', error);
-      Alert.alert('Erreur', 'Impossible de sélectionner le fichier');
+      showAlert('Erreur', 'Impossible de sélectionner le fichier');
     } finally {
       setIsUploading(false);
       setProcessing(false);