@sanctum-key/react-native-sdk 1.0.19 → 1.0.20

package/src/components/KYCElements/VerificationProgressTemplate.tsx

@@ -22,7 +22,6 @@ export const VerificationProgressTemplate: React.FC<VerificationProgressTemplate
   const [timeoutId, setTimeoutId] = useState<number | null>(null);
 
   const verification = state.verification;
-
   const isSuccess = verification.status === 'success';
   const isFailed = verification.status === 'failed';
 
@@ -30,38 +29,47 @@ export const VerificationProgressTemplate: React.FC<VerificationProgressTemplate
   const getVerificationResult = async (currentRetryCount = 0, maxRetries = 40) => {
     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') {
+        actions.setVerificationState({
+          status: 'failed',
+          result: {
+            referenceId: state.session.session_id,
+            issues: [result?.message || 'Verification failed. Sent for manual review.']
+          } as any
+        });
+        setIsRetrying(false);
+        return; // Break out of the function so it DOES NOT RETRY
+      }
 
-      const result = await kycService.getVerificationResult(state.session.session_id);
-      const responseData = (result as any)?.data;
+      // Check standard nested payload format
+      const responseData = result?.data;
       const verificationResult = responseData?.[state.session.session_id]?.data;
 
       if (!verificationResult) {
+        // If we still didn't get data and the status wasn't failed, throw to trigger a retry
         throw new Error('Verification payload missing for current session');
       }
 
-      logger.log('getVerificationResult result', JSON.stringify({result,verificationResult}, null, 2));
-
       // Vérifier le statut de vérification
       if (verificationResult.verification_status === null || verificationResult.verification_status === "processing" || verificationResult.verification_status === "pending") {
         if (currentRetryCount < maxRetries) {
           const nextRetryCount = currentRetryCount + 1;
           setRetryCount(nextRetryCount);
           setIsRetrying(true);
-
           logger.log(`Verification still processing, retrying in 10s... (${nextRetryCount}/${maxRetries})`);
-
-          // Nettoyer le timeout précédent s'il existe
-          if (timeoutId) {
-            clearTimeout(timeoutId);
-          }
-
-          // Attendre 10 secondes avant de relancer
+          
+          if (timeoutId) clearTimeout(timeoutId);
+          
           const newTimeoutId = setTimeout(() => {
             getVerificationResult(nextRetryCount, maxRetries);
           }, 10000);
-
-          setTimeoutId(newTimeoutId);
-          return; // Sortir de la fonction pour éviter de traiter le résultat
+          
+          setTimeoutId(newTimeoutId as any);
+          return; 
         } else {
           logger.error('Max retries reached, verification still processing');
           setIsRetrying(false);
@@ -70,51 +78,39 @@ export const VerificationProgressTemplate: React.FC<VerificationProgressTemplate
       }
 
       // Traiter le résultat final (success, failed, etc.)
-      if (verificationResult.verification_status === "completed" ||
-        verificationResult.verification_status === "approved") {
-        // Mettre à jour l'état avec le succès
+      if (verificationResult.verification_status === "completed" || verificationResult.verification_status === "approved") {
         actions.setVerificationState({
           status: 'success',
           result: result
         });
-      } else if (verificationResult.verification_status === "failed" ||
-        verificationResult.verification_status === "rejected") {
-        // Mettre à jour l'état avec l'échec
+      } else if (verificationResult.verification_status === "failed" || verificationResult.verification_status === "rejected") {
         actions.setVerificationState({
           status: 'failed',
           result: {
-            referenceId: verificationResult.verification_id,
-            issues: ['Verification failed']
+            referenceId: verificationResult.verification_id || state.session.session_id,
+            issues: ['Verification failed during processing.']
           } as any
         });
       }
-
+      
       setIsRetrying(false);
 
     } catch (error: any) {
-      logger.error(
-        'getVerificationResult error',
-        JSON.stringify(errorMessage(error) || { message: error?.message || 'Unknown error' }, null, 2)
-      );
-
-      // En cas d'erreur, on peut aussi retry
+      logger.error('getVerificationResult error', JSON.stringify(errorMessage(error) || { message: error?.message || 'Unknown error' }, null, 2));
+      
       if (currentRetryCount < maxRetries) {
         const nextRetryCount = currentRetryCount + 1;
         setRetryCount(nextRetryCount);
         setIsRetrying(true);
-
         logger.log(`getVerificationResult Error occurred, retrying in 10s... (${nextRetryCount}/${maxRetries})`);
-
-        // Nettoyer le timeout précédent s'il existe
-        if (timeoutId) {
-          clearTimeout(timeoutId);
-        }
-
+        
+        if (timeoutId) clearTimeout(timeoutId);
+        
         const newTimeoutId = setTimeout(() => {
           getVerificationResult(nextRetryCount, maxRetries);
         }, 10000);
-
-        setTimeoutId(newTimeoutId);
+        
+        setTimeoutId(newTimeoutId as any);
       } else {
         setIsRetrying(false);
         logger.error('Max retries reached after errors');
@@ -128,12 +124,9 @@ export const VerificationProgressTemplate: React.FC<VerificationProgressTemplate
     }
   }, [state.session.session_id]);
 
-  // Nettoyage des timeouts lors du démontage du composant
   useEffect(() => {
     return () => {
-      if (timeoutId) {
-        clearTimeout(timeoutId);
-      }
+      if (timeoutId) clearTimeout(timeoutId);
     };
   }, [timeoutId]);
 
@@ -156,19 +149,27 @@ export const VerificationProgressTemplate: React.FC<VerificationProgressTemplate
     return (
       <View style={styles.container}>
         <Text style={styles.title}>{t('kyc.verificationProgress.status.failed')}</Text>
-        <Text style={styles.subtitle}>{t('errors.validationError')}</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.resetTemplate()}>
-          <Text style={styles.buttonText}>{t('kyc.verificationProgress.status.retry')}</Text>
+
+        {/* 🚨 FIX 2: Give the user actionable options to End or Restart */}
+        <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]}>
-          <Text style={styles.secondaryText}>{t('common.info')}</Text>
+        
+        <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}
@@ -176,12 +177,6 @@ export const VerificationProgressTemplate: React.FC<VerificationProgressTemplate
     );
   }
 
-
-
-
-
-
-
   return (
     <View style={styles.container}>
       <Text style={styles.title}>{t('kyc.verificationProgress.title')}</Text>
@@ -191,7 +186,6 @@ export const VerificationProgressTemplate: React.FC<VerificationProgressTemplate
           : 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} />
@@ -199,13 +193,11 @@ 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>
@@ -239,17 +231,13 @@ const styles = StyleSheet.create({
   card: { backgroundColor: 'white', padding: 16, borderRadius: 16, marginTop: 24 },
   cardTitle: { fontSize: 16, color: '#6B7280', marginTop: 8 },
   cardLine: { fontSize: 18, color: '#111827', fontWeight: '600', marginTop: 2 },
-  // Success/Failure specific
-  button: { paddingVertical: 14, borderRadius: 10, alignItems: 'center', marginTop: 20 },
+  button: { paddingVertical: 14, borderRadius: 10, alignItems: 'center', marginTop: 14 },
   primary: { backgroundColor: '#2DBD60' },
   buttonText: { color: 'white', fontSize: 16, fontWeight: '600' },
   refText: { marginTop: 12, textAlign: 'center', color: '#6B7280' },
   issuesBox: { backgroundColor: '#FEF2F2', borderRadius: 16, padding: 16, marginTop: 20 },
   issuesTitle: { color: '#991B1B', fontWeight: '700', marginBottom: 8 },
   issueItem: { color: '#991B1B', marginTop: 4 },
-  secondary: { backgroundColor: '#F3F4F6' },
-  secondaryText: { color: '#111827', fontSize: 16, fontWeight: '600' },
-});
-
-
-
+  secondary: { backgroundColor: '#F3F4F6', borderWidth: 1, borderColor: '#D1D5DB' },
+  secondaryText: { color: '#374151', fontSize: 16, fontWeight: '600' },
+});

package/src/hooks/useTemplateKYCFlow.tsx

@@ -698,21 +698,21 @@ export const useTemplateKYCFlow = (
       const templateId = chooseTemplateId(templateWithReviewAndVerification);
 
       // This is the API call that we know succeeds
-      await kycService.verificationSession({
-        session_id: resolvedSessionId,
-        step: 0,
-        data: {
-          template_id: templateId,
-          metadata: {
-            language: initialLanguage,
-            ...(referenceId ? { reference_id: referenceId } : {}),
-          },
+     await kycService.verificationSession({
+      session_id: resolvedSessionId,
+      step: 0,
+      data: {
+        template_id: templateId,
+        ...(referenceId ? { reference_id: referenceId } : {}),
+        metadata: {
+          language: initialLanguage,
         },
-        templateId: templateId,
-        token: token ?? "", 
-        action: 'initialize_session',
-        apiKey: apiKey,
-      });
+      },
+      templateId: templateId,
+      token: token ?? "",
+      action: 'initialize_session',
+      apiKey: apiKey,
+    });
 
 
       setState(prev => ({