react-native-biometric-verifier 0.0.12 → 0.0.13

package/src/index.js

@@ -11,6 +11,9 @@ import {
   Text,
   Modal,
   InteractionManager,
+  StyleSheet,
+  Platform,
+  Animated,
 } from "react-native";
 import Icon from "react-native-vector-icons/MaterialIcons";
 import { useCountdown } from "./hooks/useCountdown";
@@ -23,67 +26,128 @@ import {
   COLORS,
   COUNTDOWN_DURATION,
   MAX_DISTANCE_METERS,
+  LOADING_TYPES,
 } from "./utils/constants";
 import Loader from "./components/Loader";
 import { CountdownTimer } from "./components/CountdownTimer";
-import { EmployeeCard } from "./components/EmployeeCard";
+import { CCard } from "./components/CCard";
 import { Notification } from "./components/Notification";
-import { styles } from "./components/styles";
 import { useNavigation } from "@react-navigation/native";
 import networkServiceCall from "./utils/NetworkServiceCall";
 import { getLoaderGif } from "./utils/getLoaderGif";
 import { useSafeCallback } from "./hooks/useSafeCallback";
+import CaptureImageWithoutEdit from "./components/CaptureImageWithoutEdit";
+import StepIndicator from "./components/StepIndicator";
+import StepIcon from "./components/StepIcon";
 
 const BiometricVerificationModal = React.memo(
-  ({ data, qrscan = false, callback, apiurl }) => {
+  ({ data, qrscan = false, callback, apiurl, onclose }) => {
     const navigation = useNavigation();
     const { countdown, startCountdown, resetCountdown } = useCountdown();
     const { requestLocationPermission, getCurrentLocation } = useGeolocation();
     const { convertImageToBase64 } = useImageProcessing();
-    const { notification, fadeAnim, slideAnim, notifyMessage } =
+    const { notification, fadeAnim, slideAnim, notifyMessage, clearNotification } =
       useNotifyMessage();
+
     const [modalVisible, setModalVisible] = useState(false);
+    const [cameraType, setCameraType] = useState("front");
+
     const [state, setState] = useState({
       isLoading: false,
+      loadingType: LOADING_TYPES.NONE,
       currentStep: "Start",
       employeeData: null,
       animationState: ANIMATION_STATES.FACE_SCAN,
     });
-    
+
     const dataRef = useRef(data);
     const mountedRef = useRef(true);
     const responseRef = useRef(null);
     const processedRef = useRef(false);
     const safeCallback = useSafeCallback(callback, notifyMessage);
     const resetTimeoutRef = useRef(null);
+    
+    // Animation values for icons
+    const iconScaleAnim = useRef(new Animated.Value(1)).current;
+    const iconOpacityAnim = useRef(new Animated.Value(0)).current;
 
-    /** Cleanup on unmount */
+    // Cleanup on unmount
     useEffect(() => {
+      console.log("🔧 BiometricVerificationModal mounted");
+
       return () => {
+        console.log("🧹 BiometricVerificationModal unmounting - cleaning up");
         mountedRef.current = false;
         if (resetTimeoutRef.current) {
           clearTimeout(resetTimeoutRef.current);
+          console.log("⏹️ Cleared reset timeout");
         }
+        clearNotification();
       };
     }, []);
 
     useEffect(() => {
       dataRef.current = data;
+      console.log(
+        "📋 Updated dataRef with new data:",
+        data ? "Available" : "Empty"
+      );
     }, [data]);
 
+    const animateIcon = useCallback(() => {
+      // Reset animation
+      iconScaleAnim.setValue(1);
+      iconOpacityAnim.setValue(0);
+      
+      // Start animation sequence
+      Animated.sequence([
+        Animated.parallel([
+          Animated.timing(iconOpacityAnim, {
+            toValue: 1,
+            duration: 300,
+            useNativeDriver: true,
+          }),
+          Animated.spring(iconScaleAnim, {
+            toValue: 1.2,
+            friction: 3,
+            useNativeDriver: true,
+          }),
+        ]),
+        Animated.spring(iconScaleAnim, {
+          toValue: 1,
+          friction: 5,
+          useNativeDriver: true,
+        }),
+      ]).start();
+    }, [iconScaleAnim, iconOpacityAnim]);
+
     const updateState = useCallback((newState) => {
       if (mountedRef.current) {
         setState((prev) => {
           const merged = { ...prev, ...newState };
-          return prev !== merged ? merged : prev;
+          if (JSON.stringify(prev) !== JSON.stringify(merged)) {
+            console.log("🔄 State updated:", merged);
+            
+            // Animate icon when step changes
+            if (newState.currentStep && newState.currentStep !== prev.currentStep) {
+              animateIcon();
+            }
+            
+            return merged;
+          }
+          return prev;
         });
+      } else {
+        console.log("🚫 State update skipped - component unmounted");
       }
-    }, []);
+    }, [animateIcon]);
 
     const resetState = useCallback(() => {
-      console.log("🔄 Resetting biometric modal...");
+      console.log("🔄 Resetting biometric modal state");
+      onclose(false);
       setState({
         isLoading: false,
+        loadingType: LOADING_TYPES.NONE,
         currentStep: "Start",
         employeeData: null,
         animationState: ANIMATION_STATES.FACE_SCAN,
@@ -91,112 +155,152 @@ const BiometricVerificationModal = React.memo(
       setModalVisible(false);
       processedRef.current = false;
       resetCountdown();
-      
+      clearNotification();
+
       if (resetTimeoutRef.current) {
         clearTimeout(resetTimeoutRef.current);
         resetTimeoutRef.current = null;
+        console.log("⏹️ Cleared reset timeout during reset");
       }
-    }, [resetCountdown]);
+    }, [resetCountdown, clearNotification]);
 
     const handleProcessError = useCallback(
       (message, errorObj = null) => {
-        if (errorObj) console.error(message, errorObj);
+        console.error("❌ Process Error:", message, errorObj || "");
+        if (errorObj) console.error("Error details:", errorObj);
+
         notifyMessage(message, "error");
         updateState({
           animationState: ANIMATION_STATES.ERROR,
           isLoading: false,
+          loadingType: LOADING_TYPES.NONE,
         });
-        
+
         if (resetTimeoutRef.current) {
           clearTimeout(resetTimeoutRef.current);
         }
-        resetTimeoutRef.current = setTimeout(resetState, 1200);
+        resetTimeoutRef.current = setTimeout(() => {
+          console.log("⏰ Error timeout completed - resetting state");
+          resetState();
+        }, 1200);
       },
       [notifyMessage, resetState, updateState]
     );
 
     const handleCountdownFinish = useCallback(() => {
+      console.log("⏰ Countdown finished");
       handleProcessError("Time is up! Please try again.");
-      if (navigation.canGoBack()) navigation.goBack();
+      if (navigation.canGoBack()) {
+        console.log("↩️ Navigating back due to timeout");
+        navigation.goBack();
+      }
     }, [handleProcessError, navigation]);
 
     const validateApiUrl = useCallback(() => {
       if (!apiurl || typeof apiurl !== "string") {
+        console.error("❌ Invalid API URL:", apiurl);
         handleProcessError("Invalid API URL configuration.");
         return false;
       }
+      console.log("✅ API URL validated:", apiurl);
       return true;
     }, [apiurl, handleProcessError]);
 
     const uploadFaceScan = useCallback(
       async (selfie) => {
+        console.log("📸 Uploading face scan");
+
         if (!validateApiUrl()) return;
         const currentData = dataRef.current;
+
         if (!currentData) {
+          console.error("❌ No employee data available");
           handleProcessError("Employee data not found.");
           return;
         }
-        
+
         updateState({
           isLoading: true,
+          loadingType: LOADING_TYPES.FACE_RECOGNITION,
           animationState: ANIMATION_STATES.PROCESSING,
         });
-        
+
         InteractionManager.runAfterInteractions(async () => {
           let base64;
           try {
+            console.log("🖼️ Converting image to base64");
+            updateState({
+              loadingType: LOADING_TYPES.IMAGE_PROCESSING,
+            });
+
             base64 = await convertImageToBase64(selfie?.uri);
+            console.log("✅ Image converted successfully");
           } catch (err) {
+            console.error("❌ Image conversion failed:", err);
             handleProcessError("Image conversion failed.", err);
             return;
           }
-          
+
           if (!base64) {
+            console.error("❌ Empty base64 data");
             handleProcessError("Failed to process image.");
             return;
           }
-          
+
           try {
             const body = { image: base64 };
             const header = { faceid: currentData };
             const buttonapi = `${apiurl}python/recognize`;
-            console.log("buttonapi", buttonapi);
-            
+            console.log("🌐 Calling face recognition API:", buttonapi);
+
+            updateState({
+              loadingType: LOADING_TYPES.NETWORK_REQUEST,
+            });
+
             const response = await networkServiceCall(
               "POST",
               buttonapi,
               header,
               body
             );
-            
+
+            console.log("📨 API Response:", response);
+
             if (response?.httpstatus === 200) {
+              console.log("✅ Face recognition successful");
               responseRef.current = response;
               updateState({
                 employeeData: response.data?.data || null,
                 animationState: ANIMATION_STATES.SUCCESS,
                 isLoading: false,
+                loadingType: LOADING_TYPES.NONE,
               });
-              
+
               notifyMessage("Identity verified successfully!", "success");
-              
+
               if (qrscan) {
+                console.log("🔜 Proceeding to QR code scan");
                 setTimeout(() => startQRCodeScan(), 1200);
               } else {
+                console.log("✅ Verification complete - calling callback");
                 safeCallback(responseRef.current);
                 if (resetTimeoutRef.current) {
                   clearTimeout(resetTimeoutRef.current);
                 }
                 resetTimeoutRef.current = setTimeout(() => {
+                  console.log("⏰ Success timeout completed - resetting");
                   resetState();
                 }, 1200);
               }
             } else {
+              console.warn("⚠️ Face recognition failed:", response?.data?.error);
               handleProcessError(
                 response?.data?.error?.message ||
                   "Face not recognized. Please try again."
               );
             }
           } catch (error) {
+            console.error("❌ Network request failed:", error);
             handleProcessError(
               "Connection error. Please check your network.",
               error
@@ -212,99 +316,126 @@ const BiometricVerificationModal = React.memo(
         updateState,
         validateApiUrl,
         safeCallback,
+        handleProcessError
       ]
     );
 
-    const handleStartFaceScan = useCallback(() => {
-      updateState({
-        currentStep: "Identity Verification",
-        animationState: ANIMATION_STATES.FACE_SCAN,
-      });
-      
-      navigation.navigate("CCaptureImageWithoutEdit", {
-        facedetection: true,
-        cameratype: "front",
-        onSelect: uploadFaceScan,
-      });
-    }, [navigation, updateState, uploadFaceScan]);
-
-    const startQRCodeScan = useCallback(() => {
-      updateState({
-        currentStep: "Location Verification",
-        animationState: ANIMATION_STATES.QR_SCAN,
-      });
-      
-      navigation.navigate("CCaptureImageWithoutEdit", {
-        hidebuttons: true,
-        cameratype: "back",
-        cameramoduletype: 2,
-        onSelect: handleQRScanned,
-      });
-    }, [navigation, updateState, handleQRScanned]);
-
     const handleQRScanned = useCallback(
       async (qrCodeData) => {
+        console.log("🔍 Processing scanned QR code");
+
         if (!validateApiUrl()) return;
-        
+
         updateState({
           animationState: ANIMATION_STATES.PROCESSING,
           isLoading: true,
+          loadingType: LOADING_TYPES.LOCATION_VERIFICATION,
         });
-        
+
         try {
+          console.log("📍 Requesting location permission");
+          updateState({
+            loadingType: LOADING_TYPES.LOCATION_PERMISSION,
+          });
+
           const hasPermission = await requestLocationPermission();
+
           if (!hasPermission) {
+            console.error("❌ Location permission denied");
             handleProcessError("Location permission not granted.");
             return;
           }
-          
+
+          console.log("✅ Location permission granted");
+
           const qrString =
             typeof qrCodeData === "object" ? qrCodeData?.data : qrCodeData;
-          
+
           if (!qrString || typeof qrString !== "string") {
+            console.error("❌ Invalid QR code data:", qrCodeData);
             handleProcessError("Invalid QR code. Please try again.");
             return;
           }
-          
+
+          console.log("📋 QR code content:", qrString);
+
+          updateState({
+            loadingType: LOADING_TYPES.GETTING_LOCATION,
+          });
+
           const location = await getCurrentLocation();
+          console.log("📍 Device location:", location);
+
           const [latStr, lngStr] = qrString.split(",");
           const lat = parseFloat(latStr);
           const lng = parseFloat(lngStr);
           const validCoords = !isNaN(lat) && !isNaN(lng);
           const validDev =
             !isNaN(location?.latitude) && !isNaN(location?.longitude);
-          
+
+          console.log(
+            "📊 Coordinates validation - QR:",
+            validCoords,
+            "Device:",
+            validDev
+          );
+
           if (validCoords && validDev) {
+            updateState({
+              loadingType: LOADING_TYPES.CALCULATING_DISTANCE,
+            });
+
             const distance = getDistanceInMeters(
               lat,
               lng,
               location.latitude,
               location.longitude
             );
-            
+
+            console.log(
+              "📏 Distance calculated:",
+              distance.toFixed(0),
+              "meters"
+            );
+
             if (distance <= MAX_DISTANCE_METERS) {
+              console.log("✅ Location verified successfully");
               safeCallback(responseRef.current);
               notifyMessage("Location verified successfully!", "success");
               updateState({
                 animationState: ANIMATION_STATES.SUCCESS,
                 isLoading: false,
+                loadingType: LOADING_TYPES.NONE,
               });
-              
+
               if (resetTimeoutRef.current) {
                 clearTimeout(resetTimeoutRef.current);
               }
               resetTimeoutRef.current = setTimeout(() => {
+                console.log("⏰ Location success timeout - resetting");
                 resetState();
               }, 1200);
             } else {
+              console.warn(
+                "⚠️ Location mismatch:",
+                distance.toFixed(0),
+                "m away"
+              );
               handleProcessError(
                 `Location mismatch (${distance.toFixed(0)}m away).`
               );
             }
           } else {
+            console.error("❌ Invalid coordinates:", {
+              qrLat: lat,
+              qrLng: lng,
+              devLat: location.latitude,
+              devLng: location.longitude,
+            });
             handleProcessError("Invalid coordinates in QR code.");
           }
         } catch (error) {
+          console.error("❌ Location verification failed:", error);
           handleProcessError(
             "Unable to verify location. Please try again.",
             error
@@ -319,17 +450,62 @@ const BiometricVerificationModal = React.memo(
         updateState,
         validateApiUrl,
         safeCallback,
+        handleProcessError
       ]
     );
 
+    const handleImageCapture = useCallback(
+      async (capturedData) => {
+        console.log("📷 Image captured for step:", state.currentStep);
+
+        if (state.currentStep === "Identity Verification") {
+          console.log("👤 Processing face verification");
+          uploadFaceScan(capturedData);
+        } else if (state.currentStep === "Location Verification") {
+          console.log("📍 Processing QR code verification");
+          handleQRScanned(capturedData);
+        }
+      },
+      [state.currentStep, uploadFaceScan, handleQRScanned]
+    );
+
+    const handleStartFaceScan = useCallback(() => {
+      console.log("👤 Starting face scan");
+      updateState({
+        currentStep: "Identity Verification",
+        animationState: ANIMATION_STATES.FACE_SCAN,
+      });
+      setCameraType("front");
+    }, [updateState]);
+
+    const startQRCodeScan = useCallback(() => {
+      console.log("📍 Starting QR code scan");
+      updateState({
+        currentStep: "Location Verification",
+        animationState: ANIMATION_STATES.QR_SCAN,
+      });
+      setCameraType("back");
+    }, [updateState]);
+
+    const toggleCamera = useCallback(() => {
+      console.log("🔄 Toggling camera");
+      setCameraType((prevType) => {
+        const newType = prevType === "front" ? "back" : "front";
+        console.log("📷 Switching to camera:", newType);
+        return newType;
+      });
+    }, []);
+
     const startProcess = useCallback(() => {
+      console.log("🚀 Starting verification process");
       startCountdown(COUNTDOWN_DURATION, handleCountdownFinish);
       handleStartFaceScan();
     }, [handleCountdownFinish, handleStartFaceScan, startCountdown]);
 
     useEffect(() => {
-      if (data && !modalVisible) {
-        console.log("📥 New donor data received:", data);
+      if (data && !modalVisible && !processedRef.current) {
+        console.log("📥 New data received, opening modal");
+        processedRef.current = true;
         setModalVisible(true);
         startProcess();
       }
@@ -342,6 +518,12 @@ const BiometricVerificationModal = React.memo(
       [state.isLoading, state.animationState, state.currentStep, apiurl]
     );
 
+    const shouldShowCamera =
+      (state.currentStep === "Identity Verification" ||
+        state.currentStep === "Location Verification") &&
+      state.animationState !== ANIMATION_STATES.SUCCESS &&
+      state.animationState !== ANIMATION_STATES.ERROR;
+
     return (
       <>
         <Modal
@@ -351,41 +533,60 @@ const BiometricVerificationModal = React.memo(
           onRequestClose={resetState}
           statusBarTranslucent
         >
-          <View style={styles.modalBg}>
+          <View style={styles.modalContainer}>
             <TouchableOpacity
-              style={styles.close}
+              style={styles.closeButton}
               onPress={resetState}
               accessibilityLabel="Close modal"
               hitSlop={{ top: 20, bottom: 20, left: 20, right: 20 }}
             >
               <Icon name="close" size={24} color={COLORS.light} />
             </TouchableOpacity>
-            
-            <Text style={styles.title}>Biometric Verification</Text>
-            <Text style={styles.subTitle}>{state.currentStep}</Text>
-            
-            {state.employeeData && (
-              <EmployeeCard
-                employeeData={state.employeeData}
-                apiurl={apiurl}
+
+            <View style={styles.headerContainer}>
+              <StepIcon 
+                currentStep={state.currentStep}
+                animationState={state.animationState}
+                scaleAnim={iconScaleAnim}
+                opacityAnim={iconOpacityAnim}
+              />
+              
+              <View style={styles.titleContainer}>
+                <Text style={styles.title}>Biometric Verification</Text>
+                <Text style={styles.subtitle}>{state.currentStep}</Text>
+              </View>
+            </View>
+
+            <StepIndicator currentStep={state.currentStep} />
+
+            {shouldShowCamera && !state.isLoading && (
+              <CaptureImageWithoutEdit
+                cameraType={cameraType}
+                onCapture={handleImageCapture}
+                onToggleCamera={toggleCamera}
+                showCodeScanner={state.currentStep === "Location Verification"}
+                isLoading={state.isLoading}
+                currentStep={state.currentStep}
               />
             )}
-            
+
+            {state.employeeData && (
+              <CCard employeeData={state.employeeData} apiurl={apiurl} />
+            )}
+
             <Notification
               notification={notification}
               fadeAnim={fadeAnim}
               slideAnim={slideAnim}
             />
-            
+
             <CountdownTimer
               duration={COUNTDOWN_DURATION}
               currentTime={countdown}
             />
-            
-            <Loader 
-              state={state.animationState} 
-              source={loaderSource}
-              isLoading={state.isLoading}
+            <Loader
+              gifSource={loaderSource}
+              visible={state.isLoading}
             />
           </View>
         </Modal>
@@ -394,4 +595,54 @@ const BiometricVerificationModal = React.memo(
   }
 );
 
+const styles = StyleSheet.create({
+  modalContainer: {
+    flex: 1,
+    backgroundColor: 'rgba(0, 0, 0, 0.85)',
+    justifyContent: 'center',
+    alignItems: 'center',
+    paddingVertical: 50,
+  },
+  headerContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginBottom: 15,
+  },
+  titleContainer: {
+    flex: 1,
+  },
+  title: {
+    fontSize: 26,
+    fontWeight: '700',
+    color: COLORS.light,
+    marginBottom: 5,
+    textAlign: 'left',
+    fontFamily: Platform.OS === 'ios' ? 'Helvetica Neue' : 'sans-serif',
+    textShadowColor: 'rgba(0, 0, 0, 0.3)',
+    textShadowOffset: { width: 1, height: 1 },
+    textShadowRadius: 3,
+  },
+  subtitle: {
+    fontSize: 18,
+    color: COLORS.light,
+    marginBottom: 0,
+    fontWeight: '600',
+    textAlign: 'left',
+    opacity: 0.9,
+    fontFamily: Platform.OS === 'ios' ? 'Helvetica Neue' : 'sans-serif-medium',
+    textShadowColor: 'rgba(0, 0, 0, 0.2)',
+    textShadowOffset: { width: 1, height: 1 },
+    textShadowRadius: 2,
+  },
+  closeButton: {
+    position: 'absolute',
+    top: Platform.OS === 'ios' ? 50 : 30,
+    right: 20,
+    zIndex: 10,
+    backgroundColor: 'rgba(255, 255, 255, 0.15)',
+    borderRadius: 20,
+    padding: 8,
+  },
+});
+
 export default BiometricVerificationModal;