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

package/src/components/biometrics/FaceVerification.tsx

@@ -0,0 +1,484 @@
+import React, { useState, useEffect, useCallback } from 'react';
+import {
+  View,
+  Text,
+  Modal,
+  Dimensions,
+  Platform,
+  StyleSheet,
+  TouchableOpacity,
+  ActivityIndicator,
+} from 'react-native';
+import {
+  LivenessDetection,
+  type LivenessDetectionConfig,
+  type LivenessResult,
+} from './LivenessDetection';
+import LivenessCameraView from './LivenessCameraView';
+
+type FaceVerificationProps = {
+  onClose: () => void;
+  onSuccess: (result: LivenessResult) => void;
+  primaryColor: string;
+  challenges?: ('smile' | 'blink' | 'turn_left' | 'turn_right')[];
+  timeout?: number;
+};
+
+type DetectionState = 'idle' | 'starting' | 'active' | 'completed' | 'error';
+
+const FaceVerification: React.FC<FaceVerificationProps> = ({
+  onClose,
+  onSuccess,
+  primaryColor,
+  challenges = ['smile', 'blink', 'turn_left'],
+  timeout = 300000, // 5 minutes default
+}) => {
+  const [detectionState, setDetectionState] = useState<DetectionState>('idle');
+  const [currentChallenge, setCurrentChallenge] = useState<string>('');
+  const [completedChallenges, setCompletedChallenges] = useState<string[]>([]);
+  const [error, setError] = useState<string>('');
+  const [isLoading, setIsLoading] = useState(false);
+
+  // Challenge instruction messages
+  const getChallengeInstruction = (challenge: string): string => {
+    switch (challenge) {
+      case 'smile':
+        return 'Please smile naturally';
+      case 'blink':
+        return 'Please blink your eyes';
+      case 'turn_left':
+        return 'Please turn your head to the left';
+      case 'turn_right':
+        return 'Please turn your head to the right';
+      default:
+        return 'Please follow the instruction';
+    }
+  };
+
+  const startLivenessDetection = useCallback(async () => {
+    try {
+      setDetectionState('starting');
+      setIsLoading(true);
+      setError('');
+
+      // Check and request camera permission first
+      const hasPermission = await LivenessDetection.checkCameraPermission();
+      if (!hasPermission) {
+        const granted = await LivenessDetection.requestCameraPermission();
+        if (!granted) {
+          throw new Error(
+            'Camera permission is required for face verification'
+          );
+        }
+      }
+
+      const config: LivenessDetectionConfig = {
+        challenges,
+        timeout,
+      };
+
+      await LivenessDetection.startLivenessDetection(config, {
+        onChallengeStart: (challenge) => {
+          setCurrentChallenge(challenge);
+          setDetectionState('active');
+          setIsLoading(false);
+        },
+        onChallengeSuccess: (challenge) => {
+          setCompletedChallenges((prev) => [...prev, challenge]);
+        },
+        onChallengeFailure: (challenge, reason) => {
+          console.warn(`Challenge ${challenge} failed: ${reason}`);
+          // Continue with next challenge - the native module handles this
+        },
+        onAllChallengesComplete: (result) => {
+          setDetectionState('completed');
+          setCurrentChallenge('');
+          onSuccess(result);
+        },
+      });
+    } catch (err) {
+      console.error('Liveness detection error:', err);
+      setError(err instanceof Error ? err.message : 'Unknown error occurred');
+      setDetectionState('error');
+      setIsLoading(false);
+    }
+  }, [challenges, timeout, onSuccess]);
+
+  const handleClose = useCallback(() => {
+    if (detectionState === 'active' || detectionState === 'starting') {
+      LivenessDetection.stopDetection();
+    }
+    onClose();
+  }, [detectionState, onClose]);
+
+  const handleRetry = useCallback(() => {
+    setDetectionState('idle');
+    setError('');
+    setCompletedChallenges([]);
+    setCurrentChallenge('');
+  }, []);
+
+  // Auto-start detection when component mounts
+  useEffect(() => {
+    if (detectionState === 'idle') {
+      // Small delay to ensure UI is ready
+      const timer = setTimeout(() => {
+        startLivenessDetection();
+      }, 500);
+      return () => clearTimeout(timer);
+    }
+    return undefined;
+  }, [detectionState, startLivenessDetection]);
+
+  // Cleanup on unmount
+  useEffect(() => {
+    return () => {
+      LivenessDetection.cleanup();
+    };
+  }, []);
+
+  const renderContent = () => {
+    if (detectionState === 'error') {
+      return (
+        <View style={styles.errorContainer}>
+          <Text style={styles.errorTitle}>Detection Failed</Text>
+          <Text style={styles.errorSubtitle}>{error}</Text>
+          <TouchableOpacity
+            style={[styles.button, { backgroundColor: primaryColor }]}
+            onPress={handleRetry}
+          >
+            <Text style={styles.buttonText}>Try Again</Text>
+          </TouchableOpacity>
+        </View>
+      );
+    }
+
+    if (detectionState === 'completed') {
+      return (
+        <View style={styles.successContainer}>
+          <Text style={styles.successTitle}>Verification Complete!</Text>
+          <Text style={styles.successSubtitle}>
+            All challenges completed successfully
+          </Text>
+        </View>
+      );
+    }
+
+    return (
+      <View style={styles.contentContainer}>
+        {/* Camera View */}
+        <View style={styles.cameraContainer}>
+          <LivenessCameraView
+            style={styles.camera}
+            scaleType="fillCenter"
+            onCameraReady={() => console.log('Camera ready')}
+            onCameraError={(error) => {
+              console.error('Camera error:', error);
+              setError('Camera initialization failed');
+              setDetectionState('error');
+            }}
+          />
+
+          {/* Overlay with instructions */}
+          <View style={styles.overlay}>
+            {isLoading ? (
+              <View style={styles.loadingContainer}>
+                <ActivityIndicator size="large" color={primaryColor} />
+                <Text style={styles.loadingText}>Initializing camera...</Text>
+              </View>
+            ) : (
+              <>
+                {/* Current challenge instruction */}
+                {currentChallenge && (
+                  <View style={styles.instructionContainer}>
+                    <Text style={styles.instructionText}>
+                      {getChallengeInstruction(currentChallenge)}
+                    </Text>
+                  </View>
+                )}
+
+                {/* Progress indicator */}
+                <View style={styles.progressContainer}>
+                  <Text style={styles.progressText}>
+                    {completedChallenges.length} / {challenges.length} completed
+                  </Text>
+                  <View style={styles.progressBar}>
+                    <View
+                      style={[
+                        styles.progressFill,
+                        {
+                          width: `${
+                            (completedChallenges.length / challenges.length) *
+                            100
+                          }%`,
+                          backgroundColor: primaryColor,
+                        },
+                      ]}
+                    />
+                  </View>
+                </View>
+              </>
+            )}
+          </View>
+        </View>
+      </View>
+    );
+  };
+
+  return (
+    <Modal
+      visible={true}
+      transparent={true}
+      onRequestClose={handleClose}
+      style={styles.modal}
+      animationType="slide"
+    >
+      <View style={styles.backdrop}>
+        <View style={styles.container}>
+          {/* Header */}
+          <View style={styles.header}>
+            <Text style={styles.title}>Face Verification</Text>
+            <TouchableOpacity onPress={handleClose} style={styles.closeButton}>
+              <Text style={styles.closeText}>✕</Text>
+            </TouchableOpacity>
+          </View>
+
+          {renderContent()}
+        </View>
+      </View>
+    </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.48)',
+    flex: 1,
+    justifyContent: 'flex-end',
+    position: 'relative',
+    height: '100%',
+  },
+  container: {
+    backgroundColor: 'white',
+    borderTopRightRadius: 20,
+    borderTopLeftRadius: 20,
+    maxHeight: Dimensions.get('window').height - 40,
+    flex: 1,
+    position: 'relative',
+    ...(Platform.OS === 'android' && { overflow: 'hidden' }),
+  },
+  modal: {
+    flex: 1,
+    backgroundColor: 'rgba(0,0,0,0.48)',
+    height: '100%',
+    width: '100%',
+  },
+  header: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    padding: 16,
+    borderBottomWidth: 1,
+    borderBottomColor: '#f0f0f0',
+  },
+  title: {
+    fontSize: 18,
+    fontWeight: '600',
+    color: '#333',
+  },
+  closeButton: {
+    width: 30,
+    height: 30,
+    borderRadius: 15,
+    backgroundColor: '#f0f0f0',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  closeText: {
+    fontSize: 16,
+    color: '#666',
+  },
+  contentContainer: {
+    flex: 1,
+  },
+  cameraContainer: {
+    flex: 1,
+    position: 'relative',
+  },
+  camera: {
+    flex: 1,
+    width: '100%',
+    height: '100%',
+  },
+  overlay: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    paddingVertical: 40,
+    paddingHorizontal: 20,
+  },
+  loadingContainer: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  loadingText: {
+    color: 'white',
+    fontSize: 16,
+    marginTop: 12,
+    textAlign: 'center',
+  },
+  instructionContainer: {
+    backgroundColor: 'rgba(0,0,0,0.7)',
+    paddingHorizontal: 20,
+    paddingVertical: 12,
+    borderRadius: 8,
+    marginTop: 20,
+  },
+  instructionText: {
+    color: 'white',
+    fontSize: 16,
+    fontWeight: '500',
+    textAlign: 'center',
+  },
+  progressContainer: {
+    backgroundColor: 'rgba(0,0,0,0.7)',
+    paddingHorizontal: 20,
+    paddingVertical: 12,
+    borderRadius: 8,
+    minWidth: 200,
+  },
+  progressText: {
+    color: 'white',
+    fontSize: 14,
+    textAlign: 'center',
+    marginBottom: 8,
+  },
+  progressBar: {
+    height: 4,
+    backgroundColor: 'rgba(255,255,255,0.3)',
+    borderRadius: 2,
+    overflow: 'hidden',
+  },
+  progressFill: {
+    height: '100%',
+    borderRadius: 2,
+  },
+  errorContainer: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    paddingHorizontal: 20,
+  },
+  errorTitle: {
+    fontSize: 20,
+    fontWeight: '600',
+    color: '#d32f2f',
+    marginBottom: 8,
+    textAlign: 'center',
+  },
+  errorSubtitle: {
+    textAlign: 'center',
+    fontSize: 14,
+    color: '#5e7079',
+    marginBottom: 20,
+    paddingHorizontal: 8,
+  },
+  successContainer: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    paddingHorizontal: 20,
+  },
+  successTitle: {
+    fontSize: 20,
+    fontWeight: '600',
+    color: '#2e7d32',
+    marginBottom: 8,
+    textAlign: 'center',
+  },
+  successSubtitle: {
+    textAlign: 'center',
+    fontSize: 14,
+    color: '#5e7079',
+    paddingHorizontal: 8,
+  },
+  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,
+  },
+  testContent: {
+    paddingTop: 30,
+    paddingLeft: 16,
+  },
+  testTwoContent: {
+    paddingTop: 10,
+    paddingLeft: 16,
+  },
+  retryButton: {
+    minWidth: 160,
+    marginHorizontal: 'auto',
+  },
+  button: {
+    borderRadius: 6,
+    paddingHorizontal: 20,
+    paddingVertical: 14,
+    alignItems: 'center',
+    justifyContent: 'center',
+    minWidth: 120,
+  },
+  buttonText: {
+    color: 'white',
+    fontSize: 16,
+    fontWeight: '600',
+  },
+});

package/src/components/biometrics/LivenessCameraView.tsx

@@ -0,0 +1,61 @@
+import React from 'react';
+import { requireNativeComponent, Platform, ViewStyle } from 'react-native';
+
+// Props for the native camera view
+interface LivenessCameraViewProps {
+  style?: ViewStyle;
+  scaleType?:
+    | 'fillCenter'
+    | 'fillStart'
+    | 'fillEnd'
+    | 'fitCenter'
+    | 'fitStart'
+    | 'fitEnd';
+  onCameraReady?: () => void;
+  onCameraError?: (error: { nativeEvent: { error: string } }) => void;
+}
+
+// Native component interface
+interface NativeLivenessCameraViewProps extends LivenessCameraViewProps {
+  style?: ViewStyle;
+}
+
+// Import native component based on platform
+const NativeLivenessCameraView = Platform.select({
+  android:
+    requireNativeComponent<NativeLivenessCameraViewProps>('LivenessCameraView'),
+  ios: requireNativeComponent<NativeLivenessCameraViewProps>(
+    'LivenessCameraView'
+  ),
+});
+
+/**
+ * LivenessCameraView - Native camera component for liveness detection
+ *
+ * This component provides a camera preview that integrates with the
+ * liveness detection native module for real-time face analysis.
+ */
+const LivenessCameraView: React.FC<LivenessCameraViewProps> = ({
+  style,
+  scaleType = 'fillCenter',
+  onCameraReady,
+  onCameraError,
+}) => {
+  // Platform check
+  if (!NativeLivenessCameraView) {
+    console.warn('LivenessCameraView is not available on this platform');
+    return null;
+  }
+
+  return (
+    <NativeLivenessCameraView
+      style={style}
+      scaleType={scaleType}
+      onCameraReady={onCameraReady}
+      onCameraError={onCameraError}
+    />
+  );
+};
+
+export default LivenessCameraView;
+export type { LivenessCameraViewProps };