@transfergratis/react-native-sdk 0.1.4 → 0.1.6

package/src/components/KYCElements/LocationCaptureTemplate.tsx

@@ -6,6 +6,7 @@ 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';
 
 interface LocationCaptureTemplateProps {
   component: TemplateComponent;
@@ -22,6 +23,7 @@ export const LocationCaptureTemplate: React.FC<LocationCaptureTemplateProps> = (
   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();
@@ -44,8 +46,8 @@ export const LocationCaptureTemplate: React.FC<LocationCaptureTemplateProps> = (
       const hasLocationPermission = await requestLocationPermission();
       if (!hasLocationPermission) {
         Alert.alert(
-          'Permission refusée',
-          'La permission de localisation est nécessaire pour continuer.'
+          t('kyc.locationCapture.permissionDeniedTitle'),
+          t('kyc.locationCapture.permissionDeniedMessage')
         );
         setIsRequesting(false);
         return;
@@ -55,8 +57,8 @@ export const LocationCaptureTemplate: React.FC<LocationCaptureTemplateProps> = (
       const isLocationEnabled = await Location.hasServicesEnabledAsync();
       if (!isLocationEnabled) {
         Alert.alert(
-          'Localisation désactivée',
-          'Veuillez activer la localisation sur votre appareil pour continuer.'
+          t('kyc.locationCapture.locationDisabledTitle'),
+          t('kyc.locationCapture.locationDisabledMessage')
         );
         setIsRequesting(false);
         return;
@@ -81,7 +83,7 @@ export const LocationCaptureTemplate: React.FC<LocationCaptureTemplateProps> = (
 
     } 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.');
+      Alert.alert(t('kyc.locationCapture.errorTitle'), t('kyc.locationCapture.errorMessage'));
     } finally {
       setIsRequesting(false);
     }
@@ -119,34 +121,34 @@ export const LocationCaptureTemplate: React.FC<LocationCaptureTemplateProps> = (
           </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: 24, fontWeight: 'bold', color: '#333', marginBottom: 8 }}>{t('kyc.locationCapture.title')}</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.
+            {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 }}>
-            {`How this helps:`}
+            {t('kyc.locationCapture.howThisHelps')}
           </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`}
+            {t('kyc.locationCapture.howThisHelpsList')}
           </Text>
         </View>
 
         {currentLocation ? (
           <View style={styles.locationInfo}>
-            <Text style={styles.locationTitle}>Localisation obtenue</Text>
+            <Text style={styles.locationTitle}>{t('kyc.locationCapture.obtained')}</Text>
             <Text style={styles.locationDetails}>
-              Latitude: {currentLocation.latitude.toFixed(6)}
+              {t('kyc.locationCapture.latitudeLabel')}: {currentLocation.latitude.toFixed(6)}
             </Text>
             <Text style={styles.locationDetails}>
-              Longitude: {currentLocation.longitude.toFixed(6)}
+              {t('kyc.locationCapture.longitudeLabel')}: {currentLocation.longitude.toFixed(6)}
             </Text>
             <Text style={styles.locationDetails}>
-              Précision: {currentLocation.accuracy.toFixed(1)}m
+              {t('kyc.locationCapture.accuracyLabel')}: {currentLocation.accuracy.toFixed(1)}m
             </Text>
             <Button
-              title="Réinitialiser"
+              title={t('kyc.locationCapture.resetButton')}
               fullWidth
               onPress={resetLocation}
               style={{ paddingVertical: 20, marginTop: 24, backgroundColor: '#6B7280' }}
@@ -154,7 +156,7 @@ export const LocationCaptureTemplate: React.FC<LocationCaptureTemplateProps> = (
           </View>
         ) : (
           <Button
-            title={isRequesting ? "Récupération..." : "Enable Location Access"}
+            title={isRequesting ? t('kyc.locationCapture.fetching') : t('kyc.locationCapture.enableButton')}
             fullWidth
             onPress={getCurrentLocation}
             disabled={isRequesting}

package/src/components/KYCElements/OrientationVideoCapture.tsx

@@ -11,7 +11,7 @@ import {
 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 KYCService from '../../modules/api/KYCService';
+import kycService from '../../modules/api/KYCService';
 import VisionCameraModule from '../../modules/camera/VisionCameraModule';
 import SideSelfieIcon from '../Svgs/sideSelfieIcon';
 
@@ -19,7 +19,7 @@ interface OrientationVideoCaptureProps {
   config?: Partial<OrientationVideoConfig>;
   onComplete: (result: any) => void;
   onError: (error: string) => void;
-  kycService: KYCService;
+  kycService: typeof kycService;
 }
 
 const defaultConfig: OrientationVideoConfig = {

package/src/components/KYCElements/OrientationVideoCaptureEnhanced.tsx

@@ -12,7 +12,7 @@ import {
 import Svg, { Rect, Path, Mask, Defs } from 'react-native-svg';
 import { EnhancedCameraView } from '../EnhancedCameraView';
 import { OrientationVideoConfig, OrientationVideoState } from '../../types/KYC.types';
-import KYCService from '../../modules/api/KYCService';
+import kycService from '../../modules/api/KYCService';
 import FrontSelfieIcon from '../Svgs/frontSelfieIcon';
 import ScanningLine from '../Svgs/scanningLine';
 
@@ -20,7 +20,7 @@ interface OrientationVideoCaptureEnhancedProps {
   config?: Partial<OrientationVideoConfig>;
   onComplete: (result: any) => void;
   onError: (error: string) => void;
-  kycService: KYCService;
+  kycService: typeof kycService;
 }
 
 const defaultConfig: OrientationVideoConfig = {

package/src/components/KYCElements/OrientationVideoCaptureFinal.tsx

@@ -11,14 +11,14 @@ import {
 import Svg, { Rect, Path, Mask, Defs } from 'react-native-svg';
 import { EnhancedCameraView } from '../EnhancedCameraView';
 import { OrientationVideoConfig, OrientationVideoState } from '../../types/KYC.types';
-import KYCService from '../../modules/api/KYCService';
 import SideSelfieIcon from '../Svgs/sideSelfieIcon';
+import kycService from '../../modules/api/KYCService';
 
 interface OrientationVideoCaptureFinalProps {
   config?: Partial<OrientationVideoConfig>;
   onComplete: (result: any) => void;
   onError: (error: string) => void;
-  kycService: KYCService;
+  kycService: typeof kycService;
 }
 
 const defaultConfig: OrientationVideoConfig = {

package/src/components/KYCElements/ReviewSubmitTemplate.tsx

@@ -0,0 +1,201 @@
+import React, { useMemo } from 'react';
+import { View, Text, StyleSheet, TouchableOpacity, ScrollView } from 'react-native';
+import { TemplateComponent } from '../../types/KYC.types';
+import { useTemplateKYCFlowContext } from '../../hooks/useTemplateKYCFlow';
+import { useI18n } from '../../hooks/useI18n';
+
+interface ReviewSubmitTemplateProps {
+  component: TemplateComponent;
+  value: unknown;
+  onValueChange: (data: unknown) => void;
+  error?: string;
+  language?: string;
+}
+
+export const ReviewSubmitTemplate: React.FC<ReviewSubmitTemplateProps> = () => {
+  const { t } = useI18n();
+  const { state, actions, getLocalizedText } = useTemplateKYCFlowContext();
+
+  const idSection = useMemo(() => {
+    const idComp = state.template.components.find(c => c.type === 'id_card');
+    return idComp ? state.componentData[idComp.id] : null;
+  }, [state.template.components, state.componentData]);
+
+  // Helper to coerce possibly-nested localized configs into the expected shape
+  const coerceLocalized = (value: any, fallback: { en: string; fr: string }) => {
+    if (value && typeof value === 'object') {
+      if (typeof value.en === 'string' || typeof value.fr === 'string') {
+        return {
+          en: typeof value.en === 'string' ? value.en : fallback.en,
+          fr: typeof value.fr === 'string' ? value.fr : fallback.fr,
+          ...value,
+        } as { [key: string]: string; en: string; fr: string };
+      }
+    }
+    return fallback;
+  };
+
+  // const reviewComp = useMemo(() => {
+  //   return state.template.components.find(c => c.type === 'review_submit');
+  // }, [state.template.components]);
+
+  const dynamicComponents = useMemo(() => {
+    return state.template.components.filter(c => c.type !== 'review_submit' && c.type !== 'verification_progress');
+  }, [state.template.components]);
+
+  const handleSubmit = async () => {
+    await actions.nextComponent();
+  };
+
+  return (
+    <View style={styles.container}>
+      <Text style={styles.title}>{t('kyc.reviewSubmit.title')}</Text>
+      <Text style={styles.subtitle}>{t('kyc.reviewSubmit.subtitle')}</Text>
+
+      <ScrollView contentContainerStyle={styles.scrollContent}>
+        {dynamicComponents.map((comp) => {
+          const compData = state.componentData[comp.id] || {};
+          const isCompleted = state.completedComponents.includes(comp.id);
+          if (comp.type === 'id_card') {
+            const hasFront = !!(compData.front || compData.front_base64 || compData.front_mrz);
+            const hasBack = !!(compData.back || compData.back_base64 || compData.back_mrz);
+            return (
+              <View key={comp.id} style={styles.section}>
+                <Text style={styles.sectionTitle}>{t('kyc.reviewSubmit.documentInfo')}</Text>
+                <View style={styles.row}>
+                  <View style={[styles.tile, hasFront ? styles.active : null]}>
+                    <Text style={styles.tileLabel}>{t('kyc.idCardCapture.frontSide')}</Text>
+                    {hasFront ? <Text style={styles.check}>✓</Text> : null}
+                  </View>
+                  <View style={[styles.tile, hasBack ? styles.active : null]}>
+                    <Text style={styles.tileLabel}>{t('kyc.idCardCapture.backSide')}</Text>
+                    {hasBack ? <Text style={styles.check}>✓</Text> : null}
+                  </View>
+                </View>
+                {idSection?.documentType ? (
+                  <Text style={styles.caption}>{idSection.documentType}</Text>
+                ) : null}
+              </View>
+            );
+          }
+          if (comp.type === 'selfie') {
+            const orientations = ((comp.config as any)?.orientations || ['center', 'right', 'left']) as string[];
+            return (
+              <View key={comp.id} style={styles.section}>
+                <Text style={styles.sectionTitle}>{t('kyc.selfieCapture.title')}</Text>
+                <View style={styles.row}>
+                  {orientations.map((o) => {
+                    const has = !!compData[o];
+                    const colorStyle = o === 'center' ? styles.pink : o === 'right' ? styles.blue : styles.purple;
+                    return (
+                      <View key={o} style={[styles.tile, colorStyle, has ? styles.active : null]}>
+                        <Text style={styles.tileLabel}>{o.charAt(0).toUpperCase() + o.slice(1)}</Text>
+                        {has ? <Text style={styles.check}>✓</Text> : null}
+                      </View>
+                    );
+                  })}
+                </View>
+                <Text style={styles.caption}>{t('kyc.selfieCapture.success')}</Text>
+              </View>
+            );
+          }
+          // Generic fallback for other component types
+          return (
+            <View key={comp.id} style={styles.section}>
+              <Text style={styles.sectionTitle}>{getLocalizedText(coerceLocalized(comp.labels, { en: comp.type, fr: comp.type }))}</Text>
+              <Text style={styles.caption}>{isCompleted ? t('common.success') : t('kyc.verificationProgress.status.pending')}</Text>
+            </View>
+          );
+        })}
+      </ScrollView>
+
+      <TouchableOpacity style={[styles.button, styles.primary]} onPress={handleSubmit}>
+        <Text style={styles.buttonText}>{t('kyc.reviewSubmit.submitButton')}</Text>
+      </TouchableOpacity>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    width: '100%',
+    paddingHorizontal: 16,
+    paddingVertical: 12,
+  },
+  title: {
+    fontSize: 24,
+    fontWeight: 'bold',
+    color: '#111827',
+    marginBottom: 4,
+  },
+  subtitle: {
+    fontSize: 14,
+    color: '#6B7280',
+    marginBottom: 16,
+  },
+  section: {
+    backgroundColor: 'white',
+    borderRadius: 16,
+    padding: 16,
+    marginBottom: 16,
+  },
+  sectionTitle: {
+    fontSize: 18,
+    fontWeight: '700',
+    color: '#111827',
+    marginBottom: 12,
+  },
+  scrollContent: {
+    paddingBottom: 24,
+  },
+  row: {
+    flexDirection: 'row',
+    gap: 12,
+  },
+  tile: {
+    flex: 1,
+    height: 110,
+    borderRadius: 16,
+    backgroundColor: '#F3F4F6',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  tileLabel: {
+    fontSize: 14,
+    color: '#111827',
+    marginBottom: 8,
+  },
+  check: {
+    fontSize: 18,
+    color: '#10B981',
+    fontWeight: '700',
+  },
+  active: {
+    backgroundColor: '#DDE9FF',
+  },
+  pink: { backgroundColor: '#FDE2E7' },
+  blue: { backgroundColor: '#DDE9FF' },
+  purple: { backgroundColor: '#EDE2FF' },
+  caption: {
+    marginTop: 10,
+    fontSize: 12,
+    color: '#6B7280',
+  },
+  button: {
+    paddingVertical: 14,
+    borderRadius: 10,
+    alignItems: 'center',
+    marginTop: 12,
+  },
+  primary: {
+    backgroundColor: '#2DBD60',
+  },
+  buttonText: {
+    color: 'white',
+    fontSize: 16,
+    fontWeight: '600',
+  },
+});
+
+