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

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

@@ -1,427 +1,335 @@
-import React, { useState, useEffect, useCallback } from 'react';
-import { View, Text, Modal, Dimensions, Platform, StyleSheet, TouchableOpacity, ActivityIndicator } from 'react-native';
+import React, { useState, useEffect } from 'react';
+import { View, Modal, Dimensions, StyleSheet, TouchableOpacity, Image, Text, ActivityIndicator } from 'react-native';
 import { LivenessDetection } from './LivenessDetection';
-import LivenessCameraView from './LivenessCameraView';
+import { OmnipayLivenessCameraView } from './OmnipayLivenessCameraView';
+import { CameraPermissionManager, PermissionResult } from './PermissionManager';
+import { LivenessChallenge } from './types';
 const FaceVerification = ({
   onClose,
   onSuccess,
   primaryColor,
-  challenges = ['smile', 'blink', 'turn_left'],
-  timeout = 300000 // 5 minutes default
+  config
 }) => {
-  const [detectionState, setDetectionState] = useState('idle');
-  const [currentChallenge, setCurrentChallenge] = useState('');
-  const [completedChallenges, setCompletedChallenges] = useState([]);
-  const [error, setError] = useState('');
-  const [isLoading, setIsLoading] = useState(false);
-
-  // Challenge instruction messages
-  const getChallengeInstruction = challenge => {
-    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 [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 {
+      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 () => {
+  const startDetection = async () => {
+    if (!isSupported) {
+      return;
+    }
+    setState('starting');
+    setError(null);
     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 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 = {
-        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 => {
+    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 /*#__PURE__*/React.createElement(View, {
-        style: styles.errorContainer
-      }, /*#__PURE__*/React.createElement(Text, {
-        style: styles.errorTitle
-      }, "Detection Failed"), /*#__PURE__*/React.createElement(Text, {
-        style: styles.errorSubtitle
-      }, error), /*#__PURE__*/React.createElement(TouchableOpacity, {
-        style: [styles.button, {
-          backgroundColor: primaryColor
-        }],
-        onPress: handleRetry
-      }, /*#__PURE__*/React.createElement(Text, {
-        style: styles.buttonText
-      }, "Try Again")));
+  };
+  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...';
     }
-    if (detectionState === 'completed') {
-      return /*#__PURE__*/React.createElement(View, {
-        style: styles.successContainer
-      }, /*#__PURE__*/React.createElement(Text, {
-        style: styles.successTitle
-      }, "Verification Complete!"), /*#__PURE__*/React.createElement(Text, {
-        style: styles.successSubtitle
-      }, "All challenges completed successfully"));
+  };
+  const getStateColor = () => {
+    switch (state) {
+      case 'completed':
+        return '#4CAF50';
+      case 'failed':
+        return '#F44336';
+      case 'running':
+        return primaryColor;
+      default:
+        return '#666';
     }
-    return /*#__PURE__*/React.createElement(View, {
-      style: styles.contentContainer
-    }, /*#__PURE__*/React.createElement(View, {
-      style: styles.cameraContainer
-    }, /*#__PURE__*/React.createElement(LivenessCameraView, {
-      style: styles.camera,
-      scaleType: "fillCenter",
-      onCameraReady: () => console.log('Camera ready'),
-      onCameraError: error => {
-        console.error('Camera error:', error);
-        setError('Camera initialization failed');
-        setDetectionState('error');
-      }
-    }), /*#__PURE__*/React.createElement(View, {
-      style: styles.overlay
-    }, isLoading ? /*#__PURE__*/React.createElement(View, {
-      style: styles.loadingContainer
-    }, /*#__PURE__*/React.createElement(ActivityIndicator, {
-      size: "large",
-      color: primaryColor
-    }), /*#__PURE__*/React.createElement(Text, {
-      style: styles.loadingText
-    }, "Initializing camera...")) : /*#__PURE__*/React.createElement(React.Fragment, null, currentChallenge && /*#__PURE__*/React.createElement(View, {
-      style: styles.instructionContainer
-    }, /*#__PURE__*/React.createElement(Text, {
-      style: styles.instructionText
-    }, getChallengeInstruction(currentChallenge))), /*#__PURE__*/React.createElement(View, {
-      style: styles.progressContainer
-    }, /*#__PURE__*/React.createElement(Text, {
-      style: styles.progressText
-    }, completedChallenges.length, " / ", challenges.length, " completed"), /*#__PURE__*/React.createElement(View, {
-      style: styles.progressBar
-    }, /*#__PURE__*/React.createElement(View, {
-      style: [styles.progressFill, {
-        width: `${completedChallenges.length / challenges.length * 100}%`,
-        backgroundColor: primaryColor
-      }]
-    })))))));
   };
+  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 /*#__PURE__*/React.createElement(Modal, {
     visible: true,
     transparent: true,
-    onRequestClose: handleClose,
-    style: styles.modal,
-    animationType: "slide"
-  }, /*#__PURE__*/React.createElement(View, {
-    style: styles.backdrop
-  }, /*#__PURE__*/React.createElement(View, {
-    style: styles.container
+    onRequestClose: onClose,
+    style: styles.modal
+  }, /*#__PURE__*/React.createElement(TouchableOpacity, {
+    style: styles.backdrop,
+    activeOpacity: 1,
+    onPress: () => {}
   }, /*#__PURE__*/React.createElement(View, {
-    style: styles.header
+    style: [styles.container]
+  }, /*#__PURE__*/React.createElement(TouchableOpacity, {
+    style: styles.close,
+    onPress: onClose
+  }, /*#__PURE__*/React.createElement(Image, {
+    source: require('../../assets/cancel.png'),
+    style: styles.closeIcon
+  })), /*#__PURE__*/React.createElement(View, {
+    style: styles.contentContainer
   }, /*#__PURE__*/React.createElement(Text, {
     style: styles.title
-  }, "Face Verification"), /*#__PURE__*/React.createElement(TouchableOpacity, {
-    onPress: handleClose,
-    style: styles.closeButton
+  }, "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.closeText
-  }, "\u2715"))), renderContent())));
+    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")))))));
 };
-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%'
-  },
-  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
+  modal: {
+    margin: 0
   },
   backdrop: {
-    backgroundColor: 'rgba(0,0,0,0.48)',
     flex: 1,
-    justifyContent: 'flex-end',
-    position: 'relative',
-    height: '100%'
+    backgroundColor: 'rgba(0, 0, 0, 0.8)',
+    justifyContent: 'center',
+    alignItems: 'center'
   },
   container: {
+    width: screenWidth * 0.9,
+    maxHeight: screenHeight * 0.8,
     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%'
+    borderRadius: 16,
+    padding: 20,
+    alignItems: 'center'
   },
-  header: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-    padding: 16,
-    borderBottomWidth: 1,
-    borderBottomColor: '#f0f0f0'
+  close: {
+    position: 'absolute',
+    top: 15,
+    right: 15,
+    zIndex: 10,
+    padding: 5
   },
-  title: {
-    fontSize: 18,
-    fontWeight: '600',
-    color: '#333'
+  closeIcon: {
+    width: 20,
+    height: 20,
+    tintColor: '#666'
   },
-  closeButton: {
-    width: 30,
-    height: 30,
-    borderRadius: 15,
-    backgroundColor: '#f0f0f0',
+  contentContainer: {
+    width: '100%',
     alignItems: 'center',
-    justifyContent: 'center'
+    paddingTop: 20
   },
-  closeText: {
-    fontSize: 16,
-    color: '#666'
-  },
-  contentContainer: {
-    flex: 1
+  title: {
+    fontSize: 24,
+    fontWeight: 'bold',
+    color: '#333',
+    marginBottom: 20,
+    textAlign: 'center'
   },
   cameraContainer: {
-    flex: 1,
-    position: 'relative'
+    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',
-    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',
+  instruction: {
     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
+    color: 'white'
   },
-  successContainer: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-    paddingHorizontal: 20
+  progressContainer: {
+    marginBottom: 20,
+    alignItems: 'center'
   },
-  successTitle: {
-    fontSize: 20,
+  challengeText: {
+    fontSize: 18,
     fontWeight: '600',
-    color: '#2e7d32',
-    marginBottom: 8,
+    color: '#333',
     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',
+  buttonContainer: {
+    flexDirection: 'row',
     justifyContent: 'center',
-    zIndex: 2
+    gap: 15
   },
-  closeIcon: {
-    height: 12,
-    width: 12
+  retryButton: {
+    paddingHorizontal: 30,
+    paddingVertical: 12,
+    borderRadius: 8,
+    alignItems: 'center'
   },
-  testContent: {
-    paddingTop: 30,
-    paddingLeft: 16
+  retryButtonText: {
+    color: 'white',
+    fontSize: 16,
+    fontWeight: '600'
   },
-  testTwoContent: {
-    paddingTop: 10,
-    paddingLeft: 16
+  successIcon: {
+    width: 60,
+    height: 60,
+    borderRadius: 30,
+    backgroundColor: '#4CAF50',
+    justifyContent: 'center',
+    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;
 //# sourceMappingURL=FaceVerification.js.map