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

package/src/components/ValidationProgress.tsx

@@ -0,0 +1,223 @@
+/**
+ * Validation Progress Component
+ * Shows AI validation progress
+ */
+
+import React from 'react';
+import {
+  View,
+  Text,
+  StyleSheet,
+  ActivityIndicator,
+} from 'react-native';
+import { ThemeConfig, SupportedLanguage } from '@hexar/biometric-identity-sdk-core';
+
+export interface ValidationProgressProps {
+  progress: number;
+  theme?: ThemeConfig;
+  language?: SupportedLanguage;
+}
+
+export const ValidationProgress: React.FC<ValidationProgressProps> = ({
+  progress,
+  theme,
+  language = 'en',
+}) => {
+  const getStatusText = () => {
+    if (progress < 80) return language === 'es' ? 'Extrayendo datos del documento...' : 'Extracting document data...';
+    if (progress < 85) return language === 'es' ? 'Validando presencia vital...' : 'Validating liveness...';
+    if (progress < 90) return language === 'es' ? 'Detectando rostro en documento...' : 'Detecting face in document...';
+    if (progress < 95) return language === 'es' ? 'Comparando rostros...' : 'Comparing faces...';
+    return language === 'es' ? 'Validando autenticidad del documento...' : 'Validating document authenticity...';
+  };
+
+  return (
+    <View style={styles.container}>
+      <View style={styles.content}>
+        <ActivityIndicator
+          size="large"
+          color={theme?.primaryColor || '#6366F1'}
+        />
+        
+        <Text style={[styles.title, { color: theme?.textColor || '#000000' }]}>
+          {language === 'es' ? 'Validando Identidad' : 'Validating Identity'}
+        </Text>
+
+        <Text style={[styles.statusText, { color: theme?.secondaryTextColor || '#6B7280' }]}>
+          {getStatusText()}
+        </Text>
+
+        {/* Progress Bar */}
+        <View style={styles.progressBarContainer}>
+          <View style={styles.progressBar}>
+            <View
+              style={[
+                styles.progressFill,
+                {
+                  width: `${progress}%`,
+                  backgroundColor: theme?.primaryColor || '#6366F1',
+                },
+              ]}
+            />
+          </View>
+          <Text style={[styles.progressText, { color: theme?.textColor || '#000000' }]}>
+            {Math.round(progress)}%
+          </Text>
+        </View>
+
+        {/* Validation Steps */}
+        <View style={styles.stepsContainer}>
+          <ValidationStep
+            icon="✓"
+            text={language === 'es' ? 'Extracción OCR' : 'OCR Extraction'}
+            completed={progress >= 80}
+            theme={theme}
+          />
+          <ValidationStep
+            icon="✓"
+            text={language === 'es' ? 'Detección de Presencia Vital' : 'Liveness Detection'}
+            completed={progress >= 85}
+            theme={theme}
+          />
+          <ValidationStep
+            icon="✓"
+            text={language === 'es' ? 'Coincidencia Facial' : 'Face Matching'}
+            completed={progress >= 95}
+            theme={theme}
+          />
+          <ValidationStep
+            icon="✓"
+            text={language === 'es' ? 'Validación de Documento' : 'Document Validation'}
+            completed={progress >= 100}
+            theme={theme}
+          />
+        </View>
+
+        <Text style={styles.bottomText}>
+          {language === 'es' 
+            ? 'Esto puede tomar unos segundos...'
+            : 'This may take a few seconds...'}
+        </Text>
+      </View>
+    </View>
+  );
+};
+
+interface ValidationStepProps {
+  icon: string;
+  text: string;
+  completed: boolean;
+  theme?: ThemeConfig;
+}
+
+const ValidationStep: React.FC<ValidationStepProps> = ({
+  icon,
+  text,
+  completed,
+  theme,
+}) => (
+  <View style={stepStyles.container}>
+    <View
+      style={[
+        stepStyles.iconContainer,
+        completed && {
+          backgroundColor: theme?.successColor || '#10B981',
+        },
+      ]}
+    >
+      {completed && <Text style={stepStyles.icon}>{icon}</Text>}
+    </View>
+    <Text style={[stepStyles.text, completed && stepStyles.textCompleted]}>
+      {text}
+    </Text>
+  </View>
+);
+
+const stepStyles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginVertical: 8,
+  },
+  iconContainer: {
+    width: 24,
+    height: 24,
+    borderRadius: 12,
+    backgroundColor: '#E5E7EB',
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginRight: 12,
+  },
+  icon: {
+    color: '#FFFFFF',
+    fontSize: 14,
+    fontWeight: 'bold',
+  },
+  text: {
+    fontSize: 14,
+    color: '#9CA3AF',
+  },
+  textCompleted: {
+    color: '#111827',
+    fontWeight: '500',
+  },
+});
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#FFFFFF',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  content: {
+    width: '85%',
+    alignItems: 'center',
+  },
+  title: {
+    fontSize: 24,
+    fontWeight: 'bold',
+    marginTop: 24,
+    marginBottom: 8,
+  },
+  statusText: {
+    fontSize: 16,
+    marginBottom: 32,
+    textAlign: 'center',
+  },
+  progressBarContainer: {
+    width: '100%',
+    marginBottom: 32,
+  },
+  progressBar: {
+    width: '100%',
+    height: 8,
+    backgroundColor: '#E5E7EB',
+    borderRadius: 4,
+    overflow: 'hidden',
+    marginBottom: 8,
+  },
+  progressFill: {
+    height: '100%',
+    borderRadius: 4,
+  },
+  progressText: {
+    fontSize: 14,
+    fontWeight: '600',
+    textAlign: 'center',
+  },
+  stepsContainer: {
+    width: '100%',
+    marginTop: 24,
+    marginBottom: 32,
+  },
+  bottomText: {
+    fontSize: 14,
+    color: '#9CA3AF',
+    textAlign: 'center',
+  },
+});
+
+export default ValidationProgress;
+
+