@transfergratis/react-native-sdk 0.1.4 → 0.1.6

package/src/components/TemplateKYCFlowRefactored.tsx

@@ -1,34 +1,42 @@
 import React from 'react';
-import { View, Text, StyleSheet, SafeAreaView, TouchableOpacity } from 'react-native';
-import { KYCTemplate } from '../types/KYC.types';
+import { View, Text, StyleSheet, SafeAreaView, TouchableOpacity, ActivityIndicator, Dimensions } from 'react-native';
+import { KYCTemplate, VerificationState } from '../types/KYC.types';
 import { TemplateKYCFlowProvider, useTemplateKYCFlowContext } from '../hooks/useTemplateKYCFlow';
+import { useI18n } from '../hooks/useI18n';
 import { IDCardCapture } from './KYCElements/IDCardCapture';
 import { SelfieCaptureTemplate } from './KYCElements/SelfieCaptureTemplate';
 import { FileUploadTemplate } from './KYCElements/FileUploadTemplate';
 import { LocationCaptureTemplate } from './KYCElements/LocationCaptureTemplate';
 import { CountrySelectionTemplate } from './KYCElements/CountrySelectionTemplate';
+import { InitializationStep } from './KYCElements/InitializationStep';
+import { ReviewSubmitTemplate } from './KYCElements/ReviewSubmitTemplate';
+import { VerificationProgressTemplate } from './KYCElements/VerificationProgressTemplate';
 
 interface TemplateKYCFlowProps {
   template: KYCTemplate;
-  onComplete?: (data: Record<number, unknown>) => void;
+  onComplete?: (data: VerificationState) => void;
   onError?: (error: string) => void;
   language?: string;
   onCancel?: () => void;
+  API_KEY?: string;
 }
 
 export const TemplateKYCFlow: React.FC<TemplateKYCFlowProps> = ({
   template,
   onComplete,
   onError,
-  language = 'en',
+  language = 'fr',
   onCancel,
+  API_KEY,
 }) => {
   return (
     <TemplateKYCFlowProvider
       template={template}
       onComplete={onComplete}
       onError={onError}
+      onCancel={onCancel}
       initialLanguage={language}
+      apiKey={API_KEY}
     >
       <TemplateKYCFlowContent onCancel={onCancel} />
     </TemplateKYCFlowProvider>
@@ -43,20 +51,7 @@ const TemplateKYCFlowContent: React.FC<{ onCancel?: () => void }> = ({ onCancel
     progress,
   } = useTemplateKYCFlowContext();
 
-  // Fonction pour déterminer le côté actuel d'une carte d'identité
-  const getCurrentSideForComponent = (componentId: number): string => {
-    const component = state.template.components.find(c => c.id === componentId);
-    if (!component || component.type !== 'id_card') return 'front';
-
-    const idConfig = component.config as any;
-    const sides = idConfig.sides || ['front', 'back'];
-
-    // Calculer le côté basé sur l'ordre dans le template
-    const componentIndex = state.template.components.findIndex(c => c.id === componentId);
-    const sideIndex = componentIndex % sides.length;
-
-    return sides[sideIndex];
-  };
+  const { t } = useI18n();
 
   const updateComponentData = (componentId: number, data: unknown) => {
     actions.updateComponentData(componentId, data);
@@ -65,7 +60,7 @@ const TemplateKYCFlowContent: React.FC<{ onCancel?: () => void }> = ({ onCancel
   if (!currentComponent) {
     return (
       <View style={styles.container}>
-        <Text style={styles.errorText}>Aucun composant trouvé</Text>
+        <Text style={styles.errorText}>{t('errors.unknownError')}</Text>
       </View>
     );
   }
@@ -80,9 +75,13 @@ const TemplateKYCFlowContent: React.FC<{ onCancel?: () => void }> = ({ onCancel
       language: state.currentLanguage,
     };
 
+    if (!state.session.isInitialized) {
+      return <InitializationStep session={state.session} />
+    }
+
     switch (currentComponent.type) {
       case 'id_card':
-        return <IDCardCapture {...commonProps} currentSide={getCurrentSideForComponent(currentComponent.id)} />;
+        return <IDCardCapture {...commonProps} />;
 
       case 'selfie':
         return <SelfieCaptureTemplate {...commonProps} />;
@@ -96,11 +95,17 @@ const TemplateKYCFlowContent: React.FC<{ onCancel?: () => void }> = ({ onCancel
       case 'country_selection':
         return <CountrySelectionTemplate {...commonProps} />;
 
+      case 'review_submit':
+        return <ReviewSubmitTemplate {...commonProps} />;
+
+      case 'verification_progress':
+        return <VerificationProgressTemplate {...commonProps} />;
+
       default:
         return (
           <View style={styles.unsupportedContainer}>
             <Text style={styles.unsupportedText}>
-              Type de composant non supporté: {currentComponent.type}
+              {t('errors.unknownError')}: {currentComponent.type}
             </Text>
           </View>
         );
@@ -108,38 +113,48 @@ const TemplateKYCFlowContent: React.FC<{ onCancel?: () => void }> = ({ onCancel
   };
 
   return (
-    <SafeAreaView style={styles.container}>
-      {/* Header avec informations sur l'étape */}
-      {state.showCustomStepper ? (
-        <View style={styles.header}>
-          <Text style={styles.progressText}>
-            Étape {state.currentComponentIndex + 1} sur {state.template.components.length}
-          </Text>
-          <View style={styles.progressContainer}>
-            <View style={styles.progressBar}>
-              <View
-                style={[
-                  styles.progressFill,
-                  { width: `${progress}%` }
-                ]}
-              />
+    <View style={{ flex: 1 }}>
+      {state.isProcessing && (
+        <View style={styles.processingContainer}>
+          <Text style={styles.processingText}>{t('common.loading')}</Text>
+          <ActivityIndicator size="large" color="#fff" />
+        </View>
+      )}
+      <SafeAreaView style={styles.container}>
+        {/* Header avec informations sur l'étape */}
+
+        {(state.showCustomStepper && state.session.isInitialized) ? (
+          <View style={styles.header}>
+            <Text style={styles.progressText}>
+              {t('kyc.step', { current: state.currentComponentIndex + 1, total: state.template.components.length })}
+            </Text>
+            <View style={styles.progressContainer}>
+              <View style={styles.progressBar}>
+                <View
+                  style={[
+                    styles.progressFill,
+                    { width: `${progress}%` }
+                  ]}
+                />
+              </View>
+
             </View>
 
+            <View style={{ position: 'absolute', right: 12, top: 12 }}>
+              <TouchableOpacity onPress={onCancel} disabled={!onCancel} style={{ opacity: onCancel ? 1 : 0.5 }}>
+                <Text style={{ fontSize: 20, fontWeight: 'bold', color: '#333' }}>{`X`}</Text>
+              </TouchableOpacity>
+            </View>
           </View>
+        ) : null}
 
-          <View style={{ position: 'absolute', right: 12, top: 12 }}>
-            <TouchableOpacity onPress={onCancel} disabled={!onCancel} style={{ opacity: onCancel ? 1 : 0.5 }}>
-              <Text style={{ fontSize: 20, fontWeight: 'bold', color: '#333' }}>{`X`}</Text>
-            </TouchableOpacity>
-          </View>
+        {/* Contenu principal */}
+        <View style={styles.content}>
+          {renderCurrentComponent()}
         </View>
-      ) : null}
+      </SafeAreaView>
+    </View>
 
-      {/* Contenu principal */}
-      <View style={styles.content}>
-        {renderCurrentComponent()}
-      </View>
-    </SafeAreaView>
   );
 };
 
@@ -147,7 +162,7 @@ const styles = StyleSheet.create({
   container: {
     flex: 1,
     backgroundColor: '#f5f5f5',
-    
+
   },
   header: {
     backgroundColor: 'white',
@@ -260,4 +275,21 @@ const styles = StyleSheet.create({
     color: '#666',
     textAlign: 'center',
   },
+  processingContainer: {
+    position: 'absolute',
+    flex: 1,
+    width: Dimensions.get('window').width,
+    height: Dimensions.get('window').height,
+    backgroundColor: 'rgba(0, 0, 0, 0.5)',
+    justifyContent: 'center',
+    alignItems: 'center',
+    zIndex: 1000,
+  },
+  processingText: {
+    fontSize: 16,
+    color: '#fff',
+    textAlign: 'center',
+    fontWeight: 'bold',
+    marginBottom: 10,
+  },
 }); 

package/src/components/example/OrientationVideoExample.tsx

@@ -6,21 +6,17 @@ import {
   TouchableOpacity,
   Alert,
   ScrollView,
-} from 'react-native';
-import KYCService from '../../modules/api/KYCService';
+} from 'react-native'; 
 import { OrientationVideoResult } from '../../types/KYC.types';
 import OrientationVideoCaptureEnhanced from '../KYCElements/OrientationVideoCaptureEnhanced';
+import kycService from '../../modules/api/KYCService';
 
 const OrientationVideoExample: React.FC = () => {
   const [showVideoCapture, setShowVideoCapture] = useState(false);
   const [result, setResult] = useState<OrientationVideoResult | null>(null);
   const [isLoading] = useState(false);
 
-  // Initialize KYC Service with your API configuration
-  const kycService = new KYCService(
-    'http://18.188.180.154:8001/', // Replace with your actual API base URL
-    '1234567890' // Replace with your actual API key
-  );
+  
 
   const handleComplete = (orientationResult: OrientationVideoResult) => {
     setResult(orientationResult);

package/src/config/countriesData.ts

@@ -0,0 +1,84 @@
+import { Country } from "../types/KYC.types";
+
+
+
+
+
+export const countryData: Record<string, Country> = {
+    FR: { name: 'France', name_en: "France", flag: '🇫🇷' },
+    CM: { name: 'Cameroun', name_en: "Cameroon", flag: '🇨🇲' },
+    US: { name: 'États-Unis', name_en: "United States of America", flag: '🇺🇸' },
+    DE: { name: 'Allemagne', name_en: "Germany", flag: '🇩🇪' },
+    BE: { name: 'Belgique', name_en: "Belgium", flag: '🇧🇪' },
+    LU: { name: 'Luxembourg', name_en: "Luxembourg", flag: '🇱🇺' },
+    IT: { name: 'Italie', name_en: "Italy", flag: '🇮🇹' },
+    ES: { name: 'Espagne', name_en: "Spain", flag: '🇪🇸' },
+    PT: { name: 'Portugal', name_en: "Portugal", flag: '🇵🇹' },
+    AT: { name: 'Autriche', name_en: "Austria", flag: '🇦🇹' },
+    CH: { name: 'Suisse', name_en: "Switzerland", flag: '🇨🇭' },
+    NL: { name: 'Pays-Bas', name_en: "Netherlands", flag: '🇳🇱' },
+    CA: { name: 'Canada', name_en: "Canada", flag: '🇨🇦', hasRegions: true },
+    GB: { name: 'Royaume-Uni', name_en: "United Kingdom", flag: '🇬🇧' },
+    AU: { name: 'Australie', name_en: "Australia", flag: '🇦🇺' },
+    JP: { name: 'Japon', name_en: "Japan", flag: '🇯🇵' },
+    KR: { name: 'Corée du Sud', name_en: "South Korea", flag: '🇰🇷' },
+    SG: { name: 'Singapour', name_en: "Singapore", flag: '🇸🇬' },
+    HK: { name: 'Hong Kong', name_en: "Hong Kong", flag: '🇭🇰' },
+    AE: { name: 'Émirats Arabes Unis', name_en: "United Arab Emirates", flag: '🇦🇪' },
+    SA: { name: 'Arabie Saoudite', name_en: "Saudi Arabia", flag: '🇸🇦' },
+    QA: { name: 'Qatar', name_en: "Qatar", flag: '🇶🇦' },
+    KW: { name: 'Koweït', name_en: "Kuwait", flag: '🇰🇼' },
+    BH: { name: 'Bahreïn', name_en: "Bahrain", flag: '🇧🇭' },
+    OM: { name: 'Oman', name_en: "Oman", flag: '🇴🇲' },
+    JO: { name: 'Jordanie', name_en: "Jordan", flag: '🇯🇴' },
+    LB: { name: 'Liban', name_en: "Lebanon", flag: '🇱🇧' },
+    EG: { name: 'Égypte', name_en: "Egypt", flag: '🇪🇬' },
+    MA: { name: 'Maroc', name_en: "Morocco", flag: '🇲🇦' },
+    TN: { name: 'Tunisie', name_en: "Tunisia", flag: '🇹🇳' },
+    DZ: { name: 'Algérie', name_en: "Algeria", flag: '🇩🇿' },
+    SN: { name: 'Sénégal', name_en: "Senegal", flag: '🇸🇳' },
+    CI: { name: 'Côte d\'Ivoire', name_en: "Ivory Coast", flag: '🇨🇮' },
+    NG: { name: 'Nigeria', name_en: "Nigeria", flag: '🇳🇬' },
+    KE: { name: 'Kenya', name_en: "Kenya", flag: '🇰🇪' },
+    ZA: { name: 'Afrique du Sud', name_en: "South Africa", flag: '🇿🇦' },
+    BR: { name: 'Brésil', name_en: "Brazil", flag: '🇧🇷' },
+    MX: { name: 'Mexique', name_en: "Mexico", flag: '🇲🇽' },
+    AR: { name: 'Argentine', name_en: "Argentina", flag: '🇦🇷' },
+    CL: { name: 'Chili', name_en: "Chile", flag: '🇨🇱' },
+    PE: { name: 'Pérou', name_en: "Peru", flag: '🇵🇪' },
+    CO: { name: 'Colombie', name_en: "Colombia", flag: '🇨🇴' },
+    VE: { name: 'Venezuela', name_en: "Venezuela", flag: '🇻🇪' },
+    EC: { name: 'Équateur', name_en: "Ecuador", flag: '🇪🇨' },
+    UY: { name: 'Uruguay', name_en: "Uruguay", flag: '🇺🇾' },
+    PY: { name: 'Paraguay', name_en: "Paraguay", flag: '🇵🇾' },
+    BO: { name: 'Bolivie', name_en: "Bolivia", flag: '🇧🇴' },
+    IN: { name: 'Inde', name_en: "India", flag: '🇮🇳' },
+    CN: { name: 'Chine', name_en: "China", flag: '🇨🇳' },
+    TH: { name: 'Thaïlande', name_en: "Thailand", flag: '🇹🇭' },
+    VN: { name: 'Vietnam', name_en: "Vietnam", flag: '🇻🇳' },
+    ID: { name: 'Indonésie', name_en: "Indonesia", flag: '🇮🇩' },
+    MY: { name: 'Malaisie', name_en: "Malaysia", flag: '🇲🇾' },
+    PH: { name: 'Philippines', name_en: "Philippines", flag: '🇵🇭' },
+    TR: { name: 'Turquie', name_en: "Turkey", flag: '🇹🇷' },
+    IL: { name: 'Israël', name_en: "Israel", flag: '🇮🇱' },
+    RU: { name: 'Russie', name_en: "Russia", flag: '🇷🇺' },
+    UA: { name: 'Ukraine', name_en: "Ukraine", flag: '🇺🇦' },
+    PL: { name: 'Pologne', name_en: "Poland", flag: '🇵🇱' },
+    CZ: { name: 'République Tchèque', name_en: "Czech Republic", flag: '🇨🇿' },
+    HU: { name: 'Hongrie', name_en: "Hungary", flag: '🇭🇺' },
+    RO: { name: 'Roumanie', name_en: "Romania", flag: '🇷🇴' },
+    BG: { name: 'Bulgarie', name_en: "Bulgaria", flag: '🇧🇬' },
+    HR: { name: 'Croatie', name_en: "Croatia", flag: '🇭🇷' },
+    SI: { name: 'Slovénie', name_en: "Slovenia", flag: '🇸🇮' },
+    SK: { name: 'Slovaquie', name_en: "Slovakia", flag: '🇸🇰' },
+    LT: { name: 'Lituanie', name_en: "Lithuania", flag: '🇱🇹' },
+    LV: { name: 'Lettonie', name_en: "Latvia", flag: '🇱🇻' },
+    EE: { name: 'Estonie', name_en: "Estonia", flag: '🇪🇪' },
+    FI: { name: 'Finlande', name_en: "Finland", flag: '🇫🇮' },
+    SE: { name: 'Suède', name_en: "Sweden", flag: '🇸🇪' },
+    NO: { name: 'Norvège', name_en: "Norway", flag: '🇳🇴' },
+    DK: { name: 'Danemark', name_en: "Denmark", flag: '🇩🇰' },
+    IS: { name: 'Islande', name_en: "Iceland", flag: '🇮🇸' },
+    IE: { name: 'Irlande', name_en: "Ireland", flag: '🇮🇪' },
+    NZ: { name: 'Nouvelle-Zélande', name_en: "New Zealand", flag: '🇳🇿' },
+};