omnipay-reactnative-sdk 1.2.3-beta.9 → 1.2.4

package/src/components/biometrics/FaceVerification.tsx

@@ -1,429 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import {
-  View,
-  Modal,
-  Dimensions,
-  Platform,
-  StyleSheet,
-  TouchableOpacity,
-  Image,
-  Text,
-} from 'react-native';
-import {
-  Camera,
-  useCameraDevice,
-  useCameraPermission,
-} from 'react-native-vision-camera';
-import Button from '../Button';
-import { useFaceVerification } from './useFaceVerification';
-import { useFaceVerificationFlow } from './useFaceVerificationFlow';
-
-type FaceVerificationProps = {
-  onClose: () => void;
-  onSuccess: () => void;
-  primaryColor: string;
-};
-
-const FaceVerification: React.FC<FaceVerificationProps> = ({
-  onClose,
-  onSuccess,
-  primaryColor,
-}) => {
-  const device = useCameraDevice('front');
-  const { hasPermission, requestPermission } = useCameraPermission();
-  const [isRequestingPermission, setIsRequestingPermission] = useState(false);
-
-  // Face verification flow
-  const {
-    state: flowState,
-    resetFlow,
-    isCompleted,
-    isFailed,
-  } = useFaceVerificationFlow();
-
-  // Frame processor
-  const frameProcessor = useFaceVerification();
-
-  // Handle completion
-  useEffect(() => {
-    if (isCompleted) {
-      setTimeout(() => {
-        onSuccess();
-      }, 1000); // Show success message briefly
-    }
-  }, [isCompleted, onSuccess]);
-
-  const handleRequestPermission = async () => {
-    setIsRequestingPermission(true);
-    try {
-      await requestPermission();
-    } catch (error) {
-      console.error('Error requesting camera permission:', error);
-    } finally {
-      setIsRequestingPermission(false);
-    }
-  };
-
-  const renderPermissionRequest = () => (
-    <View style={styles.permissionContainer}>
-      <View style={styles.permissionIconContainer}>
-        <Text style={styles.permissionIcon}>📷</Text>
-      </View>
-      <Text style={styles.permissionTitle}>Camera Permission Required</Text>
-      <Text style={styles.permissionDescription}>
-        To verify your identity, we need access to your camera. This allows us
-        to capture your face for secure verification.
-      </Text>
-      <Button
-        title="Allow Camera Access"
-        onPress={handleRequestPermission}
-        backgroundColor={primaryColor}
-        loading={isRequestingPermission}
-      />
-    </View>
-  );
-
-  const renderNoDevice = () => (
-    <View style={styles.errorContainer}>
-      <Text style={styles.errorTitle}>Camera Not Available</Text>
-      <Text style={styles.errorSubtitle}>
-        No front camera detected on this device. Face verification requires a
-        front-facing camera.
-      </Text>
-    </View>
-  );
-
-  const renderCamera = () => {
-    if (!device) return null;
-
-    return (
-      <View style={styles.cameraContainer}>
-        <Camera
-          device={device}
-          style={styles.camera}
-          isActive={true}
-          frameProcessor={frameProcessor}
-        />
-        <View style={styles.cameraOverlay}>
-          <View style={styles.faceFrame} />
-
-          {/* Progress indicator */}
-          <View style={styles.progressContainer}>
-            <View
-              style={[
-                styles.progressBar,
-                {
-                  width: `${flowState.progress}%`,
-                  backgroundColor: primaryColor,
-                },
-              ]}
-            />
-          </View>
-
-          {/* Current instruction */}
-          <Text style={styles.instructionText}>{flowState.instruction}</Text>
-
-          {/* Step indicator */}
-          <Text style={styles.stepIndicator}>
-            Step {flowState.completedSteps.length + 1} of 5
-          </Text>
-
-          {/* Success/Failure messages */}
-          {isCompleted && (
-            <View
-              style={[
-                styles.statusContainer,
-                { backgroundColor: primaryColor },
-              ]}
-            >
-              <Text style={styles.statusText}>✓ Verification Complete!</Text>
-            </View>
-          )}
-
-          {isFailed && (
-            <View style={[styles.statusContainer, styles.statusContainerError]}>
-              <Text style={styles.statusText}>✗ Verification Failed</Text>
-              <Button
-                title="Try Again"
-                onPress={resetFlow}
-                backgroundColor="white"
-                textColor="#ff4444"
-                style={styles.retryButton}
-              />
-            </View>
-          )}
-        </View>
-      </View>
-    );
-  };
-
-  console.log(onSuccess, primaryColor);
-
-  return (
-    <Modal
-      visible={true}
-      transparent={true}
-      onRequestClose={onClose}
-      style={styles.modal}
-    >
-      <TouchableOpacity
-        style={styles.backdrop}
-        activeOpacity={1}
-        onPress={onClose}
-      >
-        <View style={[styles.container]}>
-          <TouchableOpacity style={styles.close} onPress={onClose}>
-            <Image
-              source={require('../../assets/cancel.png')}
-              style={styles.closeIcon}
-            />
-          </TouchableOpacity>
-          <View style={styles.contentContainer}>
-            {!hasPermission && renderPermissionRequest()}
-            {hasPermission && !device && renderNoDevice()}
-            {hasPermission && device && renderCamera()}
-          </View>
-        </View>
-      </TouchableOpacity>
-    </Modal>
-  );
-};
-
-export default FaceVerification;
-
-const styles = StyleSheet.create({
-  hide: {
-    display: 'none',
-  },
-  full: {
-    flex: 1,
-    width: '100%',
-    height: '100%',
-  },
-  webview: {
-    flex: 1,
-    width: '100%',
-    height: Dimensions.get('window').height - 40,
-    backgroundColor: 'white',
-    borderTopRightRadius: 20,
-    borderTopLeftRadius: 20,
-    paddingTop: 150,
-  },
-  webviewLoader: {
-    zIndex: 3,
-    backgroundColor: 'white',
-    alignItems: 'center',
-    justifyContent: 'center',
-    flex: 1,
-    width: '100%',
-    height: '100%',
-    position: 'absolute',
-    top: 0,
-    left: 0,
-    borderTopRightRadius: 20,
-    borderTopLeftRadius: 20,
-  },
-  backdrop: {
-    backgroundColor: 'rgba(0,0,0,0.3)',
-    flex: 1,
-    justifyContent: 'flex-end',
-    position: 'relative',
-    height: '100%',
-  },
-  container: {
-    backgroundColor: 'white',
-    borderTopRightRadius: 20,
-    borderTopLeftRadius: 20,
-    maxHeight: Dimensions.get('window').height - 120,
-    flex: 1,
-    position: 'relative',
-    ...(Platform.OS === 'android' && { overflow: 'hidden' }),
-  },
-  modal: {
-    flex: 1,
-    backgroundColor: 'rgba(0,0,0,0.48)',
-    height: '100%',
-    width: '100%',
-  },
-  close: {
-    position: 'absolute',
-    top: 10,
-    right: 10,
-    backgroundColor: 'white',
-    height: 24,
-    width: 24,
-    borderRadius: 1000,
-    alignItems: 'center',
-    justifyContent: 'center',
-    zIndex: 2,
-  },
-  closeIcon: {
-    height: 12,
-    width: 12,
-  },
-  contentContainer: {
-    height: '100%',
-    position: 'relative',
-    borderTopRightRadius: 20,
-    borderTopLeftRadius: 20,
-    padding: 16,
-  },
-  testContent: {
-    paddingTop: 30,
-    paddingLeft: 16,
-  },
-  testTwoContent: {
-    paddingTop: 10,
-    paddingLeft: 16,
-  },
-  errorSubtitle: {
-    textAlign: 'center',
-    fontSize: 14,
-    color: '#5e7079',
-    marginBottom: 20,
-    paddingHorizontal: 8,
-    marginTop: 14,
-  },
-  errorContainer: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-    width: Dimensions.get('window').width,
-    height: Dimensions.get('window').height,
-    zIndex: 2,
-    backgroundColor: 'white',
-  },
-
-  camera: {
-    width: '100%',
-    height: 400,
-  },
-  // Permission request styles
-  permissionContainer: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-    paddingHorizontal: 24,
-    paddingVertical: 40,
-  },
-  permissionIconContainer: {
-    width: 80,
-    height: 80,
-    borderRadius: 40,
-    backgroundColor: '#f0f0f0',
-    justifyContent: 'center',
-    alignItems: 'center',
-    marginBottom: 24,
-  },
-  permissionIcon: {
-    fontSize: 40,
-  },
-  permissionTitle: {
-    fontSize: 20,
-    fontWeight: '600',
-    color: '#1a1a1a',
-    textAlign: 'center',
-    marginBottom: 12,
-  },
-  permissionDescription: {
-    fontSize: 16,
-    color: '#666',
-    textAlign: 'center',
-    lineHeight: 22,
-    marginBottom: 32,
-  },
-
-  // Error styles
-  errorTitle: {
-    fontSize: 18,
-    fontWeight: '600',
-    color: '#1a1a1a',
-    textAlign: 'center',
-    marginBottom: 8,
-  },
-  // Camera styles
-  cameraContainer: {
-    flex: 1,
-    position: 'relative',
-    marginTop: 60,
-  },
-  cameraOverlay: {
-    position: 'absolute',
-    top: 0,
-    left: 0,
-    right: 0,
-    bottom: 0,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  faceFrame: {
-    width: 200,
-    height: 250,
-    borderWidth: 3,
-    borderColor: 'white',
-    borderRadius: 100,
-    borderStyle: 'dashed',
-    backgroundColor: 'transparent',
-  },
-  instructionText: {
-    color: 'white',
-    fontSize: 16,
-    fontWeight: '500',
-    textAlign: 'center',
-    marginTop: 20,
-    backgroundColor: 'rgba(0,0,0,0.7)',
-    paddingHorizontal: 16,
-    paddingVertical: 8,
-    borderRadius: 20,
-  },
-  // Verification flow styles
-  progressContainer: {
-    position: 'absolute',
-    top: 20,
-    left: 20,
-    right: 20,
-    height: 4,
-    backgroundColor: 'rgba(255,255,255,0.3)',
-    borderRadius: 2,
-    overflow: 'hidden',
-  },
-  progressBar: {
-    height: '100%',
-    borderRadius: 2,
-  },
-  stepIndicator: {
-    color: 'white',
-    fontSize: 14,
-    fontWeight: '400',
-    textAlign: 'center',
-    marginTop: 8,
-    backgroundColor: 'rgba(0,0,0,0.5)',
-    paddingHorizontal: 12,
-    paddingVertical: 4,
-    borderRadius: 12,
-    alignSelf: 'center',
-  },
-  statusContainer: {
-    position: 'absolute',
-    bottom: 40,
-    left: 20,
-    right: 20,
-    padding: 20,
-    borderRadius: 12,
-    alignItems: 'center',
-  },
-  statusContainerError: {
-    backgroundColor: '#ff4444',
-  },
-  statusText: {
-    color: 'white',
-    fontSize: 18,
-    fontWeight: '600',
-    textAlign: 'center',
-    marginBottom: 8,
-  },
-  retryButton: {
-    marginTop: 12,
-    minWidth: 120,
-  },
-});

package/src/components/biometrics/useFaceVerification.ts

@@ -1,120 +0,0 @@
-import {
-  useFrameProcessor,
-  VisionCameraProxy,
-} from 'react-native-vision-camera';
-
-export interface FaceVerificationResult {
-  faceDetected: boolean;
-  isSmiling?: boolean;
-  isBlinking?: boolean;
-  leftEyeClosed?: boolean;
-  rightEyeClosed?: boolean;
-  headPose?: {
-    yaw: number; // Left-right movement (-90 to 90)
-    pitch: number; // Up-down movement (-90 to 90)
-    roll: number; // Tilt movement (-180 to 180)
-  };
-  boundingBox?: {
-    x?: number;
-    y?: number;
-    width?: number;
-    height?: number;
-    left?: number;
-    top?: number;
-    right?: number;
-    bottom?: number;
-  };
-  smileProbability?: number;
-  leftEyeOpenProbability?: number;
-  rightEyeOpenProbability?: number;
-  trackingId?: number;
-  error?: string;
-}
-
-// Note: For production use, you would typically use shared values or state management
-// to communicate results from the worklet back to the React component.
-// This simplified version just logs results for debugging.
-
-// Initialize the plugin
-const plugin = VisionCameraProxy.initFrameProcessorPlugin('detectFaces', {});
-
-export const useFaceVerification = () => {
-  const frameProcessor = useFrameProcessor((frame) => {
-    'worklet';
-
-    try {
-      if (plugin == null) {
-        console.error('Failed to load Frame Processor Plugin "detectFaces"!');
-        return null;
-      }
-
-      const result = plugin.call(frame, {}) as any;
-
-      // For debugging - this works in worklets
-      if (result && result.faceDetected) {
-        console.log('Face detected:', result);
-      }
-
-      return result;
-    } catch (error) {
-      console.error('Face verification error:', error);
-      return {
-        faceDetected: false,
-        error: error instanceof Error ? error.message : 'Unknown error',
-      };
-    }
-  }, []);
-
-  return frameProcessor;
-};
-
-// Utility functions for interpreting results
-export const FaceVerificationUtils = {
-  // Check if head is turned left (yaw > 20 degrees)
-  isHeadTurnedLeft: (result: FaceVerificationResult): boolean => {
-    return result.headPose?.yaw ? result.headPose.yaw > 20 : false;
-  },
-
-  // Check if head is turned right (yaw < -20 degrees)
-  isHeadTurnedRight: (result: FaceVerificationResult): boolean => {
-    return result.headPose?.yaw ? result.headPose.yaw < -20 : false;
-  },
-
-  // Check if head is tilted up (pitch > 10 degrees)
-  isHeadTiltedUp: (result: FaceVerificationResult): boolean => {
-    return result.headPose?.pitch ? result.headPose.pitch > 10 : false;
-  },
-
-  // Check if head is tilted down (pitch < -10 degrees)
-  isHeadTiltedDown: (result: FaceVerificationResult): boolean => {
-    return result.headPose?.pitch ? result.headPose.pitch < -10 : false;
-  },
-
-  // Check if face is centered (within ±10 degrees)
-  isFaceCentered: (result: FaceVerificationResult): boolean => {
-    if (!result.headPose) return false;
-    const { yaw, pitch } = result.headPose;
-    return Math.abs(yaw) <= 10 && Math.abs(pitch) <= 10;
-  },
-
-  // Check if smile is confident (high probability)
-  isConfidentSmile: (result: FaceVerificationResult): boolean => {
-    return result.smileProbability
-      ? result.smileProbability > 0.8
-      : result.isSmiling || false;
-  },
-
-  // Check if both eyes are confidently closed
-  isConfidentBlink: (result: FaceVerificationResult): boolean => {
-    if (
-      result.leftEyeOpenProbability !== undefined &&
-      result.rightEyeOpenProbability !== undefined
-    ) {
-      return (
-        result.leftEyeOpenProbability < 0.2 &&
-        result.rightEyeOpenProbability < 0.2
-      );
-    }
-    return result.isBlinking || false;
-  },
-};