@transfergratis/react-native-sdk 0.1.4 → 0.1.6

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import { View, StyleSheet } from 'react-native';
 import { TemplateKYCFlow } from './TemplateKYCFlowRefactored';
-import { KYCTemplate } from '../types/KYC.types';
+import { KYCTemplate, VerificationState } from '../types/KYC.types';
 
 // Template JSON basé sur votre exemple
 const advancedVerificationTemplate: KYCTemplate = {
@@ -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", "SN", "NG", "MA", "DZ","CI", "KE","GH"],
+        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,60 +194,38 @@ 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
+    // },
+
   ]
 };
 
-export const TemplateKYCExample: React.FC<{ onComplete: (data: Record<number, any>) => void, onCancel: () => void, onError: (error: string) => void }> = ({ onComplete, onCancel, onError }) => {
-  const handleComplete = (data: Record<number, any>) => {
+export const TemplateKYCExample: React.FC<{ onComplete: (data: VerificationState) => void, onCancel: () => void, onError: (error: string) => void, language: string, API_KEY: string }> = ({ onComplete, onCancel, onError, language, API_KEY }) => {
+  const handleComplete = (data: VerificationState) => {
     console.log('KYC Template completed with data:', data);
     onComplete(data);
     // Ici vous pouvez envoyer les données à votre API
@@ -369,7 +248,8 @@ export const TemplateKYCExample: React.FC<{ onComplete: (data: Record<number, an
         onComplete={handleComplete}
         onError={handleError}
         onCancel={handleCancel}
-        language="fr" // ou "en" pour l'anglais
+        language={language} // ou "en" pour l'anglais
+        API_KEY={API_KEY}
       />
     </View>
   );