@transfergratis/react-native-sdk 0.1.4 → 0.1.6

package/src/components/KYCElements/SelfieCaptureTemplate.tsx

@@ -1,15 +1,23 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useMemo, 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, GovernmentDocumentType } 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';
+import { truncateFields } from '../../modules/api/KYCService';
 
+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 | string>) => void;
   error?: string;
   language: string;
 }
@@ -21,30 +29,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,60 +71,136 @@ 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 countryData = useMemo(() => {
+  //   const geCountryID = Object.keys(state.componentData).find((c: string) => c === "6");
 
-  const getInstructions = (orientation: string): { title: string, subtitle: string } => {
+  //   if (geCountryID) {
+  //     const countryMapping = state.componentData[geCountryID];
+  //     return countryMapping?.code;
+  //   }
+  //   return null;
+  // }, [state.componentData]);
+
+  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');
-      }
     }
   };
+  const idCardData = useMemo(() => {
+    const idCardID = Object.keys(state.componentData).find((c: string) => c === "1");
+    if (idCardID) {
+      const _idCardData = state.componentData[idCardID];
+      return _idCardData as unknown as { country: string; documentType: GovernmentDocumentType };
+    }
+    return null;
+  }, [state.componentData]);
+  console.log("idCardData", truncateFields(idCardData), JSON.stringify(truncateFields(state.componentData), null, 2));
+
 
   const handleError = (event: { message: string }) => {
     Alert.alert('Erreur', event.message);
@@ -113,13 +208,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 +233,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 +242,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={{
@@ -159,7 +259,6 @@ export const SelfieCaptureTemplate: React.FC<SelfieCaptureTemplateProps> = ({
     );
   }
 
-
   return (
     <View style={[{
       maxWidth: 760,
@@ -167,8 +266,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 +306,43 @@ 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={() => {
-                onValueChange(capturedImages);
+              <Button title={t('common.continue')} fullWidth style={{ paddingVertical: 20, paddingTop: 12 }} onPress={async () => {
+                if (idCardData?.country && idCardData?.documentType) {
+                  const value = {
+                    ...capturedImages,
+                    country: idCardData?.country || '',
+                    documentType: idCardData?.documentType as GovernmentDocumentType,
+                  }
+                  console.log("value", JSON.stringify(truncateFields(value), null, 2));
+                  onValueChange(value);
+                } else {
+                  Alert.alert('Erreur', 'Veuillez sélectionner un pays et un type de document');
+                  return;
+                }
                 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);
                 }
               }} />

package/src/components/KYCElements/VerificationProgressTemplate.tsx

@@ -0,0 +1,246 @@
+import React, { useEffect, useState } from 'react';
+import { View, Text, StyleSheet, TouchableOpacity } from 'react-native';
+import { TemplateComponent } from '../../types/KYC.types';
+import { useTemplateKYCFlowContext } from '../../hooks/useTemplateKYCFlow';
+import { useI18n } from '../../hooks/useI18n';
+import kycService from '../../modules/api/KYCService';
+
+interface VerificationProgressTemplateProps {
+  component: TemplateComponent;
+  value: unknown;
+  onValueChange: (data: unknown) => void;
+  error?: string;
+  language?: string;
+}
+
+export const VerificationProgressTemplate: React.FC<VerificationProgressTemplateProps> = () => {
+  const { t } = useI18n();
+  const { state, actions } = useTemplateKYCFlowContext();
+  const [retryCount, setRetryCount] = useState(0);
+  const [isRetrying, setIsRetrying] = useState(false);
+  const [timeoutId, setTimeoutId] = useState<number | null>(null);
+
+  const verification = state.verification;
+
+  const isSuccess = verification.status === 'success';
+  const isFailed = verification.status === 'failed';
+
+  // Fonction pour récupérer le résultat de vérification avec retry
+  const getVerificationResult = async (currentRetryCount = 0, maxRetries = 40) => {
+    try {
+      console.log(`Starting verification check (attempt ${currentRetryCount + 1}/${maxRetries + 1})`);
+      
+      const result = await kycService.getVerificationResult(state.session.session_id);
+      const verificationResult = result[state.session.session_id].data;
+
+      console.log('getVerificationResult result', JSON.stringify(result, null, 2));
+
+      // Vérifier le statut de vérification
+      if (verificationResult.verification_status === null || verificationResult.verification_status === "processing" || verificationResult.verification_status === "pending") {
+        if (currentRetryCount < maxRetries) {
+          const nextRetryCount = currentRetryCount + 1;
+          setRetryCount(nextRetryCount);
+          setIsRetrying(true);
+          
+          console.log(`Verification still processing, retrying in 10s... (${nextRetryCount}/${maxRetries})`);
+
+          // Nettoyer le timeout précédent s'il existe
+          if (timeoutId) {
+            clearTimeout(timeoutId);
+          }
+
+          // Attendre 10 secondes avant de relancer
+          const newTimeoutId = setTimeout(() => {
+            getVerificationResult(nextRetryCount, maxRetries);
+          }, 10000);
+          
+          setTimeoutId(newTimeoutId);
+          return; // Sortir de la fonction pour éviter de traiter le résultat
+        } else {
+          console.error('Max retries reached, verification still processing');
+          setIsRetrying(false);
+          return;
+        }
+      }
+
+      // Traiter le résultat final (success, failed, etc.)
+      if (verificationResult.verification_status === "completed" ||
+        verificationResult.verification_status === "approved") {
+        // Mettre à jour l'état avec le succès
+        actions.setVerificationState({
+          status: 'success',
+          result: result
+        });
+      } else if (verificationResult.verification_status === "failed" ||
+        verificationResult.verification_status === "rejected") {
+        // Mettre à jour l'état avec l'échec
+        actions.setVerificationState({
+          status: 'failed',
+          result: {
+            referenceId: verificationResult.verification_id,
+            issues: ['Verification failed']
+          } as any
+        });
+      }
+
+      setIsRetrying(false);
+
+    } catch (error) {
+      console.error('getVerificationResult error', error);
+
+      // En cas d'erreur, on peut aussi retry
+      if (currentRetryCount < maxRetries) {
+        const nextRetryCount = currentRetryCount + 1;
+        setRetryCount(nextRetryCount);
+        setIsRetrying(true);
+        
+        console.log(`Error occurred, retrying in 10s... (${nextRetryCount}/${maxRetries})`);
+        
+        // Nettoyer le timeout précédent s'il existe
+        if (timeoutId) {
+          clearTimeout(timeoutId);
+        }
+        
+        const newTimeoutId = setTimeout(() => {
+          getVerificationResult(nextRetryCount, maxRetries);
+        }, 10000);
+        
+        setTimeoutId(newTimeoutId);
+      } else {
+        setIsRetrying(false);
+        console.error('Max retries reached after errors');
+      }
+    }
+  };
+
+  useEffect(() => {
+    if (state.session.session_id) {
+      getVerificationResult();
+    }
+  }, [state.session.session_id]);
+
+  // Nettoyage des timeouts lors du démontage du composant
+  useEffect(() => {
+    return () => {
+      if (timeoutId) {
+        clearTimeout(timeoutId);
+      }
+    };
+  }, [timeoutId]);
+
+  if (isSuccess) {
+    return (
+      <View style={styles.container}>
+        <Text style={styles.title}>{t('kyc.verificationProgress.steps.complete')}</Text>
+        <Text style={styles.subtitle}>{t('kyc.verificationProgress.subtitle')}</Text>
+        <TouchableOpacity style={[styles.button, styles.primary]} onPress={() => actions.submitVerification()}>
+          <Text style={styles.buttonText}>{t('common.continue')}</Text>
+        </TouchableOpacity>
+        {verification.result?.referenceId ? (
+          <Text style={styles.refText}>{`Verification ID: ${verification.result.referenceId}`}</Text>
+        ) : null}
+      </View>
+    );
+  }
+
+  if (isFailed) {
+    return (
+      <View style={styles.container}>
+        <Text style={styles.title}>{t('kyc.verificationProgress.status.failed')}</Text>
+        <Text style={styles.subtitle}>{t('errors.validationError')}</Text>
+        <View style={styles.issuesBox}>
+          <Text style={styles.issuesTitle}>{t('common.error')}</Text>
+          {Array.isArray(verification.result?.issues) && verification.result.issues.map((issue: string, idx: number) => (
+            <Text key={idx} style={styles.issueItem}>• {issue}</Text>
+          ))}
+        </View>
+        <TouchableOpacity style={[styles.button, styles.primary]} onPress={() => actions.goToComponent(state.template.components.find(c => c.type !== 'review_submit' && c.type !== 'verification_progress')?.id || 0)}>
+          <Text style={styles.buttonText}>{t('common.retry')}</Text>
+        </TouchableOpacity>
+        <TouchableOpacity style={[styles.button, styles.secondary]}>
+          <Text style={styles.secondaryText}>{t('common.info')}</Text>
+        </TouchableOpacity>
+        {verification.result?.referenceId ? (
+          <Text style={styles.refText}>{`Reference ID: ${verification.result.referenceId}`}</Text>
+        ) : null}
+      </View>
+    );
+  }
+
+
+
+
+
+
+
+  return (
+    <View style={styles.container}>
+      <Text style={styles.title}>{t('kyc.verificationProgress.title')}</Text>
+      <Text style={styles.subtitle}>
+        {isRetrying
+          ? `${t('kyc.verificationProgress.retrying')} (${retryCount}/10)`
+          : t('kyc.verificationProgress.estimatedTime')
+        }
+      </Text>
+
+      <View style={styles.timeline}>
+        <View style={[styles.dot, styles.done]}><Text style={styles.stepCheckmark}>✓</Text></View>
+        <View style={styles.line} />
+        <View style={[styles.dot, styles.active]}><Text style={styles.stepCheckmark}>2</Text></View>
+        <View style={styles.line} />
+        <View style={[styles.dot, styles.pending]}><Text style={styles.stepCheckmark}>3</Text></View>
+      </View>
+
+      <View style={styles.row}>
+        <Text style={styles.stepLabel}>{t('kyc.verificationProgress.status.completed')}</Text>
+        <Text style={styles.stepLabel}>{t('kyc.verificationProgress.steps.analyzing')}</Text>
+        <Text style={styles.stepLabel}>{t('kyc.verificationProgress.steps.verifying')}</Text>
+      </View>
+
+      <View style={styles.card}>
+        <Text style={styles.cardTitle}>{t('kyc.idCardCapture.title')}</Text>
+        <Text style={styles.cardLine}>{t('kyc.verificationProgress.steps.extracting')}</Text>
+        <Text style={styles.cardTitle}>{t('kyc.selfieCapture.title')}</Text>
+        <Text style={styles.cardLine}>{t('kyc.verificationProgress.steps.analyzing')}</Text>
+        <Text style={styles.cardTitle}>{t('kyc.verificationProgress.title')}</Text>
+        <Text style={styles.cardLine}>
+          {isRetrying
+            ? `${t('kyc.verificationProgress.status.processing')}...`
+            : t('kyc.verificationProgress.status.pending')
+          }
+        </Text>
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: { flex: 1, width: '100%', paddingHorizontal: 16, paddingVertical: 12 },
+  title: { fontSize: 24, fontWeight: 'bold', color: '#111827', textAlign: 'center', marginTop: 12 },
+  subtitle: { fontSize: 14, color: '#6B7280', textAlign: 'center', marginTop: 8 },
+  timeline: { flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', marginTop: 24 },
+  dot: { width: 38, height: 38, borderRadius: 34, justifyContent: 'center', alignItems: 'center' },
+  stepCheckmark: { color: 'white', fontSize: 16, fontWeight: 'bold' },
+  line: { flex: 1, height: 4, backgroundColor: '#E5E7EB' },
+  done: { backgroundColor: '#10B981' },
+  active: { backgroundColor: '#F59E0B' },
+  pending: { backgroundColor: '#E5E7EB' },
+  row: { flexDirection: 'row', justifyContent: 'space-between', marginTop: 8 },
+  stepLabel: { fontSize: 14, color: '#111827', fontWeight: '600' },
+  card: { backgroundColor: 'white', padding: 16, borderRadius: 16, marginTop: 24 },
+  cardTitle: { fontSize: 16, color: '#6B7280', marginTop: 8 },
+  cardLine: { fontSize: 18, color: '#111827', fontWeight: '600', marginTop: 2 },
+  // Success/Failure specific
+  button: { paddingVertical: 14, borderRadius: 10, alignItems: 'center', marginTop: 20 },
+  primary: { backgroundColor: '#2DBD60' },
+  buttonText: { color: 'white', fontSize: 16, fontWeight: '600' },
+  refText: { marginTop: 12, textAlign: 'center', color: '#6B7280' },
+  issuesBox: { backgroundColor: '#FEF2F2', borderRadius: 16, padding: 16, marginTop: 20 },
+  issuesTitle: { color: '#991B1B', fontWeight: '700', marginBottom: 8 },
+  issueItem: { color: '#991B1B', marginTop: 4 },
+  secondary: { backgroundColor: '#F3F4F6' },
+  secondaryText: { color: '#111827', fontSize: 16, fontWeight: '600' },
+});
+
+
+

package/src/components/OverLay/IdCard.tsx

@@ -7,18 +7,18 @@ import StepOverlay from "./StepOverlay";
 
 
 
-const IdCardOverlay = ({ xMin: xMinProps, yMin: yMinProps, xMax: xMaxProps, yMax: yMaxProps, cornerOpacity, instructions, cornerColor = "#4CAF50", stepperProps }: IdCardOverlayProps) => {
+const IdCardOverlay = ({ xMin: xMinProps, yMin: yMinProps, xMax: xMaxProps, yMax: yMaxProps, cornerOpacity, instructions, cornerColor = "#4CAF50", stepperProps, isSuccess, language  }: IdCardOverlayProps) => {
     const screenWidth = Dimensions.get('window').width;
     const screenHeight = Dimensions.get('window').height;
 
     const boxWidth = xMaxProps - xMinProps;
     const boxHeight = yMaxProps - yMinProps;
 
-
     
 
-   
-    
+
+
+
     // Calculer les coordonnées pour centrer le cadre
     const xMin = (screenWidth - boxWidth) / 2;
     const yMin = (screenHeight - boxHeight) / 3;
@@ -30,7 +30,7 @@ const IdCardOverlay = ({ xMin: xMinProps, yMin: yMinProps, xMax: xMaxProps, yMax
             {stepperProps ? (
                 <StepOverlay {...stepperProps} />
             ) : null}
-            
+
             <Animated.View style={[styles.topIntruction]}>
                 <Text style={styles.topIntructionText}>
                     💡 {instructions}
@@ -134,15 +134,23 @@ const IdCardOverlay = ({ xMin: xMinProps, yMin: yMinProps, xMax: xMaxProps, yMax
                     opacity={cornerOpacity}
                 />
             </Svg>
-            
-            <ScanningLine yMin={yMin} screenWidth={screenWidth} height={screenHeight} yMax={yMax} />
+            {isSuccess ? null : (
+                <ScanningLine yMin={yMin} screenWidth={screenWidth} height={screenHeight} yMax={yMax} />
+            )}
+            {/* <ScanningLine yMin={yMin} screenWidth={screenWidth} height={screenHeight} yMax={yMax} /> */}
 
             <View style={styles.bottomIntruction}>
                 <Text style={styles.bottomTitle}>
-                    Mesurez 100cm de hauteur.
+                    {language === "en" ? "Measure 100cm in height.":"Mesurez 100cm de hauteur."}
+                  
                 </Text>
                 <Text style={styles.bottomSubtitle}>
-                    Ne pas déplacer la caméra pendant la capture. • Ne pas déplacer la caméra pendant la capture.
+                    {
+                        language === "en" 
+                          ? "Do not move the camera during capture. • Do not move the camera during capture."
+                          : "Ne pas déplacer la caméra pendant la capture. • Ne pas déplacer la caméra pendant la capture."
+                    }
+                    
                 </Text>
             </View>
         </View>)