@sanctum-key/react-native-sdk 1.0.53 → 1.0.54

package/src/components/TemplateKYCExample.tsx

@@ -87,40 +87,32 @@ export function TemplateKYCExample({
 
     if ((data.status === 'success' || data.status === 'in_progress') && data.result) {
       
-      // 1. Grab the backend data directly from the result (no docKey needed)
       const backendData = data.result.data;
 
       if (backendData) {
         const personalInfo = backendData.user_data?.personal_information || {};
-
-        // Ensure we capture the session ID from whichever prop was provided
         const activeSessionId = kyc_session_id || existingSessionId || backendData.session_id || "";
+        
+        
+        const docType = (backendData as any).document_type || (backendData as any).documentType;
 
-        // 2. Strict mapping to your expected format with improved fallbacks
         finalPayload = {
           data: {
+            document_type: docType,
             verification_id: backendData.verification_id,
             verification_status: backendData.verification_status,
             session_id: activeSessionId,
             user_data: {
               personal_information: {
-                // Safely fallback to given_name and surname if first/last are empty strings
                 first_name: personalInfo.first_name || personalInfo.given_name || undefined,
                 last_name: personalInfo.last_name || personalInfo.surname || undefined,
                 given_name: personalInfo.given_name || undefined,
                 surname: personalInfo.surname || undefined, 
-                
                 address: personalInfo.address || undefined,
-                city: personalInfo.city || undefined,
-                postal_code: personalInfo.postal_code || undefined,
                 expiry_date: personalInfo.expiry_date || undefined,
                 issue_date: personalInfo.issue_date || undefined,
-                
-                // Fallback to birth_date if date_of_birth is missing
                 date_of_birth: personalInfo.date_of_birth || personalInfo.birth_date || undefined,
                 birth_date: personalInfo.birth_date || undefined,
-                
-                country: personalInfo.country || undefined,
                 document_number: personalInfo.document_number || undefined,
                 nationality: personalInfo.nationality || undefined,
                 sex: personalInfo.sex || undefined,
@@ -129,7 +121,7 @@ export function TemplateKYCExample({
           }
         };
 
-        sdkLogger.info("Wrapper formatted completion payload successfully", { 
+        sdkLogger.info("Wrapper formatteddddd completion payload successfully", { 
           data: finalPayload 
         });
       }
@@ -137,7 +129,7 @@ export function TemplateKYCExample({
       sdkLogger.warn("Wrapper received completion without a success result object", { status: data.status });
     }
 
-    onComplete(finalPayload as any); 
+    onComplete(finalPayload); 
 };
 
   const handleCancel = () => {

package/src/components/TemplateKYCFlowRefactored.tsx

@@ -169,8 +169,6 @@ export const TemplateKYCFlow: React.FC<TemplateKYCFlowProps> = ({
       onComplete={(data) => {
         sdkLogger.info("KYC Flow Completed", { referenceId: data?.result?.referenceId });
         sdkLogger.flush();
-        logger.log('this is the data going to the TG side',data)
-        console.log('this is the data going to the TG side',data)
         if (onComplete) onComplete(data);
       }}
       onError={(err) => {

package/src/components/WebBarcodeScanner.tsx

@@ -1,4 +1,5 @@
 import React, { useCallback, useEffect, useRef } from 'react';
+import type { CodeType } from 'react-native-vision-camera';
 import {
   MultiFormatReader,
   BarcodeFormat,
@@ -13,261 +14,209 @@ interface WebBarcodeScannerProps {
   videoRef: React.RefObject<HTMLVideoElement | null>;
   active: boolean;
   onBarcodeScanned: (value: string) => void;
+  formats?: CodeType[];
 }
 
+interface RoiProfile {
+  width: number;
+  height: number;
+  contrast: number;
+}
+
+const ROI_PROFILES: RoiProfile[] = [
+  // Full frame catches barcodes before the user has centered them.
+  { width: 1, height: 1, contrast: 1 },
+  // Most ID barcodes sit in the wide center strip shown by the overlay.
+  { width: 0.98, height: 0.64, contrast: 1 },
+  // A tighter, contrast-enhanced pass helps very dense or low-contrast PDF417.
+  { width: 0.94, height: 0.46, contrast: 1.55 },
+];
+
+const ROTATIONS = [180, 90, -90];
+const DEFAULT_FORMATS: CodeType[] = ['pdf-417'];
+
+const ZXING_FORMATS: Partial<Record<CodeType, BarcodeFormat>> = {
+  'pdf-417': BarcodeFormat.PDF_417,
+  'code-128': BarcodeFormat.CODE_128,
+  'code-39': BarcodeFormat.CODE_39,
+  'code-93': BarcodeFormat.CODE_93,
+  codabar: BarcodeFormat.CODABAR,
+  'ean-13': BarcodeFormat.EAN_13,
+  'ean-8': BarcodeFormat.EAN_8,
+  itf: BarcodeFormat.ITF,
+  'itf-14': BarcodeFormat.ITF,
+  'upc-a': BarcodeFormat.UPC_A,
+  'upc-e': BarcodeFormat.UPC_E,
+  qr: BarcodeFormat.QR_CODE,
+  aztec: BarcodeFormat.AZTEC,
+  'data-matrix': BarcodeFormat.DATA_MATRIX,
+  'gs1-data-bar': BarcodeFormat.RSS_14,
+  'gs1-data-bar-limited': BarcodeFormat.RSS_14,
+  'gs1-data-bar-expanded': BarcodeFormat.RSS_EXPANDED,
+};
+
 export const WebBarcodeScanner: React.FC<WebBarcodeScannerProps> = ({
   videoRef,
   active,
   onBarcodeScanned,
+  formats = DEFAULT_FORMATS,
 }) => {
   const readerRef = useRef<MultiFormatReader | null>(null);
-
   const canvasRef = useRef<HTMLCanvasElement | null>(null);
-
-  const lastValueRef = useRef<string | null>(null);
-
+  const rotationCanvasRef = useRef<HTMLCanvasElement | null>(null);
+  const lastValueRef = useRef<{ value: string | null; emittedAt: number }>({ value: null, emittedAt: 0 });
+  const attemptRef = useRef(0);
+  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
   const stoppedRef = useRef(false);
-
   const callbackRef = useRef(onBarcodeScanned);
 
   useEffect(() => {
     callbackRef.current = onBarcodeScanned;
   }, [onBarcodeScanned]);
 
-  const decodeBitmap = useCallback(
-    (canvas: HTMLCanvasElement) => {
-      if (!readerRef.current) {
-        return null;
+  const decodeBitmap = useCallback((canvas: HTMLCanvasElement) => {
+    if (!readerRef.current || canvas.width === 0 || canvas.height === 0) return null;
+
+    const source = new HTMLCanvasElementLuminanceSource(canvas);
+    const attempts = [
+      new BinaryBitmap(new HybridBinarizer(source)),
+      new BinaryBitmap(new GlobalHistogramBinarizer(source)),
+    ];
+
+    for (const bitmap of attempts) {
+      try {
+        const result = readerRef.current.decodeWithState(bitmap);
+        const text = result?.getText();
+        if (text) return text;
+      } catch {
+        // Try the next binarization strategy/rotation.
       }
+    }
 
-      const source = new HTMLCanvasElementLuminanceSource(canvas);
-
-      const attempts = [
-        new BinaryBitmap(
-          new HybridBinarizer(source)
-        ),
-        new BinaryBitmap(
-          new GlobalHistogramBinarizer(source)
-        ),
-      ];
-
-      for (const bitmap of attempts) {
-        try {
-          const result =
-            readerRef.current.decodeWithState(bitmap);
-
-          if (result?.getText()) {
-            return result.getText();
-          }
-        } catch {
-          // continue
-        }
-      }
-
-      return null;
-    },
-    []
-  );
-
-  const drawROI = useCallback(
-    (
-      video: HTMLVideoElement,
-      canvas: HTMLCanvasElement
-    ) => {
-      const ctx = canvas.getContext('2d', {
-        willReadFrequently: true,
-      });
-
-      if (!ctx) {
-        return false;
-      }
-
-      const roi = 0.8;
-
-      const sw = Math.floor(
-        video.videoWidth * roi
-      );
-
-      const sh = Math.floor(
-        video.videoHeight * roi
-      );
-
-      const sx = Math.floor(
-        (video.videoWidth - sw) / 2
-      );
+    return null;
+  }, []);
+
+  const drawROI = useCallback((video: HTMLVideoElement, canvas: HTMLCanvasElement, profile: RoiProfile) => {
+    const ctx = canvas.getContext('2d', { willReadFrequently: true });
+    if (!ctx) return false;
+
+    const sourceWidth = Math.max(1, Math.floor(video.videoWidth * profile.width));
+    const sourceHeight = Math.max(1, Math.floor(video.videoHeight * profile.height));
+    const sourceX = Math.floor((video.videoWidth - sourceWidth) / 2);
+    const sourceY = Math.floor((video.videoHeight - sourceHeight) / 2);
+
+    // Nearest-neighbour enlargement gives ZXing more pixels per narrow module
+    // on sub-1080p browser streams without allocating an unbounded canvas.
+    const desiredScale = sourceWidth < 1600 ? Math.min(1.75, 1600 / sourceWidth) : 1;
+    const boundedScale = Math.min(desiredScale, 2800 / Math.max(sourceWidth, sourceHeight));
+    const outputWidth = Math.max(1, Math.floor(sourceWidth * boundedScale));
+    const outputHeight = Math.max(1, Math.floor(sourceHeight * boundedScale));
+
+    if (canvas.width !== outputWidth || canvas.height !== outputHeight) {
+      canvas.width = outputWidth;
+      canvas.height = outputHeight;
+    }
 
-      const sy = Math.floor(
-        (video.videoHeight - sh) / 2
-      );
+    ctx.setTransform(1, 0, 0, 1, 0, 0);
+    ctx.clearRect(0, 0, outputWidth, outputHeight);
+    ctx.imageSmoothingEnabled = false;
+    ctx.filter = profile.contrast === 1 ? 'none' : `grayscale(1) contrast(${profile.contrast})`;
+    ctx.drawImage(
+      video,
+      sourceX,
+      sourceY,
+      sourceWidth,
+      sourceHeight,
+      0,
+      0,
+      outputWidth,
+      outputHeight,
+    );
+    ctx.filter = 'none';
+    return true;
+  }, []);
 
-      if (
-        canvas.width !== sw ||
-        canvas.height !== sh
-      ) {
-        canvas.width = sw;
-        canvas.height = sh;
-      }
+  const rotateCanvas = useCallback((sourceCanvas: HTMLCanvasElement, degrees: number) => {
+    if (!rotationCanvasRef.current) rotationCanvasRef.current = document.createElement('canvas');
 
-      ctx.drawImage(
-        video,
-        sx,
-        sy,
-        sw,
-        sh,
-        0,
-        0,
-        sw,
-        sh
-      );
-
-      return true;
-    },
-    []
-  );
-
-  // Add a persistent rotation canvas ref at the top
-const rotationCanvasRef = useRef<HTMLCanvasElement | null>(null);
-
-// Update rotateCanvas to re-use the persistent canvas
-const rotateCanvas = useCallback(
-  (sourceCanvas: HTMLCanvasElement, degrees: number) => {
-    if (!rotationCanvasRef.current) {
-      rotationCanvasRef.current = document.createElement('canvas');
-    }
     const rotated = rotationCanvasRef.current;
-    const ctx = rotated.getContext('2d');
-    if (!ctx) return null;
+    const swapDimensions = Math.abs(degrees) === 90;
+    rotated.width = swapDimensions ? sourceCanvas.height : sourceCanvas.width;
+    rotated.height = swapDimensions ? sourceCanvas.width : sourceCanvas.height;
 
-    const radians = (degrees * Math.PI) / 180;
-    if (degrees === 90 || degrees === -90) {
-      rotated.width = sourceCanvas.height;
-      rotated.height = sourceCanvas.width;
-    } else {
-      rotated.width = sourceCanvas.width;
-      rotated.height = sourceCanvas.height;
-    }
+    const ctx = rotated.getContext('2d', { willReadFrequently: true });
+    if (!ctx) return null;
 
+    ctx.setTransform(1, 0, 0, 1, 0, 0);
     ctx.clearRect(0, 0, rotated.width, rotated.height);
     ctx.translate(rotated.width / 2, rotated.height / 2);
-    ctx.rotate(radians);
+    ctx.rotate((degrees * Math.PI) / 180);
     ctx.drawImage(sourceCanvas, -sourceCanvas.width / 2, -sourceCanvas.height / 2);
     return rotated;
-  },
-  []
-);
-
-
+  }, []);
 
   const tryDecode = useCallback(() => {
     const video = videoRef.current;
-
     const canvas = canvasRef.current;
+    if (!video || !canvas || video.readyState < 2 || video.videoWidth === 0 || video.videoHeight === 0) return null;
 
-    if (
-      !video ||
-      !canvas ||
-      video.readyState < 2
-    ) {
-      return null;
-    }
+    const attempt = attemptRef.current++;
+    const profile = ROI_PROFILES[attempt % ROI_PROFILES.length];
+    if (!drawROI(video, canvas, profile)) return null;
 
-    const ok = drawROI(video, canvas);
+    const directValue = decodeBitmap(canvas);
+    if (directValue) return directValue;
 
-    if (!ok) {
-      return null;
-    }
+    // Spread rotation work over successive frames to keep the UI responsive.
+    const rotation = ROTATIONS[attempt % ROTATIONS.length];
+    const rotated = rotateCanvas(canvas, rotation);
+    return rotated ? decodeBitmap(rotated) : null;
+  }, [decodeBitmap, drawROI, rotateCanvas, videoRef]);
 
-    let value = decodeBitmap(canvas);
+  const tick = useCallback(() => {
+    if (stoppedRef.current) return;
 
+    const value = tryDecode();
     if (value) {
-      return value;
-    }
-
-    const rotations = [90, -90, 180];
-
-    for (const rotation of rotations) {
-      const rotated = rotateCanvas(
-        canvas,
-        rotation
-      );
-
-      if (!rotated) {
-        continue;
-      }
-
-      value = decodeBitmap(rotated);
-
-      if (value) {
-        return value;
+      const now = Date.now();
+      const previous = lastValueRef.current;
+      if (value !== previous.value || now - previous.emittedAt > 1500) {
+        lastValueRef.current = { value, emittedAt: now };
+        callbackRef.current(value);
       }
     }
 
-    return null;
-  }, [
-    videoRef,
-    drawROI,
-    decodeBitmap,
-    rotateCanvas,
-  ]);
-
-const tick = useCallback(() => {
-    if (stoppedRef.current) return;
-    
-    const value = tryDecode();
-    if (value && value !== lastValueRef.current) {
-      lastValueRef.current = value;
-      callbackRef.current(value);
-      // If you want it to stop scanning on success, leave 'return;' 
-      // but ensure your parent component handles unmounting the scanner!
-      return; 
-    }
-    
-    setTimeout(tick, 100);
+    timerRef.current = setTimeout(tick, 180);
   }, [tryDecode]);
 
   useEffect(() => {
-    if (!active) {
-      return;
-    }
+    if (!active) return;
 
     stoppedRef.current = false;
+    attemptRef.current = 0;
+    lastValueRef.current = { value: null, emittedAt: 0 };
+    if (!canvasRef.current) canvasRef.current = document.createElement('canvas');
 
-    lastValueRef.current = null;
-
-    if (!canvasRef.current) {
-      canvasRef.current =
-        document.createElement('canvas');
-    }
-
+    const possibleFormats = Array.from(new Set(
+      formats.map(format => ZXING_FORMATS[format]).filter((format): format is BarcodeFormat => format !== undefined),
+    ));
     const hints = new Map();
+    hints.set(DecodeHintType.POSSIBLE_FORMATS, possibleFormats.length > 0 ? possibleFormats : [BarcodeFormat.PDF_417]);
+    hints.set(DecodeHintType.TRY_HARDER, true);
 
-    hints.set(
-      DecodeHintType.POSSIBLE_FORMATS,
-      [BarcodeFormat.PDF_417]
-    );
-
-    hints.set(
-      DecodeHintType.TRY_HARDER,
-      true
-    );
-
-    const reader =
-      new MultiFormatReader();
-
+    const reader = new MultiFormatReader();
     reader.setHints(hints);
-
     readerRef.current = reader;
-
     tick();
 
     return () => {
       stoppedRef.current = true;
-
+      if (timerRef.current) clearTimeout(timerRef.current);
+      timerRef.current = null;
       readerRef.current?.reset();
-
       readerRef.current = null;
     };
-  }, [active, tick]);
+  }, [active, formats, tick]);
 
   return null;
-};
+};

package/src/modules/api/KYCService.ts

@@ -279,14 +279,14 @@ export class KYCService {
         }
     }
 
-    async extractBarcode(params: { fileUri: string; token: string; docType: string; postfix?: string }, env: KycEnvironment = 'PRODUCTION'): Promise<any> {
+    async extractBarcode(params: { fileUri: string; token: string; docType: string; postfix?: string; timeoutMs?: number }, env: KycEnvironment = 'PRODUCTION'): Promise<any> {
         const formData = new FormData();
         await appendFileToFormData(formData, 'file', params.fileUri, `id_${params.postfix || 'back'}_photo.jpg`, 'image/jpeg');
 
         const url = `${this.barcodeServiceURL}/decode_barcode/?doc_type=${encodeURIComponent(params.docType)}`;
 
         try {
-            return await this.crossPlatformMultipartUpload<any>(url, formData, params.token, 60000);
+            return await this.crossPlatformMultipartUpload<any>(url, formData, params.token, params.timeoutMs ?? 60000);
         } catch (e: any) {
             throw e;
         }
@@ -651,4 +651,4 @@ export const clearAuthToken = () => {
 
 export const errorMessage = (error: any) => {
     return error.response?.data?.message || error.response?.data?.detail || error.response?.data?.error || error.response?.data || error.message;
-}
+}

package/src/modules/api/types.ts

@@ -34,6 +34,7 @@ export interface VerificationResult {
       session_id?: string;
       verification_id?: string;
       verification_status?: string;
+      document_type?: string;
       completion_timestamp?: string;
       user_data?: {
         personal_information?: {