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

package/src/components/FaceVerification.tsx

@@ -1,884 +0,0 @@
-import React, { useEffect, useRef, useState } from 'react';
-import {
-  StyleSheet,
-  Text,
-  View,
-  TouchableOpacity,
-  Animated,
-  Image,
-  Linking,
-  Platform,
-} from 'react-native';
-import {
-  useCameraDevice,
-  useCameraPermission,
-  Frame,
-  useCameraFormat,
-} from 'react-native-vision-camera';
-import {
-  Face,
-  Camera,
-  FaceDetectionOptions,
-} from 'react-native-vision-camera-face-detector';
-import Svg, { Circle } from 'react-native-svg';
-
-const AnimatedCircle = Animated.createAnimatedComponent(Circle);
-
-type VerificationStep =
-  | 'position_face'
-  | 'blink'
-  | 'smile'
-  | 'final_position'
-  | 'complete';
-
-interface FaceVerificationProps {
-  onSuccess?: (capturedImageBase64: string) => void;
-  onFailure?: () => void;
-  onCancel?: () => void;
-  onImageCaptured?: (livenessImage: string) => void;
-}
-
-const FaceVerification: React.FC<FaceVerificationProps> = ({
-  onSuccess,
-  onFailure,
-  onCancel,
-  onImageCaptured,
-}) => {
-  const device = useCameraDevice('front');
-  const faceDetectionOptions = useRef<FaceDetectionOptions>({
-    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<VerificationStep>('position_face');
-  const [isCapturing, setIsCapturing] = useState(false);
-  const [capturedImage, setCapturedImage] = useState<string | null>(null);
-
-  const frameCountRef = useRef(0);
-  const finalPositionFrameCountRef = useRef(0);
-  const faceHistoryRef = useRef<Face[]>([]);
-  const cameraRef = useRef<any>(null);
-
-  // RAF optimization: buffer latest face data and process on animation frames
-  const latestFaceDataRef = useRef<{ faces: Face[]; frame: Frame } | null>(
-    null
-  );
-  const rafIdRef = useRef<number | null>(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 = (): boolean => {
-    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: Face): boolean => {
-    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: Face) => frame.smilingProbability < 0.4
-    );
-
-    return currentSmiling && hadNotSmilingFrames;
-  };
-
-  const isInFinalPosition = (face: Face): boolean => {
-    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: Face[], frame: 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: Face[]) {
-    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 as string;
-        setCapturedImage(base64String);
-        setIsCameraActive(false);
-      };
-      reader.readAsDataURL(blob);
-    } catch (error) {
-      onFailure?.();
-    } finally {
-      setIsCapturing(false);
-    }
-  };
-
-  const handleContinue = () => {
-    if (capturedImage) {
-      const base64String = capturedImage.replace(
-        /^data:image\/[a-z]+;base64,/,
-        ''
-      );
-
-      // Call onImageCaptured immediately for UI feedback
-      onImageCaptured?.(base64String);
-
-      // Still call onSuccess for backward compatibility
-      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 (
-      <View style={[styles.container]}>
-        <View style={styles.centeredContainer}>
-          <View style={styles.permissionDeniedContainer}>
-            <Text style={styles.permissionDeniedTitle}>
-              Camera Access Required
-            </Text>
-            <Text style={styles.permissionDeniedText}>
-              This app needs camera access to verify your identity. Please allow
-              camera permission in your device settings.
-            </Text>
-
-            <View style={styles.permissionActions}>
-              <TouchableOpacity
-                style={styles.settingsButton}
-                onPress={openSettings}
-              >
-                <Text style={styles.settingsButtonText}>Open Settings</Text>
-              </TouchableOpacity>
-
-              <TouchableOpacity
-                style={styles.retryButton}
-                onPress={() => setPermissionDenied(false)}
-              >
-                <Text style={styles.retryButtonText}>Try Again</Text>
-              </TouchableOpacity>
-            </View>
-          </View>
-        </View>
-      </View>
-    );
-  }
-
-  if (isInitializingCamera || device === undefined) {
-    const spin = spinValue.interpolate({
-      inputRange: [0, 1],
-      outputRange: ['0deg', '360deg'],
-    });
-
-    return (
-      <View style={[styles.container]}>
-        <View style={styles.centeredContainer}>
-          <View style={styles.loadingContainer}>
-            <Animated.View
-              style={[styles.loadingSpinner, { transform: [{ rotate: spin }] }]}
-            />
-            <Text style={styles.loadingText}>
-              {isInitializingCamera
-                ? 'Initializing camera...'
-                : 'No camera device available'}
-            </Text>
-          </View>
-        </View>
-      </View>
-    );
-  }
-
-  const strokeDasharray = 955;
-
-  const spin = spinValue.interpolate({
-    inputRange: [0, 1],
-    outputRange: ['0deg', '360deg'],
-  });
-
-  return (
-    <View style={[styles.container]}>
-      <View style={styles.centeredContainer}>
-        {isLoading ? (
-          <View style={styles.loadingContainer}>
-            <Animated.View
-              style={[styles.loadingSpinner, { transform: [{ rotate: spin }] }]}
-            />
-          </View>
-        ) : (
-          <View style={styles.contentContainer}>
-            {capturedImage ? (
-              <View style={styles.capturedImageContainer}>
-                <View style={styles.capturedImageWrapper}>
-                  <Image
-                    source={{ uri: capturedImage }}
-                    style={styles.capturedImage}
-                    resizeMode="cover"
-                  />
-                </View>
-
-                <View style={styles.capturedImageActions}>
-                  <TouchableOpacity
-                    style={styles.continueButton}
-                    onPress={handleContinue}
-                  >
-                    <Text style={styles.continueButtonText}>Continue</Text>
-                  </TouchableOpacity>
-                  <TouchableOpacity
-                    style={styles.retakeButton}
-                    onPress={handleRetake}
-                  >
-                    <Text style={styles.retakeButtonText}>Retake</Text>
-                  </TouchableOpacity>
-                </View>
-              </View>
-            ) : (
-              <>
-                <View style={styles.captureSection}>
-                  <View style={styles.captureBackground}>
-                    {isCameraActive ? (
-                      <Camera
-                        ref={cameraRef}
-                        device={device}
-                        isActive={true}
-                        style={styles.camera}
-                        faceDetectionCallback={handleFacesDetection}
-                        faceDetectionOptions={faceDetectionOptions}
-                        photo={true}
-                        format={photoFormat}
-                      />
-                    ) : (
-                      <View style={styles.avatarPlaceholder}>
-                        <Text style={styles.avatarText}>👤</Text>
-                      </View>
-                    )}
-                  </View>
-
-                  {isCameraActive && (
-                    <View style={styles.progressRingContainer}>
-                      <Svg
-                        width={320}
-                        height={320}
-                        viewBox="0 0 320 320"
-                        style={styles.progressRing}
-                      >
-                        <Circle
-                          cx={160}
-                          cy={160}
-                          r={150}
-                          stroke="#E5E7EB"
-                          strokeWidth="0"
-                          fill="none"
-                        />
-                        <AnimatedCircle
-                          cx={160}
-                          cy={160}
-                          r={152}
-                          stroke="#214287"
-                          strokeWidth={6}
-                          fill="none"
-                          strokeDasharray={strokeDasharray}
-                          strokeDashoffset={progressValue}
-                          strokeLinecap="round"
-                        />
-                      </Svg>
-                    </View>
-                  )}
-
-                  {!isCameraActive && (
-                    <View style={styles.cameraIconSection}>
-                      <View style={styles.cameraIconContainer}>
-                        <Text style={styles.cameraIcon}>📷</Text>
-                      </View>
-                    </View>
-                  )}
-                </View>
-
-                {isCameraActive && (
-                  <View style={styles.instructionContainer}>
-                    <Text style={styles.instructionText}>
-                      {getInstructionText()}
-                    </Text>
-                  </View>
-                )}
-
-                {!isCameraActive && !hasPermission && (
-                  <View style={styles.startContainer}>
-                    <TouchableOpacity
-                      style={styles.startButton}
-                      onPress={startCamera}
-                    >
-                      <Text style={styles.startButtonText}>Proceed</Text>
-                    </TouchableOpacity>
-                  </View>
-                )}
-              </>
-            )}
-          </View>
-        )}
-      </View>
-
-      {/* Close button */}
-      <TouchableOpacity style={styles.closeButton} onPress={onCancel}>
-        <Text style={styles.closeButtonText}>✕</Text>
-      </TouchableOpacity>
-    </View>
-  );
-};
-
-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;