@transfergratis/react-native-sdk 0.1.4 → 0.1.5

package/src/components/KYCElements/VerificationProgressTemplate.tsx

@@ -0,0 +1,123 @@
+import React from 'react';
+import { View, Text, StyleSheet, TouchableOpacity } from 'react-native';
+import { TemplateComponent } from '../../types/KYC.types';
+import { useTemplateKYCFlowContext } from '../../hooks/useTemplateKYCFlow';
+import { useI18n } from '../../hooks/useI18n';
+
+interface VerificationProgressTemplateProps {
+  component: TemplateComponent;
+  value: unknown;
+  onValueChange: (data: unknown) => void;
+  error?: string;
+  language?: string;
+}
+
+export const VerificationProgressTemplate: React.FC<VerificationProgressTemplateProps> = () => {
+  const { t } = useI18n();
+  const { state, actions } = useTemplateKYCFlowContext();
+
+  const verification = state.verification;
+
+  const isSuccess = verification.status === 'success';
+  const isFailed = verification.status === 'failed';
+
+  if (isSuccess) {
+    return (
+      <View style={styles.container}>
+        <Text style={styles.title}>{t('kyc.verificationProgress.steps.complete')}</Text>
+        <Text style={styles.subtitle}>{t('kyc.verificationProgress.subtitle')}</Text>
+        <TouchableOpacity style={[styles.button, styles.primary]} onPress={() => actions.resetTemplate()}>
+          <Text style={styles.buttonText}>{t('common.continue')}</Text>
+        </TouchableOpacity>
+        {verification.result?.referenceId ? (
+          <Text style={styles.refText}>{`Verification ID: ${verification.result.referenceId}`}</Text>
+        ) : null}
+      </View>
+    );
+  }
+
+  if (isFailed) {
+    return (
+      <View style={styles.container}>
+        <Text style={styles.title}>{t('kyc.verificationProgress.status.failed')}</Text>
+        <Text style={styles.subtitle}>{t('errors.validationError')}</Text>
+        <View style={styles.issuesBox}>
+          <Text style={styles.issuesTitle}>{t('common.error')}</Text>
+          {(verification.result?.issues || []).map((issue, idx) => (
+            <Text key={idx} style={styles.issueItem}>• {issue}</Text>
+          ))}
+        </View>
+        <TouchableOpacity style={[styles.button, styles.primary]} onPress={() => actions.goToComponent( state.template.components.find(c=>c.type!=='review_submit' && c.type!=='verification_progress')?.id || 0)}>
+          <Text style={styles.buttonText}>{t('common.retry')}</Text>
+        </TouchableOpacity>
+        <TouchableOpacity style={[styles.button, styles.secondary]}>
+          <Text style={styles.secondaryText}>{t('common.info')}</Text>
+        </TouchableOpacity>
+        {verification.result?.referenceId ? (
+          <Text style={styles.refText}>{`Reference ID: ${verification.result.referenceId}`}</Text>
+        ) : null}
+      </View>
+    );
+  }
+
+  return (
+    <View style={styles.container}>
+      <Text style={styles.title}>{t('kyc.verificationProgress.title')}</Text>
+      <Text style={styles.subtitle}>{t('kyc.verificationProgress.estimatedTime')}</Text>
+
+      <View style={styles.timeline}>
+        <View style={[styles.dot, styles.done]}><Text style={styles.stepCheckmark}>✓</Text></View>
+        <View style={styles.line} />
+        <View style={[styles.dot, styles.active]}><Text style={styles.stepCheckmark}>2</Text></View>
+        <View style={styles.line} />
+        <View style={[styles.dot, styles.pending]}><Text style={styles.stepCheckmark}>3</Text></View>
+      </View>
+
+      <View style={styles.row}>
+        <Text style={styles.stepLabel}>{t('kyc.verificationProgress.status.completed')}</Text>
+        <Text style={styles.stepLabel}>{t('kyc.verificationProgress.steps.analyzing')}</Text>
+        <Text style={styles.stepLabel}>{t('kyc.verificationProgress.steps.verifying')}</Text>
+      </View>
+
+      <View style={styles.card}>
+        <Text style={styles.cardTitle}>{t('kyc.idCardCapture.title')}</Text>
+        <Text style={styles.cardLine}>{t('kyc.verificationProgress.steps.extracting')}</Text>
+        <Text style={styles.cardTitle}>{t('kyc.selfieCapture.title')}</Text>
+        <Text style={styles.cardLine}>{t('kyc.verificationProgress.steps.analyzing')}</Text>
+        <Text style={styles.cardTitle}>{t('kyc.verificationProgress.title')}</Text>
+        <Text style={styles.cardLine}>{t('kyc.verificationProgress.status.pending')}</Text>
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: { flex: 1, width: '100%', paddingHorizontal: 16, paddingVertical: 12 },
+  title: { fontSize: 24, fontWeight: 'bold', color: '#111827', textAlign: 'center', marginTop: 12 },
+  subtitle: { fontSize: 14, color: '#6B7280', textAlign: 'center', marginTop: 8 },
+  timeline: { flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', marginTop: 24 },
+  dot: { width: 38, height: 38, borderRadius: 34, justifyContent: 'center', alignItems: 'center' },
+  stepCheckmark: { color: 'white', fontSize: 16, fontWeight: 'bold' },
+  line: { flex: 1, height: 4, backgroundColor: '#E5E7EB' },
+  done: { backgroundColor: '#10B981' },
+  active: { backgroundColor: '#F59E0B' },
+  pending: { backgroundColor: '#E5E7EB' },
+  row: { flexDirection: 'row', justifyContent: 'space-between', marginTop: 8 },
+  stepLabel: { fontSize: 14, color: '#111827', fontWeight: '600' },
+  card: { backgroundColor: 'white', padding: 16, borderRadius: 16, marginTop: 24 },
+  cardTitle: { fontSize: 16, color: '#6B7280', marginTop: 8 },
+  cardLine: { fontSize: 18, color: '#111827', fontWeight: '600', marginTop: 2 },
+  // Success/Failure specific
+  button: { paddingVertical: 14, borderRadius: 10, alignItems: 'center', marginTop: 20 },
+  primary: { backgroundColor: '#2DBD60' },
+  buttonText: { color: 'white', fontSize: 16, fontWeight: '600' },
+  refText: { marginTop: 12, textAlign: 'center', color: '#6B7280' },
+  issuesBox: { backgroundColor: '#FEF2F2', borderRadius: 16, padding: 16, marginTop: 20 },
+  issuesTitle: { color: '#991B1B', fontWeight: '700', marginBottom: 8 },
+  issueItem: { color: '#991B1B', marginTop: 4 },
+  secondary: { backgroundColor: '#F3F4F6' },
+  secondaryText: { color: '#111827', fontSize: 16, fontWeight: '600' },
+});
+
+
+

package/src/components/OverLay/IdCard.tsx

@@ -7,18 +7,18 @@ import StepOverlay from "./StepOverlay";
 
 
 
-const IdCardOverlay = ({ xMin: xMinProps, yMin: yMinProps, xMax: xMaxProps, yMax: yMaxProps, cornerOpacity, instructions, cornerColor = "#4CAF50", stepperProps }: IdCardOverlayProps) => {
+const IdCardOverlay = ({ xMin: xMinProps, yMin: yMinProps, xMax: xMaxProps, yMax: yMaxProps, cornerOpacity, instructions, cornerColor = "#4CAF50", stepperProps, isSuccess, language  }: IdCardOverlayProps) => {
     const screenWidth = Dimensions.get('window').width;
     const screenHeight = Dimensions.get('window').height;
 
     const boxWidth = xMaxProps - xMinProps;
     const boxHeight = yMaxProps - yMinProps;
 
-
     
 
-   
-    
+
+
+
     // Calculer les coordonnées pour centrer le cadre
     const xMin = (screenWidth - boxWidth) / 2;
     const yMin = (screenHeight - boxHeight) / 3;
@@ -30,7 +30,7 @@ const IdCardOverlay = ({ xMin: xMinProps, yMin: yMinProps, xMax: xMaxProps, yMax
             {stepperProps ? (
                 <StepOverlay {...stepperProps} />
             ) : null}
-            
+
             <Animated.View style={[styles.topIntruction]}>
                 <Text style={styles.topIntructionText}>
                     💡 {instructions}
@@ -134,15 +134,23 @@ const IdCardOverlay = ({ xMin: xMinProps, yMin: yMinProps, xMax: xMaxProps, yMax
                     opacity={cornerOpacity}
                 />
             </Svg>
-            
-            <ScanningLine yMin={yMin} screenWidth={screenWidth} height={screenHeight} yMax={yMax} />
+            {isSuccess ? null : (
+                <ScanningLine yMin={yMin} screenWidth={screenWidth} height={screenHeight} yMax={yMax} />
+            )}
+            {/* <ScanningLine yMin={yMin} screenWidth={screenWidth} height={screenHeight} yMax={yMax} /> */}
 
             <View style={styles.bottomIntruction}>
                 <Text style={styles.bottomTitle}>
-                    Mesurez 100cm de hauteur.
+                    {language === "en" ? "Measure 100cm in height.":"Mesurez 100cm de hauteur."}
+                  
                 </Text>
                 <Text style={styles.bottomSubtitle}>
-                    Ne pas déplacer la caméra pendant la capture. • Ne pas déplacer la caméra pendant la capture.
+                    {
+                        language === "en" 
+                          ? "Do not move the camera during capture. • Do not move the camera during capture."
+                          : "Ne pas déplacer la caméra pendant la capture. • Ne pas déplacer la caméra pendant la capture."
+                    }
+                    
                 </Text>
             </View>
         </View>)

package/src/components/OverLay/SelfieOverlay.tsx

@@ -6,7 +6,7 @@ import FrontSelfieIcon from "../Svgs/frontSelfieIcon";
 import StepOverlay from "./StepOverlay";
 import SideSelfieIcon from "../Svgs/sideSelfieIcon";
 
-const SelfieOverlay = ({ xMin, yMin, xMax, yMax, cornerOpacity, instructions, cornerColor = "#4CAF50", stepperProps, instructionsTile, instructionsSubtitle, orientation }: IdCardOverlayProps) => {
+const SelfieOverlay = ({ xMin, yMin, xMax, yMax, cornerOpacity, instructions, cornerColor = "#4CAF50", stepperProps, instructionsTile, instructionsSubtitle, orientation, isSuccess }: IdCardOverlayProps) => {
     const screenWidth = Dimensions.get('window').width;
     const screenHeight = Dimensions.get('window').height;
 
@@ -65,7 +65,7 @@ const SelfieOverlay = ({ xMin, yMin, xMax, yMax, cornerOpacity, instructions, co
                     fill="rgba(0, 0, 0, 0.5)"
                     mask="url(#faceMask)"
                 />
-                <ScanningLine yMin={scanningYMin} screenWidth={screenWidth} height={screenHeight} yMax={scanningYMax} />
+                {isSuccess ? null : <ScanningLine yMin={scanningYMin} screenWidth={screenWidth} height={screenHeight} yMax={scanningYMax} />}
             </Svg>
 
             {/* Container de l'icône - centré automatiquement */}
@@ -75,17 +75,17 @@ const SelfieOverlay = ({ xMin, yMin, xMax, yMax, cornerOpacity, instructions, co
                 width: iconWidth,
                 height: iconHeight,
             }]}>
-                {orientation === "front" ? <FrontSelfieIcon /> : <SideSelfieIcon />}
+                {orientation === "center" ? <FrontSelfieIcon /> : <SideSelfieIcon />}
             </View>
 
             {/* Flèche directionnelle pour les orientations latérales */}
-            {orientation !== "front" ? (
+            {orientation !== "center" ? (
                 <View style={[
                     styles.arrowContainer,
                     {
                         top: iconY + iconHeight / 2 - 50, // Centré verticalement par rapport à l'icône
                         left: orientation === "left" ? iconX - 72 : 'auto',
-                        right: orientation === "right" ? iconX-75: 'auto'
+                        right: orientation === "right" ? iconX - 75 : 'auto'
                     }
                 ]}>
                     <Image
@@ -99,6 +99,7 @@ const SelfieOverlay = ({ xMin, yMin, xMax, yMax, cornerOpacity, instructions, co
                 </View>
             ) : null}
 
+
             <View style={styles.bottomIntruction}>
                 <Text style={styles.bottomTitle}>
                     {instructionsTile}

package/src/components/OverLay/type.ts

@@ -1,3 +1,6 @@
+import { ViewStyle } from "react-native";
+import { ISilentCaptureResult } from "../../types/KYC.types";
+
 export interface IdCardOverlayProps {
     xMin: number;
     yMin: number;
@@ -9,7 +12,10 @@ export interface IdCardOverlayProps {
     stepperProps?: StepperProps;
     instructionsTile?: string;
     instructionsSubtitle?: string;
-    orientation?: 'front' | 'left' | 'right';
+    orientation?: 'center' | 'left' | 'right';
+    isAnalyzing?: boolean;
+    isSuccess?: boolean;
+    language:string
 }
 
 
@@ -18,4 +24,60 @@ interface StepperProps {
     selectedDocumentType: string;
     step: number;
     totalSteps: number;
-}
+}
+
+export interface ExtractMrzTextResponse {
+    parsed_data: {
+        mrz_type: string;
+        document_code: string;
+        issuer_code: string;
+        surname: string;
+        given_name: string;
+        document_number: string;
+        document_number_checkdigit: string;
+        nationality_code: string;
+        birth_date: string;
+        sex: string;
+        expiry_date: string;
+        optional_data: string;
+        mrz_text: string;
+        status: string;
+    },
+    success: boolean;
+}
+
+
+
+export interface EnhancedCameraViewProps {
+    instructions?: string;
+    showCamera: boolean;
+    cameraType?: 'front' | 'back';
+    style?: ViewStyle;
+    onCapture?: (result: { success: boolean; path?: string; error?: string }) => void;
+    onSilentCapture?: (result: { success: boolean; path?: string; error?: string }) => void;
+    silentCaptureResult?: ISilentCaptureResult;
+    onError?: (event: { message: string }) => void;
+    onClose?: () => void;
+    enableFlash?: boolean;
+    enableHdr?: boolean;
+    quality?: 'low' | 'medium' | 'high';
+    showCaptureButton?: boolean;
+    showSwitchCamera?: boolean;
+    overlayComponent?: React.ReactNode;
+    bbox?: {
+      xMin: number;
+      yMin: number;
+      xMax: number;
+      yMax: number;
+      borderColor?: string;
+      borderWidth?: number;
+      cornerRadius?: number;
+    };
+    canFlip?: boolean;
+    // Video recording props
+    enableVideo?: boolean;
+    isRecording?: boolean;
+    onVideoRecordingStart?: () => void;
+    onVideoRecordingStop?: (result: { success: boolean; path?: string; error?: string }) => void;
+    videoDuration?: number;
+  }

package/src/components/TemplateKYCExample.tsx

@@ -39,147 +39,72 @@ const advancedVerificationTemplate: KYCTemplate = {
       } as const
     },
     {
-      id: 1,
-      type: "id_card" as const,
+      id: 6,
+      type: "country_selection" as const,
       order: 2,
-      templateId: 1,
       labels: {
-        en: "Upload front of ID card",
-        fr: "Téléversez le recto de votre carte d'identité"
+        en: "Select your country",
+        fr: "Sélectionnez votre pays"
       },
       instructions: {
-        en: "Take a clear photo of the front of your ID.",
-        fr: "Prenez une photo nette du recto de votre pièce."
+        en: "Choose your country of residence.",
+        fr: "Choisissez votre pays de résidence."
       },
       ui: {
-        icon: "id-card-icon.png",
+        icon: "country-icon.png",
         themeColor: "#2DBD60",
-        buttonText: { en: "Next", fr: "Suivant" }
+        buttonText: { en: "Confirm", fr: "Confirmer" }
       },
       config: {
-        sides: ["front"],
-        allowed_formats: ["jpg", "png"],
-        max_size_mb: 5,
-        document_types: ["id_card", "passport", "drivers_license", "national_id"],
-        bbox_configs: {
-          id_card: {
-            xMin: 20,
-            yMin: 140,
-            xMax: 370,
-            yMax: 340,
-            borderColor: "#2DBD60",
-            borderWidth: 4,
-            cornerRadius: 12
-          },
-          passport: {
-            xMin: 15,
-            yMin: 130,
-            xMax: 375,
-            yMax: 350,
-            borderColor: "#007AFF",
-            borderWidth: 4,
-            cornerRadius: 8
-          },
-          drivers_license: {
-            xMin: 25,
-            yMin: 150,
-            xMax: 365,
-            yMax: 330,
-            borderColor: "#FF9500",
-            borderWidth: 4,
-            cornerRadius: 10
-          },
-          national_id: {
-            xMin: 20,
-            yMin: 140,
-            xMax: 370,
-            yMax: 340,
-            borderColor: "#5856D6",
-            borderWidth: 4,
-            cornerRadius: 12
-          },
-          residence_permit: {
-            xMin: 20,
-            yMin: 140,
-            xMax: 370,
-            yMax: 340,
-            borderColor: "#2DBD60",
-            borderWidth: 4,
-            cornerRadius: 12
-          },
-          voter_id: {
-            xMin: 20,
-            yMin: 140,
-            xMax: 370,
-            yMax: 340,
-            borderColor: "#2DBD60",
-            borderWidth: 4,
-            cornerRadius: 12
-          },
-          military_id: {
-            xMin: 20,
-            yMin: 140,
-            xMax: 370,
-            yMax: 340,
-            borderColor: "#2DBD60",
-            borderWidth: 4,
-            cornerRadius: 12
-          },
-          student_id: {
-            xMin: 20,
-            yMin: 140,
-            xMax: 370,
-            yMax: 340,
-            borderColor: "#2DBD60",
-            borderWidth: 4,
-            cornerRadius: 12
-          },
-          work_permit: {
-            xMin: 20,
-            yMin: 140,
-            xMax: 370,
-            yMax: 340,
-            borderColor: "#2DBD60",
-            borderWidth: 4,
-            cornerRadius: 12
-          },
-          other: {
-            xMin: 20,
-            yMin: 140,
-            xMax: 370,
-            yMax: 340,
-            borderColor: "#2DBD60",
-            borderWidth: 4,
-            cornerRadius: 12
-          }
-        }
+        allowed_countries: ["CA", "FR", "CM", "US", "DE", "CI", "SN", "NG", "MA", "DZ"],
+        default_country: "CA",
+        required: true
       } as const
     },
     {
-      id: 2,
+      id: 1,
       type: "id_card" as const,
       order: 3,
       templateId: 1,
       labels: {
-        en: "Upload back of ID card",
-        fr: "Téléversez le verso de votre carte d'identité"
+        front: {
+          en: "Upload front of ID card",
+          fr: "Téléversez le recto de votre carte d'identité"
+        },
+        back: {
+          en: "Upload back of ID card",
+          fr: "Téléversez le verso de votre carte d'identité"
+        },
       },
       instructions: {
-        en: "Take a clear photo of the back of your ID.",
-        fr: "Prenez une photo nette du verso de votre pièce."
+        front: {
+          en: "Take a clear photo of the front of your ID.",
+          fr: "Prenez une photo nette du recto de votre pièce."
+        },
+        back: {
+          en: "Take a clear photo of the back of your ID.",
+          fr: "Prenez une photo nette du verso de votre pièce."
+        },
       },
       ui: {
-        icon: "id-card-icon.png",
-        themeColor: "#2DBD60",
-        buttonText: { en: "Next", fr: "Suivant" }
+        front: {
+          icon: "id-card-icon.png",
+          themeColor: "#2DBD60",
+          buttonText: { en: "Next", fr: "Suivant" }
+        },
+        back: {
+          icon: "id-card-icon.png",
+          themeColor: "#2DBD60",
+          buttonText: { en: "Next", fr: "Suivant" }
+        },
       },
       config: {
-        sides: ["back"],
+        sides: ["front", "back"],
         allowed_formats: ["jpg", "png"],
         max_size_mb: 5,
-        document_types: ["id_card", "passport", "drivers_license", "national_id"],
+        document_types: ["drivers_licence", "passport", "drivers_licence", "national_id"],
         bbox_configs: {
-          id_card: {
+          drivers_licence: {
             xMin: 20,
             yMin: 140,
             xMax: 370,
@@ -197,25 +122,7 @@ const advancedVerificationTemplate: KYCTemplate = {
             borderWidth: 4,
             cornerRadius: 8
           },
-          drivers_license: {
-            xMin: 25,
-            yMin: 150,
-            xMax: 365,
-            yMax: 330,
-            borderColor: "#FF9500",
-            borderWidth: 4,
-            cornerRadius: 10
-          },
-          national_id: {
-            xMin: 20,
-            yMin: 140,
-            xMax: 370,
-            yMax: 340,
-            borderColor: "#5856D6",
-            borderWidth: 4,
-            cornerRadius: 12
-          },
-          residence_permit: {
+          identity_card: {
             xMin: 20,
             yMin: 140,
             xMax: 370,
@@ -224,7 +131,7 @@ const advancedVerificationTemplate: KYCTemplate = {
             borderWidth: 4,
             cornerRadius: 12
           },
-          voter_id: {
+          health_insurance_card: {
             xMin: 20,
             yMin: 140,
             xMax: 370,
@@ -233,16 +140,16 @@ const advancedVerificationTemplate: KYCTemplate = {
             borderWidth: 4,
             cornerRadius: 12
           },
-          military_id: {
+          national_id: {
             xMin: 20,
             yMin: 140,
             xMax: 370,
             yMax: 340,
-            borderColor: "#2DBD60",
+            borderColor: "#5856D6",
             borderWidth: 4,
             cornerRadius: 12
           },
-          student_id: {
+          permanent_residence: {
             xMin: 20,
             yMin: 140,
             xMax: 370,
@@ -251,6 +158,8 @@ const advancedVerificationTemplate: KYCTemplate = {
             borderWidth: 4,
             cornerRadius: 12
           },
+
+
           work_permit: {
             xMin: 20,
             yMin: 140,
@@ -260,22 +169,14 @@ const advancedVerificationTemplate: KYCTemplate = {
             borderWidth: 4,
             cornerRadius: 12
           },
-          other: {
-            xMin: 20,
-            yMin: 140,
-            xMax: 370,
-            yMax: 340,
-            borderColor: "#2DBD60",
-            borderWidth: 4,
-            cornerRadius: 12
-          }
+
         }
       } as const
     },
     {
       id: 3,
       type: "selfie" as const,
-      order: 4,
+      order: 5,
       templateId: 1,
       labels: {
         en: "Take selfies from different angles",
@@ -293,55 +194,33 @@ const advancedVerificationTemplate: KYCTemplate = {
       config: {
         liveness_check: true,
         max_attempts: 3,
-        orientations: ["front", "left", "right"]
+        orientations: ["center", "left", "right"]
       } as const
     },
-    {
-      id: 4,
-      type: "file_upload" as const,
-      order: 5,
-      labels: {
-        en: "Upload proof of address",
-        fr: "Téléversez un justificatif de domicile"
-      },
-      instructions: {
-        en: "Upload a recent utility bill or bank statement (PDF, JPG, PNG).",
-        fr: "Téléversez une facture récente ou un relevé bancaire (PDF, JPG, PNG)."
-      },
-      ui: {
-        icon: "file-upload-icon.png",
-        themeColor: "#2DBD60",
-        buttonText: { en: "Upload", fr: "Téléverser" }
-      },
-      config: {
-        allowed_formats: ["pdf", "jpg", "png"],
-        max_size_mb: 10,
-        required: true
-      } as const
-    },
-    {
-      id: 6,
-      type: "country_selection" as const,
-      order: 6,
-      labels: {
-        en: "Select your country",
-        fr: "Sélectionnez votre pays"
-      },
-      instructions: {
-        en: "Choose your country of residence.",
-        fr: "Choisissez votre pays de résidence."
-      },
-      ui: {
-        icon: "country-icon.png",
-        themeColor: "#2DBD60",
-        buttonText: { en: "Confirm", fr: "Confirmer" }
-      },
-      config: {
-        allowed_countries: ["FR", "CM", "US", "DE"],
-        default_country: "FR",
-        required: true
-      } as const
-    }
+    // {
+    //   id: 4,
+    //   type: "file_upload" as const,
+    //   order: 6,
+    //   labels: {
+    //     en: "Upload proof of address",
+    //     fr: "Téléversez un justificatif de domicile"
+    //   },
+    //   instructions: {
+    //     en: "Upload a recent utility bill or bank statement (PDF, JPG, PNG).",
+    //     fr: "Téléversez une facture récente ou un relevé bancaire (PDF, JPG, PNG)."
+    //   },
+    //   ui: {
+    //     icon: "file-upload-icon.png",
+    //     themeColor: "#2DBD60",
+    //     buttonText: { en: "Upload", fr: "Téléverser" }
+    //   },
+    //   config: {
+    //     allowed_formats: ["pdf", "jpg", "png"],
+    //     max_size_mb: 10,
+    //     required: true
+    //   } as const
+    // },
+
   ]
 };
 
@@ -369,7 +248,7 @@ export const TemplateKYCExample: React.FC<{ onComplete: (data: Record<number, an
         onComplete={handleComplete}
         onError={handleError}
         onCancel={handleCancel}
-        language="fr" // ou "en" pour l'anglais
+        language="en" // ou "en" pour l'anglais
       />
     </View>
   );