@sanctum-key/react-native-sdk 1.0.48 → 1.0.50

package/src/components/KYCElements/LocationCaptureTemplate.tsx

@@ -8,6 +8,7 @@ import * as Location from 'expo-location';
 import { useTemplateKYCFlowContext } from '../../hooks/useTemplateKYCFlow';
 import { useI18n } from '../../hooks/useI18n';
 import { showAlert } from '../../utils/platformAlert';
+import { sdkLogger } from '../../utils/logger'; // 🚨 IMPORT SDK LOGGER
 
 interface LocationCaptureTemplateProps {
   component: TemplateComponent;
@@ -27,17 +28,21 @@ export const LocationCaptureTemplate: React.FC<LocationCaptureTemplateProps> = (
   const { t } = useI18n();
   const [isRequesting, setIsRequesting] = useState(false);
   const [currentLocation, setCurrentLocation] = useState<{ latitude: number; longitude: number; accuracy: number } | null>(value || null);
-  const { actions } = useTemplateKYCFlowContext();
+  const { actions, state } = useTemplateKYCFlowContext();
   const config = component.config as LocationConfig;
 
+  // 🚨 LOG: Track when the user reaches this step
+  useEffect(() => {
+    if (state.session?.session_id) {
+      sdkLogger.info("User started location capture step");
+    }
+  }, [state.session?.session_id]);
+
   const requestLocationPermission = async (): Promise<boolean> => {
     try {
-      // On web, use browser's geolocation API directly
       if (Platform.OS === 'web') {
         return await requestWebGeolocationPermission();
       }
-      
-      // On native, use expo-location
       const { status } = await Location.requestForegroundPermissionsAsync();
       return status === 'granted';
     } catch (err) {
@@ -48,39 +53,32 @@ export const LocationCaptureTemplate: React.FC<LocationCaptureTemplateProps> = (
 
   const requestWebGeolocationPermission = async (): Promise<boolean> => {
     if (!navigator.geolocation) {
-      console.error('Geolocation is not supported by this browser');
       return false;
     }
-
     try {
-      // Check if permission API is available
       if ('permissions' in navigator) {
         const result = await navigator.permissions.query({ name: 'geolocation' as PermissionName });
         return result.state === 'granted' || result.state === 'prompt';
       }
-      
-      // Fallback: assume we can request permission
       return true;
     } catch (err) {
-      console.warn('Could not check geolocation permission:', err);
-      // Assume we can try to request
       return true;
     }
   };
 
   const getCurrentLocation = async () => {
     try {
+      sdkLogger.info("User initiated location request"); // 🚨 LOG
       setIsRequesting(true);
 
-      // Web platform: use browser geolocation API
       if (Platform.OS === 'web') {
         await getWebGeolocation();
         return;
       }
 
-      // Native platform: use expo-location
       const hasLocationPermission = await requestLocationPermission();
       if (!hasLocationPermission) {
+        sdkLogger.warn("Location permission denied by user"); // 🚨 LOG
         showAlert(
           t('kyc.locationCapture.permissionDeniedTitle'),
           t('kyc.locationCapture.permissionDeniedMessage')
@@ -89,9 +87,9 @@ export const LocationCaptureTemplate: React.FC<LocationCaptureTemplateProps> = (
         return;
       }
 
-      // Vérifier si la localisation est activée
       const isLocationEnabled = await Location.hasServicesEnabledAsync();
       if (!isLocationEnabled) {
+        sdkLogger.warn("Location services are disabled on device"); // 🚨 LOG
         showAlert(
           t('kyc.locationCapture.locationDisabledTitle'),
           t('kyc.locationCapture.locationDisabledMessage')
@@ -100,7 +98,6 @@ export const LocationCaptureTemplate: React.FC<LocationCaptureTemplateProps> = (
         return;
       }
 
-      // Récupérer la localisation actuelle
       const location = await Location.getCurrentPositionAsync({
         accuracy: config.accuracy === 'high' ? Location.Accuracy.High : Location.Accuracy.Balanced,
         timeInterval: 5000,
@@ -113,12 +110,13 @@ export const LocationCaptureTemplate: React.FC<LocationCaptureTemplateProps> = (
         accuracy: location.coords.accuracy || 50,
       };
 
-      // Mettre à jour l'état local et passer la valeur au parent
+      // 🚨 LOG: Success (coordinates omitted for privacy)
+      sdkLogger.info("Location successfully captured", { accuracy: locationData.accuracy, platform: 'native' });
+
       setCurrentLocation(locationData);
       onValueChange(locationData);
-
-    } catch (error) {
-      console.error('Erreur lors de la récupération de la localisation:', error);
+    } catch (error: any) {
+      sdkLogger.error("Failed to capture native location", { error: error?.message }); // 🚨 LOG
       showAlert(t('kyc.locationCapture.errorTitle'), t('kyc.locationCapture.errorMessage'));
     } finally {
       setIsRequesting(false);
@@ -128,6 +126,7 @@ export const LocationCaptureTemplate: React.FC<LocationCaptureTemplateProps> = (
   const getWebGeolocation = async () => {
     return new Promise<void>((resolve, reject) => {
       if (!navigator.geolocation) {
+        sdkLogger.error("Web Geolocation not supported by browser"); // 🚨 LOG
         showAlert(
           t('kyc.locationCapture.errorTitle'),
           'Geolocation is not supported by your browser. Please use a modern browser or enable location services.'
@@ -149,19 +148,21 @@ export const LocationCaptureTemplate: React.FC<LocationCaptureTemplateProps> = (
             longitude: position.coords.longitude,
             accuracy: position.coords.accuracy,
           };
+          
+          // 🚨 LOG: Success (coordinates omitted for privacy)
+          sdkLogger.info("Location successfully captured", { accuracy: locationData.accuracy, platform: 'web' });
 
           setCurrentLocation(locationData);
           onValueChange(locationData);
           resolve();
         },
         (error) => {
-          console.error('Geolocation error:', error);
-          
+          sdkLogger.error("Web Geolocation error", { errorCode: error.code, errorMessage: error.message }); // 🚨 LOG
+
           let errorMessage = t('kyc.locationCapture.errorMessage');
-          
           switch (error.code) {
             case error.PERMISSION_DENIED:
-              errorMessage = Platform.OS === 'web' 
+              errorMessage = Platform.OS === 'web'
                 ? 'Location permission denied. Please enable location access in your browser settings and try again.'
                 : t('kyc.locationCapture.permissionDeniedMessage');
               break;
@@ -172,7 +173,6 @@ export const LocationCaptureTemplate: React.FC<LocationCaptureTemplateProps> = (
               errorMessage = 'Location request timed out. Please try again.';
               break;
           }
-          
           showAlert(t('kyc.locationCapture.errorTitle'), errorMessage);
           reject(error);
         },
@@ -181,25 +181,20 @@ export const LocationCaptureTemplate: React.FC<LocationCaptureTemplateProps> = (
     });
   };
 
-  // Passer automatiquement à l'étape suivante quand la localisation est obtenue
   useEffect(() => {
     if (currentLocation && !isRequesting) {
-      // Délai court pour permettre à l'utilisateur de voir la localisation obtenue
       const timer = setTimeout(() => {
         actions.nextComponent();
       }, 1500);
-
       return () => clearTimeout(timer);
     }
     return undefined;
   }, [currentLocation, isRequesting, actions]);
 
-
-
   return (
     <View style={styles.container}>
       <View style={{ flexDirection: 'column', alignItems: 'center', justifyContent: 'center' }}>
-        <View style={{ position: 'relative', width: 70, }}>
+        <View style={{ position: 'relative', width: 70 }}>
           <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'center', width: 60, height: 60, backgroundColor: '#2DBE60', borderRadius: 100 }}>
             <ShieldIcon />
           </View>
@@ -207,13 +202,15 @@ export const LocationCaptureTemplate: React.FC<LocationCaptureTemplateProps> = (
             <GpsIcon />
           </View>
         </View>
+
         <View style={{ flexDirection: 'column', alignItems: 'center', justifyContent: 'center', marginTop: 36 }}>
           <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 }}>
             {t('kyc.locationCapture.description')}
           </Text>
         </View>
-        <View style={{ flexDirection: 'column', marginTop: 36, backgroundColor: "#F9FAFB", padding: 12, borderRadius: 12, width: '100%', }}>
+
+        <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 }}>
             {t('kyc.locationCapture.howThisHelps')}
           </Text>
@@ -231,148 +228,34 @@ export const LocationCaptureTemplate: React.FC<LocationCaptureTemplateProps> = (
             style={{ paddingVertical: 20, marginTop: 36 }}
           />
         )}
-
-        <View style={{
-          height: 12,
-        }} />
+        <View style={{ height: 12 }} />
       </View>
     </View>
   );
 };
 
 const styles = StyleSheet.create({
-  container: {
-    padding: 16,
-    backgroundColor: 'white',
-    marginHorizontal: 12,
-    marginTop: 12,
-    borderRadius: 12,
-    shadowColor: '#000',
-    shadowOffset: { width: 0, height: 2 },
-    shadowOpacity: 0.15,
-    maxWidth: 760,
-  },
-  title: {
-    fontSize: 24,
-    fontWeight: 'bold',
-    color: '#333',
-    marginBottom: 8,
-    textAlign: 'center',
-  },
-  description: {
-    fontSize: 16,
-    color: '#666',
-    textAlign: 'center',
-    marginBottom: 24,
-    lineHeight: 22,
-  },
-  locationContainer: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-    padding: 24,
-  },
-  iconContainer: {
-    marginBottom: 24,
-  },
-  locationIcon: {
-    fontSize: 80,
-  },
-  locationRequest: {
-    alignItems: 'center',
-    width: '100%',
-  },
-  locationRequestText: {
-    fontSize: 16,
-    color: '#666',
-    textAlign: 'center',
-    marginBottom: 24,
-  },
-  locationButton: {
-    paddingHorizontal: 32,
-    paddingVertical: 16,
-    borderRadius: 8,
-    minWidth: 200,
-    alignItems: 'center',
-  },
-  locationButtonDisabled: {
-    opacity: 0.6,
-  },
-  locationButtonText: {
-    color: 'white',
-    fontWeight: '600',
-    fontSize: 16,
-  },
-  buttonContainer: {
-    flexDirection: 'row',
-    justifyContent: 'space-around',
-    alignItems: 'center',
-    marginTop: 24,
-    width: '100%',
-  },
-  primaryButton: {
-    paddingHorizontal: 32,
-    paddingVertical: 16,
-    borderRadius: 8,
-    minWidth: 120,
-    alignItems: 'center',
-  },
-  primaryButtonText: {
-    color: 'white',
-    fontWeight: '600',
-    fontSize: 16,
-  },
-  secondaryButton: {
-    backgroundColor: '#e5e5e5',
-    paddingHorizontal: 32,
-    paddingVertical: 16,
-    borderRadius: 8,
-    minWidth: 120,
-    alignItems: 'center',
-  },
-  secondaryButtonText: {
-    color: '#333',
-    fontWeight: '600',
-    fontSize: 16,
-  },
-  requiredContainer: {
-    backgroundColor: '#fff3cd',
-    padding: 16,
-    borderRadius: 8,
-    marginTop: 16,
-  },
-  requiredText: {
-    fontSize: 16,
-    fontWeight: '600',
-    color: '#856404',
-    marginBottom: 8,
-  },
-  requiredSubtext: {
-    fontSize: 14,
-    color: '#856404',
-    lineHeight: 20,
-  },
-  accuracyContainer: {
-    backgroundColor: '#f0f9f0',
-    padding: 16,
-    borderRadius: 8,
-    marginTop: 16,
-  },
-  accuracyTitle: {
-    fontSize: 16,
-    fontWeight: '600',
-    color: '#2DBD60',
-    marginBottom: 8,
-  },
-  accuracyText: {
-    fontSize: 14,
-    color: '#666',
-    lineHeight: 20,
-  },
-  errorText: {
-    color: '#dc2626',
-    fontSize: 14,
-    marginTop: 8,
-    textAlign: 'center',
-  },
-}); 
+  container: { padding: 16, backgroundColor: 'white', marginHorizontal: 12, marginTop: 12, borderRadius: 12, shadowColor: '#000', shadowOffset: { width: 0, height: 2 }, shadowOpacity: 0.15, maxWidth: 760 },
+  title: { fontSize: 24, fontWeight: 'bold', color: '#333', marginBottom: 8, textAlign: 'center' },
+  description: { fontSize: 16, color: '#666', textAlign: 'center', marginBottom: 24, lineHeight: 22 },
+  locationContainer: { flex: 1, justifyContent: 'center', alignItems: 'center', padding: 24 },
+  iconContainer: { marginBottom: 24 },
+  locationIcon: { fontSize: 80 },
+  locationRequest: { alignItems: 'center', width: '100%' },
+  locationRequestText: { fontSize: 16, color: '#666', textAlign: 'center', marginBottom: 24 },
+  locationButton: { paddingHorizontal: 32, paddingVertical: 16, borderRadius: 8, minWidth: 200, alignItems: 'center' },
+  locationButtonDisabled: { opacity: 0.6 },
+  locationButtonText: { color: 'white', fontWeight: '600', fontSize: 16 },
+  buttonContainer: { flexDirection: 'row', justifyContent: 'space-around', alignItems: 'center', marginTop: 24, width: '100%' },
+  primaryButton: { paddingHorizontal: 32, paddingVertical: 16, borderRadius: 8, minWidth: 120, alignItems: 'center' },
+  primaryButtonText: { color: 'white', fontWeight: '600', fontSize: 16 },
+  secondaryButton: { backgroundColor: '#e5e5e5', paddingHorizontal: 32, paddingVertical: 16, borderRadius: 8, minWidth: 120, alignItems: 'center' },
+  secondaryButtonText: { color: '#333', fontWeight: '600', fontSize: 16 },
+  requiredContainer: { backgroundColor: '#fff3cd', padding: 16, borderRadius: 8, marginTop: 16 },
+  requiredText: { fontSize: 16, fontWeight: '600', color: '#856404', marginBottom: 8 },
+  requiredSubtext: { fontSize: 14, color: '#856404', lineHeight: 20 },
+  accuracyContainer: { backgroundColor: '#f0f9f0', padding: 16, borderRadius: 8, marginTop: 16 },
+  accuracyTitle: { fontSize: 16, fontWeight: '600', color: '#2DBD60', marginBottom: 8 },
+  accuracyText: { fontSize: 14, color: '#666', lineHeight: 20 },
+  errorText: { color: '#dc2626', fontSize: 14, marginTop: 8, textAlign: 'center' },
+});

package/src/components/KYCElements/SelfieCapture.tsx

@@ -1,9 +1,11 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { View, Text, TouchableOpacity, StyleSheet, Image, ActivityIndicator, Platform } from 'react-native';
 import { showAlert } from '../../utils/platformAlert';
 import { EnhancedCameraView } from '../EnhancedCameraView';
-import SelfieOverlay from '../OverLay/SelfieOverlay'; 
+import SelfieOverlay from '../OverLay/SelfieOverlay';
 import { KYCElement, ISilentCaptureResult } from '../../types/KYC.types';
+import { sdkLogger } from '../../utils/logger';
+import { useTemplateKYCFlowContext } from '../../hooks/useTemplateKYCFlow';
 
 interface SelfieCaptureProps {
   element: KYCElement;
@@ -20,11 +22,16 @@ export const SelfieCapture: React.FC<SelfieCaptureProps> = ({
 }) => {
   const [capturedImage, setCapturedImage] = useState<string | null>(value || null);
   const [showCamera, setShowCamera] = useState(false);
-  
-  // 🚨 AUTO-CAPTURE STATES
-  const [isProcessingCapture, setIsProcessingCapture] = useState(false); 
+  const [isProcessingCapture, setIsProcessingCapture] = useState(false);
   const [processingImagePath, setProcessingImagePath] = useState<string | null>(null);
   const [silentCaptureResult, setSilentCaptureResult] = useState<ISilentCaptureResult>({ success: false, isAnalyzing: false });
+  const { state } = useTemplateKYCFlowContext();
+
+  useEffect(() => {
+    if (state.session?.session_id) {
+      sdkLogger.info("User started selfie verification step");
+    }
+  }, [state.session?.session_id]);
 
   const cameraConfig = element.cameraConfig || {
     aspectRatio: 1,
@@ -33,25 +40,25 @@ export const SelfieCapture: React.FC<SelfieCaptureProps> = ({
     cameraType: 'front',
     allowRetake: true,
     maxRetakes: 3,
-    overlay: {
-      showGuide: true,
-      guideText: 'Placez votre visage dans l\'ovale',
-    }
+    overlay: { showGuide: true, guideText: 'Placez votre visage dans l\'ovale' }
   };
 
   // --- THE AUTO CAPTURE LOGIC ---
   const autoCapture = async (capturePath: string) => {
     if (isProcessingCapture) return;
     
+    sdkLogger.info("Valid selfie frame detected, processing image..."); 
+
     // 1. Freeze UI and show the captured selfie
-    setIsProcessingCapture(true); 
+    setIsProcessingCapture(true);
     setProcessingImagePath(capturePath);
 
     try {
       setCapturedImage(capturePath);
-      
       // Save data to parent component
-      await onValueChange(capturePath); 
+      await onValueChange(capturePath);
+      
+      sdkLogger.info("Selfie successfully captured and saved");
 
       // 2. Short delay for UX success feeling
       setTimeout(() => {
@@ -60,8 +67,8 @@ export const SelfieCapture: React.FC<SelfieCaptureProps> = ({
         setIsProcessingCapture(false);
         setProcessingImagePath(null);
       }, 800);
-
     } catch (e: any) {
+      sdkLogger.error("Failed to process and save selfie", { error: e?.message }); // 🚨 LOG
       showAlert('Erreur', e?.message || 'Impossible de sauvegarder le selfie');
       setSilentCaptureResult({ success: false, isAnalyzing: false });
       setIsProcessingCapture(false);
@@ -75,28 +82,25 @@ export const SelfieCapture: React.FC<SelfieCaptureProps> = ({
 
     if (result.success && result.path) {
       setSilentCaptureResult((prev) => ({ ...prev, isAnalyzing: true, success: false, error: '' }));
-      
       try {
         // Since camera returned success (clear frame), trigger auto-capture immediately
         await autoCapture(result.path);
       } catch (error: any) {
-        setSilentCaptureResult(prev => ({ 
-          ...prev, 
-          isAnalyzing: false, 
-          success: false, 
-          error: error?.message || 'Visage non détecté' 
-        }));
+        sdkLogger.warn("Selfie auto-capture evaluation failed", { error: error?.message }); // 🚨 LOG
+        setSilentCaptureResult(prev => ({ ...prev, isAnalyzing: false, success: false, error: error?.message || 'Visage non détecté' }));
       }
     }
   };
 
   const handleError = (event: { message: string }) => {
+    sdkLogger.error("Selfie camera hardware/permission error", { error: event.message }); // 🚨 LOG
     showAlert('Erreur', event.message);
     setShowCamera(false);
     setIsProcessingCapture(false);
   };
 
   const retakePicture = () => {
+    sdkLogger.info("User chose to retake selfie");
     setIsProcessingCapture(false);
     setProcessingImagePath(null);
     setSilentCaptureResult({ success: false, isAnalyzing: false });
@@ -107,13 +111,12 @@ export const SelfieCapture: React.FC<SelfieCaptureProps> = ({
 
   // --- LIVE CAMERA RENDER ---
   if (showCamera) {
-    const isBusy = isProcessingCapture; 
-
+    const isBusy = isProcessingCapture;
     return (
       <View style={styles.cameraContainerFullScreen}>
         <EnhancedCameraView
           showCamera={true}
-          isProcessing={isBusy} 
+          isProcessing={isBusy}
           cameraType={cameraConfig.cameraType as 'front' | 'back'}
           style={styles.camera}
           onError={handleError}
@@ -123,43 +126,39 @@ export const SelfieCapture: React.FC<SelfieCaptureProps> = ({
             <>
               {/* Subtle scanning indicator */}
               {!isBusy && silentCaptureResult.isAnalyzing && (
-                 <View style={styles.topAnalyzingPillContainer}>
-                    <View style={styles.topAnalyzingPill}>
-                      <ActivityIndicator size="small" color="white" />
-                      <Text style={styles.analyzingPillText}>Analyse du visage...</Text>
-                    </View>
-                 </View>
+                <View style={styles.topAnalyzingPillContainer}>
+                  <View style={styles.topAnalyzingPill}>
+                    <ActivityIndicator size="small" color="white" />
+                    <Text style={styles.analyzingPillText}>Analyse du visage...</Text>
+                  </View>
+                </View>
               )}
 
               {/* Success Overlay with Frozen Perfect Selfie */}
               {isBusy && (
                 <View style={StyleSheet.absoluteFillObject}>
                   {processingImagePath && (
-                    <Image 
-                      source={{ uri: processingImagePath.startsWith('file://') ? processingImagePath : `file://${processingImagePath}` }} 
-                      style={StyleSheet.absoluteFillObject} 
-                      resizeMode="cover" 
+                    <Image
+                      source={{ uri: processingImagePath.startsWith('file://') ? processingImagePath : `file://${processingImagePath}` }}
+                      style={StyleSheet.absoluteFillObject}
+                      resizeMode="cover"
                     />
                   )}
                   <View style={styles.processingOverlay}>
                     <ActivityIndicator size="large" color="#2DBD60" />
-                    <Text style={styles.processingText}>
-                      Parfait!{"\n"}Traitement du selfie...
-                    </Text>
+                    <Text style={styles.processingText}> Parfait!{"\n"}Traitement du selfie... </Text>
                   </View>
                 </View>
               )}
 
               {!isBusy && (
-                <SelfieOverlay 
-                    xMin={0} yMin={0} xMax={100} yMax={100}
-                    orientation="center"
-                    isSuccess={isBusy}
-                    instructionsTile={element.title || "Selfie"}
-                    instructionsSubtitle={cameraConfig.overlay?.guideText || "Placez votre visage dans l'ovale"}                    
-                    cornerOpacity={1}
-                    instructions=""
-                    language="en" 
+                <SelfieOverlay
+                  xMin={0} yMin={0} xMax={100} yMax={100}
+                  orientation="center"
+                  isSuccess={isBusy}
+                  instructionsTile={element.title || "Selfie"}
+                  instructionsSubtitle={cameraConfig.overlay?.guideText || "Placez votre visage dans l'ovale"}
+                  cornerOpacity={1} instructions="" language="en"
                 />
               )}
             </>
@@ -176,12 +175,11 @@ export const SelfieCapture: React.FC<SelfieCaptureProps> = ({
     );
   }
 
-  // --- PREVIEW RENDER ---
   return (
     <View style={styles.container}>
       <Text style={styles.title}>{element.title}</Text>
       <Text style={styles.description}>{element.description}</Text>
-      
+
       {capturedImage ? (
         <>
           <View style={styles.imageContainer}>
@@ -202,8 +200,11 @@ export const SelfieCapture: React.FC<SelfieCaptureProps> = ({
       ) : (
         <View style={styles.cameraPlaceholderWrapper}>
           <TouchableOpacity 
-            style={styles.cameraPlaceholder}
-            onPress={() => setShowCamera(true)}
+            style={styles.cameraPlaceholder} 
+            onPress={() => {
+              sdkLogger.info("User opened selfie camera"); // 🚨 LOG
+              setShowCamera(true);
+            }}
           >
             <Text style={styles.cameraPlaceholderText}>🤳</Text>
             <Text style={styles.cameraPlaceholderLabel}>
@@ -219,37 +220,28 @@ export const SelfieCapture: React.FC<SelfieCaptureProps> = ({
 };
 
 const styles = StyleSheet.create({
-  // 🚨 UI FIX: The camera MUST be full screen so your SelfieOverlay math matches the device screen
   cameraContainerFullScreen: { ...StyleSheet.absoluteFillObject, backgroundColor: 'black', zIndex: 999 },
   camera: { flex: 1 },
-
   container: { flex: 1, padding: 16, height: 500 },
   title: { fontSize: 24, fontWeight: 'bold', color: '#333', marginBottom: 8, textAlign: 'center' },
   description: { fontSize: 16, color: '#666', textAlign: 'center', marginBottom: 24, lineHeight: 22 },
-  
   cameraPlaceholderWrapper: { flex: 1, borderRadius: 12, overflow: 'hidden', marginBottom: 24 },
   imageContainer: { flex: 1, borderRadius: 12, overflow: 'hidden', marginBottom: 24, backgroundColor: '#000' },
   capturedImage: { width: '100%', height: '100%', resizeMode: 'cover' },
-  
   buttonContainer: { flexDirection: 'row', justifyContent: 'space-around', alignItems: 'center', paddingHorizontal: 16, marginBottom: 24 },
   primaryButton: { backgroundColor: '#2DBD60', paddingHorizontal: 32, paddingVertical: 16, borderRadius: 12 },
   primaryButtonText: { color: 'white', fontWeight: 'bold', fontSize: 16 },
   secondaryButton: { backgroundColor: '#e5e5e5', paddingHorizontal: 32, paddingVertical: 16, borderRadius: 12 },
   secondaryButtonText: { color: '#333', fontWeight: 'bold', fontSize: 16 },
-  
   errorText: { color: '#dc2626', fontSize: 14, marginTop: 8, textAlign: 'center' },
-  
   cameraPlaceholder: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#f5f5f5', borderRadius: 12, borderWidth: 2, borderColor: '#e0e0e0', borderStyle: 'dashed' },
   cameraPlaceholderText: { fontSize: 50, marginBottom: 12 },
   cameraPlaceholderLabel: { fontSize: 16, color: '#666', textAlign: 'center', fontWeight: '500' },
-
   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' },
-  
   processingOverlay: { flex: 1, backgroundColor: 'rgba(0, 0, 0, 0.7)', justifyContent: 'center', alignItems: 'center', zIndex: 9999 },
   processingText: { color: '#FFF', fontSize: 20, fontWeight: 'bold', marginTop: 16, textAlign: 'center', lineHeight: 28 },
-
   floatingErrorBanner: { position: 'absolute', top: 100, left: '10%', right: '10%', backgroundColor: 'rgba(220, 38, 38, 0.95)', paddingVertical: 12, paddingHorizontal: 16, borderRadius: 8, alignItems: 'center', justifyContent: 'center', shadowColor: '#000', shadowOffset: { width: 0, height: 4 }, shadowOpacity: 0.3, shadowRadius: 5, elevation: 8, zIndex: 100 },
   floatingErrorText: { color: 'white', fontSize: 14, fontWeight: '700', textAlign: 'center' },
 });