@transfergratis/react-native-sdk 0.1.23 → 0.1.25

package/src/components/KYCElements/LocationCaptureTemplate.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react';
-import { View, Text, StyleSheet, Alert } from 'react-native';
+import { View, Text, StyleSheet, Platform } from 'react-native';
 import { LocationConfig, TemplateComponent } from '../../types/KYC.types';
 import ShieldIcon from '../Svgs/Schield';
 import GpsIcon from '../Svgs/GpsIcon';
@@ -7,6 +7,7 @@ import { Button } from '../ui/Button';
 import * as Location from 'expo-location';
 import { useTemplateKYCFlowContext } from '../../hooks/useTemplateKYCFlow';
 import { useI18n } from '../../hooks/useI18n';
+import { showAlert } from '../../utils/platformAlert';
 
 interface LocationCaptureTemplateProps {
   component: TemplateComponent;
@@ -31,6 +32,12 @@ export const LocationCaptureTemplate: React.FC<LocationCaptureTemplateProps> = (
 
   const requestLocationPermission = async (): Promise<boolean> => {
     try {
+      // On web, use browser's geolocation API directly
+      if (Platform.OS === 'web') {
+        return await requestWebGeolocationPermission();
+      }
+      
+      // On native, use expo-location
       const { status } = await Location.requestForegroundPermissionsAsync();
       return status === 'granted';
     } catch (err) {
@@ -39,13 +46,42 @@ export const LocationCaptureTemplate: React.FC<LocationCaptureTemplateProps> = (
     }
   };
 
+  const requestWebGeolocationPermission = async (): Promise<boolean> => {
+    if (!navigator.geolocation) {
+      console.error('Geolocation is not supported by this browser');
+      return false;
+    }
+
+    try {
+      // Check if permission API is available
+      if ('permissions' in navigator) {
+        const result = await navigator.permissions.query({ name: 'geolocation' as PermissionName });
+        return result.state === 'granted' || result.state === 'prompt';
+      }
+      
+      // Fallback: assume we can request permission
+      return true;
+    } catch (err) {
+      console.warn('Could not check geolocation permission:', err);
+      // Assume we can try to request
+      return true;
+    }
+  };
+
   const getCurrentLocation = async () => {
     try {
       setIsRequesting(true);
 
+      // Web platform: use browser geolocation API
+      if (Platform.OS === 'web') {
+        await getWebGeolocation();
+        return;
+      }
+
+      // Native platform: use expo-location
       const hasLocationPermission = await requestLocationPermission();
       if (!hasLocationPermission) {
-        Alert.alert(
+        showAlert(
           t('kyc.locationCapture.permissionDeniedTitle'),
           t('kyc.locationCapture.permissionDeniedMessage')
         );
@@ -56,7 +92,7 @@ export const LocationCaptureTemplate: React.FC<LocationCaptureTemplateProps> = (
       // Vérifier si la localisation est activée
       const isLocationEnabled = await Location.hasServicesEnabledAsync();
       if (!isLocationEnabled) {
-        Alert.alert(
+        showAlert(
           t('kyc.locationCapture.locationDisabledTitle'),
           t('kyc.locationCapture.locationDisabledMessage')
         );
@@ -83,15 +119,66 @@ export const LocationCaptureTemplate: React.FC<LocationCaptureTemplateProps> = (
 
     } catch (error) {
       console.error('Erreur lors de la récupération de la localisation:', error);
-      Alert.alert(t('kyc.locationCapture.errorTitle'), t('kyc.locationCapture.errorMessage'));
+      showAlert(t('kyc.locationCapture.errorTitle'), t('kyc.locationCapture.errorMessage'));
     } finally {
       setIsRequesting(false);
     }
   };
 
-  const resetLocation = () => {
-    setCurrentLocation(null);
-    onValueChange(null);
+  const getWebGeolocation = async () => {
+    return new Promise<void>((resolve, reject) => {
+      if (!navigator.geolocation) {
+        showAlert(
+          t('kyc.locationCapture.errorTitle'),
+          'Geolocation is not supported by your browser. Please use a modern browser or enable location services.'
+        );
+        reject(new Error('Geolocation not supported'));
+        return;
+      }
+
+      const options: PositionOptions = {
+        enableHighAccuracy: config.accuracy === 'high',
+        timeout: 10000,
+        maximumAge: 0,
+      };
+
+      navigator.geolocation.getCurrentPosition(
+        (position) => {
+          const locationData = {
+            latitude: position.coords.latitude,
+            longitude: position.coords.longitude,
+            accuracy: position.coords.accuracy,
+          };
+
+          setCurrentLocation(locationData);
+          onValueChange(locationData);
+          resolve();
+        },
+        (error) => {
+          console.error('Geolocation error:', error);
+          
+          let errorMessage = t('kyc.locationCapture.errorMessage');
+          
+          switch (error.code) {
+            case error.PERMISSION_DENIED:
+              errorMessage = Platform.OS === 'web' 
+                ? 'Location permission denied. Please enable location access in your browser settings and try again.'
+                : t('kyc.locationCapture.permissionDeniedMessage');
+              break;
+            case error.POSITION_UNAVAILABLE:
+              errorMessage = 'Location information is unavailable. Please check your device settings.';
+              break;
+            case error.TIMEOUT:
+              errorMessage = 'Location request timed out. Please try again.';
+              break;
+          }
+          
+          showAlert(t('kyc.locationCapture.errorTitle'), errorMessage);
+          reject(error);
+        },
+        options
+      );
+    });
   };
 
   // Passer automatiquement à l'étape suivante quand la localisation est obtenue
@@ -135,26 +222,7 @@ export const LocationCaptureTemplate: React.FC<LocationCaptureTemplateProps> = (
           </Text>
         </View>
 
-        {currentLocation ? (
-          <View style={styles.locationInfo}>
-            <Text style={styles.locationTitle}>{t('kyc.locationCapture.obtained')}</Text>
-            <Text style={styles.locationDetails}>
-              {t('kyc.locationCapture.latitudeLabel')}: {currentLocation.latitude.toFixed(6)}
-            </Text>
-            <Text style={styles.locationDetails}>
-              {t('kyc.locationCapture.longitudeLabel')}: {currentLocation.longitude.toFixed(6)}
-            </Text>
-            <Text style={styles.locationDetails}>
-              {t('kyc.locationCapture.accuracyLabel')}: {currentLocation.accuracy.toFixed(1)}m
-            </Text>
-            <Button
-              title={t('kyc.locationCapture.resetButton')}
-              fullWidth
-              onPress={resetLocation}
-              style={{ paddingVertical: 20, marginTop: 24, backgroundColor: '#6B7280' }}
-            />
-          </View>
-        ) : (
+        {!currentLocation && (
           <Button
             title={isRequesting ? t('kyc.locationCapture.fetching') : t('kyc.locationCapture.enableButton')}
             fullWidth
@@ -184,23 +252,6 @@ const styles = StyleSheet.create({
     shadowOpacity: 0.15,
     maxWidth: 760,
   },
-  locationInfo: {
-    alignItems: 'center',
-    width: '100%',
-    marginTop: 24,
-  },
-  locationTitle: {
-    fontSize: 20,
-    fontWeight: '600',
-    color: '#2DBD60',
-    marginBottom: 16,
-  },
-  locationDetails: {
-    fontSize: 14,
-    color: '#666',
-    marginBottom: 4,
-    fontFamily: 'monospace',
-  },
   title: {
     fontSize: 24,
     fontWeight: 'bold',

package/src/components/KYCElements/OrientationVideoCapture.tsx

@@ -4,13 +4,14 @@ import {
   Text,
   StyleSheet,
   TouchableOpacity,
-  Alert,
   ActivityIndicator,
   Animated,
 } from 'react-native';
+import { showAlert } from '../../utils/platformAlert';
 import Svg, { Rect, Path, Mask, Defs } from 'react-native-svg';
 import { Camera, useCameraDevice } from 'react-native-vision-camera';
 import { OrientationVideoConfig, OrientationVideoState } from '../../types/KYC.types';
+import { KycEnvironment } from '../../types/env.types';
 import kycService from '../../modules/api/KYCService';
 import VisionCameraModule from '../../modules/camera/VisionCameraModule';
 import SideSelfieIcon from '../Svgs/sideSelfieIcon';
@@ -20,6 +21,7 @@ interface OrientationVideoCaptureProps {
   onComplete: (result: any) => void;
   onError: (error: string) => void;
   kycService: typeof kycService;
+  env?: KycEnvironment;
 }
 
 const defaultConfig: OrientationVideoConfig = {
@@ -42,6 +44,7 @@ export const OrientationVideoCapture: React.FC<OrientationVideoCaptureProps> = (
   onComplete,
   onError,
   kycService,
+  env = 'PRODUCTION',
 }) => {
   const finalConfig = { ...defaultConfig, ...config };
   
@@ -174,7 +177,7 @@ export const OrientationVideoCapture: React.FC<OrientationVideoCaptureProps> = (
     setState(prev => ({ ...prev, isProcessing: true, error: null }));
 
     try {
-      const result = await kycService.processOrientationVideo(videoUri);
+      const result = await kycService.processOrientationVideo(videoUri, env);
       
       if (result.success && result.data) {
         setState(prev => ({ 
@@ -204,7 +207,7 @@ export const OrientationVideoCapture: React.FC<OrientationVideoCaptureProps> = (
 
   const retake = () => {
     if (state.retakeCount >= finalConfig.maxRetakes) {
-      Alert.alert('Max Retakes Reached', 'You have reached the maximum number of retakes.');
+      showAlert('Max Retakes Reached', 'You have reached the maximum number of retakes.');
       return;
     }
 

package/src/components/KYCElements/OrientationVideoCaptureEnhanced.tsx

@@ -4,14 +4,15 @@ import {
   Text,
   StyleSheet,
   TouchableOpacity,
-  Alert,
   ActivityIndicator,
   Animated,
   Dimensions,
 } from 'react-native';
+import { showAlert } from '../../utils/platformAlert';
 import Svg, { Rect, Path, Mask, Defs } from 'react-native-svg';
 import { EnhancedCameraView } from '../EnhancedCameraView';
 import { OrientationVideoConfig, OrientationVideoState } from '../../types/KYC.types';
+import { KycEnvironment } from '../../types/env.types';
 import kycService from '../../modules/api/KYCService';
 import FrontSelfieIcon from '../Svgs/frontSelfieIcon';
 import ScanningLine from '../Svgs/scanningLine';
@@ -21,6 +22,7 @@ interface OrientationVideoCaptureEnhancedProps {
   onComplete: (result: any) => void;
   onError: (error: string) => void;
   kycService: typeof kycService;
+  env?: KycEnvironment;
 }
 
 const defaultConfig: OrientationVideoConfig = {
@@ -43,6 +45,7 @@ export const OrientationVideoCaptureEnhanced: React.FC<OrientationVideoCaptureEn
   onComplete,
   onError,
   kycService,
+  env = 'PRODUCTION',
 }) => {
   const finalConfig = { ...defaultConfig, ...config };
   const { width: screenWidth, height: screenHeight } = Dimensions.get('window');
@@ -153,7 +156,7 @@ export const OrientationVideoCaptureEnhanced: React.FC<OrientationVideoCaptureEn
     setState(prev => ({ ...prev, isProcessing: true, error: null }));
 
     try {
-      const result = await kycService.processOrientationVideo(videoUri);
+      const result = await kycService.processOrientationVideo(videoUri, env);
       
       if (result.success && result.data) {
         setState(prev => ({ 
@@ -183,7 +186,7 @@ export const OrientationVideoCaptureEnhanced: React.FC<OrientationVideoCaptureEn
 
   const retake = () => {
     if (state.retakeCount >= finalConfig.maxRetakes) {
-      Alert.alert('Max Retakes Reached', 'You have reached the maximum number of retakes.');
+      showAlert('Max Retakes Reached', 'You have reached the maximum number of retakes.');
       return;
     }
 

package/src/components/KYCElements/OrientationVideoCaptureFinal.tsx

@@ -4,13 +4,14 @@ import {
   Text,
   StyleSheet,
   TouchableOpacity,
-  Alert,
   ActivityIndicator,
   Animated,
 } from 'react-native';
+import { showAlert } from '../../utils/platformAlert';
 import Svg, { Rect, Path, Mask, Defs } from 'react-native-svg';
 import { EnhancedCameraView } from '../EnhancedCameraView';
 import { OrientationVideoConfig, OrientationVideoState } from '../../types/KYC.types';
+import { KycEnvironment } from '../../types/env.types';
 import SideSelfieIcon from '../Svgs/sideSelfieIcon';
 import kycService from '../../modules/api/KYCService';
 
@@ -19,6 +20,7 @@ interface OrientationVideoCaptureFinalProps {
   onComplete: (result: any) => void;
   onError: (error: string) => void;
   kycService: typeof kycService;
+  env?: KycEnvironment;
 }
 
 const defaultConfig: OrientationVideoConfig = {
@@ -41,6 +43,7 @@ export const OrientationVideoCaptureFinal: React.FC<OrientationVideoCaptureFinal
   onComplete,
   onError,
   kycService,
+  env = 'PRODUCTION',
 }) => {
   const finalConfig = { ...defaultConfig, ...config };
   
@@ -127,7 +130,7 @@ export const OrientationVideoCaptureFinal: React.FC<OrientationVideoCaptureFinal
     setState(prev => ({ ...prev, isProcessing: true, error: null }));
 
     try {
-      const result = await kycService.processOrientationVideo(videoUri);
+      const result = await kycService.processOrientationVideo(videoUri, env);
       
       if (result.success && result.data) {
         setState(prev => ({ 
@@ -157,7 +160,7 @@ export const OrientationVideoCaptureFinal: React.FC<OrientationVideoCaptureFinal
 
   const retake = () => {
     if (state.retakeCount >= finalConfig.maxRetakes) {
-      Alert.alert('Max Retakes Reached', 'You have reached the maximum number of retakes.');
+      showAlert('Max Retakes Reached', 'You have reached the maximum number of retakes.');
       return;
     }
 

package/src/components/KYCElements/PersonalInformationTemplate.tsx

@@ -0,0 +1,158 @@
+import React, { useState, useEffect } from 'react';
+import { View, Text, StyleSheet, TextInput, KeyboardAvoidingView, Platform, ScrollView } from 'react-native';
+import { TemplateComponent, PersonalInformationConfig, LocalizedText } from '../../types/KYC.types';
+import { useTemplateKYCFlowContext } from '../../hooks/useTemplateKYCFlow';
+import { useI18n } from '../../hooks/useI18n';
+import { Button } from '../ui/Button';
+
+interface PersonalInformationTemplateProps {
+    component: TemplateComponent;
+    value?: any;
+    onValueChange: (data: any) => void;
+    error?: string;
+    language?: string;
+}
+
+export const PersonalInformationTemplate: React.FC<PersonalInformationTemplateProps> = ({
+    component,
+    value,
+    onValueChange,
+    error,
+}) => {
+    const { actions, getLocalizedText } = useTemplateKYCFlowContext();
+    const { t } = useI18n();
+    const config = component.config as PersonalInformationConfig;
+    const [formData, setFormData] = useState<Record<string, string>>({});
+
+    const title = getLocalizedText(component.labels as LocalizedText);
+    const instructions = getLocalizedText(component.instructions as LocalizedText);
+    const buttonText = getLocalizedText((component.ui as any).buttonText) || t('common.submit');
+
+    useEffect(() => {
+        if (value) {
+            setFormData(value);
+        }
+    }, [value]);
+
+    const handleChange = (fieldId: string, text: string) => {
+        const newData = { ...formData, [fieldId]: text };
+        setFormData(newData);
+        onValueChange(newData);
+    };
+
+    const handleCreate = () => {
+        actions.nextComponent();
+    };
+
+    const isFormValid = () => {
+        if (!config.fields) return true;
+        return config.fields.every(field => {
+            if (field.required && !formData[field.id]) return false;
+            return true;
+        });
+    };
+
+    return (
+        <KeyboardAvoidingView
+            behavior={Platform.OS === "ios" ? "padding" : "height"}
+            style={styles.keyboardAvoidingView}
+        >
+            <ScrollView contentContainerStyle={styles.scrollContainer} showsVerticalScrollIndicator={false}>
+                <View style={styles.container}>
+                    <Text style={styles.title}>{title}</Text>
+                    <Text style={styles.instructions}>{instructions}</Text>
+
+                    <View style={styles.formContainer}>
+                        {config.fields && config.fields.map((field) => (
+                            <View key={field.id} style={styles.fieldContainer}>
+                                <Text style={styles.label}>
+                                    {field.label} {field.type === 'date' && field.dateFormat ? `(${field.dateFormat})` : ''} {field.required && '*'}
+                                </Text>
+                                <TextInput
+                                    style={styles.input}
+                                    placeholder={field.placeholder || field.label}
+                                    value={formData[field.id] || ''}
+                                    onChangeText={(text) => handleChange(field.id, text)}
+                                    autoCapitalize="words"
+                                />
+                            </View>
+                        ))}
+                    </View>
+
+                    {error && <Text style={styles.errorText}>{error}</Text>}
+
+                    <Button
+                        title={buttonText}
+                        onPress={handleCreate}
+                        fullWidth
+                        style={styles.button}
+                        disabled={!isFormValid()}
+                    />
+                </View>
+            </ScrollView>
+        </KeyboardAvoidingView>
+    );
+};
+
+const styles = StyleSheet.create({
+    keyboardAvoidingView: {
+        flex: 1,
+        width: '100%',
+    },
+    scrollContainer: {
+        flexGrow: 1,
+        justifyContent: 'center',
+        paddingBottom: 20,
+    },
+    container: {
+        padding: 20,
+        backgroundColor: 'white',
+        borderRadius: 12,
+        margin: 16,
+        shadowColor: '#000',
+        shadowOffset: { width: 0, height: 2 },
+        shadowOpacity: 0.1,
+        shadowRadius: 4,
+        elevation: 3,
+        width: '95%',
+    },
+    title: {
+        fontSize: 22,
+        fontWeight: 'bold',
+        marginBottom: 10,
+        color: '#333',
+    },
+    instructions: {
+        fontSize: 16,
+        color: '#666',
+        marginBottom: 20,
+        lineHeight: 22,
+    },
+    formContainer: {
+        marginBottom: 20,
+    },
+    fieldContainer: {
+        marginBottom: 16,
+    },
+    label: {
+        fontSize: 14,
+        fontWeight: '600',
+        color: '#333',
+        marginBottom: 6,
+    },
+    input: {
+        borderWidth: 1,
+        borderColor: '#ddd',
+        padding: 12,
+        borderRadius: 8,
+        fontSize: 16,
+        backgroundColor: '#f9f9f9',
+    },
+    errorText: {
+        color: 'red',
+        marginBottom: 10,
+    },
+    button: {
+        marginTop: 10,
+    },
+});