omnipay-reactnative-sdk 1.2.2-beta.0 → 1.2.2-beta.2

package/lib/module/components/FaceVerification.js

@@ -1,746 +0,0 @@
-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