@sanctum-key/react-native-sdk 1.0.43 → 1.0.45

package/src/components/KYCElements/VerificationProgressTemplate.tsx

@@ -14,25 +14,33 @@ interface VerificationProgressTemplateProps {
   language?: string;
 }
 
+const MAX_RETRIES = 40; // 40 attempts * 3 seconds = exactly 2 minutes of polling
+
 export const VerificationProgressTemplate: React.FC<VerificationProgressTemplateProps> = () => {
   const { t } = useI18n();
   const { state, actions } = useTemplateKYCFlowContext();
+  
   const [retryCount, setRetryCount] = useState(0);
   const [isRetrying, setIsRetrying] = useState(false);
-  const [timeoutId, setTimeoutId] = useState<number | null>(null);
+  
+  // 🚨 BULLETPROOF REFS: Prevents memory leaks and duplicate polling loops
+  const timeoutIdRef = useRef<ReturnType<typeof setTimeout> | null>(null);
   const isPollingRef = useRef(false);
+  const isMountedRef = useRef(true); 
 
   const verification = state.verification;
   const isSuccess = verification.status === 'success';
   const isFailed = verification.status === 'failed';
 
-  const getVerificationResult = async (currentRetryCount = 0, maxRetries = 60) => {
+  const getVerificationResult = async (currentRetryCount = 0) => {
+    // If component unmounted while waiting, stop everything
+    if (!isMountedRef.current) return;
+
     try {
-      logger.log(`Starting verification check (attempt ${currentRetryCount + 1}/${maxRetries + 1})`);
+      logger.log(`Starting verification check (attempt ${currentRetryCount + 1}/${MAX_RETRIES})`);
       const result: any = await kycService.getVerificationResult(state.session.session_id);
-      
       logger.log('getVerificationResult raw result:', JSON.stringify(result, null, 2));
-  
+
       const rootStatus = (result?.status || '').toLowerCase();
       if (rootStatus === 'failed.' || rootStatus === 'failed' || rootStatus === 'rejected' || rootStatus === 'error') {
         actions.setVerificationState({
@@ -42,22 +50,18 @@ export const VerificationProgressTemplate: React.FC<VerificationProgressTemplate
             issues: [result?.message || result?.reason || 'Verification failed. Sent for manual review.']
           } as any
         });
-        setIsRetrying(false);
-        isPollingRef.current = false; // Release lock
+        if (isMountedRef.current) setIsRetrying(false);
+        isPollingRef.current = false;
         return;
       }
-  
+
       // 2. Safely Extract Nested Payload
-      let vData = result?.data || result; // Fallback to root if .data is missing
-  
-      // Handle stringified JSON
+      let vData = result?.data || result;
+      
       if (typeof vData === 'string') {
-        try {
-          vData = JSON.parse(vData);
-        } catch (e) { }
+        try { vData = JSON.parse(vData); } catch (e) { }
       }
-  
-      // 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) {
@@ -65,132 +69,132 @@ export const VerificationProgressTemplate: React.FC<VerificationProgressTemplate
         }
         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
-  
+      const selfieMatch = vData.selfie_info?.is_match;
+
       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.');
+
+      // SUCCESS CONDITION
+      if (
+        vStatus === 'approved' || vStatus === 'verified' || vStatus === 'success' ||
+        vDecision === 'approved' || vDecision === 'passed' || vDecision === 'clear' ||
+        (vStatus === 'completed' && selfieMatch === true)
+      ) {
+        const hasActualData = vData && Object.keys(vData).length > 0;
+        if (!hasActualData) {
+          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
+          });
+          if (isMountedRef.current) setIsRetrying(false);
+          isPollingRef.current = false;
+          return;
+        }
+
         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
+          status: 'success',
+          result: { ...result, referenceId: vData.verification_id || vData.session_id || state.session.session_id } as any
         });
-        setIsRetrying(false);
+        if (isMountedRef.current) setIsRetrying(false);
         isPollingRef.current = false;
         return;
       }
 
-      // 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;
-    }
-  
+      // PENDING/PROCESSING CONDITION
       if (
         vStatus === 'processing' || vStatus === 'pending' || vStatus === 'in_progress' ||
         vStatus === 'initiated' || (vStatus === 'completed' && selfieMatch === null) || !vStatus
       ) {
-        if (currentRetryCount < maxRetries) {
+        if (currentRetryCount < MAX_RETRIES) {
           const nextRetryCount = currentRetryCount + 1;
-          setRetryCount(nextRetryCount);
-          setIsRetrying(true);
-          
-          logger.log(`Verification still processing, retrying in 3s... (${nextRetryCount}/${maxRetries})`);
-          
-          if (timeoutId) clearTimeout(timeoutId);
-          const newTimeoutId = setTimeout(() => {
-            getVerificationResult(nextRetryCount, maxRetries);
-          }, 3000); 
+          if (isMountedRef.current) {
+            setRetryCount(nextRetryCount);
+            setIsRetrying(true);
+          }
+          logger.log(`Verification still processing, retrying in 3s... (${nextRetryCount}/${MAX_RETRIES})`);
           
-          setTimeoutId(newTimeoutId as any);
+          if (timeoutIdRef.current) clearTimeout(timeoutIdRef.current);
+          timeoutIdRef.current = setTimeout(() => {
+            getVerificationResult(nextRetryCount);
+          }, 3000);
         } else {
           logger.error('Max retries reached, verification still processing');
-          setIsRetrying(false);
-          isPollingRef.current = false;
           actions.setVerificationState({
             status: 'failed',
             result: {
               referenceId: state.session.session_id,
-              issues: ['Verification timed out. Please try again.']
+              issues: ['Verification timed out after maximum attempts. Please try again.']
             } as any
           });
+          if (isMountedRef.current) setIsRetrying(false);
+          isPollingRef.current = false;
         }
         return;
       }
-  
-      // Fallback release if status is completely unknown
+
+      // UNKNOWN FALLBACK
       logger.warn(`Unknown verification status received: ${vStatus}`);
-      setIsRetrying(false);
+      if (isMountedRef.current) setIsRetrying(false);
       isPollingRef.current = false;
-  
+
     } catch (error: any) {
       logger.error('getVerificationResult error', JSON.stringify(errorMessage(error) || { message: error?.message || 'Unknown error' }, null, 2));
       
-      if (currentRetryCount < maxRetries) {
+      if (currentRetryCount < MAX_RETRIES) {
         const nextRetryCount = currentRetryCount + 1;
-        setRetryCount(nextRetryCount);
-        setIsRetrying(true);
-        
-        logger.log(`getVerificationResult Error occurred, retrying in 3s... (${nextRetryCount}/${maxRetries})`);
+        if (isMountedRef.current) {
+          setRetryCount(nextRetryCount);
+          setIsRetrying(true);
+        }
+        logger.log(`Error occurred, retrying in 3s... (${nextRetryCount}/${MAX_RETRIES})`);
         
-        if (timeoutId) clearTimeout(timeoutId);
-        const newTimeoutId = setTimeout(() => {
-          getVerificationResult(nextRetryCount, maxRetries);
+        if (timeoutIdRef.current) clearTimeout(timeoutIdRef.current);
+        timeoutIdRef.current = setTimeout(() => {
+          getVerificationResult(nextRetryCount);
         }, 3000);
-        
-        setTimeoutId(newTimeoutId as any);
       } else {
-        setIsRetrying(false);
-        isPollingRef.current = false; // Release lock
         logger.error('Max retries reached after errors');
+        actions.setVerificationState({
+          status: 'failed',
+          result: {
+            referenceId: state.session.session_id,
+            issues: ['Connection failed multiple times. Please check your network and try again.']
+          } as any
+        });
+        if (isMountedRef.current) setIsRetrying(false);
+        isPollingRef.current = false;
       }
     }
   };
 
+  // 1. Kick off polling when component mounts
   useEffect(() => {
+    isMountedRef.current = true;
     if (state.session.session_id && !isSuccess && !isFailed && !isPollingRef.current) {
-      isPollingRef.current = true; // Lock the gate instantly
-      getVerificationResult();
+      isPollingRef.current = true;
+      getVerificationResult(0); // Always start explicitly at 0
     }
   }, [state.session.session_id, isSuccess, isFailed]);
 
+  // 2. Strict cleanup on unmount ONLY
   useEffect(() => {
     return () => {
-      if (timeoutId) clearTimeout(timeoutId);
-      isPollingRef.current = false; // Reset lock on unmount
+      isMountedRef.current = false;
+      if (timeoutIdRef.current) clearTimeout(timeoutIdRef.current);
+      isPollingRef.current = false;
     };
-  }, [timeoutId]);
+  }, []);
 
+  // 3. Auto-submit on success
   useEffect(() => {
     let autoSubmitTimer: ReturnType<typeof setTimeout>;
     if (isSuccess) {
@@ -204,14 +208,18 @@ export const VerificationProgressTemplate: React.FC<VerificationProgressTemplate
     };
   }, [isSuccess, actions]);
 
+  // --- RENDER LOGIC ---
+
   if (isSuccess) {
     return (
       <View style={styles.container}>
         <Text style={styles.title}>{t('kyc.verificationProgress.steps.complete')}</Text>
         <Text style={styles.subtitle}>{t('kyc.verificationProgress.subtitle')}</Text>
+        
         <TouchableOpacity style={[styles.button, styles.primary]} onPress={() => actions.submitVerification()}>
           <Text style={styles.buttonText}>{t('common.continue')}</Text>
         </TouchableOpacity>
+        
         {verification.result?.referenceId ? (
           <Text style={styles.refText}>{`Verification ID: ${verification.result.referenceId}`}</Text>
         ) : null}
@@ -223,22 +231,26 @@ 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}
@@ -250,7 +262,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: MAX_RETRIES })}`
+          : t('kyc.verificationProgress.estimatedTime')}
       </Text>
 
       <View style={styles.timeline}>
@@ -270,10 +284,10 @@ export const VerificationProgressTemplate: React.FC<VerificationProgressTemplate
       <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')}