@transfergratis/react-native-sdk 0.1.22 → 0.1.24

package/build/components/KYCElements/CountrySelectionTemplate.js

@@ -1,82 +1,348 @@
-import React, { useEffect, useState } from 'react';
+import React, { useState, useMemo, useEffect } from 'react';
 import { View, Text, TouchableOpacity, StyleSheet, ScrollView } from 'react-native';
 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';
 export const CountrySelectionTemplate = ({ component, value, onValueChange, error, language = 'en', }) => {
-    const { t } = useI18n();
     const config = component.config;
-    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({ code: defaultCountry, ...countryData[defaultCountry] });
+    // 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 idCardConfig = useMemo(() => {
+        return idCardComponent?.config;
+    }, [idCardComponent]);
+    // États de navigation - initialiser depuis value si disponible
+    const [currentStep, setCurrentStep] = useState(() => {
+        // 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(value?.code || null);
+    const [selectedDocumentType, setSelectedDocumentType] = useState(value?.documentType || null);
+    const [selectedRegion, setSelectedRegion] = useState(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) => countryData[code])
+            .map((code) => ({ code, ...countryData[code] }))
+            .sort((a, b) => 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) => {
-        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));
-    useEffect(() => {
-        if (selectedCountry) {
-            const mapping = selectedCountry.code ? countryMapping[selectedCountry.code] : undefined;
-            onValueChange({ ...selectedCountry, regionMapping: mapping });
+    // Navigation entre les étapes
+    const handleCountrySelect = (countryCode) => {
+        setSelectedCountryCode(countryCode);
+        setSelectedDocumentType(null);
+        setSelectedRegion(null);
+        setCurrentStep('documentType');
+    };
+    const handleDocumentTypeSelect = (docType) => {
+        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');
         }
-    }, [selectedCountry]);
-    return (<View style={styles.root}>
-      <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,
-                selectedCountry.code === country.code && styles.selectedCountryOption
-            ]} onPress={() => {
-                console.log({
-                    country, language
-                });
-                setSelectedCountry(country);
-            }}>
-              <Text style={styles.countryFlag}>{country.flag}</Text>
-              <View style={styles.countryContent}>
+        else {
+            // Pas de région nécessaire, on peut finaliser
+            if (selectedCountryCode) {
+                finalizeSelection(selectedCountryCode, docType, null);
+            }
+        }
+    };
+    const handleRegionSelect = (region) => {
+        setSelectedRegion(region);
+        if (selectedCountryCode && selectedDocumentType) {
+            finalizeSelection(selectedCountryCode, selectedDocumentType, region);
+        }
+    };
+    const finalizeSelection = (countryCode, docType, region) => {
+        const country = countryData[countryCode];
+        if (!country)
+            return;
+        const mapping = countryMapping[countryCode];
+        const countryObj = {
+            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);
+    };
+    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) => (<TouchableOpacity key={country.code} style={[
+                    styles.option,
+                    selectedCountryCode === country.code && styles.selectedOption
+                ]} onPress={() => handleCountrySelect(country.code)}>
+              <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}
                 </Text>
-                <Text style={styles.countryCode}>{country.code}</Text>
+                <Text style={styles.optionCode}>{country.code}</Text>
               </View>
-              {selectedCountry.code === country.code && (<View style={[
-                    styles.checkmark,
-                    { backgroundColor: component.ui.themeColor || '#2DBD60' }
-                ]}>
+              {selectedCountryCode === country.code && (<View style={[
+                        styles.checkmark,
+                        { backgroundColor: component.ui.themeColor || '#2DBD60' }
+                    ]}>
                   <Text style={styles.checkmarkText}>✓</Text>
                 </View>)}
             </TouchableOpacity>))}
         </ScrollView>
+      </>);
+    };
+    // 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 = {
+            '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: '🗳️' },
+        };
+        return (<>
+        {instructions && (<View style={styles.infoBox}>
+            <Text style={styles.infoText}>{instructions}</Text>
+          </View>)}
+        <ScrollView style={styles.listContainer} showsVerticalScrollIndicator={false}>
+          {availableDocumentTypes.map((docType) => {
+                const label = documentTypeLabels[docType];
+                const displayName = label ? (state.currentLanguage === "en" ? label.en : label.fr) : docType;
+                const icon = label?.icon || '📄';
+                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 || '#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, index) => {
+                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 || '#2DBD60' }
+                        ]}>
+                    <Text style={styles.checkmarkText}>✓</Text>
+                  </View>)}
+              </TouchableOpacity>);
+            })}
+        </ScrollView>
+      </>);
+    };
+    // Titres des étapes
+    const getStepTitle = () => {
+        switch (currentStep) {
+            case 'country':
+                return getLocalizedText(component.labels);
+            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 = () => {
+        switch (currentStep) {
+            case 'country':
+                return getLocalizedText(component.instructions);
+            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 = () => {
+        if (currentStep === 'country')
+            return 1;
+        if (currentStep === 'documentType')
+            return 2;
+        return 3;
+    };
+    const getTotalSteps = () => {
+        return needsRegion ? 3 : 2;
+    };
+    const canGoNext = () => {
+        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>
 
-        {selectedCountry.code && (<Button title={t('common.next')} onPress={() => {
-                const mapping = selectedCountry.code ? countryMapping[selectedCountry.code] : undefined;
-                onValueChange({ ...selectedCountry, regionMapping: mapping });
-                setTimeout(() => {
-                    actions.nextComponent();
-                }, 500);
-            }} variant="primary" size="large" fullWidth/>)}
-
-        {config.required && !selectedValue && (<View style={styles.requiredContainer}>
+        <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()}
 
-            <Text style={styles.requiredText}>{state.currentLanguage === "en" ? "⚠️  Please Select your country" : "⚠️ Veuillez sélectionner un pays"}</Text>
-          </View>)}
+        {/* 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>)}
       </View>
@@ -94,13 +360,21 @@ 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,
         fontWeight: 'bold',
@@ -115,48 +389,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,
-    },
-    selectedCountryOption: {
+        borderColor: '#E9ECEF',
+        minHeight: 64,
+    },
+    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,
@@ -174,29 +441,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',