@transfergratis/react-native-sdk 0.1.18 → 0.1.20

package/README.md

@@ -77,633 +77,33 @@ iOS permissions are also automatically handled by the Expo plugin.
 
 The recommended approach is to use the JSON template system to configure your KYC flow:
 
-```tsx
-import React from 'react';
-import { TemplateKYCFlow, KYCTemplate, VerificationState } from '@transfergratis/react-native-sdk';
-
-const myKYCTemplate: KYCTemplate = {
-  id: 1,
-  name: {
-    en: "Identity Verification",
-    fr: "Vérification d'Identité"
-  },
-  description: {
-    en: "Complete identity verification flow",
-    fr: "Processus complet de vérification d'identité"
-  },
-  version: "1.0.0",
-  components: [
-    {
-      id: 6,
-      type: "country_selection",
-      order: 1,
-      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: ["CM", "NG", "CI", "KE", "GH"],
-        default_country: "CM",
-        required: true
-      }
-    },
-    {
-      id: 1,
-      type: "id_card",
-      order: 2,
-      templateId: 1,
-      labels: {
-        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: {
-        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: {
-        front: {
-          themeColor: "#2DBD60",
-          buttonText: { en: "Next", fr: "Suivant" }
-        },
-        back: {
-          themeColor: "#2DBD60",
-          buttonText: { en: "Next", fr: "Suivant" }
-        }
-      },
-      config: {
-        sides: ["front", "back"],
-        allowed_formats: ["jpg", "png"],
-        max_size_mb: 5,
-        document_types: ["identity_card", "passport", "drivers_licence", "national_id"],
-        bbox_configs: {
-          identity_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
-          }
-        }
-      }
-    },
-    {
-      id: 3,
-      type: "selfie",
-      order: 3,
-      templateId: 1,
-      labels: {
-        en: "Take selfies from different angles",
-        fr: "Prenez des selfies sous différents angles"
-      },
-      instructions: {
-        en: "Take selfies from front, left, and right angles.",
-        fr: "Prenez des selfies de face, profil gauche et profil droit."
-      },
-      ui: {
-        icon: "selfie-icon.png",
-        themeColor: "#2DBD60",
-        buttonText: { en: "Next", fr: "Suivant" }
-      },
-      config: {
-        liveness_check: true,
-        max_attempts: 3,
-        orientations: ["center", "left", "right"]
-      }
-    }
-  ]
-};
-
-export default function App() {
-  const handleComplete = (result: VerificationState) => {
-    console.log('KYC completed:', result);
-    // Process verification result
-  };
-
-  const handleError = (error: string) => {
-    console.error('KYC error:', error);
-    // Handle error
-  };
-
-  const handleCancel = () => {
-    console.log('KYC cancelled');
-    // Handle cancellation
-  };
-
-  return (
-    <TemplateKYCFlow
-      template={myKYCTemplate}
-      onComplete={handleComplete}
-      onError={handleError}
-      onCancel={handleCancel}
-      language="en" // or "fr" for French
-      API_KEY="your-api-key-here"
-    />
-  );
-}
-```
-
-### Basic Usage (Simple Component)
-
-For simple usage without templates:
-
 ```tsx
 import React from 'react';
 import { LauchTransferGratisKYC } from '@transfergratis/react-native-sdk';
 
 export default function App() {
   return (
-    <LauchTransferGratisKYC />
-  );
-}
-```
-
-### Advanced Camera Usage
-
-```tsx
-import React, { useState } from 'react';
-import { View } from 'react-native';
-import { EnhancedCameraView } from '@transfergratis/react-native-sdk';
-
-export default function CameraExample() {
-  const [showCamera, setShowCamera] = useState(true);
-
-  const handleCapture = (result) => {
-    if (result.success) {
-      console.log('Photo captured:', result.path);
-      setShowCamera(false);
-    } else {
-      console.error('Capture failed:', result.error);
-    }
-  };
-
-  return (
-    <View style={{ flex: 1 }}>
-      <EnhancedCameraView
-        showCamera={showCamera}
-        cameraType="front"
-        instructions="Position your face in the frame"
-        onCapture={handleCapture}
-        onError={(error) => console.error('Camera error:', error)}
-        onClose={() => setShowCamera(false)}
-        quality="high"
-        enableFlash={true}
-        showCaptureButton={true}
-        showSwitchCamera={true}
-      />
-    </View>
-  );
-}
-```
-
-## 📚 API Reference
-
-### Main Components
-
-#### `TemplateKYCFlow`
-
-The main component for JSON template-based KYC flows.
-
-```tsx
-interface TemplateKYCFlowProps {
-  template: KYCTemplate;
-  onComplete?: (data: VerificationState) => void;
-  onError?: (error: string) => void;
-  onCancel?: () => void;
-  language?: string; // 'fr' | 'en'
-  API_KEY?: string;
-}
-```
-
-#### `EnhancedCameraView`
-
-Advanced camera component with full Vision Camera integration.
-
-```tsx
-interface EnhancedCameraViewProps {
-  instructions?: string;
-  showCamera: boolean;
-  cameraType?: 'front' | 'back';
-  style?: ViewStyle;
-  onCapture?: (result: CaptureResult) => void;
-  onError?: (event: { message: string }) => void;
-  onClose?: () => void;
-  enableFlash?: boolean;
-  enableHdr?: boolean;
-  quality?: 'low' | 'medium' | 'high';
-  showCaptureButton?: boolean;
-  showSwitchCamera?: boolean;
-  overlayComponent?: React.ReactNode;
-  bbox?: IBbox;
-  canFlip?: boolean;
-  enableVideo?: boolean;
-  isRecording?: boolean;
-  onVideoRecordingStart?: () => void;
-  onVideoRecordingStop?: () => void;
-  videoDuration?: number;
-  onSilentCapture?: (result: ISilentCaptureResult) => void;
-  silentCaptureResult?: ISilentCaptureResult;
-}
-```
-
-#### `VisionCameraView`
-
-Simplified camera component for basic use cases.
-
-```tsx
-interface VisionCameraViewProps {
-  instructions?: string;
-  showCamera: boolean;
-  cameraType?: 'front' | 'back';
-  style?: ViewStyle;
-  onCapture?: (result: CaptureResult) => void;
-  onError?: (event: { message: string }) => void;
-  onPermissionError?: () => void;
-  enableHdr?: boolean;
-  enableNightMode?: boolean;
-  quality?: 'low' | 'medium' | 'high';
-}
-```
-
-#### Specialized KYC Components
-
-##### `IDCardCapture`
-
-Identity document capture with automatic validation.
-
-```tsx
-interface IDCardCaptureProps {
-  component: TemplateComponent;
-  value?: Record<string, IIDCardPayload>;
-  onValueChange: (value: Record<string, IIDCardPayload | string>) => void;
-  error?: string;
-  language?: string;
-  currentSide?: string;
-}
-```
-
-##### `SelfieCaptureTemplate`
-
-Selfie capture with liveness detection.
-
-```tsx
-interface SelfieCaptureTemplateProps {
-  component: TemplateComponent;
-  value?: any;
-  onValueChange: (value: any) => void;
-  error?: string;
-  language?: string;
-}
-```
-
-##### `FileUploadTemplate`
-
-File upload with validation.
-
-```tsx
-interface FileUploadTemplateProps {
-  component: TemplateComponent;
-  value?: any;
-  onValueChange: (value: any) => void;
-  error?: string;
-  language?: string;
-}
-```
-
-##### `LocationCaptureTemplate`
-
-GPS location capture.
-
-```tsx
-interface LocationCaptureTemplateProps {
-  component: TemplateComponent;
-  value?: LocationData;
-  onValueChange: (value: LocationData) => void;
-  error?: string;
-  language?: string;
-}
-```
-
-##### `CountrySelectionTemplate`
-
-Country selection with region mapping.
-
-```tsx
-interface CountrySelectionTemplateProps {
-  component: TemplateComponent;
-  value?: Country;
-  onValueChange: (value: Country) => void;
-  error?: string;
-  language?: string;
-}
-```
-
-#### `OrientationVideoCapture`
-
-Component for liveness detection via orientation video.
-
-```tsx
-interface OrientationVideoCaptureProps {
-  config: OrientationVideoConfig;
-  onComplete: (result: OrientationVideoResult) => void;
-  onError: (error: string) => void;
-  kycService: KYCService;
-}
-```
-
-### Modules
-
-#### `KYCService`
-
-Main service for KYC API calls.
-
-```tsx
-import { KYCService } from '@transfergratis/react-native-sdk';
-
-const kycService = new KYCService('https://api.yourdomain.com', 'your-api-key');
-
-// Create a new session
-const session = await kycService.newSession(token);
-
-// Submit a verification step
-await kycService.verificationSession({
-  session_id: session.id,
-  step: 'id_card',
-  data: { /* step data */ },
-  templateId: 1,
-  action: 'submit'
-});
-
-// Get verification result
-const result = await kycService.getVerificationResult(session_id);
-```
-
-#### `VisionCameraModule`
-
-Module for camera operations and permissions.
-
-```tsx
-import { VisionCameraModule } from '@transfergratis/react-native-sdk';
-
-// Request permissions
-const hasPermissions = await VisionCameraModule.requestAllPermissions();
-
-// Check permissions
-const hasAllPermissions = await VisionCameraModule.hasAllPermissions();
-
-// Get camera devices
-const frontCamera = await VisionCameraModule.getFrontCameraDevice();
-const backCamera = await VisionCameraModule.getBackCameraDevice();
-
-// Check camera availability
-const isAvailable = await VisionCameraModule.isCameraAvailable();
-```
-
-### Hooks
-
-#### `useTemplateKYCFlow`
-
-Hook for managing template-based KYC flow.
-
-```tsx
-import { useTemplateKYCFlow, TemplateKYCFlowProvider } from '@transfergratis/react-native-sdk';
-
-// In your component
-const { state, actions, currentComponent, progress } = useTemplateKYCFlow();
-```
-
-#### `useOrientationVideo`
-
-Hook for orientation video capture.
-
-```tsx
-import { useOrientationVideo, KYCService } from '@transfergratis/react-native-sdk';
-
-const kycService = new KYCService('https://api.yourdomain.com', 'your-api-key');
-const { state, actions } = useOrientationVideo(kycService, {
-  duration: 10,
-  maxRetakes: 2,
-});
-```
-
-#### `useLocation`
-
-Hook for location capture.
-
-```tsx
-import { useLocation } from '@transfergratis/react-native-sdk';
-
-const { location, error, requestPermission, getCurrentLocation } = useLocation();
-```
-
-## 🎨 Customization
-
-### Custom Overlay Example
-
-```tsx
-import React from 'react';
-import { View, Text, StyleSheet } from 'react-native';
-import { EnhancedCameraView } from '@transfergratis/react-native-sdk';
-
-export default function CustomCameraExample() {
-  const customOverlay = (
-    <View style={styles.overlay}>
-      <View style={styles.faceFrame} />
-      <Text style={styles.instruction}>
-        Align your face with the frame
-      </Text>
-    </View>
-  );
-
-  return (
-    <EnhancedCameraView
-      showCamera={true}
-      overlayComponent={customOverlay}
-      onCapture={(result) => console.log(result)}
-    />
+    <LauchTransferGratisKYC
+          onComplete={(data:VerificationState) => {
+            Alert.alert('Template KYC completed');
+            setShowTemplateKYC(false);
+            console.log('Template KYC completed', JSON.stringify(data, null, 2));
+          }}
+          onCancel={() => {
+            setShowTemplateKYC(false);
+            Alert.alert('Template KYC cancelled');
+          }}
+          onError={(error) => {
+            Alert.alert('Template KYC error', error);
+            setShowTemplateKYC(false);
+          }}
+          language="en"
+          API_KEY={undefined} // for test env leave this blanc
+        />
   );
 }
-
-const styles = StyleSheet.create({
-  overlay: {
-    position: 'absolute',
-    top: 0,
-    left: 0,
-    right: 0,
-    bottom: 0,
-    justifyContent: 'center',
-    alignItems: 'center',
-    pointerEvents: 'none',
-  },
-  faceFrame: {
-    width: 250,
-    height: 300,
-    borderWidth: 3,
-    borderColor: '#4CAF50',
-    borderRadius: 125,
-  },
-  instruction: {
-    color: 'white',
-    fontSize: 16,
-    textAlign: 'center',
-    marginTop: 20,
-    backgroundColor: 'rgba(0, 0, 0, 0.7)',
-    padding: 10,
-    borderRadius: 8,
-  },
-});
-```
-
-### Orientation Video Processing
-
-The SDK includes advanced liveness detection through orientation video processing. This feature captures and analyzes short videos to verify that a real person is present during the KYC process.
-
-#### Basic Usage
-
-```tsx
-import React from 'react';
-import { OrientationVideoCapture, KYCService } from '@transfergratis/react-native-sdk';
-
-const kycService = new KYCService('https://api.yourdomain.com', 'your-api-key');
-
-export default function LivenessDetection() {
-  return (
-    <OrientationVideoCapture
-      config={{
-        duration: 10,
-        orientations: ['center', 'left', 'right'],
-        instructions: {
-          center: 'Look straight ahead at the camera',
-          left: 'Turn your head to the left',
-          right: 'Turn your head to the right',
-        },
-        showPreview: true,
-        allowRetake: true,
-        maxRetakes: 3,
-      }}
-      onComplete={(result) => {
-        console.log('Liveness detection result:', result);
-      }}
-      onError={(error) => {
-        console.error('Liveness detection error:', error);
-      }}
-      kycService={kycService}
-    />
-  );
-}
-```
-
-#### Using the Hook
-
-```tsx
-import React from 'react';
-import { View, Text, Button } from 'react-native';
-import { useOrientationVideo, KYCService } from '@transfergratis/react-native-sdk';
-
-export default function LivenessDetectionHook() {
-  const kycService = new KYCService('https://api.yourdomain.com', 'your-api-key');
-  
-  const { state, actions } = useOrientationVideo(kycService, {
-    duration: 10,
-    maxRetakes: 2,
-  });
-
-  return (
-    <View>
-      {state.isRecording && <Text>Recording...</Text>}
-      {state.isProcessing && <Text>Processing...</Text>}
-      {state.error && <Text>Error: {state.error}</Text>}
-      
-      <Button title="Start Recording" onPress={actions.startRecording} />
-      <Button title="Process Video" onPress={actions.processVideo} />
-    </View>
-  );
-}
-```
-
-#### API Response Format
-
-Orientation video processing returns detailed results for each face orientation:
-
-```json
-{
-  "center": {
-    "captured": true,
-    "frame": 35
-  },
-  "right": {
-    "captured": true,
-    "frame": 98
-  },
-  "left": {
-    "captured": false,
-    "frame": null
-  }
-}
-```
-
-## 🔧 Plugin Configuration
-
-The SDK includes an Expo config plugin for automatic setup of native permissions and dependencies.
-
-### Plugin Options
-
-```tsx
-interface VisionCameraPluginProps {
-  cameraPermissionText?: string;
-  microphonePermissionText?: string;
-  enableFrameProcessors?: boolean;
-}
-
-interface LocationPluginProps {
-  locationPermissionText?: string;
-  locationWhenInUsePermissionText?: string;
-  enableBackgroundLocation?: boolean;
-}
 ```
 
-### Manual Plugin Usage
-
-```tsx
-import { withVisionCamera } from '@transfergratis/react-native-sdk/plugin';
-
-export default withVisionCamera(config, {
-  cameraPermissionText: "Custom camera permission message",
-  microphonePermissionText: "Custom microphone permission message",
-  enableFrameProcessors: false
-});
-```
 
 ## 🛠️ Development
 

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

@@ -1 +1 @@
-{"version":3,"file":"SelfieCaptureTemplate.d.ts","sourceRoot":"","sources":["../../../src/components/KYCElements/SelfieCaptureTemplate.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAuC,MAAM,OAAO,CAAC;AAE5D,OAAO,EAAE,iBAAiB,EAA8F,MAAM,uBAAuB,CAAC;AAUtJ,UAAU,aAAa;IACrB,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;CACd;AACD,UAAU,0BAA0B;IAClC,SAAS,EAAE,iBAAiB,CAAC;IAC7B,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,aAAa,CAAC,GAAG,SAAS,CAAC;IACjD,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,aAAa,GAAG,MAAM,CAAC,KAAK,IAAI,CAAC;IACvE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,MAAM,CAAC;CAClB;AAED,eAAO,MAAM,qBAAqB,EAAE,KAAK,CAAC,EAAE,CAAC,0BAA0B,CAgVtE,CAAC"}
+{"version":3,"file":"SelfieCaptureTemplate.d.ts","sourceRoot":"","sources":["../../../src/components/KYCElements/SelfieCaptureTemplate.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAuC,MAAM,OAAO,CAAC;AAE5D,OAAO,EAAE,iBAAiB,EAA8F,MAAM,uBAAuB,CAAC;AAUtJ,UAAU,aAAa;IACrB,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;CACd;AACD,UAAU,0BAA0B;IAClC,SAAS,EAAE,iBAAiB,CAAC;IAC7B,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,aAAa,CAAC,GAAG,SAAS,CAAC;IACjD,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,aAAa,GAAG,MAAM,CAAC,KAAK,IAAI,CAAC;IACvE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,MAAM,CAAC;CAClB;AAED,eAAO,MAAM,qBAAqB,EAAE,KAAK,CAAC,EAAE,CAAC,0BAA0B,CA+UtE,CAAC"}

package/build/components/KYCElements/SelfieCaptureTemplate.js

@@ -48,11 +48,11 @@ export const SelfieCaptureTemplate = ({ component, value, onValueChange, error,
     const getOrientationLabel = (orientation) => {
         switch (orientation) {
             case 'center':
-                return state.currentLanguage === "en" ? "Selfie de face" : "Selfie de face";
+                return state.currentLanguage === "en" ? "Front Profil Selfie" : "Selfie de face";
             case 'left':
-                return state.currentLanguage === "en" ? "Selfie profil gauche" : "Selfie profil gauche";
+                return state.currentLanguage === "en" ? "Left Profil Selfie" : "Selfie profil gauche";
             case 'right':
-                return state.currentLanguage === "en" ? "Selfie profil droit" : "Selfie profil droit";
+                return state.currentLanguage === "en" ? "Rigth Profil Selfiee" : "Selfie profil droit";
             default:
                 return getLocalizedText(component.labels);
         }