@transfergratis/react-native-sdk 0.1.28 → 0.1.30

package/build/components/KYCElements/IDCardCapture.js

@@ -19,9 +19,8 @@ export const IDCardCapture = ({ component, value = {}, onValueChange, error, lan
     const { t, locale } = useI18n();
     const [showCamera, setShowCamera] = useState(false);
     const [capturedImages, setCapturedImages] = useState(value || {});
-    const [cropImageUri, setCropImageUri] = useState('');
+    // const [cropImageUri, setCropImageUri] = useState<string>('');
     const [currentSide, setCurrentSide] = useState('front');
-    // Stocker les bbox par côté pour pouvoir restaurer les images croppées
     const [bboxBySide, setBboxBySide] = useState({});
     const [silentCaptureResult, setSilentCaptureResult] = useState({ success: false, isAnalyzing: false });
     const [showQRModal, setShowQRModal] = useState(false);
@@ -63,6 +62,7 @@ export const IDCardCapture = ({ component, value = {}, onValueChange, error, lan
     const countryData = useMemo(() => {
         return countrySelectionData;
     }, [countrySelectionData]);
+    // console.log();
     // Synchroniser capturedImages avec value quand les données sont chargées (ex: reprise de session)
     useEffect(() => {
         if (value && Object.keys(value).length > 0) {
@@ -94,7 +94,7 @@ export const IDCardCapture = ({ component, value = {}, onValueChange, error, lan
         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]);
@@ -104,9 +104,11 @@ export const IDCardCapture = ({ component, value = {}, onValueChange, error, lan
             : getLocalizedText(component.instructions);
         return {
             aspectRatio: 4 / 3,
-            quality: 0.8,
+            quality: 0.7,
             flashMode: 'auto',
             cameraType: 'back',
+            autoFocus: 'on',
+            whiteBalance: 'auto',
             allowRetake: true,
             maxRetakes: 3,
             overlay: {
@@ -124,13 +126,30 @@ export const IDCardCapture = ({ component, value = {}, onValueChange, error, lan
             }
         };
     }, [selectedDocumentType, locale, component.instructions]);
-    const retakePicture = (currentSide) => {
+    const retakePicture = (sideToRetake) => {
+        // 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);
+        }
     };
     const getCurrentSideVerification = (currentSide) => {
         if (!selectedDocumentType || !countryData?.regionMapping) {
@@ -247,15 +266,17 @@ export const IDCardCapture = ({ component, value = {}, onValueChange, error, lan
                     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?.bbox || templateBbox;
+                    promise.then((res) => {
+                        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,
                         }));
@@ -263,6 +284,7 @@ export const IDCardCapture = ({ component, value = {}, onValueChange, error, lan
                         if (bbox && typeof bbox === 'object') {
                             setBboxBySide((prev) => ({ ...prev, [currentSide]: bbox }));
                         }
+                    }).catch((e) => {
                     }).catch((e) => {
                         console.log("error front verification", e);
                         logger.log("error front verification", truncateFields(e));
@@ -294,12 +316,16 @@ export const IDCardCapture = ({ component, value = {}, onValueChange, error, lan
                     currentSide: currentSide,
                     templatePath: templatePath,
                     mrzType: getCorrespondingMrzType(templatePath, backRegionMappings.regionMapping, backRegionMappings.key || '') || '',
-                }, env).then((mrz) => {
-                    logger.log("back verification result", truncateFields(mrz));
-                    const bbox = mrz?.bbox || templateBbox;
+                }, env).then((res) => {
+                    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,
                     }));
@@ -320,28 +346,28 @@ export const IDCardCapture = ({ component, value = {}, onValueChange, error, lan
             }
         }
     };
-    // Handle capture
     const handleCapture = async (result) => {
-        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({
@@ -468,7 +494,6 @@ export const IDCardCapture = ({ component, value = {}, onValueChange, error, lan
                                     documentType: silentCaptureResult.documentType,
                                     bbox: frontBbox // Restaurer le bbox pour recalculer le cropImageUri
                                 }));
-                                // Le useEffect va automatiquement recalculer le cropImageUri si bbox existe
                             }
                             else {
                                 // Pas d'image front, on réinitialise
@@ -485,6 +510,13 @@ export const IDCardCapture = ({ component, value = {}, onValueChange, error, lan
                     totalSteps: state.template.components.length,
                     side: currentSide,
                 }}/>}/>
+        
+        {silentCaptureResult.error ? (<View style={styles.floatingErrorBanner}>
+            <Text style={styles.floatingErrorText}>
+              {silentCaptureResult.error}
+            </Text>
+          </View>) : null}
+
       </View>);
     }
     return (<View style={styles.root}>
@@ -499,40 +531,48 @@ export const IDCardCapture = ({ component, value = {}, onValueChange, error, lan
             </Text>
 
             <View style={{ alignItems: 'center', justifyContent: 'center', flexDirection: "column", gap: 16 }}>
-              <View style={{
+              {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 ? (<Image source={{ uri: cropImageUri }} style={{
+                {capturedImages[currentSide]?.dir ? (<Image source={{ uri: capturedImages[currentSide].dir }} style={{
                 width: '100%',
-                height: 200,
+                height: '100%',
                 borderRadius: 12,
-                resizeMode: 'cover',
-            }}/>) : null}
-                {!cropImageUri && silentCaptureResult.path ? (<Image source={{ uri: silentCaptureResult.path }} style={{
+                resizeMode: 'contain',
+            }}/>) : silentCaptureResult.path ? (<Image source={{ uri: silentCaptureResult.path }} style={{
                 width: '100%',
-                height: 200,
+                height: '100%',
                 borderRadius: 12,
-                resizeMode: 'cover',
+                resizeMode: 'contain',
             }}/>) : 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 && (<Button title={state.currentLanguage === "en" ? "Take Photo" : "Prendre une photo"} onPress={() => {
@@ -557,7 +597,7 @@ export const IDCardCapture = ({ component, value = {}, onValueChange, error, lan
                     setShowCamera(true);
                     setCurrentSide('back');
                     setSilentCaptureResult((prev) => ({ path: '', success: false, isAnalyzing: false, error: '', mrz: '', templatePath: '' }));
-                    setCropImageUri('');
+                    // setCropImageUri('');
                 }
             }} variant="primary" size="large" fullWidth/>
                 </>)}
@@ -809,5 +849,29 @@ 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',
+    },
 });
 //# sourceMappingURL=IDCardCapture.js.map