@transfergratis/react-native-sdk 0.1.2

package/build/components/KYCElements/CompletionStep.js

@@ -0,0 +1,147 @@
+import React from 'react';
+import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
+export const CompletionStep = ({ 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',
+    },
+});
+//# sourceMappingURL=CompletionStep.js.map

package/build/components/KYCElements/CompletionStep.js.map

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

package/build/components/KYCElements/CountrySelection.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { KYCElement } from '../../types/KYC.types';
+interface CountrySelectionProps {
+    element: KYCElement;
+    value?: string;
+    onValueChange: (value: string) => void;
+    error?: string;
+}
+export declare const CountrySelection: React.FC<CountrySelectionProps>;
+export {};
+//# sourceMappingURL=CountrySelection.d.ts.map

package/build/components/KYCElements/CountrySelection.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CountrySelection.d.ts","sourceRoot":"","sources":["../../../src/components/KYCElements/CountrySelection.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,UAAU,EAAoB,MAAM,uBAAuB,CAAC;AAErE,UAAU,qBAAqB;IAC7B,OAAO,EAAE,UAAU,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAgBD,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CAiD5D,CAAC"}

package/build/components/KYCElements/CountrySelection.js

@@ -0,0 +1,147 @@
+import React from 'react';
+import { View, Text, TouchableOpacity, StyleSheet, ScrollView } from 'react-native';
+const defaultCountries = [
+    { 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 = ({ 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',
+    },
+});
+//# sourceMappingURL=CountrySelection.js.map

package/build/components/KYCElements/CountrySelection.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CountrySelection.js","sourceRoot":"","sources":["../../../src/components/KYCElements/CountrySelection.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from 'react';\nimport { View, Text, TouchableOpacity, StyleSheet, ScrollView } from 'react-native';\nimport { KYCElement, KYCElementOption } from '../../types/KYC.types';\n\ninterface CountrySelectionProps {\n  element: KYCElement;\n  value?: string;\n  onValueChange: (value: string) => void;\n  error?: string;\n}\n\nconst defaultCountries: KYCElementOption[] = [\n  { value: 'FR', label: 'France', icon: '🇫🇷' },\n  { value: 'BE', label: 'Belgique', icon: '🇧🇪' },\n  { value: 'LU', label: 'Luxembourg', icon: '🇱🇺' },\n  { value: 'DE', label: 'Allemagne', icon: '🇩🇪' },\n  { value: 'IT', label: 'Italie', icon: '🇮🇹' },\n  { value: 'ES', label: 'Espagne', icon: '🇪🇸' },\n  { value: 'PT', label: 'Portugal', icon: '🇵🇹' },\n  { value: 'AT', label: 'Autriche', icon: '🇦🇹' },\n  { value: 'CH', label: 'Suisse', icon: '🇨🇭' },\n  { value: 'NL', label: 'Pays-Bas', icon: '🇳🇱' },\n  { value: 'OTHER', label: 'Autre', icon: '🌍' },\n];\n\nexport const CountrySelection: React.FC<CountrySelectionProps> = ({\n  element,\n  value,\n  onValueChange,\n  error,\n}) => {\n  const countries = element.options || defaultCountries;\n\n  return (\n    <View style={styles.container}>\n      <Text style={styles.title}>{element.title}</Text>\n      <Text style={styles.description}>{element.description}</Text>\n      \n      <ScrollView style={styles.optionsContainer} showsVerticalScrollIndicator={false}>\n        {countries.map((country) => (\n          <TouchableOpacity\n            key={country.value}\n            style={[\n              styles.option,\n              value === country.value && styles.selectedOption\n            ]}\n            onPress={() => onValueChange(country.value)}\n          >\n            <Text style={styles.optionIcon}>{country.icon}</Text>\n            <View style={styles.optionContent}>\n              <Text style={[\n                styles.optionLabel,\n                value === country.value && styles.selectedOptionLabel\n              ]}>\n                {country.label}\n              </Text>\n              {country.description && (\n                <Text style={styles.optionDescription}>{country.description}</Text>\n              )}\n            </View>\n            {value === country.value && (\n              <View style={styles.checkmark}>\n                <Text style={styles.checkmarkText}>✓</Text>\n              </View>\n            )}\n          </TouchableOpacity>\n        ))}\n      </ScrollView>\n\n      {error && (\n        <Text style={styles.errorText}>{error}</Text>\n      )}\n    </View>\n  );\n};\n\nconst styles = StyleSheet.create({\n  container: {\n    flex: 1,\n    padding: 16,\n  },\n  title: {\n    fontSize: 24,\n    fontWeight: 'bold',\n    color: '#333',\n    marginBottom: 8,\n    textAlign: 'center',\n  },\n  description: {\n    fontSize: 16,\n    color: '#666',\n    textAlign: 'center',\n    marginBottom: 24,\n    lineHeight: 22,\n  },\n  optionsContainer: {\n    flex: 1,\n  },\n  option: {\n    flexDirection: 'row',\n    alignItems: 'center',\n    padding: 16,\n    backgroundColor: 'white',\n    borderRadius: 12,\n    marginBottom: 12,\n    borderWidth: 2,\n    borderColor: '#e5e5e5',\n    shadowColor: '#000',\n    shadowOffset: {\n      width: 0,\n      height: 2,\n    },\n    shadowOpacity: 0.1,\n    shadowRadius: 3.84,\n    elevation: 5,\n  },\n  selectedOption: {\n    borderColor: '#4CAF50',\n    backgroundColor: '#f0f9f0',\n  },\n  optionIcon: {\n    fontSize: 32,\n    marginRight: 16,\n  },\n  optionContent: {\n    flex: 1,\n  },\n  optionLabel: {\n    fontSize: 18,\n    fontWeight: '600',\n    color: '#333',\n  },\n  selectedOptionLabel: {\n    color: '#4CAF50',\n  },\n  optionDescription: {\n    fontSize: 14,\n    color: '#666',\n    marginTop: 4,\n  },\n  checkmark: {\n    width: 24,\n    height: 24,\n    borderRadius: 12,\n    backgroundColor: '#4CAF50',\n    justifyContent: 'center',\n    alignItems: 'center',\n  },\n  checkmarkText: {\n    color: 'white',\n    fontSize: 16,\n    fontWeight: 'bold',\n  },\n  errorText: {\n    color: '#dc2626',\n    fontSize: 14,\n    marginTop: 8,},\n  buttonContainer: {\n    flexDirection: 'row',\n    justifyContent: 'space-between',\n    marginTop: 24,\n    gap: 10,\n  },\n  button: {\n    flex: 1,\n    padding: 12,\n    backgroundColor: '#4CAF50',\n    textAlign: 'center',\n  },\n  buttonText: {\n    color: 'white',\n    fontSize: 16,\n    fontWeight: 'bold',\n    textAlign: 'center',\n  },\n\n}); "]}

package/build/components/KYCElements/CountrySelectionTemplate.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { TemplateComponent } from '../../types/KYC.types';
+interface CountrySelectionTemplateProps {
+    component: TemplateComponent;
+    value?: string;
+    onValueChange: (value: string) => void;
+    error?: string;
+    language?: string;
+}
+export declare const CountrySelectionTemplate: React.FC<CountrySelectionTemplateProps>;
+export {};
+//# sourceMappingURL=CountrySelectionTemplate.d.ts.map

package/build/components/KYCElements/CountrySelectionTemplate.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CountrySelectionTemplate.d.ts","sourceRoot":"","sources":["../../../src/components/KYCElements/CountrySelectionTemplate.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,iBAAiB,EAAyC,MAAM,uBAAuB,CAAC;AAEjG,UAAU,6BAA6B;IACrC,SAAS,EAAE,iBAAiB,CAAC;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAiFD,eAAO,MAAM,wBAAwB,EAAE,KAAK,CAAC,EAAE,CAAC,6BAA6B,CAiF5E,CAAC"}

package/build/components/KYCElements/CountrySelectionTemplate.js

@@ -0,0 +1,245 @@
+import React from 'react';
+import { View, Text, TouchableOpacity, StyleSheet, ScrollView } from 'react-native';
+const countryData = {
+    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 = ({ component, value, onValueChange, error, language = 'en', }) => {
+    const config = component.config;
+    const allowedCountries = config.allowed_countries || Object.keys(countryData);
+    const defaultCountry = config.default_country || 'FR';
+    const getLocalizedText = (text) => {
+        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',
+    },
+});
+//# sourceMappingURL=CountrySelectionTemplate.js.map

package/build/components/KYCElements/CountrySelectionTemplate.js.map

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