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

package/lib/module/components/biometrics/FaceVerification.js

@@ -1,158 +1,116 @@
 import React, { useState, useEffect } from 'react';
-import { View, Modal, Dimensions, StyleSheet, TouchableOpacity, Image, Text, ActivityIndicator } from 'react-native';
-import { LivenessDetection } from './LivenessDetection';
-import { OmnipayLivenessCameraView } from './OmnipayLivenessCameraView';
-import { CameraPermissionManager, PermissionResult } from './PermissionManager';
-import { LivenessChallenge } from './types';
+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';
 const FaceVerification = ({
   onClose,
   onSuccess,
-  primaryColor,
-  config
+  primaryColor
 }) => {
-  const [state, setState] = useState('initializing');
-  const [error, setError] = useState(null);
-  const [isSupported, setIsSupported] = useState(false);
-  const [currentChallenge, setCurrentChallenge] = useState(null);
-  const [challengeProgress, setChallengeProgress] = useState('');
-  useEffect(() => {
-    checkSupport();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-  const checkSupport = async () => {
-    try {
-      console.log('🔍 Starting liveness detection initialization...');
+  const device = useCameraDevice('front');
+  const {
+    hasPermission,
+    requestPermission
+  } = useCameraPermission();
+  const [isRequestingPermission, setIsRequestingPermission] = useState(false);
 
-      // 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');
+  // Face verification flow
+  const {
+    state: flowState,
+    resetFlow,
+    isCompleted,
+    isFailed
+  } = useFaceVerificationFlow();
 
-      // 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');
-    }
-  };
-  const startDetection = async () => {
-    if (!isSupported) {
-      return;
+  // Frame processor
+  const frameProcessor = useFaceVerification();
+
+  // Handle completion
+  useEffect(() => {
+    if (isCompleted) {
+      setTimeout(() => {
+        onSuccess();
+      }, 1000); // Show success message briefly
     }
-    setState('starting');
-    setError(null);
+  }, [isCompleted, onSuccess]);
+  const handleRequestPermission = async () => {
+    setIsRequestingPermission(true);
     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 => {
-    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';
+      await requestPermission();
+    } catch (error) {
+      console.error('Error requesting camera permission:', error);
+    } finally {
+      setIsRequestingPermission(false);
     }
   };
-  const getStateMessage = () => {
-    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 getStateColor = () => {
-    switch (state) {
-      case 'completed':
-        return '#4CAF50';
-      case 'failed':
-        return '#F44336';
-      case 'running':
-        return primaryColor;
-      default:
-        return '#666';
-    }
-  };
-  const handleRetry = () => {
-    setState('initializing');
-    setError(null);
-    setCurrentChallenge(null);
-    setChallengeProgress('');
-    checkSupport();
+  const renderPermissionRequest = () => /*#__PURE__*/React.createElement(View, {
+    style: styles.permissionContainer
+  }, /*#__PURE__*/React.createElement(View, {
+    style: styles.permissionIconContainer
+  }, /*#__PURE__*/React.createElement(Text, {
+    style: styles.permissionIcon
+  }, "\uD83D\uDCF7")), /*#__PURE__*/React.createElement(Text, {
+    style: styles.permissionTitle
+  }, "Camera Permission Required"), /*#__PURE__*/React.createElement(Text, {
+    style: styles.permissionDescription
+  }, "To verify your identity, we need access to your camera. This allows us to capture your face for secure verification."), /*#__PURE__*/React.createElement(Button, {
+    title: "Allow Camera Access",
+    onPress: handleRequestPermission,
+    backgroundColor: primaryColor,
+    loading: isRequestingPermission
+  }));
+  const renderNoDevice = () => /*#__PURE__*/React.createElement(View, {
+    style: styles.errorContainer
+  }, /*#__PURE__*/React.createElement(Text, {
+    style: styles.errorTitle
+  }, "Camera Not Available"), /*#__PURE__*/React.createElement(Text, {
+    style: styles.errorSubtitle
+  }, "No front camera detected on this device. Face verification requires a front-facing camera."));
+  const renderCamera = () => {
+    if (!device) return null;
+    return /*#__PURE__*/React.createElement(View, {
+      style: styles.cameraContainer
+    }, /*#__PURE__*/React.createElement(Camera, {
+      device: device,
+      style: styles.camera,
+      isActive: true,
+      frameProcessor: frameProcessor
+    }), /*#__PURE__*/React.createElement(View, {
+      style: styles.cameraOverlay
+    }, /*#__PURE__*/React.createElement(View, {
+      style: styles.faceFrame
+    }), /*#__PURE__*/React.createElement(View, {
+      style: styles.progressContainer
+    }, /*#__PURE__*/React.createElement(View, {
+      style: [styles.progressBar, {
+        width: `${flowState.progress}%`,
+        backgroundColor: primaryColor
+      }]
+    })), /*#__PURE__*/React.createElement(Text, {
+      style: styles.instructionText
+    }, flowState.instruction), /*#__PURE__*/React.createElement(Text, {
+      style: styles.stepIndicator
+    }, "Step ", flowState.completedSteps.length + 1, " of 5"), isCompleted && /*#__PURE__*/React.createElement(View, {
+      style: [styles.statusContainer, {
+        backgroundColor: primaryColor
+      }]
+    }, /*#__PURE__*/React.createElement(Text, {
+      style: styles.statusText
+    }, "\u2713 Verification Complete!")), isFailed && /*#__PURE__*/React.createElement(View, {
+      style: [styles.statusContainer, styles.statusContainerError]
+    }, /*#__PURE__*/React.createElement(Text, {
+      style: styles.statusText
+    }, "\u2717 Verification Failed"), /*#__PURE__*/React.createElement(Button, {
+      title: "Try Again",
+      onPress: resetFlow,
+      backgroundColor: "white",
+      textColor: "#ff4444",
+      style: styles.retryButton
+    }))));
   };
-  const showRetryButton = state === 'failed' && error !== 'Camera permission is blocked. Please enable it in device settings.';
+  console.log(onSuccess, primaryColor);
   return /*#__PURE__*/React.createElement(Modal, {
     visible: true,
     transparent: true,
@@ -161,7 +119,7 @@ const FaceVerification = ({
   }, /*#__PURE__*/React.createElement(TouchableOpacity, {
     style: styles.backdrop,
     activeOpacity: 1,
-    onPress: () => {}
+    onPress: onClose
   }, /*#__PURE__*/React.createElement(View, {
     style: [styles.container]
   }, /*#__PURE__*/React.createElement(TouchableOpacity, {
@@ -172,178 +130,243 @@ const FaceVerification = ({
     style: styles.closeIcon
   })), /*#__PURE__*/React.createElement(View, {
     style: styles.contentContainer
-  }, /*#__PURE__*/React.createElement(Text, {
-    style: styles.title
-  }, "Face Verification"), /*#__PURE__*/React.createElement(View, {
-    style: styles.cameraContainer
-  }, state === 'running' && isSupported ? /*#__PURE__*/React.createElement(OmnipayLivenessCameraView, {
-    style: styles.camera
-  }) : /*#__PURE__*/React.createElement(View, {
-    style: [styles.camera, styles.cameraPlaceholder]
-  }, state === 'initializing' || state === 'starting' ? /*#__PURE__*/React.createElement(ActivityIndicator, {
-    size: "large",
-    color: primaryColor
-  }) : state === 'completed' ? /*#__PURE__*/React.createElement(View, {
-    style: styles.successIcon
-  }, /*#__PURE__*/React.createElement(Text, {
-    style: styles.successText
-  }, "\u2713")) : /*#__PURE__*/React.createElement(View, {
-    style: styles.errorIcon
-  }, /*#__PURE__*/React.createElement(Text, {
-    style: styles.errorText
-  }, "!"))), /*#__PURE__*/React.createElement(View, {
-    style: styles.overlay
-  }, /*#__PURE__*/React.createElement(Text, {
-    style: [styles.instruction, {
-      color: getStateColor()
-    }]
-  }, getStateMessage()))), state === 'running' && currentChallenge && /*#__PURE__*/React.createElement(View, {
-    style: styles.progressContainer
-  }, /*#__PURE__*/React.createElement(Text, {
-    style: styles.challengeText
-  }, getChallengeInstruction(currentChallenge))), /*#__PURE__*/React.createElement(View, {
-    style: styles.buttonContainer
-  }, showRetryButton && /*#__PURE__*/React.createElement(TouchableOpacity, {
-    style: [styles.retryButton, {
-      backgroundColor: primaryColor
-    }],
-    onPress: handleRetry
-  }, /*#__PURE__*/React.createElement(Text, {
-    style: styles.retryButtonText
-  }, "Try Again")))))));
+  }, !hasPermission && renderPermissionRequest(), hasPermission && !device && renderNoDevice(), hasPermission && device && renderCamera()))));
 };
-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,
+    width: '100%',
+    height: '100%'
+  },
+  webview: {
     flex: 1,
-    backgroundColor: 'rgba(0, 0, 0, 0.8)',
+    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',
-    alignItems: '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
+  },
+  testContent: {
+    paddingTop: 30,
+    paddingLeft: 16
   },
-  title: {
-    fontSize: 24,
-    fontWeight: 'bold',
-    color: '#333',
+  testTwoContent: {
+    paddingTop: 10,
+    paddingLeft: 16
+  },
+  errorSubtitle: {
+    textAlign: 'center',
+    fontSize: 14,
+    color: '#5e7079',
     marginBottom: 20,
-    textAlign: 'center'
+    paddingHorizontal: 8,
+    marginTop: 14
   },
-  cameraContainer: {
-    width: screenWidth * 0.7,
-    height: screenWidth * 0.9,
-    borderRadius: 12,
-    overflow: 'hidden',
-    backgroundColor: '#f0f0f0',
-    position: 'relative',
-    marginBottom: 20
+  errorContainer: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    width: Dimensions.get('window').width,
+    height: Dimensions.get('window').height,
+    zIndex: 2,
+    backgroundColor: 'white'
   },
   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,
-    alignItems: 'center'
+  permissionIconContainer: {
+    width: 80,
+    height: 80,
+    borderRadius: 40,
+    backgroundColor: '#f0f0f0',
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginBottom: 24
   },
-  instruction: {
-    fontSize: 16,
+  permissionIcon: {
+    fontSize: 40
+  },
+  permissionTitle: {
+    fontSize: 20,
     fontWeight: '600',
+    color: '#1a1a1a',
     textAlign: 'center',
-    color: 'white'
+    marginBottom: 12
   },
-  progressContainer: {
-    marginBottom: 20,
-    alignItems: 'center'
+  permissionDescription: {
+    fontSize: 16,
+    color: '#666',
+    textAlign: 'center',
+    lineHeight: 22,
+    marginBottom: 32
   },
-  challengeText: {
+  // Error styles
+  errorTitle: {
     fontSize: 18,
     fontWeight: '600',
-    color: '#333',
-    textAlign: 'center'
+    color: '#1a1a1a',
+    textAlign: 'center',
+    marginBottom: 8
   },
-  buttonContainer: {
-    flexDirection: 'row',
-    justifyContent: 'center',
-    gap: 15
+  // Camera styles
+  cameraContainer: {
+    flex: 1,
+    position: 'relative',
+    marginTop: 60
   },
-  retryButton: {
-    paddingHorizontal: 30,
-    paddingVertical: 12,
-    borderRadius: 8,
+  cameraOverlay: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    justifyContent: 'center',
     alignItems: 'center'
   },
-  retryButtonText: {
+  faceFrame: {
+    width: 200,
+    height: 250,
+    borderWidth: 3,
+    borderColor: 'white',
+    borderRadius: 100,
+    borderStyle: 'dashed',
+    backgroundColor: 'transparent'
+  },
+  instructionText: {
     color: 'white',
     fontSize: 16,
-    fontWeight: '600'
+    fontWeight: '500',
+    textAlign: 'center',
+    marginTop: 20,
+    backgroundColor: 'rgba(0,0,0,0.7)',
+    paddingHorizontal: 16,
+    paddingVertical: 8,
+    borderRadius: 20
   },
-  successIcon: {
-    width: 60,
-    height: 60,
-    borderRadius: 30,
-    backgroundColor: '#4CAF50',
-    justifyContent: 'center',
-    alignItems: 'center'
+  // 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'
   },
-  successText: {
-    fontSize: 30,
+  progressBar: {
+    height: '100%',
+    borderRadius: 2
+  },
+  stepIndicator: {
     color: 'white',
-    fontWeight: 'bold'
+    fontSize: 14,
+    fontWeight: '400',
+    textAlign: 'center',
+    marginTop: 8,
+    backgroundColor: 'rgba(0,0,0,0.5)',
+    paddingHorizontal: 12,
+    paddingVertical: 4,
+    borderRadius: 12,
+    alignSelf: 'center'
   },
-  errorIcon: {
-    width: 60,
-    height: 60,
-    borderRadius: 30,
-    backgroundColor: '#F44336',
-    justifyContent: 'center',
+  statusContainer: {
+    position: 'absolute',
+    bottom: 40,
+    left: 20,
+    right: 20,
+    padding: 20,
+    borderRadius: 12,
     alignItems: 'center'
   },
-  errorText: {
-    fontSize: 30,
+  statusContainerError: {
+    backgroundColor: '#ff4444'
+  },
+  statusText: {
     color: 'white',
-    fontWeight: 'bold'
+    fontSize: 18,
+    fontWeight: '600',
+    textAlign: 'center',
+    marginBottom: 8
+  },
+  retryButton: {
+    marginTop: 12,
+    minWidth: 120
   }
 });
-export default FaceVerification;
 //# sourceMappingURL=FaceVerification.js.map