omnipay-reactnative-sdk 1.2.0 → 1.2.1-beta.0

package/lib/module/components/FaceVerification.js

@@ -0,0 +1,746 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { StyleSheet, Text, View, TouchableOpacity, Animated, Image, Linking, Platform } from 'react-native';
+import { useCameraDevice, useCameraPermission, useCameraFormat } from 'react-native-vision-camera';
+import { Camera } from 'react-native-vision-camera-face-detector';
+import Svg, { Circle } from 'react-native-svg';
+const AnimatedCircle = Animated.createAnimatedComponent(Circle);
+const FaceVerification = _ref => {
+  let {
+    onSuccess,
+    onFailure,
+    onCancel,
+    onImageCaptured
+  } = _ref;
+  const device = useCameraDevice('front');
+  const faceDetectionOptions = useRef({
+    landmarkMode: 'all',
+    classificationMode: 'all'
+  }).current;
+  const photoFormat = useCameraFormat(device, [{
+    photoResolution: {
+      width: 1280,
+      height: 720
+    }
+  }]);
+  const {
+    hasPermission,
+    requestPermission
+  } = useCameraPermission();
+  const spinValue = useRef(new Animated.Value(0)).current;
+  const progressValue = useRef(new Animated.Value(955)).current; // 955 = circle circumference for r=152
+
+  const [isCameraActive, setIsCameraActive] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
+  const [permissionDenied, setPermissionDenied] = useState(false);
+  const [isInitializingCamera, setIsInitializingCamera] = useState(true);
+  const [currentStep, setCurrentStep] = useState('position_face');
+  const [isCapturing, setIsCapturing] = useState(false);
+  const [capturedImage, setCapturedImage] = useState(null);
+  const frameCountRef = useRef(0);
+  const finalPositionFrameCountRef = useRef(0);
+  const faceHistoryRef = useRef([]);
+  const cameraRef = useRef(null);
+
+  // RAF optimization: buffer latest face data and process on animation frames
+  const latestFaceDataRef = useRef(null);
+  const rafIdRef = useRef(null);
+  const isProcessingRef = useRef(false);
+
+  // Handle camera device initialization and auto-start
+  useEffect(() => {
+    if (device !== undefined) {
+      setIsInitializingCamera(false);
+
+      // If permissions are already granted, start camera immediately
+      if (hasPermission && !isCameraActive && !permissionDenied && !capturedImage) {
+        setIsCameraActive(true);
+        progressValue.setValue(955);
+      }
+    }
+  }, [device, hasPermission, isCameraActive, permissionDenied, capturedImage, progressValue]);
+
+  // Start loading animation during camera initialization
+  useEffect(() => {
+    if (isInitializingCamera) {
+      setIsLoading(true);
+    } else {
+      setIsLoading(false);
+    }
+  }, [isInitializingCamera]);
+  useEffect(() => {
+    const spin = Animated.loop(Animated.timing(spinValue, {
+      toValue: 1,
+      duration: 1000,
+      useNativeDriver: true
+    }));
+    if (isLoading) {
+      spin.start();
+    } else {
+      spin.stop();
+      spinValue.setValue(0);
+    }
+    return () => spin.stop();
+  }, [isLoading, spinValue]);
+  useEffect(() => {
+    const progressPercentage = calculateProgress();
+    const strokeDasharray = 955;
+    const targetOffset = strokeDasharray - progressPercentage / 100 * strokeDasharray;
+    if (isCameraActive && progressPercentage >= 0) {
+      Animated.timing(progressValue, {
+        toValue: targetOffset,
+        duration: 800,
+        useNativeDriver: false
+      }).start();
+    }
+  }, [currentStep, progressValue, isCameraActive]);
+
+  // RAF-based face processing to throttle heavy computations
+  const processFaceData = () => {
+    if (!latestFaceDataRef.current || isProcessingRef.current) {
+      rafIdRef.current = null;
+      return;
+    }
+    isProcessingRef.current = true;
+    const {
+      faces
+    } = latestFaceDataRef.current;
+
+    // Clear the buffer since we're processing this data
+    latestFaceDataRef.current = null;
+    try {
+      handleFaceDetectionLogic(faces);
+    } finally {
+      isProcessingRef.current = false;
+      rafIdRef.current = null;
+    }
+  };
+
+  // Cleanup RAF on unmount
+  useEffect(() => {
+    return () => {
+      if (rafIdRef.current) {
+        cancelAnimationFrame(rafIdRef.current);
+      }
+    };
+  }, []);
+  const getInstructionText = () => {
+    switch (currentStep) {
+      case 'position_face':
+        return 'Position your face in the frame';
+      case 'blink':
+        return 'Please blink your eyes';
+      case 'smile':
+        return 'Now smile';
+      case 'final_position':
+        return 'Look straight at the camera and hold still';
+      case 'complete':
+        return '';
+      default:
+        return 'Position your face in the frame';
+    }
+  };
+  const calculateProgress = () => {
+    switch (currentStep) {
+      case 'position_face':
+        return 10;
+      case 'blink':
+        return 30;
+      case 'smile':
+        return 60;
+      case 'final_position':
+        return 80;
+      case 'complete':
+        return 100;
+      default:
+        return 0;
+    }
+  };
+  const detectBlink = () => {
+    if (frameCountRef.current < 20 || faceHistoryRef.current.length < 4) return false;
+    const threshold = {
+      eyeOpen: 0.5,
+      eyeClosed: 0.3
+    };
+    const recentFrames = faceHistoryRef.current.slice(-4);
+    for (let i = 0; i < recentFrames.length - 1; i++) {
+      const frame1 = recentFrames[i];
+      const frame2 = recentFrames[i + 1];
+      if (!frame1 || !frame2) continue;
+      const eyesWereOpen = frame1.leftEyeOpenProbability > threshold.eyeOpen && frame1.rightEyeOpenProbability > threshold.eyeOpen;
+      const eyesAreClosed = frame2.leftEyeOpenProbability < threshold.eyeClosed && frame2.rightEyeOpenProbability < threshold.eyeClosed;
+      if (eyesWereOpen && eyesAreClosed) {
+        return true;
+      }
+    }
+    return false;
+  };
+  const detectSmile = face => {
+    if (frameCountRef.current < 20 || faceHistoryRef.current.length < 3) return false;
+    const threshold = 0.7;
+    const currentSmiling = face.smilingProbability > threshold;
+    const recentFrames = faceHistoryRef.current.slice(-3);
+    const hadNotSmilingFrames = recentFrames.some(frame => frame.smilingProbability < 0.4);
+    return currentSmiling && hadNotSmilingFrames;
+  };
+  const isInFinalPosition = face => {
+    const isLookingStraight = Math.abs(face.yawAngle) < 15;
+    const eyesOpen = face.leftEyeOpenProbability > 0.5 && face.rightEyeOpenProbability > 0.5;
+    const isNotSmiling = face.smilingProbability < 0.1;
+    return isLookingStraight && eyesOpen && isNotSmiling;
+  };
+
+  // Fast callback that just buffers data - called by camera at high frequency
+  function handleFacesDetection(faces, frame) {
+    // Store the latest face data
+    latestFaceDataRef.current = {
+      faces,
+      frame
+    };
+
+    // Schedule processing on next animation frame if not already scheduled
+    if (!rafIdRef.current) {
+      rafIdRef.current = requestAnimationFrame(processFaceData);
+    }
+  }
+
+  // Heavy processing logic - called at animation frame rate (60fps max)
+  function handleFaceDetectionLogic(faces) {
+    if (faces.length === 0) {
+      if (currentStep !== 'position_face' && currentStep !== 'complete') {
+        setCurrentStep('position_face');
+        frameCountRef.current = 0;
+        faceHistoryRef.current = [];
+        finalPositionFrameCountRef.current = 0;
+      }
+      return;
+    }
+    const face = faces[0];
+    if (!face) return;
+    frameCountRef.current++;
+    faceHistoryRef.current = [...faceHistoryRef.current.slice(-7), face];
+    switch (currentStep) {
+      case 'position_face':
+        if (frameCountRef.current > 10) {
+          setCurrentStep('blink');
+        }
+        break;
+      case 'blink':
+        if (detectBlink()) {
+          setCurrentStep('smile');
+        }
+        break;
+      case 'smile':
+        if (detectSmile(face)) {
+          setCurrentStep('final_position');
+        }
+        break;
+      case 'final_position':
+        if (isInFinalPosition(face)) {
+          finalPositionFrameCountRef.current++;
+          // Require 5 consecutive frames for stability before capturing
+          if (finalPositionFrameCountRef.current >= 5) {
+            setCurrentStep('complete');
+            captureCurrentFrame();
+          }
+        } else {
+          finalPositionFrameCountRef.current = 0;
+        }
+        break;
+      default:
+        break;
+    }
+  }
+  const captureCurrentFrame = async () => {
+    if (isCapturing || !cameraRef.current) return;
+    try {
+      setIsCapturing(true);
+      const photo = await cameraRef.current.takePhoto({
+        enableShutterSound: false
+      });
+      const response = await fetch(`file://${photo.path}`);
+      const blob = await response.blob();
+      const reader = new FileReader();
+      reader.onloadend = () => {
+        const base64String = reader.result;
+        setCapturedImage(base64String);
+        setIsCameraActive(false);
+      };
+      reader.readAsDataURL(blob);
+    } catch (error) {
+      onFailure === null || onFailure === void 0 ? void 0 : onFailure();
+    } finally {
+      setIsCapturing(false);
+    }
+  };
+  const handleContinue = () => {
+    if (capturedImage) {
+      const base64String = capturedImage.replace(/^data:image\/[a-z]+;base64,/, '');
+
+      // Call onImageCaptured immediately for UI feedback
+      onImageCaptured === null || onImageCaptured === void 0 ? void 0 : onImageCaptured(base64String);
+
+      // Still call onSuccess for backward compatibility
+      onSuccess === null || onSuccess === void 0 ? void 0 : onSuccess(base64String);
+    }
+  };
+  const handleRetake = () => {
+    setCurrentStep('position_face');
+    faceHistoryRef.current = [];
+    frameCountRef.current = 0;
+    setCapturedImage(null);
+    finalPositionFrameCountRef.current = 0;
+    progressValue.setValue(955);
+    setIsCameraActive(true);
+    setIsLoading(true);
+    setTimeout(() => {
+      setIsLoading(false);
+    }, 1000);
+  };
+  const startCamera = async () => {
+    setIsLoading(true);
+    setPermissionDenied(false);
+    try {
+      const permission = await requestPermission();
+      if (permission === true) {
+        setIsCameraActive(true);
+        progressValue.setValue(955);
+        setTimeout(() => {
+          setIsLoading(false);
+        }, 1000);
+      } else {
+        setPermissionDenied(true);
+        setIsLoading(false);
+      }
+    } catch (error) {
+      setPermissionDenied(true);
+      setIsLoading(false);
+    }
+  };
+  const openSettings = () => {
+    if (Platform.OS === 'ios') {
+      Linking.openURL('app-settings:');
+    } else {
+      Linking.openSettings();
+    }
+  };
+  if (permissionDenied) {
+    return /*#__PURE__*/React.createElement(View, {
+      style: [styles.container]
+    }, /*#__PURE__*/React.createElement(View, {
+      style: styles.centeredContainer
+    }, /*#__PURE__*/React.createElement(View, {
+      style: styles.permissionDeniedContainer
+    }, /*#__PURE__*/React.createElement(Text, {
+      style: styles.permissionDeniedTitle
+    }, "Camera Access Required"), /*#__PURE__*/React.createElement(Text, {
+      style: styles.permissionDeniedText
+    }, "This app needs camera access to verify your identity. Please allow camera permission in your device settings."), /*#__PURE__*/React.createElement(View, {
+      style: styles.permissionActions
+    }, /*#__PURE__*/React.createElement(TouchableOpacity, {
+      style: styles.settingsButton,
+      onPress: openSettings
+    }, /*#__PURE__*/React.createElement(Text, {
+      style: styles.settingsButtonText
+    }, "Open Settings")), /*#__PURE__*/React.createElement(TouchableOpacity, {
+      style: styles.retryButton,
+      onPress: () => setPermissionDenied(false)
+    }, /*#__PURE__*/React.createElement(Text, {
+      style: styles.retryButtonText
+    }, "Try Again"))))));
+  }
+  if (isInitializingCamera || device === undefined) {
+    const spin = spinValue.interpolate({
+      inputRange: [0, 1],
+      outputRange: ['0deg', '360deg']
+    });
+    return /*#__PURE__*/React.createElement(View, {
+      style: [styles.container]
+    }, /*#__PURE__*/React.createElement(View, {
+      style: styles.centeredContainer
+    }, /*#__PURE__*/React.createElement(View, {
+      style: styles.loadingContainer
+    }, /*#__PURE__*/React.createElement(Animated.View, {
+      style: [styles.loadingSpinner, {
+        transform: [{
+          rotate: spin
+        }]
+      }]
+    }), /*#__PURE__*/React.createElement(Text, {
+      style: styles.loadingText
+    }, isInitializingCamera ? 'Initializing camera...' : 'No camera device available'))));
+  }
+  const strokeDasharray = 955;
+  const spin = spinValue.interpolate({
+    inputRange: [0, 1],
+    outputRange: ['0deg', '360deg']
+  });
+  return /*#__PURE__*/React.createElement(View, {
+    style: [styles.container]
+  }, /*#__PURE__*/React.createElement(View, {
+    style: styles.centeredContainer
+  }, isLoading ? /*#__PURE__*/React.createElement(View, {
+    style: styles.loadingContainer
+  }, /*#__PURE__*/React.createElement(Animated.View, {
+    style: [styles.loadingSpinner, {
+      transform: [{
+        rotate: spin
+      }]
+    }]
+  })) : /*#__PURE__*/React.createElement(View, {
+    style: styles.contentContainer
+  }, capturedImage ? /*#__PURE__*/React.createElement(View, {
+    style: styles.capturedImageContainer
+  }, /*#__PURE__*/React.createElement(View, {
+    style: styles.capturedImageWrapper
+  }, /*#__PURE__*/React.createElement(Image, {
+    source: {
+      uri: capturedImage
+    },
+    style: styles.capturedImage,
+    resizeMode: "cover"
+  })), /*#__PURE__*/React.createElement(View, {
+    style: styles.capturedImageActions
+  }, /*#__PURE__*/React.createElement(TouchableOpacity, {
+    style: styles.continueButton,
+    onPress: handleContinue
+  }, /*#__PURE__*/React.createElement(Text, {
+    style: styles.continueButtonText
+  }, "Continue")), /*#__PURE__*/React.createElement(TouchableOpacity, {
+    style: styles.retakeButton,
+    onPress: handleRetake
+  }, /*#__PURE__*/React.createElement(Text, {
+    style: styles.retakeButtonText
+  }, "Retake")))) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(View, {
+    style: styles.captureSection
+  }, /*#__PURE__*/React.createElement(View, {
+    style: styles.captureBackground
+  }, isCameraActive ? /*#__PURE__*/React.createElement(Camera, {
+    ref: cameraRef,
+    device: device,
+    isActive: true,
+    style: styles.camera,
+    faceDetectionCallback: handleFacesDetection,
+    faceDetectionOptions: faceDetectionOptions,
+    photo: true,
+    format: photoFormat
+  }) : /*#__PURE__*/React.createElement(View, {
+    style: styles.avatarPlaceholder
+  }, /*#__PURE__*/React.createElement(Text, {
+    style: styles.avatarText
+  }, "\uD83D\uDC64"))), isCameraActive && /*#__PURE__*/React.createElement(View, {
+    style: styles.progressRingContainer
+  }, /*#__PURE__*/React.createElement(Svg, {
+    width: 320,
+    height: 320,
+    viewBox: "0 0 320 320",
+    style: styles.progressRing
+  }, /*#__PURE__*/React.createElement(Circle, {
+    cx: 160,
+    cy: 160,
+    r: 150,
+    stroke: "#E5E7EB",
+    strokeWidth: "0",
+    fill: "none"
+  }), /*#__PURE__*/React.createElement(AnimatedCircle, {
+    cx: 160,
+    cy: 160,
+    r: 152,
+    stroke: "#214287",
+    strokeWidth: 6,
+    fill: "none",
+    strokeDasharray: strokeDasharray,
+    strokeDashoffset: progressValue,
+    strokeLinecap: "round"
+  }))), !isCameraActive && /*#__PURE__*/React.createElement(View, {
+    style: styles.cameraIconSection
+  }, /*#__PURE__*/React.createElement(View, {
+    style: styles.cameraIconContainer
+  }, /*#__PURE__*/React.createElement(Text, {
+    style: styles.cameraIcon
+  }, "\uD83D\uDCF7")))), isCameraActive && /*#__PURE__*/React.createElement(View, {
+    style: styles.instructionContainer
+  }, /*#__PURE__*/React.createElement(Text, {
+    style: styles.instructionText
+  }, getInstructionText())), !isCameraActive && !hasPermission && /*#__PURE__*/React.createElement(View, {
+    style: styles.startContainer
+  }, /*#__PURE__*/React.createElement(TouchableOpacity, {
+    style: styles.startButton,
+    onPress: startCamera
+  }, /*#__PURE__*/React.createElement(Text, {
+    style: styles.startButtonText
+  }, "Proceed")))))), /*#__PURE__*/React.createElement(TouchableOpacity, {
+    style: styles.closeButton,
+    onPress: onCancel
+  }, /*#__PURE__*/React.createElement(Text, {
+    style: styles.closeButtonText
+  }, "\u2715")));
+};
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    marginHorizontal: 'auto',
+    width: '100%'
+  },
+  centeredContainer: {
+    flex: 1,
+    alignSelf: 'center',
+    justifyContent: 'center',
+    width: '100%',
+    paddingHorizontal: 0,
+    paddingBottom: 40,
+    paddingTop: 20
+  },
+  contentContainer: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'flex-start',
+    gap: 16
+  },
+  captureSection: {
+    justifyContent: 'flex-start',
+    alignItems: 'center',
+    position: 'relative',
+    width: 320
+  },
+  captureBackground: {
+    width: 300,
+    height: 300,
+    backgroundColor: '#F1F5F9',
+    overflow: 'hidden',
+    position: 'relative',
+    justifyContent: 'center',
+    alignItems: 'center',
+    borderRadius: 150
+  },
+  camera: {
+    width: '100%',
+    height: '100%',
+    transform: [{
+      scaleX: -1
+    }]
+  },
+  avatarFrame: {
+    width: 140,
+    height: 140
+  },
+  avatarPlaceholder: {
+    width: 140,
+    height: 140,
+    justifyContent: 'center',
+    alignItems: 'center'
+  },
+  avatarText: {
+    fontSize: 80
+  },
+  progressRingContainer: {
+    position: 'absolute',
+    top: '50%',
+    left: '50%',
+    transform: [{
+      translateX: -160
+    }, {
+      translateY: -160
+    }],
+    width: 320,
+    height: 320
+  },
+  progressRing: {
+    width: '100%',
+    height: '100%'
+  },
+  cameraIconSection: {
+    position: 'absolute',
+    top: 240,
+    right: 40,
+    width: 42,
+    height: 42,
+    borderRadius: 21,
+    backgroundColor: '#ffffff',
+    justifyContent: 'center',
+    alignItems: 'center'
+  },
+  cameraIconContainer: {
+    width: 38,
+    height: 38,
+    borderRadius: 19,
+    backgroundColor: '#214287',
+    justifyContent: 'center',
+    alignItems: 'center'
+  },
+  cameraIcon: {
+    fontSize: 16,
+    color: '#ffffff'
+  },
+  instructionContainer: {
+    marginBottom: 16,
+    paddingHorizontal: 20,
+    alignItems: 'center'
+  },
+  instructionText: {
+    fontSize: 16,
+    color: '#667085',
+    textAlign: 'center',
+    lineHeight: 24
+  },
+  startContainer: {
+    alignItems: 'center',
+    marginTop: 24
+  },
+  startButton: {
+    backgroundColor: '#214287',
+    borderRadius: 10,
+    padding: 15,
+    alignItems: 'center',
+    minWidth: 250
+  },
+  startButtonText: {
+    color: '#ffffff',
+    fontSize: 16,
+    fontWeight: '600',
+    textAlign: 'center'
+  },
+  loadingContainer: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    paddingVertical: 50
+  },
+  loadingSpinner: {
+    width: 48,
+    height: 48,
+    borderRadius: 24,
+    borderWidth: 4,
+    borderColor: '#e5e7eb',
+    borderTopColor: '#214287',
+    marginBottom: 16
+  },
+  loadingText: {
+    fontSize: 16,
+    color: '#667085',
+    textAlign: 'center'
+  },
+  capturedImageContainer: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: 24,
+    width: '100%'
+  },
+  capturedImageWrapper: {
+    width: '100%',
+    height: 300,
+    borderRadius: 12,
+    overflow: 'hidden',
+    backgroundColor: '#F1F5F9',
+    shadowColor: '#000',
+    shadowOffset: {
+      width: 0,
+      height: 4
+    },
+    shadowOpacity: 0.1,
+    shadowRadius: 8,
+    elevation: 5
+  },
+  capturedImage: {
+    width: '100%',
+    height: '100%'
+  },
+  capturedImageActions: {
+    width: '100%',
+    gap: 12
+  },
+  continueButton: {
+    backgroundColor: '#214287',
+    borderRadius: 10,
+    padding: 15,
+    alignItems: 'center',
+    width: '100%'
+  },
+  continueButtonText: {
+    color: '#ffffff',
+    fontSize: 16,
+    fontWeight: '600',
+    textAlign: 'center'
+  },
+  retakeButton: {
+    borderWidth: 1,
+    borderColor: '#214287',
+    borderRadius: 10,
+    padding: 15,
+    alignItems: 'center',
+    backgroundColor: 'transparent',
+    width: '100%'
+  },
+  retakeButtonText: {
+    color: '#214287',
+    fontSize: 16,
+    fontWeight: '600',
+    textAlign: 'center'
+  },
+  permissionDeniedContainer: {
+    alignItems: 'center'
+  },
+  permissionDeniedTitle: {
+    fontSize: 20,
+    fontWeight: '600',
+    color: '#333333',
+    textAlign: 'center',
+    marginBottom: 15
+  },
+  permissionDeniedText: {
+    fontSize: 16,
+    color: '#666666',
+    textAlign: 'center',
+    lineHeight: 24,
+    marginBottom: 30
+  },
+  permissionActions: {
+    width: '100%',
+    gap: 12
+  },
+  settingsButton: {
+    backgroundColor: '#214287',
+    borderRadius: 10,
+    padding: 15,
+    alignItems: 'center',
+    width: '100%'
+  },
+  settingsButtonText: {
+    color: '#ffffff',
+    fontSize: 16,
+    fontWeight: '600',
+    textAlign: 'center'
+  },
+  retryButton: {
+    borderWidth: 1,
+    borderColor: '#214287',
+    borderRadius: 10,
+    padding: 15,
+    alignItems: 'center',
+    backgroundColor: 'transparent',
+    width: '100%'
+  },
+  retryButtonText: {
+    color: '#214287',
+    fontSize: 16,
+    fontWeight: '600',
+    textAlign: 'center'
+  },
+  closeButton: {
+    position: 'absolute',
+    top: 50,
+    right: 20,
+    width: 44,
+    height: 44,
+    borderRadius: 22,
+    backgroundColor: 'rgba(0,0,0,0.5)',
+    justifyContent: 'center',
+    alignItems: 'center'
+  },
+  closeButtonText: {
+    color: 'white',
+    fontSize: 18,
+    fontWeight: 'bold'
+  }
+});
+export default FaceVerification;
+//# sourceMappingURL=FaceVerification.js.map