@transfergratis/react-native-sdk 0.1.22 → 0.1.24

package/src/modules/api/TemplateService.ts

@@ -0,0 +1,167 @@
+import axios from 'axios';
+import { BackendKYCTemplate, TemplateAPIResponse } from '../../types/KYC.types';
+import { logger } from '../../utils/logger';
+import { errorMessage } from './KYCService';
+
+export class TemplateServiceClass {
+  private backendServiceURL = 'https://service.sanctumkey.com/api/v1';
+  private cache: Map<string, { template: BackendKYCTemplate; timestamp: number }> = new Map();
+  private cacheTimeout = 5 * 60 * 1000; // 5 minutes
+
+  /**
+   * Get headers for API requests
+   */
+  private getHeaders(apiKey?: string, token?: string) {
+    const headers: Record<string, string> = {
+      'Content-Type': 'application/json',
+    };
+
+    if (apiKey) {
+      headers['Authorization'] = `ApiKey ${apiKey}`;
+    } else if (token) {
+      headers['Authorization'] = `Bearer ${token}`;
+    }
+
+    return headers;
+  }
+
+  /**
+   * Fetch a template from the backend API
+   * @param templateId - The ID of the template to fetch
+   * @param apiKey - Optional API key for authentication
+   * @param token - Optional Bearer token for authentication
+   * @param useCache - Whether to use cached version if available (default: true)
+   * @returns The backend template
+   */
+  async fetchTemplate(
+    templateId: string,
+    apiKey?: string,
+    token?: string,
+    useCache: boolean = true
+  ): Promise<BackendKYCTemplate> {
+    // Check cache first
+    if (useCache) {
+      const cached = this.cache.get(templateId);
+      if (cached) {
+        const age = Date.now() - cached.timestamp;
+        if (age < this.cacheTimeout) {
+          logger.log(`Template ${templateId} loaded from cache`);
+          return cached.template;
+        } else {
+          // Cache expired, remove it
+          this.cache.delete(templateId);
+        }
+      }
+    }
+
+    try {
+      const url = `${this.backendServiceURL}/templates/kyc/template/${templateId}/`;
+      logger.log(`Fetching template from: ${url} with apiKey: ${apiKey} and token: ${token}`,{
+        headers: this.getHeaders(apiKey, token)
+      });
+
+      const response = await axios.get<TemplateAPIResponse>(url, {
+        headers: this.getHeaders(apiKey, token),
+        timeout: 30000, // 30 seconds timeout
+      });
+
+      const template: BackendKYCTemplate = response.data;
+
+      // Validate template structure
+      if (!template.id || !template.name || !Array.isArray(template.components)) {
+        throw new Error('Invalid template structure received from API');
+      }
+
+      // Store in cache
+      this.cache.set(templateId, {
+        template,
+        timestamp: Date.now(),
+      });
+
+      logger.log(`Template ${templateId} fetched successfully`);
+      return template;
+    } catch (error: any) {
+      logger.error(`Error fetching template ${templateId}:`, JSON.stringify(errorMessage(error), null, 2));
+
+      // Extract backend error message if available
+      const backendMessage = errorMessage(error);
+
+      if (error.response?.status === 404) {
+        throw new Error(`Template not found: ${templateId}`);
+      }
+
+      if (error.response?.status === 401 || error.response?.status === 403) {
+        throw new Error(`Unauthorized: Invalid API key or token`);
+      }
+
+      if (backendMessage) {
+        throw new Error(`Failed to fetch template: ${JSON.stringify(backendMessage)}`);
+      }
+
+      throw new Error(`Failed to fetch template: ${error.message || 'Unknown error'}`);
+    }
+  }
+
+  /**
+   * Clear the template cache
+   * @param templateId - Optional template ID to clear. If not provided, clears all cache.
+   */
+  clearCache(templateId?: string): void {
+    if (templateId) {
+      this.cache.delete(templateId);
+      logger.log(`Cache cleared for template: ${templateId}`);
+    } else {
+      this.cache.clear();
+      logger.log('All template cache cleared');
+    }
+  }
+
+  /**
+   * Get cached template if available
+   * @param templateId - The template ID
+   * @returns The cached template or null if not found/expired
+   */
+  getCachedTemplate(templateId: string): BackendKYCTemplate | null {
+    const cached = this.cache.get(templateId);
+    if (cached) {
+      const age = Date.now() - cached.timestamp;
+      if (age < this.cacheTimeout) {
+        return cached.template;
+      } else {
+        this.cache.delete(templateId);
+      }
+    }
+    return null;
+  }
+
+  /**
+   * Fetch list of available templates (optional feature)
+   * @param apiKey - Optional API key for authentication
+   * @param token - Optional Bearer token for authentication
+   * @returns Array of template metadata
+   */
+  async fetchTemplateList(apiKey?: string, token?: string): Promise<Array<{ id: string; name: Record<string, string>; version?: string; status?: string }>> {
+    try {
+      const url = `${this.backendServiceURL}/templates/kyc/templates`;
+      logger.log(`Fetching template list from: ${url}`);
+
+      const response = await axios.get<Array<{ id: string; name: Record<string, string>; version?: string; status?: string }>>(url, {
+        headers: this.getHeaders(apiKey, token),
+        timeout: 30000,
+      });
+
+      logger.log(`Fetched ${response.data.length} templates`);
+      return response.data;
+    } catch (error: any) {
+      logger.error('Error fetching template list:', JSON.stringify(errorMessage(error), null, 2));
+      throw new Error(`Failed to fetch template list: ${error.message || 'Unknown error'}`);
+    }
+  }
+}
+
+// Export singleton instance as default
+const templateService = new TemplateServiceClass();
+export default templateService;
+
+// Also export the class for advanced usage
+// export { TemplateServiceClass };

package/src/modules/api/types.ts

@@ -35,6 +35,7 @@ export interface VerificationResult {
                 personal_information: {
                     full_name: string;
                     first_name: string | null;
+                    given_name: string | null;
                     last_name: string | null;
                     date_of_birth: string;
                     sex: string;

package/src/types/KYC.types.ts

@@ -325,6 +325,12 @@ export type GovernmentDocumentType =
   | 'permanent_residence'
   | 'national_id'
   | 'work_permit'
+  | 'id'
+  | 'pp'
+  | 'dl'
+  | 'hic'
+  | 'pr'
+  | 'wp'
 
 export const GovernmentDocumentTypeShorted: Record<GovernmentDocumentType, string> = {
   identity_card: 'id',
@@ -334,6 +340,22 @@ export const GovernmentDocumentTypeShorted: Record<GovernmentDocumentType, strin
   permanent_residence: 'pr',
   national_id: 'id',
   work_permit: 'wp',
+  id: 'id',
+  pp: 'pp',
+  dl: 'dl',
+  hic: 'hic',
+  pr: 'pr',
+  wp: 'wp',
+}
+
+export const GovernmentDocumentTypeBackend: Record<string, GovernmentDocumentType> = {
+  national_id: 'identity_card',
+  passport: 'passport',
+  driversLicense: 'drivers_licence',
+  healthInsuranceCard: 'health_insurance_card',
+  permanentResidence: 'permanent_residence',
+  workPermit: 'work_permit',
+  residencePermit: 'permanent_residence',
 }
 
 // Configuration spécifique pour chaque type de composant
@@ -342,7 +364,7 @@ export interface IDCardConfig {
   allowed_formats: string[];
   max_size_mb: number;
   document_types: GovernmentDocumentType[]; // Types de documents disponibles
-  bbox_configs: Record<GovernmentDocumentType, {
+  bbox_configs?: Record<GovernmentDocumentType, {
     xMin: number;
     yMin: number;
     xMax: number;
@@ -383,12 +405,13 @@ export type ComponentConfig =
   | SelfieConfig
   | FileUploadConfig
   | LocationConfig
-  | CountrySelectionConfig;
+  | CountrySelectionConfig
+  | WelcomeConfig;
 
 // Nouveau type de composant basé sur le template JSON
 export interface TemplateComponent {
   id: number;
-  type: 'id_card' | 'selfie' | 'file_upload' | 'location' | 'country_selection' | 'initialization' | 'review_submit' | 'verification_progress';
+  type: 'id_card' | 'selfie' | 'file_upload' | 'location' | 'country_selection' | 'initialization' | 'review_submit' | 'verification_progress' | 'welcome';
   order: number;
   templateId?: number;
   labels: LocalizedText | Record<string, LocalizedText>;
@@ -502,4 +525,166 @@ export interface Country {
   flag: string;
   regionMapping?: ICountryMapping;
   hasRegions?: boolean;
+}
+
+// ===== TYPES FOR BACKEND TEMPLATE FORMAT =====
+
+// Backend component configuration types
+export interface WelcomeConfig {
+  subtitle?: string;
+  buttonText?: string;
+  requirements?: string[];
+  estimatedTime?: string;
+  consentOptions?: {
+    showPrivacyPolicy?: boolean;
+    showTermsOfService?: boolean;
+    showMarketingConsent?: boolean;
+  };
+  welcomeMessage?: string;
+  showEstimatedTime?: boolean;
+}
+
+export interface LocationCaptureConfig {
+  showMap?: boolean;
+  accuracy?: string;
+  required?: boolean;
+  maxDistance?: number;
+  captureMethod?: string;
+  allowManualEntry?: boolean;
+  countryRestrictions?: string[];
+}
+
+export interface GovernmentIdConfig {
+  required?: boolean;
+  allowSkip?: boolean;
+  cameraOverlay?: {
+    bbox?: {
+      xMax?: number;
+      xMin?: number;
+      yMax?: number;
+      yMin?: number;
+      borderColor?: string;
+      borderWidth?: number;
+      cornerRadius?: number;
+    };
+  };
+  documentTypes?: string[];
+  requiredSides?: string;
+  cameraSettings?: {
+    quality?: number;
+    flashMode?: string;
+    maxRetakes?: number;
+    allowRetake?: boolean;
+    aspectRatio?: number;
+  };
+  validationRules?: string[];
+  regionsByCountry?: Record<string, any>;
+  selectedCountries?: string[];
+  authenticationMethods?: Record<string, Record<string, {
+    back?: string[];
+    front?: string[];
+    mrzTypes?: string[];
+  }>>;
+  documentTypesByCountry?: Record<string, string[]>;
+  instructionsByDocumentType?: Record<string, LocalizedText>;
+}
+
+export interface SelfieCaptureConfig {
+  timeout?: number;
+  maxAttempts?: number;
+  faceMatching?: boolean;
+  captureMethod?: string;
+  qualityChecks?: string[];
+  livenessChecks?: string[];
+  matchThreshold?: string;
+  livenessEnabled?: boolean;
+}
+
+export interface ReviewSubmitConfig {
+  allowEditing?: boolean;
+  displayOptions?: string[];
+  requireConsent?: boolean;
+  postSubmitActions?: string[];
+}
+
+export type BackendComponentConfig =
+  | WelcomeConfig
+  | LocationCaptureConfig
+  | GovernmentIdConfig
+  | SelfieCaptureConfig
+  | ReviewSubmitConfig
+  | Record<string, any>;
+
+// Backend component translation structure
+export interface BackendComponentTranslations {
+  en?: {
+    title?: string;
+    description?: string;
+    instructions?: string;
+    buttonText?: string;
+    consentText?: string;
+    successMessage?: string;
+  };
+  fr?: {
+    title?: string;
+    description?: string;
+    instructions?: string;
+    buttonText?: string;
+    consentText?: string;
+    successMessage?: string;
+  };
+  [key: string]: {
+    title?: string;
+    description?: string;
+    instructions?: string;
+    buttonText?: string;
+    consentText?: string;
+    successMessage?: string;
+  } | undefined;
+}
+
+// Backend template component
+export interface BackendTemplateComponent {
+  id: string;
+  type: 'welcome' | 'location-capture' | 'government-id' | 'selfie-capture' | 'review-submit' | 'verification-progress';
+  order: number;
+  config: BackendComponentConfig;
+  required?: boolean;
+  translations: BackendComponentTranslations;
+}
+
+// Backend template structure
+export interface BackendKYCTemplate {
+  id: string;
+  name: {
+    en: string;
+    fr: string;
+    [key: string]: string;
+  };
+  status?: string;
+  version?: string;
+  components: BackendTemplateComponent[];
+  description?: {
+    en: string;
+    fr: string;
+    [key: string]: string;
+  };
+}
+
+// API response for template
+export interface TemplateAPIResponse {
+  id: string;
+  name: {
+    en: string;
+    fr: string;
+    [key: string]: string;
+  };
+  status?: string;
+  version?: string;
+  components: BackendTemplateComponent[];
+  description?: {
+    en: string;
+    fr: string;
+    [key: string]: string;
+  };
 }

package/src/utils/cropByObb.ts

@@ -1,5 +1,7 @@
 import { Image as RNImage, Platform } from 'react-native';
 import * as ImageManipulator from "expo-image-manipulator";
+import { truncateFields } from '../modules/api/KYCService';
+import { logger } from './logger';
 
 type Point = [number, number];
 
@@ -81,13 +83,14 @@ export async function cropImageWithBBox(uri: string, bbox: any) {
 
   // 3️⃣ Convertir le bbox à la taille réelle scale 0.10 = 10%
   const crop = {
-    originX: bbox.minX  ,
-    originY: bbox.minY ,
-    width: bbox.width ,
+    originX: bbox.minX,
+    originY: bbox.minY,
+    width: bbox.width,
     height: bbox.height,
   };
 
   // 4️⃣ Appliquer le crop
+  // @ts-ignore - manipulateAsync is deprecated but still functional, new API (useImageManipulator) is a React hook and not suitable for utility functions
   const result = await ImageManipulator.manipulateAsync(
     uri,
     [{ crop }],
@@ -97,3 +100,80 @@ export async function cropImageWithBBox(uri: string, bbox: any) {
   console.log("Image recadrée:", result.uri);
   return result.uri;
 }
+
+// Fonction pour rogner avec une tolérance de 10% autour du bbox
+export async function cropImageWithBBoxWithTolerance(uri: string, bbox: any, tolerance: number = 0.1): Promise<string> {
+  console.log("cropImageWithBBoxWithTolerance", JSON.stringify(truncateFields({ uri, bbox, tolerance }), null, 2));
+  
+  return new Promise<string>((resolve, reject) => {
+    let isResolved = false;
+    
+    // Timeout de sécurité (15 secondes)
+    const timeout = setTimeout(() => {
+      if (!isResolved) {
+        isResolved = true;
+        console.warn("Timeout lors du rognage avec tolérance, utilisation de l'image originale");
+        resolve(uri); // Retourner l'URI original en cas de timeout
+      }
+    }, 15000);
+
+    // 1️⃣ Récupère la taille originale de l'image
+    RNImage.getSize(uri, (imageWidth, imageHeight) => {
+      if (isResolved) return;
+      
+      // 2️⃣ Calculer la tolérance en pixels (10% de chaque côté)
+      const toleranceX = bbox.width * tolerance;
+      const toleranceY = bbox.height * tolerance;
+
+      // 3️⃣ Ajuster le bbox avec la tolérance
+      // Calculer les nouvelles coordonnées avec tolérance
+      const newMinX = Math.max(0, bbox.minX - toleranceX);
+      const newMinY = Math.max(0, bbox.minY - toleranceY);
+      const newMaxX = Math.min(imageWidth, bbox.minX + bbox.width + toleranceX);
+      const newMaxY = Math.min(imageHeight, bbox.minY + bbox.height + toleranceY);
+
+      // Calculer la largeur et hauteur finales
+      const finalWidth = newMaxX - newMinX;
+      const finalHeight = newMaxY - newMinY;
+
+      const crop = {
+        originX: newMinX,
+        originY: newMinY,
+        width: finalWidth,
+        height: finalHeight,
+      };
+
+      logger.log("cropImageWithBBoxWithTolerance - crop params", JSON.stringify(truncateFields({ uri, crop, tolerance, imageWidth, imageHeight }), null, 2));
+
+      // 4️⃣ Appliquer le crop avec tolérance
+      // @ts-ignore - manipulateAsync is deprecated but still functional, new API (useImageManipulator) is a React hook and not suitable for utility functions
+      ImageManipulator.manipulateAsync(
+        uri,
+        [{ crop }],
+        { compress: 0.95, format: ImageManipulator.SaveFormat.JPEG }
+      )
+        .then((result) => {
+          if (isResolved) return;
+          isResolved = true;
+          clearTimeout(timeout);
+          console.log("Image recadrée avec tolérance:", result.uri);
+          resolve(result.uri);
+        })
+        .catch((error) => {
+          if (isResolved) return;
+          isResolved = true;
+          clearTimeout(timeout);
+          console.error("Erreur lors du rognage avec tolérance:", error);
+          // En cas d'erreur, retourner l'URI original au lieu de rejeter
+          resolve(uri);
+        });
+    }, (error) => {
+      if (isResolved) return;
+      isResolved = true;
+      clearTimeout(timeout);
+      console.error("Erreur lors de la récupération de la taille de l'image:", error);
+      // En cas d'erreur, retourner l'URI original au lieu de rejeter
+      resolve(uri);
+    });
+  });
+}

package/src/utils/platformAlert.ts

@@ -0,0 +1,85 @@
+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,
+    },
+  ]);
+};
+