@transfergratis/react-native-sdk 0.1.28 → 0.1.30

package/src/components/KYCElements/IDCardCapture.tsx

@@ -43,9 +43,8 @@ export const IDCardCapture: React.FC<IDCardCaptureProps> = ({
   const { t, locale } = useI18n();
   const [showCamera, setShowCamera] = useState(false);
   const [capturedImages, setCapturedImages] = useState<Record<string, IIDCardPayload>>(value || {});
-  const [cropImageUri, setCropImageUri] = useState<string>('');
-  const [currentSide, setCurrentSide] = useState<string>('front');
-  // Stocker les bbox par côté pour pouvoir restaurer les images croppées
+  // const [cropImageUri, setCropImageUri] = useState<string>('');
+  const [currentSide, setCurrentSide] = useState<'front' | 'back'>('front');
   const [bboxBySide, setBboxBySide] = useState<Record<string, IBbox>>({});
   const [silentCaptureResult, setSilentCaptureResult] = useState<ISilentCaptureResult>({ success: false, isAnalyzing: false });
   const [showQRModal, setShowQRModal] = useState(false);
@@ -97,6 +96,7 @@ export const IDCardCapture: React.FC<IDCardCaptureProps> = ({
     return countrySelectionData;
   }, [countrySelectionData]);
 
+// console.log();
 
   // Synchroniser capturedImages avec value quand les données sont chargées (ex: reprise de session)
   useEffect(() => {
@@ -131,7 +131,7 @@ export const IDCardCapture: React.FC<IDCardCaptureProps> = ({
     logger.log("cropImageUri", JSON.stringify(truncateFields({ box: silentCaptureResult }), null, 2));
     if (capturedImages[currentSide]?.dir && silentCaptureResult?.bbox) {
       cropImageWithBBox(capturedImages[currentSide].dir, silentCaptureResult.bbox)?.then((uri) => {
-        setCropImageUri(uri);
+        // setCropImageUri(uri);
       });
     }
   }, [capturedImages[currentSide]?.dir, silentCaptureResult?.bbox])
@@ -145,9 +145,11 @@ export const IDCardCapture: React.FC<IDCardCaptureProps> = ({
 
     return {
       aspectRatio: 4 / 3,
-      quality: 0.8,
+      quality: 0.7, 
       flashMode: 'auto' as const,
       cameraType: 'back' as const,
+      autoFocus: 'on', 
+      whiteBalance: 'auto', 
       allowRetake: true,
       maxRetakes: 3,
       overlay: {
@@ -166,13 +168,34 @@ export const IDCardCapture: React.FC<IDCardCaptureProps> = ({
     };
   }, [selectedDocumentType, locale, component.instructions]);
 
-  const retakePicture = (currentSide: string) => {
+  const retakePicture = (sideToRetake: 'front' | 'back') => {
+    // 1. Turn the camera back on and hide the stepper
     setShowCamera(true);
     actions.showCustomStepper(false);
-    setCapturedImages({ ...capturedImages, [currentSide]: { dir: '', file: '', mrz: '' } });
-    setSilentCaptureResult((prev) => ({ ...prev, path: '', success: false, isAnalyzing: false, error: '' }));
-    setCropImageUri('');
-    onValueChange({ ...value, [currentSide]: { dir: '', file: '', mrz: '' } });
+
+    // 2. WIPE LOCAL STATE: Use functional update to prevent stale closures
+    setCapturedImages((prev) => {
+      const newState = { ...prev };
+      delete newState[sideToRetake]; 
+      return newState;
+    });
+
+    setSilentCaptureResult({
+      path: '',
+      success: false,
+      isAnalyzing: false,
+      error: '',
+      templatePath: '',
+      mrz: '',
+      bbox: undefined,
+    });
+
+    
+    if (value) {
+      const newValue = { ...value };
+      delete newValue[sideToRetake]; 
+      onValueChange(newValue);
+    }
   };
 
 
@@ -301,26 +324,33 @@ export const IDCardCapture: React.FC<IDCardCaptureProps> = ({
           };
           console.log("frontVerification params", verificationParams);
           console.log("About to call frontVerification function");
+
           const promise = frontVerification(verificationParams, env);
           console.log("frontVerification promise created", promise);
-          promise.then((mrz) => {
-            logger.log("front verification result", truncateFields(mrz));
-            const bbox = (mrz as any)?.bbox || templateBbox;
+          
+          promise.then((res: any) => {
+            logger.log("front verification result", truncateFields(res));
+            const bbox = res?.bbox || templateBbox;
+            
             setSilentCaptureResult((prev) => ({
               ...prev,
               path: result.path,
               templatePath: templatePath,
-              bbox: bbox, success: true,
-              mrz: JSON.stringify(mrz), isAnalyzing: false,
+              bbox: bbox, 
+              success: true,
+              mrz: res?.mrz ? JSON.stringify(res.mrz) : "", 
+              isAnalyzing: false,
               country: countryData?.code,
               documentType: selectedDocumentType.type,
-            }),
-            );
+            }));
+            
             // Stocker le bbox pour ce côté
             if (bbox && typeof bbox === 'object') {
               setBboxBySide((prev) => ({ ...prev, [currentSide]: bbox }));
             }
 
+          }).catch((e: any) => {
+
           }).catch((e: any) => {
             console.log("error front verification", e);
             logger.log("error front verification", truncateFields(e));
@@ -340,6 +370,7 @@ export const IDCardCapture: React.FC<IDCardCaptureProps> = ({
       } else {
         const backRegionMappings = getCurrentSideVerification(currentSide);
         logger.log("Calling backVerification", { templatePath, selectedDocumentType: selectedDocumentType.type, backRegionMappings });
+        
         backVerification({
           path: result.path,
           regionMapping: {
@@ -351,16 +382,21 @@ export const IDCardCapture: React.FC<IDCardCaptureProps> = ({
           currentSide: currentSide,
           templatePath: templatePath,
           mrzType: getCorrespondingMrzType(templatePath, backRegionMappings.regionMapping, backRegionMappings.key || '') || '',
-        }, env).then((mrz) => {
-          logger.log("back verification result", truncateFields(mrz));
-          const bbox = (mrz as any)?.bbox || templateBbox;
+        }, env).then((res: any) => { 
+          logger.log("back verification result", truncateFields(res));
+          const bbox = res?.bbox || templateBbox;
+          
           setSilentCaptureResult((prev) => ({
-            ...prev, path: result.path, bbox: bbox,
-            success: true, mrz: JSON.stringify(mrz), isAnalyzing: false,
+            ...prev, 
+            path: result.path, 
+            bbox: bbox,
+            success: true, 
+            mrz: res?.mrz ? JSON.stringify(res.mrz) : "", 
+            isAnalyzing: false,
             country: countryData?.code,
             documentType: selectedDocumentType.type,
-
           }));
+          
           // Stocker le bbox pour ce côté
           if (bbox && typeof bbox === 'object') {
             setBboxBySide((prev) => ({ ...prev, [currentSide]: bbox }));
@@ -375,37 +411,38 @@ export const IDCardCapture: React.FC<IDCardCaptureProps> = ({
             ? t('kyc.idCardCapture.cardNotFullyInFrame')
             : (e?.message || 'Erreur de détection du MRZ');
           setSilentCaptureResult((prev) => ({ ...prev, isAnalyzing: false, templatePath: templatePath, success: false, error: errorMessage }));
-        })
+        });
       }
 
     }
   }
 
-  // Handle capture
   const handleCapture = async (result: { success: boolean; path?: string; error?: string }) => {
-    console.log("handleCapture", JSON.stringify(truncateFields({ result, silentCaptureResult }), null, 2));
-
     if (silentCaptureResult.path) {
-      // Créer une image rognée avec tolérance de 10% pour l'envoi
       let imagePathForUpload = silentCaptureResult.path;
       if (silentCaptureResult.bbox) {
         try {
-          logger.log("Début du rognage avec tolérance, URI original:", silentCaptureResult.path);
           imagePathForUpload = await cropImageWithBBoxWithTolerance(silentCaptureResult.path, silentCaptureResult.bbox, 0.05);
-          logger.log("Image rognée avec tolérance créée pour l'envoi, URI final:", imagePathForUpload);
         } catch (error) {
-          logger.log("Erreur lors du rognage avec tolérance, utilisation de l'image originale:", truncateFields(error));
-          // En cas d'erreur, on utilise l'image originale
           imagePathForUpload = silentCaptureResult.path;
         }
       }
 
       const base64 = await pathToBase64(imagePathForUpload);
 
-      logger.log("silentCaptureResult captured", JSON.stringify(truncateFields(silentCaptureResult), null, 2));
-      // Utiliser l'image originale pour l'affichage (dir) mais l'image rognée avec tolérance pour l'envoi (file)
-      const newImages = { ...capturedImages, [currentSide]: { dir: silentCaptureResult.path, file: base64, mrz: silentCaptureResult.mrz || "", templatePath: silentCaptureResult.templatePath } };
+      // ✅ FIX: Use 'imagePathForUpload' (the cropped image) for the local display directory!
+      const newImages = { 
+          ...capturedImages, 
+          [currentSide]: { 
+              dir: imagePathForUpload, // <--- CHANGED THIS LINE
+              file: base64, 
+              mrz: silentCaptureResult.mrz || "", 
+              templatePath: silentCaptureResult.templatePath 
+          } 
+      };
+      
       setCapturedImages(newImages);
+      
       if (silentCaptureResult.country && silentCaptureResult.documentType) {
         onValueChange({
           ...newImages,
@@ -425,10 +462,6 @@ export const IDCardCapture: React.FC<IDCardCaptureProps> = ({
     setShowCamera(false);
   };
 
-
-
-
-
   useEffect(() => {
     actions.showCustomStepper(!showCamera);
   }, [showCamera]);
@@ -531,7 +564,6 @@ export const IDCardCapture: React.FC<IDCardCaptureProps> = ({
 
 
   if (showCamera) {
-
     return (
       <View style={styles.cameraContainer}>
         <EnhancedCameraView
@@ -548,54 +580,63 @@ export const IDCardCapture: React.FC<IDCardCaptureProps> = ({
           silentCaptureResult={silentCaptureResult}
           captureStabilizationDelayMs={3000}
           enableFlash={cameraConfig.flashMode === 'auto' || cameraConfig.flashMode === 'on'}
-          overlayComponent={<IdCardOverlay
-            xMin={cameraConfig.overlay.bbox.xMin}
-            yMin={cameraConfig.overlay.bbox.yMin}
-            xMax={cameraConfig.overlay.bbox.xMax}
-            yMax={cameraConfig.overlay.bbox.yMax}
-            instructions={cameraConfig.overlay.guideText}
-            cornerOpacity={cameraConfig.overlay.bbox.cornerRadius || 0 as number}
-            isSuccess={silentCaptureResult.success}
-            language={state.currentLanguage}
-            stepperProps={{
-              back: () => {
-                if (currentSide === 'back') {
-                  setCurrentSide('front');
-                  setShowCamera(false);
-                  // Si une image front existe, on la restaure pour l'afficher
-                  if (capturedImages['front']?.dir) {
-                    // Restaurer l'état de capture du front pour afficher l'image
-                    const frontImage = capturedImages['front'];
-                    const frontBbox = bboxBySide['front'];
-                    setSilentCaptureResult((prev) => ({
-                      path: frontImage.dir,
-                      success: true,
-                      isAnalyzing: false,
-                      error: '',
-                      mrz: frontImage.mrz || '',
-                      templatePath: frontImage.templatePath || '',
-                      country: silentCaptureResult.country,
-                      documentType: silentCaptureResult.documentType,
-                      bbox: frontBbox // Restaurer le bbox pour recalculer le cropImageUri
-                    }));
-                    // Le useEffect va automatiquement recalculer le cropImageUri si bbox existe
+          overlayComponent={
+            <IdCardOverlay
+              xMin={cameraConfig.overlay.bbox.xMin}
+              yMin={cameraConfig.overlay.bbox.yMin}
+              xMax={cameraConfig.overlay.bbox.xMax}
+              yMax={cameraConfig.overlay.bbox.yMax}
+              instructions={cameraConfig.overlay.guideText}
+              cornerOpacity={cameraConfig.overlay.bbox.cornerRadius || 0 as number}
+              isSuccess={silentCaptureResult.success}
+              language={state.currentLanguage}
+              stepperProps={{
+                back: () => {
+                  if (currentSide === 'back') {
+                    setCurrentSide('front');
+                    setShowCamera(false);
+                    // Si une image front existe, on la restaure pour l'afficher
+                    if (capturedImages['front']?.dir) {
+                      // Restaurer l'état de capture du front pour afficher l'image
+                      const frontImage = capturedImages['front'];
+                      const frontBbox = bboxBySide['front'];
+                      setSilentCaptureResult((prev) => ({
+                        path: frontImage.dir,
+                        success: true,
+                        isAnalyzing: false,
+                        error: '',
+                        mrz: frontImage.mrz || '',
+                        templatePath: frontImage.templatePath || '',
+                        country: silentCaptureResult.country,
+                        documentType: silentCaptureResult.documentType,
+                        bbox: frontBbox // Restaurer le bbox pour recalculer le cropImageUri
+                      }));
+                    } else {
+                      // Pas d'image front, on réinitialise
+                      setSilentCaptureResult((prev) => ({ path: '', success: false, isAnalyzing: false, error: '', templatePath: '' }));
+                    }
                   } else {
-                    // Pas d'image front, on réinitialise
-                    setSilentCaptureResult((prev) => ({ path: '', success: false, isAnalyzing: false, error: '', templatePath: '' }));
+                    // Retour au composant précédent (country_selection)
+                    actions.previousComponent();
                   }
-                } else {
-                  // Retour au composant précédent (country_selection)
-                  actions.previousComponent();
-                }
-              },
-              selectedDocumentType: selectedDocumentType ? (locale === 'en' ? getDocumentTypeInfo(selectedDocumentType.type).name.en : getDocumentTypeInfo(selectedDocumentType.type).name.fr) : '',
-              step: state.currentComponentIndex + 1,
-              totalSteps: state.template.components.length,
-              side: currentSide,
-            }}
-          />
+                },
+                selectedDocumentType: selectedDocumentType ? (locale === 'en' ? getDocumentTypeInfo(selectedDocumentType.type).name.en : getDocumentTypeInfo(selectedDocumentType.type).name.fr) : '',
+                step: state.currentComponentIndex + 1,
+                totalSteps: state.template.components.length,
+                side: currentSide,
+              }}
+            />
           }
         />
+        
+        {silentCaptureResult.error ? (
+          <View style={styles.floatingErrorBanner}>
+            <Text style={styles.floatingErrorText}>
+              {silentCaptureResult.error}
+            </Text>
+          </View>
+        ) : null}
+
       </View>
     );
   }
@@ -614,57 +655,62 @@ export const IDCardCapture: React.FC<IDCardCaptureProps> = ({
             </Text>
 
             <View style={{ alignItems: 'center', justifyContent: 'center', flexDirection: "column", gap: 16 }}>
-              <View
+              {silentCaptureResult?.error === 'TOO_FAR_AWAY' && (
+              <View style={{ 
+                backgroundColor: '#FF9500', 
+                padding: 12, 
+                borderRadius: 8, 
+                width: '100%',
+                shadowColor: '#000',
+                shadowOffset: { width: 0, height: 2 },
+                shadowOpacity: 0.2,
+                shadowRadius: 4,
+                elevation: 4
+              }}>
+                <Text style={{ color: 'white', fontWeight: 'bold', textAlign: 'center', fontSize: 16 }}>
+                  {state.currentLanguage === "en" 
+                    ? "Move the document closer to the camera." 
+                    : "Veuillez rapprocher le document de la caméra."}
+                </Text>
+              </View>
+            )}
+
+            <View
                 style={{
                   width: '100%',
                   height: 200,
                   borderRadius: 12,
                   padding: 1,
                   overflow: 'hidden',
-                  // Shadow for iOS
                   shadowColor: '#000',
                   shadowOffset: { width: 0, height: 4 },
                   shadowOpacity: 0.18,
                   shadowRadius: 8,
-                  // Shadow for Android
                   elevation: 8,
-                  backgroundColor: '#fff', // Needed for shadow to show on iOS
+                  backgroundColor: '#000', 
                 }}
               >
-                {cropImageUri ? (
+                {capturedImages[currentSide]?.dir ? (
                   <Image
-                    source={{ uri: cropImageUri }}
+                    source={{ uri: capturedImages[currentSide].dir }}
                     style={{
                       width: '100%',
-                      height: 200,
+                      height: '100%', 
                       borderRadius: 12,
-                      resizeMode: 'cover',
+                      resizeMode: 'contain', 
                     }}
                   />
-                ) : null}
-                {!cropImageUri && silentCaptureResult.path ? (
+                ) : silentCaptureResult.path ? (
                   <Image
                     source={{ uri: silentCaptureResult.path }}
                     style={{
                       width: '100%',
-                      height: 200,
-                      borderRadius: 12,
-                      resizeMode: 'cover',
-                    }}
-                  />
-                ) : null}
-                {!cropImageUri && !silentCaptureResult.path && capturedImages[currentSide]?.dir ? (
-                  <Image
-                    source={{ uri: capturedImages[currentSide].dir }}
-                    style={{
-                      width: '100%',
-                      height: 200,
+                      height: '100%',
                       borderRadius: 12,
-                      resizeMode: 'cover',
+                      resizeMode: 'contain', 
                     }}
                   />
                 ) : null}
-
               </View>
               {/* Capture button si aucune image n'a été capturée */}
               {!capturedImages[currentSide]?.dir && (
@@ -701,7 +747,7 @@ export const IDCardCapture: React.FC<IDCardCaptureProps> = ({
                       setShowCamera(true);
                       setCurrentSide('back');
                       setSilentCaptureResult((prev) => ({ path: '', success: false, isAnalyzing: false, error: '', mrz: '', templatePath: '' }));
-                      setCropImageUri('');
+                      // setCropImageUri('');
                     }
                   }}
                     variant="primary"
@@ -980,4 +1026,28 @@ const styles = StyleSheet.create({
     color: '#666',
     fontWeight: '600',
   },
+  floatingErrorBanner: {
+    position: 'absolute',
+    top: 60, // Pushes it down slightly from the very top of the screen
+    left: '10%',
+    right: '10%',
+    backgroundColor: 'rgba(220, 38, 38, 0.95)', // Bright red
+    paddingVertical: 12,
+    paddingHorizontal: 16,
+    borderRadius: 8,
+    alignItems: 'center',
+    justifyContent: 'center',
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 4 },
+    shadowOpacity: 0.3,
+    shadowRadius: 5,
+    elevation: 8,
+    zIndex: 100,
+  },
+  floatingErrorText: {
+    color: 'white',
+    fontSize: 14,
+    fontWeight: '700',
+    textAlign: 'center',
+  },
 }); 

package/src/components/KYCElements/SelfieCaptureTemplate.tsx

@@ -76,9 +76,9 @@ export const SelfieCaptureTemplate: React.FC<SelfieCaptureTemplateProps> = ({
   const getOrientationLabel = (orientation: OrientationType): string => {
     switch (orientation) {
       case 'center':
-        return state.currentLanguage === "en" ? "Front Profil Selfie" : "Selfie de face";
+        return state.currentLanguage === "en" ? "Front Profile Selfie" : "Selfie de face";
       case 'left':
-        return state.currentLanguage === "en" ? "Left Profil Selfie" : "Selfie profil gauche";
+        return state.currentLanguage === "en" ? "Left Profile Selfie" : "Selfie profil gauche";
       case 'right':
         return state.currentLanguage === "en" ? "Right Profile Selfie" : "Selfie profil droit";
       default:

package/src/hooks/useTemplateKYCFlow.tsx

@@ -822,7 +822,7 @@ export const useTemplateKYCFlow = (
           isProcessing: false,
           errors: {
             ...prev.errors,
-            [currentComp.id]: state.currentLanguage === "en" ? "please complete this step before move on" : " 'Veuillez compléter cette étape avant de continuer'"
+            [currentComp.id]: state.currentLanguage === "en" ? "please complete this step before moving on" : " 'Veuillez compléter cette étape avant de continuer'"
           }
         }));
         return;