@transfergratis/react-native-sdk 0.1.2

package/src/components/KYCElements/CompletionStep.tsx

@@ -0,0 +1,161 @@
+import React from 'react';
+import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
+import { KYCElement } from '../../types/KYC.types';
+
+interface CompletionStepProps {
+  element: KYCElement;
+  onRestart: () => void;
+  onClose: () => void;
+}
+
+export const CompletionStep: React.FC<CompletionStepProps> = ({
+  element,
+  onRestart,
+  onClose,
+}) => {
+  return (
+    <View style={styles.container}>
+      <View style={styles.successContainer}>
+        <Text style={styles.successIcon}>🎉</Text>
+        <Text style={styles.title}>{element.title}</Text>
+        <Text style={styles.description}>{element.description}</Text>
+        
+        <View style={styles.checkmarkContainer}>
+          <View style={styles.checkmarkCircle}>
+            <Text style={styles.checkmarkText}>✓</Text>
+          </View>
+        </View>
+        
+        <Text style={styles.successMessage}>
+          Votre vérification d'identité a été complétée avec succès !
+        </Text>
+        
+        <Text style={styles.detailsText}>
+          Vos documents ont été validés et votre compte est maintenant vérifié.
+          Vous pouvez maintenant utiliser tous les services de notre plateforme.
+        </Text>
+      </View>
+
+      <View style={styles.buttonContainer}>
+        <TouchableOpacity style={styles.secondaryButton} onPress={onRestart}>
+          <Text style={styles.secondaryButtonText}>Recommencer</Text>
+        </TouchableOpacity>
+        
+        <TouchableOpacity style={styles.primaryButton} onPress={onClose}>
+          <Text style={styles.primaryButtonText}>Terminer</Text>
+        </TouchableOpacity>
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    padding: 16,
+    justifyContent: 'center',
+  },
+  successContainer: {
+    alignItems: 'center',
+    padding: 24,
+    backgroundColor: 'white',
+    borderRadius: 16,
+    shadowColor: '#000',
+    shadowOffset: {
+      width: 0,
+      height: 4,
+    },
+    shadowOpacity: 0.1,
+    shadowRadius: 8,
+    elevation: 5,
+    marginBottom: 32,
+  },
+  successIcon: {
+    fontSize: 64,
+    marginBottom: 16,
+  },
+  title: {
+    fontSize: 28,
+    fontWeight: 'bold',
+    color: '#333',
+    marginBottom: 8,
+    textAlign: 'center',
+  },
+  description: {
+    fontSize: 16,
+    color: '#666',
+    textAlign: 'center',
+    marginBottom: 24,
+    lineHeight: 22,
+  },
+  checkmarkContainer: {
+    marginBottom: 24,
+  },
+  checkmarkCircle: {
+    width: 80,
+    height: 80,
+    borderRadius: 40,
+    backgroundColor: '#4CAF50',
+    justifyContent: 'center',
+    alignItems: 'center',
+    shadowColor: '#4CAF50',
+    shadowOffset: {
+      width: 0,
+      height: 4,
+    },
+    shadowOpacity: 0.3,
+    shadowRadius: 8,
+    elevation: 8,
+  },
+  checkmarkText: {
+    color: 'white',
+    fontSize: 32,
+    fontWeight: 'bold',
+  },
+  successMessage: {
+    fontSize: 20,
+    fontWeight: '600',
+    color: '#4CAF50',
+    textAlign: 'center',
+    marginBottom: 16,
+  },
+  detailsText: {
+    fontSize: 14,
+    color: '#666',
+    textAlign: 'center',
+    lineHeight: 20,
+  },
+  buttonContainer: {
+    flexDirection: 'row',
+    justifyContent: 'space-around',
+    paddingHorizontal: 16,
+  },
+  primaryButton: {
+    backgroundColor: '#4CAF50',
+    paddingHorizontal: 32,
+    paddingVertical: 16,
+    borderRadius: 8,
+    flex: 1,
+    marginLeft: 8,
+  },
+  primaryButtonText: {
+    color: 'white',
+    fontWeight: '600',
+    fontSize: 16,
+    textAlign: 'center',
+  },
+  secondaryButton: {
+    backgroundColor: '#e5e5e5',
+    paddingHorizontal: 32,
+    paddingVertical: 16,
+    borderRadius: 8,
+    flex: 1,
+    marginRight: 8,
+  },
+  secondaryButtonText: {
+    color: '#333',
+    fontWeight: '600',
+    fontSize: 16,
+    textAlign: 'center',
+  },
+}); 

package/src/components/KYCElements/CountrySelection.tsx

@@ -0,0 +1,177 @@
+import React from 'react';
+import { View, Text, TouchableOpacity, StyleSheet, ScrollView } from 'react-native';
+import { KYCElement, KYCElementOption } from '../../types/KYC.types';
+
+interface CountrySelectionProps {
+  element: KYCElement;
+  value?: string;
+  onValueChange: (value: string) => void;
+  error?: string;
+}
+
+const defaultCountries: KYCElementOption[] = [
+  { value: 'FR', label: 'France', icon: '🇫🇷' },
+  { value: 'BE', label: 'Belgique', icon: '🇧🇪' },
+  { value: 'LU', label: 'Luxembourg', icon: '🇱🇺' },
+  { value: 'DE', label: 'Allemagne', icon: '🇩🇪' },
+  { value: 'IT', label: 'Italie', icon: '🇮🇹' },
+  { value: 'ES', label: 'Espagne', 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: '🌍' },
+];
+
+export const CountrySelection: React.FC<CountrySelectionProps> = ({
+  element,
+  value,
+  onValueChange,
+  error,
+}) => {
+  const countries = element.options || defaultCountries;
+
+  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>
+
+      {error && (
+        <Text style={styles.errorText}>{error}</Text>
+      )}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    padding: 16,
+  },
+  title: {
+    fontSize: 24,
+    fontWeight: 'bold',
+    color: '#333',
+    marginBottom: 8,
+    textAlign: 'center',
+  },
+  description: {
+    fontSize: 16,
+    color: '#666',
+    textAlign: 'center',
+    marginBottom: 24,
+    lineHeight: 22,
+  },
+  optionsContainer: {
+    flex: 1,
+  },
+  option: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    padding: 16,
+    backgroundColor: 'white',
+    borderRadius: 12,
+    marginBottom: 12,
+    borderWidth: 2,
+    borderColor: '#e5e5e5',
+    shadowColor: '#000',
+    shadowOffset: {
+      width: 0,
+      height: 2,
+    },
+    shadowOpacity: 0.1,
+    shadowRadius: 3.84,
+    elevation: 5,
+  },
+  selectedOption: {
+    borderColor: '#4CAF50',
+    backgroundColor: '#f0f9f0',
+  },
+  optionIcon: {
+    fontSize: 32,
+    marginRight: 16,
+  },
+  optionContent: {
+    flex: 1,
+  },
+  optionLabel: {
+    fontSize: 18,
+    fontWeight: '600',
+    color: '#333',
+  },
+  selectedOptionLabel: {
+    color: '#4CAF50',
+  },
+  optionDescription: {
+    fontSize: 14,
+    color: '#666',
+    marginTop: 4,
+  },
+  checkmark: {
+    width: 24,
+    height: 24,
+    borderRadius: 12,
+    backgroundColor: '#4CAF50',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  checkmarkText: {
+    color: 'white',
+    fontSize: 16,
+    fontWeight: 'bold',
+  },
+  errorText: {
+    color: '#dc2626',
+    fontSize: 14,
+    marginTop: 8,},
+  buttonContainer: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    marginTop: 24,
+    gap: 10,
+  },
+  button: {
+    flex: 1,
+    padding: 12,
+    backgroundColor: '#4CAF50',
+    textAlign: 'center',
+  },
+  buttonText: {
+    color: 'white',
+    fontSize: 16,
+    fontWeight: 'bold',
+    textAlign: 'center',
+  },
+
+}); 

package/src/components/KYCElements/CountrySelectionTemplate.tsx

@@ -0,0 +1,282 @@
+import React from 'react';
+import { View, Text, TouchableOpacity, StyleSheet, ScrollView } from 'react-native';
+import { TemplateComponent, CountrySelectionConfig, LocalizedText } from '../../types/KYC.types';
+
+interface CountrySelectionTemplateProps {
+  component: TemplateComponent;
+  value?: string;
+  onValueChange: (value: string) => void;
+  error?: string;
+  language?: string;
+}
+
+const countryData: Record<string, { name: string; flag: string }> = {
+  FR: { name: 'France', flag: '🇫🇷' },
+  CM: { name: 'Cameroun', flag: '🇨🇲' },
+  US: { name: 'États-Unis', flag: '🇺🇸' },
+  DE: { name: 'Allemagne', flag: '🇩🇪' },
+  BE: { name: 'Belgique', flag: '🇧🇪' },
+  LU: { name: 'Luxembourg', flag: '🇱🇺' },
+  IT: { name: 'Italie', flag: '🇮🇹' },
+  ES: { name: 'Espagne', flag: '🇪🇸' },
+  PT: { name: 'Portugal', flag: '🇵🇹' },
+  AT: { name: 'Autriche', flag: '🇦🇹' },
+  CH: { name: 'Suisse', flag: '🇨🇭' },
+  NL: { name: 'Pays-Bas', flag: '🇳🇱' },
+  CA: { name: 'Canada', flag: '🇨🇦' },
+  GB: { name: 'Royaume-Uni', flag: '🇬🇧' },
+  AU: { name: 'Australie', flag: '🇦🇺' },
+  JP: { name: 'Japon', flag: '🇯🇵' },
+  KR: { name: 'Corée du Sud', flag: '🇰🇷' },
+  SG: { name: 'Singapour', flag: '🇸🇬' },
+  HK: { name: 'Hong Kong', flag: '🇭🇰' },
+  AE: { name: 'Émirats Arabes Unis', flag: '🇦🇪' },
+  SA: { name: 'Arabie Saoudite', flag: '🇸🇦' },
+  QA: { name: 'Qatar', flag: '🇶🇦' },
+  KW: { name: 'Koweït', flag: '🇰🇼' },
+  BH: { name: 'Bahreïn', flag: '🇧🇭' },
+  OM: { name: 'Oman', flag: '🇴🇲' },
+  JO: { name: 'Jordanie', flag: '🇯🇴' },
+  LB: { name: 'Liban', flag: '🇱🇧' },
+  EG: { name: 'Égypte', flag: '🇪🇬' },
+  MA: { name: 'Maroc', flag: '🇲🇦' },
+  TN: { name: 'Tunisie', flag: '🇹🇳' },
+  DZ: { name: 'Algérie', flag: '🇩🇿' },
+  SN: { name: 'Sénégal', flag: '🇸🇳' },
+  CI: { name: 'Côte d\'Ivoire', flag: '🇨🇮' },
+  NG: { name: 'Nigeria', flag: '🇳🇬' },
+  KE: { name: 'Kenya', flag: '🇰🇪' },
+  ZA: { name: 'Afrique du Sud', flag: '🇿🇦' },
+  BR: { name: 'Brésil', flag: '🇧🇷' },
+  MX: { name: 'Mexique', flag: '🇲🇽' },
+  AR: { name: 'Argentine', flag: '🇦🇷' },
+  CL: { name: 'Chili', flag: '🇨🇱' },
+  PE: { name: 'Pérou', flag: '🇵🇪' },
+  CO: { name: 'Colombie', flag: '🇨🇴' },
+  VE: { name: 'Venezuela', flag: '🇻🇪' },
+  EC: { name: 'Équateur', flag: '🇪🇨' },
+  UY: { name: 'Uruguay', flag: '🇺🇾' },
+  PY: { name: 'Paraguay', flag: '🇵🇾' },
+  BO: { name: 'Bolivie', flag: '🇧🇴' },
+  IN: { name: 'Inde', flag: '🇮🇳' },
+  CN: { name: 'Chine', flag: '🇨🇳' },
+  TH: { name: 'Thaïlande', flag: '🇹🇭' },
+  VN: { name: 'Vietnam', flag: '🇻🇳' },
+  ID: { name: 'Indonésie', flag: '🇮🇩' },
+  MY: { name: 'Malaisie', flag: '🇲🇾' },
+  PH: { name: 'Philippines', flag: '🇵🇭' },
+  TR: { name: 'Turquie', flag: '🇹🇷' },
+  IL: { name: 'Israël', flag: '🇮🇱' },
+  RU: { name: 'Russie', flag: '🇷🇺' },
+  UA: { name: 'Ukraine', flag: '🇺🇦' },
+  PL: { name: 'Pologne', flag: '🇵🇱' },
+  CZ: { name: 'République Tchèque', flag: '🇨🇿' },
+  HU: { name: 'Hongrie', flag: '🇭🇺' },
+  RO: { name: 'Roumanie', flag: '🇷🇴' },
+  BG: { name: 'Bulgarie', flag: '🇧🇬' },
+  HR: { name: 'Croatie', flag: '🇭🇷' },
+  SI: { name: 'Slovénie', flag: '🇸🇮' },
+  SK: { name: 'Slovaquie', flag: '🇸🇰' },
+  LT: { name: 'Lituanie', flag: '🇱🇹' },
+  LV: { name: 'Lettonie', flag: '🇱🇻' },
+  EE: { name: 'Estonie', flag: '🇪🇪' },
+  FI: { name: 'Finlande', flag: '🇫🇮' },
+  SE: { name: 'Suède', flag: '🇸🇪' },
+  NO: { name: 'Norvège', flag: '🇳🇴' },
+  DK: { name: 'Danemark', flag: '🇩🇰' },
+  IS: { name: 'Islande', flag: '🇮🇸' },
+  IE: { name: 'Irlande', flag: '🇮🇪' },
+  NZ: { name: 'Nouvelle-Zélande', flag: '🇳🇿' },
+};
+
+export const CountrySelectionTemplate: React.FC<CountrySelectionTemplateProps> = ({
+  component,
+  value,
+  onValueChange,
+  error,
+  language = 'en',
+}) => {
+  const config = component.config as CountrySelectionConfig;
+  const allowedCountries = config.allowed_countries || Object.keys(countryData);
+  const defaultCountry = config.default_country || 'FR';
+
+  const getLocalizedText = (text: LocalizedText): string => {
+    return text[language] || 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));
+
+  return (
+    <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,
+              selectedValue === country.code && styles.selectedCountryOption
+            ]}
+            onPress={() => onValueChange(country.code)}
+          >
+            <Text style={styles.countryFlag}>{country.flag}</Text>
+            <View style={styles.countryContent}>
+              <Text style={[
+                styles.countryName,
+                selectedValue === country.code && styles.selectedCountryName
+              ]}>
+                {country.name}
+              </Text>
+              <Text style={styles.countryCode}>{country.code}</Text>
+            </View>
+            {selectedValue === country.code && (
+              <View style={[
+                styles.checkmark,
+                { backgroundColor: component.ui.themeColor || '#2DBD60' }
+              ]}>
+                <Text style={styles.checkmarkText}>✓</Text>
+              </View>
+            )}
+          </TouchableOpacity>
+        ))}
+      </ScrollView>
+
+      {selectedValue && (
+        <View style={styles.selectionInfo}>
+          <Text style={styles.selectionText}>
+            Pays sélectionné: {countryData[selectedValue]?.flag} {countryData[selectedValue]?.name}
+          </Text>
+        </View>
+      )}
+
+      {config.required && !selectedValue && (
+        <View style={styles.requiredContainer}>
+          <Text style={styles.requiredText}>⚠️ Veuillez sélectionner un pays</Text>
+        </View>
+      )}
+
+      {error && (
+        <Text style={styles.errorText}>{error}</Text>
+      )}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    padding: 16,
+  },
+  title: {
+    fontSize: 24,
+    fontWeight: 'bold',
+    color: '#333',
+    marginBottom: 8,
+    textAlign: 'center',
+  },
+  description: {
+    fontSize: 16,
+    color: '#666',
+    textAlign: 'center',
+    marginBottom: 24,
+    lineHeight: 22,
+  },
+  countriesContainer: {
+    flex: 1,
+  },
+  countryOption: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    padding: 16,
+    backgroundColor: 'white',
+    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: '#2DBD60',
+    backgroundColor: '#f0f9f0',
+  },
+  countryFlag: {
+    fontSize: 32,
+    marginRight: 16,
+  },
+  countryContent: {
+    flex: 1,
+  },
+  countryName: {
+    fontSize: 18,
+    fontWeight: '600',
+    color: '#333',
+  },
+  selectedCountryName: {
+    color: '#2DBD60',
+  },
+  countryCode: {
+    fontSize: 14,
+    color: '#666',
+    marginTop: 4,
+    fontWeight: '500',
+  },
+  checkmark: {
+    width: 24,
+    height: 24,
+    borderRadius: 12,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  checkmarkText: {
+    color: 'white',
+    fontSize: 16,
+    fontWeight: 'bold',
+  },
+  selectionInfo: {
+    backgroundColor: '#f0f9f0',
+    padding: 16,
+    borderRadius: 8,
+    marginTop: 16,
+    alignItems: 'center',
+  },
+  selectionText: {
+    fontSize: 16,
+    fontWeight: '600',
+    color: '#2DBD60',
+  },
+  requiredContainer: {
+    backgroundColor: '#fff3cd',
+    padding: 16,
+    borderRadius: 8,
+    marginTop: 16,
+    alignItems: 'center',
+  },
+  requiredText: {
+    fontSize: 16,
+    fontWeight: '600',
+    color: '#856404',
+  },
+  errorText: {
+    color: '#dc2626',
+    fontSize: 14,
+    marginTop: 8,
+    textAlign: 'center',
+  },
+});