@transfergratis/react-native-sdk 0.1.24 → 0.1.26

package/src/components/KYCElements/EmailVerificationTemplate.tsx

@@ -0,0 +1,278 @@
+import React, { useState } from 'react';
+import { View, Text, StyleSheet, TextInput, TouchableOpacity, Alert } from 'react-native';
+import { TemplateComponent, LocalizedText } from '../../types/KYC.types';
+import { useTemplateKYCFlowContext } from '../../hooks/useTemplateKYCFlow';
+import { useI18n } from '../../hooks/useI18n';
+import { Button } from '../ui/Button';
+import kycService, { errorMessage } from '../../modules/api/KYCService';
+
+interface EmailVerificationTemplateProps {
+    component: TemplateComponent;
+    value?: any;
+    onValueChange: (data: any) => void;
+    error?: string;
+    language?: string;
+}
+
+type VerificationStep = 'email' | 'otp';
+
+/** RFC-style email validation: local@domain.tld */
+const EMAIL_REGEX = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+
+const isValidEmail = (value: string): boolean => EMAIL_REGEX.test((value || '').trim());
+
+export const EmailVerificationTemplate: React.FC<EmailVerificationTemplateProps> = ({
+    component,
+    value,
+    onValueChange,
+    error: propError,
+}) => {
+    const { actions, getLocalizedText, state, apiKey } = useTemplateKYCFlowContext();
+    const { t } = useI18n();
+
+    const auth = apiKey ? { apiKey } : (state.session.token ? { token: state.session.token } : undefined);
+    // const config = component.config as EmailVerificationConfig; // Keep for future use
+
+    // State
+    const [step, setStep] = useState<VerificationStep>('email');
+    const [email, setEmail] = useState('');
+    const [otp, setOtp] = useState('');
+    const [localError, setLocalError] = useState<string | null>(null);
+    const [isSimulating, setIsSimulating] = useState(false);
+
+    const title = getLocalizedText(component.labels as LocalizedText);
+    const instructions = getLocalizedText(component.instructions as LocalizedText);
+
+    // Determine button text based on step
+    const verifyButtonText = getLocalizedText((component.ui as any).buttonText) || t('common.verify') || 'Verify';
+    const sendButtonText = t('common.sendCode') || 'Send Verification Code';
+    const buttonText = step === 'email' ? sendButtonText : verifyButtonText;
+
+    const handleSendCode = async () => {
+        const trimmed = email.trim();
+        if (!trimmed || !isValidEmail(trimmed)) {
+            setLocalError(t('errors.invalidEmail') || 'Please enter a valid email address');
+            return;
+        }
+
+        setLocalError(null);
+        setIsSimulating(true);
+
+        try {
+            await kycService.sendEmailVerificationCode(trimmed, auth);
+            setStep('otp');
+        } catch (err: any) {
+            const msg = errorMessage(err) ?? err?.message ?? (t('errors.sendCodeFailed') || 'Failed to send verification code');
+            setLocalError(typeof msg === 'string' ? msg : JSON.stringify(msg));
+        } finally {
+            setIsSimulating(false);
+        }
+    };
+
+    const handleVerifyCode = async () => {
+        if (!otp || otp.length < 4) {
+            setLocalError(t('errors.invalidCode') || 'Please enter the 6-digit code');
+            return;
+        }
+
+        setLocalError(null);
+        setIsSimulating(true);
+
+        try {
+            await kycService.verifyEmailCode(otp.trim(), auth);
+            const data = { email, otp, verified: true };
+            onValueChange(data);
+            actions.nextComponent(data);
+        } catch (err: any) {
+            const msg = errorMessage(err) ?? err?.message ?? (t('errors.wrongCode') || 'Invalid verification code');
+            setLocalError(typeof msg === 'string' ? msg : JSON.stringify(msg));
+        } finally {
+            setIsSimulating(false);
+        }
+    };
+
+    const onChangeEmail = (text: string) => {
+        setEmail(text);
+        if (localError) setLocalError(null);
+    };
+
+    const onChangeOtp = (text: string) => {
+        setOtp(text);
+        if (localError) setLocalError(null);
+    };
+
+    const handleBackToEmail = () => {
+        setStep('email');
+        setOtp('');
+        setLocalError(null);
+    };
+
+    return (
+        <View style={styles.container}>
+            <Text style={styles.title}>{title}</Text>
+            <Text style={styles.instructions}>
+                {step === 'email' ? instructions : (t('kyc.enterCodeSent') || `Please enter the code sent to ${email}`)}
+            </Text>
+
+            <View style={styles.contentContainer}>
+                {step === 'email' ? (
+                    <View style={styles.inputContainer}>
+                        <Text style={styles.label}>{t('common.email') || 'Email'}</Text>
+                        <TextInput
+                            style={styles.input}
+                            placeholder="name@example.com"
+                            value={email}
+                            onChangeText={onChangeEmail}
+                            keyboardType="email-address"
+                            autoCapitalize="none"
+                            autoCorrect={false}
+                            editable={!isSimulating}
+                        />
+                    </View>
+                ) : (
+                    <View style={styles.inputContainer}>
+                        <Text style={styles.label}>{t('common.verificationCode') || 'Verification Code'}</Text>
+                        <TextInput
+                            style={styles.input}
+                            placeholder="123456"
+                            value={otp}
+                            onChangeText={onChangeOtp}
+                            keyboardType="number-pad"
+                            maxLength={6}
+                            editable={!isSimulating}
+                        />
+                        <TouchableOpacity onPress={handleBackToEmail} style={styles.changeEmailLink}>
+                            <Text style={styles.changeEmailText}>{t('common.changeEmail') || 'Change email'}</Text>
+                        </TouchableOpacity>
+                    </View>
+                )}
+
+                {(localError || propError) && (
+                    <Text style={styles.errorText}>{localError || propError}</Text>
+                )}
+
+                <Button
+                    title={isSimulating ? (t('common.processing') || 'Processing...') : buttonText}
+                    onPress={step === 'email' ? handleSendCode : handleVerifyCode}
+
+
+                    disabled={
+                        isSimulating ||
+                        (step === 'email' ? !email : !otp)
+                    }
+                />
+
+                {step === 'otp' && (
+                    <TouchableOpacity
+                        onPress={async () => {
+                            if (isSimulating) return;
+                            setLocalError(null);
+                            setIsSimulating(true);
+                            try {
+                                await kycService.sendEmailVerificationCode(email.trim(), auth);
+                                Alert.alert(
+                                    t('common.codeResent') || 'Code Resent',
+                                    t('common.codeResentMessage', { email }) || 'Code resent to ' + email
+                                );
+                            } catch (err: any) {
+                                const msg = errorMessage(err) ?? err?.message ?? (t('errors.sendCodeFailed') || 'Failed to send code');
+                                setLocalError(typeof msg === 'string' ? msg : JSON.stringify(msg));
+                            } finally {
+                                setIsSimulating(false);
+                            }
+                        }}
+                        style={styles.resendButton}
+                        disabled={isSimulating}
+                    >
+                        <Text style={styles.resendText}>{t('common.resendCode') || 'Resend Code'}</Text>
+                    </TouchableOpacity>
+                )}
+            </View>
+        </View>
+    );
+};
+
+const styles = StyleSheet.create({
+    container: {
+        padding: 24,
+        backgroundColor: 'white',
+        borderRadius: 16,
+        margin: 16,
+        shadowColor: '#000',
+        shadowOffset: { width: 0, height: 4 },
+        shadowOpacity: 0.1,
+        shadowRadius: 12,
+        elevation: 5,
+        width: '95%',
+    },
+    title: {
+        fontSize: 24,
+        fontWeight: '700',
+        marginBottom: 8,
+        color: '#1a1a1a',
+        textAlign: 'center',
+    },
+    instructions: {
+        fontSize: 16,
+        color: '#666',
+        marginBottom: 32,
+        lineHeight: 24,
+        textAlign: 'center',
+    },
+    contentContainer: {
+        // width: '100%',
+    },
+    inputContainer: {
+        marginBottom: 24,
+    },
+    label: {
+        fontSize: 14,
+        fontWeight: '600',
+        color: '#333',
+        marginBottom: 8,
+        marginLeft: 4,
+    },
+    input: {
+        borderWidth: 1,
+        borderColor: '#e0e0e0',
+        padding: 16,
+        borderRadius: 12,
+        fontSize: 16,
+        backgroundColor: '#f8f9fa',
+        color: '#333',
+    },
+    errorText: {
+        color: '#dc2626',
+        marginBottom: 16,
+        fontSize: 14,
+        textAlign: 'center',
+        backgroundColor: '#fee2e2',
+        padding: 8,
+        borderRadius: 8,
+        overflow: 'hidden',
+    },
+    button: {
+        height: 50,
+        borderRadius: 12,
+        width: "100%"
+    },
+    changeEmailLink: {
+        alignSelf: 'flex-end',
+        marginTop: 8,
+    },
+    changeEmailText: {
+        color: '#2DBD60',
+        fontSize: 14,
+        fontWeight: '500',
+    },
+    resendButton: {
+        marginTop: 16,
+        alignItems: 'center',
+        width: "100%"
+    },
+    resendText: {
+        color: '#666',
+        fontSize: 14,
+        textDecorationLine: 'underline',
+    },
+});

package/src/components/KYCElements/IDCardCapture.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useMemo, useState } from 'react';
-import { View, Text, StyleSheet, Image, ScrollView } from 'react-native';
+import { View, Text, StyleSheet, Image, ScrollView, Platform, Modal, TouchableOpacity, ActivityIndicator } from 'react-native';
 import { showAlert } from '../../utils/platformAlert';
 import { EnhancedCameraView } from '../EnhancedCameraView';
 import { TemplateComponent, LocalizedText, GovernmentDocumentType, ISilentCaptureResult, IBbox, GovernmentDocumentTypeShorted, GovernmentDocumentTypeBackend } from '../../types/KYC.types';
@@ -11,8 +11,9 @@ import { removeDuplicates } from '../../utils/remove-duplicate';
 import { backVerification, checkTemplateType, 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 { cropByObb, cropImageWithBBox, cropImageWithBBoxWithTolerance } from '../../utils/cropByObb';
+import kycService, { truncateFields } from '../../modules/api/KYCService';
+import { cropByObb, cropImageWithBBox, cropImageWithBBoxWithTolerance, getObbConfidence, OBB_CONFIDENCE_THRESHOLD } from '../../utils/cropByObb';
+import { isMobileWeb } from '../../utils/deviceDetection';
 import { logger } from '../../utils/logger';
 
 
@@ -47,6 +48,7 @@ export const IDCardCapture: React.FC<IDCardCaptureProps> = ({
   // Stocker les bbox par côté pour pouvoir restaurer les images croppées
   const [bboxBySide, setBboxBySide] = useState<Record<string, IBbox>>({});
   const [silentCaptureResult, setSilentCaptureResult] = useState<ISilentCaptureResult>({ success: false, isAnalyzing: false });
+  const [showQRModal, setShowQRModal] = useState(false);
 
   // Mapping des types de documents backend vers SDK
   const documentTypeMapping: Record<string, GovernmentDocumentType> = {
@@ -58,7 +60,7 @@ export const IDCardCapture: React.FC<IDCardCaptureProps> = ({
   };
   // const [imageNaturalSize, setImageNaturalSize] = useState<{ width: number; height: number } | null>(null);
 
-  const { actions, state } = useTemplateKYCFlowContext();
+  const { actions, state, env } = useTemplateKYCFlowContext();
 
 
 
@@ -96,6 +98,35 @@ export const IDCardCapture: React.FC<IDCardCaptureProps> = ({
   }, [countrySelectionData]);
 
 
+  // Synchroniser capturedImages avec value quand les données sont chargées (ex: reprise de session)
+  useEffect(() => {
+    if (value && Object.keys(value).length > 0) {
+      // Vérifier si les données ont changé
+      const valueChanged = JSON.stringify(value) !== JSON.stringify(capturedImages);
+      if (valueChanged) {
+        logger.log("Updating capturedImages from value:", Object.keys(value));
+        logger.log("Value data sample:", truncateFields(value));
+        const updatedImages = value as Record<string, IIDCardPayload>;
+        setCapturedImages(updatedImages);
+        
+        // Si on a des images chargées, mettre à jour silentCaptureResult pour l'affichage
+        Object.keys(updatedImages).forEach((side) => {
+          const imageData = updatedImages[side];
+          if (imageData?.dir) {
+            setSilentCaptureResult(prev => ({
+              ...prev,
+              path: imageData.dir,
+              success: true,
+              isAnalyzing: false,
+              mrz: imageData.mrz || '',
+              templatePath: imageData.templatePath || '',
+            }));
+          }
+        });
+      }
+    }
+  }, [value]);
+
   useEffect(() => {
     logger.log("cropImageUri", JSON.stringify(truncateFields({ box: silentCaptureResult }), null, 2));
     if (capturedImages[currentSide]?.dir && silentCaptureResult?.bbox) {
@@ -213,7 +244,7 @@ export const IDCardCapture: React.FC<IDCardCaptureProps> = ({
             countrySelectionDataDocumentType: countrySelectionData?.documentType,
             docTypeToSend: selectedDocumentType?.type
           });
-          const templateType = await checkTemplateType({ path: result.path || '', docType: selectedDocumentType?.type as GovernmentDocumentType, docRegion: countryData?.code || "", postfix: currentSide });
+          const templateType = await checkTemplateType({ path: result.path || '', docType: selectedDocumentType?.type as GovernmentDocumentType, docRegion: countryData?.code || "", postfix: currentSide }, env);
 
           if (templateType.template_path) {
             templatePath = templateType.template_path;
@@ -221,6 +252,16 @@ export const IDCardCapture: React.FC<IDCardCaptureProps> = ({
             setSilentCaptureResult((prev) => ({ ...prev, templatePath: templatePath }));
           }
           if (templateType.card_obb) {
+            const obbConfidence = getObbConfidence((templateType as any).card_obb);
+            if (obbConfidence !== null && obbConfidence < OBB_CONFIDENCE_THRESHOLD) {
+              setSilentCaptureResult((prev) => ({
+                ...prev,
+                isAnalyzing: false,
+                success: false,
+                error: t('kyc.idCardCapture.cardNotFullyInFrame'),
+              }));
+              return;
+            }
             let bbox: IBbox | undefined;
             try {
               const crop = await cropByObb(result?.path || '', (templateType as any).card_obb);
@@ -260,7 +301,7 @@ export const IDCardCapture: React.FC<IDCardCaptureProps> = ({
           };
           console.log("frontVerification params", verificationParams);
           console.log("About to call frontVerification function");
-          const promise = frontVerification(verificationParams);
+          const promise = frontVerification(verificationParams, env);
           console.log("frontVerification promise created", promise);
           promise.then((mrz) => {
             logger.log("front verification result", truncateFields(mrz));
@@ -283,8 +324,9 @@ export const IDCardCapture: React.FC<IDCardCaptureProps> = ({
           }).catch((e: any) => {
             console.log("error front verification", e);
             logger.log("error front verification", truncateFields(e));
-            setSilentCaptureResult((prev) => ({ ...prev, isAnalyzing: false, templatePath: templatePath, success: false, error: e?.message || 'Erreur de détection du MRZ' }));
-            // showAlert('Erreur', e?.message || 'Erreur de détection du MRZ');
+            const isCardNotFullyInFrame = e?.message?.includes('entirement') || e?.message?.includes('fully in frame');
+            const errorMessage = isCardNotFullyInFrame ? t('kyc.idCardCapture.cardNotFullyInFrame') : (e?.message || 'Erreur de détection du MRZ');
+            setSilentCaptureResult((prev) => ({ ...prev, isAnalyzing: false, templatePath: templatePath, success: false, error: errorMessage }));
           });
         } catch (error: any) {
           console.log("Error setting up frontVerification call", error);
@@ -304,7 +346,7 @@ export const IDCardCapture: React.FC<IDCardCaptureProps> = ({
           currentSide: currentSide,
           templatePath: templatePath,
           mrzType: getCorrespondingMrzType(templatePath, backRegionMappings.regionMapping, backRegionMappings.key || '') || '',
-        }).then((mrz) => {
+        }, env).then((mrz) => {
           logger.log("back verification result", truncateFields(mrz));
           const bbox = (mrz as any)?.bbox || templateBbox;
           setSilentCaptureResult((prev) => ({
@@ -320,8 +362,9 @@ export const IDCardCapture: React.FC<IDCardCaptureProps> = ({
           }
         }).catch((e: any) => {
           logger.log("error back verification", truncateFields(e));
-          setSilentCaptureResult((prev) => ({ ...prev, isAnalyzing: false, templatePath: templatePath, success: false, error: e?.message || 'Erreur de détection du MRZ' }));
-          // showAlert('Erreur', e?.message || 'Erreur de détection du MRZ');
+          const isCardNotFullyInFrame = e?.message?.includes('entirement') || e?.message?.includes('fully in frame');
+          const errorMessage = isCardNotFullyInFrame ? t('kyc.idCardCapture.cardNotFullyInFrame') : (e?.message || 'Erreur de détection du MRZ');
+          setSilentCaptureResult((prev) => ({ ...prev, isAnalyzing: false, templatePath: templatePath, success: false, error: errorMessage }));
         })
       }
 
@@ -380,12 +423,82 @@ export const IDCardCapture: React.FC<IDCardCaptureProps> = ({
     actions.showCustomStepper(!showCamera);
   }, [showCamera]);
 
+  // Cross-device polling logic
+  useEffect(() => {
+    if (!showQRModal || !state.session.session_id) return;
+
+    const pollInterval = setInterval(async () => {
+      try {
+        const result = await kycService.getVerificationResult(state.session.session_id);
+        const sessionData = result[state.session.session_id]?.data;
+
+        if (sessionData) {
+          // Check if verification is completed or if we have ID card data
+          // Since the requirement is "verification restarts", we might look for overall completion
+          // or we could check if user_data is populated.
+          // For now, let's assume if status is not PENDING/INITIALIZED it might be done.
+          // Or simplier: if the mobile flow completes, the session status updates.
+          logger.log('Polling result:', truncateFields(sessionData));
+
+          if (sessionData.verification_status === 'completed' || sessionData.verification_status === 'approved' || sessionData.verification_status === 'review') {
+            clearInterval(pollInterval);
+            setShowQRModal(false);
+            actions.submitVerification(); // Or handleComplete
+          }
+        }
+      } catch (error) {
+        console.error('Polling error:', error);
+      }
+    }, 5000);
+
+    return () => clearInterval(pollInterval);
+  }, [showQRModal, state.session.session_id, actions]);
+
+  const getQrCodeUrl = (): string => {
+    // Only available on web platform
+    if (Platform.OS !== 'web') return '';
+    if (typeof window === 'undefined' || !window.location || !window.location.href) return '';
+    
+    try {
+      const currentUrl = new URL(window.location.href);
+      if (!currentUrl.searchParams.has('kyc_id') && state.session.session_id) {
+        currentUrl.searchParams.set('kyc_id', state.session.session_id);
+      }
+      currentUrl.searchParams.set('component_index', String(state.currentComponentIndex));
+      if (countrySelectionData?.code) {
+        currentUrl.searchParams.set('country', countrySelectionData.code);
+        if (countrySelectionData.documentType) currentUrl.searchParams.set('document_type', countrySelectionData.documentType);
+        if (countrySelectionData.region) currentUrl.searchParams.set('region', countrySelectionData.region);
+      }
+      return `https://api.qrserver.com/v1/create-qr-code/?size=250x250&data=${encodeURIComponent(currentUrl.toString())}`;
+    } catch (error) {
+      console.warn('Error generating QR code URL:', error);
+      return '';
+    }
+  };
+
 
 
 
 
 
 
+  // En reprise sur un autre appareil: afficher un chargement tant que les données de session ne sont pas restaurées
+  const isResumingSession = Boolean(state.session.session_id && state.currentComponentIndex > 0);
+  const sessionDataRestored = state.session.sessionDataRestored !== false;
+  if (isResumingSession && !sessionDataRestored && (!countrySelectionData || !selectedDocumentType)) {
+    return (
+      <View style={styles.root}>
+        <View style={[styles.container, { justifyContent: 'center', alignItems: 'center' }]}>
+          <ActivityIndicator size="large" color="#2DBD60" />
+          <Text style={[styles.description, { marginTop: 16 }]}>
+            {state.currentLanguage === 'en' ? 'Loading your session...' : 'Chargement de votre session...'}
+          </Text>
+        </View>
+      </View>
+    );
+  }
+
   // Vérifier si les données sont disponibles, sinon afficher un message d'erreur
   if (!countrySelectionData || !selectedDocumentType) {
     return (
@@ -423,6 +536,7 @@ export const IDCardCapture: React.FC<IDCardCaptureProps> = ({
           showSwitchCamera={true}
           onSilentCapture={handleSilentCapture}
           silentCaptureResult={silentCaptureResult}
+          captureStabilizationDelayMs={3000}
           enableFlash={cameraConfig.flashMode === 'auto' || cameraConfig.flashMode === 'on'}
           overlayComponent={<IdCardOverlay
             xMin={cameraConfig.overlay.bbox.xMin}
@@ -518,15 +632,28 @@ export const IDCardCapture: React.FC<IDCardCaptureProps> = ({
                     }}
                   />
                 ) : null}
-                {silentCaptureResult.path ? (<Image
-                  source={{ uri: silentCaptureResult.path }}
-                  style={{
-                    width: '100%',
-                    height: 200,
-                    borderRadius: 12,
-                    resizeMode: 'cover',
-                  }}
-                />) : null}
+                {!cropImageUri && silentCaptureResult.path ? (
+                  <Image
+                    source={{ uri: silentCaptureResult.path }}
+                    style={{
+                      width: '100%',
+                      height: 200,
+                      borderRadius: 12,
+                      resizeMode: 'cover',
+                    }}
+                  />
+                ) : null}
+                {!cropImageUri && !silentCaptureResult.path && capturedImages[currentSide]?.dir ? (
+                  <Image
+                    source={{ uri: capturedImages[currentSide].dir }}
+                    style={{
+                      width: '100%',
+                      height: 200,
+                      borderRadius: 12,
+                      resizeMode: 'cover',
+                    }}
+                  />
+                ) : null}
 
               </View>
               {/* Capture button si aucune image n'a été capturée */}
@@ -582,6 +709,49 @@ export const IDCardCapture: React.FC<IDCardCaptureProps> = ({
         {error && (
           <Text style={styles.errorText}>{error}</Text>
         )}
+
+        {/* Cross-Device / Continue on Phone Button (Web Only) */}
+        {Platform.OS === 'web' && !isMobileWeb() && !capturedImages[currentSide]?.dir && (
+          <Button title={t('kyc.idCardCapture.continueOnPhone')} onPress={() => { setShowQRModal(true) }} />
+        )}
+
+        {/* QR Code Modal - Web Only */}
+        {Platform.OS === 'web' && (
+          <Modal
+            visible={showQRModal}
+            transparent={true}
+            animationType="fade"
+            onRequestClose={() => setShowQRModal(false)}
+          >
+            <View style={styles.modalOverlay}>
+              <View style={styles.modalContent}>
+                <Text style={styles.modalTitle}>
+                  {t('kyc.idCardCapture.continueOnMobile')}
+                </Text>
+                <Text style={styles.modalDescription}>
+                  {t('kyc.idCardCapture.scanQrCode')}
+                </Text>
+
+                {showQRModal && getQrCodeUrl() ? (
+                  <Image
+                    source={{ uri: getQrCodeUrl() }}
+                    style={styles.qrCodeImage}
+                  />
+                ) : null}
+
+                <TouchableOpacity
+                  style={styles.closeButton}
+                  onPress={() => setShowQRModal(false)}
+                >
+                  <Text style={styles.closeButtonText}>
+                    {t('common.close')}
+                  </Text>
+                </TouchableOpacity>
+              </View>
+            </View>
+          </Modal>
+        )}
+
       </View>
     </View>
   );
@@ -613,7 +783,7 @@ const styles = StyleSheet.create({
     height: '100%',
   },
   previewContainer: {
-    width: '100%',
+    width: '95%',
     backgroundColor: 'white',
     margin: 10,
     borderRadius: 10,
@@ -738,4 +908,66 @@ const styles = StyleSheet.create({
     marginTop: 8,
     textAlign: 'center',
   },
+  crossDeviceButton: {
+    marginTop: 16,
+    padding: 12,
+    alignItems: 'center',
+    borderWidth: 1,
+    borderColor: '#2DBD60',
+    borderRadius: 8,
+    backgroundColor: '#f0f9f0',
+  },
+  crossDeviceText: {
+    color: '#2DBD60',
+    fontSize: 16,
+    fontWeight: '600',
+  },
+  modalOverlay: {
+    flex: 1,
+    backgroundColor: 'rgba(0,0,0,0.5)',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  modalContent: {
+    backgroundColor: 'white',
+    borderRadius: 16,
+    padding: 24,
+    alignItems: 'center',
+    width: '90%',
+    maxWidth: 340,
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.25,
+    shadowRadius: 4,
+    elevation: 5,
+  },
+  modalTitle: {
+    fontSize: 20,
+    fontWeight: 'bold',
+    marginBottom: 12,
+    color: '#333',
+  },
+  modalDescription: {
+    fontSize: 16,
+    color: '#666',
+    textAlign: 'center',
+    marginBottom: 20,
+    lineHeight: 22,
+  },
+  qrCodeImage: {
+    width: 200,
+    height: 200,
+    marginBottom: 20,
+  },
+  closeButton: {
+    paddingVertical: 10,
+    paddingHorizontal: 20,
+    backgroundColor: '#f5f5f5',
+    borderRadius: 8,
+  },
+  closeButtonText: {
+    fontSize: 16,
+    color: '#666',
+    fontWeight: '600',
+  },
 });