omnipay-reactnative-sdk 1.2.2-beta.9 → 1.2.3-beta.0

package/src/components/biometrics/FaceVerification.tsx

@@ -1,211 +1,98 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState } from 'react';
 import {
   View,
   Modal,
   Dimensions,
+  Platform,
   StyleSheet,
   TouchableOpacity,
   Image,
   Text,
   ActivityIndicator,
 } from 'react-native';
-import { LivenessDetection } from './LivenessDetection';
-import { OmnipayLivenessCameraView } from './OmnipayLivenessCameraView';
-import { CameraPermissionManager, PermissionResult } from './PermissionManager';
-import { LivenessChallenge, type LivenessConfig } from './types';
+import {
+  Camera,
+  useCameraDevice,
+  useCameraPermission,
+} from 'react-native-vision-camera';
 
 type FaceVerificationProps = {
   onClose: () => void;
-  onSuccess: (result?: any) => void;
+  onSuccess: () => void;
   primaryColor: string;
-  config?: Partial<LivenessConfig>;
 };
 
-type DetectionState =
-  | 'initializing'
-  | 'starting'
-  | 'running'
-  | 'completed'
-  | 'failed';
-
 const FaceVerification: React.FC<FaceVerificationProps> = ({
   onClose,
   onSuccess,
   primaryColor,
-  config,
 }) => {
-  const [state, setState] = useState<DetectionState>('initializing');
-  const [error, setError] = useState<string | null>(null);
-  const [isSupported, setIsSupported] = useState<boolean>(false);
-  const [currentChallenge, setCurrentChallenge] =
-    useState<LivenessChallenge | null>(null);
-  const [challengeProgress, setChallengeProgress] = useState<string>('');
-
-  useEffect(() => {
-    checkSupport();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  const device = useCameraDevice('front');
+  const { hasPermission, requestPermission } = useCameraPermission();
+  const [isRequestingPermission, setIsRequestingPermission] = useState(false);
 
-  const checkSupport = async () => {
+  const handleRequestPermission = async () => {
+    setIsRequestingPermission(true);
     try {
-      console.log('🔍 Starting liveness detection initialization...');
-
-      // Step 1: Request camera permission first
-      console.log('📹 Requesting camera permission...');
-      const permissionResponse =
-        await CameraPermissionManager.requestCameraPermission();
-
-      if (permissionResponse.result !== PermissionResult.GRANTED) {
-        console.log('❌ Camera permission denied:', permissionResponse.result);
-        setState('failed');
-        setError(
-          permissionResponse.result === PermissionResult.BLOCKED
-            ? 'Camera permission is blocked. Please enable it in device settings.'
-            : 'Camera permission is required for face verification.'
-        );
-        return;
-      }
-
-      console.log('✅ Camera permission granted');
-
-      // Step 2: Check device support (hardware/framework capability)
-      console.log('🔍 Checking device capabilities...');
-      const supported = await LivenessDetection.isSupported();
-      console.log('📱 Device support result:', supported);
-
-      setIsSupported(supported);
-      if (supported) {
-        console.log('✅ Device supports liveness detection, starting...');
-        await startDetection();
-      } else {
-        console.log('❌ Device does not support liveness detection');
-        setState('failed');
-        setError('Liveness detection is not supported on this device');
-      }
-    } catch (err) {
-      console.error('💥 Error during initialization:', err);
-      setState('failed');
-      setError('Failed to initialize liveness detection');
+      await requestPermission();
+    } catch (error) {
+      console.error('Error requesting camera permission:', error);
+    } finally {
+      setIsRequestingPermission(false);
     }
   };
 
-  const startDetection = async () => {
-    if (!isSupported) {
-      return;
-    }
-
-    setState('starting');
-    setError(null);
-
-    try {
-      // Permission already checked in checkSupport(), proceed with detection
-      console.log('🚀 Starting liveness detection with config...');
-
-      const livenessConfig = {
-        ...LivenessDetection.getDefaultConfig(),
-        ...config,
-      };
-
-      const result = await LivenessDetection.startDetection(livenessConfig, {
-        onChallengeStart: (challenge) => {
-          setCurrentChallenge(challenge);
-          setState('running');
-          setChallengeProgress(getChallengeInstruction(challenge));
-        },
-        onChallengeSuccess: (challenge, _challengeResult) => {
-          setChallengeProgress(
-            `✓ ${getChallengeInstruction(challenge)} completed`
-          );
-        },
-        onChallengeFailure: (challenge, reason) => {
-          setError(`Failed: ${reason}, ${challenge}`);
-        },
-        onAllChallengesComplete: () => {
-          setChallengeProgress(
-            'All challenges completed! Taking final photo...'
-          );
-        },
-        onScreenshotCaptured: (_screenshot) => {
-          // Screenshot captured, detection will complete soon
-        },
-        onDetectionFailed: (reason) => {
-          setError(reason);
-          setState('failed');
-        },
-      });
-
-      if (result.success) {
-        setState('completed');
-        setTimeout(() => {
-          onSuccess(result);
-        }, 1000); // Brief delay to show success state
-      } else {
-        setState('failed');
-        setError(result.failureReason || 'Face verification failed');
-      }
-    } catch (err) {
-      setState('failed');
-      setError(err instanceof Error ? err.message : 'Unknown error occurred');
-    }
-  };
-
-  const getChallengeInstruction = (challenge: LivenessChallenge): string => {
-    switch (challenge) {
-      case LivenessChallenge.SMILE:
-        return 'Please smile';
-      case LivenessChallenge.BLINK:
-        return 'Please blink';
-      case LivenessChallenge.TURN_LEFT:
-        return 'Please turn your head left';
-      case LivenessChallenge.TURN_RIGHT:
-        return 'Please turn your head right';
-      default:
-        return 'Follow the instruction';
-    }
-  };
+  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>
+      <TouchableOpacity
+        style={[styles.permissionButton, { backgroundColor: primaryColor }]}
+        onPress={handleRequestPermission}
+        disabled={isRequestingPermission}
+      >
+        {isRequestingPermission ? (
+          <ActivityIndicator color="white" size="small" />
+        ) : (
+          <Text style={styles.permissionButtonText}>Allow Camera Access</Text>
+        )}
+      </TouchableOpacity>
+    </View>
+  );
 
-  const getStateMessage = (): string => {
-    switch (state) {
-      case 'initializing':
-        return 'Initializing camera...';
-      case 'starting':
-        return 'Starting face verification...';
-      case 'running':
-        return challengeProgress || 'Look at the camera';
-      case 'completed':
-        return 'Face verification completed!';
-      case 'failed':
-        return error || 'Face verification failed';
-      default:
-        return 'Please wait...';
-    }
-  };
+  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 getStateColor = (): string => {
-    switch (state) {
-      case 'completed':
-        return '#4CAF50';
-      case 'failed':
-        return '#F44336';
-      case 'running':
-        return primaryColor;
-      default:
-        return '#666';
-    }
-  };
+  const renderCamera = () => {
+    if (!device) return null;
 
-  const handleRetry = () => {
-    setState('initializing');
-    setError(null);
-    setCurrentChallenge(null);
-    setChallengeProgress('');
-    checkSupport();
+    return (
+      <View style={styles.cameraContainer}>
+        <Camera device={device} style={styles.camera} isActive={true} />
+        <View style={styles.cameraOverlay}>
+          <View style={styles.faceFrame} />
+          <Text style={styles.instructionText}>
+            Position your face within the frame
+          </Text>
+        </View>
+      </View>
+    );
   };
 
-  const showRetryButton =
-    state === 'failed' &&
-    error !==
-      'Camera permission is blocked. Please enable it in device settings.';
+  console.log(onSuccess, primaryColor);
 
   return (
     <Modal
@@ -217,7 +104,7 @@ const FaceVerification: React.FC<FaceVerificationProps> = ({
       <TouchableOpacity
         style={styles.backdrop}
         activeOpacity={1}
-        onPress={() => {}}
+        onPress={onClose}
       >
         <View style={[styles.container]}>
           <TouchableOpacity style={styles.close} onPress={onClose}>
@@ -226,61 +113,10 @@ const FaceVerification: React.FC<FaceVerificationProps> = ({
               style={styles.closeIcon}
             />
           </TouchableOpacity>
-
           <View style={styles.contentContainer}>
-            <Text style={styles.title}>Face Verification</Text>
-
-            {/* Camera Preview */}
-            <View style={styles.cameraContainer}>
-              {state === 'running' && isSupported ? (
-                <OmnipayLivenessCameraView style={styles.camera} />
-              ) : (
-                <View style={[styles.camera, styles.cameraPlaceholder]}>
-                  {state === 'initializing' || state === 'starting' ? (
-                    <ActivityIndicator size="large" color={primaryColor} />
-                  ) : state === 'completed' ? (
-                    <View style={styles.successIcon}>
-                      <Text style={styles.successText}>✓</Text>
-                    </View>
-                  ) : (
-                    <View style={styles.errorIcon}>
-                      <Text style={styles.errorText}>!</Text>
-                    </View>
-                  )}
-                </View>
-              )}
-
-              {/* Overlay with instructions */}
-              <View style={styles.overlay}>
-                <Text style={[styles.instruction, { color: getStateColor() }]}>
-                  {getStateMessage()}
-                </Text>
-              </View>
-            </View>
-
-            {/* Progress indicator for challenges */}
-            {state === 'running' && currentChallenge && (
-              <View style={styles.progressContainer}>
-                <Text style={styles.challengeText}>
-                  {getChallengeInstruction(currentChallenge)}
-                </Text>
-              </View>
-            )}
-
-            {/* Action buttons */}
-            <View style={styles.buttonContainer}>
-              {showRetryButton && (
-                <TouchableOpacity
-                  style={[
-                    styles.retryButton,
-                    { backgroundColor: primaryColor },
-                  ]}
-                  onPress={handleRetry}
-                >
-                  <Text style={styles.retryButtonText}>Try Again</Text>
-                </TouchableOpacity>
-              )}
-            </View>
+            {!hasPermission && renderPermissionRequest()}
+            {hasPermission && !device && renderNoDevice()}
+            {hasPermission && device && renderCamera()}
           </View>
         </View>
       </TouchableOpacity>
@@ -288,136 +124,215 @@ const FaceVerification: React.FC<FaceVerificationProps> = ({
   );
 };
 
-const { width: screenWidth, height: screenHeight } = Dimensions.get('window');
+export default FaceVerification;
 
 const styles = StyleSheet.create({
-  modal: {
-    margin: 0,
+  hide: {
+    display: 'none',
   },
-  backdrop: {
+  full: {
     flex: 1,
-    backgroundColor: 'rgba(0, 0, 0, 0.8)',
-    justifyContent: 'center',
+    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: {
-    width: screenWidth * 0.9,
-    maxHeight: screenHeight * 0.8,
     backgroundColor: 'white',
-    borderRadius: 16,
-    padding: 20,
-    alignItems: 'center',
+    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: 15,
-    right: 15,
-    zIndex: 10,
-    padding: 5,
+    top: 10,
+    right: 10,
+    backgroundColor: 'white',
+    height: 24,
+    width: 24,
+    borderRadius: 1000,
+    alignItems: 'center',
+    justifyContent: 'center',
+    zIndex: 2,
   },
   closeIcon: {
-    width: 20,
-    height: 20,
-    tintColor: '#666',
+    height: 12,
+    width: 12,
   },
   contentContainer: {
-    width: '100%',
-    alignItems: 'center',
-    paddingTop: 20,
+    height: '100%',
+    position: 'relative',
+    borderTopRightRadius: 20,
+    borderTopLeftRadius: 20,
+    padding: 16,
   },
-  title: {
-    fontSize: 24,
-    fontWeight: 'bold',
-    color: '#333',
-    marginBottom: 20,
-    textAlign: 'center',
+  testContent: {
+    paddingTop: 30,
+    paddingLeft: 16,
   },
-  cameraContainer: {
-    width: screenWidth * 0.7,
-    height: screenWidth * 0.9,
-    borderRadius: 12,
-    overflow: 'hidden',
-    backgroundColor: '#f0f0f0',
-    position: 'relative',
+  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',
+  },
+  retryButton: {
+    minWidth: 160,
+    marginHorizontal: 'auto',
+  },
+  button: {
+    borderRadius: 6,
+    paddingHorizontal: 12,
+    paddingVertical: 14,
+    borderWidth: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
   },
+  buttonText: { color: 'white', fontSize: 16, paddingHorizontal: 30 },
   camera: {
     flex: 1,
     width: '100%',
-    height: '100%',
+    height: 400,
   },
-  cameraPlaceholder: {
+  // Permission request styles
+  permissionContainer: {
+    flex: 1,
     justifyContent: 'center',
     alignItems: 'center',
-    backgroundColor: '#f5f5f5',
+    paddingHorizontal: 24,
+    paddingVertical: 40,
   },
-  overlay: {
-    position: 'absolute',
-    bottom: 0,
-    left: 0,
-    right: 0,
-    backgroundColor: 'rgba(0, 0, 0, 0.7)',
-    padding: 15,
+  permissionIconContainer: {
+    width: 80,
+    height: 80,
+    borderRadius: 40,
+    backgroundColor: '#f0f0f0',
+    justifyContent: 'center',
     alignItems: 'center',
+    marginBottom: 24,
   },
-  instruction: {
-    fontSize: 16,
-    fontWeight: '600',
-    textAlign: 'center',
-    color: 'white',
-  },
-  progressContainer: {
-    marginBottom: 20,
-    alignItems: 'center',
+  permissionIcon: {
+    fontSize: 40,
   },
-  challengeText: {
-    fontSize: 18,
+  permissionTitle: {
+    fontSize: 20,
     fontWeight: '600',
-    color: '#333',
+    color: '#1a1a1a',
     textAlign: 'center',
+    marginBottom: 12,
   },
-  buttonContainer: {
-    flexDirection: 'row',
-    justifyContent: 'center',
-    gap: 15,
+  permissionDescription: {
+    fontSize: 16,
+    color: '#666',
+    textAlign: 'center',
+    lineHeight: 22,
+    marginBottom: 32,
   },
-  retryButton: {
-    paddingHorizontal: 30,
-    paddingVertical: 12,
+  permissionButton: {
+    paddingHorizontal: 32,
+    paddingVertical: 16,
     borderRadius: 8,
+    minWidth: 200,
     alignItems: 'center',
+    justifyContent: 'center',
   },
-  retryButtonText: {
+  permissionButtonText: {
     color: 'white',
     fontSize: 16,
     fontWeight: '600',
   },
-  successIcon: {
-    width: 60,
-    height: 60,
-    borderRadius: 30,
-    backgroundColor: '#4CAF50',
-    justifyContent: 'center',
-    alignItems: 'center',
+  // Error styles
+  errorTitle: {
+    fontSize: 18,
+    fontWeight: '600',
+    color: '#1a1a1a',
+    textAlign: 'center',
+    marginBottom: 8,
   },
-  successText: {
-    fontSize: 30,
-    color: 'white',
-    fontWeight: 'bold',
+  // Camera styles
+  cameraContainer: {
+    flex: 1,
+    position: 'relative',
   },
-  errorIcon: {
-    width: 60,
-    height: 60,
-    borderRadius: 30,
-    backgroundColor: '#F44336',
+  cameraOverlay: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
     justifyContent: 'center',
     alignItems: 'center',
   },
-  errorText: {
-    fontSize: 30,
+  faceFrame: {
+    width: 200,
+    height: 250,
+    borderWidth: 3,
+    borderColor: 'white',
+    borderRadius: 100,
+    borderStyle: 'dashed',
+    backgroundColor: 'transparent',
+  },
+  instructionText: {
     color: 'white',
-    fontWeight: 'bold',
+    fontSize: 16,
+    fontWeight: '500',
+    textAlign: 'center',
+    marginTop: 20,
+    backgroundColor: 'rgba(0,0,0,0.5)',
+    paddingHorizontal: 16,
+    paddingVertical: 8,
+    borderRadius: 20,
   },
 });
-
-export default FaceVerification;

package/src/index.tsx

@@ -2,11 +2,4 @@ import Omnipay from './components/OmnipayView';
 
 export { OmnipayProvider } from './components/OmnipayProvider';
 export { useOmnipay } from './hooks/useOmnipay';
-
-// Biometric components and utilities
-export { FaceVerification, LivenessDetection } from './components/biometrics';
-
-// Biometric types
-export * from './components/biometrics/types';
-
 export default Omnipay;