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

package/src/components/TemplateKYCExample.tsx

@@ -86,53 +86,51 @@ export function TemplateKYCExample({
     let finalPayload: any = data; // Fallback to raw data if mapping fails
 
     if ((data.status === 'success' || data.status === 'in_progress') && data.result) {
-      // 1. Extract the dynamic root key (e.g., 'national_id', 'passport')
-      const docKey = Object.keys(data.result)[0];
       
-      if (docKey && data.result[docKey]) {
-        const backendData = data.result[docKey].data;
-        const personalInfo = backendData?.user_data?.personal_information || {};
+      const backendData = data.result.data;
+
+      if (backendData) {
+        const personalInfo = backendData.user_data?.personal_information || {};
+        const activeSessionId = kyc_session_id || existingSessionId || backendData.session_id || "";
+        
         
-        // Ensure we capture the session ID from whichever prop was provided
-        const activeSessionId = kyc_session_id || existingSessionId || "";
+        const docType = (backendData as any).document_type || (backendData as any).documentType;
 
-        // 2. Strict mapping to your expected format
         finalPayload = {
           data: {
-            verification_id: backendData?.verification_id,
-            verification_status: backendData?.verification_status,
+            document_type: docType,
+            verification_id: backendData.verification_id,
+            verification_status: backendData.verification_status,
             session_id: activeSessionId,
             user_data: {
               personal_information: {
-                first_name: personalInfo.first_name || undefined,
+                first_name: personalInfo.first_name || personalInfo.given_name || undefined,
+                last_name: personalInfo.last_name || personalInfo.surname || undefined,
                 given_name: personalInfo.given_name || undefined,
-                last_name: personalInfo.last_name || undefined,
-                surname: personalInfo.last_name || undefined, // fallback
+                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,
-                date_of_birth: personalInfo.date_of_birth || undefined,
-                birth_date: personalInfo.date_of_birth || undefined, // fallback
-                country: personalInfo.country || undefined,
-                document_number: (personalInfo as any).document_number || undefined,
-                nationality: (personalInfo as any).nationality || undefined,
+                date_of_birth: personalInfo.date_of_birth || personalInfo.birth_date || undefined,
+                birth_date: personalInfo.birth_date || undefined,
+                document_number: personalInfo.document_number || undefined,
+                nationality: personalInfo.nationality || undefined,
+                sex: personalInfo.sex || undefined,
               }
             }
           }
         };
 
-        sdkLogger.info("Wrapper formatted completion payload successfully", { 
-          verification_id: finalPayload.data.verification_id 
+        sdkLogger.info("Wrapper formatteddddd completion payload successfully", { 
+          data: finalPayload 
         });
       }
     } else {
       sdkLogger.warn("Wrapper received completion without a success result object", { status: data.status });
     }
 
-    onComplete(finalPayload as any); 
-  };
+    onComplete(finalPayload); 
+};
 
   const handleCancel = () => {
     console.log('KYC Template flow cancelled');
@@ -140,7 +138,7 @@ export function TemplateKYCExample({
   };
 
   const handleError = (error: string) => {
-    console.error('KYC Template error:', error);
+    sdkLogger.error('KYC Template error:', error);
     onError(error);
   };
 

package/src/components/TemplateKYCFlowRefactored.tsx

@@ -125,11 +125,7 @@ export const TemplateKYCFlow: React.FC<TemplateKYCFlowProps> = ({
 
   const template = providedTemplate || loadedTemplate;
 
-  useEffect(() => {
-    if (template) {
-      sdkLogger.info("Template loaded successfully", { componentCount: template.components.length });
-    }
-  }, [template]);
+  
 
   if (templateId && isLoading && !template) {
     return (
@@ -178,12 +174,11 @@ export const TemplateKYCFlow: React.FC<TemplateKYCFlowProps> = ({
       onError={(err) => {
         sdkLogger.error("KYC Flow Error", { error: err });
         sdkLogger.flush();
+        logger.log('Error', err)
         if (onError) onError(err);
       }}
       onCancel={OnCancel}
       initialLanguage={language}
-      // 🚨 3. Pass the resolved active API key down to the provider! 
-      // The context/hooks will automatically use this key.
       apiKey={activeApiKey}
       testApiKey={TEST_API_KEY} 
       env={env}
@@ -203,7 +198,6 @@ const TemplateKYCFlowContent: React.FC<{ onCancel?: () => void }> = ({ onCancel
   const { state, actions, currentComponent, progress } = useTemplateKYCFlowContext();
   const { t } = useI18n();
 
-  console.log(`sessionnnn id: ${state.session.session_id}`)
 
   useEffect(() => {
     if (state.session?.session_id) {

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/hooks/useTemplateLoader.ts

@@ -61,10 +61,8 @@ export function useTemplateLoader(): UseTemplateLoaderReturn {
 
       // Set the template
       setTemplate(transformedTemplate);
-      logger.log(`Template loaded successfully: ${templateId}`);
     } catch (err: any) {
       const errorMessage = err.message || 'Failed to load template';
-      logger.error(`Error loading template ${templateId}:`, errorMessage);
       setError(errorMessage);
       setTemplate(null);
     } finally {

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/TemplateService.ts

@@ -1,6 +1,6 @@
 import axios from 'axios';
 import { BackendKYCTemplate, TemplateAPIResponse } from '../../types/KYC.types';
-import { logger } from '../../utils/logger';
+import { logger, sdkLogger } from '../../utils/logger';
 import { errorMessage } from './KYCService';
 import KYCConfig from '../../config/KYCConfig';
 
@@ -82,7 +82,8 @@ export class TemplateServiceClass {
       logger.log(`Template ${templateId} fetched successfully`);
       return template;
     } catch (error: any) {
-      logger.error(`Error fetching template ${templateId}:`, JSON.stringify(errorMessage(error), null, 2));
+      logger.error(`Error fetching template ${templateId}:`, JSON.stringify(errorMessage(error), null, 2))
+      sdkLogger.error(`Error fetching template ${templateId}:`, JSON.stringify(errorMessage(error), null, 2));
 
       // Extract backend error message if available
       const backendMessage = errorMessage(error);

package/src/modules/api/types.ts

@@ -26,34 +26,42 @@ export type VerificationSessionData = Record<string, any>;
 
 
 export interface VerificationResult {
-    [key: string]: {
-        data: {
-            verification_id: string;
-            verification_status: string;
-            completion_timestamp: string;
-            user_data: {
-                personal_information: {
-                    full_name: string;
-                    first_name: string | null;
-                    given_name: string | null;
-                    last_name: string | null;
-                    date_of_birth: string;
-                    sex: string;
-                    expiry_date: string ;
-                    issue_date: string;
-                    issue_place: string | null;
-                    place_of_birth: string | null;
-                    address: string | null;
-                    city: string | null;
-                    postal_code: string | null;
-                    country: string | null;
-                };
-            };
-            selfie_info: {
-                is_match: boolean;
-                similarity: number;
-                image: string;
-            };
+    message?: string;
+    status?: string;
+    referenceId?: string;
+    issues?: string[];
+    data?: {
+      session_id?: string;
+      verification_id?: string;
+      verification_status?: string;
+      document_type?: string;
+      completion_timestamp?: string;
+      user_data?: {
+        personal_information?: {
+          full_name?: string | null;
+          first_name?: string | null;
+          last_name?: string | null;
+          given_name?: string | null;
+          surname?: string | null;
+          date_of_birth?: string | null;
+          birth_date?: string | null;
+          sex?: string | null;
+          expiry_date?: string | null;
+          issue_date?: string | null;
+          issue_place?: string | null;
+          place_of_birth?: string | null;
+          address?: string | null;
+          city?: string | null;
+          postal_code?: string | null;
+          country?: string | null;
+          nationality?: string | null;
+          document_number?: string | null;
         };
+      };
+      selfie_info?: {
+        is_match?: boolean;
+        similarity?: number;
+        image?: string;
+      };
     };
-}
+  }