@hexar/biometric-identity-sdk-react-native 1.0.0

package/src/components/BiometricIdentityFlow.tsx

@@ -0,0 +1,557 @@
+/**
+ * React Native Biometric Identity Flow Component
+ * Main UI component for identity verification with backend AI support
+ */
+
+import React, { useState, useEffect, useCallback } from 'react';
+import {
+  View,
+  Text,
+  StyleSheet,
+  TouchableOpacity,
+  ActivityIndicator,
+  SafeAreaView,
+} from 'react-native';
+import {
+  ValidationResult,
+  ThemeConfig,
+  BiometricError,
+  SDKStep,
+  getStrings,
+  setLanguage,
+  SupportedLanguage,
+} from '@hexar/biometric-identity-sdk-core';
+import type { ChallengeAction } from './VideoRecorder';
+import { useBiometricSDK } from '../hooks/useBiometricSDK';
+import { CameraCapture } from './CameraCapture';
+import { VideoRecorder, VideoRecordingResult } from './VideoRecorder';
+import { ValidationProgress } from './ValidationProgress';
+import { ResultScreen } from './ResultScreen';
+import { ErrorScreen } from './ErrorScreen';
+import { InstructionsScreen } from './InstructionsScreen';
+
+export interface BiometricIdentityFlowProps {
+  onValidationComplete: (result: ValidationResult) => void;
+  onError: (error: BiometricError) => void;
+  theme?: ThemeConfig;
+  language?: SupportedLanguage;
+  customTranslations?: Record<string, string>;
+  smartLivenessMode?: boolean;
+}
+
+export const BiometricIdentityFlow: React.FC<BiometricIdentityFlowProps> = ({
+  onValidationComplete,
+  onError,
+  theme,
+  language = 'en',
+  customTranslations,
+  smartLivenessMode = true,
+}) => {
+  const {
+    sdk,
+    state,
+    isInitialized,
+    isUsingBackend,
+    challenges,
+    uploadFrontID,
+    uploadBackID,
+    storeVideoRecording,
+    fetchChallenges,
+    validateIdentity,
+    reset,
+  } = useBiometricSDK();
+
+  const [showCamera, setShowCamera] = useState(false);
+  const [cameraMode, setCameraMode] = useState<'front' | 'back' | 'video'>('front');
+  const [showInstructions, setShowInstructions] = useState(true);
+  const [currentChallenges, setCurrentChallenges] = useState<ChallengeAction[]>([]);
+  const [isLoadingChallenges, setIsLoadingChallenges] = useState(false);
+
+  useEffect(() => {
+    setLanguage(language);
+  }, [language]);
+
+  const strings = getStrings();
+  const styles = createStyles(theme);
+
+  // Handle validation result
+  useEffect(() => {
+    if (state.validationResult) {
+      onValidationComplete(state.validationResult);
+    }
+  }, [state.validationResult, onValidationComplete]);
+
+  // Handle error
+  useEffect(() => {
+    if (state.error) {
+      onError(state.error);
+    }
+  }, [state.error, onError]);
+
+  /**
+   * Start capture process
+   */
+  const handleCaptureStart = useCallback(async (mode: 'front' | 'back' | 'video') => {
+    setCameraMode(mode);
+    
+    // If video mode, fetch challenges first
+    if (mode === 'video' && smartLivenessMode && isUsingBackend) {
+      setIsLoadingChallenges(true);
+      try {
+        const challenges = await fetchChallenges('active');
+        setCurrentChallenges(challenges);
+      } catch (error) {
+        console.warn('Failed to fetch challenges, using defaults');
+        setCurrentChallenges(sdk.getDefaultChallenges());
+      }
+      setIsLoadingChallenges(false);
+    } else if (mode === 'video' && smartLivenessMode) {
+      // Use default challenges for offline mode
+      setCurrentChallenges(sdk.getDefaultChallenges());
+    }
+    
+    setShowCamera(true);
+  }, [smartLivenessMode, isUsingBackend, fetchChallenges, sdk]);
+
+  /**
+   * Handle capture completion
+   */
+  const handleCaptureComplete = useCallback(async (data: any) => {
+    setShowCamera(false);
+
+    try {
+      if (cameraMode === 'front') {
+        await uploadFrontID(data);
+      } else if (cameraMode === 'back') {
+        await uploadBackID(data);
+      } else if (cameraMode === 'video') {
+        // Handle video recording result
+        const videoResult: VideoRecordingResult = data;
+        
+        await storeVideoRecording({
+          frames: videoResult.frames,
+          duration: videoResult.duration,
+          instructionsFollowed: videoResult.instructionsFollowed,
+          qualityScore: videoResult.qualityScore,
+          challengesCompleted: videoResult.challengesCompleted,
+          sessionId: videoResult.sessionId,
+        });
+        
+        // Automatically start validation after video
+        await validateIdentity();
+      }
+    } catch (error) {
+      console.error('Capture error:', error);
+      onError({
+        name: 'BiometricError',
+        message: error instanceof Error ? error.message : 'Unknown error during capture',
+        code: 'LIVENESS_CHECK_FAILED',
+      } as BiometricError);
+    }
+  }, [cameraMode, uploadFrontID, uploadBackID, storeVideoRecording, validateIdentity, onError]);
+
+  /**
+   * Handle retry
+   */
+  const handleRetry = useCallback(() => {
+    reset();
+    setCurrentChallenges([]);
+    setShowInstructions(true);
+  }, [reset]);
+
+  // Show loading while initializing
+  if (!isInitialized) {
+    return (
+      <SafeAreaView style={styles.container}>
+        <View style={styles.loadingFullScreen}>
+          <ActivityIndicator size="large" color={theme?.primaryColor || '#6366F1'} />
+          <Text style={styles.loadingText}>{strings.initialization.initializing}</Text>
+        </View>
+      </SafeAreaView>
+    );
+  }
+
+  // Show instructions on first load
+  if (showInstructions) {
+    return (
+      <InstructionsScreen
+        theme={theme}
+        language={language}
+        onStart={() => setShowInstructions(false)}
+      />
+    );
+  }
+
+  // Show camera/video recorder
+  if (showCamera) {
+    if (cameraMode === 'video') {
+      return (
+        <VideoRecorder
+          theme={theme}
+          challenges={currentChallenges}
+          smartMode={smartLivenessMode}
+          sessionId={sdk.getSessionId() || undefined}
+          onComplete={handleCaptureComplete}
+          onCancel={() => setShowCamera(false)}
+          onFetchChallenges={async () => {
+            const challenges = await fetchChallenges('active');
+            return challenges;
+          }}
+        />
+      );
+    }
+
+    return (
+      <CameraCapture
+        mode={cameraMode}
+        theme={theme}
+        onCapture={handleCaptureComplete}
+        onCancel={() => setShowCamera(false)}
+      />
+    );
+  }
+
+  // Show validation progress
+  if (state.currentStep === SDKStep.VALIDATING) {
+    return (
+      <ValidationProgress
+        progress={state.progress}
+        theme={theme}
+        language={language}
+      />
+    );
+  }
+
+  // Show result
+  if (state.currentStep === SDKStep.RESULT && state.validationResult) {
+    return (
+      <ResultScreen
+        result={state.validationResult}
+        theme={theme}
+        language={language}
+        onClose={() => onValidationComplete(state.validationResult!)}
+      />
+    );
+  }
+
+  // Show error
+  if (state.currentStep === SDKStep.ERROR && state.error) {
+    return (
+      <ErrorScreen
+        error={state.error}
+        theme={theme}
+        language={language}
+        onRetry={handleRetry}
+        onClose={() => onError(state.error!)}
+      />
+    );
+  }
+
+  return (
+    <SafeAreaView style={styles.container}>
+      <View style={styles.content}>
+        <Text style={styles.title}>{strings.instructions.title}</Text>
+        <Text style={styles.subtitle}>{strings.instructions.subtitle}</Text>
+
+        {isUsingBackend && (
+          <View style={styles.backendBadge}>
+            <View style={styles.backendDot} />
+            <Text style={styles.backendText}>{strings.badges.secureVerification}</Text>
+          </View>
+        )}
+
+        <View style={styles.progressContainer}>
+          <StepIndicator 
+            step={1} 
+            active={state.currentStep === SDKStep.CAPTURE_FRONT_ID}
+            completed={!!state.frontID}
+            label={strings.steps.frontId}
+            theme={theme}
+          />
+          <View style={styles.stepConnector} />
+          <StepIndicator 
+            step={2} 
+            active={state.currentStep === SDKStep.CAPTURE_BACK_ID}
+            completed={!!state.backID}
+            label={strings.steps.backId}
+            theme={theme}
+          />
+          <View style={styles.stepConnector} />
+          <StepIndicator 
+            step={3} 
+            active={state.currentStep === SDKStep.RECORD_LIVENESS}
+            completed={!!state.videoData}
+            label={strings.steps.faceVideo}
+            theme={theme}
+          />
+        </View>
+
+        <View style={styles.actionsContainer}>
+          {!state.frontID && (
+            <ActionButton
+              title={strings.capture.frontId.button}
+              subtitle={strings.capture.frontId.instruction}
+              onPress={() => handleCaptureStart('front')}
+              theme={theme}
+              disabled={state.isLoading}
+            />
+          )}
+
+          {state.frontID && !state.backID && (
+            <ActionButton
+              title={strings.capture.backId.button}
+              subtitle={strings.capture.backId.instruction}
+              onPress={() => handleCaptureStart('back')}
+              theme={theme}
+              disabled={state.isLoading}
+            />
+          )}
+
+          {state.frontID && state.backID && !state.videoData && (
+            <ActionButton
+              title={strings.liveness.title}
+              subtitle={strings.liveness.instructions.stayStill}
+              onPress={() => handleCaptureStart('video')}
+              theme={theme}
+              disabled={state.isLoading || isLoadingChallenges}
+            />
+          )}
+        </View>
+
+        {(state.isLoading || isLoadingChallenges) && (
+          <View style={styles.loadingContainer}>
+            <ActivityIndicator size="large" color={theme?.primaryColor || '#6366F1'} />
+            <Text style={styles.loadingText}>
+              {isLoadingChallenges ? strings.liveness.preparing : strings.common.loading}
+            </Text>
+          </View>
+        )}
+      </View>
+    </SafeAreaView>
+  );
+};
+
+// Step Indicator Component
+interface StepIndicatorProps {
+  step: number;
+  active: boolean;
+  completed: boolean;
+  label: string;
+  theme?: ThemeConfig;
+}
+
+const StepIndicator: React.FC<StepIndicatorProps> = ({
+  step,
+  active,
+  completed,
+  label,
+  theme,
+}) => {
+  const primaryColor = theme?.primaryColor || '#6366F1';
+  const successColor = theme?.successColor || '#10B981';
+
+  return (
+    <View style={stepStyles.container}>
+      <View
+        style={[
+          stepStyles.circle,
+          active && { backgroundColor: primaryColor, borderColor: primaryColor },
+          completed && { backgroundColor: successColor, borderColor: successColor },
+        ]}
+      >
+        <Text style={[stepStyles.stepNumber, (active || completed) && stepStyles.stepNumberActive]}>
+          {completed ? '✓' : step}
+        </Text>
+      </View>
+      <Text style={[stepStyles.label, active && { color: primaryColor }]}>{label}</Text>
+    </View>
+  );
+};
+
+const stepStyles = StyleSheet.create({
+  container: {
+    alignItems: 'center',
+    flex: 1,
+  },
+  circle: {
+    width: 44,
+    height: 44,
+    borderRadius: 22,
+    backgroundColor: '#F3F4F6',
+    borderWidth: 2,
+    borderColor: '#E5E7EB',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  stepNumber: {
+    fontSize: 16,
+    fontWeight: '600',
+    color: '#6B7280',
+  },
+  stepNumberActive: {
+    color: '#FFFFFF',
+  },
+  label: {
+    marginTop: 8,
+    fontSize: 12,
+    color: '#6B7280',
+    textAlign: 'center',
+  },
+});
+
+// Action Button Component
+interface ActionButtonProps {
+  title: string;
+  subtitle?: string;
+  onPress: () => void;
+  theme?: ThemeConfig;
+  disabled?: boolean;
+}
+
+const ActionButton: React.FC<ActionButtonProps> = ({
+  title,
+  subtitle,
+  onPress,
+  theme,
+  disabled,
+}) => {
+  const primaryColor = theme?.primaryColor || '#6366F1';
+
+  return (
+    <TouchableOpacity
+      style={[
+        buttonStyles.button,
+        { backgroundColor: primaryColor },
+        disabled && buttonStyles.buttonDisabled,
+      ]}
+      onPress={onPress}
+      disabled={disabled}
+    >
+      <Text style={buttonStyles.buttonText}>{title}</Text>
+      {subtitle && (
+        <Text style={buttonStyles.buttonSubtext}>{subtitle}</Text>
+      )}
+    </TouchableOpacity>
+  );
+};
+
+const buttonStyles = StyleSheet.create({
+  button: {
+    paddingVertical: 16,
+    paddingHorizontal: 32,
+    borderRadius: 12,
+    alignItems: 'center',
+    marginVertical: 8,
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.1,
+    shadowRadius: 4,
+    elevation: 3,
+  },
+  buttonDisabled: {
+    opacity: 0.5,
+  },
+  buttonText: {
+    color: '#FFFFFF',
+    fontSize: 18,
+    fontWeight: '700',
+  },
+  buttonSubtext: {
+    color: 'rgba(255, 255, 255, 0.8)',
+    fontSize: 13,
+    marginTop: 4,
+  },
+});
+
+// Create styles based on theme
+const createStyles = (theme?: ThemeConfig) => {
+  const backgroundColor = theme?.backgroundColor || '#FFFFFF';
+  const textColor = theme?.textColor || '#000000';
+  const secondaryTextColor = theme?.secondaryTextColor || '#6B7280';
+  const primaryColor = theme?.primaryColor || '#6366F1';
+
+  return StyleSheet.create({
+    container: {
+      flex: 1,
+      backgroundColor,
+    },
+    content: {
+      flex: 1,
+      padding: 24,
+    },
+    title: {
+      fontSize: 28,
+      fontWeight: 'bold',
+      color: textColor,
+      marginBottom: 8,
+      textAlign: 'center',
+    },
+    subtitle: {
+      fontSize: 16,
+      color: secondaryTextColor,
+      marginBottom: 24,
+      textAlign: 'center',
+    },
+    backendBadge: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'center',
+      backgroundColor: 'rgba(16, 185, 129, 0.1)',
+      paddingHorizontal: 12,
+      paddingVertical: 6,
+      borderRadius: 16,
+      alignSelf: 'center',
+      marginBottom: 24,
+    },
+    backendDot: {
+      width: 8,
+      height: 8,
+      borderRadius: 4,
+      backgroundColor: '#10B981',
+      marginRight: 8,
+    },
+    backendText: {
+      color: '#10B981',
+      fontSize: 12,
+      fontWeight: '600',
+    },
+    progressContainer: {
+      flexDirection: 'row',
+      justifyContent: 'space-around',
+      alignItems: 'center',
+      marginBottom: 48,
+      paddingHorizontal: 16,
+    },
+    stepConnector: {
+      flex: 0.5,
+      height: 2,
+      backgroundColor: '#E5E7EB',
+      marginHorizontal: -10,
+    },
+    actionsContainer: {
+      marginTop: 24,
+    },
+    loadingContainer: {
+      marginTop: 32,
+      alignItems: 'center',
+    },
+    loadingFullScreen: {
+      flex: 1,
+      justifyContent: 'center',
+      alignItems: 'center',
+    },
+    loadingText: {
+      marginTop: 12,
+      fontSize: 14,
+      color: secondaryTextColor,
+    },
+    loadingSubtext: {
+      marginTop: 4,
+      fontSize: 12,
+      color: secondaryTextColor,
+      opacity: 0.7,
+    },
+  });
+};
+
+export default BiometricIdentityFlow;