@transfergratis/react-native-sdk 0.1.26 → 0.1.29

package/src/components/KYCElements/IDCardCapture.tsx

@@ -43,7 +43,7 @@ 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 [cropImageUri, setCropImageUri] = useState<string>('');
   const [currentSide, setCurrentSide] = useState<string>('front');
   // Stocker les bbox par côté pour pouvoir restaurer les images croppées
   const [bboxBySide, setBboxBySide] = useState<Record<string, IBbox>>({});
@@ -97,6 +97,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 +132,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 +146,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: {
@@ -170,8 +173,19 @@ export const IDCardCapture: React.FC<IDCardCaptureProps> = ({
     setShowCamera(true);
     actions.showCustomStepper(false);
     setCapturedImages({ ...capturedImages, [currentSide]: { dir: '', file: '', mrz: '' } });
-    setSilentCaptureResult((prev) => ({ ...prev, path: '', success: false, isAnalyzing: false, error: '' }));
-    setCropImageUri('');
+    
+    setSilentCaptureResult((prev) => ({ 
+        ...prev, 
+        path: '', 
+        success: false, 
+        isAnalyzing: false, 
+        error: '',
+        templatePath: '', 
+        bbox: undefined,  
+        mrz: ''           
+    }));
+    
+    // setCropImageUri('');
     onValueChange({ ...value, [currentSide]: { dir: '', file: '', mrz: '' } });
   };
 
@@ -324,8 +338,13 @@ export const IDCardCapture: React.FC<IDCardCaptureProps> = ({
           }).catch((e: any) => {
             console.log("error front verification", e);
             logger.log("error front verification", truncateFields(e));
-            const isCardNotFullyInFrame = e?.message?.includes('entirement') || e?.message?.includes('fully in frame');
-            const errorMessage = isCardNotFullyInFrame ? t('kyc.idCardCapture.cardNotFullyInFrame') : (e?.message || 'Erreur de détection du MRZ');
+            const isCardNotFullyInFrame =
+              e?.message === 'CARD_NOT_FULLY_IN_FRAME' ||
+              e?.message?.includes('entirement') ||
+              e?.message?.includes('fully in frame');
+            const errorMessage = isCardNotFullyInFrame
+              ? t('kyc.idCardCapture.cardNotFullyInFrame')
+              : (e?.message || 'Erreur de détection du MRZ');
             setSilentCaptureResult((prev) => ({ ...prev, isAnalyzing: false, templatePath: templatePath, success: false, error: errorMessage }));
           });
         } catch (error: any) {
@@ -362,8 +381,13 @@ export const IDCardCapture: React.FC<IDCardCaptureProps> = ({
           }
         }).catch((e: any) => {
           logger.log("error back verification", truncateFields(e));
-          const isCardNotFullyInFrame = e?.message?.includes('entirement') || e?.message?.includes('fully in frame');
-          const errorMessage = isCardNotFullyInFrame ? t('kyc.idCardCapture.cardNotFullyInFrame') : (e?.message || 'Erreur de détection du MRZ');
+          const isCardNotFullyInFrame =
+            e?.message === 'CARD_NOT_FULLY_IN_FRAME' ||
+            e?.message?.includes('entirement') ||
+            e?.message?.includes('fully in frame');
+          const errorMessage = isCardNotFullyInFrame
+            ? t('kyc.idCardCapture.cardNotFullyInFrame')
+            : (e?.message || 'Erreur de détection du MRZ');
           setSilentCaptureResult((prev) => ({ ...prev, isAnalyzing: false, templatePath: templatePath, success: false, error: errorMessage }));
         })
       }
@@ -371,31 +395,32 @@ export const IDCardCapture: React.FC<IDCardCaptureProps> = ({
     }
   }
 
-  // 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,
@@ -415,10 +440,6 @@ export const IDCardCapture: React.FC<IDCardCaptureProps> = ({
     setShowCamera(false);
   };
 
-
-
-
-
   useEffect(() => {
     actions.showCustomStepper(!showCamera);
   }, [showCamera]);
@@ -521,7 +542,6 @@ export const IDCardCapture: React.FC<IDCardCaptureProps> = ({
 
 
   if (showCamera) {
-
     return (
       <View style={styles.cameraContainer}>
         <EnhancedCameraView
@@ -538,54 +558,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>
     );
   }
@@ -604,26 +633,25 @@ export const IDCardCapture: React.FC<IDCardCaptureProps> = ({
             </Text>
 
             <View style={{ alignItems: 'center', justifyContent: 'center', flexDirection: "column", gap: 16 }}>
-              <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: '#fff', 
                 }}
               >
-                {cropImageUri ? (
+                {/* Simplified logic: Always show the saved, pre-cropped capture! */}
+                {capturedImages[currentSide]?.dir ? (
                   <Image
-                    source={{ uri: cropImageUri }}
+                    source={{ uri: capturedImages[currentSide].dir }}
                     style={{
                       width: '100%',
                       height: 200,
@@ -631,8 +659,7 @@ export const IDCardCapture: React.FC<IDCardCaptureProps> = ({
                       resizeMode: 'cover',
                     }}
                   />
-                ) : null}
-                {!cropImageUri && silentCaptureResult.path ? (
+                ) : silentCaptureResult.path ? (
                   <Image
                     source={{ uri: silentCaptureResult.path }}
                     style={{
@@ -643,18 +670,6 @@ export const IDCardCapture: React.FC<IDCardCaptureProps> = ({
                     }}
                   />
                 ) : null}
-                {!cropImageUri && !silentCaptureResult.path && capturedImages[currentSide]?.dir ? (
-                  <Image
-                    source={{ uri: capturedImages[currentSide].dir }}
-                    style={{
-                      width: '100%',
-                      height: 200,
-                      borderRadius: 12,
-                      resizeMode: 'cover',
-                    }}
-                  />
-                ) : null}
-
               </View>
               {/* Capture button si aucune image n'a été capturée */}
               {!capturedImages[currentSide]?.dir && (
@@ -691,7 +706,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"
@@ -970,4 +985,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;