@transfergratis/react-native-sdk 0.1.3 → 0.1.5

package/src/components/KYCElements/IDCardCapture.tsx

@@ -1,15 +1,29 @@
-import React, { useEffect, useState } from 'react';
-import { View, Text, TouchableOpacity, StyleSheet, Image, Alert, ScrollView } from 'react-native';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import { View, Text, TouchableOpacity, StyleSheet, Image, Alert, ScrollView, Dimensions } from 'react-native';
 import { EnhancedCameraView } from '../EnhancedCameraView';
-import { TemplateComponent, IDCardConfig, LocalizedText, GovernmentDocumentType } from '../../types/KYC.types';
+import { TemplateComponent, IDCardConfig, LocalizedText, GovernmentDocumentType, ISilentCaptureResult } from '../../types/KYC.types';
 import IdCardOverlay from '../OverLay/IdCard';
 import { useTemplateKYCFlowContext } from '../../hooks/useTemplateKYCFlow';
+import { useI18n } from '../../hooks/useI18n';
 import { Button } from '../ui/Button';
+import { removeDuplicates } from '../../utils/remove-duplicate';
+import { backVerification, frontVerification } from '../../modules/api/CardAuthentification';
+import { getDocumentTypeInfo } from '../../utils/get-document-type-info';
+import pathToBase64 from '../../utils/pathToBase64';
+import { truncateFields } from '../../modules/api/KYCService';
+import { cropImageWithBBox } from '../../utils/cropByObb';
+
+
+interface IIDCardPayload {
+  dir: string;
+  file: string;
+  mrz: string;
+}
 
 interface IDCardCaptureProps {
   component: TemplateComponent;
-  value?: Record<string, string>;
-  onValueChange: (value: Record<string, string>) => void;
+  value?: Record<string, IIDCardPayload>;
+  onValueChange: (value: Record<string, IIDCardPayload | string>) => void;
   error?: string;
   language?: string;
   currentSide?: string; // Nouveau prop pour spécifier le côté actuel
@@ -21,86 +35,78 @@ export const IDCardCapture: React.FC<IDCardCaptureProps> = ({
   onValueChange,
   error,
   language = 'en',
-  currentSide = 'front',
 }) => {
+  const { t } = useI18n();
   const [showCamera, setShowCamera] = useState(false);
-  const [capturedImages, setCapturedImages] = useState<Record<string, string>>(value);
-  const [selectedDocumentType, setSelectedDocumentType] = useState<GovernmentDocumentType | null>(null);
-  const [showDocumentSelection, setShowDocumentSelection] = useState(true);
+  const [capturedImages, setCapturedImages] = useState<Record<string, IIDCardPayload>>(value || {});
+  const [cropImageUri, setCropImageUri] = useState<string>('');
+  const [currentSide, setCurrentSide] = useState<string>('front');
+  const [selectedDocumentType, setSelectedDocumentType] = useState<{
+    type: GovernmentDocumentType;
+    region: string;
+  }>({
+    type: 'identity_card',
+    region: 'root'
+  });
+  const [showDocumentSelection, setShowDocumentSelection] = useState(
+    {
+      documentSelection: true,
+      regionSelection: false
+    }
+  );
+  const [silentCaptureResult, setSilentCaptureResult] = useState<ISilentCaptureResult>({ success: false, isAnalyzing: false });
+  // const [imageNaturalSize, setImageNaturalSize] = useState<{ width: number; height: number } | null>(null);
 
   const { actions, state, } = useTemplateKYCFlowContext();
   const config = component.config as IDCardConfig;
 
-  const getLocalizedText = (text: LocalizedText): string => {
-    return text[language] || text.en || '';
-  };
+  
 
-  const getDocumentTypeInfo = (docType: GovernmentDocumentType) => {
-    switch (docType) {
-      case 'id_card':
-        return {
-          name: { en: 'ID Card', fr: 'Carte d\'identité' },
-          icon: '🆔',
-          instructions: { en: 'Position your ID card within the frame', fr: 'Positionnez votre carte d\'identité dans le cadre' }
-        };
-      case 'passport':
-        return {
-          name: { en: 'Passport', fr: 'Passeport' },
-          icon: '📘',
-          instructions: { en: 'Position your passport within the frame', fr: 'Positionnez votre passeport dans le cadre' }
-        };
-      case 'drivers_license':
-        return {
-          name: { en: 'Driver\'s License', fr: 'Permis de conduire' },
-          icon: '🚗',
-          instructions: { en: 'Position your driver\'s license within the frame', fr: 'Positionnez votre permis de conduire dans le cadre' }
-        };
-      case 'residence_permit':
-        return {
-          name: { en: 'Residence Permit', fr: 'Permis de séjour' },
-          icon: '🏠',
-          instructions: { en: 'Position your residence permit within the frame', fr: 'Positionnez votre permis de séjour dans le cadre' }
-        };
-      case 'national_id':
-        return {
-          name: { en: 'National ID', fr: 'Carte nationale d\'identité' },
-          icon: '🏛️',
-          instructions: { en: 'Position your national ID within the frame', fr: 'Positionnez votre carte nationale d\'identité dans le cadre' }
-        };
-      case 'voter_id':
-        return {
-          name: { en: 'Voter ID', fr: 'Carte d\'électeur' },
-          icon: '🗳️',
-          instructions: { en: 'Position your voter ID within the frame', fr: 'Positionnez votre carte d\'électeur dans le cadre' }
-        };
-      case 'military_id':
-        return {
-          name: { en: 'Military ID', fr: 'Carte militaire' },
-          icon: '🎖️',
-          instructions: { en: 'Position your military ID within the frame', fr: 'Positionnez votre carte militaire dans le cadre' }
-        };
-      case 'student_id':
-        return {
-          name: { en: 'Student ID', fr: 'Carte d\'étudiant' },
-          icon: '🎓',
-          instructions: { en: 'Position your student ID within the frame', fr: 'Positionnez votre carte d\'étudiant dans le cadre' }
-        };
-      case 'work_permit':
-        return {
-          name: { en: 'Work Permit', fr: 'Permis de travail' },
-          icon: '💼',
-          instructions: { en: 'Position your work permit within the frame', fr: 'Positionnez votre permis de travail dans le cadre' }
-        };
-      case 'other':
-      default:
-        return {
-          name: { en: 'Government Document', fr: 'Document gouvernemental' },
-          icon: '📄',
-          instructions: { en: 'Position your document within the frame', fr: 'Positionnez votre document dans le cadre' }
-        };
+  const getLocalizedText = (text: LocalizedText | Record<string, LocalizedText>): string => {
+    // console.log("text", text, JSON.stringify(component, null, 2));
+    if (text && typeof text[currentSide] === 'object' && text[currentSide][language]) {
+      return text[currentSide][language] || '';
     }
+    return "";
   };
 
+  const countryData = useMemo(() => {
+    const geCountryID = Object.keys(state.componentData).find((c: string) => c === "6");
+
+    if (geCountryID) {
+      const countryMapping = state.componentData[geCountryID];
+      return countryMapping;
+    }
+    return null;
+  }, [state.componentData]);
+
+
+  const availableDocumentTypes = useMemo(() => {
+    const newconfig: GovernmentDocumentType[] = [];
+
+    if (countryData) {
+      const countryMapping = Object.keys(countryData?.regionMapping);
+      if (countryMapping && Array.isArray(countryMapping)) {
+        countryMapping.forEach((c) => {
+          newconfig.push(c as GovernmentDocumentType);
+        });
+      }
+    }
+    console.log("newconfig", truncateFields(newconfig));
+    return newconfig;
+  }, []);
+
+
+  useEffect(() => {
+    console.log("cropImageUri", JSON.stringify(truncateFields({ box: silentCaptureResult }), null, 2));
+    if (capturedImages[currentSide]?.dir && silentCaptureResult?.bbox) {
+      cropImageWithBBox(capturedImages[currentSide].dir, silentCaptureResult.bbox)?.then((uri) => {
+        setCropImageUri(uri);
+      });
+    }
+  }, [capturedImages[currentSide]?.dir, silentCaptureResult?.bbox])
+
+
 
   const cameraConfig = {
     aspectRatio: 4 / 3,
@@ -111,8 +117,8 @@ export const IDCardCapture: React.FC<IDCardCaptureProps> = ({
     maxRetakes: 3,
     overlay: {
       showGuide: true,
-      guideText: selectedDocumentType ? getDocumentTypeInfo(selectedDocumentType).instructions.en : getLocalizedText(component.instructions),
-      bbox: selectedDocumentType && config.bbox_configs[selectedDocumentType] ? config.bbox_configs[selectedDocumentType] : {
+      guideText: selectedDocumentType ? getDocumentTypeInfo(selectedDocumentType.type).instructions.en : getLocalizedText(component.instructions as Record<string, LocalizedText>),
+      bbox: selectedDocumentType && config.bbox_configs[selectedDocumentType.type] ? config.bbox_configs[selectedDocumentType.type] : {
         xMin: 20,
         yMin: 140,
         xMax: 370,
@@ -128,15 +134,118 @@ export const IDCardCapture: React.FC<IDCardCaptureProps> = ({
   const retakePicture = (currentSide: string) => {
     setShowCamera(true);
     actions.showCustomStepper(false);
-    setCapturedImages({ ...capturedImages, [currentSide]: '' });
-    onValueChange({ ...value, [currentSide]: '' });
+    setCapturedImages({ ...capturedImages, [currentSide]: { dir: '', file: '', mrz: '' } });
+    setSilentCaptureResult((prev) => ({ path: '', success: false, isAnalyzing: false, error: '' }));
+    setCropImageUri('');
+    onValueChange({ ...value, [currentSide]: { dir: '', file: '', mrz: '' } });
   };
 
-  const handleCapture = (result: { success: boolean; path?: string; error?: string }) => {
+  const hasRegions = useCallback((documentType: GovernmentDocumentType): { hasRegions: boolean, regionMapping: string[] } => {
+    const regionMapping = countryData?.regionMapping[documentType as GovernmentDocumentType];
+    if (regionMapping && Object.keys(regionMapping).length > 1) {
+      return {
+        hasRegions: true,
+        regionMapping: Object.keys(regionMapping)
+      };
+    }
+    return {
+      hasRegions: false,
+      regionMapping: []
+    };
+  }, [countryData]);
+
+
+  const getCurrentSideVerification = (currentSide: string) => {
+    const regionMapping = countryData?.regionMapping[selectedDocumentType?.type as GovernmentDocumentType];
+    const authMethod: string[] = [];
+
+    const key = selectedDocumentType?.region?.trim()?.length > 0 ? selectedDocumentType?.region?.trim() : 'root';
+    // console.log("regionMapping", JSON.stringify(regionMapping, null, 2), selectedDocumentType?.region);
+    // const key = selectedDocumentType?.region as keyof typeof regionMapping;
+
+    if (regionMapping?.[key] && Array.isArray(regionMapping[key])) {
+      regionMapping[key].forEach((item: any) => {
+        if (item[currentSide as keyof typeof item]) {
+          authMethod.push(item[currentSide as keyof typeof item]);
+        }
+      });
+    }
+
+    console.log("regionMapping", JSON.stringify(truncateFields({ regionMapping, selectedDocumentType: selectedDocumentType?.region, key }), null, 2));
+
+    return removeDuplicates(authMethod);
+  }
+
+
+  const handleSilentCapture = (result: { success: boolean; path?: string; error?: string }) => {
+    if (silentCaptureResult.isAnalyzing) {
+      return;
+    }
     if (result.success && result.path) {
-      const newImages = { ...capturedImages, [currentSide]: result.path };
+      setSilentCaptureResult((prev) => ({ ...prev, isAnalyzing: true, success: false, error: '' }));
+      if (currentSide === 'front') {
+        frontVerification(
+          {
+            path: result.path,
+            regionMapping: getCurrentSideVerification(currentSide),
+            selectedDocumentType: selectedDocumentType?.type || '',
+            code: countryData?.code || '',
+            currentSide: currentSide,
+
+          }).then((mrz) => {
+            console.log("front verification result", truncateFields(mrz));
+            setSilentCaptureResult((prev) => ({
+              ...prev, path: result.path,
+              bbox: (mrz as any)?.bbox, success: true,
+              mrz: JSON.stringify(mrz), isAnalyzing: false,
+              country: countryData?.code,
+              documentType: selectedDocumentType?.type
+            }),
+            );
+          }).catch((e: any) => {
+            console.log("error front verification", truncateFields(e));
+            setSilentCaptureResult((prev) => ({ ...prev, isAnalyzing: false, success: false, error: e?.message || 'Erreur de détection du MRZ' }));
+            // Alert.alert('Erreur', e?.message || 'Erreur de détection du MRZ');
+          })
+      } else {
+        backVerification({
+          path: result.path,
+          regionMapping: getCurrentSideVerification(currentSide),
+          selectedDocumentType: selectedDocumentType?.type || '',
+          code: countryData?.code || '',
+          currentSide: currentSide,
+
+        }).then((mrz) => {
+          console.log("back verification result", truncateFields(mrz));
+          setSilentCaptureResult((prev) => ({
+            ...prev, path: result.path, bbox: (mrz as any)?.bbox,
+            success: true, mrz: JSON.stringify(mrz), isAnalyzing: false,
+            country: countryData?.code,
+            documentType: selectedDocumentType?.type
+          }));
+        }).catch((e: any) => {
+          console.log("error back verification", truncateFields(e));
+          setSilentCaptureResult((prev) => ({ ...prev, isAnalyzing: false, success: false, error: e?.message || 'Erreur de détection du MRZ' }));
+          // Alert.alert('Erreur', e?.message || 'Erreur de détection du MRZ');
+        })
+      }
+
+    }
+  }
+
+  // Handle capture
+  const handleCapture = async (result: { success: boolean; path?: string; error?: string }) => {
+    if (silentCaptureResult.path) {
+      const base64 = await pathToBase64(silentCaptureResult.path);
+      const newImages = { ...capturedImages, [currentSide]: { dir: silentCaptureResult.path, file: base64, mrz: silentCaptureResult.mrz || "" } };
       setCapturedImages(newImages);
-      onValueChange(newImages);
+      if (silentCaptureResult.country && silentCaptureResult.documentType) {
+        onValueChange({
+          ...newImages,
+          country: silentCaptureResult.country,
+          documentType: silentCaptureResult.documentType,
+        });
+      }
       setShowCamera(false);
       actions.showCustomStepper(true);
     } else {
@@ -150,19 +259,46 @@ export const IDCardCapture: React.FC<IDCardCaptureProps> = ({
   };
 
 
-  useEffect(() => {
 
-    actions.showCustomStepper(!showCamera);
 
+
+  useEffect(() => {
+    actions.showCustomStepper(!showCamera);
   }, [showCamera]);
 
 
+
+  // const renderBboxOverlay = () => {
+  //   const bbox: any = (silentCaptureResult as any)?.bbox;
+  //   if (!bbox || !imageNaturalSize) return null;
+  //   const containerWidth = Dimensions.get('window').width - 24 - 24; // approximate inner width accounting paddings/margins
+  //   const containerHeight = 200;
+  //   const scaleX = 1;
+  //   const scaleY = 1;
+  //   const left = Math.max(0, bbox.minX * scaleX);
+  //   const top = Math.max(0, bbox.minY * scaleY);
+  //   const width = Math.max(1, bbox.width * scaleX);
+  //   const height = Math.max(1, bbox.height * scaleY);
+  //   return (
+  //     <View
+  //       pointerEvents="none"
+  //       style={{ position: 'absolute', left, top, width, height, borderColor: '#2DBD60', borderWidth: 2, borderStyle: 'solid', borderRadius: 6 }}
+  //     />
+  //   );
+  // };
+
+
+
+
   const handleDocumentTypeSelection = (docType: GovernmentDocumentType) => {
-    setSelectedDocumentType(docType);
+    setSelectedDocumentType({ type: docType, region: hasRegions(docType) ? '' : 'root' });
+  };
+  const handleRegionSelection = (region: string) => {
+    setSelectedDocumentType((prev) => ({ ...prev, region: region }));
   };
 
   // Interface de sélection du type de document
-  if (showDocumentSelection) {
+  if (showDocumentSelection.documentSelection || showDocumentSelection.regionSelection) {
     return (
       <View style={styles.root}>
         <View style={styles.container}>
@@ -171,12 +307,12 @@ export const IDCardCapture: React.FC<IDCardCaptureProps> = ({
           <Text style={styles.description}>{getLocalizedText(component.instructions)}</Text>
 
           <ScrollView style={styles.documentTypesContainer} showsVerticalScrollIndicator={false}>
-            {config.document_types.map((docType) => {
+            {showDocumentSelection.documentSelection ? availableDocumentTypes.map((docType) => {
               const docInfo = getDocumentTypeInfo(docType);
               return (
                 <TouchableOpacity
                   key={docType}
-                  style={[styles.documentTypeButton, { backgroundColor: selectedDocumentType === docType ? '#2DBD6030' : '#F8F9FA', borderColor: selectedDocumentType === docType ? '#2DBD60' : '#E9ECEF', borderWidth: 2 }]}
+                  style={[styles.documentTypeButton, { backgroundColor: selectedDocumentType?.type === docType ? '#2DBD6030' : '#F8F9FA', borderColor: selectedDocumentType?.type === docType ? '#2DBD60' : '#E9ECEF', borderWidth: 2 }]}
                   onPress={() => handleDocumentTypeSelection(docType)}
                 >
                   <View style={[styles.documentTypeIconContainer, { backgroundColor: 'gray', }]}>
@@ -188,21 +324,54 @@ export const IDCardCapture: React.FC<IDCardCaptureProps> = ({
                   <Text style={styles.documentTypeArrow}>→</Text>
                 </TouchableOpacity>
               );
-            })}
+            }) : null}
+            {showDocumentSelection.regionSelection ?
+              hasRegions(selectedDocumentType?.type || 'identity_card').regionMapping.map((region) => {
+                return (
+                  <TouchableOpacity key={region} onPress={() => handleRegionSelection(region)}
+                    style={[styles.documentTypeButton, { backgroundColor: selectedDocumentType?.region === region ? '#2DBD6030' : '#F8F9FA', borderColor: selectedDocumentType?.region === region ? '#2DBD60' : '#E9ECEF', borderWidth: 2 }]}
+
+                  >
+                    <Text>{region}</Text>
+                  </TouchableOpacity>
+                );
+              }) : null}
           </ScrollView>
-          <Button title={getLocalizedText(component.ui.buttonText)} onPress={() => {
+          <Button title={t('common.next')} onPress={() => {
             if (!selectedDocumentType) {
-              Alert.alert('Erreur', 'Veuillez sélectionner un type de document');
+              Alert.alert(t('common.error'), t('validation.required'));
               return;
             }
-            setShowDocumentSelection(false);
-            setShowCamera(true);
-            actions.showCustomStepper(false);
+
+            if (showDocumentSelection.regionSelection) {
+              console.log("showDocumentSelection", JSON.stringify(truncateFields(showDocumentSelection), null, 2));
+              setShowDocumentSelection({
+                documentSelection: false,
+                regionSelection: false
+              });
+              setShowCamera(true);
+              actions.showCustomStepper(false);
+              return;
+            } else {
+              if (hasRegions(selectedDocumentType?.type)?.hasRegions) {
+                setShowDocumentSelection({
+                  documentSelection: false,
+                  regionSelection: true
+                });
+              } else {
+                setShowDocumentSelection({
+                  documentSelection: false,
+                  regionSelection: false
+                });
+                setShowCamera(true);
+                actions.showCustomStepper(false);
+              }
+            }
+
           }}
             variant={selectedDocumentType ? 'primary' : "neutral"}
             size="large"
             fullWidth
-          // rounded
           />
 
 
@@ -230,6 +399,8 @@ export const IDCardCapture: React.FC<IDCardCaptureProps> = ({
           quality="high"
           showCaptureButton={true}
           showSwitchCamera={true}
+          onSilentCapture={handleSilentCapture}
+          silentCaptureResult={silentCaptureResult}
           enableFlash={cameraConfig.flashMode === 'auto' || cameraConfig.flashMode === 'on'}
           overlayComponent={<IdCardOverlay
             xMin={cameraConfig.overlay.bbox.xMin}
@@ -238,12 +409,27 @@ export const IDCardCapture: React.FC<IDCardCaptureProps> = ({
             yMax={cameraConfig.overlay.bbox.yMax}
             instructions={cameraConfig.overlay.guideText}
             cornerOpacity={cameraConfig.overlay.bbox.cornerRadius || 0 as number}
+            isSuccess={silentCaptureResult.success}
+            language={state.currentLanguage}
             stepperProps={{
               back: () => {
-                setShowDocumentSelection(true);
-                actions.showCustomStepper(false);
+                if (currentSide === 'back') {
+                  setCurrentSide('front');
+                  setShowCamera(false);
+                  setShowDocumentSelection({
+                    documentSelection: false,
+                    regionSelection: false
+                  });
+                  setSilentCaptureResult((prev) => ({ path: '', success: false, isAnalyzing: false, error: '' }));
+                } else {
+                  setShowDocumentSelection({
+                    documentSelection: true,
+                    regionSelection: false
+                  });
+                  actions.showCustomStepper(true);
+                }
               },
-              selectedDocumentType: getDocumentTypeInfo(selectedDocumentType || 'id_card').name.en || '',
+              selectedDocumentType: getDocumentTypeInfo(selectedDocumentType?.type || "identity_card").name.en || '',
               step: state.currentComponentIndex + 1,
               totalSteps: state.template.components.length,
             }}
@@ -254,6 +440,7 @@ export const IDCardCapture: React.FC<IDCardCaptureProps> = ({
     );
   }
 
+
   return (
     <View style={styles.root}>
       <View style={styles.previewContainer}>
@@ -266,7 +453,6 @@ export const IDCardCapture: React.FC<IDCardCaptureProps> = ({
               {getLocalizedText(component.instructions)}
             </Text>
 
-
             <View style={{ alignItems: 'center', justifyContent: 'center', flexDirection: "column", gap: 16 }}>
               <View
                 style={{
@@ -285,29 +471,38 @@ export const IDCardCapture: React.FC<IDCardCaptureProps> = ({
                   backgroundColor: '#fff', // Needed for shadow to show on iOS
                 }}
               >
-                <Image
-                  source={{ uri: capturedImages[currentSide] }}
-                  style={{
-                    width: '100%',
-                    height: 200,
-                    borderRadius: 12,
-                    resizeMode: 'cover',
-                  }}
-                />
+                {cropImageUri ? (
+                  <Image
+                    source={{ uri: cropImageUri }}
+                    style={{
+                      width: '100%',
+                      height: 200,
+                      borderRadius: 12,
+                      resizeMode: 'cover',
+                    }}
+                  />
+                ) : null}
+
               </View>
               {/* retake button */}
-              <Button title="Reprendre" onPress={() => {
+              <Button title={t('kyc.idCardCapture.retakeButton')} onPress={() => {
                 retakePicture(currentSide);
               }}
                 variant="outline"
                 size="medium"
                 fullWidth
-              
-              />
-              <Button title="Suivant" onPress={() => {
-                setShowCamera(true);
 
-                actions.nextComponent();
+              />
+              <Button title={t('common.next')} onPress={() => {
+                if (currentSide === 'back' || selectedDocumentType?.type === 'passport') {
+                  actions.nextComponent();
+                  return;
+                } else {
+                  setShowCamera(true);
+                  setCurrentSide('back');
+                  setSilentCaptureResult((prev) => ({ path: '', success: false, isAnalyzing: false, error: '', mrz: '' }));
+                  setCropImageUri('');
+                }
               }}
                 variant="primary"
                 size="large"
@@ -480,8 +675,9 @@ const styles = StyleSheet.create({
   },
   documentTypesContainer: {
     // flex: 1,
-    marginBottom: 16,
+    // marginBottom: 16,
     // paddingHorizontal: 16,
+    maxHeight: Dimensions.get('window').height - 400,
   },
   documentTypeButton: {
     flexDirection: 'row',

package/src/components/KYCElements/InitializationStep.tsx

@@ -0,0 +1,53 @@
+import { ActivityIndicator, Button, StyleSheet, Text, View } from "react-native"
+import { SessionState } from "../../types/KYC.types"
+import { useEffect } from "react"
+import { useTemplateKYCFlowContext } from "../../hooks/useTemplateKYCFlow"
+import { useI18n } from "../../hooks/useI18n"
+
+export const InitializationStep = ({ session }: { session: SessionState }) => {
+    const { t } = useI18n();
+    const { initializeSession } = useTemplateKYCFlowContext()
+    useEffect(() => {
+        initializeSession()
+    }, [])
+
+
+
+    if (session.error) {
+        return (
+            <View style={styles.container}>
+                <Text style={styles.errorText}>{t('errors.serverError')}</Text>
+                <Button title={t('common.retry')} onPress={initializeSession} />
+            </View>
+        )
+    }
+
+    return (
+        <View style={styles.container}>
+            <Text style={styles.initializingText}>{t('common.loading')}</Text>
+            {session.isProcessing && (
+                <ActivityIndicator size="large" color="#0000ff" />
+            )}
+        </View>
+    )
+}
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+    errorText: {
+        color: '#dc2626',
+        fontSize: 16,
+        textAlign: 'center',
+        margin: 20,
+    },
+    initializingText: {
+        color: '#0000ff',
+        fontSize: 16,
+        textAlign: 'center',
+        margin: 20,
+    },
+})