@transfergratis/react-native-sdk 0.1.23 → 0.1.25

package/src/utils/platformAlert.ts

@@ -0,0 +1,86 @@
+import { Platform, Alert } from 'react-native';
+
+export interface AlertButton {
+  text?: string;
+  onPress?: () => void;
+  style?: 'default' | 'cancel' | 'destructive';
+}
+
+/**
+ * Platform-aware alert helper that works on both native and web platforms
+ * On web, uses window.confirm/window.alert since Alert.alert is not supported
+ * On native, uses the standard Alert.alert
+ */
+export const showAlert = (
+  title: string,
+  message?: string,
+  buttons?: AlertButton[]
+): void => {
+  if (Platform.OS === 'web') {
+    // Web implementation using native browser dialogs
+    const fullMessage = message ? `${title}\n\n${message}` : title;
+
+    if (buttons && buttons.length > 1) {
+      
+      // Multiple buttons - use confirm dialog
+      const confirmed = window.confirm(fullMessage);
+      
+      if (confirmed) {
+        // Find and call the primary/positive button callback
+        const confirmButton = buttons.find(
+          btn => btn.style !== 'cancel' && btn.onPress
+        );
+        confirmButton?.onPress?.();
+      } else {
+        // Find and call the cancel button callback
+        const cancelButton = buttons.find(btn => btn.style === 'cancel');
+        cancelButton?.onPress?.();
+      }
+    } else if (buttons && buttons.length === 1) {
+      // Single button - use alert dialog
+      window.alert(fullMessage);
+      buttons[0]?.onPress?.();
+    } else {
+      // No buttons - just show alert
+      window.alert(fullMessage);
+    }
+  } else {
+    // Native implementation - use standard Alert.alert
+    Alert.alert(title, message, buttons);
+  }
+};
+
+/**
+ * Simplified confirm dialog for yes/no scenarios
+ */
+export const showConfirm = (
+  title: string,
+  message: string,
+  onConfirm: () => void,
+  onCancel?: () => void
+): void => {
+  showAlert(title, message, [
+    {
+      text: 'Cancel',
+      style: 'cancel',
+      onPress: onCancel,
+    },
+    {
+      text: 'OK',
+      onPress: onConfirm,
+    },
+  ]);
+};
+
+/**
+ * Simple alert with just an OK button
+ */
+export const showSimpleAlert = (title: string, message?: string, onPress?: () => void): void => {
+  showAlert(title, message, [
+    {
+      text: 'OK',
+      onPress,
+    },
+  ]);
+};
+

package/src/utils/template-transformer.ts

@@ -0,0 +1,445 @@
+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',
+  'email-verification': 'email_verification',
+  'phone-verification': 'phone_verification',
+  'personal-information': 'personal_information',
+  'additional-documents': 'additional_documents',
+};
+
+/**
+ * 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;
+    case 'email_verification':
+      return backendConfig as any;
+    case 'phone_verification':
+      return backendConfig as any;
+    case 'personal_information':
+      return backendConfig as any;
+    case 'additional_documents':
+      return backendConfig as any;
+    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;
+}