@transfergratis/react-native-sdk 0.1.2

package/src/components/KYCElements/LocationCaptureTemplate.tsx

@@ -0,0 +1,325 @@
+import React, { useState, useEffect } from 'react';
+import { View, Text, StyleSheet, Alert } 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';
+
+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 [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 {
+      const { status } = await Location.requestForegroundPermissionsAsync();
+      return status === 'granted';
+    } catch (err) {
+      console.warn('Erreur lors de la demande de permission:', err);
+      return false;
+    }
+  };
+
+  const getCurrentLocation = async () => {
+    try {
+      setIsRequesting(true);
+
+      const hasLocationPermission = await requestLocationPermission();
+      if (!hasLocationPermission) {
+        Alert.alert(
+          'Permission refusée',
+          'La permission de localisation est nécessaire pour continuer.'
+        );
+        setIsRequesting(false);
+        return;
+      }
+
+      // Vérifier si la localisation est activée
+      const isLocationEnabled = await Location.hasServicesEnabledAsync();
+      if (!isLocationEnabled) {
+        Alert.alert(
+          'Localisation désactivée',
+          'Veuillez activer la localisation sur votre appareil pour continuer.'
+        );
+        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);
+      Alert.alert('Erreur', 'Impossible de récupérer votre localisation. Veuillez réessayer.');
+    } finally {
+      setIsRequesting(false);
+    }
+  };
+
+  const resetLocation = () => {
+    setCurrentLocation(null);
+    onValueChange(null);
+  };
+
+  // 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 }}>Secure Your Verification</Text>
+          <Text style={{ fontSize: 16, color: '#666', textAlign: 'center', marginBottom: 24, lineHeight: 22 }}>
+            Allow location access to help us protect your account and prevent fraudulent activity during verification.
+          </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 }}>
+            {`How this helps:`}
+          </Text>
+          <Text style={{ fontSize: 16, color: '#666', textAlign: 'left', lineHeight: 22 }}>
+            {`• Verifies your device location matches your identity\n• Detects and prevents unauthorized access\n• Ensures compliance with security regulations`}
+          </Text>
+        </View>
+
+        {currentLocation ? (
+          <View style={styles.locationInfo}>
+            <Text style={styles.locationTitle}>Localisation obtenue</Text>
+            <Text style={styles.locationDetails}>
+              Latitude: {currentLocation.latitude.toFixed(6)}
+            </Text>
+            <Text style={styles.locationDetails}>
+              Longitude: {currentLocation.longitude.toFixed(6)}
+            </Text>
+            <Text style={styles.locationDetails}>
+              Précision: {currentLocation.accuracy.toFixed(1)}m
+            </Text>
+            <Button
+              title="Réinitialiser"
+              fullWidth
+              onPress={resetLocation}
+              style={{ paddingVertical: 20, marginTop: 24, backgroundColor: '#6B7280' }}
+            />
+          </View>
+        ) : (
+          <Button
+            title={isRequesting ? "Récupération..." : "Enable Location Access"}
+            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,
+  },
+  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',
+    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',
+  },
+});