@sanctum-key/react-native-sdk 1.0.0

package/src/components/TemplateKYCFlowRefactored.tsx

@@ -0,0 +1,473 @@
+import React, { useEffect } from 'react';
+import { View, Text, StyleSheet, SafeAreaView, TouchableOpacity, ActivityIndicator, Dimensions, ScrollView, Platform } from 'react-native';
+import { KYCTemplate, VerificationState } from '../types/KYC.types';
+import { TemplateKYCFlowProvider, useTemplateKYCFlowContext } from '../hooks/useTemplateKYCFlow';
+import { useI18n } from '../hooks/useI18n';
+import { showAlert } from '../utils/platformAlert';
+import { IDCardCapture } from './KYCElements/IDCardCapture';
+import { SelfieCaptureTemplate } from './KYCElements/SelfieCaptureTemplate';
+import { FileUploadTemplate } from './KYCElements/FileUploadTemplate';
+import { LocationCaptureTemplate } from './KYCElements/LocationCaptureTemplate';
+import { CountrySelectionTemplate } from './KYCElements/CountrySelectionTemplate';
+import { InitializationStep } from './KYCElements/InitializationStep';
+import { ReviewSubmitTemplate } from './KYCElements/ReviewSubmitTemplate';
+import { VerificationProgressTemplate } from './KYCElements/VerificationProgressTemplate';
+import { useTemplateLoader } from '../hooks/useTemplateLoader';
+import { WelcomeTemplate } from './KYCElements/WelcomeTemplate';
+import { EmailVerificationTemplate } from './KYCElements/EmailVerificationTemplate';
+import { PhoneVerificationTemplate } from './KYCElements/PhoneVerificationTemplate';
+import { PersonalInformationTemplate } from './KYCElements/PersonalInformationTemplate';
+import { AdditionalDocumentsTemplate } from './KYCElements/AdditionalDocumentsTemplate';
+import { KycEnvironment, BackendEnvironment } from '../types/env.types';
+import KYCConfig from '../config/KYCConfig';
+
+interface TemplateKYCFlowProps {
+  template?: KYCTemplate;        // Format SDK direct (existing, now optional)
+  templateId?: string;           // New: ID to load from API
+  onComplete?: (data: VerificationState) => void;
+  onError?: (error: string) => void;
+  language?: string;
+  onCancel?: () => void;
+  API_KEY?: string;              // Required if templateId is used
+  env?: KycEnvironment;           // Flow execution: PRODUCTION (full AI) or SANDBOX (skip AI)
+  serverEnv?: BackendEnvironment; // Backend to call: PRODUCTION or TEST (API URL)
+  existingSessionId?: string;
+  /** Index in template.components (0-based) to resume at — e.g. from URL component_index or template table */
+  initialComponentIndex?: number;
+  /** Pays / type de document depuis l'URL de reprise (reprise multi-appareil) */
+  initialCountryResume?: { code: string; documentType: string; region?: string };
+}
+
+export const TemplateKYCFlow: React.FC<TemplateKYCFlowProps> = ({
+  template: providedTemplate,
+  templateId,
+  onComplete,
+  onError,
+  language = 'fr',
+  onCancel,
+  API_KEY,
+  env = 'PRODUCTION',
+  serverEnv,
+  existingSessionId,
+  initialComponentIndex,
+  initialCountryResume,
+}) => {
+  const { t } = useI18n();
+  const { template: loadedTemplate, isLoading, error, loadTemplate } = useTemplateLoader();
+
+  // Which backend URL to call (independent from flow env)
+  useEffect(() => {
+    if (serverEnv !== undefined) {
+      KYCConfig.setBackendEnvironment(serverEnv);
+    }
+  }, [serverEnv]);
+
+  // Validate props
+  useEffect(() => {
+    if (!providedTemplate && !templateId) {
+      const errorMsg = 'Either template or templateId must be provided';
+      onError?.(errorMsg);
+      return;
+    }
+
+    if (templateId && !API_KEY) {
+      // Try to load without API key (will use token authentication)
+      loadTemplate(templateId);
+    } else if (templateId && API_KEY) {
+      loadTemplate(templateId, API_KEY);
+    }
+  }, [templateId, API_KEY, providedTemplate, loadTemplate, onError]);
+
+  // Handle loading errors
+  useEffect(() => {
+    if (error) {
+      onError?.(error);
+    }
+  }, [error, onError]);
+
+  const OnCancel = () => {
+    showAlert(
+      t('kyc.cancelConfirmation.title'),
+      t('kyc.cancelConfirmation.message'),
+      [
+        { text: t('kyc.cancelConfirmation.cancelButton'), style: 'cancel' },
+        {
+          text: t('kyc.cancelConfirmation.confirmButton'),
+          onPress: () => {
+            onCancel?.();
+          }
+        },
+      ]
+    );
+  };
+
+  // Determine which template to use
+  const template = providedTemplate || loadedTemplate;
+
+  // Show loading state while fetching template
+  if (templateId && isLoading && !template) {
+    return (
+      <View style={styles.loadingContainer}>
+        <ActivityIndicator size="large" color="#2DBD60" />
+        <Text style={styles.loadingText}>{t('common.loading') || 'Loading template...'}</Text>
+      </View>
+    );
+  }
+
+  // Show error state if template failed to load
+  if (templateId && error && !template) {
+    return (
+      <View style={styles.errorContainer}>
+        <Text style={styles.errorText}>{error}</Text>
+        <TouchableOpacity
+          style={styles.retryButton}
+          onPress={() => loadTemplate(templateId, API_KEY)}
+        >
+          <Text style={styles.retryButtonText}>{t('common.retry') || 'Retry'}</Text>
+        </TouchableOpacity>
+      </View>
+    );
+  }
+
+  // Show error if no template available
+  if (!template) {
+    return (
+      <View style={styles.errorContainer}>
+        <Text style={styles.errorText}>
+          {t('errors.unknownError') || 'Template not available'}
+        </Text>
+      </View>
+    );
+  }
+
+  return (
+    <TemplateKYCFlowProvider
+      template={template}
+      onComplete={onComplete}
+      onError={onError}
+      onCancel={OnCancel}
+      initialLanguage={language}
+      apiKey={API_KEY}
+      env={env}
+      existingSessionId={existingSessionId}
+      initialComponentIndex={initialComponentIndex}
+      initialCountryResume={initialCountryResume}
+    >
+      <TemplateKYCFlowContent onCancel={OnCancel} />
+    </TemplateKYCFlowProvider>
+  );
+};
+
+const TemplateKYCFlowContent: React.FC<{ onCancel?: () => void }> = ({ onCancel }) => {
+  const {
+    state,
+    actions,
+    currentComponent,
+    progress,
+  } = useTemplateKYCFlowContext();
+
+  const { t } = useI18n();
+
+  const updateComponentData = (componentId: number, data: unknown) => {
+    actions.updateComponentData(componentId, data);
+  };
+
+  if (!currentComponent) {
+    return (
+      <View style={styles.container}>
+        <Text style={styles.errorText}>{t('errors.unknownError')}</Text>
+      </View>
+    );
+  }
+
+  // Rendu du composant actuel
+  const renderCurrentComponent = () => {
+    const commonProps = {
+      component: currentComponent,
+      value: state.componentData[currentComponent.id],
+      onValueChange: (data: unknown) => updateComponentData(currentComponent.id, data),
+      error: state.errors[currentComponent.id],
+      language: state.currentLanguage,
+    };
+
+    if (!state.session.isInitialized) {
+      return <InitializationStep session={state.session} />
+    }
+
+    switch (currentComponent.type) {
+      case 'welcome':
+        return <WelcomeTemplate {...commonProps} />;
+
+      case 'id_card':
+        return <IDCardCapture {...commonProps} />;
+
+      case 'selfie':
+        return <SelfieCaptureTemplate {...commonProps} />;
+
+      case 'file_upload':
+        return <FileUploadTemplate {...commonProps} />;
+
+      case 'location':
+        return <LocationCaptureTemplate {...commonProps} />;
+
+      case 'country_selection':
+        return <CountrySelectionTemplate {...commonProps} />;
+
+      case 'review_submit':
+        return <ReviewSubmitTemplate {...commonProps} />;
+
+      case 'email_verification':
+        return <EmailVerificationTemplate {...commonProps} />;
+
+      case 'phone_verification':
+        return <PhoneVerificationTemplate {...commonProps} />;
+
+      case 'personal_information':
+        return <PersonalInformationTemplate {...commonProps} />;
+
+      case 'additional_documents':
+        return <AdditionalDocumentsTemplate {...commonProps} />;
+
+      case 'verification_progress':
+        return <VerificationProgressTemplate {...commonProps} />;
+
+      default:
+        return (
+          <View style={styles.unsupportedContainer}>
+            <Text style={styles.unsupportedText}>
+              {t('errors.unknownError')}: {currentComponent.type}
+            </Text>
+          </View>
+        );
+    }
+  };
+
+  return (
+    <View style={{ flex: 1, position: 'relative' }}>
+      {state.isProcessing && (
+        <View style={styles.processingContainer}>
+          <Text style={styles.processingText}>{t('common.loading')}</Text>
+          <ActivityIndicator size="large" color="#fff" />
+        </View>
+      )}
+      <SafeAreaView style={styles.container}>
+        {/* Header avec informations sur l'étape */}
+
+        {(state.showCustomStepper && state.session.isInitialized) ? (
+          <View style={styles.header}>
+            <Text style={styles.progressText}>
+              {t('kyc.step', {
+                current: (state.template.components.findIndex(c => c.id === currentComponent.id) + 1) || (state.currentComponentIndex + 1),
+                total: state.template.components.length,
+              })}
+            </Text>
+            <View style={styles.progressContainer}>
+              <View style={styles.progressBar}>
+                <View
+                  style={[
+                    styles.progressFill,
+                    { width: `${progress}%` }
+                  ]}
+                />
+              </View>
+
+            </View>
+
+            <View style={{ position: 'absolute', right: 12, top: 12 }}>
+              <TouchableOpacity onPress={onCancel} disabled={!onCancel} style={{ opacity: onCancel ? 1 : 0.5 }}>
+                <Text style={{ fontSize: 20, fontWeight: 'bold', color: '#333' }}>{`X`}</Text>
+              </TouchableOpacity>
+            </View>
+          </View>
+        ) : null}
+
+        {/* Contenu principal */}
+        <ScrollView
+          style={styles.scrollView}
+          contentContainerStyle={styles.content}
+          showsVerticalScrollIndicator={Platform.OS === 'web'}
+          bounces={false}
+        >
+          {renderCurrentComponent()}
+        </ScrollView>
+
+        {state.isProcessing && (
+          <View style={styles.processingContainer}>
+            <Text style={styles.processingText}>{t('common.loading')}</Text>
+            <ActivityIndicator size="large" color="#fff" />
+          </View>
+        )}
+      </SafeAreaView>
+    </View>
+
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#f5f5f5',
+
+  },
+  header: {
+    backgroundColor: 'white',
+    paddingVertical: 20,
+    paddingHorizontal: 12,
+    borderBottomWidth: 1,
+    borderBottomColor: '#e0e0e0',
+    marginHorizontal: 12,
+    marginTop: 12,
+    // shadow
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.15,
+    shadowRadius: 1.84,
+    elevation: 5,
+  },
+  title: {
+    fontSize: 24,
+    fontWeight: 'bold',
+    color: '#333',
+    marginBottom: 8,
+  },
+  description: {
+    fontSize: 16,
+    color: '#666',
+    marginBottom: 20,
+  },
+  progressContainer: {
+    // marginBottom: 20,
+  },
+  progressBar: {
+    height: 8,
+    backgroundColor: '#e0e0e0',
+    borderRadius: 4,
+    overflow: 'hidden',
+  },
+  progressFill: {
+    height: '100%',
+    backgroundColor: '#2DBD60',
+    borderRadius: 4,
+  },
+  progressText: {
+    fontSize: 14,
+    color: 'black',
+    fontWeight: '600',
+    textAlign: 'left',
+    marginBottom: 8,
+  },
+  stepInfo: {
+    backgroundColor: '#f8f9fa',
+    padding: 16,
+    borderRadius: 8,
+    borderLeftWidth: 4,
+    borderLeftColor: '#2DBD60',
+  },
+  stepTitle: {
+    fontSize: 18,
+    fontWeight: '600',
+    color: '#333',
+    marginBottom: 8,
+  },
+  stepDescription: {
+    fontSize: 14,
+    color: '#666',
+    lineHeight: 20,
+  },
+  scrollView: {
+    flex: 1,
+  },
+  content: {
+    flexGrow: 1,
+    alignItems: 'center',
+    paddingBottom: 20, // Add padding for better mobile scrolling
+  },
+  navigation: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    padding: 20,
+    backgroundColor: 'white',
+    borderTopWidth: 1,
+    borderTopColor: '#e0e0e0',
+  },
+  navButton: {
+    paddingHorizontal: 24,
+    paddingVertical: 12,
+    borderRadius: 8,
+    minWidth: 100,
+    alignItems: 'center',
+  },
+  primaryButton: {
+    backgroundColor: '#2DBD60',
+  },
+  navButtonText: {
+    fontSize: 16,
+    fontWeight: '600',
+    color: 'white',
+  },
+  errorText: {
+    color: '#dc2626',
+    fontSize: 16,
+    textAlign: 'center',
+    margin: 20,
+  },
+  unsupportedContainer: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    padding: 20,
+  },
+  unsupportedText: {
+    fontSize: 16,
+    color: '#666',
+    textAlign: 'center',
+  },
+  processingContainer: {
+    position: 'absolute',
+    flex: 1,
+    width: Dimensions.get('window').width,
+    height: Dimensions.get('window').height,
+    backgroundColor: 'rgba(0, 0, 0, 0.5)',
+    justifyContent: 'center',
+    alignItems: 'center',
+    zIndex: 10000000,
+  },
+  processingText: {
+    fontSize: 16,
+    color: '#fff',
+    textAlign: 'center',
+    fontWeight: 'bold',
+    marginBottom: 10,
+  },
+  loadingContainer: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: '#f5f5f5',
+  },
+  loadingText: {
+    marginTop: 16,
+    fontSize: 16,
+    color: '#666',
+    textAlign: 'center',
+  },
+  errorContainer: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: '#f5f5f5',
+    padding: 20,
+  },
+  retryButton: {
+    marginTop: 20,
+    paddingHorizontal: 24,
+    paddingVertical: 12,
+    backgroundColor: '#2DBD60',
+    borderRadius: 8,
+  },
+  retryButtonText: {
+    color: '#fff',
+    fontSize: 16,
+    fontWeight: '600',
+  },
+}); 

package/src/components/VisionCameraView.tsx

@@ -0,0 +1,197 @@
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { View, StyleSheet, Platform, ViewStyle, Text } from 'react-native';
+import { Camera, useCameraDevice } from 'react-native-vision-camera';
+import VisionCameraModule from '../modules/camera/VisionCameraModule';
+
+export interface VisionCameraViewProps {
+  instructions?: string;
+  showCamera: boolean;
+  cameraType?: 'front' | 'back';
+  style?: ViewStyle;
+  onCapture?: (result: { success: boolean; path?: string; error?: string }) => void;
+  onError?: (event: { message: string }) => void;
+  onPermissionError?: () => void;
+  enableHdr?: boolean;
+  enableNightMode?: boolean;
+  quality?: 'low' | 'medium' | 'high';
+}
+
+export const VisionCameraView: React.FC<VisionCameraViewProps> = ({
+  instructions = 'Position yourself in the frame and tap to capture',
+  showCamera,
+  cameraType = 'front',
+  style,
+  onCapture,
+  onError,
+  onPermissionError,
+  enableHdr = false,
+  enableNightMode = false,
+  quality = 'high',
+}) => {
+  const camera = useRef<Camera>(null);
+  const device = useCameraDevice(cameraType);
+  const [hasPermission, setHasPermission] = useState(false);
+  const [isInitialized, setIsInitialized] = useState(false);
+
+  // Check permissions on component mount
+  useEffect(() => {
+    checkPermissions();
+  }, []);
+
+  const checkPermissions = async () => {
+    try {
+      const hasAllPermissions = await VisionCameraModule.hasAllPermissions();
+      if (!hasAllPermissions) {
+        const granted = await VisionCameraModule.requestAllPermissions();
+        if (!granted) {
+          onPermissionError?.();
+          onError?.({ message: 'Camera permissions not granted' });
+          return;
+        }
+      }
+      setHasPermission(true);
+    } catch (error) {
+      console.error('Error checking permissions:', error);
+      onError?.({ message: 'Error checking camera permissions' });
+    }
+  };
+
+  const onInitialized = useCallback(() => {
+    console.log('Camera initialized!');
+    setIsInitialized(true);
+  }, []);
+
+  const onCameraError = useCallback((error: any) => {
+    console.error('Camera error:', error);
+    onError?.({ message: error.message || 'Camera error occurred' });
+  }, [onError]);
+
+  const capturePhoto = useCallback(async () => {
+    try {
+      if (!camera.current || !isInitialized) {
+        onError?.({ message: 'Camera not ready' });
+        return;
+      }
+
+      const photo = await camera.current.takePhoto({
+        enableShutterSound: true,
+      });
+
+      const result = await VisionCameraModule.processPhotoResult(photo);
+      onCapture?.(result);
+    } catch (error) {
+      console.error('Error taking photo:', error);
+      onCapture?.({
+        success: false,
+        error: error instanceof Error ? error.message : 'Failed to capture photo',
+      });
+    }
+  }, [isInitialized, quality, onCapture, onError]);
+
+  // Auto-capture functionality (can be triggered externally)
+  useEffect(() => {
+    if (showCamera && isInitialized && hasPermission) {
+      // Auto-capture after a short delay when camera is ready
+      const timer = setTimeout(() => {
+        capturePhoto();
+      }, 1000);
+      
+      return () => clearTimeout(timer);
+    }
+    return undefined;
+  }, [showCamera, isInitialized, hasPermission, capturePhoto]);
+
+  if (Platform.OS === 'web') {
+    return (
+      <View style={[styles.container, style]}>
+        <Text style={styles.webMessage}>
+          Camera is not supported on web platform. Please use the mobile app.
+        </Text>
+      </View>
+    );
+  }
+
+  if (!hasPermission) {
+    return (
+      <View style={[styles.container, style]}>
+        <Text style={styles.permissionMessage}>
+          Camera permission required. Please grant permission to continue.
+        </Text>
+      </View>
+    );
+  }
+
+  if (!device) {
+    return (
+      <View style={[styles.container, style]}>
+        <Text style={styles.errorMessage}>
+          Camera device not available
+        </Text>
+      </View>
+    );
+  }
+
+  if (!showCamera) {
+    return <View style={[styles.container, style]} />;
+  }
+
+  return (
+    <View style={[styles.container, style]}>
+      <Camera
+        ref={camera}
+        style={StyleSheet.absoluteFill}
+        device={device}
+        isActive={showCamera}
+        photo={true}
+        onInitialized={onInitialized}
+        onError={onCameraError}
+      />
+      
+      {instructions && (
+        <View style={styles.instructionsOverlay}>
+          <Text style={styles.instructions}>{instructions}</Text>
+        </View>
+      )}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: 'black',
+  },
+  instructionsOverlay: {
+    position: 'absolute',
+    top: 60,
+    left: 20,
+    right: 20,
+    backgroundColor: 'rgba(0, 0, 0, 0.7)',
+    padding: 15,
+    borderRadius: 10,
+  },
+  instructions: {
+    color: 'white',
+    fontSize: 16,
+    textAlign: 'center',
+    fontWeight: '500',
+  },
+  permissionMessage: {
+    color: 'white',
+    fontSize: 16,
+    textAlign: 'center',
+    margin: 20,
+  },
+  errorMessage: {
+    color: 'red',
+    fontSize: 16,
+    textAlign: 'center',
+    margin: 20,
+  },
+  webMessage: {
+    color: 'white',
+    fontSize: 16,
+    textAlign: 'center',
+    margin: 20,
+  },
+});