@transfergratis/react-native-sdk 0.1.23 → 0.1.25

package/src/components/KYCElements/EmailVerificationTemplate.tsx

@@ -0,0 +1,264 @@
+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';
+
+interface EmailVerificationTemplateProps {
+    component: TemplateComponent;
+    value?: any;
+    onValueChange: (data: any) => void;
+    error?: string;
+    language?: string;
+}
+
+type VerificationStep = 'email' | 'otp';
+
+export const EmailVerificationTemplate: React.FC<EmailVerificationTemplateProps> = ({
+    component,
+    value,
+    onValueChange,
+    error: propError,
+}) => {
+    const { actions, getLocalizedText } = useTemplateKYCFlowContext();
+    const { t } = useI18n();
+    // 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 = () => {
+        if (!email || !email.includes('@')) {
+            setLocalError(t('errors.invalidEmail') || 'Please enter a valid email address');
+            return;
+        }
+
+        setLocalError(null);
+        setIsSimulating(true);
+
+        // Simulate API call to send code
+        setTimeout(() => {
+            setIsSimulating(false);
+            setStep('otp');
+            // For demo purposes, we could show an alert or toast here with the code
+            // But we'll just expect them to know 123456 or type anything for now if not strict
+        }, 1500);
+    };
+
+    const handleVerifyCode = () => {
+        if (!otp || otp.length < 4) {
+            setLocalError(t('errors.invalidCode') || 'Please enter the 6-digit code');
+            return;
+        }
+
+        setLocalError(null);
+        setIsSimulating(true);
+
+        // Simulate verification API
+        setTimeout(() => {
+            setIsSimulating(false);
+
+            // Mock validation logic
+            // Let's accept '123456' as the correct code or any code for testing if strictly requested?
+            // User said "verify with error message" implying we should support failure.
+            // Let's say if code is "000000" it fails, otherwise success, OR hardcode a success one.
+            // User said "verify with error message and next component if is a good one"
+            // Let's make "123456" the good one for clarity.
+
+            if (otp === '123456') {
+                onValueChange({ email, otp, verified: true });
+                actions.nextComponent();
+            } else {
+                setLocalError(t('errors.wrongCode') || 'Invalid verification code. Try 123456');
+            }
+        }, 1500);
+    };
+
+    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={() => {
+                            // Resend logic
+                            Alert.alert(
+                                t('common.codeResent') || 'Code Resent',
+                                t('common.codeResentMessage', { email }) || 'Code resent to ' + email
+                            );
+                        }}
+                        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/FileUpload.tsx

@@ -1,5 +1,6 @@
 import React, { useState } from 'react';
-import { View, Text, TouchableOpacity, StyleSheet, ScrollView, Image, Alert } from 'react-native';
+import { View, Text, TouchableOpacity, StyleSheet, ScrollView, Image } from 'react-native';
+import { showAlert } from '../../utils/platformAlert';
 import { useKYCStore } from '../../stores/kycStore';
 import NativeCameraModule from '../../modules/camera/NativeCameraModule';
 import { KYCElement } from '../../types/KYC.types';
@@ -51,7 +52,7 @@ export const FileUpload: React.FC<FileUploadProps> = ({
 
         // Vérifier le nombre maximum de fichiers
         if (uploadedFiles.length >= uploadConfig.maxFiles) {
-          Alert.alert('Limite atteinte', `Vous ne pouvez sélectionner que ${uploadConfig.maxFiles} fichiers maximum.`);
+          showAlert('Limite atteinte', `Vous ne pouvez sélectionner que ${uploadConfig.maxFiles} fichiers maximum.`);
           return;
         }
 
@@ -59,11 +60,11 @@ export const FileUpload: React.FC<FileUploadProps> = ({
         setUploadedFiles(updatedFiles);
         onValueChange(updatedFiles.map(file => file.uri));
       } else if (result.error) {
-        Alert.alert('Erreur', result.error);
+        showAlert('Erreur', result.error);
       }
     } catch (error) {
       console.error('Erreur lors de la sélection de fichiers:', error);
-      Alert.alert('Erreur', 'Impossible de sélectionner le fichier');
+      showAlert('Erreur', 'Impossible de sélectionner le fichier');
     } finally {
       setIsUploading(false);
       setProcessing(false);

package/src/components/KYCElements/FileUploadTemplate.tsx

@@ -1,5 +1,6 @@
 import React, { useState } from 'react';
-import { View, Text, TouchableOpacity, StyleSheet, ScrollView, Image, Alert } from 'react-native';
+import { View, Text, TouchableOpacity, StyleSheet, ScrollView, Image } from 'react-native';
+import { showAlert } from '../../utils/platformAlert';
 import { useKYCStore } from '../../stores/kycStore';
 import NativeCameraModule from '../../modules/camera/NativeCameraModule';
 import { useI18n } from '../../hooks/useI18n';
@@ -67,7 +68,7 @@ export const FileUploadTemplate: React.FC<FileUploadTemplateProps> = ({
         // Note: La propriété size peut ne pas être disponible selon la plateforme
         const fileSize = (result as any).size || 0;
         if (fileSize > maxSizeBytes) {
-          Alert.alert(
+          showAlert(
             'Fichier trop volumineux', 
             `La taille maximale autorisée est ${config.max_size_mb} MB.`
           );
@@ -85,11 +86,11 @@ export const FileUploadTemplate: React.FC<FileUploadTemplateProps> = ({
         setUploadedFiles(updatedFiles);
         onValueChange(updatedFiles.map(file => file.uri));
       } else if (result.error) {
-        Alert.alert('Erreur', result.error);
+        showAlert('Erreur', result.error);
       }
     } catch (error) {
       console.error('Erreur lors de la sélection de fichiers:', error);
-      Alert.alert('Erreur', 'Impossible de sélectionner le fichier');
+      showAlert('Erreur', 'Impossible de sélectionner le fichier');
     } finally {
       setIsUploading(false);
       setProcessing(false);