@sanctum-key/react-native-sdk 1.0.24 → 1.0.25

package/src/components/KYCElements/VerificationProgressTemplate.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { View, Text, StyleSheet, TouchableOpacity } from 'react-native';
 import { TemplateComponent } from '../../types/KYC.types';
 import { useTemplateKYCFlowContext } from '../../hooks/useTemplateKYCFlow';
@@ -20,85 +20,139 @@ export const VerificationProgressTemplate: React.FC<VerificationProgressTemplate
   const [retryCount, setRetryCount] = useState(0);
   const [isRetrying, setIsRetrying] = useState(false);
   const [timeoutId, setTimeoutId] = useState<number | null>(null);
+  const isPollingRef = useRef(false);
 
   const verification = state.verification;
   const isSuccess = verification.status === 'success';
   const isFailed = verification.status === 'failed';
 
-  const getVerificationResult = async (currentRetryCount = 0, maxRetries = 40) => {
+  const getVerificationResult = async (currentRetryCount = 0, maxRetries = 60) => {
     try {
       logger.log(`Starting verification check (attempt ${currentRetryCount + 1}/${maxRetries + 1})`);
       const result: any = await kycService.getVerificationResult(state.session.session_id);
       
       logger.log('getVerificationResult raw result:', JSON.stringify(result, null, 2));
-
-      if (result?.status === 'Failed.' || result?.status === 'failed' || result?.status === 'rejected') {
+  
+      const rootStatus = (result?.status || '').toLowerCase();
+      if (rootStatus === 'failed.' || rootStatus === 'failed' || rootStatus === 'rejected' || rootStatus === 'error') {
         actions.setVerificationState({
           status: 'failed',
           result: {
             referenceId: state.session.session_id,
-            issues: [result?.message || 'Verification failed. Sent for manual review.']
+            issues: [result?.message || result?.reason || 'Verification failed. Sent for manual review.']
           } as any
         });
         setIsRetrying(false);
-        return; 
+        isPollingRef.current = false; // Release lock
+        return;
       }
-
-      let verificationResult = result?.data;
-      
-      if (verificationResult && !verificationResult.verification_status && verificationResult[state.session.session_id]) {
-         const nestedData = verificationResult[state.session.session_id]?.data;
-         verificationResult = typeof nestedData === 'string' ? JSON.parse(nestedData) : nestedData;
+  
+      // 2. Safely Extract Nested Payload
+      let vData = result?.data || result; // Fallback to root if .data is missing
+  
+      // Handle stringified JSON
+      if (typeof vData === 'string') {
+        try {
+          vData = JSON.parse(vData);
+        } catch (e) { }
       }
-
-      if (!verificationResult) {
-        throw new Error('Verification payload missing for current session');
+  
+      // Handle backend dictionaries indexed by session_id
+      if (vData && typeof vData === 'object' && vData[state.session.session_id]) {
+        let nested = vData[state.session.session_id];
+        if (nested && nested.data) {
+          nested = typeof nested.data === 'string' ? JSON.parse(nested.data) : nested.data;
+        }
+        vData = nested;
+      }
+  
+      if (!vData || typeof vData !== 'object') {
+        throw new Error('Verification payload missing or invalid for current session');
+      }
+  
+      const vStatus = (vData.verification_status || vData.status || vData.state || '').toLowerCase();
+      const vDecision = (vData.decision || vData.outcome || vData.result || '').toLowerCase();
+      // const processingError = vData.reason || vData.error || vData.issues || vData.error_message;
+      const selfieMatch = vData.selfie_info?.is_match; // true, false, or null
+  
+      logger.log(`Parsed Status: [${vStatus}], Decision: [${vDecision}], Selfie Match: [${selfieMatch}]`);
+  
+      // 4. Evaluate Failures First
+      // 5. Evaluate Definitive Success
+    if (
+      vStatus === 'approved' || vStatus === 'verified' || vStatus === 'success' ||
+      vDecision === 'approved' || vDecision === 'passed' || vDecision === 'clear' ||
+      (vStatus === 'completed' && selfieMatch === true)
+    ) {
+      
+      // 🚨 THE FIX: Prevent False Positives (Ghost Payloads)
+      // If it says success, but the data object is completely empty, it is actually a failure.
+      const hasActualData = vData && Object.keys(vData).length > 0;
+      
+      if (!hasActualData) {
+        logger.warn('Backend returned success, but data payload is entirely empty.');
+        actions.setVerificationState({
+          status: 'failed',
+          result: {
+            referenceId: state.session.session_id,
+            issues: ['Document text could not be read clearly. Please retake the photo in better lighting.']
+          } as any
+        });
+        setIsRetrying(false);
+        isPollingRef.current = false;
+        return;
       }
 
-      const currentStatus = verificationResult.verification_status;
-
-      if (currentStatus === null || currentStatus === "processing" || currentStatus === "pending") {
+      // If we have data, proceed to actual success
+      actions.setVerificationState({
+        status: 'success',
+        result: {
+          ...result,
+          referenceId: vData.verification_id || vData.session_id || state.session.session_id
+        } as any
+      });
+      setIsRetrying(false);
+      isPollingRef.current = false;
+      return;
+    }
+  
+      if (
+        vStatus === 'processing' || vStatus === 'pending' || vStatus === 'in_progress' ||
+        vStatus === 'initiated' || (vStatus === 'completed' && selfieMatch === null) || !vStatus
+      ) {
         if (currentRetryCount < maxRetries) {
           const nextRetryCount = currentRetryCount + 1;
           setRetryCount(nextRetryCount);
           setIsRetrying(true);
-          logger.log(`Verification still processing, retrying in 10s... (${nextRetryCount}/${maxRetries})`);
           
-          if (timeoutId) clearTimeout(timeoutId);
+          logger.log(`Verification still processing, retrying in 3s... (${nextRetryCount}/${maxRetries})`);
           
+          if (timeoutId) clearTimeout(timeoutId);
           const newTimeoutId = setTimeout(() => {
             getVerificationResult(nextRetryCount, maxRetries);
-          }, 10000);
+          }, 3000); 
           
           setTimeoutId(newTimeoutId as any);
-          return;
         } else {
           logger.error('Max retries reached, verification still processing');
           setIsRetrying(false);
-          return;
+          isPollingRef.current = false;
+          actions.setVerificationState({
+            status: 'failed',
+            result: {
+              referenceId: state.session.session_id,
+              issues: ['Verification timed out. Please try again.']
+            } as any
+          });
         }
+        return;
       }
-
-      if (currentStatus === "completed" || currentStatus === "approved") {
-        actions.setVerificationState({
-          status: 'success',
-          result: {
-             ...result,
-             referenceId: verificationResult.verification_id || verificationResult.session_id
-          } as any
-        });
-      } else if (currentStatus === "failed" || currentStatus === "rejected") {
-        actions.setVerificationState({
-          status: 'failed',
-          result: {
-            referenceId: verificationResult.verification_id || state.session.session_id,
-            issues: ['Verification failed during processing.']
-          } as any
-        });
-      }
-      
+  
+      // Fallback release if status is completely unknown
+      logger.warn(`Unknown verification status received: ${vStatus}`);
       setIsRetrying(false);
-
+      isPollingRef.current = false;
+  
     } catch (error: any) {
       logger.error('getVerificationResult error', JSON.stringify(errorMessage(error) || { message: error?.message || 'Unknown error' }, null, 2));
       
@@ -106,47 +160,45 @@ export const VerificationProgressTemplate: React.FC<VerificationProgressTemplate
         const nextRetryCount = currentRetryCount + 1;
         setRetryCount(nextRetryCount);
         setIsRetrying(true);
-        logger.log(`getVerificationResult Error occurred, retrying in 10s... (${nextRetryCount}/${maxRetries})`);
         
-        if (timeoutId) clearTimeout(timeoutId);
+        logger.log(`getVerificationResult Error occurred, retrying in 3s... (${nextRetryCount}/${maxRetries})`);
         
+        if (timeoutId) clearTimeout(timeoutId);
         const newTimeoutId = setTimeout(() => {
           getVerificationResult(nextRetryCount, maxRetries);
-        }, 10000);
+        }, 3000);
         
         setTimeoutId(newTimeoutId as any);
       } else {
         setIsRetrying(false);
+        isPollingRef.current = false; // Release lock
         logger.error('Max retries reached after errors');
       }
     }
   };
 
   useEffect(() => {
-    if (state.session.session_id) {
+    if (state.session.session_id && !isSuccess && !isFailed && !isPollingRef.current) {
+      isPollingRef.current = true; // Lock the gate instantly
       getVerificationResult();
     }
-  }, [state.session.session_id]);
+  }, [state.session.session_id, isSuccess, isFailed]);
 
   useEffect(() => {
     return () => {
       if (timeoutId) clearTimeout(timeoutId);
+      isPollingRef.current = false; // Reset lock on unmount
     };
   }, [timeoutId]);
 
-  // 🚨 THE FIX: Automatically trigger the webhook/completion flow on success
   useEffect(() => {
     let autoSubmitTimer: ReturnType<typeof setTimeout>;
-    
     if (isSuccess) {
       logger.log("Verification successful. Initiating auto-submit countdown...");
-      // Wait 3 seconds so the user can see the "Complete" screen, then automatically push the data
       autoSubmitTimer = setTimeout(() => {
         actions.submitVerification();
       }, 3000);
     }
-
-    // Cleanup the timer if the user clicks the button manually before 3 seconds are up
     return () => {
       if (autoSubmitTimer) clearTimeout(autoSubmitTimer);
     };
@@ -171,26 +223,22 @@ export const VerificationProgressTemplate: React.FC<VerificationProgressTemplate
     return (
       <View style={styles.container}>
         <Text style={styles.title}>{t('kyc.verificationProgress.status.failed')}</Text>
-        
         <View style={styles.issuesBox}>
           <Text style={styles.issuesTitle}>{t('common.error')}</Text>
           {Array.isArray(verification.result?.issues) && verification.result.issues.map((issue: string, idx: number) => (
             <Text key={idx} style={styles.issueItem}>• {issue}</Text>
           ))}
         </View>
-
         <TouchableOpacity style={[styles.button, styles.primary]} onPress={() => actions.submitVerification()}>
           <Text style={styles.buttonText}>
             {state.currentLanguage === 'en' ? 'OK / Finish' : 'Terminer'}
           </Text>
         </TouchableOpacity>
-        
         <TouchableOpacity style={[styles.button, styles.secondary]} onPress={() => actions.resetTemplate()}>
           <Text style={styles.secondaryText}>
             {state.currentLanguage === 'en' ? 'Start Over' : 'Recommencer'}
           </Text>
         </TouchableOpacity>
-
         {verification.result?.referenceId ? (
           <Text style={styles.refText}>{`Reference ID: ${verification.result.referenceId}`}</Text>
         ) : null}
@@ -202,11 +250,9 @@ export const VerificationProgressTemplate: React.FC<VerificationProgressTemplate
     <View style={styles.container}>
       <Text style={styles.title}>{t('kyc.verificationProgress.title')}</Text>
       <Text style={styles.subtitle}>
-        {isRetrying
-          ? `${t('kyc.verificationProgress.retrying', { current: retryCount, max: 40 })}`
-          : t('kyc.verificationProgress.estimatedTime')
-        }
+        {isRetrying ? `${t('kyc.verificationProgress.retrying', { current: retryCount, max: 40 })}` : t('kyc.verificationProgress.estimatedTime')}
       </Text>
+
       <View style={styles.timeline}>
         <View style={[styles.dot, styles.done]}><Text style={styles.stepCheckmark}>✓</Text></View>
         <View style={styles.line} />
@@ -214,22 +260,23 @@ export const VerificationProgressTemplate: React.FC<VerificationProgressTemplate
         <View style={styles.line} />
         <View style={[styles.dot, styles.pending]}><Text style={styles.stepCheckmark}>3</Text></View>
       </View>
+
       <View style={styles.row}>
         <Text style={styles.stepLabel}>{t('kyc.verificationProgress.status.completed')}</Text>
         <Text style={styles.stepLabel}>{t('kyc.verificationProgress.steps.analyzing')}</Text>
         <Text style={styles.stepLabel}>{t('kyc.verificationProgress.steps.verifying')}</Text>
       </View>
+
       <View style={styles.card}>
         <Text style={styles.cardTitle}>{t('kyc.idCardCapture.title')}</Text>
         <Text style={styles.cardLine}>{t('kyc.verificationProgress.steps.extracting')}</Text>
+
         <Text style={styles.cardTitle}>{t('kyc.selfieCapture.title')}</Text>
         <Text style={styles.cardLine}>{t('kyc.verificationProgress.steps.analyzing')}</Text>
+
         <Text style={styles.cardTitle}>{t('kyc.verificationProgress.title')}</Text>
         <Text style={styles.cardLine}>
-          {isRetrying
-            ? `${t('kyc.verificationProgress.status.processing')}...`
-            : t('kyc.verificationProgress.status.pending')
-          }
+          {isRetrying ? `${t('kyc.verificationProgress.status.processing')}...` : t('kyc.verificationProgress.status.pending')}
         </Text>
       </View>
     </View>

package/src/components/OverLay/type.ts

@@ -55,7 +55,7 @@ export interface EnhancedCameraViewProps {
     cameraType?: 'front' | 'back';
     style?: ViewStyle;
     onCapture?: (result: { success: boolean; path?: string; error?: string }) => void;
-    onSilentCapture?: (result: { success: boolean; path?: string; error?: string }) => void;
+    onSilentCapture?: (result: { success: boolean; path?: string; error?: string; barcode:unknown }) => void;
     silentCaptureResult?: ISilentCaptureResult;
     onError?: (event: { message: string }) => void;
     onClose?: () => void;

package/src/components/WebBarcodeScanner.tsx

@@ -0,0 +1,273 @@
+import React, { useCallback, useEffect, useRef } from 'react';
+import {
+  MultiFormatReader,
+  BarcodeFormat,
+  DecodeHintType,
+  HTMLCanvasElementLuminanceSource,
+  BinaryBitmap,
+  HybridBinarizer,
+  GlobalHistogramBinarizer,
+} from '@zxing/library';
+
+interface WebBarcodeScannerProps {
+  videoRef: React.RefObject<HTMLVideoElement | null>;
+  active: boolean;
+  onBarcodeScanned: (value: string) => void;
+}
+
+export const WebBarcodeScanner: React.FC<WebBarcodeScannerProps> = ({
+  videoRef,
+  active,
+  onBarcodeScanned,
+}) => {
+  const readerRef = useRef<MultiFormatReader | null>(null);
+
+  const canvasRef = useRef<HTMLCanvasElement | null>(null);
+
+  const lastValueRef = useRef<string | 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 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
+      );
+
+      const sy = Math.floor(
+        (video.videoHeight - sh) / 2
+      );
+
+      if (
+        canvas.width !== sw ||
+        canvas.height !== sh
+      ) {
+        canvas.width = sw;
+        canvas.height = sh;
+      }
+
+      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 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;
+    }
+
+    ctx.clearRect(0, 0, rotated.width, rotated.height);
+    ctx.translate(rotated.width / 2, rotated.height / 2);
+    ctx.rotate(radians);
+    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
+    ) {
+      return null;
+    }
+
+    const ok = drawROI(video, canvas);
+
+    if (!ok) {
+      return null;
+    }
+
+    let value = decodeBitmap(canvas);
+
+    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;
+      }
+    }
+
+    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);
+  }, [tryDecode]);
+
+  useEffect(() => {
+    if (!active) {
+      return;
+    }
+
+    stoppedRef.current = false;
+
+    lastValueRef.current = null;
+
+    if (!canvasRef.current) {
+      canvasRef.current =
+        document.createElement('canvas');
+    }
+
+    const hints = new Map();
+
+    hints.set(
+      DecodeHintType.POSSIBLE_FORMATS,
+      [BarcodeFormat.PDF_417]
+    );
+
+    hints.set(
+      DecodeHintType.TRY_HARDER,
+      true
+    );
+
+    const reader =
+      new MultiFormatReader();
+
+    reader.setHints(hints);
+
+    readerRef.current = reader;
+
+    tick();
+
+    return () => {
+      stoppedRef.current = true;
+
+      readerRef.current?.reset();
+
+      readerRef.current = null;
+    };
+  }, [active, tick]);
+
+  return null;
+};

package/src/config/KYCConfigs.ts

@@ -56,7 +56,7 @@ export const basicKYCConfig: KYCFlowConfig = {
       validation: { required: true },
       cameraConfig: {
         aspectRatio: 4/3,
-        quality: 0.8,
+        quality: 1,
         flashMode: 'auto',
         cameraType: 'back',
         allowRetake: true,
@@ -78,7 +78,7 @@ export const basicKYCConfig: KYCFlowConfig = {
       validation: { required: true },
       cameraConfig: {
         aspectRatio: 4/3,
-        quality: 0.8,
+        quality: 1,
         flashMode: 'auto',
         cameraType: 'back',
         allowRetake: true,

package/src/config/region_mapping.json

@@ -275,20 +275,6 @@
                     "py_file": "ontario_front.py",
                     "keys_found": null
                 }
-            ],
-            "Quebec": [
-                {
-                    "py_file": "quebec_01_back.py",
-                    "back": "2D_barcode"
-                },
-                {
-                    "py_file": "quebec_01_front.py",
-                    "keys_found": null
-                },
-                {
-                    "py_file": "quebec_02_front.py",
-                    "front": "2D_barcode"
-                }
             ]
         },
         "identity_card": {