@transfergratis/react-native-sdk 0.1.25 → 0.1.28

package/src/modules/api/KYCService.ts

@@ -524,6 +524,47 @@ export class KYCService {
       throw new Error(errorMessage(error));
     }
   }
+
+  /** Send email verification code. POST /api/v1/accounts/email/send/ */
+  async sendEmailVerificationCode(
+    email: string,
+    auth?: { apiKey?: string; token?: string }
+  ): Promise<unknown> {
+    const url = `${KYCConfig.getBackendUrl()}/accounts/email/send/`;
+    const token = auth?.apiKey ? undefined : (auth?.token ?? await authentification());
+    const res = await axios.post(
+      url,
+      { email },
+      {
+        headers: {
+          'Content-Type': 'application/json',
+          ...(auth?.apiKey ? { 'Authorization': `ApiKey ${auth.apiKey}` } : { 'Authorization': `Bearer ${token}` }),
+        },
+      }
+    );
+    return res.data;
+  }
+
+  /** Verify email with OTP. POST /api/v1/accounts/email/verify/ */
+  async verifyEmailCode(
+    otp: string,
+    auth?: { apiKey?: string; token?: string }
+  ): Promise<unknown> {
+    const url = `${KYCConfig.getBackendUrl()}/accounts/email/verify/`;
+    const token = auth?.apiKey ? undefined : (auth?.token ?? await authentification());
+    const res = await axios.post(
+      url,
+      { otp },
+      {
+        headers: {
+          'Content-Type': 'application/json',
+          ...(auth?.apiKey ? { 'Authorization': `ApiKey ${auth.apiKey}` } : { 'Authorization': `Bearer ${token}` }),
+        },
+      }
+    );
+    return res.data;
+  }
+
   // reultat de la verification
   async getVerificationResult(session_id: string): Promise<VerificationResult> {
     try {

package/src/modules/camera/VisionCameraModule.web.ts

@@ -151,17 +151,18 @@ export class VisionCameraModule {
         return false;
       }
 
-      const stream = await navigator.mediaDevices.getUserMedia({ 
-        video: { 
+      // Use min + ideal so Android Chrome doesn't cache low resolution (e.g. 640x480)
+      const stream = await navigator.mediaDevices.getUserMedia({
+        video: {
           facingMode: 'user',
-          width: { ideal: 1280 },
-          height: { ideal: 720 }
-        } 
+          width: { min: 1280, ideal: 1920 },
+          height: { min: 720, ideal: 1080 },
+        },
       });
-      
+
       // Libérer le stream de test
       stream.getTracks().forEach(track => track.stop());
-      
+
       return true;
     } catch (error) {
       console.error('Error requesting camera permission:', error);
@@ -330,13 +331,30 @@ export class VisionCameraModule {
         return;
       }
 
-      this.stream = await navigator.mediaDevices.getUserMedia({
+      const constraints: MediaStreamConstraints = {
         video: {
           facingMode: 'user',
-          width: { ideal: 1280 },
-          height: { ideal: 720 }
+          width: { min: 1280, ideal: 1920 },
+          height: { min: 720, ideal: 1080 },
+        },
+      };
+
+      try {
+        this.stream = await navigator.mediaDevices.getUserMedia(constraints);
+      } catch (err) {
+        const name = err instanceof Error ? err.name : '';
+        if (name === 'OverconstrainedError') {
+          this.stream = await navigator.mediaDevices.getUserMedia({
+            video: {
+              facingMode: 'user',
+              width: { ideal: 1920 },
+              height: { ideal: 1080 },
+            },
+          });
+        } else {
+          throw err;
         }
-      });
+      }
 
       if (this.videoElement) {
         this.videoElement.srcObject = this.stream;
@@ -531,7 +549,7 @@ export class VisionCameraModule {
       context.drawImage(this.videoElement, 0, 0);
 
       // Convertir en base64
-      const imageDataUrl = this.canvasElement.toDataURL('image/jpeg', 0.8);
+      const imageDataUrl = this.canvasElement.toDataURL('image/jpeg', 0.95);
       
       // Créer un nom de fichier unique
       const timestamp = new Date().getTime();

package/src/types/KYC.types.ts

@@ -455,6 +455,8 @@ export interface SessionState {
   isInitialized: boolean;
   isProcessing: boolean;
   error: string | null;
+  /** True once loadSessionData has run (for resume flow); allows UI to show loading until country/data restored */
+  sessionDataRestored?: boolean;
 }
 
 export type VerificationStatus = 'idle' | 'in_progress' | 'success' | 'failed';
@@ -469,11 +471,11 @@ export interface VerificationState {
 // Actions pour le template KYC
 export interface TemplateActions {
   initializeTemplate: (template: KYCTemplate) => void;
-  nextComponent: () => void;
+  nextComponent: (overrideData?: any) => void;
   previousComponent: () => void;
   goToComponent: (componentId: number) => void;
   updateComponentData: (componentId: number, data: any) => void;
-  validateComponent: (componentId: number) => boolean;
+  validateComponent: (componentId: number, dataOverride?: any) => boolean;
   submitTemplate: () => Promise<void>;
   resetTemplate: () => void;
   setLanguage: (language: string) => void;
@@ -482,7 +484,7 @@ export interface TemplateActions {
   submitVerification: () => Promise<void>;
 }
 
-// Hook pour le template KYC
+// Hook pour le template KYC (return type of useTemplateKYCFlow)
 export interface UseTemplateReturn {
   state: TemplateState;
   actions: TemplateActions;
@@ -494,6 +496,8 @@ export interface UseTemplateReturn {
   getLocalizedText: (text: LocalizedText) => string;
   initializeSession: () => Promise<void>;
   env: 'PRODUCTION' | 'SANDBOX';
+  /** Optional API key for backend auth (e.g. email verification endpoints). */
+  apiKey?: string;
 }
 
 

package/src/utils/cropByObb.ts

@@ -5,6 +5,58 @@ import { logger } from './logger';
 
 type Point = [number, number];
 
+/** OBB confidence below this = card not fully in frame; don't crop, give user feedback. */
+export const OBB_CONFIDENCE_THRESHOLD = 0.85;
+
+/**
+ * card_obb format from API:
+ * - Legacy: [ [ [p1,p2,p3,p4], confidence ] ]
+ * - New:    [ { obb: [p1,p2,p3,p4], confidence, card_in_frame?, cropped_sides? } ]
+ * Returns confidence in [0,1] or null if not present.
+ */
+export function getObbConfidence(cardObb: any): number | null {
+  if (!cardObb || !Array.isArray(cardObb) || cardObb.length === 0) return null;
+  const first = cardObb[0];
+
+  // New format: first is an object with a confidence field
+  if (first && typeof first === 'object' && 'confidence' in first) {
+    const score = (first as any).confidence;
+    return typeof score === 'number' ? score : null;
+  }
+
+  // Legacy format: [ [points], score ]
+  if (!Array.isArray(first) || first.length < 2) return null;
+  const score = first[1];
+  return typeof score === 'number' ? score : null;
+}
+
+/**
+ * Extracts the card_in_frame flag from card_obb when present.
+ * Returns:
+ * - true  => card fully in frame
+ * - false => card not fully in frame
+ * - null  => field not present (backward compatibility)
+ */
+export function getCardInFrame(cardObb: any): boolean | null {
+  if (!cardObb) return null;
+
+  // card_obb can be an array of objects or a single object
+  const first = Array.isArray(cardObb) ? cardObb[0] : cardObb;
+
+  if (first && typeof first === 'object' && 'card_in_frame' in first) {
+    const value = (first as any).card_in_frame;
+    return typeof value === 'boolean' ? value : null;
+  }
+
+  // Some APIs might put card_in_frame at the top level
+  if (cardObb && typeof cardObb === 'object' && 'card_in_frame' in cardObb) {
+    const value = (cardObb as any).card_in_frame;
+    return typeof value === 'boolean' ? value : null;
+  }
+
+  return null;
+}
+
 // Compute axis-aligned bounding box from oriented quadrilateral
 function computeAabb(points: Point[]) {
   const xs = points.map(p => p[0]);
@@ -49,7 +101,11 @@ async function cropWeb(uri: string, points: Point[]): Promise<string> {
 // Fallback: return original for native (no dependency added); caller can still use bbox to draw overlay
 export async function cropByObb(uri: string, cardObb: any): Promise<{ base64?: string; bbox?: { minX: number; minY: number; width: number; height: number } }> {
   try {
-    // card_obb format: [ [ [p1,p2,p3,p4], score ] ]
+    // card_obb format: [ [ [p1,p2,p3,p4], score ] ] — if confidence too low, don't crop (send full image)
+    const confidence = getObbConfidence(cardObb);
+    if (confidence !== null && confidence < OBB_CONFIDENCE_THRESHOLD) {
+      return {};
+    }
     const first = Array.isArray(cardObb) ? cardObb[0] : null;
     const points = Array.isArray(first?.[0]) ? (first[0] as Point[]) : null;
     if (!points || points.length !== 4) return {};

package/src/web/WebKYCEntry.tsx

@@ -25,7 +25,11 @@ interface URLParams {
   env?: 'PRODUCTION' | 'SANDBOX'; // Environment mode
   template_id?: string; // Template ID for dynamic template loading
   server_env?: BackendEnvironment; // Backend environment mode
-  step?: string; // Step index to resume verification at the correct point
+  step?: string; // Deprecated: use component_index.
+  component_index?: string; // Index in template.components (0-based) to resume at
+  country?: string; // Code pays pour restaurer la sélection (reprise multi-appareil)
+  document_type?: string; // Type de document (national_id, passport, etc.)
+  region?: string; // Région si applicable
 }
 
 interface VerificationSteps {
@@ -70,6 +74,10 @@ const WebKYCEntry: React.FC<WebKYCEntryProps> = ({
       template_id: urlParams.get('template_id') || undefined,
       server_env: validServerEnv,
       step: urlParams.get('step') || undefined,
+      component_index: urlParams.get('component_index') || undefined,
+      country: urlParams.get('country') || undefined,
+      document_type: urlParams.get('document_type') || undefined,
+      region: urlParams.get('region') || undefined,
     };
   }, []);
 
@@ -294,12 +302,15 @@ const WebKYCEntry: React.FC<WebKYCEntryProps> = ({
         API_KEY={urlParams.token}
         templateId={urlParams.template_id}
         env={urlParams.env || 'PRODUCTION'}
+        serverEnv={urlParams.server_env}
         existingSessionId={urlParams.kyc_id}
-        initialStep={urlParams.step ? (() => {
-          const stepNum = parseInt(urlParams.step, 10);
-          console.log('Parsing step from URL:', { stepString: urlParams.step, stepNumber: stepNum, isNaN: isNaN(stepNum) });
-          return isNaN(stepNum) ? undefined : stepNum;
-        })() : undefined}
+        initialComponentIndex={(() => {
+          const raw = urlParams.component_index ?? urlParams.step;
+          if (raw == null || raw === '') return undefined;
+          const index = parseInt(raw, 10);
+          return Number.isNaN(index) ? undefined : index;
+        })()}
+        initialCountryResume={urlParams.country && urlParams.document_type ? { code: urlParams.country, documentType: urlParams.document_type, region: urlParams.region || undefined } : undefined}
       />
     </SafeAreaView>
   );