@sanctum-key/react-native-sdk 1.0.0

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,
+    },
+})

package/src/components/KYCElements/LocationCaptureTemplate.tsx

@@ -0,0 +1,378 @@
+import React, { useState, useEffect } from 'react';
+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';
+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;
+  value?: { latitude: number; longitude: number; accuracy: number } | null;
+  onValueChange: (value: { latitude: number; longitude: number; accuracy: number } | null) => void;
+  error?: string;
+  language?: string;
+}
+
+export const LocationCaptureTemplate: React.FC<LocationCaptureTemplateProps> = ({
+  component,
+  value,
+  onValueChange,
+  error,
+  language = 'en',
+}) => {
+  const { t } = useI18n();
+  const [isRequesting, setIsRequesting] = useState(false);
+  const [currentLocation, setCurrentLocation] = useState<{ latitude: number; longitude: number; accuracy: number } | null>(value || null);
+  const { actions } = useTemplateKYCFlowContext();
+  const config = component.config as LocationConfig;
+
+  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) {
+      console.warn('Erreur lors de la demande de permission:', err);
+      return false;
+    }
+  };
+
+  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) {
+        showAlert(
+          t('kyc.locationCapture.permissionDeniedTitle'),
+          t('kyc.locationCapture.permissionDeniedMessage')
+        );
+        setIsRequesting(false);
+        return;
+      }
+
+      // Vérifier si la localisation est activée
+      const isLocationEnabled = await Location.hasServicesEnabledAsync();
+      if (!isLocationEnabled) {
+        showAlert(
+          t('kyc.locationCapture.locationDisabledTitle'),
+          t('kyc.locationCapture.locationDisabledMessage')
+        );
+        setIsRequesting(false);
+        return;
+      }
+
+      // Récupérer la localisation actuelle
+      const location = await Location.getCurrentPositionAsync({
+        accuracy: config.accuracy === 'high' ? Location.Accuracy.High : Location.Accuracy.Balanced,
+        timeInterval: 5000,
+        distanceInterval: 10,
+      });
+
+      const locationData = {
+        latitude: location.coords.latitude,
+        longitude: location.coords.longitude,
+        accuracy: location.coords.accuracy || 50,
+      };
+
+      // Mettre à jour l'état local et passer la valeur au parent
+      setCurrentLocation(locationData);
+      onValueChange(locationData);
+
+    } catch (error) {
+      console.error('Erreur lors de la récupération de la localisation:', error);
+      showAlert(t('kyc.locationCapture.errorTitle'), t('kyc.locationCapture.errorMessage'));
+    } finally {
+      setIsRequesting(false);
+    }
+  };
+
+  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
+  useEffect(() => {
+    if (currentLocation && !isRequesting) {
+      // Délai court pour permettre à l'utilisateur de voir la localisation obtenue
+      const timer = setTimeout(() => {
+        actions.nextComponent();
+      }, 1500);
+
+      return () => clearTimeout(timer);
+    }
+    return undefined;
+  }, [currentLocation, isRequesting, actions]);
+
+
+
+  return (
+    <View style={styles.container}>
+      <View style={{ flexDirection: 'column', alignItems: 'center', justifyContent: 'center' }}>
+        <View style={{ position: 'relative', width: 70, }}>
+          <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'center', width: 60, height: 60, backgroundColor: '#2DBE60', borderRadius: 100 }}>
+            <ShieldIcon />
+          </View>
+          <View style={{ position: 'absolute', top: "60%", right: 0, flexDirection: 'row', alignItems: 'center', justifyContent: 'center', width: 40, height: 40, backgroundColor: 'white', borderRadius: 100, shadowColor: '#000', shadowOffset: { width: 0, height: 2 }, shadowOpacity: 0.15, shadowRadius: 1.84, elevation: 5 }}>
+            <GpsIcon />
+          </View>
+        </View>
+        <View style={{ flexDirection: 'column', alignItems: 'center', justifyContent: 'center', marginTop: 36 }}>
+          <Text style={{ fontSize: 24, fontWeight: 'bold', color: '#333', marginBottom: 8 }}>{t('kyc.locationCapture.title')}</Text>
+          <Text style={{ fontSize: 16, color: '#666', textAlign: 'center', marginBottom: 24, lineHeight: 22 }}>
+            {t('kyc.locationCapture.description')}
+          </Text>
+        </View>
+        <View style={{ flexDirection: 'column', marginTop: 36, backgroundColor: "#F9FAFB", padding: 12, borderRadius: 12, width: '100%', }}>
+          <Text style={{ fontSize: 16, color: 'black', fontWeight: 'bold', textAlign: 'left', lineHeight: 22 }}>
+            {t('kyc.locationCapture.howThisHelps')}
+          </Text>
+          <Text style={{ fontSize: 16, color: '#666', textAlign: 'left', lineHeight: 22 }}>
+            {t('kyc.locationCapture.howThisHelpsList')}
+          </Text>
+        </View>
+
+        {!currentLocation && (
+          <Button
+            title={isRequesting ? t('kyc.locationCapture.fetching') : t('kyc.locationCapture.enableButton')}
+            fullWidth
+            onPress={getCurrentLocation}
+            disabled={isRequesting}
+            style={{ paddingVertical: 20, marginTop: 36 }}
+          />
+        )}
+
+        <View style={{
+          height: 12,
+        }} />
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    padding: 16,
+    backgroundColor: 'white',
+    marginHorizontal: 12,
+    marginTop: 12,
+    borderRadius: 12,
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.15,
+    maxWidth: 760,
+  },
+  title: {
+    fontSize: 24,
+    fontWeight: 'bold',
+    color: '#333',
+    marginBottom: 8,
+    textAlign: 'center',
+  },
+  description: {
+    fontSize: 16,
+    color: '#666',
+    textAlign: 'center',
+    marginBottom: 24,
+    lineHeight: 22,
+  },
+  locationContainer: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    padding: 24,
+  },
+  iconContainer: {
+    marginBottom: 24,
+  },
+  locationIcon: {
+    fontSize: 80,
+  },
+  locationRequest: {
+    alignItems: 'center',
+    width: '100%',
+  },
+  locationRequestText: {
+    fontSize: 16,
+    color: '#666',
+    textAlign: 'center',
+    marginBottom: 24,
+  },
+  locationButton: {
+    paddingHorizontal: 32,
+    paddingVertical: 16,
+    borderRadius: 8,
+    minWidth: 200,
+    alignItems: 'center',
+  },
+  locationButtonDisabled: {
+    opacity: 0.6,
+  },
+  locationButtonText: {
+    color: 'white',
+    fontWeight: '600',
+    fontSize: 16,
+  },
+  buttonContainer: {
+    flexDirection: 'row',
+    justifyContent: 'space-around',
+    alignItems: 'center',
+    marginTop: 24,
+    width: '100%',
+  },
+  primaryButton: {
+    paddingHorizontal: 32,
+    paddingVertical: 16,
+    borderRadius: 8,
+    minWidth: 120,
+    alignItems: 'center',
+  },
+  primaryButtonText: {
+    color: 'white',
+    fontWeight: '600',
+    fontSize: 16,
+  },
+  secondaryButton: {
+    backgroundColor: '#e5e5e5',
+    paddingHorizontal: 32,
+    paddingVertical: 16,
+    borderRadius: 8,
+    minWidth: 120,
+    alignItems: 'center',
+  },
+  secondaryButtonText: {
+    color: '#333',
+    fontWeight: '600',
+    fontSize: 16,
+  },
+  requiredContainer: {
+    backgroundColor: '#fff3cd',
+    padding: 16,
+    borderRadius: 8,
+    marginTop: 16,
+  },
+  requiredText: {
+    fontSize: 16,
+    fontWeight: '600',
+    color: '#856404',
+    marginBottom: 8,
+  },
+  requiredSubtext: {
+    fontSize: 14,
+    color: '#856404',
+    lineHeight: 20,
+  },
+  accuracyContainer: {
+    backgroundColor: '#f0f9f0',
+    padding: 16,
+    borderRadius: 8,
+    marginTop: 16,
+  },
+  accuracyTitle: {
+    fontSize: 16,
+    fontWeight: '600',
+    color: '#2DBD60',
+    marginBottom: 8,
+  },
+  accuracyText: {
+    fontSize: 14,
+    color: '#666',
+    lineHeight: 20,
+  },
+  errorText: {
+    color: '#dc2626',
+    fontSize: 14,
+    marginTop: 8,
+    textAlign: 'center',
+  },
+});