@transfergratis/react-native-sdk 0.1.23 → 0.1.25

package/src/components/TemplateKYCFlowRefactored.tsx

@@ -1,8 +1,9 @@
-import React from 'react';
-import { View, Text, StyleSheet, SafeAreaView, TouchableOpacity, ActivityIndicator, Dimensions, Alert } from 'react-native';
+import React, { useEffect } from 'react';
+import { View, Text, StyleSheet, SafeAreaView, TouchableOpacity, ActivityIndicator, Dimensions, ScrollView, Platform } from 'react-native';
 import { KYCTemplate, VerificationState } from '../types/KYC.types';
 import { TemplateKYCFlowProvider, useTemplateKYCFlowContext } from '../hooks/useTemplateKYCFlow';
 import { useI18n } from '../hooks/useI18n';
+import { showAlert } from '../utils/platformAlert';
 import { IDCardCapture } from './KYCElements/IDCardCapture';
 import { SelfieCaptureTemplate } from './KYCElements/SelfieCaptureTemplate';
 import { FileUploadTemplate } from './KYCElements/FileUploadTemplate';
@@ -11,28 +12,67 @@ import { CountrySelectionTemplate } from './KYCElements/CountrySelectionTemplate
 import { InitializationStep } from './KYCElements/InitializationStep';
 import { ReviewSubmitTemplate } from './KYCElements/ReviewSubmitTemplate';
 import { VerificationProgressTemplate } from './KYCElements/VerificationProgressTemplate';
+import { useTemplateLoader } from '../hooks/useTemplateLoader';
+import { WelcomeTemplate } from './KYCElements/WelcomeTemplate';
+import { EmailVerificationTemplate } from './KYCElements/EmailVerificationTemplate';
+import { PhoneVerificationTemplate } from './KYCElements/PhoneVerificationTemplate';
+import { PersonalInformationTemplate } from './KYCElements/PersonalInformationTemplate';
+import { AdditionalDocumentsTemplate } from './KYCElements/AdditionalDocumentsTemplate';
+import { KycEnvironment } from '../types/env.types';
 
 interface TemplateKYCFlowProps {
-  template: KYCTemplate;
+  template?: KYCTemplate;        // Format SDK direct (existing, now optional)
+  templateId?: string;           // New: ID to load from API
   onComplete?: (data: VerificationState) => void;
   onError?: (error: string) => void;
   language?: string;
   onCancel?: () => void;
-  API_KEY?: string;
+  API_KEY?: string;              // Required if templateId is used
+  env?: KycEnvironment;           // Environment mode: PRODUCTION or SANDBOX
+  existingSessionId?: string;
+  initialStep?: number;          // Initial step index to resume verification
 }
 
 export const TemplateKYCFlow: React.FC<TemplateKYCFlowProps> = ({
-  template,
+  template: providedTemplate,
+  templateId,
   onComplete,
   onError,
   language = 'fr',
   onCancel,
   API_KEY,
+  env = 'PRODUCTION',
+  existingSessionId,
+  initialStep,
 }) => {
   const { t } = useI18n();
-  // console.log('API_KEY', API_KEY);
+  const { template: loadedTemplate, isLoading, error, loadTemplate } = useTemplateLoader();
+
+  // Validate props
+  useEffect(() => {
+    if (!providedTemplate && !templateId) {
+      const errorMsg = 'Either template or templateId must be provided';
+      onError?.(errorMsg);
+      return;
+    }
+
+    if (templateId && !API_KEY) {
+      // Try to load without API key (will use token authentication)
+      loadTemplate(templateId);
+    } else if (templateId && API_KEY) {
+      loadTemplate(templateId, API_KEY);
+    }
+  }, [templateId, API_KEY, providedTemplate, loadTemplate, onError]);
+
+  // Handle loading errors
+  useEffect(() => {
+    if (error) {
+      onError?.(error);
+    }
+  }, [error, onError]);
+
   const OnCancel = () => {
-    Alert.alert(
+    showAlert(
       t('kyc.cancelConfirmation.title'),
       t('kyc.cancelConfirmation.message'),
       [
@@ -46,6 +86,46 @@ export const TemplateKYCFlow: React.FC<TemplateKYCFlowProps> = ({
       ]
     );
   };
+
+  // Determine which template to use
+  const template = providedTemplate || loadedTemplate;
+
+  // Show loading state while fetching template
+  if (templateId && isLoading && !template) {
+    return (
+      <View style={styles.loadingContainer}>
+        <ActivityIndicator size="large" color="#2DBD60" />
+        <Text style={styles.loadingText}>{t('common.loading') || 'Loading template...'}</Text>
+      </View>
+    );
+  }
+
+  // Show error state if template failed to load
+  if (templateId && error && !template) {
+    return (
+      <View style={styles.errorContainer}>
+        <Text style={styles.errorText}>{error}</Text>
+        <TouchableOpacity
+          style={styles.retryButton}
+          onPress={() => loadTemplate(templateId, API_KEY)}
+        >
+          <Text style={styles.retryButtonText}>{t('common.retry') || 'Retry'}</Text>
+        </TouchableOpacity>
+      </View>
+    );
+  }
+
+  // Show error if no template available
+  if (!template) {
+    return (
+      <View style={styles.errorContainer}>
+        <Text style={styles.errorText}>
+          {t('errors.unknownError') || 'Template not available'}
+        </Text>
+      </View>
+    );
+  }
+
   return (
     <TemplateKYCFlowProvider
       template={template}
@@ -54,6 +134,9 @@ export const TemplateKYCFlow: React.FC<TemplateKYCFlowProps> = ({
       onCancel={OnCancel}
       initialLanguage={language}
       apiKey={API_KEY}
+      env={env}
+      existingSessionId={existingSessionId}
+      initialStep={initialStep}
     >
       <TemplateKYCFlowContent onCancel={OnCancel} />
     </TemplateKYCFlowProvider>
@@ -97,6 +180,9 @@ const TemplateKYCFlowContent: React.FC<{ onCancel?: () => void }> = ({ onCancel
     }
 
     switch (currentComponent.type) {
+      case 'welcome':
+        return <WelcomeTemplate {...commonProps} />;
+
       case 'id_card':
         return <IDCardCapture {...commonProps} />;
 
@@ -115,6 +201,18 @@ const TemplateKYCFlowContent: React.FC<{ onCancel?: () => void }> = ({ onCancel
       case 'review_submit':
         return <ReviewSubmitTemplate {...commonProps} />;
 
+      case 'email_verification':
+        return <EmailVerificationTemplate {...commonProps} />;
+
+      case 'phone_verification':
+        return <PhoneVerificationTemplate {...commonProps} />;
+
+      case 'personal_information':
+        return <PersonalInformationTemplate {...commonProps} />;
+
+      case 'additional_documents':
+        return <AdditionalDocumentsTemplate {...commonProps} />;
+
       case 'verification_progress':
         return <VerificationProgressTemplate {...commonProps} />;
 
@@ -166,9 +264,14 @@ const TemplateKYCFlowContent: React.FC<{ onCancel?: () => void }> = ({ onCancel
         ) : null}
 
         {/* Contenu principal */}
-        <View style={styles.content}>
+        <ScrollView
+          style={styles.scrollView}
+          contentContainerStyle={styles.content}
+          showsVerticalScrollIndicator={Platform.OS === 'web'}
+          bounces={false}
+        >
           {renderCurrentComponent()}
-        </View>
+        </ScrollView>
 
         {state.isProcessing && (
           <View style={styles.processingContainer}>
@@ -253,11 +356,13 @@ const styles = StyleSheet.create({
     color: '#666',
     lineHeight: 20,
   },
-  content: {
+  scrollView: {
     flex: 1,
-    // justifyContent: 'center',
+  },
+  content: {
+    flexGrow: 1,
     alignItems: 'center',
-    // paddingTop: Dimensions.get('window').height > 760 ? 12 : 0,
+    paddingBottom: 20, // Add padding for better mobile scrolling
   },
   navigation: {
     flexDirection: 'row',
@@ -316,4 +421,35 @@ const styles = StyleSheet.create({
     fontWeight: 'bold',
     marginBottom: 10,
   },
+  loadingContainer: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: '#f5f5f5',
+  },
+  loadingText: {
+    marginTop: 16,
+    fontSize: 16,
+    color: '#666',
+    textAlign: 'center',
+  },
+  errorContainer: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: '#f5f5f5',
+    padding: 20,
+  },
+  retryButton: {
+    marginTop: 20,
+    paddingHorizontal: 24,
+    paddingVertical: 12,
+    backgroundColor: '#2DBD60',
+    borderRadius: 8,
+  },
+  retryButtonText: {
+    color: '#fff',
+    fontSize: 16,
+    fontWeight: '600',
+  },
 }); 

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/KYCConfig.ts

@@ -0,0 +1,34 @@
+import { BackendEnvironment } from '../types/env.types';
+
+class KYCConfig {
+    private static instance: KYCConfig;
+    private backendEnvironment: BackendEnvironment = 'PRODUCTION';
+
+    private backendUrls: Record<BackendEnvironment, string> = {
+        PRODUCTION: 'https://service.sanctumkey.com/api/v1',
+        TEST: 'https://test-service.sanctumkey.com/api/v1', // Placeholder URL
+    };
+
+    private constructor() { }
+
+    public static getInstance(): KYCConfig {
+        if (!KYCConfig.instance) {
+            KYCConfig.instance = new KYCConfig();
+        }
+        return KYCConfig.instance;
+    }
+
+    public setBackendEnvironment(env: BackendEnvironment) {
+        this.backendEnvironment = env;
+    }
+
+    public getBackendUrl(): string {
+        return this.backendUrls[this.backendEnvironment];
+    }
+
+    public getBackendEnvironment(): BackendEnvironment {
+        return this.backendEnvironment;
+    }
+}
+
+export default KYCConfig.getInstance();

package/src/config/allowedDomains.ts

@@ -0,0 +1,133 @@
+/**
+ * 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',
+    'preweb.transfergratis.net',
+    // 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 } => {
+  try {
+    // Check if valid URL
+    new URL(url);
+    // Allow all URLs for redirection as requested
+    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);
+};
+