omnipay-reactnative-sdk 1.2.3-beta.0 → 1.2.3-beta.11

package/src/components/biometrics/FaceVerification.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import {
   View,
   Modal,
@@ -8,13 +8,15 @@ import {
   TouchableOpacity,
   Image,
   Text,
-  ActivityIndicator,
 } from 'react-native';
 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;
@@ -31,6 +33,26 @@ const FaceVerification: React.FC<FaceVerificationProps> = ({
   const { hasPermission, requestPermission } = useCameraPermission();
   const [isRequestingPermission, setIsRequestingPermission] = useState(false);
 
+  // Face verification flow
+  const {
+    state: flowState,
+    resetFlow,
+    isCompleted,
+    isFailed,
+  } = useFaceVerificationFlow();
+
+  // Frame processor
+  const frameProcessor = useFaceVerification();
+
+  // Handle completion
+  useEffect(() => {
+    if (isCompleted) {
+      setTimeout(() => {
+        onSuccess();
+      }, 1000); // Show success message briefly
+    }
+  }, [isCompleted, onSuccess]);
+
   const handleRequestPermission = async () => {
     setIsRequestingPermission(true);
     try {
@@ -52,17 +74,12 @@ const FaceVerification: React.FC<FaceVerificationProps> = ({
         To verify your identity, we need access to your camera. This allows us
         to capture your face for secure verification.
       </Text>
-      <TouchableOpacity
-        style={[styles.permissionButton, { backgroundColor: primaryColor }]}
+      <Button
+        title="Allow Camera Access"
         onPress={handleRequestPermission}
-        disabled={isRequestingPermission}
-      >
-        {isRequestingPermission ? (
-          <ActivityIndicator color="white" size="small" />
-        ) : (
-          <Text style={styles.permissionButtonText}>Allow Camera Access</Text>
-        )}
-      </TouchableOpacity>
+        backgroundColor={primaryColor}
+        loading={isRequestingPermission}
+      />
     </View>
   );
 
@@ -81,12 +98,60 @@ const FaceVerification: React.FC<FaceVerificationProps> = ({
 
     return (
       <View style={styles.cameraContainer}>
-        <Camera device={device} style={styles.camera} isActive={true} />
+        <Camera
+          device={device}
+          style={styles.camera}
+          isActive={true}
+          frameProcessor={frameProcessor}
+        />
         <View style={styles.cameraOverlay}>
           <View style={styles.faceFrame} />
-          <Text style={styles.instructionText}>
-            Position your face within the frame
+
+          {/* Progress indicator */}
+          <View style={styles.progressContainer}>
+            <View
+              style={[
+                styles.progressBar,
+                {
+                  width: `${flowState.progress}%`,
+                  backgroundColor: primaryColor,
+                },
+              ]}
+            />
+          </View>
+
+          {/* Current instruction */}
+          <Text style={styles.instructionText}>{flowState.instruction}</Text>
+
+          {/* Step indicator */}
+          <Text style={styles.stepIndicator}>
+            Step {flowState.completedSteps.length + 1} of 5
           </Text>
+
+          {/* Success/Failure messages */}
+          {isCompleted && (
+            <View
+              style={[
+                styles.statusContainer,
+                { backgroundColor: primaryColor },
+              ]}
+            >
+              <Text style={styles.statusText}>✓ Verification Complete!</Text>
+            </View>
+          )}
+
+          {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>
     );
@@ -228,21 +293,8 @@ const styles = StyleSheet.create({
     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: 400,
   },
@@ -280,19 +332,7 @@ const styles = StyleSheet.create({
     lineHeight: 22,
     marginBottom: 32,
   },
-  permissionButton: {
-    paddingHorizontal: 32,
-    paddingVertical: 16,
-    borderRadius: 8,
-    minWidth: 200,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  permissionButtonText: {
-    color: 'white',
-    fontSize: 16,
-    fontWeight: '600',
-  },
+
   // Error styles
   errorTitle: {
     fontSize: 18,
@@ -305,6 +345,7 @@ const styles = StyleSheet.create({
   cameraContainer: {
     flex: 1,
     position: 'relative',
+    marginTop: 60,
   },
   cameraOverlay: {
     position: 'absolute',
@@ -330,9 +371,59 @@ const styles = StyleSheet.create({
     fontWeight: '500',
     textAlign: 'center',
     marginTop: 20,
-    backgroundColor: 'rgba(0,0,0,0.5)',
+    backgroundColor: 'rgba(0,0,0,0.7)',
     paddingHorizontal: 16,
     paddingVertical: 8,
     borderRadius: 20,
   },
+  // 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,
+  },
+  stepIndicator: {
+    color: 'white',
+    fontSize: 14,
+    fontWeight: '400',
+    textAlign: 'center',
+    marginTop: 8,
+    backgroundColor: 'rgba(0,0,0,0.5)',
+    paddingHorizontal: 12,
+    paddingVertical: 4,
+    borderRadius: 12,
+    alignSelf: 'center',
+  },
+  statusContainer: {
+    position: 'absolute',
+    bottom: 40,
+    left: 20,
+    right: 20,
+    padding: 20,
+    borderRadius: 12,
+    alignItems: 'center',
+  },
+  statusContainerError: {
+    backgroundColor: '#ff4444',
+  },
+  statusText: {
+    color: 'white',
+    fontSize: 18,
+    fontWeight: '600',
+    textAlign: 'center',
+    marginBottom: 8,
+  },
+  retryButton: {
+    marginTop: 12,
+    minWidth: 120,
+  },
 });

package/src/components/biometrics/useFaceVerification.ts

@@ -0,0 +1,120 @@
+import {
+  useFrameProcessor,
+  VisionCameraProxy,
+} from 'react-native-vision-camera';
+
+export interface FaceVerificationResult {
+  faceDetected: boolean;
+  isSmiling?: boolean;
+  isBlinking?: boolean;
+  leftEyeClosed?: boolean;
+  rightEyeClosed?: boolean;
+  headPose?: {
+    yaw: number; // Left-right movement (-90 to 90)
+    pitch: number; // Up-down movement (-90 to 90)
+    roll: number; // Tilt movement (-180 to 180)
+  };
+  boundingBox?: {
+    x?: number;
+    y?: number;
+    width?: number;
+    height?: number;
+    left?: number;
+    top?: number;
+    right?: number;
+    bottom?: number;
+  };
+  smileProbability?: number;
+  leftEyeOpenProbability?: number;
+  rightEyeOpenProbability?: number;
+  trackingId?: number;
+  error?: string;
+}
+
+// Note: For production use, you would typically use shared values or state management
+// to communicate results from the worklet back to the React component.
+// This simplified version just logs results for debugging.
+
+// Initialize the plugin
+const plugin = VisionCameraProxy.initFrameProcessorPlugin('detectFaces', {});
+
+export const useFaceVerification = () => {
+  const frameProcessor = useFrameProcessor((frame) => {
+    'worklet';
+
+    try {
+      if (plugin == null) {
+        console.error('Failed to load Frame Processor Plugin "detectFaces"!');
+        return null;
+      }
+
+      const result = plugin.call(frame, {}) as any;
+
+      // For debugging - this works in worklets
+      if (result && result.faceDetected) {
+        console.log('Face detected:', result);
+      }
+
+      return result;
+    } catch (error) {
+      console.error('Face verification error:', error);
+      return {
+        faceDetected: false,
+        error: error instanceof Error ? error.message : 'Unknown error',
+      };
+    }
+  }, []);
+
+  return frameProcessor;
+};
+
+// Utility functions for interpreting results
+export const FaceVerificationUtils = {
+  // Check if head is turned left (yaw > 20 degrees)
+  isHeadTurnedLeft: (result: FaceVerificationResult): boolean => {
+    return result.headPose?.yaw ? result.headPose.yaw > 20 : false;
+  },
+
+  // Check if head is turned right (yaw < -20 degrees)
+  isHeadTurnedRight: (result: FaceVerificationResult): boolean => {
+    return result.headPose?.yaw ? result.headPose.yaw < -20 : false;
+  },
+
+  // Check if head is tilted up (pitch > 10 degrees)
+  isHeadTiltedUp: (result: FaceVerificationResult): boolean => {
+    return result.headPose?.pitch ? result.headPose.pitch > 10 : false;
+  },
+
+  // Check if head is tilted down (pitch < -10 degrees)
+  isHeadTiltedDown: (result: FaceVerificationResult): boolean => {
+    return result.headPose?.pitch ? result.headPose.pitch < -10 : false;
+  },
+
+  // Check if face is centered (within ±10 degrees)
+  isFaceCentered: (result: FaceVerificationResult): boolean => {
+    if (!result.headPose) return false;
+    const { yaw, pitch } = result.headPose;
+    return Math.abs(yaw) <= 10 && Math.abs(pitch) <= 10;
+  },
+
+  // Check if smile is confident (high probability)
+  isConfidentSmile: (result: FaceVerificationResult): boolean => {
+    return result.smileProbability
+      ? result.smileProbability > 0.8
+      : result.isSmiling || false;
+  },
+
+  // Check if both eyes are confidently closed
+  isConfidentBlink: (result: FaceVerificationResult): boolean => {
+    if (
+      result.leftEyeOpenProbability !== undefined &&
+      result.rightEyeOpenProbability !== undefined
+    ) {
+      return (
+        result.leftEyeOpenProbability < 0.2 &&
+        result.rightEyeOpenProbability < 0.2
+      );
+    }
+    return result.isBlinking || false;
+  },
+};

package/src/components/biometrics/useFaceVerificationFlow.ts

@@ -0,0 +1,224 @@
+import { useState, useEffect, useCallback } from 'react';
+import {
+  FaceVerificationResult,
+  FaceVerificationUtils,
+} from './useFaceVerification';
+
+export type VerificationStep =
+  | 'position_face'
+  | 'smile'
+  | 'blink'
+  | 'turn_left'
+  | 'turn_right'
+  | 'completed'
+  | 'failed';
+
+export interface VerificationFlowState {
+  currentStep: VerificationStep;
+  completedSteps: VerificationStep[];
+  stepStartTime: number;
+  totalStartTime: number;
+  isProcessing: boolean;
+  progress: number;
+  instruction: string;
+  error?: string;
+}
+
+export interface VerificationFlowConfig {
+  stepTimeout: number; // Maximum time per step (ms)
+  totalTimeout: number; // Maximum total time (ms)
+  confirmationFrames: number; // Frames needed to confirm action
+  requiredSteps: VerificationStep[]; // Steps to complete
+}
+
+const DEFAULT_CONFIG: VerificationFlowConfig = {
+  stepTimeout: 10000, // 10 seconds per step
+  totalTimeout: 60000, // 1 minute total
+  confirmationFrames: 5, // 5 consecutive frames
+  requiredSteps: ['position_face', 'smile', 'blink', 'turn_left', 'turn_right'],
+};
+
+const STEP_INSTRUCTIONS: Record<VerificationStep, string> = {
+  position_face: 'Position your face in the center of the frame',
+  smile: 'Please smile for the camera',
+  blink: 'Please blink your eyes',
+  turn_left: 'Slowly turn your head to the left',
+  turn_right: 'Slowly turn your head to the right',
+  completed: 'Verification completed successfully!',
+  failed: 'Verification failed. Please try again.',
+};
+
+export const useFaceVerificationFlow = (
+  config: Partial<VerificationFlowConfig> = {}
+) => {
+  const fullConfig = { ...DEFAULT_CONFIG, ...config };
+
+  const [state, setState] = useState<VerificationFlowState>({
+    currentStep: 'position_face',
+    completedSteps: [],
+    stepStartTime: Date.now(),
+    totalStartTime: Date.now(),
+    isProcessing: false,
+    progress: 0,
+    instruction: STEP_INSTRUCTIONS.position_face,
+  });
+
+  const [confirmationCount, setConfirmationCount] = useState(0);
+
+  // Reset verification flow
+  const resetFlow = useCallback(() => {
+    const now = Date.now();
+    setState({
+      currentStep: 'position_face',
+      completedSteps: [],
+      stepStartTime: now,
+      totalStartTime: now,
+      isProcessing: false,
+      progress: 0,
+      instruction: STEP_INSTRUCTIONS.position_face,
+    });
+    setConfirmationCount(0);
+  }, []);
+
+  // Check if current step is completed based on face detection result
+  const checkStepCompletion = useCallback(
+    (result: FaceVerificationResult): boolean => {
+      if (!result.faceDetected) return false;
+
+      switch (state.currentStep) {
+        case 'position_face':
+          return FaceVerificationUtils.isFaceCentered(result);
+
+        case 'smile':
+          return FaceVerificationUtils.isConfidentSmile(result);
+
+        case 'blink':
+          return FaceVerificationUtils.isConfidentBlink(result);
+
+        case 'turn_left':
+          return FaceVerificationUtils.isHeadTurnedLeft(result);
+
+        case 'turn_right':
+          return FaceVerificationUtils.isHeadTurnedRight(result);
+
+        default:
+          return false;
+      }
+    },
+    [state.currentStep]
+  );
+
+  // Get next step in sequence
+  const getNextStep = useCallback(
+    (currentStep: VerificationStep): VerificationStep => {
+      const currentIndex = fullConfig.requiredSteps.indexOf(currentStep);
+      if (
+        currentIndex === -1 ||
+        currentIndex === fullConfig.requiredSteps.length - 1
+      ) {
+        return 'completed';
+      }
+      const nextStep = fullConfig.requiredSteps[currentIndex + 1];
+      return nextStep || 'completed';
+    },
+    [fullConfig.requiredSteps]
+  );
+
+  // Process face detection result
+  const processFaceResult = useCallback(
+    (result: FaceVerificationResult) => {
+      if (state.currentStep === 'completed' || state.currentStep === 'failed') {
+        return;
+      }
+
+      const now = Date.now();
+
+      // Check for timeouts
+      if (now - state.totalStartTime > fullConfig.totalTimeout) {
+        setState((prev) => ({
+          ...prev,
+          currentStep: 'failed',
+          instruction: 'Verification timed out. Please try again.',
+          error: 'Total verification timeout exceeded',
+        }));
+        return;
+      }
+
+      if (now - state.stepStartTime > fullConfig.stepTimeout) {
+        setState((prev) => ({
+          ...prev,
+          currentStep: 'failed',
+          instruction: 'Step timed out. Please try again.',
+          error: 'Step timeout exceeded',
+        }));
+        return;
+      }
+
+      // Check if current step is completed
+      const stepCompleted = checkStepCompletion(result);
+
+      if (stepCompleted) {
+        setConfirmationCount((prev) => prev + 1);
+
+        // Require multiple consecutive confirmations
+        if (confirmationCount + 1 >= fullConfig.confirmationFrames) {
+          const nextStep = getNextStep(state.currentStep);
+          const newCompletedSteps = [
+            ...state.completedSteps,
+            state.currentStep,
+          ];
+          const newProgress =
+            (newCompletedSteps.length / fullConfig.requiredSteps.length) * 100;
+
+          setState((prev) => ({
+            ...prev,
+            currentStep: nextStep,
+            completedSteps: newCompletedSteps,
+            stepStartTime: now,
+            progress: newProgress,
+            instruction: STEP_INSTRUCTIONS[nextStep],
+            isProcessing: nextStep === 'completed',
+          }));
+
+          setConfirmationCount(0);
+        }
+      } else {
+        // Reset confirmation count if step not completed
+        setConfirmationCount(0);
+      }
+    },
+    [
+      state,
+      fullConfig.totalTimeout,
+      fullConfig.stepTimeout,
+      fullConfig.confirmationFrames,
+      fullConfig.requiredSteps.length,
+      confirmationCount,
+      checkStepCompletion,
+      getNextStep,
+    ]
+  );
+
+  // Auto-reset on mount
+  useEffect(() => {
+    resetFlow();
+  }, [resetFlow]);
+
+  return {
+    state,
+    processFaceResult,
+    resetFlow,
+    isCompleted: state.currentStep === 'completed',
+    isFailed: state.currentStep === 'failed',
+    isActive:
+      state.currentStep !== 'completed' && state.currentStep !== 'failed',
+    remainingTime: Math.max(
+      0,
+      fullConfig.stepTimeout - (Date.now() - state.stepStartTime)
+    ),
+    totalRemainingTime: Math.max(
+      0,
+      fullConfig.totalTimeout - (Date.now() - state.totalStartTime)
+    ),
+  };
+};