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

package/build/src/components/KYCElements/SelfieCaptureTemplate.js

@@ -1,5 +1,5 @@
 import React, { useEffect, useMemo, useState } from 'react';
-import { View, Text, StyleSheet, ScrollView, Image, TouchableOpacity } from 'react-native';
+import { View, Text, StyleSheet, ScrollView, Image, TouchableOpacity, ActivityIndicator, Platform } from 'react-native';
 import { showAlert } from '../../utils/platformAlert';
 import { EnhancedCameraView } from '../EnhancedCameraView';
 import { Button } from '../ui/Button';
@@ -8,10 +8,8 @@ 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';
 export const SelfieCaptureTemplate = ({ component, value, onValueChange, error, language, }) => {
     const { t } = useI18n();
-    // const config = component.config as SelfieConfig;
     const orientations = (['center', 'left', 'right']);
     const { actions, state, env } = useTemplateKYCFlowContext();
     const [silentCaptureResult, setSilentCaptureResult] = useState({ success: false, isAnalyzing: false });
@@ -23,7 +21,6 @@ export const SelfieCaptureTemplate = ({ component, value, onValueChange, error,
     const getLocalizedText = (text) => {
         if (!text)
             return '';
-        // If text is a nested record (e.g., per theme/device), try to pick a default then localize
         const maybeNested = text;
         if (maybeNested && typeof maybeNested === 'object' && 'en' in maybeNested === false && 'fr' in maybeNested === false) {
             const firstKey = Object.keys(maybeNested)[0];
@@ -33,100 +30,49 @@ export const SelfieCaptureTemplate = ({ component, value, onValueChange, error,
         const loc = text;
         return loc[language] || loc.en || '';
     };
-    const getOrientationInstructions = (orientation) => {
-        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);
-        }
-    };
     useEffect(() => {
         actions.showCustomStepper(!showCamera);
     }, [showCamera]);
     const getOrientationLabel = (orientation) => {
         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);
+            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);
         }
     };
     const getOrientationOpposite = (orientation) => {
         switch (orientation) {
-            case 'center':
-                return 'center';
-            case 'left':
-                return 'left';
-            case 'right':
-                return 'right';
-            default:
-                return 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) => {
         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), subtitle: getLocalizedText(component.instructions) };
+            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), subtitle: getLocalizedText(component.instructions) };
         }
     };
+    // 🚨 THE CRITICAL FIX: The AI automatically triggers the preview!
     const handleSilentCapture = (result) => {
-        if (silentCaptureResult.isAnalyzing) {
+        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) {
+                    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' }));
@@ -140,24 +86,11 @@ export const SelfieCaptureTemplate = ({ component, value, onValueChange, error,
             });
         }
     };
-    // Capture manuelle - affiche le preview
-    const handleCapture = async (result) => {
-        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);
-        }
+    // Legacy manual capture removed. Error handler kept.
+    const handleError = (event) => {
+        showAlert('Erreur', event.message);
+        setShowCamera(false);
     };
-    // Confirmer la capture depuis le preview
     const handleConfirmCapture = async () => {
         if (!previewImagePath)
             return;
@@ -172,22 +105,18 @@ export const SelfieCaptureTemplate = ({ component, value, onValueChange, error,
             setShowPreview(false);
             setPreviewImagePath(null);
             setSilentCaptureResult({ success: false, isAnalyzing: false });
-            // Passer à l'orientation suivante si disponible
             const currentIndex = orientations.indexOf(currentOrientation);
             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);
@@ -199,370 +128,139 @@ export const SelfieCaptureTemplate = ({ component, value, onValueChange, error,
         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
-            };
+            return { country: _idCardData?.country, documentType: mappedDocumentType };
         }
         return null;
     }, [state.componentData]);
-    console.log("idCardData", truncateFields(idCardData), JSON.stringify(truncateFields(state.componentData), null, 2));
-    const handleError = (event) => {
-        showAlert('Erreur', event.message);
-        setShowCamera(false);
-    };
-    const isOrientationCompleted = (orientation) => {
-        return !!capturedImages[orientation];
-    };
-    const isAllOrientationsCompleted = () => {
-        return orientations.every(orientation => isOrientationCompleted(orientation));
-    };
-    console.log("Current Orientation", currentOrientation);
-    // Vue Preview
+    const isOrientationCompleted = (orientation) => { return !!capturedImages[orientation]; };
+    const isAllOrientationsCompleted = () => { 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>
+        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
+    // --- CAMERA RENDER ---
     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} instructionsTile={getInstructions(currentOrientation).title} instructionsSubtitle={getInstructions(currentOrientation).subtitle} stepperProps={{
-                    back: () => {
-                        setShowCamera(false);
-                    },
+        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} 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)}</Text>
-        <Text style={styles.description}>{getLocalizedText(component.instructions)}</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' }}>
+    return (<View style={[{ maxWidth: 760, width: '100%', height: '100%' }]}> 
+      <View style={styles.container}> 
+        <Text style={styles.title}>{getLocalizedText(component.labels)}</Text> 
+        <Text style={styles.description}>{getLocalizedText(component.instructions)}</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 () => {
+            : `• 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>
+            }}/>) : (<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: {
-        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,
-    },
+    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: {},
-    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,
-    },
+    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' },
 });
 //# sourceMappingURL=SelfieCaptureTemplate.js.map