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

package/src/components/biometrics/FaceVerification.tsx

@@ -3,209 +3,161 @@ 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';
+import Button from '../Button';
+import { useFaceVerification } from './useFaceVerification';
+import { useFaceVerificationFlow } from './useFaceVerificationFlow';
 
 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>('');
+  const device = useCameraDevice('front');
+  const { hasPermission, requestPermission } = useCameraPermission();
+  const [isRequestingPermission, setIsRequestingPermission] = useState(false);
 
-  useEffect(() => {
-    checkSupport();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  const checkSupport = async () => {
-    try {
-      console.log('🔍 Starting liveness detection initialization...');
+  // Face verification flow
+  const {
+    state: flowState,
+    resetFlow,
+    isCompleted,
+    isFailed,
+  } = useFaceVerificationFlow();
 
-      // Step 1: Request camera permission first
-      console.log('📹 Requesting camera permission...');
-      const permissionResponse =
-        await CameraPermissionManager.requestCameraPermission();
+  // Frame processor
+  const frameProcessor = useFaceVerification();
 
-      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');
+  // Handle completion
+  useEffect(() => {
+    if (isCompleted) {
+      setTimeout(() => {
+        onSuccess();
+      }, 1000); // Show success message briefly
     }
-  };
+  }, [isCompleted, onSuccess]);
 
-  const startDetection = async () => {
-    if (!isSupported) {
-      return;
+  const handleRequestPermission = async () => {
+    setIsRequestingPermission(true);
+    try {
+      await requestPermission();
+    } catch (error) {
+      console.error('Error requesting camera permission:', error);
+    } finally {
+      setIsRequestingPermission(false);
     }
+  };
 
-    setState('starting');
-    setError(null);
+  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>
+  );
 
-    try {
-      // Permission already checked in checkSupport(), proceed with detection
-      console.log('🚀 Starting liveness detection with config...');
+  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 livenessConfig = {
-        ...LivenessDetection.getDefaultConfig(),
-        ...config,
-      };
+  const renderCamera = () => {
+    if (!device) return null;
 
-      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');
-        },
-      });
+    return (
+      <View style={styles.cameraContainer}>
+        <Camera
+          device={device}
+          style={styles.camera}
+          isActive={true}
+          frameProcessor={frameProcessor}
+        />
+        <View style={styles.cameraOverlay}>
+          <View style={styles.faceFrame} />
 
-      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');
-    }
-  };
+          {/* Progress indicator */}
+          <View style={styles.progressContainer}>
+            <View
+              style={[
+                styles.progressBar,
+                {
+                  width: `${flowState.progress}%`,
+                  backgroundColor: primaryColor,
+                },
+              ]}
+            />
+          </View>
 
-  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';
-    }
-  };
+          {/* Current instruction */}
+          <Text style={styles.instructionText}>{flowState.instruction}</Text>
 
-  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...';
-    }
-  };
+          {/* Step indicator */}
+          <Text style={styles.stepIndicator}>
+            Step {flowState.completedSteps.length + 1} of 5
+          </Text>
 
-  const getStateColor = (): string => {
-    switch (state) {
-      case 'completed':
-        return '#4CAF50';
-      case 'failed':
-        return '#F44336';
-      case 'running':
-        return primaryColor;
-      default:
-        return '#666';
-    }
-  };
+          {/* Success/Failure messages */}
+          {isCompleted && (
+            <View
+              style={[
+                styles.statusContainer,
+                { backgroundColor: primaryColor },
+              ]}
+            >
+              <Text style={styles.statusText}>✓ Verification Complete!</Text>
+            </View>
+          )}
 
-  const handleRetry = () => {
-    setState('initializing');
-    setError(null);
-    setCurrentChallenge(null);
-    setChallengeProgress('');
-    checkSupport();
+          {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>
+    );
   };
 
-  const showRetryButton =
-    state === 'failed' &&
-    error !==
-      'Camera permission is blocked. Please enable it in device settings.';
+  console.log(onSuccess, primaryColor);
 
   return (
     <Modal
@@ -217,7 +169,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 +178,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 +189,241 @@ 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,
   },
-  camera: {
+  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: '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,
+  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',
+    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',
+  },
+  progressBar: {
+    height: '100%',
+    borderRadius: 2,
   },
-  successText: {
-    fontSize: 30,
+  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;