@transfergratis/react-native-sdk 0.1.23 → 0.1.24

package/src/components/example/DynamicTemplateExample.tsx

@@ -0,0 +1,289 @@
+import React, { useState } from 'react';
+import { View, Text, StyleSheet, SafeAreaView, TextInput, TouchableOpacity, ScrollView } from 'react-native';
+import { TemplateKYCFlow } from '../TemplateKYCFlowRefactored';
+import { VerificationState } from '../../types/KYC.types';
+
+/**
+ * Example component demonstrating how to use dynamic template loading
+ * 
+ * This example shows two ways to use templates:
+ * 1. With templateId - loads template dynamically from backend API
+ * 2. With direct template object - uses hardcoded template (backward compatibility)
+ */
+export const DynamicTemplateExample: React.FC = () => {
+  const [templateId, setTemplateId] = useState<string>('');
+  const [apiKey, setApiKey] = useState<string>('');
+  const [showFlow, setShowFlow] = useState<boolean>(false);
+  const [language, setLanguage] = useState<'en' | 'fr'>('en');
+
+  const handleComplete = (data: VerificationState) => {
+    console.log('KYC Verification completed:', data);
+    setShowFlow(false);
+    alert('Verification completed successfully!');
+  };
+
+  const handleError = (error: string) => {
+    console.error('KYC Error:', error);
+    alert(`Error: ${error}`);
+    setShowFlow(false);
+  };
+
+  const handleCancel = () => {
+    console.log('KYC Flow cancelled');
+    setShowFlow(false);
+  };
+
+  const startFlow = () => {
+    if (!templateId.trim()) {
+      alert('Please enter a template ID');
+      return;
+    }
+    setShowFlow(true);
+  };
+
+  if (showFlow) {
+    return (
+      <SafeAreaView style={styles.container}>
+        <TemplateKYCFlow
+          templateId={templateId}
+          API_KEY={apiKey || undefined}
+          language={language}
+          onComplete={handleComplete}
+          onError={handleError}
+          onCancel={handleCancel}
+        />
+      </SafeAreaView>
+    );
+  }
+
+  return (
+    <SafeAreaView style={styles.container}>
+      <ScrollView style={styles.scrollView} contentContainerStyle={styles.content}>
+        <Text style={styles.title}>Dynamic Template KYC Example</Text>
+        <Text style={styles.subtitle}>
+          Load a KYC template dynamically from the backend API
+        </Text>
+
+        <View style={styles.section}>
+          <Text style={styles.label}>Template ID *</Text>
+          <TextInput
+            style={styles.input}
+            placeholder="e.g., free-style"
+            value={templateId}
+            onChangeText={setTemplateId}
+            autoCapitalize="none"
+            autoCorrect={false}
+          />
+          <Text style={styles.hint}>
+            Enter the template ID to load from the backend API
+          </Text>
+        </View>
+
+        <View style={styles.section}>
+          <Text style={styles.label}>API Key (Optional)</Text>
+          <TextInput
+            style={styles.input}
+            placeholder="Your API key"
+            value={apiKey}
+            onChangeText={setApiKey}
+            autoCapitalize="none"
+            autoCorrect={false}
+            secureTextEntry
+          />
+          <Text style={styles.hint}>
+            If not provided, the SDK will use token-based authentication
+          </Text>
+        </View>
+
+        <View style={styles.section}>
+          <Text style={styles.label}>Language</Text>
+          <View style={styles.languageContainer}>
+            <TouchableOpacity
+              style={[
+                styles.languageButton,
+                language === 'en' && styles.languageButtonActive,
+              ]}
+              onPress={() => setLanguage('en')}
+            >
+              <Text
+                style={[
+                  styles.languageButtonText,
+                  language === 'en' && styles.languageButtonTextActive,
+                ]}
+              >
+                English
+              </Text>
+            </TouchableOpacity>
+            <TouchableOpacity
+              style={[
+                styles.languageButton,
+                language === 'fr' && styles.languageButtonActive,
+              ]}
+              onPress={() => setLanguage('fr')}
+            >
+              <Text
+                style={[
+                  styles.languageButtonText,
+                  language === 'fr' && styles.languageButtonTextActive,
+                ]}
+              >
+                Français
+              </Text>
+            </TouchableOpacity>
+          </View>
+        </View>
+
+        <TouchableOpacity
+          style={[styles.button, !templateId.trim() && styles.buttonDisabled]}
+          onPress={startFlow}
+          disabled={!templateId.trim()}
+        >
+          <Text style={styles.buttonText}>Start KYC Verification</Text>
+        </TouchableOpacity>
+
+        <View style={styles.infoSection}>
+          <Text style={styles.infoTitle}>Usage Example:</Text>
+          <Text style={styles.code}>
+            {`<TemplateKYCFlow
+  templateId="free-style"
+  API_KEY="your-api-key"
+  language="fr"
+  onComplete={handleComplete}
+  onError={handleError}
+  onCancel={handleCancel}
+/>`}
+          </Text>
+        </View>
+
+        <View style={styles.infoSection}>
+          <Text style={styles.infoTitle}>Notes:</Text>
+          <Text style={styles.infoText}>
+            • Template ID is required to load from backend{'\n'}
+            • API Key is optional but recommended for production{'\n'}
+            • The SDK will automatically transform the backend template format to SDK format{'\n'}
+            • Templates are cached for 5 minutes to improve performance{'\n'}
+            • You can also use a direct template object for backward compatibility
+          </Text>
+        </View>
+      </ScrollView>
+    </SafeAreaView>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#f5f5f5',
+  },
+  scrollView: {
+    flex: 1,
+  },
+  content: {
+    padding: 20,
+    paddingBottom: 40,
+  },
+  title: {
+    fontSize: 24,
+    fontWeight: 'bold',
+    color: '#333',
+    marginBottom: 8,
+    textAlign: 'center',
+  },
+  subtitle: {
+    fontSize: 16,
+    color: '#666',
+    marginBottom: 32,
+    textAlign: 'center',
+  },
+  section: {
+    marginBottom: 24,
+  },
+  label: {
+    fontSize: 16,
+    fontWeight: '600',
+    color: '#333',
+    marginBottom: 8,
+  },
+  input: {
+    backgroundColor: 'white',
+    borderWidth: 1,
+    borderColor: '#ddd',
+    borderRadius: 8,
+    padding: 12,
+    fontSize: 16,
+    color: '#333',
+  },
+  hint: {
+    fontSize: 12,
+    color: '#999',
+    marginTop: 4,
+  },
+  languageContainer: {
+    flexDirection: 'row',
+    gap: 12,
+  },
+  languageButton: {
+    flex: 1,
+    padding: 12,
+    backgroundColor: 'white',
+    borderWidth: 1,
+    borderColor: '#ddd',
+    borderRadius: 8,
+    alignItems: 'center',
+  },
+  languageButtonActive: {
+    backgroundColor: '#2DBD60',
+    borderColor: '#2DBD60',
+  },
+  languageButtonText: {
+    fontSize: 16,
+    color: '#666',
+    fontWeight: '500',
+  },
+  languageButtonTextActive: {
+    color: 'white',
+    fontWeight: '600',
+  },
+  button: {
+    backgroundColor: '#2DBD60',
+    padding: 16,
+    borderRadius: 8,
+    alignItems: 'center',
+    marginTop: 8,
+    marginBottom: 32,
+  },
+  buttonDisabled: {
+    backgroundColor: '#ccc',
+  },
+  buttonText: {
+    color: 'white',
+    fontSize: 16,
+    fontWeight: '600',
+  },
+  infoSection: {
+    backgroundColor: 'white',
+    padding: 16,
+    borderRadius: 8,
+    marginBottom: 16,
+  },
+  infoTitle: {
+    fontSize: 16,
+    fontWeight: '600',
+    color: '#333',
+    marginBottom: 8,
+  },
+  code: {
+    fontFamily: 'monospace',
+    fontSize: 12,
+    color: '#555',
+    backgroundColor: '#f5f5f5',
+    padding: 12,
+    borderRadius: 4,
+    overflow: 'hidden',
+  },
+  infoText: {
+    fontSize: 14,
+    color: '#666',
+    lineHeight: 20,
+  },
+});

package/src/config/allowedDomains.ts

@@ -0,0 +1,152 @@
+/**
+ * Allowed domains configuration for callback URL validation
+ * These domains are permitted to receive KYC completion callbacks
+ */
+
+export interface AllowedDomainConfig {
+  domains: string[];
+  enforceHttps: boolean;
+  allowLocalhost: boolean;
+}
+
+// Default configuration - can be overridden via environment variables
+const DEFAULT_CONFIG: AllowedDomainConfig = {
+  domains: [
+    'transfergratis.com',
+    'www.transfergratis.com',
+    'admin.transfergratis.com',
+    'dashboard.transfergratis.com',
+    // Add other trusted domains here
+  ],
+  enforceHttps: true,
+  allowLocalhost: true, // Allow localhost for development
+};
+
+/**
+ * Get allowed domains from environment or use defaults
+ */
+export const getAllowedDomainsConfig = (): AllowedDomainConfig => {
+  // Check for environment variable override
+  if (typeof window !== 'undefined' && (window as any).KYC_ALLOWED_DOMAINS) {
+    const envDomains = (window as any).KYC_ALLOWED_DOMAINS;
+    if (Array.isArray(envDomains)) {
+      return {
+        ...DEFAULT_CONFIG,
+        domains: envDomains,
+      };
+    }
+  }
+
+  return DEFAULT_CONFIG;
+};
+
+/**
+ * Check if a domain is in the allowed list
+ */
+export const isDomainAllowed = (domain: string): boolean => {
+  const config = getAllowedDomainsConfig();
+  
+  // Allow localhost in development
+  if (config.allowLocalhost && (domain === 'localhost' || domain.startsWith('127.0.0.1'))) {
+    return true;
+  }
+
+  // Check if domain matches any in the allowed list
+  return config.domains.some(allowedDomain => {
+    // Exact match
+    if (domain === allowedDomain) {
+      return true;
+    }
+    
+    // Subdomain match (e.g., app.transfergratis.com matches transfergratis.com)
+    if (domain.endsWith('.' + allowedDomain)) {
+      return true;
+    }
+    
+    return false;
+  });
+};
+
+/**
+ * Validate if a URL is allowed for callback
+ */
+export const isCallbackUrlAllowed = (url: string): { allowed: boolean; reason?: string } => {
+  const config = getAllowedDomainsConfig();
+
+  try {
+    const urlObj = new URL(url);
+
+    // Check protocol
+    if (config.enforceHttps && urlObj.protocol !== 'https:') {
+      // Allow http for localhost in development
+      if (!(config.allowLocalhost && (urlObj.hostname === 'localhost' || urlObj.hostname.startsWith('127.0.0.1')))) {
+        return {
+          allowed: false,
+          reason: 'HTTPS required for callback URLs',
+        };
+      }
+    }
+
+    // Check domain
+    if (!isDomainAllowed(urlObj.hostname)) {
+      return {
+        allowed: false,
+        reason: `Domain '${urlObj.hostname}' is not in the allowed list`,
+      };
+    }
+
+    return { allowed: true };
+  } catch (error) {
+    return {
+      allowed: false,
+      reason: 'Invalid URL format',
+    };
+  }
+};
+
+/**
+ * Generate a signature for the callback URL parameters
+ * This can be used to verify the integrity of the callback
+ */
+export const generateCallbackSignature = async (
+  params: Record<string, string>,
+  secret?: string
+): Promise<string> => {
+  // Only generate signature if secret is provided
+  if (!secret) {
+    return '';
+  }
+
+  // Sort params for consistent signature
+  const sortedParams = Object.keys(params)
+    .sort()
+    .map(key => `${key}=${params[key]}`)
+    .join('&');
+
+  const data = `${sortedParams}:${secret}`;
+
+  // Use Web Crypto API for signature generation
+  if (typeof window !== 'undefined' && window.crypto && window.crypto.subtle) {
+    try {
+      const encoder = new TextEncoder();
+      const dataBuffer = encoder.encode(data);
+      const hashBuffer = await window.crypto.subtle.digest('SHA-256', dataBuffer);
+      const hashArray = Array.from(new Uint8Array(hashBuffer));
+      const hashHex = hashArray.map(b => b.toString(16).padStart(2, '0')).join('');
+      return hashHex;
+    } catch (error) {
+      console.error('Error generating signature:', error);
+      return '';
+    }
+  }
+
+  // Fallback: simple hash for environments without Web Crypto API
+  let hash = 0;
+  for (let i = 0; i < data.length; i++) {
+    const char = data.charCodeAt(i);
+    hash = ((hash << 5) - hash) + char;
+    hash = hash & hash;
+  }
+  return Math.abs(hash).toString(16);
+};
+

package/src/hooks/useTemplateKYCFlow.tsx

@@ -168,6 +168,9 @@ export const useTemplateKYCFlow = (
       case 'country_selection':
         // No direct backend action; pack into metadata of next actionable step
         return null;
+      case 'welcome':
+        // UI-only step, no backend action needed
+        return null;
       case 'initialization':
         return 'initialize_session';
       case 'verification_progress':
@@ -201,7 +204,7 @@ export const useTemplateKYCFlow = (
   const buildPayloadForComponent = useCallback((action: string | null, component: TemplateComponent, rawData: any, templateId: string, step: number) => {
     console.log('apiKey in buildPayloadForComponent', apiKey);
 
-    const base = { template_id: null, step: component.order, permissionGranted: true } as any;
+    const base = { template_id: templateId || null, templateId: templateId || null, step: component.order, permissionGranted: true } as any;
     if (!action) {
       return base;
     }
@@ -230,9 +233,12 @@ export const useTemplateKYCFlow = (
       const idCardID = Object.keys(state.componentData).find((c: string) => c === "1");
       if (idCardID) {
         const _idCardData = state.componentData[idCardID];
-        return { ...base, documents, country: _idCardData?.country || '', documentType: _idCardData?.documentType as GovernmentDocumentType || 'identity_card' };
+        const documentType = _idCardData?.documentType;
+        // Map national_id to identity_card for selfie capture
+        const mappedDocumentType = documentType === 'national_id' ? 'identity_card' : (documentType as GovernmentDocumentType || 'identity_card');
+        return { ...base, documents, country: _idCardData?.country || '', documentType: mappedDocumentType };
       }
-      // return { ...base, documents };
+      return { ...base, documents };
     }
 
     if (action === 'location_permission') {
@@ -371,6 +377,10 @@ export const useTemplateKYCFlow = (
 
         return componentData && componentData.code && componentData.regionMapping;
 
+      case 'welcome':
+        // Welcome is valid once user has given consent (componentData is set when they click Get Started)
+        return componentData && componentData.consentGiven !== false;
+
       case 'review_submit':
         return true;
       default:
@@ -403,10 +413,16 @@ export const useTemplateKYCFlow = (
       const currentComp = state.template.components[state.currentComponentIndex];
       if (!currentComp) return;
 
-      setState(prev => ({
-        ...prev,
-        isProcessing: true,
-      }));
+      // Prevent multiple simultaneous calls
+      setState(prev => {
+        if (prev.isProcessing) {
+          return prev;
+        }
+        return {
+          ...prev,
+          isProcessing: true,
+        };
+      });
       // Valider le composant actuel
       if (!validateComponent(currentComp.id)) {
         setState(prev => ({
@@ -423,7 +439,13 @@ export const useTemplateKYCFlow = (
 
       try {
         const component = state.template.components.find(c => c.id === currentComp.id);
-        if (!component) return;
+        if (!component) {
+          setState(prev => ({
+            ...prev,
+            isProcessing: false,
+          }));
+          return;
+        }
         if (component.type === 'review_submit') {
           // Move to verification screen and mark verification in progress
           setState(prev => ({
@@ -484,7 +506,7 @@ export const useTemplateKYCFlow = (
           session_id: state.session.session_id,
           step: step,
           data: payloadData,
-          templateId: null,
+          templateId: templateId,
           token: state.session.token,
           action: action,
           apiKey: apiKey ?? "-",
@@ -504,7 +526,7 @@ export const useTemplateKYCFlow = (
         }));
 
       } catch (error) {
-        // console.error('Error validating component:', error);
+        logger.error('Error in nextComponent:', error);
         setState(prev => ({
           ...prev,
           isProcessing: false,
@@ -515,7 +537,7 @@ export const useTemplateKYCFlow = (
         }));
       }
 
-    }, [canGoNext, state.currentComponentIndex, state.template.components, validateComponent, apiKey, state.session.session_id, state.session.token]),
+    }, [canGoNext, state.currentComponentIndex, state.template.components, validateComponent, apiKey, state.session.session_id, state.session.token, buildPayloadForComponent, mapComponentTypeToAction, chooseTemplateId, state.currentLanguage]),
 
     // Retourner au composant précédent
     previousComponent: useCallback(() => {

package/src/hooks/useTemplateLoader.ts

@@ -0,0 +1,102 @@
+import { useState, useCallback, useRef } from 'react';
+import { KYCTemplate } from '../types/KYC.types';
+import templateService from '../modules/api/TemplateService';
+import { transformBackendTemplateToSDK, validateTransformedTemplate } from '../utils/template-transformer';
+import { logger } from '../utils/logger';
+import { authentification } from '../modules/api/KYCService';
+
+export interface UseTemplateLoaderReturn {
+  template: KYCTemplate | null;
+  isLoading: boolean;
+  error: string | null;
+  loadTemplate: (templateId: string, apiKey?: string) => Promise<void>;
+  refresh: () => void;
+  clearError: () => void;
+}
+
+/**
+ * Hook to load and transform templates from the backend API
+ */
+export function useTemplateLoader(): UseTemplateLoaderReturn {
+  const [template, setTemplate] = useState<KYCTemplate | null>(null);
+  const [isLoading, setIsLoading] = useState<boolean>(false);
+  const [error, setError] = useState<string | null>(null);
+  const currentTemplateIdRef = useRef<string | null>(null);
+  const currentApiKeyRef = useRef<string | undefined>(undefined);
+
+  /**
+   * Load a template by ID
+   */
+  const loadTemplate = useCallback(async (templateId: string, apiKey?: string) => {
+    // Reset state
+    setError(null);
+    setIsLoading(true);
+    currentTemplateIdRef.current = templateId;
+    currentApiKeyRef.current = apiKey;
+
+    try {
+      logger.log(`Loading template: ${templateId}`);
+
+      // Get token if no API key provided
+      let token: string | undefined;
+      if (!apiKey) {
+        try {
+          token = await authentification();
+        } catch (authError) {
+          logger.error('Authentication failed:', authError);
+          throw new Error('Failed to authenticate. Please provide a valid API key.');
+        }
+      }
+
+      // Fetch template from backend
+      const backendTemplate = await templateService.fetchTemplate(templateId, apiKey, token);
+
+      // Transform to SDK format
+      const transformedTemplate = transformBackendTemplateToSDK(backendTemplate);
+
+      // Validate transformed template
+      if (!validateTransformedTemplate(transformedTemplate)) {
+        throw new Error('Transformed template validation failed');
+      }
+
+      // Set the template
+      setTemplate(transformedTemplate);
+      logger.log(`Template loaded successfully: ${templateId}`);
+    } catch (err: any) {
+      const errorMessage = err.message || 'Failed to load template';
+      logger.error(`Error loading template ${templateId}:`, errorMessage);
+      setError(errorMessage);
+      setTemplate(null);
+    } finally {
+      setIsLoading(false);
+    }
+  }, []);
+
+  /**
+   * Refresh the current template
+   */
+  const refresh = useCallback(() => {
+    if (currentTemplateIdRef.current) {
+      // Clear cache for this template
+      templateService.clearCache(currentTemplateIdRef.current);
+      // Reload template
+      loadTemplate(currentTemplateIdRef.current, currentApiKeyRef.current);
+    }
+  }, [loadTemplate]);
+
+  /**
+   * Clear error state
+   */
+  const clearError = useCallback(() => {
+    setError(null);
+  }, []);
+
+  return {
+    template,
+    isLoading,
+    error,
+    loadTemplate,
+    refresh,
+    clearError,
+  };
+}

package/src/i18n/en/index.ts

@@ -36,6 +36,16 @@ export const en = {
       ]
     },
 
+    welcome: {
+      requirements: 'What you\'ll need:',
+      estimatedTime: 'Estimated time:',
+      consent: 'Please accept the following:',
+      privacyPolicy: 'I agree to the Privacy Policy',
+      termsOfService: 'I agree to the Terms of Service',
+      marketingConsent: 'I agree to receive marketing communications',
+      readMore: 'Read more'
+    },
+
     // Location Capture
     locationCapture: {
       title: 'Secure Your Verification',

package/src/i18n/fr/index.ts

@@ -35,6 +35,15 @@ export const fr = {
         'Une connexion internet stable'
       ]
     },
+    welcome: {
+      requirements: 'Ce dont vous aurez besoin :',
+      estimatedTime: 'Temps estimé :',
+      consent: 'Veuillez accepter les suivants :',
+      privacyPolicy: 'J\'accepte la Politique de Confidentialité',
+      termsOfService: 'J\'accepte les Conditions d\'Utilisation',
+      marketingConsent: 'J\'accepte de recevoir des communications marketing',
+      readMore: 'Lire plus'
+    },
 
     // Location Capture
     locationCapture: {

package/src/index.ts

@@ -7,5 +7,16 @@ export * from './types/KYC.types';
 
 export { TemplateKYCExample as LauchTransferGratisKYC } from './components/TemplateKYCExample';
 
+// Export Template Flow Components
+export { TemplateKYCFlow } from './components/TemplateKYCFlowRefactored';
+
+// Export Template Service and Utilities
+export { default as templateService } from './modules/api/TemplateService';
+export { transformBackendTemplateToSDK, validateTransformedTemplate } from './utils/template-transformer';
+export { useTemplateLoader } from './hooks/useTemplateLoader';
+
+// Export Template Components
+export { WelcomeTemplate } from './components/KYCElements/WelcomeTemplate';
+
 // Export Web KYC Components
 export { WebKYCEntry } from './web';