@transfergratis/react-native-sdk 0.1.22 → 0.1.24

package/src/utils/template-transformer.ts

@@ -0,0 +1,433 @@
+import {
+  BackendKYCTemplate,
+  BackendTemplateComponent,
+  KYCTemplate,
+  TemplateComponent,
+  LocalizedText,
+  ComponentUI,
+  IDCardConfig,
+  LocationConfig,
+  SelfieConfig,
+  FileUploadConfig,
+  CountrySelectionConfig,
+  ComponentConfig,
+  WelcomeConfig,
+  GovernmentDocumentType,
+  GovernmentIdConfig,
+} from '../types/KYC.types';
+import { logger } from './logger';
+
+/**
+ * Hash a string to a number (simple hash function)
+ */
+function hashStringToNumber(str: string): number {
+  let hash = 0;
+  for (let i = 0; i < str.length; i++) {
+    const char = str.charCodeAt(i);
+    hash = ((hash << 5) - hash) + char;
+    hash = hash & hash; // Convert to 32-bit integer
+  }
+  return Math.abs(hash);
+}
+
+/**
+ * Map backend component types to SDK component types
+ */
+const COMPONENT_TYPE_MAPPING: Record<string, TemplateComponent['type']> = {
+  'welcome': 'welcome',
+  'government-id': 'id_card',
+  'selfie-capture': 'selfie',
+  'location-capture': 'location',
+  'review-submit': 'review_submit',
+  'verification-progress': 'verification_progress',
+  'file-upload': 'file_upload',
+  'country-selection': 'country_selection',
+};
+
+/**
+ * Transform backend translations to SDK labels and instructions
+ */
+function transformTranslations(
+  translations: BackendTemplateComponent['translations'],
+  defaultLanguage: string = 'en'
+): { labels: LocalizedText; instructions: LocalizedText } {
+  const labels: LocalizedText = { en: '', fr: '' };
+  const instructions: LocalizedText = { en: '', fr: '' };
+
+  // Extract title as label
+  if (translations.en?.title) labels.en = translations.en.title;
+  if (translations.fr?.title) labels.fr = translations.fr.title;
+
+  // Extract instructions
+  if (translations.en?.instructions) instructions.en = translations.en.instructions;
+  if (translations.fr?.instructions) instructions.fr = translations.fr.instructions;
+
+  // Fallback to description if instructions not available
+  if (!instructions.en && translations.en?.description) {
+    instructions.en = translations.en.description;
+  }
+  if (!instructions.fr && translations.fr?.description) {
+    instructions.fr = translations.fr.description;
+  }
+
+  // Support other languages
+  Object.keys(translations).forEach((lang) => {
+    if (lang !== 'en' && lang !== 'fr' && translations[lang]) {
+      labels[lang] = translations[lang]?.title || '';
+      instructions[lang] = translations[lang]?.instructions || translations[lang]?.description || '';
+    }
+  });
+
+  return { labels, instructions };
+}
+
+/**
+ * Transform UI configuration
+ */
+function transformUI(translations: BackendTemplateComponent['translations']): ComponentUI {
+  const buttonText: LocalizedText = { en: '', fr: '' };
+
+  if (translations.en?.buttonText) buttonText.en = translations.en.buttonText;
+  if (translations.fr?.buttonText) buttonText.fr = translations.fr.buttonText;
+
+  // Support other languages
+  Object.keys(translations).forEach((lang) => {
+    if (lang !== 'en' && lang !== 'fr' && translations[lang]?.buttonText) {
+      buttonText[lang] = translations[lang]!.buttonText!;
+    }
+  });
+
+  return {
+    buttonText,
+    themeColor: '#2DBD60', // Default theme color
+  };
+}
+
+/**
+ * Transform welcome config
+ */
+function transformWelcomeConfig(config: any): WelcomeConfig {
+  return {
+    subtitle: config.subtitle,
+    buttonText: config.buttonText,
+    requirements: config.requirements || [],
+    estimatedTime: config.estimatedTime,
+    consentOptions: config.consentOptions || {
+      showPrivacyPolicy: true,
+      showTermsOfService: true,
+      showMarketingConsent: false,
+    },
+    welcomeMessage: config.welcomeMessage,
+    showEstimatedTime: config.showEstimatedTime !== false,
+  } as WelcomeConfig;
+}
+
+/**
+ * Transform government ID config to IDCardConfig
+ */
+function transformGovernmentIdConfig(config: any): IDCardConfig {
+  const documentTypes: string[] = config.documentTypes || ['passport', 'nationalId'];
+  const sides: string[] = [];
+
+  if (config.requiredSides === 'front-back' || config.requiredSides === 'both') {
+    sides.push('front', 'back');
+  } else if (config.requiredSides === 'front') {
+    sides.push('front');
+  } else if (config.requiredSides === 'back') {
+    sides.push('back');
+  } else {
+    // Default to both sides
+    sides.push('front', 'back');
+  }
+
+  const idCardConfig: IDCardConfig = {
+    sides,
+    allowed_formats: ['jpg', 'jpeg', 'png'],
+    max_size_mb: 10,
+    document_types: documentTypes.map((dt: string) => {
+      const mapping: Record<string, any> = {
+        'passport': 'passport',
+        'nationalId': 'national_id',
+        'driversLicense': 'drivers_licence',
+        'identityCard': 'identity_card',
+      };
+      return mapping[dt] || dt;
+    }) as any[],
+  };
+
+  // Add bbox configs if available
+  if (config.cameraOverlay?.bbox) {
+    const bbox = config.cameraOverlay.bbox;
+    idCardConfig.bbox_configs = {} as Record<GovernmentDocumentType, {
+      xMin: number;
+      yMin: number;
+      xMax: number;
+      yMax: number;
+      borderColor?: string;
+      borderWidth?: number;
+      cornerRadius?: number;
+    }>;
+    documentTypes.forEach((dt: string) => {
+      const docType = dt as GovernmentDocumentType;
+      (idCardConfig.bbox_configs as any)[docType] = {
+        xMin: bbox.xMin || 20,
+        yMin: bbox.yMin || 140,
+        xMax: bbox.xMax || 370,
+        yMax: bbox.yMax || 340,
+        borderColor: bbox.borderColor || '#2DBD60',
+        borderWidth: bbox.borderWidth || 3,
+        cornerRadius: bbox.cornerRadius || 8,
+      };
+    });
+  }
+
+  // Store additional backend-specific config in a way that can be accessed
+  (idCardConfig as any).authenticationMethods = config.authenticationMethods;
+  (idCardConfig as any).documentTypesByCountry = config.documentTypesByCountry;
+  (idCardConfig as any).selectedCountries = config.selectedCountries;
+  (idCardConfig as any).instructionsByDocumentType = config.instructionsByDocumentType;
+  (idCardConfig as any).cameraSettings = config.cameraSettings;
+  (idCardConfig as any).validationRules = config.validationRules;
+
+  return idCardConfig;
+}
+
+/**
+ * Transform location capture config
+ */
+function transformLocationConfig(config: any): LocationConfig {
+  return {
+    accuracy: config.accuracy || 'high',
+    required: config.required !== false,
+  } as LocationConfig;
+}
+
+/**
+ * Transform selfie capture config
+ */
+function transformSelfieConfig(config: any): SelfieConfig {
+  return {
+    liveness_check: config.livenessEnabled !== false,
+    max_attempts: config.maxAttempts || 5,
+    orientations: config.orientations || ['center'],
+  } as SelfieConfig;
+}
+
+/**
+ * Transform component config based on type
+ */
+function transformComponentConfig(
+  type: TemplateComponent['type'],
+  backendConfig: any
+): ComponentConfig {
+  switch (type) {
+    case 'welcome':
+      return transformWelcomeConfig(backendConfig);
+    case 'id_card':
+      return transformGovernmentIdConfig(backendConfig);
+    case 'location':
+      return transformLocationConfig(backendConfig);
+    case 'selfie':
+      return transformSelfieConfig(backendConfig);
+    case 'file_upload':
+      return {
+        allowed_formats: backendConfig.allowed_formats || ['jpg', 'jpeg', 'png', 'pdf'],
+        max_size_mb: backendConfig.max_size_mb || 10,
+        required: backendConfig.required !== false,
+      } as FileUploadConfig;
+    case 'country_selection':
+      return {
+        allowed_countries: backendConfig.allowed_countries || [],
+        default_country: backendConfig.default_country || '',
+        required: backendConfig.required !== false,
+      } as CountrySelectionConfig;
+    default:
+      return backendConfig as ComponentConfig;
+  }
+}
+
+/**
+ * Transform a single backend component to SDK component
+ */
+function transformComponent(
+  backendComponent: BackendTemplateComponent,
+  componentIndex: number
+): TemplateComponent {
+  const mappedType = COMPONENT_TYPE_MAPPING[backendComponent.type];
+
+  if (!mappedType) {
+    logger.warn(`Unknown component type: ${backendComponent.type}, defaulting to initialization`);
+  }
+
+  const componentId = hashStringToNumber(backendComponent.id);
+  const { labels, instructions } = transformTranslations(backendComponent.translations);
+  const ui = transformUI(backendComponent.translations);
+  const config = transformComponentConfig(mappedType || 'initialization', backendComponent.config);
+
+  // For components with multiple sides (like id_card), create nested structure
+  let finalLabels: LocalizedText | Record<string, LocalizedText> = labels;
+  let finalInstructions: LocalizedText | Record<string, LocalizedText> = instructions;
+  let finalUI: ComponentUI | Record<string, ComponentUI> = ui;
+
+  if (mappedType === 'id_card' && (backendComponent.config as GovernmentIdConfig).requiredSides === 'front-back') {
+    // Create separate labels/instructions for front and back
+    finalLabels = {
+      front: {
+        en: backendComponent.translations.en?.title || labels.en,
+        fr: backendComponent.translations.fr?.title || labels.fr,
+      },
+      back: {
+        en: `${labels.en} (Back)`,
+        fr: `${labels.fr} (Verso)`,
+      },
+    };
+    finalInstructions = {
+      front: instructions,
+      back: instructions,
+    };
+    finalUI = {
+      front: ui,
+      back: ui,
+    };
+  }
+
+  return {
+    id: componentId,
+    type: mappedType || 'initialization',
+    order: backendComponent.order,
+    labels: finalLabels,
+    instructions: finalInstructions,
+    ui: finalUI,
+    config,
+    required: backendComponent.required !== false,
+  } as TemplateComponent;
+}
+
+/**
+ * Transform backend template to SDK template format
+ */
+export function transformBackendTemplateToSDK(
+  backendTemplate: BackendKYCTemplate
+): KYCTemplate {
+  try {
+    // Validate backend template
+    if (!backendTemplate.id || !backendTemplate.name || !Array.isArray(backendTemplate.components)) {
+      throw new Error('Invalid backend template structure');
+    }
+
+    // Sort components by order
+    const sortedComponents = [...backendTemplate.components].sort(
+      (a, b) => a.order - b.order
+    );
+
+    // Transform each component
+    const transformedComponents = sortedComponents.map((comp, index) =>
+      transformComponent(comp, index)
+    );
+
+    // Auto-create country_selection component before id_card if government-id has selection data
+    // Check if country_selection already exists in backend template
+    const hasCountrySelectionInBackend = sortedComponents.some(c => (c as any).type === 'country-selection');
+    
+    if (!hasCountrySelectionInBackend) {
+      // Find the first government-id component with selection data
+      const govIdWithSelection = sortedComponents.find(backendComp => 
+        backendComp.type === 'government-id' && 
+        backendComp.config && (
+          (backendComp.config as any).selectedCountries ||
+          (backendComp.config as any).documentTypesByCountry
+        )
+      );
+      
+      if (govIdWithSelection) {
+        // Find the corresponding transformed id_card component
+        const transformedIdCard = transformedComponents.find(c => 
+          hashStringToNumber(govIdWithSelection.id) === c.id
+        );
+        
+        if (transformedIdCard) {
+          // Create a country_selection component before id_card
+          const countrySelectionComponent: TemplateComponent = {
+            id: hashStringToNumber(`${govIdWithSelection.id}-country-selection`),
+            type: 'country_selection',
+            order: transformedIdCard.order - 0.5, // Insert before id_card
+            labels: {
+              en: govIdWithSelection.translations.en?.title || 'Select Country and Document',
+              fr: govIdWithSelection.translations.fr?.title || 'Sélectionnez le pays et le document',
+            },
+            instructions: {
+              en: 'Please select your country and document type',
+              fr: 'Veuillez sélectionner votre pays et le type de document',
+            },
+            ui: {
+              themeColor: '#2DBD60',
+              buttonText: {
+                en: 'Continue',
+                fr: 'Continuer',
+              },
+            } as ComponentUI,
+            config: {
+              allowed_countries: (govIdWithSelection.config as any).selectedCountries || [],
+              default_country: '',
+              required: true,
+            } as CountrySelectionConfig,
+          };
+          
+          // Insert country_selection before id_card in transformedComponents
+          const idCardIndex = transformedComponents.indexOf(transformedIdCard);
+          transformedComponents.splice(idCardIndex, 0, countrySelectionComponent);
+        }
+      }
+    }
+    
+    // Re-assign order values sequentially after insertion
+    transformedComponents.forEach((comp, index) => {
+      comp.order = index + 1;
+    });
+
+    // Create SDK template
+    const sdkTemplate: KYCTemplate = {
+      id: hashStringToNumber(backendTemplate.id),
+      name: backendTemplate.name as LocalizedText,
+      description: backendTemplate.description || {
+        en: '',
+        fr: '',
+      },
+      version: backendTemplate.version || '1.0.0',
+      components: transformedComponents,
+    };
+
+    logger.log(`Template transformed: ${backendTemplate.id} -> ${sdkTemplate.id} with ${transformedComponents.length} components`);
+
+    return sdkTemplate;
+  } catch (error: any) {
+    logger.error('Error transforming template:', error);
+    throw new Error(`Failed to transform template: ${error.message}`);
+  }
+}
+
+/**
+ * Validate transformed template
+ */
+export function validateTransformedTemplate(template: KYCTemplate): boolean {
+  if (!template.id || !template.name || !Array.isArray(template.components)) {
+    return false;
+  }
+
+  if (!template.name.en || !template.name.fr) {
+    return false;
+  }
+
+  // Validate each component
+  for (const component of template.components) {
+    if (!component.id || !component.type || typeof component.order !== 'number') {
+      return false;
+    }
+
+    if (!component.labels || !component.instructions || !component.config) {
+      return false;
+    }
+  }
+
+  return true;
+}

package/src/web/WebKYCEntry.tsx

@@ -1,9 +1,10 @@
 import React, { useEffect, useState, useCallback } from 'react';
-import { View, Text, StyleSheet, SafeAreaView } from 'react-native';
+import { View, Text, StyleSheet, SafeAreaView, ActivityIndicator } from 'react-native';
 // import { TemplateKYCFlow } from '../components/TemplateKYCFlowRefactored';
 // import { KYCTemplate } from '../types/KYC.types';
 import { useI18n } from '../hooks/useI18n';
 import { TemplateKYCExample } from '../components/TemplateKYCExample';
+import { isCallbackUrlAllowed, generateCallbackSignature } from '../config/allowedDomains';
 
 interface WebKYCEntryProps {
   onComplete?: (data: any) => void;
@@ -17,6 +18,13 @@ interface URLParams {
   lang?: string;
   theme?: string;
   kyc_id?: string;
+  secret?: string; // Optional secret for signature generation
+}
+
+interface VerificationSteps {
+  document_analyzed?: boolean;
+  selfie_analyzed?: boolean;
+  liveness_checked?: boolean;
 }
 
 const WebKYCEntry: React.FC<WebKYCEntryProps> = ({
@@ -28,6 +36,7 @@ const WebKYCEntry: React.FC<WebKYCEntryProps> = ({
   const [urlParams, setUrlParams] = useState<URLParams>({});
   const [isLoading, setIsLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
+  const [isAnalyzing, setIsAnalyzing] = useState(false);
 
   // Parse URL parameters
   const parseUrlParams = useCallback((): URLParams => {
@@ -40,75 +49,115 @@ const WebKYCEntry: React.FC<WebKYCEntryProps> = ({
       lang: urlParams.get('lang') || 'en',
       theme: urlParams.get('theme') || 'light',
       kyc_id: urlParams.get('kyc_id') || undefined,
+      secret: urlParams.get('secret') || undefined,
     };
   }, []);
 
-  // Safe redirect function with validation
-  const redirectToReturnUrl = useCallback((params: {
+  // Safe redirect function with enhanced validation
+  const redirectToReturnUrl = useCallback(async (params: {
     status: 'completed' | 'cancelled' | 'error';
     kyc_id?: string;
     message?: string;
-    sig?: string;
+    processing_state?: 'analyzing' | 'completed' | 'pending';
+    verification_steps?: VerificationSteps;
   }) => {
-    const { return_url } = urlParams;
+    const { return_url, secret } = urlParams;
     
     if (!return_url) {
       console.warn('No return_url provided');
       return;
     }
 
-    // Basic URL validation - ensure it's a valid URL
     try {
+      // Enhanced URL validation with domain whitelist
+      const validation = isCallbackUrlAllowed(return_url);
+      if (!validation.allowed) {
+        console.error('Callback URL validation failed:', validation.reason);
+        setError(`Security Error: ${validation.reason}`);
+        
+        // Log suspicious redirect attempt
+        console.warn('Suspicious redirect attempt blocked:', {
+          url: return_url,
+          reason: validation.reason,
+          timestamp: new Date().toISOString(),
+        });
+        return;
+      }
+
       const returnUrl = new URL(return_url);
-      
-      // Optional: Add domain allowlist validation here
-      // const allowedDomains = ['example.com', 'trusted-site.com'];
-      // if (!allowedDomains.some(domain => returnUrl.hostname.endsWith(domain))) {
-      //   console.error('Return URL not in allowlist');
-      //   return;
-      // }
 
       // Build redirect URL with parameters
       const redirectUrl = new URL(returnUrl);
-      redirectUrl.searchParams.set('status', params.status);
-      
+      const redirectParams: Record<string, string> = {
+        status: params.status,
+      };
+
       if (params.kyc_id) {
-        redirectUrl.searchParams.set('kyc_id', params.kyc_id);
+        redirectParams.kyc_id = params.kyc_id;
       }
       
       if (params.message) {
-        redirectUrl.searchParams.set('message', params.message);
+        redirectParams.message = params.message;
       }
-      
-      if (params.sig) {
-        redirectUrl.searchParams.set('sig', params.sig);
+
+      if (params.processing_state) {
+        redirectParams.processing_state = params.processing_state;
+      }
+
+      if (params.verification_steps) {
+        redirectParams.verification_steps = JSON.stringify(params.verification_steps);
+      }
+
+      // Generate signature for integrity verification
+      if (secret) {
+        const signature = await generateCallbackSignature(redirectParams, secret);
+        if (signature) {
+          redirectParams.sig = signature;
+        }
       }
 
-      // Optional: Send postMessage to parent if in iframe
+      // Add all params to URL
+      Object.entries(redirectParams).forEach(([key, value]) => {
+        redirectUrl.searchParams.set(key, value);
+      });
+
+      // Send postMessage to parent if in iframe
       if (window.parent !== window) {
         window.parent.postMessage({
           type: 'kyc_result',
           status: params.status,
           kyc_id: params.kyc_id,
           message: params.message,
-        }, '*');
+          processing_state: params.processing_state,
+          verification_steps: params.verification_steps,
+        }, returnUrl.origin); // Use specific origin instead of '*'
       }
 
       // Redirect to return URL
       window.location.href = redirectUrl.toString();
     } catch (error) {
-      console.error('Invalid return URL:', error);
-      setError('Invalid return URL provided');
+      console.error('Error during redirect:', error);
+      setError('Failed to redirect to callback URL');
     }
   }, [urlParams]);
 
   // Handle KYC completion
   const handleComplete = useCallback((data: any) => {
     console.log('KYC completed:', data);
+    
+    // Check if still processing/analyzing
+    const isStillProcessing = data.isProcessing || data.session?.isProcessing;
+    
     redirectToReturnUrl({
       status: 'completed',
       kyc_id: data.session_id || urlParams.kyc_id,
       message: 'KYC process completed successfully',
+      processing_state: isStillProcessing ? 'analyzing' : 'completed',
+      verification_steps: {
+        document_analyzed: data.documentAnalysisComplete || false,
+        selfie_analyzed: data.selfieAnalysisComplete || false,
+        liveness_checked: data.livenessCheckComplete || false,
+      },
     });
     onComplete?.(data);
   }, [redirectToReturnUrl, urlParams.kyc_id, onComplete]);
@@ -116,10 +165,12 @@ const WebKYCEntry: React.FC<WebKYCEntryProps> = ({
   // Handle KYC error
   const handleError = useCallback((error: string) => {
     console.error('KYC error:', error);
+    setIsAnalyzing(false);
     redirectToReturnUrl({
       status: 'error',
       kyc_id: urlParams.kyc_id,
       message: error,
+      processing_state: 'pending',
     });
     onError?.(error);
   }, [redirectToReturnUrl, urlParams.kyc_id, onError]);
@@ -127,10 +178,12 @@ const WebKYCEntry: React.FC<WebKYCEntryProps> = ({
   // Handle KYC cancellation
   const handleCancel = useCallback(() => {
     console.log('KYC cancelled');
+    setIsAnalyzing(false);
     redirectToReturnUrl({
       status: 'cancelled',
       kyc_id: urlParams.kyc_id,
       message: 'KYC process was cancelled',
+      processing_state: 'pending',
     });
     onCancel?.();
   }, [redirectToReturnUrl, urlParams.kyc_id, onCancel]);
@@ -181,6 +234,15 @@ const WebKYCEntry: React.FC<WebKYCEntryProps> = ({
 
   return (
     <SafeAreaView style={styles.container}>
+      {isAnalyzing && (
+        <View style={styles.analyzingOverlay}>
+          <View style={styles.analyzingContainer}>
+            <ActivityIndicator size="large" color="#2DBD60" />
+            <Text style={styles.analyzingText}>Analyzing verification data...</Text>
+            <Text style={styles.analyzingSubtext}>This may take a few moments</Text>
+          </View>
+        </View>
+      )}
        <TemplateKYCExample  
           onComplete={handleComplete} 
           onCancel={handleCancel} 
@@ -196,6 +258,7 @@ const styles = StyleSheet.create({
   container: {
     flex: 1,
     backgroundColor: '#f5f5f5',
+    overflow: 'visible' as any, // Allow scrolling on web
   },
   loadingText: {
     fontSize: 18,
@@ -210,6 +273,41 @@ const styles = StyleSheet.create({
     color: '#dc2626',
     paddingHorizontal: 20,
   },
+  analyzingOverlay: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    backgroundColor: 'rgba(0, 0, 0, 0.7)',
+    justifyContent: 'center',
+    alignItems: 'center',
+    zIndex: 9999,
+  },
+  analyzingContainer: {
+    backgroundColor: 'white',
+    borderRadius: 12,
+    padding: 32,
+    alignItems: 'center',
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 4 },
+    shadowOpacity: 0.3,
+    shadowRadius: 8,
+    elevation: 8,
+  },
+  analyzingText: {
+    fontSize: 18,
+    fontWeight: '600',
+    color: '#333',
+    marginTop: 16,
+    textAlign: 'center',
+  },
+  analyzingSubtext: {
+    fontSize: 14,
+    color: '#666',
+    marginTop: 8,
+    textAlign: 'center',
+  },
 });
 
 export default WebKYCEntry;