@transfergratis/react-native-sdk 0.1.16 → 0.1.18

package/src/components/KYCElements/IDCardCapture.tsx

@@ -139,7 +139,7 @@ export const IDCardCapture: React.FC<IDCardCaptureProps> = ({
     setShowCamera(true);
     actions.showCustomStepper(false);
     setCapturedImages({ ...capturedImages, [currentSide]: { dir: '', file: '', mrz: '' } });
-    setSilentCaptureResult((prev) => ({ path: '', success: false, isAnalyzing: false, error: '' }));
+    setSilentCaptureResult((prev) => ({ ...prev, path: '', success: false, isAnalyzing: false, error: '' }));
     setCropImageUri('');
     onValueChange({ ...value, [currentSide]: { dir: '', file: '', mrz: '' } });
   };
@@ -212,7 +212,7 @@ export const IDCardCapture: React.FC<IDCardCaptureProps> = ({
 
       const regionMappings = getCurrentSideVerification(currentSide)
       // logger.log("regionMappings", JSON.stringify(truncateFields({regionMappings, templatePath}), null, 2));
-      if (regionMappings.authMethod.includes('MRZ') && templatePath.length === 0) {
+      if (templatePath.length === 0) {
         try {
           const templateType = await checkTemplateType({ path: result.path || '', docType: selectedDocumentType?.type as GovernmentDocumentType, docRegion: countryData?.code || "", postfix: currentSide });
 
@@ -224,9 +224,9 @@ export const IDCardCapture: React.FC<IDCardCaptureProps> = ({
           if (templateType.card_obb) {
             let bbox: IBbox | undefined;
             try {
-                const crop = await cropByObb(result?.path || '', (templateType as any).card_obb);
-                bbox = crop.bbox;
-                templateBbox = bbox;
+              const crop = await cropByObb(result?.path || '', (templateType as any).card_obb);
+              bbox = crop.bbox;
+              templateBbox = bbox;
             } catch { }
           }
         } catch (e: any) {
@@ -250,7 +250,7 @@ export const IDCardCapture: React.FC<IDCardCaptureProps> = ({
             logger.log("front verification result", truncateFields(mrz));
             const bbox = (mrz as any)?.bbox || templateBbox;
             setSilentCaptureResult((prev) => ({
-              ...prev, 
+              ...prev,
               path: result.path,
               templatePath: templatePath,
               bbox: bbox, success: true,
@@ -286,7 +286,7 @@ export const IDCardCapture: React.FC<IDCardCaptureProps> = ({
             success: true, mrz: JSON.stringify(mrz), isAnalyzing: false,
             country: countryData?.code,
             documentType: selectedDocumentType?.type,
-            
+
           }));
           // Stocker le bbox pour ce côté
           if (bbox && typeof bbox === 'object') {
@@ -345,7 +345,7 @@ export const IDCardCapture: React.FC<IDCardCaptureProps> = ({
   const handleDocumentTypeSelection = (docType: GovernmentDocumentType) => {
     setSelectedDocumentType({ type: docType, region: hasRegions(docType) ? '' : 'root' });
     setSilentCaptureResult((prev) => ({ ...prev, templatePath: '', bbox: undefined, success: false, isAnalyzing: false, error: '', path: '', mrz: '', country: '', documentType: '' }));
-    setCapturedImages((prev) => ({ ...prev, front: { dir: '', file: '', mrz: '' }, back: { dir: '', file: '', mrz: '' } }));
+    setCapturedImages((prev) => ({ front: { dir: '', file: '', mrz: '', templatePath: '' }, back: { dir: '', file: '', mrz: '', templatePath: '' } }));
   };
   const handleRegionSelection = (region: string) => {
     setSelectedDocumentType((prev) => ({ ...prev, region: region }));
@@ -522,7 +522,7 @@ export const IDCardCapture: React.FC<IDCardCaptureProps> = ({
         <ScrollView style={styles.previewItemContainer} showsVerticalScrollIndicator={false}>
           <View key={currentSide} style={styles.sideContainer}>
             <Text style={styles.sideTitle}>
-              {currentSide === 'front' ? 'Recto' : 'Verso'} de la carte d'identité
+              {t('kyc.idCardCapture.captureTitle', { side: currentSide === 'front' ? locale === 'en' ? 'Front' : 'Recto' : locale === 'en' ? 'Back' : 'Verso' })}
             </Text>
             <Text style={{ fontSize: 14, color: '#666', textAlign: 'center', marginBottom: 16, lineHeight: 22 }}>
               {getLocalizedText(component.instructions)}

package/src/components/KYCElements/VerificationProgressTemplate.tsx

@@ -3,7 +3,7 @@ import { View, Text, StyleSheet, TouchableOpacity } from 'react-native';
 import { TemplateComponent } from '../../types/KYC.types';
 import { useTemplateKYCFlowContext } from '../../hooks/useTemplateKYCFlow';
 import { useI18n } from '../../hooks/useI18n';
-import kycService from '../../modules/api/KYCService';
+import kycService, { errorMessage } from '../../modules/api/KYCService';
 import { logger } from '../../utils/logger';
 
 interface VerificationProgressTemplateProps {
@@ -30,7 +30,7 @@ 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 = await kycService.getVerificationResult(state.session.session_id);
       const verificationResult = result[state.session.session_id].data;
 
@@ -42,7 +42,7 @@ export const VerificationProgressTemplate: React.FC<VerificationProgressTemplate
           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
@@ -54,7 +54,7 @@ export const VerificationProgressTemplate: React.FC<VerificationProgressTemplate
           const newTimeoutId = setTimeout(() => {
             getVerificationResult(nextRetryCount, maxRetries);
           }, 10000);
-          
+
           setTimeoutId(newTimeoutId);
           return; // Sortir de la fonction pour éviter de traiter le résultat
         } else {
@@ -87,25 +87,25 @@ export const VerificationProgressTemplate: React.FC<VerificationProgressTemplate
       setIsRetrying(false);
 
     } catch (error) {
-      logger.error('getVerificationResult error', error);
+      logger.error('getVerificationResult error', JSON.stringify(errorMessage(error), null, 2));
 
       // En cas d'erreur, on peut aussi retry
       if (currentRetryCount < maxRetries) {
         const nextRetryCount = currentRetryCount + 1;
         setRetryCount(nextRetryCount);
         setIsRetrying(true);
-        
-        logger.log(`Error occurred, retrying in 10s... (${nextRetryCount}/${maxRetries})`);
-        
+
+        logger.log(`getVerificationResult Error occurred, retrying in 10s... (${nextRetryCount}/${maxRetries})`);
+
         // Nettoyer le timeout précédent s'il existe
         if (timeoutId) {
           clearTimeout(timeoutId);
         }
-        
+
         const newTimeoutId = setTimeout(() => {
           getVerificationResult(nextRetryCount, maxRetries);
         }, 10000);
-        
+
         setTimeoutId(newTimeoutId);
       } else {
         setIsRetrying(false);

package/src/components/TemplateKYCExample.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { View, StyleSheet } from 'react-native';
+import { View, SafeAreaView } from 'react-native';
 import { TemplateKYCFlow } from './TemplateKYCFlowRefactored';
 import { KYCTemplate, VerificationState } from '../types/KYC.types';
 
@@ -56,7 +56,7 @@ const advancedVerificationTemplate: KYCTemplate = {
         buttonText: { en: "Confirm", fr: "Confirmer" }
       },
       config: {
-        allowed_countries: ["CM", "NG", "CI", "KE","GH"],
+        allowed_countries: ["CM", "NG", "CI", "KE", "GH"],
         default_country: "CM",
         required: true
       } as const
@@ -242,7 +242,8 @@ export const TemplateKYCExample: React.FC<{ onComplete: (data: VerificationState
   };
 
   return (
-    <View style={styles.container}>
+    <SafeAreaView style={{ flex: 1 , paddingVertical:25}}>
+    <View style={{ flex: 1 }}>
       <TemplateKYCFlow
         template={advancedVerificationTemplate}
         onComplete={handleComplete}
@@ -252,11 +253,8 @@ export const TemplateKYCExample: React.FC<{ onComplete: (data: VerificationState
         API_KEY={API_KEY}
       />
     </View>
+  </SafeAreaView>
   );
 };
 
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-  },
-});
+ 

package/src/components/TemplateKYCFlowRefactored.tsx

@@ -30,7 +30,7 @@ export const TemplateKYCFlow: React.FC<TemplateKYCFlowProps> = ({
   API_KEY,
 }) => {
   const { t } = useI18n();
-  
+
   const OnCancel = () => {
     Alert.alert(
       t('kyc.cancelConfirmation.title'),
@@ -130,7 +130,7 @@ const TemplateKYCFlowContent: React.FC<{ onCancel?: () => void }> = ({ onCancel
   };
 
   return (
-    <View style={{ flex: 1 }}>
+    <View style={{ flex: 1, position: 'relative' }}>
       {state.isProcessing && (
         <View style={styles.processingContainer}>
           <Text style={styles.processingText}>{t('common.loading')}</Text>
@@ -169,6 +169,13 @@ const TemplateKYCFlowContent: React.FC<{ onCancel?: () => void }> = ({ onCancel
         <View style={styles.content}>
           {renderCurrentComponent()}
         </View>
+
+        {state.isProcessing && (
+          <View style={styles.processingContainer}>
+            <Text style={styles.processingText}>{t('common.loading')}</Text>
+            <ActivityIndicator size="large" color="#fff" />
+          </View>
+        )}
       </SafeAreaView>
     </View>
 
@@ -300,7 +307,7 @@ const styles = StyleSheet.create({
     backgroundColor: 'rgba(0, 0, 0, 0.5)',
     justifyContent: 'center',
     alignItems: 'center',
-    zIndex: 1000,
+    zIndex: 10000000,
   },
   processingText: {
     fontSize: 16,

package/src/i18n/en/index.ts

@@ -86,7 +86,8 @@ export const en = {
       usePhotoButton: 'Use This Photo',
       processing: 'Processing image...',
       success: 'ID captured successfully',
-      error: 'Failed to capture ID. Please try again.'
+      error: 'Failed to capture ID. Please try again.',
+      captureTitle: '%{side} side of your government document',
     },
 
     // Selfie Capture

package/src/i18n/fr/index.ts

@@ -86,7 +86,8 @@ export const fr = {
       usePhotoButton: 'Utiliser Cette Photo',
       processing: 'Traitement de l\'image...',
       success: 'Document d\'identité capturé avec succès',
-      error: 'Échec de la capture du document. Veuillez réessayer.'
+      error: 'Échec de la capture du document. Veuillez réessayer.',
+      captureTitle: '%{side} de votre document d\'identité',
     },
 
     // Selfie Capture

package/src/modules/api/KYCService.ts

@@ -226,9 +226,9 @@ export class KYCService {
     const rnFile: any = { uri: fileUri, type: 'image/jpeg', name: 'id_card_front.jpg' };
     formData.append('file', rnFile);
     const docTypeShorted = GovernmentDocumentTypeShorted[docType as GovernmentDocumentType];
-    logger.log('checkTemplateType params', this.mrzServiceURL, JSON.stringify({ fileUri, docTypeShorted, docRegion, token, postfix }, null, 2));
     const url = `${this.mrzServiceURL}/get_template_version/?doc_type=${encodeURIComponent(docTypeShorted)}&doc_region=${encodeURIComponent(docRegion)}&postfix=${postfix}`;
 
+    logger.log('checkTemplateType params', this.mrzServiceURL, JSON.stringify({ fileUri, docTypeShorted, docRegion, token, postfix, url }, null, 2));
     try {
       const res = await axios.post<CheckTemplateTypeResponse>(url, formData, {
         headers: { 'Content-Type': 'multipart/form-data', 'Authorization': `Bearer ${token}`, },
@@ -436,12 +436,17 @@ export class KYCService {
   }
   // reultat de la verification
   async getVerificationResult(session_id: string): Promise<VerificationResult> {
-    const token = await authentification();
-    const url = `${this.backendServiceURL}/verification/api/kyc/result/?session_id=${session_id}`;
-    const res = await axios.get<VerificationResult>(url,
-      { headers: { 'Content-Type': 'application/json', 'Authorization': `Bearer ${token}` } });
-    logger.log('getVerificationResult res', JSON.stringify(truncateFields(res.data), null, 2));
-    return res.data;
+    try {
+      const token = await authentification();
+      const url = `${this.backendServiceURL}/verification/api/kyc/result/?session_id=${session_id}`;
+      const res = await axios.get<VerificationResult>(url,
+        { headers: { 'Content-Type': 'application/json', 'Authorization': `Bearer ${token}` } });
+      logger.log('getVerificationResult res', JSON.stringify(truncateFields(res.data), null, 2));
+      return res.data;
+    } catch (error) {
+      logger.error('Error getting verification result:', JSON.stringify(errorMessage(error), null, 2));
+      throw error;
+    }
   }
 }
 

package/src/utils/cropByObb.ts

@@ -82,9 +82,9 @@ export async function cropImageWithBBox(uri: string, bbox: any) {
   // 3️⃣ Convertir le bbox à la taille réelle scale 0.10 = 10%
   const crop = {
     originX: bbox.minX  ,
-    originY: bbox.minY - 80,
-    width: bbox.width + 100,
-    height: bbox.height + 150,
+    originY: bbox.minY ,
+    width: bbox.width ,
+    height: bbox.height,
   };
 
   // 4️⃣ Appliquer le crop