@transfergratis/react-native-sdk 0.1.3 → 0.1.5

package/src/components/KYCElements/LocationCaptureTemplate.tsx

@@ -6,6 +6,7 @@ import GpsIcon from '../Svgs/GpsIcon';
 import { Button } from '../ui/Button';
 import * as Location from 'expo-location';
 import { useTemplateKYCFlowContext } from '../../hooks/useTemplateKYCFlow';
+import { useI18n } from '../../hooks/useI18n';
 
 interface LocationCaptureTemplateProps {
   component: TemplateComponent;
@@ -22,6 +23,7 @@ export const LocationCaptureTemplate: React.FC<LocationCaptureTemplateProps> = (
   error,
   language = 'en',
 }) => {
+  const { t } = useI18n();
   const [isRequesting, setIsRequesting] = useState(false);
   const [currentLocation, setCurrentLocation] = useState<{ latitude: number; longitude: number; accuracy: number } | null>(value || null);
   const { actions } = useTemplateKYCFlowContext();
@@ -44,8 +46,8 @@ export const LocationCaptureTemplate: React.FC<LocationCaptureTemplateProps> = (
       const hasLocationPermission = await requestLocationPermission();
       if (!hasLocationPermission) {
         Alert.alert(
-          'Permission refusée',
-          'La permission de localisation est nécessaire pour continuer.'
+          t('kyc.locationCapture.permissionDeniedTitle'),
+          t('kyc.locationCapture.permissionDeniedMessage')
         );
         setIsRequesting(false);
         return;
@@ -55,8 +57,8 @@ export const LocationCaptureTemplate: React.FC<LocationCaptureTemplateProps> = (
       const isLocationEnabled = await Location.hasServicesEnabledAsync();
       if (!isLocationEnabled) {
         Alert.alert(
-          'Localisation désactivée',
-          'Veuillez activer la localisation sur votre appareil pour continuer.'
+          t('kyc.locationCapture.locationDisabledTitle'),
+          t('kyc.locationCapture.locationDisabledMessage')
         );
         setIsRequesting(false);
         return;
@@ -81,7 +83,7 @@ export const LocationCaptureTemplate: React.FC<LocationCaptureTemplateProps> = (
 
     } catch (error) {
       console.error('Erreur lors de la récupération de la localisation:', error);
-      Alert.alert('Erreur', 'Impossible de récupérer votre localisation. Veuillez réessayer.');
+      Alert.alert(t('kyc.locationCapture.errorTitle'), t('kyc.locationCapture.errorMessage'));
     } finally {
       setIsRequesting(false);
     }
@@ -119,34 +121,34 @@ export const LocationCaptureTemplate: React.FC<LocationCaptureTemplateProps> = (
           </View>
         </View>
         <View style={{ flexDirection: 'column', alignItems: 'center', justifyContent: 'center', marginTop: 36 }}>
-          <Text style={{ fontSize: 24, fontWeight: 'bold', color: '#333', marginBottom: 8 }}>Secure Your Verification</Text>
+          <Text style={{ fontSize: 24, fontWeight: 'bold', color: '#333', marginBottom: 8 }}>{t('kyc.locationCapture.title')}</Text>
           <Text style={{ fontSize: 16, color: '#666', textAlign: 'center', marginBottom: 24, lineHeight: 22 }}>
-            Allow location access to help us protect your account and prevent fraudulent activity during verification.
+            {t('kyc.locationCapture.description')}
           </Text>
         </View>
         <View style={{ flexDirection: 'column', marginTop: 36, backgroundColor: "#F9FAFB", padding: 12, borderRadius: 12, width: '100%', }}>
           <Text style={{ fontSize: 16, color: 'black', fontWeight: 'bold', textAlign: 'left', lineHeight: 22 }}>
-            {`How this helps:`}
+            {t('kyc.locationCapture.howThisHelps')}
           </Text>
           <Text style={{ fontSize: 16, color: '#666', textAlign: 'left', lineHeight: 22 }}>
-            {`• Verifies your device location matches your identity\n• Detects and prevents unauthorized access\n• Ensures compliance with security regulations`}
+            {t('kyc.locationCapture.howThisHelpsList')}
           </Text>
         </View>
 
         {currentLocation ? (
           <View style={styles.locationInfo}>
-            <Text style={styles.locationTitle}>Localisation obtenue</Text>
+            <Text style={styles.locationTitle}>{t('kyc.locationCapture.obtained')}</Text>
             <Text style={styles.locationDetails}>
-              Latitude: {currentLocation.latitude.toFixed(6)}
+              {t('kyc.locationCapture.latitudeLabel')}: {currentLocation.latitude.toFixed(6)}
             </Text>
             <Text style={styles.locationDetails}>
-              Longitude: {currentLocation.longitude.toFixed(6)}
+              {t('kyc.locationCapture.longitudeLabel')}: {currentLocation.longitude.toFixed(6)}
             </Text>
             <Text style={styles.locationDetails}>
-              Précision: {currentLocation.accuracy.toFixed(1)}m
+              {t('kyc.locationCapture.accuracyLabel')}: {currentLocation.accuracy.toFixed(1)}m
             </Text>
             <Button
-              title="Réinitialiser"
+              title={t('kyc.locationCapture.resetButton')}
               fullWidth
               onPress={resetLocation}
               style={{ paddingVertical: 20, marginTop: 24, backgroundColor: '#6B7280' }}
@@ -154,7 +156,7 @@ export const LocationCaptureTemplate: React.FC<LocationCaptureTemplateProps> = (
           </View>
         ) : (
           <Button
-            title={isRequesting ? "Récupération..." : "Enable Location Access"}
+            title={isRequesting ? t('kyc.locationCapture.fetching') : t('kyc.locationCapture.enableButton')}
             fullWidth
             onPress={getCurrentLocation}
             disabled={isRequesting}

package/src/components/KYCElements/OrientationVideoCapture.tsx

@@ -11,7 +11,7 @@ import {
 import Svg, { Rect, Path, Mask, Defs } from 'react-native-svg';
 import { Camera, useCameraDevice } from 'react-native-vision-camera';
 import { OrientationVideoConfig, OrientationVideoState } from '../../types/KYC.types';
-import KYCService from '../../modules/api/KYCService';
+import kycService from '../../modules/api/KYCService';
 import VisionCameraModule from '../../modules/camera/VisionCameraModule';
 import SideSelfieIcon from '../Svgs/sideSelfieIcon';
 
@@ -19,7 +19,7 @@ interface OrientationVideoCaptureProps {
   config?: Partial<OrientationVideoConfig>;
   onComplete: (result: any) => void;
   onError: (error: string) => void;
-  kycService: KYCService;
+  kycService: typeof kycService;
 }
 
 const defaultConfig: OrientationVideoConfig = {

package/src/components/KYCElements/OrientationVideoCaptureEnhanced.tsx

@@ -12,7 +12,7 @@ import {
 import Svg, { Rect, Path, Mask, Defs } from 'react-native-svg';
 import { EnhancedCameraView } from '../EnhancedCameraView';
 import { OrientationVideoConfig, OrientationVideoState } from '../../types/KYC.types';
-import KYCService from '../../modules/api/KYCService';
+import kycService from '../../modules/api/KYCService';
 import FrontSelfieIcon from '../Svgs/frontSelfieIcon';
 import ScanningLine from '../Svgs/scanningLine';
 
@@ -20,7 +20,7 @@ interface OrientationVideoCaptureEnhancedProps {
   config?: Partial<OrientationVideoConfig>;
   onComplete: (result: any) => void;
   onError: (error: string) => void;
-  kycService: KYCService;
+  kycService: typeof kycService;
 }
 
 const defaultConfig: OrientationVideoConfig = {

package/src/components/KYCElements/OrientationVideoCaptureFinal.tsx

@@ -11,14 +11,14 @@ import {
 import Svg, { Rect, Path, Mask, Defs } from 'react-native-svg';
 import { EnhancedCameraView } from '../EnhancedCameraView';
 import { OrientationVideoConfig, OrientationVideoState } from '../../types/KYC.types';
-import KYCService from '../../modules/api/KYCService';
 import SideSelfieIcon from '../Svgs/sideSelfieIcon';
+import kycService from '../../modules/api/KYCService';
 
 interface OrientationVideoCaptureFinalProps {
   config?: Partial<OrientationVideoConfig>;
   onComplete: (result: any) => void;
   onError: (error: string) => void;
-  kycService: KYCService;
+  kycService: typeof kycService;
 }
 
 const defaultConfig: OrientationVideoConfig = {

package/src/components/KYCElements/ReviewSubmitTemplate.tsx

@@ -0,0 +1,201 @@
+import React, { useMemo } from 'react';
+import { View, Text, StyleSheet, TouchableOpacity, ScrollView } from 'react-native';
+import { TemplateComponent } from '../../types/KYC.types';
+import { useTemplateKYCFlowContext } from '../../hooks/useTemplateKYCFlow';
+import { useI18n } from '../../hooks/useI18n';
+
+interface ReviewSubmitTemplateProps {
+  component: TemplateComponent;
+  value: unknown;
+  onValueChange: (data: unknown) => void;
+  error?: string;
+  language?: string;
+}
+
+export const ReviewSubmitTemplate: React.FC<ReviewSubmitTemplateProps> = () => {
+  const { t } = useI18n();
+  const { state, actions, getLocalizedText } = useTemplateKYCFlowContext();
+
+  const idSection = useMemo(() => {
+    const idComp = state.template.components.find(c => c.type === 'id_card');
+    return idComp ? state.componentData[idComp.id] : null;
+  }, [state.template.components, state.componentData]);
+
+  // Helper to coerce possibly-nested localized configs into the expected shape
+  const coerceLocalized = (value: any, fallback: { en: string; fr: string }) => {
+    if (value && typeof value === 'object') {
+      if (typeof value.en === 'string' || typeof value.fr === 'string') {
+        return {
+          en: typeof value.en === 'string' ? value.en : fallback.en,
+          fr: typeof value.fr === 'string' ? value.fr : fallback.fr,
+          ...value,
+        } as { [key: string]: string; en: string; fr: string };
+      }
+    }
+    return fallback;
+  };
+
+  // const reviewComp = useMemo(() => {
+  //   return state.template.components.find(c => c.type === 'review_submit');
+  // }, [state.template.components]);
+
+  const dynamicComponents = useMemo(() => {
+    return state.template.components.filter(c => c.type !== 'review_submit' && c.type !== 'verification_progress');
+  }, [state.template.components]);
+
+  const handleSubmit = async () => {
+    await actions.nextComponent();
+  };
+
+  return (
+    <View style={styles.container}>
+      <Text style={styles.title}>{t('kyc.reviewSubmit.title')}</Text>
+      <Text style={styles.subtitle}>{t('kyc.reviewSubmit.subtitle')}</Text>
+
+      <ScrollView contentContainerStyle={styles.scrollContent}>
+        {dynamicComponents.map((comp) => {
+          const compData = state.componentData[comp.id] || {};
+          const isCompleted = state.completedComponents.includes(comp.id);
+          if (comp.type === 'id_card') {
+            const hasFront = !!(compData.front || compData.front_base64 || compData.front_mrz);
+            const hasBack = !!(compData.back || compData.back_base64 || compData.back_mrz);
+            return (
+              <View key={comp.id} style={styles.section}>
+                <Text style={styles.sectionTitle}>{t('kyc.reviewSubmit.documentInfo')}</Text>
+                <View style={styles.row}>
+                  <View style={[styles.tile, hasFront ? styles.active : null]}>
+                    <Text style={styles.tileLabel}>{t('kyc.idCardCapture.frontSide')}</Text>
+                    {hasFront ? <Text style={styles.check}>✓</Text> : null}
+                  </View>
+                  <View style={[styles.tile, hasBack ? styles.active : null]}>
+                    <Text style={styles.tileLabel}>{t('kyc.idCardCapture.backSide')}</Text>
+                    {hasBack ? <Text style={styles.check}>✓</Text> : null}
+                  </View>
+                </View>
+                {idSection?.documentType ? (
+                  <Text style={styles.caption}>{idSection.documentType}</Text>
+                ) : null}
+              </View>
+            );
+          }
+          if (comp.type === 'selfie') {
+            const orientations = ((comp.config as any)?.orientations || ['center', 'right', 'left']) as string[];
+            return (
+              <View key={comp.id} style={styles.section}>
+                <Text style={styles.sectionTitle}>{t('kyc.selfieCapture.title')}</Text>
+                <View style={styles.row}>
+                  {orientations.map((o) => {
+                    const has = !!compData[o];
+                    const colorStyle = o === 'center' ? styles.pink : o === 'right' ? styles.blue : styles.purple;
+                    return (
+                      <View key={o} style={[styles.tile, colorStyle, has ? styles.active : null]}>
+                        <Text style={styles.tileLabel}>{o.charAt(0).toUpperCase() + o.slice(1)}</Text>
+                        {has ? <Text style={styles.check}>✓</Text> : null}
+                      </View>
+                    );
+                  })}
+                </View>
+                <Text style={styles.caption}>{t('kyc.selfieCapture.success')}</Text>
+              </View>
+            );
+          }
+          // Generic fallback for other component types
+          return (
+            <View key={comp.id} style={styles.section}>
+              <Text style={styles.sectionTitle}>{getLocalizedText(coerceLocalized(comp.labels, { en: comp.type, fr: comp.type }))}</Text>
+              <Text style={styles.caption}>{isCompleted ? t('common.success') : t('kyc.verificationProgress.status.pending')}</Text>
+            </View>
+          );
+        })}
+      </ScrollView>
+
+      <TouchableOpacity style={[styles.button, styles.primary]} onPress={handleSubmit}>
+        <Text style={styles.buttonText}>{t('kyc.reviewSubmit.submitButton')}</Text>
+      </TouchableOpacity>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    width: '100%',
+    paddingHorizontal: 16,
+    paddingVertical: 12,
+  },
+  title: {
+    fontSize: 24,
+    fontWeight: 'bold',
+    color: '#111827',
+    marginBottom: 4,
+  },
+  subtitle: {
+    fontSize: 14,
+    color: '#6B7280',
+    marginBottom: 16,
+  },
+  section: {
+    backgroundColor: 'white',
+    borderRadius: 16,
+    padding: 16,
+    marginBottom: 16,
+  },
+  sectionTitle: {
+    fontSize: 18,
+    fontWeight: '700',
+    color: '#111827',
+    marginBottom: 12,
+  },
+  scrollContent: {
+    paddingBottom: 24,
+  },
+  row: {
+    flexDirection: 'row',
+    gap: 12,
+  },
+  tile: {
+    flex: 1,
+    height: 110,
+    borderRadius: 16,
+    backgroundColor: '#F3F4F6',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  tileLabel: {
+    fontSize: 14,
+    color: '#111827',
+    marginBottom: 8,
+  },
+  check: {
+    fontSize: 18,
+    color: '#10B981',
+    fontWeight: '700',
+  },
+  active: {
+    backgroundColor: '#DDE9FF',
+  },
+  pink: { backgroundColor: '#FDE2E7' },
+  blue: { backgroundColor: '#DDE9FF' },
+  purple: { backgroundColor: '#EDE2FF' },
+  caption: {
+    marginTop: 10,
+    fontSize: 12,
+    color: '#6B7280',
+  },
+  button: {
+    paddingVertical: 14,
+    borderRadius: 10,
+    alignItems: 'center',
+    marginTop: 12,
+  },
+  primary: {
+    backgroundColor: '#2DBD60',
+  },
+  buttonText: {
+    color: 'white',
+    fontSize: 16,
+    fontWeight: '600',
+  },
+});
+
+

package/src/components/KYCElements/SelfieCaptureTemplate.tsx

@@ -1,15 +1,22 @@
 import React, { useEffect, useState } from 'react';
 import { View, Text, StyleSheet, Alert, ScrollView } from 'react-native';
-import { TemplateComponent, SelfieConfig, LocalizedText } from '../../types/KYC.types';
+import { TemplateComponent, SelfieConfig, LocalizedText, ISilentCaptureResult, OrientationType } from '../../types/KYC.types';
 import { EnhancedCameraView } from '../EnhancedCameraView';
 import { Button } from '../ui/Button';
 import { useTemplateKYCFlowContext } from '../../hooks/useTemplateKYCFlow';
+import { useI18n } from '../../hooks/useI18n';
 import SelfieOverlay from '../OverLay/SelfieOverlay';
+import selfieVerification from '../../modules/api/SelfieVerification';
+import pathToBase64 from '../../utils/pathToBase64';
 
+interface IImagePayload {
+  dir: string;
+  file: string;
+}
 interface SelfieCaptureTemplateProps {
   component: TemplateComponent;
-  value: Record<string, string> | undefined;
-  onValueChange: (value: Record<string, string>) => void;
+  value: Record<string, IImagePayload> | undefined;
+  onValueChange: (value: Record<string, IImagePayload>) => void;
   error?: string;
   language: string;
 }
@@ -21,30 +28,41 @@ export const SelfieCaptureTemplate: React.FC<SelfieCaptureTemplateProps> = ({
   error,
   language,
 }) => {
+  const { t } = useI18n();
   const config = component.config as SelfieConfig;
-  const maxAttempts = config.max_attempts || 3;
-  const orientations = config.orientations || ['front'];
+  const orientations: OrientationType[] = (config.orientations || ['center']) as OrientationType[];
   const { actions, state, } = useTemplateKYCFlowContext();
 
+  const [silentCaptureResult, setSilentCaptureResult] = useState<ISilentCaptureResult>({ success: false, isAnalyzing: false });
+
+
   const [showCamera, setShowCamera] = useState(false);
-  const [currentOrientation, setCurrentOrientation] = useState<string>(orientations[0]);
-  const [capturedImages, setCapturedImages] = useState<Record<string, string>>(value || {});
-  const [attempts, setAttempts] = useState(0);
+  const [currentOrientation, setCurrentOrientation] = useState<OrientationType>(orientations[0]);
+  const [capturedImages, setCapturedImages] = useState<Record<string, IImagePayload>>(value || {});
 
-  const getLocalizedText = (text: LocalizedText): string => {
-    return text[language] || text.en || '';
+  const getLocalizedText = (text: LocalizedText | Record<string, LocalizedText>): string => {
+    if (!text) return '';
+    // If text is a nested record (e.g., per theme/device), try to pick a default then localize
+    const maybeNested = text as Record<string, LocalizedText>;
+    if (maybeNested && typeof maybeNested === 'object' && 'en' in maybeNested === false && 'fr' in maybeNested === false) {
+      const firstKey = Object.keys(maybeNested)[0];
+      const nested = maybeNested[firstKey] as LocalizedText;
+      return nested?.[language] || nested?.en || '';
+    }
+    const loc = text as LocalizedText;
+    return loc[language] || loc.en || '';
   };
 
-  const getOrientationInstructions = (orientation: string): string => {
+  const getOrientationInstructions = (orientation: OrientationType): string => {
     switch (orientation) {
-      case 'front':
-        return 'Prenez un selfie de face, regardez droit devant vous';
+      case 'center':
+        return state.currentLanguage === "en" ? "Take a selfie of face, look straight ahead you" : "Prenez un selfie de face, regardez droit devant vous";
       case 'left':
-        return 'Tournez votre tête vers la gauche, gardez les épaules droites';
+        return state.currentLanguage === "en" ? "Turn your head to the left, keep your shoulders straight" : "Tournez votre tête vers la gauche, gardez les épaules droites";
       case 'right':
-        return 'Tournez votre tête vers la droite, gardez les épaules droites';
+        return state.currentLanguage === "en" ? "Turn your head to the right, keep your shoulders straight" : "Tournez votre tête vers la droite, gardez les épaules droites";
       default:
-        return getLocalizedText(component.instructions);
+        return getLocalizedText(component.instructions as LocalizedText);
     }
   };
 
@@ -52,58 +70,115 @@ export const SelfieCaptureTemplate: React.FC<SelfieCaptureTemplateProps> = ({
     actions.showCustomStepper(!showCamera);
   }, [showCamera]);
 
-  const getOrientationLabel = (orientation: string): string => {
+  const getOrientationLabel = (orientation: OrientationType): string => {
     switch (orientation) {
-      case 'front':
-        return 'Selfie de face';
+      case 'center':
+        return state.currentLanguage === "en" ? "Selfie de face" : "Selfie de face";
       case 'left':
-        return 'Selfie profil gauche';
+        return state.currentLanguage === "en" ? "Selfie profil gauche" : "Selfie profil gauche";
       case 'right':
-        return 'Selfie profil droit';
+        return state.currentLanguage === "en" ? "Selfie profil droit" : "Selfie profil droit";
       default:
-        return getLocalizedText(component.labels);
+        return getLocalizedText(component.labels as LocalizedText);
     }
   };
+  const getOrientationOpposite = (orientation: OrientationType): OrientationType => {
+    switch (orientation) {
+      case 'center':
+
+        return 'center';
+      case 'left':
+        return 'left';
+      case 'right':
+        return 'right';
+      default:
+        return orientation;
+    }
+  }
 
-  const getInstructions = (orientation: string): { title: string, subtitle: string } => {
+  const getInstructions = (orientation: OrientationType): { title: string, subtitle: string } => {
+    const lang = state.currentLanguage;
     switch (orientation) {
-      case 'front':
-        return { title: 'Center your face', subtitle: 'Align your face to the center of the selfie area and then take a photo' };
+      case 'center':
+        return {
+          title:
+
+            lang === "en" ? 'Center your face' : 'Mettez votre face au centre',
+          subtitle: lang === "en"
+            ? 'Align your face to the center of the selfie area and then take a photo'
+            : 'Alignez votre visage au centre de la zone selfie puis prenez une photo'
+        };
       case 'left':
-        return { title: 'Turn your head left', subtitle: 'Slowly turn your head to the left while keeping your face in the selfie area' };
+        return {
+          title:
+            lang === 'en'
+              ? 'Turn your head left'
+              : 'Tournez la tête vers la gauche',
+          subtitle:
+            lang === 'en'
+              ? 'Slowly turn your head to the left while keeping your face in the selfie area'
+              : 'Tournez lentement la tête vers la gauche en gardant votre visage dans la zone selfie'
+        };
       case 'right':
-        return { title: 'Turn your head right', subtitle: 'Slowly turn your head to the right while keeping your face in the selfie area' };
+        return {
+          title:
+            lang === 'en'
+              ? 'Turn your head right'
+              : 'Tournez la tête vers la droite',
+          subtitle:
+            lang === 'en'
+              ? 'Slowly turn your head to the right while keeping your face in the selfie area'
+              : 'Tournez lentement la tête vers la droite en gardant votre visage dans la zone selfie'
+        };
       default:
-        return { title: getLocalizedText(component.labels), subtitle: getLocalizedText(component.instructions) };
+        return { title: getLocalizedText(component.labels as LocalizedText), subtitle: getLocalizedText(component.instructions as LocalizedText) };
     }
   };
 
-  const handleCapture = (result: { success: boolean; path?: string; error?: string }) => {
+  const handleSilentCapture = (result: { success: boolean; path?: string; error?: string }) => {
+    if (silentCaptureResult.isAnalyzing) {
+      return;
+    }
     if (result.success && result.path) {
-      const newImages = { ...capturedImages, [currentOrientation]: result.path };
+      setSilentCaptureResult((prev) => ({ ...prev, isAnalyzing: true, success: false, error: '' }));
+      selfieVerification(result.path).then((response) => {
+        if (response.length > 0) {
+          const res = response[0];
+          if (res?.orientation_direction === getOrientationOpposite(currentOrientation) && res?.capture) {
+            setSilentCaptureResult((prev) => ({ ...prev, isAnalyzing: false, success: true, error: '', path: result.path }));
+          } else {
+            setSilentCaptureResult((prev) => ({ ...prev, isAnalyzing: false, success: false, error: 'Le selfie n\'est pas correct' }));
+          }
+        } else {
+          setSilentCaptureResult((prev) => ({ ...prev, isAnalyzing: false, success: false, error: 'Le selfie n\'est pas correct' }));
+        }
+      }).catch((e: any) => {
+
+        setSilentCaptureResult((prev) => ({ ...prev, isAnalyzing: false, success: false, error: e?.message || 'Erreur de vérification du selfie' }));
+      });
+    }
+  }
+
+  const handleCapture = async (result: { success: boolean; path?: string; error?: string }) => {
+    console.log("handleCapturessss", silentCaptureResult);
+
+    if (silentCaptureResult.success && silentCaptureResult.path) {
+      const base64 = await pathToBase64(silentCaptureResult.path);
+      // Keep backward-compatible structure for UI validation and add *_base64 fields for backend payload
+      const newImages: Record<string, any> = {
+        ...capturedImages,
+        [currentOrientation]: { dir: silentCaptureResult.path, file: base64 } as IImagePayload,
+      };
       setCapturedImages(newImages);
       onValueChange(newImages);
       setShowCamera(false);
-      setAttempts(0);
+
 
       // Passer à l'orientation suivante si disponible
-      const currentIndex = orientations.indexOf(currentOrientation as any);
+      const currentIndex = orientations.indexOf(currentOrientation as OrientationType);
       if (currentIndex < orientations.length - 1) {
         setCurrentOrientation(orientations[currentIndex + 1]);
       }
-    } else {
-      const newAttempts = attempts + 1;
-      setAttempts(newAttempts);
-
-      if (newAttempts >= maxAttempts) {
-        Alert.alert(
-          'Limite atteinte',
-          `Vous avez atteint le nombre maximum de tentatives (${maxAttempts}).`
-        );
-        setShowCamera(false);
-      } else {
-        Alert.alert('Erreur', result.error || 'Impossible de prendre le selfie');
-      }
     }
   };
 
@@ -113,13 +188,15 @@ export const SelfieCaptureTemplate: React.FC<SelfieCaptureTemplateProps> = ({
   };
 
 
-  const isOrientationCompleted = (orientation: string): boolean => {
+  const isOrientationCompleted = (orientation: OrientationType): boolean => {
     return !!capturedImages[orientation];
   };
 
   const isAllOrientationsCompleted = (): boolean => {
     return orientations.every(orientation => isOrientationCompleted(orientation));
   };
+  console.log("Current Orientation", currentOrientation);
+
 
   if (showCamera) {
     return (
@@ -136,6 +213,8 @@ export const SelfieCaptureTemplate: React.FC<SelfieCaptureTemplateProps> = ({
           showCaptureButton={true}
           showSwitchCamera={false}
           enableFlash={false}
+          silentCaptureResult={silentCaptureResult}
+          onSilentCapture={handleSilentCapture}
           overlayComponent={<SelfieOverlay
             xMin={20}
             yMin={140}
@@ -143,7 +222,8 @@ export const SelfieCaptureTemplate: React.FC<SelfieCaptureTemplateProps> = ({
             yMax={340}
             cornerOpacity={1}
             instructions={""}
-            orientation={currentOrientation as 'front' | 'left' | 'right'}
+            language={state.currentLanguage}
+            orientation={currentOrientation as 'center' | 'left' | 'right'}
             instructionsTile={getInstructions(currentOrientation).title}
             instructionsSubtitle={getInstructions(currentOrientation).subtitle}
             stepperProps={{
@@ -167,8 +247,8 @@ export const SelfieCaptureTemplate: React.FC<SelfieCaptureTemplateProps> = ({
       height: '100%',
     }]}>
       <View style={styles.container}>
-        <Text style={styles.title}>{getLocalizedText(component.labels)}</Text>
-        <Text style={styles.description}>{getLocalizedText(component.instructions)}</Text>
+        <Text style={styles.title}>{getLocalizedText(component.labels as LocalizedText)}</Text>
+        <Text style={styles.description}>{getLocalizedText(component.instructions as LocalizedText)}</Text>
 
         <ScrollView style={styles.orientationsContainer} showsVerticalScrollIndicator={false}>
           <View style={{ flexDirection: 'column', alignItems: 'center', gap: 10 }}>
@@ -207,25 +287,32 @@ export const SelfieCaptureTemplate: React.FC<SelfieCaptureTemplateProps> = ({
             ))}
             <View style={{ backgroundColor: "#F6CB0D1A", width: "100%", padding: 10, borderRadius: 10 }} >
               <Text style={{ color: '#997E06', fontSize: 16, fontWeight: 'bold' }}>
-                Tips for a good selfie:
+                {state.currentLanguage === "en"
+                  ? "Tips for a good selfie:" 
+                  : "Conseils pour une bonne photo selfie :"}
               </Text>
               <View style={{ paddingLeft: 10, paddingTop: 4 }}>
                 <Text style={{ color: '#997E06', fontSize: 14, fontWeight: 'bold' }}>
-                  {`• Remove glasses and hat \n• Look directly at the camera \n• Ensure good lighting \n`}
+                  {state.currentLanguage === "en"
+                    ? `• Remove glasses and hat \n• Look directly at the camera \n• Ensure good lighting \n`
+                    : `• Retirez vos lunettes et votre chapeau \n• Regardez directement la caméra \n• Assurez-vous d'une bonne luminosité \n`
+                  }
                 </Text>
               </View>
             </View>
             <View style={{ height: 10 }} />
             {isAllOrientationsCompleted() ? <>
-              <Button title="Continuer" fullWidth style={{ paddingVertical: 20, paddingTop: 12 }} onPress={() => {
+              <Button title={t('common.continue')} fullWidth style={{ paddingVertical: 20, paddingTop: 12 }} onPress={async () => {
                 onValueChange(capturedImages);
                 actions.nextComponent();
               }} />
             </> : (
-              <Button title="Start Selfie" fullWidth style={{ paddingVertical: 20, paddingTop: 12 }} onPress={() => {
+              <Button title={t('kyc.selfieCapture.captureButton')} fullWidth style={{ paddingVertical: 20, paddingTop: 12 }} onPress={() => {
                 if (isAllOrientationsCompleted()) {
                   onValueChange(capturedImages);
+                  actions.nextComponent();
                 } else {
+                  setSilentCaptureResult((prev) => ({ ...prev, isAnalyzing: false, success: false, error: '' }));
                   setShowCamera(true);
                 }
               }} />