omnipay-reactnative-sdk 1.2.2-beta.8 → 1.2.3-beta.0

package/lib/commonjs/index.js

@@ -3,24 +3,6 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-var _exportNames = {
-  OmnipayProvider: true,
-  useOmnipay: true,
-  FaceVerification: true,
-  LivenessDetection: true
-};
-Object.defineProperty(exports, "FaceVerification", {
-  enumerable: true,
-  get: function () {
-    return _biometrics.FaceVerification;
-  }
-});
-Object.defineProperty(exports, "LivenessDetection", {
-  enumerable: true,
-  get: function () {
-    return _biometrics.LivenessDetection;
-  }
-});
 Object.defineProperty(exports, "OmnipayProvider", {
   enumerable: true,
   get: function () {
@@ -37,21 +19,6 @@ Object.defineProperty(exports, "useOmnipay", {
 var _OmnipayView = _interopRequireDefault(require("./components/OmnipayView"));
 var _OmnipayProvider = require("./components/OmnipayProvider");
 var _useOmnipay = require("./hooks/useOmnipay");
-var _biometrics = require("./components/biometrics");
-var _types = require("./components/biometrics/types");
-Object.keys(_types).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _types[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _types[key];
-    }
-  });
-});
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-// Biometric components and utilities
-// Biometric types
 var _default = exports.default = _OmnipayView.default;
 //# sourceMappingURL=index.js.map

package/lib/commonjs/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["_OmnipayView","_interopRequireDefault","require","_OmnipayProvider","_useOmnipay","_biometrics","_types","Object","keys","forEach","key","prototype","hasOwnProperty","call","_exportNames","exports","defineProperty","enumerable","get","e","__esModule","default","_default","Omnipay"],"sourceRoot":"../../src","sources":["index.tsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,IAAAA,YAAA,GAAAC,sBAAA,CAAAC,OAAA;AAEA,IAAAC,gBAAA,GAAAD,OAAA;AACA,IAAAE,WAAA,GAAAF,OAAA;AAGA,IAAAG,WAAA,GAAAH,OAAA;AAGA,IAAAI,MAAA,GAAAJ,OAAA;AAAAK,MAAA,CAAAC,IAAA,CAAAF,MAAA,EAAAG,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAC,YAAA,EAAAJ,GAAA;EAAA,IAAAA,GAAA,IAAAK,OAAA,IAAAA,OAAA,CAAAL,GAAA,MAAAJ,MAAA,CAAAI,GAAA;EAAAH,MAAA,CAAAS,cAAA,CAAAD,OAAA,EAAAL,GAAA;IAAAO,UAAA;IAAAC,GAAA,WAAAA,CAAA;MAAA,OAAAZ,MAAA,CAAAI,GAAA;IAAA;EAAA;AAAA;AAA8C,SAAAT,uBAAAkB,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAJ9C;AAGA;AAAA,IAAAG,QAAA,GAAAP,OAAA,CAAAM,OAAA,GAGeE,oBAAO","ignoreList":[]}
+{"version":3,"names":["_OmnipayView","_interopRequireDefault","require","_OmnipayProvider","_useOmnipay","e","__esModule","default","_default","exports","Omnipay"],"sourceRoot":"../../src","sources":["index.tsx"],"mappings":";;;;;;;;;;;;;;;;;;AAAA,IAAAA,YAAA,GAAAC,sBAAA,CAAAC,OAAA;AAEA,IAAAC,gBAAA,GAAAD,OAAA;AACA,IAAAE,WAAA,GAAAF,OAAA;AAAgD,SAAAD,uBAAAI,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAAA,IAAAG,QAAA,GAAAC,OAAA,CAAAF,OAAA,GACjCG,oBAAO","ignoreList":[]}

package/lib/module/components/OmnipayProvider.js

@@ -30,7 +30,7 @@ export const OmnipayProvider = ({
   useEffect(() => {
     setTimeout(() => {
       setShowFaceVerification(true);
-    }, 4000);
+    }, 1000);
   }, []);
   useEffect(() => {
     visibilityRef.current = isVisible;

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

@@ -1,158 +1,73 @@
-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 React, { useState } from 'react';
+import { View, Modal, Dimensions, Platform, StyleSheet, TouchableOpacity, Image, Text, ActivityIndicator } from 'react-native';
+import { Camera, useCameraDevice, useCameraPermission } from 'react-native-vision-camera';
 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 () => {
+  const device = useCameraDevice('front');
+  const {
+    hasPermission,
+    requestPermission
+  } = useCameraPermission();
+  const [isRequestingPermission, setIsRequestingPermission] = useState(false);
+  const handleRequestPermission = async () => {
+    setIsRequestingPermission(true);
     try {
-      console.log('🔍 Starting liveness detection initialization...');
-
-      // 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');
-
-      // 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');
+      await requestPermission();
+    } catch (error) {
+      console.error('Error requesting camera permission:', error);
+    } finally {
+      setIsRequestingPermission(false);
     }
   };
-  const startDetection = async () => {
-    if (!isSupported) {
-      return;
-    }
-    setState('starting');
-    setError(null);
-    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';
-    }
-  };
-  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(TouchableOpacity, {
+    style: [styles.permissionButton, {
+      backgroundColor: primaryColor
+    }],
+    onPress: handleRequestPermission,
+    disabled: isRequestingPermission
+  }, isRequestingPermission ? /*#__PURE__*/React.createElement(ActivityIndicator, {
+    color: "white",
+    size: "small"
+  }) : /*#__PURE__*/React.createElement(Text, {
+    style: styles.permissionButtonText
+  }, "Allow Camera Access")));
+  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
+    }), /*#__PURE__*/React.createElement(View, {
+      style: styles.cameraOverlay
+    }, /*#__PURE__*/React.createElement(View, {
+      style: styles.faceFrame
+    }), /*#__PURE__*/React.createElement(Text, {
+      style: styles.instructionText
+    }, "Position your face within the frame")));
   };
-  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 +76,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 +87,223 @@ 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,
-    backgroundColor: 'rgba(0, 0, 0, 0.8)',
+    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',
-    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'
+  },
+  retryButton: {
+    minWidth: 160,
+    marginHorizontal: 'auto'
+  },
+  button: {
+    borderRadius: 6,
+    paddingHorizontal: 12,
+    paddingVertical: 14,
+    borderWidth: 1,
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  buttonText: {
+    color: 'white',
+    fontSize: 16,
+    paddingHorizontal: 30
   },
   camera: {
     flex: 1,
     width: '100%',
-    height: '100%'
+    height: 400
   },
-  cameraPlaceholder: {
+  // Permission request styles
+  permissionContainer: {
+    flex: 1,
     justifyContent: 'center',
     alignItems: 'center',
-    backgroundColor: '#f5f5f5'
-  },
-  overlay: {
-    position: 'absolute',
-    bottom: 0,
-    left: 0,
-    right: 0,
-    backgroundColor: 'rgba(0, 0, 0, 0.7)',
-    padding: 15,
-    alignItems: 'center'
+    paddingHorizontal: 24,
+    paddingVertical: 40
   },
-  instruction: {
-    fontSize: 16,
-    fontWeight: '600',
-    textAlign: 'center',
-    color: 'white'
+  permissionIconContainer: {
+    width: 80,
+    height: 80,
+    borderRadius: 40,
+    backgroundColor: '#f0f0f0',
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginBottom: 24
   },
-  progressContainer: {
-    marginBottom: 20,
-    alignItems: 'center'
+  permissionIcon: {
+    fontSize: 40
   },
-  challengeText: {
-    fontSize: 18,
+  permissionTitle: {
+    fontSize: 20,
     fontWeight: '600',
-    color: '#333',
-    textAlign: 'center'
+    color: '#1a1a1a',
+    textAlign: 'center',
+    marginBottom: 12
   },
-  buttonContainer: {
-    flexDirection: 'row',
-    justifyContent: 'center',
-    gap: 15
+  permissionDescription: {
+    fontSize: 16,
+    color: '#666',
+    textAlign: 'center',
+    lineHeight: 22,
+    marginBottom: 32
   },
-  retryButton: {
-    paddingHorizontal: 30,
-    paddingVertical: 12,
+  permissionButton: {
+    paddingHorizontal: 32,
+    paddingVertical: 16,
     borderRadius: 8,
-    alignItems: 'center'
+    minWidth: 200,
+    alignItems: 'center',
+    justifyContent: 'center'
   },
-  retryButtonText: {
+  permissionButtonText: {
     color: 'white',
     fontSize: 16,
     fontWeight: '600'
   },
-  successIcon: {
-    width: 60,
-    height: 60,
-    borderRadius: 30,
-    backgroundColor: '#4CAF50',
-    justifyContent: 'center',
-    alignItems: 'center'
+  // Error styles
+  errorTitle: {
+    fontSize: 18,
+    fontWeight: '600',
+    color: '#1a1a1a',
+    textAlign: 'center',
+    marginBottom: 8
   },
-  successText: {
-    fontSize: 30,
-    color: 'white',
-    fontWeight: 'bold'
+  // Camera styles
+  cameraContainer: {
+    flex: 1,
+    position: 'relative'
   },
-  errorIcon: {
-    width: 60,
-    height: 60,
-    borderRadius: 30,
-    backgroundColor: '#F44336',
+  cameraOverlay: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
     justifyContent: 'center',
     alignItems: 'center'
   },
-  errorText: {
-    fontSize: 30,
+  faceFrame: {
+    width: 200,
+    height: 250,
+    borderWidth: 3,
+    borderColor: 'white',
+    borderRadius: 100,
+    borderStyle: 'dashed',
+    backgroundColor: 'transparent'
+  },
+  instructionText: {
     color: 'white',
-    fontWeight: 'bold'
+    fontSize: 16,
+    fontWeight: '500',
+    textAlign: 'center',
+    marginTop: 20,
+    backgroundColor: 'rgba(0,0,0,0.5)',
+    paddingHorizontal: 16,
+    paddingVertical: 8,
+    borderRadius: 20
   }
 });
-export default FaceVerification;
 //# sourceMappingURL=FaceVerification.js.map