@transfergratis/react-native-sdk 0.1.24 → 0.1.26

package/plugin.js

@@ -1,13 +1,18 @@
 const withVisionCamera = require('./plugin/build/withVisionCamera').default;
 const withLocation = require('./plugin/build/withLocation').default;
+const withRemovePermissions = require('./plugin/build/withRemovePermissions').default;
 
-// Combine both plugins
+// Combine all plugins
 const withCombinedPlugins = (config, props = {}) => {
   const { visionCamera = {}, location = {} } = props;
   
+  // First apply feature plugins
   config = withVisionCamera(config, visionCamera);
   config = withLocation(config, location);
   
+  // Then remove unwanted permissions (must be last to clean up any permissions added by dependencies)
+  config = withRemovePermissions(config);
+  
   return config;
 };
 

package/src/components/EnhancedCameraView.web.tsx

@@ -27,6 +27,7 @@ export const EnhancedCameraView: React.FC<EnhancedCameraViewProps> = ({
   videoDuration = 10,
   onSilentCapture,
   silentCaptureResult,
+  captureStabilizationDelayMs = 2500,
 }) => {
   const { t } = useI18n();
   
@@ -63,6 +64,24 @@ export const EnhancedCameraView: React.FC<EnhancedCameraViewProps> = ({
     };
   }, [stream]);
 
+  // Build video constraints for quality (min + ideal improve Android/Samsung web quality; higher ideal for documents)
+  const getVideoConstraints = useCallback((): MediaTrackConstraints => {
+    const isHigh = quality === 'high';
+    const isMedium = quality === 'medium';
+    return {
+      facingMode: cameraType === 'front' ? 'user' : 'environment',
+      // min forces Android Chrome to use at least this resolution (avoids 640x480 default)
+      width: {
+        min: isHigh ? 1280 : isMedium ? 960 : 640,
+        ideal: isHigh ? 2560 : isMedium ? 1280 : 640,
+      },
+      height: {
+        min: isHigh ? 720 : isMedium ? 540 : 480,
+        ideal: isHigh ? 1440 : isMedium ? 720 : 480,
+      },
+    };
+  }, [cameraType, quality]);
+
   const checkPermissions = async () => {
     try {
       if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
@@ -70,8 +89,11 @@ export const EnhancedCameraView: React.FC<EnhancedCameraViewProps> = ({
         return;
       }
 
-      // Test camera permission
-      const stream = await navigator.mediaDevices.getUserMedia({ video: true });
+      // Use same constraints as startCamera so Android Chrome doesn't cache low resolution (e.g. 640x480)
+      const stream = await navigator.mediaDevices.getUserMedia({
+        video: getVideoConstraints(),
+        audio: enableVideo,
+      });
       stream.getTracks().forEach(track => track.stop());
 
       setHasPermission(true);
@@ -88,16 +110,32 @@ export const EnhancedCameraView: React.FC<EnhancedCameraViewProps> = ({
         stream.getTracks().forEach(track => track.stop());
       }
 
-      const constraints = {
-        video: {
-          facingMode: cameraType === 'front' ? 'user' : 'environment',
-          width: { ideal: quality === 'high' ? 1920 : quality === 'medium' ? 1280 : 640 },
-          height: { ideal: quality === 'high' ? 1080 : quality === 'medium' ? 720 : 480 },
-        },
+      const constraints: MediaStreamConstraints = {
+        video: getVideoConstraints(),
         audio: enableVideo,
       };
 
-      const newStream = await navigator.mediaDevices.getUserMedia(constraints);
+      let newStream: MediaStream;
+      try {
+        newStream = await navigator.mediaDevices.getUserMedia(constraints);
+      } catch (err) {
+        const name = err instanceof Error ? err.name : '';
+        // On some Android devices, min constraints can fail; fallback to ideal only
+        if (name === 'OverconstrainedError') {
+          const fallbackConstraints: MediaStreamConstraints = {
+            video: {
+              facingMode: cameraType === 'front' ? 'user' : 'environment',
+              width: { ideal: quality === 'high' ? 2560 : quality === 'medium' ? 1280 : 640 },
+              height: { ideal: quality === 'high' ? 1440 : quality === 'medium' ? 720 : 480 },
+            },
+            audio: enableVideo,
+          };
+          newStream = await navigator.mediaDevices.getUserMedia(fallbackConstraints);
+        } else {
+          throw err;
+        }
+      }
+
       setStream(newStream);
 
       if (videoRef.current) {
@@ -159,11 +197,19 @@ export const EnhancedCameraView: React.FC<EnhancedCameraViewProps> = ({
       canvas.width = video.videoWidth;
       canvas.height = video.videoHeight;
 
-      // Draw the current video frame to canvas
-      context.drawImage(video, 0, 0);
+      // For front camera: draw flipped so captured image matches non-mirrored preview (no mirror confusion)
+      if (cameraType === 'front') {
+        context.save();
+        context.translate(canvas.width, 0);
+        context.scale(-1, 1);
+        context.drawImage(video, 0, 0);
+        context.restore();
+      } else {
+        context.drawImage(video, 0, 0);
+      }
 
-      // Convert to base64
-      const imageDataUrl = canvas.toDataURL('image/jpeg', 0.8);
+      // Convert to base64 (0.95 for document/ID capture clarity; backend can exploit text better)
+      const imageDataUrl = canvas.toDataURL('image/jpeg', 0.95);
 
       onSilentCapture?.({
         success: true,
@@ -176,21 +222,29 @@ export const EnhancedCameraView: React.FC<EnhancedCameraViewProps> = ({
         error: error instanceof Error ? error.message : 'Failed to capture photo',
       });
     }
-  }, [isInitialized, onError, onSilentCapture]);
+  }, [isInitialized, cameraType, onError, onSilentCapture]);
 
 
-  // Automatically take a silent photo every 5 seconds when ready
+  // Stabilization delay then auto-capture every 5s; stop as soon as capture is validated (no more new captures)
   useEffect(() => {
-    if (!showCamera || !isInitialized) {
+    if (!showCamera || !isInitialized || silentCaptureResult?.success) {
       return;
     }
 
-    const intervalId = setInterval(() => {
+    const delayMs = Math.max(0, captureStabilizationDelayMs);
+    const intervalMs = 5000;
+    let intervalId: ReturnType<typeof setInterval> | null = null;
+
+    const timeoutId = setTimeout(() => {
       captureSilentPhoto();
-    }, 5000);
+      intervalId = setInterval(captureSilentPhoto, intervalMs);
+    }, delayMs);
 
-    return () => clearInterval(intervalId);
-  }, [showCamera, isInitialized, captureSilentPhoto]);
+    return () => {
+      clearTimeout(timeoutId);
+      if (intervalId) clearInterval(intervalId);
+    };
+  }, [showCamera, isInitialized, captureStabilizationDelayMs, captureSilentPhoto, silentCaptureResult?.success]);
 
   const startVideoRecording = useCallback(async () => {
     try {
@@ -299,7 +353,7 @@ export const EnhancedCameraView: React.FC<EnhancedCameraViewProps> = ({
 
   return (
     <View style={[styles.container, style]}>
-      {/* Video element */}
+      {/* Video element; no mirror for front camera so preview matches final photo and doesn't confuse users */}
       <video
         ref={videoRef}
         style={{
@@ -307,6 +361,7 @@ export const EnhancedCameraView: React.FC<EnhancedCameraViewProps> = ({
           width: '100%',
           height: '100%',
           objectFit: 'cover',
+          transform: cameraType === 'front' ? 'scaleX(-1)' : undefined,
         }}
         autoPlay
         playsInline

package/src/components/KYCElements/AdditionalDocumentsTemplate.tsx

@@ -0,0 +1,346 @@
+import React, { useState } from 'react';
+import { View, Text, StyleSheet, TouchableOpacity, ScrollView, Image } from 'react-native';
+import { TemplateComponent, AdditionalDocumentsConfig, LocalizedText } from '../../types/KYC.types';
+import { useTemplateKYCFlowContext } from '../../hooks/useTemplateKYCFlow';
+import { useI18n } from '../../hooks/useI18n';
+import { Button } from '../ui/Button';
+import NativeCameraModule from '../../modules/camera/NativeCameraModule';
+import { useKYCStore } from '../../stores/kycStore';
+import { showAlert } from '../../utils/platformAlert';
+
+interface AdditionalDocumentsTemplateProps {
+    component: TemplateComponent;
+    value?: any;
+    onValueChange: (data: any) => void;
+    error?: string;
+    language?: string;
+}
+
+interface UploadedFile {
+    uri: string;
+    path: string;
+    name: string;
+    size: number;
+}
+
+export const AdditionalDocumentsTemplate: React.FC<AdditionalDocumentsTemplateProps> = ({
+    component,
+    value,
+    onValueChange,
+    error,
+    language = 'en',
+}) => {
+    const { actions, getLocalizedText } = useTemplateKYCFlowContext();
+    const { t } = useI18n();
+    const { setProcessing } = useKYCStore();
+    const config = component.config as AdditionalDocumentsConfig;
+
+    // State
+    const [uploadedFiles, setUploadedFiles] = useState<UploadedFile[]>([]);
+    const [isUploading, setIsUploading] = useState(false);
+
+    const title = getLocalizedText(component.labels as LocalizedText);
+    const instructions = getLocalizedText(component.instructions as LocalizedText);
+    const buttonText = getLocalizedText((component.ui as any).buttonText) || t('common.continue');
+
+    // Parse max size from config string (e.g. "5MB" -> bytes)
+    const parseMaxSize = (sizeStr: string): number => {
+        if (!sizeStr) return 10 * 1024 * 1024; // Default 10MB
+        const value = parseFloat(sizeStr);
+        if (sizeStr.toLowerCase().includes('kb')) return value * 1024;
+        if (sizeStr.toLowerCase().includes('gb')) return value * 1024 * 1024 * 1024;
+        return value * 1024 * 1024; // Default to MB if only number or MB
+    };
+
+    const maxSizeBytes = parseMaxSize(config.maxSizeEach);
+    const maxFiles = config.maxDocuments || 3;
+
+    const pickDocument = async () => {
+        if (uploadedFiles.length >= maxFiles) {
+            showAlert(
+                t('common.limitReached') || 'Limit Reached',
+                t('errors.maxFilesReached', { max: maxFiles }) || `You can only upload ${maxFiles} files.`
+            );
+            return;
+        }
+
+        try {
+            setIsUploading(true);
+            setProcessing(true);
+
+            // Default allowed types since AdditionalDocumentsConfig structure is complex for categories
+            const allowedTypes = ['application/pdf', 'image/jpeg', 'image/png'];
+
+            const result = await NativeCameraModule.openFilePicker(allowedTypes);
+
+            if (result.success && result.uri && result.path) {
+                const fileName = result.path.split('/').pop() || 'Document';
+                const fileSize = (result as any).size || 0;
+
+                if (fileSize > maxSizeBytes) {
+                    showAlert(
+                        t('errors.fileTooLarge') || 'File too large',
+                        t('errors.maxFileSize', { size: config.maxSizeEach }) || `Max file size is ${config.maxSizeEach}`
+                    );
+                    return;
+                }
+
+                const newFile: UploadedFile = {
+                    uri: result.uri,
+                    path: result.path,
+                    name: fileName,
+                    size: fileSize
+                };
+
+                const updatedFiles = [...uploadedFiles, newFile];
+                setUploadedFiles(updatedFiles);
+                onValueChange({ documents: updatedFiles }); // Matching expected data structure
+            } else if (result.error) {
+                // Ignore cancellation errors or show generic if needed
+                if (result.error !== 'Canceled') {
+                    showAlert(t('common.error') || 'Error', result.error);
+                }
+            }
+        } catch (error) {
+            console.error('Error selecting file:', error);
+            showAlert(t('common.error') || 'Error', t('errors.unknownError') || 'Failed to select file');
+        } finally {
+            setIsUploading(false);
+            setProcessing(false);
+        }
+    };
+
+    const removeFile = (index: number) => {
+        const updatedFiles = uploadedFiles.filter((_, i) => i !== index);
+        setUploadedFiles(updatedFiles);
+        onValueChange({ documents: updatedFiles });
+    };
+
+    const handleContinue = () => {
+        actions.nextComponent();
+    };
+
+    // Helpers for UI
+    const getFileIcon = (fileName: string) => {
+        const extension = fileName.split('.').pop()?.toLowerCase();
+        switch (extension) {
+            case 'pdf': return '📄';
+            case 'jpg':
+            case 'jpeg':
+            case 'png': return '🖼️';
+            default: return '📎';
+        }
+    };
+
+    const isImageFile = (fileName: string): boolean => {
+        const extension = fileName.split('.').pop()?.toLowerCase();
+        return ['jpg', 'jpeg', 'png', 'webp'].includes(extension || '');
+    };
+
+    const formatFileSize = (bytes: number): string => {
+        if (bytes === 0) return '0 Bytes';
+        const k = 1024;
+        const sizes = ['Bytes', 'KB', 'MB', 'GB'];
+        const i = Math.floor(Math.log(bytes) / Math.log(k));
+        return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
+    };
+
+    return (
+        <View style={styles.container}>
+            <Text style={styles.title}>{title}</Text>
+            <Text style={styles.instructions}>{instructions}</Text>
+
+            <View style={styles.uploadArea}>
+                <TouchableOpacity
+                    style={[
+                        styles.uploadButton,
+                        isUploading && styles.uploadButtonDisabled,
+                        { borderColor: component.ui.themeColor as string || '#2DBD60' }
+                    ]}
+                    onPress={pickDocument}
+                    disabled={isUploading}
+                >
+                    <Text style={styles.uploadIcon}>📁</Text>
+                    <Text style={[
+                        styles.uploadText,
+                        { color: component.ui.themeColor as string || '#2DBD60' }
+                    ]}>
+                        {isUploading ? (t('common.processing') || 'Processing...') : (t('kyc.additionalDocs.add') || 'Select Files')}
+                    </Text>
+                    <Text style={styles.uploadSubtext}>
+                        {t('kyc.additionalDocs.maxSize', { size: config.maxSizeEach }) || `Max size: ${config.maxSizeEach}`}
+                    </Text>
+                </TouchableOpacity>
+            </View>
+
+            {uploadedFiles.length > 0 && (
+                <View style={styles.filesContainer}>
+                    <Text style={styles.subTitle}>
+                        {t('kyc.additionalDocs.uploaded') || 'Uploaded Documents'} ({uploadedFiles.length}/{maxFiles})
+                    </Text>
+                    <ScrollView style={styles.filesList} showsVerticalScrollIndicator={false}>
+                        {uploadedFiles.map((file, index) => (
+                            <View key={index} style={styles.fileItem}>
+                                {isImageFile(file.name) ? (
+                                    <Image source={{ uri: file.uri }} style={styles.fileThumbnail} />
+                                ) : (
+                                    <View style={styles.fileIcon}>
+                                        <Text style={styles.fileIconText}>{getFileIcon(file.name)}</Text>
+                                    </View>
+                                )}
+                                <View style={styles.fileInfo}>
+                                    <Text style={styles.fileName} numberOfLines={1}>{file.name}</Text>
+                                    <Text style={styles.fileSize}>{formatFileSize(file.size)}</Text>
+                                </View>
+                                <TouchableOpacity
+                                    style={styles.removeButton}
+                                    onPress={() => removeFile(index)}
+                                >
+                                    <Text style={styles.removeButtonText}>✕</Text>
+                                </TouchableOpacity>
+                            </View>
+                        ))}
+                    </ScrollView>
+                </View>
+            )}
+
+            {error && <Text style={styles.errorText}>{error}</Text>}
+
+            <Button
+                title={buttonText}
+                onPress={handleContinue}
+                fullWidth
+                style={styles.button}
+                disabled={config.required && uploadedFiles.length < (config.minDocuments || 1)}
+            />
+        </View>
+    );
+};
+
+const styles = StyleSheet.create({
+    container: {
+        padding: 20,
+        backgroundColor: 'white',
+        borderRadius: 12,
+        margin: 16,
+        shadowColor: '#000',
+        shadowOffset: { width: 0, height: 2 },
+        shadowOpacity: 0.1,
+        shadowRadius: 4,
+        elevation: 3,
+        width: '95%',
+    },
+    title: {
+        fontSize: 22,
+        fontWeight: 'bold',
+        marginBottom: 10,
+        color: '#333',
+    },
+    instructions: {
+        fontSize: 16,
+        color: '#666',
+        marginBottom: 20,
+        lineHeight: 22,
+    },
+    subTitle: {
+        fontSize: 16,
+        fontWeight: '600',
+        marginBottom: 10,
+        color: '#333',
+    },
+    uploadArea: {
+        marginBottom: 20,
+    },
+    uploadButton: {
+        borderWidth: 2,
+        borderStyle: 'dashed',
+        borderRadius: 12,
+        padding: 24,
+        alignItems: 'center',
+        backgroundColor: '#f0f9f0',
+    },
+    uploadButtonDisabled: {
+        opacity: 0.6,
+    },
+    uploadIcon: {
+        fontSize: 32,
+        marginBottom: 8,
+    },
+    uploadText: {
+        fontSize: 16,
+        fontWeight: '600',
+        marginBottom: 4,
+    },
+    uploadSubtext: {
+        fontSize: 12,
+        color: '#666',
+    },
+    filesContainer: {
+        flex: 1,
+        marginBottom: 10,
+    },
+    filesList: {
+        maxHeight: 200,
+    },
+    fileItem: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        padding: 10,
+        backgroundColor: '#f9f9f9',
+        borderRadius: 8,
+        marginBottom: 8,
+        borderWidth: 1,
+        borderColor: '#eee',
+    },
+    fileThumbnail: {
+        width: 36,
+        height: 36,
+        borderRadius: 4,
+        marginRight: 10,
+    },
+    fileIcon: {
+        width: 36,
+        height: 36,
+        borderRadius: 4,
+        backgroundColor: '#eee',
+        justifyContent: 'center',
+        alignItems: 'center',
+        marginRight: 10,
+    },
+    fileIconText: {
+        fontSize: 18,
+    },
+    fileInfo: {
+        flex: 1,
+    },
+    fileName: {
+        fontSize: 14,
+        fontWeight: '500',
+        color: '#333',
+    },
+    fileSize: {
+        fontSize: 12,
+        color: '#888',
+    },
+    removeButton: {
+        width: 24,
+        height: 24,
+        borderRadius: 12,
+        backgroundColor: '#ff4444',
+        justifyContent: 'center',
+        alignItems: 'center',
+        marginLeft: 8,
+    },
+    removeButtonText: {
+        color: 'white',
+        fontSize: 12,
+        fontWeight: 'bold',
+    },
+    errorText: {
+        color: 'red',
+        marginBottom: 10,
+    },
+    button: {
+        marginTop: 10,
+    },
+});