@transfergratis/react-native-sdk 0.1.22 → 0.1.24

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,10 +4,10 @@ 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';
@@ -204,7 +204,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,11 +4,11 @@ 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';
@@ -183,7 +183,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,10 +4,10 @@ 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';
@@ -157,7 +157,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/SelfieCapture.tsx

@@ -1,5 +1,6 @@
 import React, { useState } from 'react';
-import { View, Text, TouchableOpacity, StyleSheet, Image, Alert } from 'react-native';
+import { View, Text, TouchableOpacity, StyleSheet, Image } from 'react-native';
+import { showAlert } from '../../utils/platformAlert';
 import { EnhancedCameraView } from '../EnhancedCameraView';
 
 import { KYCElement } from '../../types/KYC.types';
@@ -39,12 +40,12 @@ export const SelfieCapture: React.FC<SelfieCaptureProps> = ({
       onValueChange(result.path);
       setShowCamera(false);
     } else {
-      Alert.alert('Erreur', result.error || 'Impossible de prendre le selfie');
+      showAlert('Erreur', result.error || 'Impossible de prendre le selfie');
     }
   };
 
   const handleError = (event: { message: string }) => {
-    Alert.alert('Erreur', event.message);
+    showAlert('Erreur', event.message);
     setShowCamera(false);
   };
 

package/src/components/KYCElements/SelfieCaptureTemplate.tsx

@@ -1,6 +1,7 @@
 import React, { useEffect, useMemo, useState } from 'react';
-import { View, Text, StyleSheet, Alert, ScrollView } from 'react-native';
-import { TemplateComponent, SelfieConfig, LocalizedText, ISilentCaptureResult, OrientationType, GovernmentDocumentType } from '../../types/KYC.types';
+import { View, Text, StyleSheet, ScrollView, Image, TouchableOpacity } from 'react-native';
+import { showAlert } from '../../utils/platformAlert';
+import { TemplateComponent, LocalizedText, ISilentCaptureResult, OrientationType, GovernmentDocumentType } from '../../types/KYC.types';
 import { EnhancedCameraView } from '../EnhancedCameraView';
 import { Button } from '../ui/Button';
 import { useTemplateKYCFlowContext } from '../../hooks/useTemplateKYCFlow';
@@ -30,14 +31,15 @@ export const SelfieCaptureTemplate: React.FC<SelfieCaptureTemplateProps> = ({
   language,
 }) => {
   const { t } = useI18n();
-  const config = component.config as SelfieConfig;
-  const orientations: OrientationType[] = (config.orientations || ['center']) as OrientationType[];
+  // const config = component.config as SelfieConfig;
+  const orientations: OrientationType[] = (['center','left','right']) as OrientationType[];
   const { actions, state, } = useTemplateKYCFlowContext();
 
   const [silentCaptureResult, setSilentCaptureResult] = useState<ISilentCaptureResult>({ success: false, isAnalyzing: false });
 
-
   const [showCamera, setShowCamera] = useState(false);
+  const [showPreview, setShowPreview] = useState(false);
+  const [previewImagePath, setPreviewImagePath] = useState<string | null>(null);
   const [currentOrientation, setCurrentOrientation] = useState<OrientationType>(orientations[0]);
   const [capturedImages, setCapturedImages] = useState<Record<string, IImagePayload>>(value || {});
 
@@ -78,7 +80,7 @@ export const SelfieCaptureTemplate: React.FC<SelfieCaptureTemplateProps> = ({
       case 'left':
         return state.currentLanguage === "en" ? "Left Profil Selfie" : "Selfie profil gauche";
       case 'right':
-        return state.currentLanguage === "en" ? "Rigth Profil Selfiee" : "Selfie profil droit";
+        return state.currentLanguage === "en" ? "Right Profile Selfie" : "Selfie profil droit";
       default:
         return getLocalizedText(component.labels as LocalizedText);
     }
@@ -162,39 +164,80 @@ export const SelfieCaptureTemplate: React.FC<SelfieCaptureTemplateProps> = ({
           setSilentCaptureResult((prev) => ({ ...prev, isAnalyzing: false, success: false, error: 'Le selfie n\'est pas correct' }));
         }
       }).catch((e: any) => {
-
         setSilentCaptureResult((prev) => ({ ...prev, isAnalyzing: false, success: false, error: e?.message || 'Erreur de vérification du selfie' }));
       });
     }
   }
 
+  // Capture manuelle - affiche le preview
   const handleCapture = async (result: { success: boolean; path?: string; error?: string }) => {
-    console.log("handleCapturessss", silentCaptureResult);
+    console.log("handleCapture called", result, silentCaptureResult);
 
+    // Priorité 1: Si la capture silencieuse a réussi, utiliser ce path
     if (silentCaptureResult.success && silentCaptureResult.path) {
-      const base64 = await pathToBase64(silentCaptureResult.path);
-      // Keep backward-compatible structure for UI validation and add *_base64 fields for backend payload
+      setPreviewImagePath(silentCaptureResult.path);
+      setShowCamera(false);
+      setShowPreview(true);
+      return;
+    }
+
+    // Priorité 2: Capture manuelle normale
+    if (result.success && result.path) {
+      setPreviewImagePath(result.path);
+      setShowCamera(false);
+      setShowPreview(true);
+    }
+  };
+
+  // Confirmer la capture depuis le preview
+  const handleConfirmCapture = async () => {
+    if (!previewImagePath) return;
+
+    try {
+      const base64 = await pathToBase64(previewImagePath);
       const newImages: Record<string, any> = {
         ...capturedImages,
-        [currentOrientation]: { dir: silentCaptureResult.path, file: base64 } as IImagePayload,
+        [currentOrientation]: { dir: previewImagePath, file: base64 } as IImagePayload,
       };
       setCapturedImages(newImages);
       onValueChange(newImages);
-      setShowCamera(false);
-
+      setShowPreview(false);
+      setPreviewImagePath(null);
+      setSilentCaptureResult({ success: false, isAnalyzing: false });
 
       // Passer à l'orientation suivante si disponible
       const currentIndex = orientations.indexOf(currentOrientation as OrientationType);
       if (currentIndex < orientations.length - 1) {
-        setCurrentOrientation(orientations[currentIndex + 1]);
+        const nextOrientation = orientations[currentIndex + 1];
+        setCurrentOrientation(nextOrientation);
+        // Rouvrir automatiquement la caméra pour la prochaine orientation
+        setShowCamera(true);
       }
+      // Si toutes les orientations sont complétées, on reste sur la vue principale
+    } catch (e) {
+      console.error("Error confirming capture", e);
+      showAlert('Erreur', 'Erreur lors de la sauvegarde de l\'image');
     }
   };
+
+  // Reprendre la photo depuis le preview
+  const handleRetakeFromPreview = () => {
+    setShowPreview(false);
+    setPreviewImagePath(null);
+    setSilentCaptureResult({ success: false, isAnalyzing: false });
+    setShowCamera(true);
+  };
   const idCardData = useMemo(() => {
     const idCardID = Object.keys(state.componentData).find((c: string) => c === "1");
     if (idCardID) {
       const _idCardData = state.componentData[idCardID];
-      return _idCardData as unknown as { country: string; documentType: GovernmentDocumentType };
+      const documentType = _idCardData?.documentType;
+      // Map national_id to identity_card for selfie capture
+      const mappedDocumentType = documentType === 'national_id' ? 'identity_card' : documentType;
+      return {
+        country: _idCardData?.country,
+        documentType: mappedDocumentType as GovernmentDocumentType
+      };
     }
     return null;
   }, [state.componentData]);
@@ -202,7 +245,7 @@ export const SelfieCaptureTemplate: React.FC<SelfieCaptureTemplateProps> = ({
 
 
   const handleError = (event: { message: string }) => {
-    Alert.alert('Erreur', event.message);
+    showAlert('Erreur', event.message);
     setShowCamera(false);
   };
 
@@ -216,7 +259,60 @@ export const SelfieCaptureTemplate: React.FC<SelfieCaptureTemplateProps> = ({
   };
   console.log("Current Orientation", currentOrientation);
 
+  // Vue Preview
+  if (showPreview && previewImagePath) {
+    return (
+      <View style={styles.containerCamera}>
+        <View style={styles.previewContainer}>
+          <View style={styles.previewHeader}>
+            <TouchableOpacity onPress={handleRetakeFromPreview} style={styles.backButton}>
+              <Text style={styles.backButtonText}>←</Text>
+            </TouchableOpacity>
+            <Text style={styles.previewTitle}>
+              {state.currentLanguage === "en" ? "Preview" : "Aperçu"}
+            </Text>
+            <View style={{ width: 40 }} />
+          </View>
+
+          <View style={styles.previewImageContainer}>
+            <Image
+              source={{ uri: previewImagePath }}
+              style={styles.previewImage}
+              resizeMode="contain"
+            />
+          </View>
+
+          <Text style={styles.previewInstructions}>
+            {state.currentLanguage === "en"
+              ? "Is your face clearly visible?"
+              : "Votre visage est-il clairement visible ?"}
+          </Text>
+
+          <View style={styles.previewButtonsContainer}>
+            <TouchableOpacity
+              style={styles.retakeButton}
+              onPress={handleRetakeFromPreview}
+            >
+              <Text style={styles.retakeButtonText}>
+                {state.currentLanguage === "en" ? "Retake" : "Reprendre"}
+              </Text>
+            </TouchableOpacity>
+
+            <TouchableOpacity
+              style={styles.confirmButton}
+              onPress={handleConfirmCapture}
+            >
+              <Text style={styles.confirmButtonText}>
+                {state.currentLanguage === "en" ? "Use Photo" : "Utiliser"}
+              </Text>
+            </TouchableOpacity>
+          </View>
+        </View>
+      </View>
+    );
+  }
 
+  // Vue Camera
   if (showCamera) {
     return (
       <View style={styles.containerCamera}>
@@ -322,18 +418,13 @@ export const SelfieCaptureTemplate: React.FC<SelfieCaptureTemplateProps> = ({
             <View style={{ height: 10 }} />
             {isAllOrientationsCompleted() ? <>
               <Button title={t('common.continue')} fullWidth style={{ paddingVertical: 20, paddingTop: 12 }} onPress={async () => {
-                if (idCardData?.country && idCardData?.documentType) {
-                  const value = {
-                    ...capturedImages,
-                    country: idCardData?.country || '',
-                    documentType: idCardData?.documentType as GovernmentDocumentType,
-                  }
-                  console.log("value", JSON.stringify(truncateFields(value), null, 2));
-                  onValueChange(value);
-                } else {
-                  Alert.alert('Erreur', 'Veuillez sélectionner un pays et un type de document');
-                  return;
+                const value = {
+                  ...capturedImages,
+                  ...(idCardData?.country ? { country: idCardData.country } : {}),
+                  ...(idCardData?.documentType ? { documentType: idCardData.documentType } : {}),
                 }
+                console.log("value", JSON.stringify(truncateFields(value), null, 2));
+                onValueChange(value);
                 actions.nextComponent();
               }} />
             </> : (
@@ -370,23 +461,17 @@ const styles = StyleSheet.create({
     borderRadius: 20,
     paddingVertical: 20,
     paddingHorizontal: 16,
-    // shadow
     shadowColor: '#000',
     shadowOffset: { width: 0, height: 2 },
     shadowOpacity: 0.35,
     shadowRadius: 4.84,
     elevation: 10,
-
-
-    // padding: 16,
   },
   containerCamera: {
     flex: 1,
-    // maxWidth: 760,
     width: '100%',
     height: '100%',
-    // borderRadius: 12,
-    backgroundColor: '#f5f5f5',
+    backgroundColor: '#000',
   },
   title: {
     fontSize: 24,
@@ -404,7 +489,6 @@ const styles = StyleSheet.create({
   },
   camera: {
     flex: 1,
-    // borderRadius: 12,
     overflow: 'hidden',
   },
   attemptsText: {
@@ -414,7 +498,6 @@ const styles = StyleSheet.create({
     marginBottom: 10,
   },
   orientationsContainer: {
-    // flex: 1,
   },
   orientationContainer: {
     backgroundColor: 'white',
@@ -434,7 +517,6 @@ const styles = StyleSheet.create({
     fontSize: 18,
     fontWeight: '600',
     color: '#333',
-    // marginBottom: 12,
   },
   capturedImageContainer: {
     alignItems: 'center',
@@ -464,14 +546,86 @@ const styles = StyleSheet.create({
     fontWeight: '600',
     color: 'white',
   },
+  // Preview styles
+  previewContainer: {
+    flex: 1,
+    backgroundColor: '#000',
+    justifyContent: 'space-between',
+  },
+  previewHeader: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    paddingHorizontal: 16,
+    paddingTop: 50,
+    paddingBottom: 16,
+  },
+  backButton: {
+    width: 40,
+    height: 40,
+    borderRadius: 20,
+    backgroundColor: 'rgba(255,255,255,0.2)',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  backButtonText: {
+    color: 'white',
+    fontSize: 24,
+    fontWeight: 'bold',
+  },
+  previewTitle: {
+    color: 'white',
+    fontSize: 18,
+    fontWeight: '600',
+  },
+  previewImageContainer: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    paddingHorizontal: 20,
+  },
+  previewImage: {
+    width: '100%',
+    height: '80%',
+    borderRadius: 16,
+  },
+  previewInstructions: {
+    color: 'white',
+    fontSize: 16,
+    textAlign: 'center',
+    paddingHorizontal: 20,
+    marginBottom: 20,
+  },
+  previewButtonsContainer: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    paddingHorizontal: 20,
+    paddingBottom: 40,
+    gap: 16,
+  },
   retakeButton: {
-    backgroundColor: '#FF6B6B',
-    paddingVertical: 12,
+    flex: 1,
+    backgroundColor: 'rgba(255,255,255,0.2)',
+    paddingVertical: 16,
     paddingHorizontal: 20,
-    borderRadius: 8,
+    borderRadius: 12,
+    alignItems: 'center',
   },
   retakeButtonText: {
-    fontSize: 14,
+    fontSize: 16,
+    fontWeight: '600',
+    color: 'white',
+  },
+  confirmButton: {
+    flex: 1,
+    backgroundColor: '#2DBD60',
+    paddingVertical: 16,
+    paddingHorizontal: 20,
+    borderRadius: 12,
+    alignItems: 'center',
+  },
+  confirmButtonText: {
+    fontSize: 16,
     fontWeight: '600',
     color: 'white',
   },