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

package/src/components/biometrics/FaceVerification.tsx

@@ -1,484 +1,407 @@
-import React, { useState, useEffect, useCallback } from 'react';
+import React, { useState, useEffect } from 'react';
 import {
   View,
-  Text,
   Modal,
   Dimensions,
-  Platform,
   StyleSheet,
   TouchableOpacity,
+  Image,
+  Text,
   ActivityIndicator,
 } from 'react-native';
-import {
-  LivenessDetection,
-  type LivenessDetectionConfig,
-  type LivenessResult,
-} from './LivenessDetection';
-import LivenessCameraView from './LivenessCameraView';
+import { LivenessDetection } from './LivenessDetection';
+import { OmnipayLivenessCameraView } from './OmnipayLivenessCameraView';
+import { CameraPermissionManager, PermissionResult } from './PermissionManager';
+import { LivenessChallenge, type LivenessConfig } from './types';
 
 type FaceVerificationProps = {
   onClose: () => void;
-  onSuccess: (result: LivenessResult) => void;
+  onSuccess: (result?: any) => void;
   primaryColor: string;
-  challenges?: ('smile' | 'blink' | 'turn_left' | 'turn_right')[];
-  timeout?: number;
+  config?: Partial<LivenessConfig>;
 };
 
-type DetectionState = 'idle' | 'starting' | 'active' | 'completed' | 'error';
+type DetectionState =
+  | 'initializing'
+  | 'starting'
+  | 'running'
+  | 'completed'
+  | 'failed';
 
 const FaceVerification: React.FC<FaceVerificationProps> = ({
   onClose,
   onSuccess,
   primaryColor,
-  challenges = ['smile', 'blink', 'turn_left'],
-  timeout = 300000, // 5 minutes default
+  config,
 }) => {
-  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);
+  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>('');
 
-  // 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';
+  useEffect(() => {
+    checkSupport();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const checkSupport = async () => {
+    try {
+      const supported = await LivenessDetection.isSupported();
+      setIsSupported(supported);
+      if (supported) {
+        await startDetection();
+      } else {
+        setState('failed');
+        setError('Liveness detection is not supported on this device');
+      }
+    } catch (err) {
+      setState('failed');
+      setError('Failed to initialize liveness detection');
     }
   };
 
-  const startLivenessDetection = useCallback(async () => {
-    try {
-      setDetectionState('starting');
-      setIsLoading(true);
-      setError('');
+  const startDetection = async () => {
+    if (!isSupported) {
+      return;
+    }
+
+    setState('starting');
+    setError(null);
 
+    try {
       // 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 permissionResponse =
+        await CameraPermissionManager.requestCameraPermission();
+
+      if (permissionResponse.result !== PermissionResult.GRANTED) {
+        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;
       }
 
-      const config: LivenessDetectionConfig = {
-        challenges,
-        timeout,
+      const livenessConfig = {
+        ...LivenessDetection.getDefaultConfig(),
+        ...config,
       };
 
-      await LivenessDetection.startLivenessDetection(config, {
+      const result = await LivenessDetection.startDetection(livenessConfig, {
         onChallengeStart: (challenge) => {
           setCurrentChallenge(challenge);
-          setDetectionState('active');
-          setIsLoading(false);
+          setState('running');
+          setChallengeProgress(getChallengeInstruction(challenge));
         },
-        onChallengeSuccess: (challenge) => {
-          setCompletedChallenges((prev) => [...prev, challenge]);
+        onChallengeSuccess: (challenge, _challengeResult) => {
+          setChallengeProgress(
+            `✓ ${getChallengeInstruction(challenge)} completed`
+          );
         },
         onChallengeFailure: (challenge, reason) => {
-          console.warn(`Challenge ${challenge} failed: ${reason}`);
-          // Continue with next challenge - the native module handles this
+          setError(`Failed: ${reason}, ${challenge}`);
         },
-        onAllChallengesComplete: (result) => {
-          setDetectionState('completed');
-          setCurrentChallenge('');
-          onSuccess(result);
+        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) {
-      console.error('Liveness detection error:', err);
+      setState('failed');
       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);
+  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';
     }
-    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>
-      );
+  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...';
     }
+  };
 
-    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>
-      );
+  const getStateColor = (): string => {
+    switch (state) {
+      case 'completed':
+        return '#4CAF50';
+      case 'failed':
+        return '#F44336';
+      case 'running':
+        return primaryColor;
+      default:
+        return '#666';
     }
+  };
 
-    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>
-    );
+  const handleRetry = () => {
+    setState('initializing');
+    setError(null);
+    setCurrentChallenge(null);
+    setChallengeProgress('');
+    checkSupport();
   };
 
+  const showRetryButton =
+    state === 'failed' &&
+    error !==
+      'Camera permission is blocked. Please enable it in device settings.';
+
   return (
     <Modal
       visible={true}
       transparent={true}
-      onRequestClose={handleClose}
+      onRequestClose={onClose}
       style={styles.modal}
-      animationType="slide"
     >
-      <View style={styles.backdrop}>
-        <View style={styles.container}>
-          {/* Header */}
-          <View style={styles.header}>
+      <TouchableOpacity
+        style={styles.backdrop}
+        activeOpacity={1}
+        onPress={() => {}}
+      >
+        <View style={[styles.container]}>
+          <TouchableOpacity style={styles.close} onPress={onClose}>
+            <Image
+              source={require('../../assets/cancel.png')}
+              style={styles.closeIcon}
+            />
+          </TouchableOpacity>
+
+          <View style={styles.contentContainer}>
             <Text style={styles.title}>Face Verification</Text>
-            <TouchableOpacity onPress={handleClose} style={styles.closeButton}>
-              <Text style={styles.closeText}>✕</Text>
-            </TouchableOpacity>
-          </View>
 
-          {renderContent()}
+            {/* 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>
+          </View>
         </View>
-      </View>
+      </TouchableOpacity>
     </Modal>
   );
 };
 
-export default FaceVerification;
+const { width: screenWidth, height: screenHeight } = Dimensions.get('window');
 
 const styles = StyleSheet.create({
-  hide: {
-    display: 'none',
-  },
-  full: {
-    flex: 1,
-    width: '100%',
-    height: '100%',
+  modal: {
+    margin: 0,
   },
-  webview: {
+  backdrop: {
     flex: 1,
-    width: '100%',
-    height: Dimensions.get('window').height - 40,
-    backgroundColor: 'white',
-    borderTopRightRadius: 20,
-    borderTopLeftRadius: 20,
-    paddingTop: 150,
+    backgroundColor: 'rgba(0, 0, 0, 0.8)',
+    justifyContent: 'center',
+    alignItems: 'center',
   },
-  webviewLoader: {
-    zIndex: 3,
+  container: {
+    width: screenWidth * 0.9,
+    maxHeight: screenHeight * 0.8,
     backgroundColor: 'white',
+    borderRadius: 16,
+    padding: 20,
     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%',
+  close: {
+    position: 'absolute',
+    top: 15,
+    right: 15,
+    zIndex: 10,
+    padding: 5,
   },
-  container: {
-    backgroundColor: 'white',
-    borderTopRightRadius: 20,
-    borderTopLeftRadius: 20,
-    maxHeight: Dimensions.get('window').height - 40,
-    flex: 1,
-    position: 'relative',
-    ...(Platform.OS === 'android' && { overflow: 'hidden' }),
+  closeIcon: {
+    width: 20,
+    height: 20,
+    tintColor: '#666',
   },
-  modal: {
-    flex: 1,
-    backgroundColor: 'rgba(0,0,0,0.48)',
-    height: '100%',
+  contentContainer: {
     width: '100%',
-  },
-  header: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
     alignItems: 'center',
-    padding: 16,
-    borderBottomWidth: 1,
-    borderBottomColor: '#f0f0f0',
+    paddingTop: 20,
   },
   title: {
-    fontSize: 18,
-    fontWeight: '600',
+    fontSize: 24,
+    fontWeight: 'bold',
     color: '#333',
-  },
-  closeButton: {
-    width: 30,
-    height: 30,
-    borderRadius: 15,
-    backgroundColor: '#f0f0f0',
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  closeText: {
-    fontSize: 16,
-    color: '#666',
-  },
-  contentContainer: {
-    flex: 1,
+    marginBottom: 20,
+    textAlign: 'center',
   },
   cameraContainer: {
-    flex: 1,
+    width: screenWidth * 0.7,
+    height: screenWidth * 0.9,
+    borderRadius: 12,
+    overflow: 'hidden',
+    backgroundColor: '#f0f0f0',
     position: 'relative',
+    marginBottom: 20,
   },
   camera: {
     flex: 1,
     width: '100%',
     height: '100%',
   },
+  cameraPlaceholder: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: '#f5f5f5',
+  },
   overlay: {
     position: 'absolute',
-    top: 0,
+    bottom: 0,
     left: 0,
     right: 0,
-    bottom: 0,
-    justifyContent: 'space-between',
-    alignItems: 'center',
-    paddingVertical: 40,
-    paddingHorizontal: 20,
-  },
-  loadingContainer: {
-    flex: 1,
-    justifyContent: 'center',
+    backgroundColor: 'rgba(0, 0, 0, 0.7)',
+    padding: 15,
     alignItems: 'center',
   },
-  loadingText: {
-    color: 'white',
+  instruction: {
     fontSize: 16,
-    marginTop: 12,
+    fontWeight: '600',
     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',
+    marginBottom: 20,
     alignItems: 'center',
-    paddingHorizontal: 20,
   },
-  errorTitle: {
-    fontSize: 20,
+  challengeText: {
+    fontSize: 18,
     fontWeight: '600',
-    color: '#d32f2f',
-    marginBottom: 8,
-    textAlign: 'center',
-  },
-  errorSubtitle: {
+    color: '#333',
     textAlign: 'center',
-    fontSize: 14,
-    color: '#5e7079',
-    marginBottom: 20,
-    paddingHorizontal: 8,
   },
-  successContainer: {
-    flex: 1,
+  buttonContainer: {
+    flexDirection: 'row',
     justifyContent: 'center',
+    gap: 15,
+  },
+  retryButton: {
+    paddingHorizontal: 30,
+    paddingVertical: 12,
+    borderRadius: 8,
     alignItems: 'center',
-    paddingHorizontal: 20,
   },
-  successTitle: {
-    fontSize: 20,
+  retryButtonText: {
+    color: 'white',
+    fontSize: 16,
     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',
+  successIcon: {
+    width: 60,
+    height: 60,
+    borderRadius: 30,
+    backgroundColor: '#4CAF50',
     justifyContent: 'center',
-    zIndex: 2,
-  },
-  closeIcon: {
-    height: 12,
-    width: 12,
-  },
-  testContent: {
-    paddingTop: 30,
-    paddingLeft: 16,
-  },
-  testTwoContent: {
-    paddingTop: 10,
-    paddingLeft: 16,
+    alignItems: 'center',
   },
-  retryButton: {
-    minWidth: 160,
-    marginHorizontal: 'auto',
+  successText: {
+    fontSize: 30,
+    color: 'white',
+    fontWeight: 'bold',
   },
-  button: {
-    borderRadius: 6,
-    paddingHorizontal: 20,
-    paddingVertical: 14,
-    alignItems: 'center',
+  errorIcon: {
+    width: 60,
+    height: 60,
+    borderRadius: 30,
+    backgroundColor: '#F44336',
     justifyContent: 'center',
-    minWidth: 120,
+    alignItems: 'center',
   },
-  buttonText: {
+  errorText: {
+    fontSize: 30,
     color: 'white',
-    fontSize: 16,
-    fontWeight: '600',
+    fontWeight: 'bold',
   },
 });
+
+export default FaceVerification;