@transfergratis/react-native-sdk 0.1.23 → 0.1.25

package/src/components/KYCElements/PhoneVerificationTemplate.tsx

@@ -0,0 +1,253 @@
+import React, { useState } from 'react';
+import { View, Text, StyleSheet, TextInput, TouchableOpacity, Alert } from 'react-native';
+import { TemplateComponent, LocalizedText } from '../../types/KYC.types';
+import { useTemplateKYCFlowContext } from '../../hooks/useTemplateKYCFlow';
+import { useI18n } from '../../hooks/useI18n';
+import { Button } from '../ui/Button';
+
+interface PhoneVerificationTemplateProps {
+    component: TemplateComponent;
+    value?: any;
+    onValueChange: (data: any) => void;
+    error?: string;
+    language?: string;
+}
+
+type VerificationStep = 'phone' | 'otp';
+
+export const PhoneVerificationTemplate: React.FC<PhoneVerificationTemplateProps> = ({
+    component,
+    value,
+    onValueChange,
+    error: propError,
+}) => {
+    const { actions, getLocalizedText } = useTemplateKYCFlowContext();
+    const { t } = useI18n();
+    // const config = component.config as PhoneVerificationConfig;
+
+    // State
+    const [step, setStep] = useState<VerificationStep>('phone');
+    const [phone, setPhone] = useState('');
+    const [otp, setOtp] = useState('');
+    const [localError, setLocalError] = useState<string | null>(null);
+    const [isSimulating, setIsSimulating] = useState(false);
+
+    const title = getLocalizedText(component.labels as LocalizedText);
+    const instructions = getLocalizedText(component.instructions as LocalizedText);
+
+    // Determine button text based on step
+    const verifyButtonText = getLocalizedText((component.ui as any).buttonText) || t('common.verify') || 'Verify';
+    const sendButtonText = t('common.sendCode') || 'Send Verification Code';
+    const buttonText = step === 'phone' ? sendButtonText : verifyButtonText;
+
+    const handleSendCode = () => {
+        if (!phone || phone.length < 5) {
+            setLocalError(t('errors.invalidPhone') || 'Please enter a valid phone number');
+            return;
+        }
+
+        setLocalError(null);
+        setIsSimulating(true);
+
+        // Simulate API call to send code
+        setTimeout(() => {
+            setIsSimulating(false);
+            setStep('otp');
+        }, 1500);
+    };
+
+    const handleVerifyCode = () => {
+        if (!otp || otp.length < 4) {
+            setLocalError(t('errors.invalidCode') || 'Please enter the 6-digit code');
+            return;
+        }
+
+        setLocalError(null);
+        setIsSimulating(true);
+
+        // Simulate verification API
+        setTimeout(() => {
+            setIsSimulating(false);
+
+            // Mock validation logic
+            if (otp === '123456') {
+                onValueChange({ phone, otp, verified: true });
+                actions.nextComponent();
+            } else {
+                setLocalError(t('errors.wrongCode') || 'Invalid verification code. Try 123456');
+            }
+        }, 1500);
+    };
+
+    const onChangePhone = (text: string) => {
+        setPhone(text);
+        if (localError) setLocalError(null);
+    };
+
+    const onChangeOtp = (text: string) => {
+        setOtp(text);
+        if (localError) setLocalError(null);
+    };
+
+    const handleBackToPhone = () => {
+        setStep('phone');
+        setOtp('');
+        setLocalError(null);
+    };
+
+    return (
+        <View style={styles.container}>
+            <Text style={styles.title}>{title}</Text>
+            <Text style={styles.instructions}>
+                {step === 'phone' ? instructions : (t('kyc.enterCodeSent') || `Please enter the code sent to ${phone}`)}
+            </Text>
+
+            <View style={styles.contentContainer}>
+                {step === 'phone' ? (
+                    <View style={styles.inputContainer}>
+                        <Text style={styles.label}>{t('common.phone') || 'Phone Number'}</Text>
+                        <TextInput
+                            style={styles.input}
+                            placeholder="+1234567890"
+                            value={phone}
+                            onChangeText={onChangePhone}
+                            keyboardType="phone-pad"
+                            autoComplete="tel"
+                            editable={!isSimulating}
+                        />
+                    </View>
+                ) : (
+                    <View style={styles.inputContainer}>
+                        <Text style={styles.label}>{t('common.verificationCode') || 'Verification Code'}</Text>
+                        <TextInput
+                            style={styles.input}
+                            placeholder="123456"
+                            value={otp}
+                            onChangeText={onChangeOtp}
+                            keyboardType="number-pad"
+                            maxLength={6}
+                            editable={!isSimulating}
+                        />
+                        <TouchableOpacity onPress={handleBackToPhone} style={styles.changeLink}>
+                            <Text style={styles.changeText}>{t('common.back') || 'Change number'}</Text>
+                        </TouchableOpacity>
+                    </View>
+                )}
+
+                {(localError || propError) && (
+                    <Text style={styles.errorText}>{localError || propError}</Text>
+                )}
+
+                <Button
+                    title={isSimulating ? (t('common.processing') || 'Processing...') : buttonText}
+                    onPress={step === 'phone' ? handleSendCode : handleVerifyCode}
+                    style={styles.button}
+                    disabled={
+                        isSimulating ||
+                        (step === 'phone' ? !phone : !otp)
+                    }
+                />
+
+                {step === 'otp' && (
+                    <TouchableOpacity
+                        onPress={() => {
+                            // Resend logic
+                            Alert.alert(
+                                t('common.codeResent') || 'Code Resent',
+                                t('common.codeResentMessage', { email: phone }) || 'Code resent to ' + phone
+                            );
+                        }}
+                        style={styles.resendButton}
+                        disabled={isSimulating}
+                    >
+                        <Text style={styles.resendText}>{t('common.resendCode') || 'Resend Code'}</Text>
+                    </TouchableOpacity>
+                )}
+            </View>
+        </View>
+    );
+};
+
+const styles = StyleSheet.create({
+    container: {
+        padding: 24,
+        backgroundColor: 'white',
+        borderRadius: 16,
+        margin: 16,
+        shadowColor: '#000',
+        shadowOffset: { width: 0, height: 4 },
+        shadowOpacity: 0.1,
+        shadowRadius: 12,
+        elevation: 5,
+        width: '95%',
+    },
+    title: {
+        fontSize: 24,
+        fontWeight: '700',
+        marginBottom: 8,
+        color: '#1a1a1a',
+        textAlign: 'center',
+    },
+    instructions: {
+        fontSize: 16,
+        color: '#666',
+        marginBottom: 32,
+        lineHeight: 24,
+        textAlign: 'center',
+    },
+    contentContainer: {
+        // width: '100%',
+    },
+    inputContainer: {
+        marginBottom: 24,
+    },
+    label: {
+        fontSize: 14,
+        fontWeight: '600',
+        color: '#333',
+        marginBottom: 8,
+        marginLeft: 4,
+    },
+    input: {
+        borderWidth: 1,
+        borderColor: '#e0e0e0',
+        padding: 16,
+        borderRadius: 12,
+        fontSize: 16,
+        backgroundColor: '#f8f9fa',
+        color: '#333',
+    },
+    errorText: {
+        color: '#dc2626',
+        marginBottom: 16,
+        fontSize: 14,
+        textAlign: 'center',
+        backgroundColor: '#fee2e2',
+        padding: 8,
+        borderRadius: 8,
+        overflow: 'hidden',
+    },
+    button: {
+        height: 50,
+        borderRadius: 12,
+        width: "100%"
+    },
+    changeLink: {
+        alignSelf: 'flex-end',
+        marginTop: 8,
+    },
+    changeText: {
+        color: '#2DBD60',
+        fontSize: 14,
+        fontWeight: '500',
+    },
+    resendButton: {
+        marginTop: 16,
+        alignItems: 'center',
+    },
+    resendText: {
+        color: '#666',
+        fontSize: 14,
+        textDecorationLine: 'underline',
+    },
+});

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 { actions, state, } = useTemplateKYCFlowContext();
+  // const config = component.config as SelfieConfig;
+  const orientations: OrientationType[] = (['center','left','right']) as OrientationType[];
+  const { actions, state, env } = 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);
     }
@@ -150,10 +152,13 @@ export const SelfieCaptureTemplate: React.FC<SelfieCaptureTemplateProps> = ({
     }
     if (result.success && result.path) {
       setSilentCaptureResult((prev) => ({ ...prev, isAnalyzing: true, success: false, error: '' }));
-      selfieVerification(result.path).then((response) => {
+      selfieVerification(result.path, env).then((response) => {
         if (response.length > 0) {
           const res = response[0];
-          if (res?.orientation_direction === getOrientationOpposite(currentOrientation) && res?.capture) {
+          // In SANDBOX mode, always accept the result regardless of orientation
+          if (env === 'SANDBOX' && res?.capture) {
+            setSilentCaptureResult((prev) => ({ ...prev, isAnalyzing: false, success: true, error: '', path: result.path }));
+          } else if (res?.orientation_direction === getOrientationOpposite(currentOrientation) && res?.capture) {
             setSilentCaptureResult((prev) => ({ ...prev, isAnalyzing: false, success: true, error: '', path: result.path }));
           } else {
             setSilentCaptureResult((prev) => ({ ...prev, isAnalyzing: false, success: false, error: 'Le selfie n\'est pas correct' }));
@@ -162,39 +167,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 +248,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 +262,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 +421,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 +464,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 +492,6 @@ const styles = StyleSheet.create({
   },
   camera: {
     flex: 1,
-    // borderRadius: 12,
     overflow: 'hidden',
   },
   attemptsText: {
@@ -414,7 +501,6 @@ const styles = StyleSheet.create({
     marginBottom: 10,
   },
   orientationsContainer: {
-    // flex: 1,
   },
   orientationContainer: {
     backgroundColor: 'white',
@@ -434,7 +520,6 @@ const styles = StyleSheet.create({
     fontSize: 18,
     fontWeight: '600',
     color: '#333',
-    // marginBottom: 12,
   },
   capturedImageContainer: {
     alignItems: 'center',
@@ -464,14 +549,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',
   },