@sanctum-key/react-native-sdk 1.0.6 → 1.0.8

package/src/components/KYCElements/SelfieCaptureTemplate.tsx

@@ -1,662 +1,330 @@
-import React, { useEffect, useMemo, useState } from 'react';
-import { View, Text, StyleSheet, ScrollView, Image, TouchableOpacity } from 'react-native';
-import { showAlert } from '../../utils/platformAlert';
-import { TemplateComponent, 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, IImagePayload> | undefined;
-  onValueChange: (value: Record<string, IImagePayload | string>) => void;
-  error?: string;
-  language: string;
-}
-
-export const SelfieCaptureTemplate: React.FC<SelfieCaptureTemplateProps> = ({
-  component,
-  value,
-  onValueChange,
-  error,
-  language,
-}) => {
-  const { t } = useI18n();
-  // const config = component.config as SelfieConfig;
-  const orientations: OrientationType[] = (['center','left','right']) as OrientationType[];
-  const { actions, state, env } = useTemplateKYCFlowContext();
-
-  const [silentCaptureResult, setSilentCaptureResult] = useState<ISilentCaptureResult>({ success: false, isAnalyzing: false });
-
-  const [showCamera, setShowCamera] = useState(false);
-  const [showPreview, setShowPreview] = useState(false);
-  const [previewImagePath, setPreviewImagePath] = useState<string | null>(null);
-  const [currentOrientation, setCurrentOrientation] = useState<OrientationType>(orientations[0]);
-  const [capturedImages, setCapturedImages] = useState<Record<string, IImagePayload>>(value || {});
-
-  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: OrientationType): string => {
-    switch (orientation) {
-      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 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 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 as LocalizedText);
-    }
-  };
-
-  useEffect(() => {
-    actions.showCustomStepper(!showCamera);
-  }, [showCamera]);
-
-  const getOrientationLabel = (orientation: OrientationType): string => {
-    switch (orientation) {
-      case 'center':
-        return state.currentLanguage === "en" ? "Front Profile Selfie" : "Selfie de face";
-      case 'left':
-        return state.currentLanguage === "en" ? "Left Profile Selfie" : "Selfie profil gauche";
-      case 'right':
-        return state.currentLanguage === "en" ? "Right Profile Selfie" : "Selfie profil droit";
-      default:
-        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");
-
-  //   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 '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:
-            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:
-            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 as LocalizedText), subtitle: getLocalizedText(component.instructions as LocalizedText) };
-    }
-  };
-
-  const handleSilentCapture = (result: { success: boolean; path?: string; error?: string }) => {
-    if (silentCaptureResult.isAnalyzing) {
-      return;
-    }
-    if (result.success && result.path) {
-      setSilentCaptureResult((prev) => ({ ...prev, isAnalyzing: true, success: false, error: '' }));
-      selfieVerification(result.path, env).then((response) => {
-        if (response.length > 0) {
-          const res = response[0];
-          // In SANDBOX mode, always accept the result regardless of orientation
-          if (env === 'SANDBOX' && res?.capture) {
-            setSilentCaptureResult((prev) => ({ ...prev, isAnalyzing: false, success: true, error: '', path: result.path }));
-          } else 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' }));
-      });
-    }
-  }
-
-  // Capture manuelle - affiche le preview
-  const handleCapture = async (result: { success: boolean; path?: string; error?: string }) => {
-    console.log("handleCapture called", result, silentCaptureResult);
-
-    // Priorité 1: Si la capture silencieuse a réussi, utiliser ce path
-    if (silentCaptureResult.success && silentCaptureResult.path) {
-      setPreviewImagePath(silentCaptureResult.path);
-      setShowCamera(false);
-      setShowPreview(true);
-      return;
-    }
-
-    // Priorité 2: Capture manuelle normale
-    if (result.success && result.path) {
-      setPreviewImagePath(result.path);
-      setShowCamera(false);
-      setShowPreview(true);
-    }
-  };
-
-  // Confirmer la capture depuis le preview
-  const handleConfirmCapture = async () => {
-    if (!previewImagePath) return;
-
-    try {
-      const base64 = await pathToBase64(previewImagePath);
-      const newImages: Record<string, any> = {
-        ...capturedImages,
-        [currentOrientation]: { dir: previewImagePath, file: base64 } as IImagePayload,
-      };
-      setCapturedImages(newImages);
-      onValueChange(newImages);
-      setShowPreview(false);
-      setPreviewImagePath(null);
-      setSilentCaptureResult({ success: false, isAnalyzing: false });
-
-      // Passer à l'orientation suivante si disponible
-      const currentIndex = orientations.indexOf(currentOrientation as OrientationType);
-      if (currentIndex < orientations.length - 1) {
-        const nextOrientation = orientations[currentIndex + 1];
-        setCurrentOrientation(nextOrientation);
-        // Rouvrir automatiquement la caméra pour la prochaine orientation
-        setShowCamera(true);
-      }
-      // Si toutes les orientations sont complétées, on reste sur la vue principale
-    } catch (e) {
-      console.error("Error confirming capture", e);
-      showAlert('Erreur', 'Erreur lors de la sauvegarde de l\'image');
-    }
-  };
-
-  // Reprendre la photo depuis le preview
-  const handleRetakeFromPreview = () => {
-    setShowPreview(false);
-    setPreviewImagePath(null);
-    setSilentCaptureResult({ success: false, isAnalyzing: false });
-    setShowCamera(true);
-  };
-  const idCardData = useMemo(() => {
-    const idCardID = Object.keys(state.componentData).find((c: string) => c === "1");
-    if (idCardID) {
-      const _idCardData = state.componentData[idCardID];
-      const documentType = _idCardData?.documentType;
-      // Map national_id to identity_card for selfie capture
-      const mappedDocumentType = documentType === 'national_id' ? 'identity_card' : documentType;
-      return {
-        country: _idCardData?.country,
-        documentType: mappedDocumentType as GovernmentDocumentType
-      };
-    }
-    return null;
-  }, [state.componentData]);
-  console.log("idCardData", truncateFields(idCardData), JSON.stringify(truncateFields(state.componentData), null, 2));
-
-
-  const handleError = (event: { message: string }) => {
-    showAlert('Erreur', event.message);
-    setShowCamera(false);
-  };
-
-
-  const isOrientationCompleted = (orientation: OrientationType): boolean => {
-    return !!capturedImages[orientation];
-  };
-
-  const isAllOrientationsCompleted = (): boolean => {
-    return orientations.every(orientation => isOrientationCompleted(orientation));
-  };
-  console.log("Current Orientation", currentOrientation);
-
-  // Vue Preview
-  if (showPreview && previewImagePath) {
-    return (
-      <View style={styles.containerCamera}>
-        <View style={styles.previewContainer}>
-          <View style={styles.previewHeader}>
-            <TouchableOpacity onPress={handleRetakeFromPreview} style={styles.backButton}>
-              <Text style={styles.backButtonText}>←</Text>
-            </TouchableOpacity>
-            <Text style={styles.previewTitle}>
-              {state.currentLanguage === "en" ? "Preview" : "Aperçu"}
-            </Text>
-            <View style={{ width: 40 }} />
-          </View>
-
-          <View style={styles.previewImageContainer}>
-            <Image
-              source={{ uri: previewImagePath }}
-              style={styles.previewImage}
-              resizeMode="contain"
-            />
-          </View>
-
-          <Text style={styles.previewInstructions}>
-            {state.currentLanguage === "en"
-              ? "Is your face clearly visible?"
-              : "Votre visage est-il clairement visible ?"}
-          </Text>
-
-          <View style={styles.previewButtonsContainer}>
-            <TouchableOpacity
-              style={styles.retakeButton}
-              onPress={handleRetakeFromPreview}
-            >
-              <Text style={styles.retakeButtonText}>
-                {state.currentLanguage === "en" ? "Retake" : "Reprendre"}
-              </Text>
-            </TouchableOpacity>
-
-            <TouchableOpacity
-              style={styles.confirmButton}
-              onPress={handleConfirmCapture}
-            >
-              <Text style={styles.confirmButtonText}>
-                {state.currentLanguage === "en" ? "Use Photo" : "Utiliser"}
-              </Text>
-            </TouchableOpacity>
-          </View>
-        </View>
-      </View>
-    );
-  }
-
-  // Vue Camera
-  if (showCamera) {
-    return (
-      <View style={styles.containerCamera}>
-        <EnhancedCameraView
-          instructions={getOrientationInstructions(currentOrientation)}
-          showCamera={true}
-          cameraType="front"
-          style={styles.camera}
-          onCapture={handleCapture}
-          onError={handleError}
-          onClose={() => setShowCamera(false)}
-          quality="high"
-          showCaptureButton={true}
-          showSwitchCamera={false}
-          enableFlash={false}
-          silentCaptureResult={silentCaptureResult}
-          onSilentCapture={handleSilentCapture}
-          overlayComponent={<SelfieOverlay
-            xMin={20}
-            yMin={140}
-            xMax={370}
-            yMax={340}
-            cornerOpacity={1}
-            instructions={""}
-            language={state.currentLanguage}
-            orientation={currentOrientation as 'center' | 'left' | 'right'}
-            instructionsTile={getInstructions(currentOrientation).title}
-            instructionsSubtitle={getInstructions(currentOrientation).subtitle}
-            stepperProps={{
-              back: () => {
-                setShowCamera(false);
-              },
-              selectedDocumentType: "Selfie",
-              step: state.currentComponentIndex + 1,
-              totalSteps: state.template.components.length,
-              side: currentOrientation,
-            }} />}
-        />
-      </View>
-    );
-  }
-
-  return (
-    <View style={[{
-      maxWidth: 760,
-      width: '100%',
-      height: '100%',
-    }]}>
-      <View style={styles.container}>
-        <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 }}>
-
-            {orientations.map((orientation, key) => (
-              <View key={orientation} style={{
-                backgroundColor: '#F3F4F6',
-                borderRadius: 12,
-                flexDirection: 'row',
-                alignItems: 'center',
-                gap: 10,
-                width: '100%',
-                paddingVertical: 10,
-                paddingHorizontal: 10,
-              }}>
-                <View style={{
-                  flexDirection: 'row',
-                  alignItems: 'center',
-                  justifyContent: 'center',
-                  backgroundColor: isOrientationCompleted(orientation) ? '#2DBE60' : '#D1D5DB',
-                  borderRadius: 100,
-                  width: 30,
-                  height: 30,
-                }}>
-                  <Text style={{ color: 'white', fontSize: 16, fontWeight: 'bold' }}>{key + 1}</Text>
-                </View>
-
-
-                <Text style={styles.orientationTitle}>
-                  {getOrientationLabel(orientation)}
-                </Text>
-
-
-
-              </View>
-            ))}
-            <View style={{ backgroundColor: "#F6CB0D1A", width: "100%", padding: 10, borderRadius: 10 }} >
-              <Text style={{ color: '#997E06', fontSize: 16, fontWeight: 'bold' }}>
-                {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' }}>
-                  {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={t('common.continue')} fullWidth style={{ paddingVertical: 20, paddingTop: 12 }} onPress={async () => {
-                const value = {
-                  ...capturedImages,
-                  ...(idCardData?.country ? { country: idCardData.country } : {}),
-                  ...(idCardData?.documentType ? { documentType: idCardData.documentType } : {}),
-                }
-                console.log("value", JSON.stringify(truncateFields(value), null, 2));
-                onValueChange(value);
-                actions.nextComponent();
-              }} />
-            </> : (
-              <Button title={t('kyc.selfieCapture.captureButton')} fullWidth style={{ paddingVertical: 20, paddingTop: 12 }} onPress={() => {
-                if (isAllOrientationsCompleted()) {
-
-                  actions.nextComponent();
-                } else {
-                  setSilentCaptureResult((prev) => ({ ...prev, isAnalyzing: false, success: false, error: '' }));
-                  setShowCamera(true);
-                }
-              }} />
-            )}
-
-          </View>
-        </ScrollView>
-
-        {error && (
-          <Text style={styles.errorText}>{error}</Text>
-        )}
-      </View>
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  root: {
-    flex: 1,
-    paddingVertical: 10,
-  },
-  container: {
-    backgroundColor: 'white',
-    margin: 15,
-    borderRadius: 20,
-    paddingVertical: 20,
-    paddingHorizontal: 16,
-    shadowColor: '#000',
-    shadowOffset: { width: 0, height: 2 },
-    shadowOpacity: 0.35,
-    shadowRadius: 4.84,
-    elevation: 10,
-  },
-  containerCamera: {
-    flex: 1,
-    width: '100%',
-    height: '100%',
-    backgroundColor: '#000',
-  },
-  title: {
-    fontSize: 24,
-    fontWeight: 'bold',
-    color: '#333',
-    marginBottom: 8,
-    textAlign: 'center',
-  },
-  description: {
-    fontSize: 16,
-    color: '#666',
-    marginBottom: 20,
-    lineHeight: 22,
-    textAlign: 'center',
-  },
-  camera: {
-    flex: 1,
-    overflow: 'hidden',
-  },
-  attemptsText: {
-    fontSize: 14,
-    color: '#666',
-    textAlign: 'center',
-    marginBottom: 10,
-  },
-  orientationsContainer: {
-  },
-  orientationContainer: {
-    backgroundColor: 'white',
-    borderRadius: 12,
-    padding: 16,
-    marginBottom: 16,
-    shadowColor: '#000',
-    shadowOffset: {
-      width: 0,
-      height: 2,
-    },
-    shadowOpacity: 0.1,
-    shadowRadius: 3.84,
-    elevation: 5,
-  },
-  orientationTitle: {
-    fontSize: 18,
-    fontWeight: '600',
-    color: '#333',
-  },
-  capturedImageContainer: {
-    alignItems: 'center',
-  },
-  capturedImage: {
-    width: 200,
-    height: 200,
-    borderRadius: 12,
-    marginBottom: 12,
-  },
-  captureButton: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'center',
-    backgroundColor: '#2DBD60',
-    paddingVertical: 16,
-    paddingHorizontal: 24,
-    borderRadius: 12,
-    marginTop: 8,
-  },
-  captureIcon: {
-    fontSize: 24,
-    marginRight: 8,
-  },
-  captureText: {
-    fontSize: 16,
-    fontWeight: '600',
-    color: 'white',
-  },
-  // Preview styles
-  previewContainer: {
-    flex: 1,
-    backgroundColor: '#000',
-    justifyContent: 'space-between',
-  },
-  previewHeader: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-    paddingHorizontal: 16,
-    paddingTop: 50,
-    paddingBottom: 16,
-  },
-  backButton: {
-    width: 40,
-    height: 40,
-    borderRadius: 20,
-    backgroundColor: 'rgba(255,255,255,0.2)',
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  backButtonText: {
-    color: 'white',
-    fontSize: 24,
-    fontWeight: 'bold',
-  },
-  previewTitle: {
-    color: 'white',
-    fontSize: 18,
-    fontWeight: '600',
-  },
-  previewImageContainer: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-    paddingHorizontal: 20,
-  },
-  previewImage: {
-    width: '100%',
-    height: '80%',
-    borderRadius: 16,
-  },
-  previewInstructions: {
-    color: 'white',
-    fontSize: 16,
-    textAlign: 'center',
-    paddingHorizontal: 20,
-    marginBottom: 20,
-  },
-  previewButtonsContainer: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    paddingHorizontal: 20,
-    paddingBottom: 40,
-    gap: 16,
-  },
-  retakeButton: {
-    flex: 1,
-    backgroundColor: 'rgba(255,255,255,0.2)',
-    paddingVertical: 16,
-    paddingHorizontal: 20,
-    borderRadius: 12,
-    alignItems: 'center',
-  },
-  retakeButtonText: {
-    fontSize: 16,
-    fontWeight: '600',
-    color: 'white',
-  },
-  confirmButton: {
-    flex: 1,
-    backgroundColor: '#2DBD60',
-    paddingVertical: 16,
-    paddingHorizontal: 20,
-    borderRadius: 12,
-    alignItems: 'center',
-  },
-  confirmButtonText: {
-    fontSize: 16,
-    fontWeight: '600',
-    color: 'white',
-  },
-  completionContainer: {
-    alignItems: 'center',
-    padding: 20,
-  },
-  completionText: {
-    fontSize: 18,
-    fontWeight: '600',
-    color: '#2DBD60',
-    marginBottom: 16,
-  },
-  retakeAllButton: {
-    backgroundColor: '#FF6B6B',
-    paddingVertical: 12,
-    paddingHorizontal: 20,
-    borderRadius: 8,
-  },
-  retakeAllButtonText: {
-    fontSize: 14,
-    fontWeight: '600',
-    color: 'white',
-  },
-  errorText: {
-    color: '#dc2626',
-    fontSize: 14,
-    textAlign: 'center',
-    marginTop: 10,
-  },
-}); 
+import React, { useEffect, useMemo, useState } from 'react'; 
+import { View, Text, StyleSheet, ScrollView, Image, TouchableOpacity, ActivityIndicator, Platform } from 'react-native'; 
+import { showAlert } from '../../utils/platformAlert'; 
+import { TemplateComponent, 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'; 
+
+interface IImagePayload { dir: string; file: string; } 
+interface SelfieCaptureTemplateProps { 
+  component: TemplateComponent; 
+  value: Record<string, IImagePayload> | undefined; 
+  onValueChange: (value: Record<string, IImagePayload | string>) => void; 
+  error?: string; 
+  language: string; 
+} 
+
+export const SelfieCaptureTemplate: React.FC<SelfieCaptureTemplateProps> = ({ 
+  component, value, onValueChange, error, language, 
+}) => { 
+  const { t } = useI18n(); 
+  const orientations: OrientationType[] = (['center','left','right']) as OrientationType[]; 
+  const { actions, state, env } = useTemplateKYCFlowContext(); 
+  
+  const [silentCaptureResult, setSilentCaptureResult] = useState<ISilentCaptureResult>({ success: false, isAnalyzing: false }); 
+  const [showCamera, setShowCamera] = useState(false); 
+  const [showPreview, setShowPreview] = useState(false); 
+  const [previewImagePath, setPreviewImagePath] = useState<string | null>(null); 
+  const [currentOrientation, setCurrentOrientation] = useState<OrientationType>(orientations[0]); 
+  const [capturedImages, setCapturedImages] = useState<Record<string, IImagePayload>>(value || {}); 
+
+  const getLocalizedText = (text: LocalizedText | Record<string, LocalizedText>): string => { 
+    if (!text) return ''; 
+    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 || ''; 
+  }; 
+
+
+  useEffect(() => { 
+    actions.showCustomStepper(!showCamera); 
+  }, [showCamera]); 
+
+  const getOrientationLabel = (orientation: OrientationType): string => { 
+    switch (orientation) { 
+      case 'center': return state.currentLanguage === "en" ? "Front Profile Selfie" : "Selfie de face"; 
+      case 'left': return state.currentLanguage === "en" ? "Left Profile Selfie" : "Selfie profil gauche"; 
+      case 'right': return state.currentLanguage === "en" ? "Right Profile Selfie" : "Selfie profil droit"; 
+      default: 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: OrientationType): { title: string, subtitle: string } => { 
+    const lang = state.currentLanguage; 
+    switch (orientation) { 
+      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: 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: 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 as LocalizedText), subtitle: getLocalizedText(component.instructions as LocalizedText) }; 
+    } 
+  }; 
+
+  // 🚨 THE CRITICAL FIX: The AI automatically triggers the preview!
+  const handleSilentCapture = (result: { success: boolean; path?: string; error?: string }) => { 
+    if (silentCaptureResult.isAnalyzing) return; 
+
+    if (result.success && result.path) { 
+      setSilentCaptureResult((prev) => ({ ...prev, isAnalyzing: true, success: false, error: '' })); 
+
+      selfieVerification(result.path, env).then((response) => { 
+        if (response.length > 0) { 
+          const res = response[0]; 
+          
+          if ((env === 'SANDBOX' && res?.capture) || (res?.orientation_direction === getOrientationOpposite(currentOrientation) && res?.capture)) { 
+             
+             // 🎯 PERFECT MATCH! Skip the manual button and AUTO CAPTURE instantly
+             setSilentCaptureResult((prev) => ({ ...prev, isAnalyzing: false, success: true, error: '', path: result.path })); 
+             setPreviewImagePath(result.path ?? null);
+             setShowCamera(false);
+             setShowPreview(true);
+
+          } 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' })); 
+      }); 
+    } 
+  } 
+
+  // Legacy manual capture removed. Error handler kept.
+  const handleError = (event: { message: string }) => { 
+    showAlert('Erreur', event.message); 
+    setShowCamera(false); 
+  }; 
+
+  const handleConfirmCapture = async () => { 
+    if (!previewImagePath) return; 
+    try { 
+      const base64 = await pathToBase64(previewImagePath); 
+      const newImages: Record<string, any> = { 
+        ...capturedImages, 
+        [currentOrientation]: { dir: previewImagePath, file: base64 } as IImagePayload, 
+      }; 
+      setCapturedImages(newImages); 
+      onValueChange(newImages); 
+      setShowPreview(false); 
+      setPreviewImagePath(null); 
+      setSilentCaptureResult({ success: false, isAnalyzing: false }); 
+
+      const currentIndex = orientations.indexOf(currentOrientation as OrientationType); 
+      if (currentIndex < orientations.length - 1) { 
+        const nextOrientation = orientations[currentIndex + 1]; 
+        setCurrentOrientation(nextOrientation); 
+        setShowCamera(true); 
+      } 
+    } catch (e) { 
+      console.error("Error confirming capture", e); 
+      showAlert('Erreur', 'Erreur lors de la sauvegarde de l\'image'); 
+    } 
+  }; 
+
+  const handleRetakeFromPreview = () => { 
+    setShowPreview(false); 
+    setPreviewImagePath(null); 
+    setSilentCaptureResult({ success: false, isAnalyzing: false }); 
+    setShowCamera(true); 
+  }; 
+
+  const idCardData = useMemo(() => { 
+    const idCardID = Object.keys(state.componentData).find((c: string) => c === "1"); 
+    if (idCardID) { 
+      const _idCardData = state.componentData[idCardID]; 
+      const documentType = _idCardData?.documentType; 
+      const mappedDocumentType = documentType === 'national_id' ? 'identity_card' : documentType; 
+      return { country: _idCardData?.country, documentType: mappedDocumentType as GovernmentDocumentType }; 
+    } 
+    return null; 
+  }, [state.componentData]); 
+
+  const isOrientationCompleted = (orientation: OrientationType): boolean => { return !!capturedImages[orientation]; }; 
+  const isAllOrientationsCompleted = (): boolean => { return orientations.every(orientation => isOrientationCompleted(orientation)); }; 
+
+  // --- PREVIEW RENDER ---
+  if (showPreview && previewImagePath) { 
+    return ( 
+      <View style={styles.containerCamera}> 
+        <View style={styles.previewContainer}> 
+          <View style={styles.previewHeader}> 
+            <TouchableOpacity onPress={handleRetakeFromPreview} style={styles.backButton}> 
+              <Text style={styles.backButtonText}>←</Text> 
+            </TouchableOpacity> 
+            <Text style={styles.previewTitle}>{state.currentLanguage === "en" ? "Preview" : "Aperçu"}</Text> 
+            <View style={{ width: 40 }} /> 
+          </View> 
+          <View style={styles.previewImageContainer}> 
+            <Image source={{ uri: previewImagePath }} style={styles.previewImage} resizeMode="contain" /> 
+          </View> 
+          <Text style={styles.previewInstructions}> 
+            {state.currentLanguage === "en" ? "Is your face clearly visible?" : "Votre visage est-il clairement visible ?"} 
+          </Text> 
+          <View style={styles.previewButtonsContainer}> 
+            <TouchableOpacity style={styles.retakeButton} onPress={handleRetakeFromPreview}> 
+              <Text style={styles.retakeButtonText}>{state.currentLanguage === "en" ? "Retake" : "Reprendre"}</Text> 
+            </TouchableOpacity> 
+            <TouchableOpacity style={styles.confirmButton} onPress={handleConfirmCapture}> 
+              <Text style={styles.confirmButtonText}>{state.currentLanguage === "en" ? "Use Photo" : "Utiliser"}</Text> 
+            </TouchableOpacity> 
+          </View> 
+        </View> 
+      </View> 
+    ); 
+  } 
+
+  // --- CAMERA RENDER ---
+  if (showCamera) { 
+    return ( 
+      <View style={styles.containerCamera}> 
+        <EnhancedCameraView 
+          key={currentOrientation} // Forces complete reset when direction changes
+          showCamera={true} 
+          cameraType="front" 
+          style={styles.camera} 
+          onError={handleError} 
+          onClose={() => setShowCamera(false)} 
+          quality="high" 
+          silentCaptureResult={silentCaptureResult} 
+          onSilentCapture={handleSilentCapture} 
+          overlayComponent={
+            <>
+              {/* Subtle AI processing pill */}
+              {silentCaptureResult.isAnalyzing && (
+                 <View style={styles.topAnalyzingPillContainer}>
+                    <View style={styles.topAnalyzingPill}>
+                      <ActivityIndicator size="small" color="white" />
+                      <Text style={styles.analyzingPillText}>
+                         {state.currentLanguage === 'en' ? 'Verifying position...' : 'Vérification...'}
+                      </Text>
+                    </View>
+                 </View>
+              )}
+
+              <SelfieOverlay 
+                xMin={20} yMin={140} xMax={370} yMax={340} 
+                cornerOpacity={1} 
+                instructions={""} 
+                language={state.currentLanguage} 
+                orientation={currentOrientation as 'center' | 'left' | 'right'} 
+                instructionsTile={getInstructions(currentOrientation).title} 
+                instructionsSubtitle={getInstructions(currentOrientation).subtitle} 
+                stepperProps={{ 
+                  back: () => setShowCamera(false), 
+                  selectedDocumentType: "Selfie", 
+                  step: state.currentComponentIndex + 1, 
+                  totalSteps: state.template.components.length, 
+                  side: currentOrientation, 
+                }} 
+              />
+            </>
+          } 
+        /> 
+      </View> 
+    ); 
+  } 
+
+  return ( 
+    <View style={[{ maxWidth: 760, width: '100%', height: '100%' }]}> 
+      <View style={styles.container}> 
+        <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 }}> 
+            {orientations.map((orientation, key) => ( 
+              <View key={orientation} style={styles.orientationListItem}> 
+                <View style={[styles.orientationListCircle, { backgroundColor: isOrientationCompleted(orientation) ? '#2DBE60' : '#D1D5DB' }]}> 
+                  <Text style={{ color: 'white', fontSize: 16, fontWeight: 'bold' }}>{key + 1}</Text> 
+                </View> 
+                <Text style={styles.orientationTitle}>{getOrientationLabel(orientation)}</Text> 
+              </View> 
+            ))} 
+            <View style={styles.tipsContainer}> 
+              <Text style={styles.tipsHeader}> 
+                {state.currentLanguage === "en" ? "Tips for a good selfie:" : "Conseils pour une bonne photo selfie :"} 
+              </Text> 
+              <View style={{ paddingLeft: 10, paddingTop: 4 }}> 
+                <Text style={styles.tipsBody}> 
+                  {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={t('common.continue')} fullWidth style={{ paddingVertical: 20, paddingTop: 12 }} onPress={async () => { 
+                const value = { 
+                  ...capturedImages, 
+                  ...(idCardData?.country ? { country: idCardData.country } : {}), 
+                  ...(idCardData?.documentType ? { documentType: idCardData.documentType } : {}), 
+                } 
+                onValueChange(value); 
+                actions.nextComponent(); 
+              }} /> 
+            ) : ( 
+              <Button title={t('kyc.selfieCapture.captureButton')} fullWidth style={{ paddingVertical: 20, paddingTop: 12 }} onPress={() => { 
+                setSilentCaptureResult((prev) => ({ ...prev, isAnalyzing: false, success: false, error: '' })); 
+                setShowCamera(true); 
+              }} /> 
+            )} 
+          </View> 
+        </ScrollView> 
+        {error && <Text style={styles.errorText}>{error}</Text>} 
+      </View> 
+    </View> 
+  ); 
+}; 
+
+const styles = StyleSheet.create({ 
+  root: { flex: 1, paddingVertical: 10 }, 
+  container: { backgroundColor: 'white', margin: 15, borderRadius: 20, paddingVertical: 20, paddingHorizontal: 16, shadowColor: '#000', shadowOffset: { width: 0, height: 2 }, shadowOpacity: 0.35, shadowRadius: 4.84, elevation: 10 }, 
+  containerCamera: { ...StyleSheet.absoluteFillObject, backgroundColor: '#000', zIndex: 999 }, 
+  title: { fontSize: 24, fontWeight: 'bold', color: '#333', marginBottom: 8, textAlign: 'center' }, 
+  description: { fontSize: 16, color: '#666', marginBottom: 20, lineHeight: 22, textAlign: 'center' }, 
+  camera: { flex: 1 }, 
+  orientationsContainer: {}, 
+  orientationListItem: { backgroundColor: '#F3F4F6', borderRadius: 12, flexDirection: 'row', alignItems: 'center', gap: 10, width: '100%', paddingVertical: 10, paddingHorizontal: 10 },
+  orientationListCircle: { flexDirection: 'row', alignItems: 'center', justifyContent: 'center', borderRadius: 100, width: 30, height: 30 },
+  orientationTitle: { fontSize: 18, fontWeight: '600', color: '#333' }, 
+  tipsContainer: { backgroundColor: "#F6CB0D1A", width: "100%", padding: 10, borderRadius: 10 },
+  tipsHeader: { color: '#997E06', fontSize: 16, fontWeight: 'bold' },
+  tipsBody: { color: '#997E06', fontSize: 14, fontWeight: 'bold' },
+  previewContainer: { flex: 1, backgroundColor: '#000', justifyContent: 'space-between' }, 
+  previewHeader: { flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', paddingHorizontal: 16, paddingTop: 50, paddingBottom: 16 }, 
+  backButton: { width: 40, height: 40, borderRadius: 20, backgroundColor: 'rgba(255,255,255,0.2)', justifyContent: 'center', alignItems: 'center' }, 
+  backButtonText: { color: 'white', fontSize: 24, fontWeight: 'bold' }, 
+  previewTitle: { color: 'white', fontSize: 18, fontWeight: '600' }, 
+  previewImageContainer: { flex: 1, justifyContent: 'center', alignItems: 'center', paddingHorizontal: 20 }, 
+  previewImage: { width: '100%', height: '80%', borderRadius: 16 }, 
+  previewInstructions: { color: 'white', fontSize: 16, textAlign: 'center', paddingHorizontal: 20, marginBottom: 20 }, 
+  previewButtonsContainer: { flexDirection: 'row', justifyContent: 'space-between', paddingHorizontal: 20, paddingBottom: 40, gap: 16 }, 
+  retakeButton: { flex: 1, backgroundColor: 'rgba(255,255,255,0.2)', paddingVertical: 16, paddingHorizontal: 20, borderRadius: 12, alignItems: 'center' }, 
+  retakeButtonText: { fontSize: 16, fontWeight: '600', color: 'white' }, 
+  confirmButton: { flex: 1, backgroundColor: '#2DBD60', paddingVertical: 16, paddingHorizontal: 20, borderRadius: 12, alignItems: 'center' }, 
+  confirmButtonText: { fontSize: 16, fontWeight: '600', color: 'white' }, 
+  errorText: { color: '#dc2626', fontSize: 14, textAlign: 'center', marginTop: 10 }, 
+  topAnalyzingPillContainer: { position: 'absolute', top: Platform.OS === 'android' ? 60 : 50, left: 0, right: 0, alignItems: 'center', zIndex: 100 },
+  topAnalyzingPill: { flexDirection: 'row', alignItems: 'center', backgroundColor: 'rgba(0,0,0,0.6)', paddingVertical: 8, paddingHorizontal: 16, borderRadius: 20, gap: 8 },
+  analyzingPillText: { color: 'white', fontSize: 14, fontWeight: 'bold' },
+});