@transfergratis/react-native-sdk 0.1.24 → 0.1.26

package/src/modules/api/SelfieVerification.ts

@@ -1,11 +1,33 @@
-import kycService, { authentification } from "./KYCService";
+import kycService, { authentification, SelfieVideoResponse } from "./KYCService";
 
-const selfieVerification = async (selfieImage: string) => {
-    const token = await authentification();
+import { KycEnvironment } from "../../types/env.types";
+
+const selfieVerification = async (selfieImage: string, env: KycEnvironment = 'PRODUCTION'): Promise<SelfieVideoResponse[]> => {
+    // In SANDBOX mode, skip AI verification and return a mock success response
+    if (env === 'SANDBOX') {
+        console.log("SANDBOX mode: Skipping AI verification for selfie");
+        // Return a mock response that simulates successful verification
+        // This allows the flow to continue without actual AI processing
+        
+        const mockResponse: SelfieVideoResponse[] = [{
+            orientation_direction: "center",
+            turn_score: 1.0,
+            bbox: [0, 0, 100, 100],
+            capture: true,
+            instruction: "SANDBOX: AI verification skipped",
+            error: ""
+        }];
+        return mockResponse;
+    }
 
+    // PRODUCTION mode: perform actual AI verification
+    const token = await authentification();
     const response = await kycService.processSelfieOrientationPicture(selfieImage, token);
     console.log("selfieVerification response", JSON.stringify(response, null, 2));
     return response;
 }
 
+
+
+
 export default selfieVerification;

package/src/modules/api/TemplateService.ts

@@ -2,9 +2,9 @@ import axios from 'axios';
 import { BackendKYCTemplate, TemplateAPIResponse } from '../../types/KYC.types';
 import { logger } from '../../utils/logger';
 import { errorMessage } from './KYCService';
+import KYCConfig from '../../config/KYCConfig';
 
 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
 
@@ -55,8 +55,8 @@ export class TemplateServiceClass {
     }
 
     try {
-      const url = `${this.backendServiceURL}/templates/kyc/template/${templateId}/`;
-      logger.log(`Fetching template from: ${url} with apiKey: ${apiKey} and token: ${token}`,{
+      const url = `${KYCConfig.getBackendUrl()}/templates/kyc/template/${templateId}/`;
+      logger.log(`Fetching template from: ${url} with apiKey: ${apiKey} and token: ${token}`, {
         headers: this.getHeaders(apiKey, token)
       });
 
@@ -142,7 +142,7 @@ export class TemplateServiceClass {
    */
   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`;
+      const url = `${KYCConfig.getBackendUrl()}/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, {

package/src/modules/camera/VisionCameraModule.web.ts

@@ -151,17 +151,18 @@ export class VisionCameraModule {
         return false;
       }
 
-      const stream = await navigator.mediaDevices.getUserMedia({ 
-        video: { 
+      // Use min + ideal so Android Chrome doesn't cache low resolution (e.g. 640x480)
+      const stream = await navigator.mediaDevices.getUserMedia({
+        video: {
           facingMode: 'user',
-          width: { ideal: 1280 },
-          height: { ideal: 720 }
-        } 
+          width: { min: 1280, ideal: 1920 },
+          height: { min: 720, ideal: 1080 },
+        },
       });
-      
+
       // Libérer le stream de test
       stream.getTracks().forEach(track => track.stop());
-      
+
       return true;
     } catch (error) {
       console.error('Error requesting camera permission:', error);
@@ -330,13 +331,30 @@ export class VisionCameraModule {
         return;
       }
 
-      this.stream = await navigator.mediaDevices.getUserMedia({
+      const constraints: MediaStreamConstraints = {
         video: {
           facingMode: 'user',
-          width: { ideal: 1280 },
-          height: { ideal: 720 }
+          width: { min: 1280, ideal: 1920 },
+          height: { min: 720, ideal: 1080 },
+        },
+      };
+
+      try {
+        this.stream = await navigator.mediaDevices.getUserMedia(constraints);
+      } catch (err) {
+        const name = err instanceof Error ? err.name : '';
+        if (name === 'OverconstrainedError') {
+          this.stream = await navigator.mediaDevices.getUserMedia({
+            video: {
+              facingMode: 'user',
+              width: { ideal: 1920 },
+              height: { ideal: 1080 },
+            },
+          });
+        } else {
+          throw err;
         }
-      });
+      }
 
       if (this.videoElement) {
         this.videoElement.srcObject = this.stream;
@@ -531,7 +549,7 @@ export class VisionCameraModule {
       context.drawImage(this.videoElement, 0, 0);
 
       // Convertir en base64
-      const imageDataUrl = this.canvasElement.toDataURL('image/jpeg', 0.8);
+      const imageDataUrl = this.canvasElement.toDataURL('image/jpeg', 0.95);
       
       // Créer un nom de fichier unique
       const timestamp = new Date().getTime();

package/src/types/KYC.types.ts

@@ -8,6 +8,7 @@ export interface Document {
   uploadedAt: Date;
   validated: boolean;
   extractedData?: DocumentData;
+
 }
 
 export type DocumentType = 'passport' | 'id_card' | 'drivers_license';
@@ -406,12 +407,17 @@ export type ComponentConfig =
   | FileUploadConfig
   | LocationConfig
   | CountrySelectionConfig
-  | WelcomeConfig;
+  | CountrySelectionConfig
+  | WelcomeConfig
+  | EmailVerificationConfig
+  | PhoneVerificationConfig
+  | PersonalInformationConfig
+  | AdditionalDocumentsConfig;
 
 // 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' | 'welcome';
+  type: 'id_card' | 'selfie' | 'file_upload' | 'location' | 'country_selection' | 'initialization' | 'review_submit' | 'verification_progress' | 'welcome' | 'email_verification' | 'phone_verification' | 'personal_information' | 'additional_documents';
   order: number;
   templateId?: number;
   labels: LocalizedText | Record<string, LocalizedText>;
@@ -449,6 +455,8 @@ export interface SessionState {
   isInitialized: boolean;
   isProcessing: boolean;
   error: string | null;
+  /** True once loadSessionData has run (for resume flow); allows UI to show loading until country/data restored */
+  sessionDataRestored?: boolean;
 }
 
 export type VerificationStatus = 'idle' | 'in_progress' | 'success' | 'failed';
@@ -463,11 +471,11 @@ export interface VerificationState {
 // Actions pour le template KYC
 export interface TemplateActions {
   initializeTemplate: (template: KYCTemplate) => void;
-  nextComponent: () => void;
+  nextComponent: (overrideData?: any) => void;
   previousComponent: () => void;
   goToComponent: (componentId: number) => void;
   updateComponentData: (componentId: number, data: any) => void;
-  validateComponent: (componentId: number) => boolean;
+  validateComponent: (componentId: number, dataOverride?: any) => boolean;
   submitTemplate: () => Promise<void>;
   resetTemplate: () => void;
   setLanguage: (language: string) => void;
@@ -476,7 +484,7 @@ export interface TemplateActions {
   submitVerification: () => Promise<void>;
 }
 
-// Hook pour le template KYC
+// Hook pour le template KYC (return type of useTemplateKYCFlow)
 export interface UseTemplateReturn {
   state: TemplateState;
   actions: TemplateActions;
@@ -487,6 +495,9 @@ export interface UseTemplateReturn {
   isComplete: boolean;
   getLocalizedText: (text: LocalizedText) => string;
   initializeSession: () => Promise<void>;
+  env: 'PRODUCTION' | 'SANDBOX';
+  /** Optional API key for backend auth (e.g. email verification endpoints). */
+  apiKey?: string;
 }
 
 
@@ -646,7 +657,7 @@ export interface BackendComponentTranslations {
 // Backend template component
 export interface BackendTemplateComponent {
   id: string;
-  type: 'welcome' | 'location-capture' | 'government-id' | 'selfie-capture' | 'review-submit' | 'verification-progress';
+  type: 'welcome' | 'location-capture' | 'government-id' | 'selfie-capture' | 'review-submit' | 'verification-progress' | 'email-verification' | 'phone-verification' | 'personal-information' | 'additional-documents';
   order: number;
   config: BackendComponentConfig;
   required?: boolean;
@@ -671,6 +682,74 @@ export interface BackendKYCTemplate {
   };
 }
 
+// ===== NEW CONFIG TYPES FOR INPUT VERIFICATION =====
+
+export interface EmailVerificationConfig {
+  allowResend: boolean;
+  otpSettings: {
+    codeLength: number;
+    expiryTime: number;
+  };
+  resendCooldown: number;
+  emailValidation: {
+    corporateOnly: boolean;
+    validateFormat: boolean;
+    checkDisposable: boolean;
+    checkDeliverability: boolean;
+  };
+  verificationMethod: string;
+  required?: boolean;
+}
+
+export interface PhoneVerificationConfig {
+  required: boolean;
+  codeExpiry: number;
+  codeLength: number;
+  maxAttempts: number;
+  resendDelay: number;
+  countryRestrictions: string;
+  verificationMethods: string[];
+  allowSkipForVerified: boolean;
+}
+
+export interface PersonalInfoField {
+  id: string;
+  type: string;
+  label: string;
+  required: boolean;
+  placeholder?: string;
+  autoFillFromId?: boolean;
+  minAge?: number;
+  verifyAge?: boolean;
+  dateFormat?: string;
+}
+
+export interface PersonalInformationConfig {
+  fields: PersonalInfoField[];
+  validationSettings: {
+    validateOnBlur: boolean;
+    showAllErrorsAtOnce: boolean;
+    preventSubmissionWithErrors: boolean;
+  };
+  required?: boolean;
+}
+
+export interface DocumentCategory {
+  enabled: boolean;
+  category: string;
+  documentTypes: string[];
+}
+
+export interface AdditionalDocumentsConfig {
+  required: boolean;
+  maxSizeEach: string;
+  maxDocuments: number;
+  minDocuments: number;
+  documentCategories: DocumentCategory[];
+  customDocumentTypes: any[];
+  showBasedOnUserProfile: boolean;
+}
+
 // API response for template
 export interface TemplateAPIResponse {
   id: string;
@@ -687,4 +766,72 @@ export interface TemplateAPIResponse {
     fr: string;
     [key: string]: string;
   };
+}
+
+// ===== NEW CONFIG TYPES FOR INPUT VERIFICATION =====
+
+export interface EmailVerificationConfig {
+  allowResend: boolean;
+  otpSettings: {
+    codeLength: number;
+    expiryTime: number;
+  };
+  resendCooldown: number;
+  emailValidation: {
+    corporateOnly: boolean;
+    validateFormat: boolean;
+    checkDisposable: boolean;
+    checkDeliverability: boolean;
+  };
+  verificationMethod: string;
+  required?: boolean;
+}
+
+export interface PhoneVerificationConfig {
+  required: boolean;
+  codeExpiry: number;
+  codeLength: number;
+  maxAttempts: number;
+  resendDelay: number;
+  countryRestrictions: string;
+  verificationMethods: string[];
+  allowSkipForVerified: boolean;
+}
+
+export interface PersonalInfoField {
+  id: string;
+  type: string;
+  label: string;
+  required: boolean;
+  placeholder?: string;
+  autoFillFromId?: boolean;
+  minAge?: number;
+  verifyAge?: boolean;
+  dateFormat?: string;
+}
+
+export interface PersonalInformationConfig {
+  fields: PersonalInfoField[];
+  validationSettings: {
+    validateOnBlur: boolean;
+    showAllErrorsAtOnce: boolean;
+    preventSubmissionWithErrors: boolean;
+  };
+  required?: boolean;
+}
+
+export interface DocumentCategory {
+  enabled: boolean;
+  category: string;
+  documentTypes: string[];
+}
+
+export interface AdditionalDocumentsConfig {
+  required: boolean;
+  maxSizeEach: string;
+  maxDocuments: number;
+  minDocuments: number;
+  documentCategories: DocumentCategory[];
+  customDocumentTypes: any[];
+  showBasedOnUserProfile: boolean;
 }

package/src/types/env.types.ts

@@ -0,0 +1,13 @@
+/**
+ * KYC Environment types
+ * PRODUCTION: Full verification with AI checks
+ * SANDBOX: Skip AI verification, only save data to backend
+ */
+export type KycEnvironment = 'PRODUCTION' | 'SANDBOX';
+
+/**
+ * Backend Environment types
+ * PRODUCTION: Production backend
+ * TEST: Test backend
+ */
+export type BackendEnvironment = 'PRODUCTION' | 'TEST';

package/src/utils/cropByObb.ts

@@ -5,6 +5,21 @@ import { logger } from './logger';
 
 type Point = [number, number];
 
+/** OBB confidence below this = card not fully in frame; don't crop, give user feedback. */
+export const OBB_CONFIDENCE_THRESHOLD = 0.85;
+
+/**
+ * card_obb format from API: [ [ [p1,p2,p3,p4], confidence ] ]
+ * Returns confidence in [0,1] or null if not present.
+ */
+export function getObbConfidence(cardObb: any): number | null {
+  if (!cardObb || !Array.isArray(cardObb) || cardObb.length === 0) return null;
+  const first = cardObb[0];
+  if (!Array.isArray(first) || first.length < 2) return null;
+  const score = first[1];
+  return typeof score === 'number' ? score : null;
+}
+
 // Compute axis-aligned bounding box from oriented quadrilateral
 function computeAabb(points: Point[]) {
   const xs = points.map(p => p[0]);
@@ -49,7 +64,11 @@ async function cropWeb(uri: string, points: Point[]): Promise<string> {
 // Fallback: return original for native (no dependency added); caller can still use bbox to draw overlay
 export async function cropByObb(uri: string, cardObb: any): Promise<{ base64?: string; bbox?: { minX: number; minY: number; width: number; height: number } }> {
   try {
-    // card_obb format: [ [ [p1,p2,p3,p4], score ] ]
+    // card_obb format: [ [ [p1,p2,p3,p4], score ] ] — if confidence too low, don't crop (send full image)
+    const confidence = getObbConfidence(cardObb);
+    if (confidence !== null && confidence < OBB_CONFIDENCE_THRESHOLD) {
+      return {};
+    }
     const first = Array.isArray(cardObb) ? cardObb[0] : null;
     const points = Array.isArray(first?.[0]) ? (first[0] as Point[]) : null;
     if (!points || points.length !== 4) return {};

package/src/utils/deviceDetection.ts

@@ -0,0 +1,11 @@
+/**
+ * Checks if the current environment is a mobile web browser based on User Agent.
+ * This can be used to distinguish between desktop web and mobile web.
+ */
+export const isMobileWeb = (): boolean => {
+    if (typeof window === 'undefined' || !window.navigator) {
+        return false;
+    }
+    const userAgent = window.navigator.userAgent;
+    return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(userAgent);
+};

package/src/utils/platformAlert.ts

@@ -21,6 +21,7 @@ export const showAlert = (
     const fullMessage = message ? `${title}\n\n${message}` : title;
 
     if (buttons && buttons.length > 1) {
+      
       // Multiple buttons - use confirm dialog
       const confirmed = window.confirm(fullMessage);
       

package/src/utils/template-transformer.ts

@@ -42,6 +42,10 @@ const COMPONENT_TYPE_MAPPING: Record<string, TemplateComponent['type']> = {
   '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',
 };
 
 /**
@@ -241,6 +245,14 @@ function transformComponentConfig(
         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;
   }
@@ -328,23 +340,23 @@ export function transformBackendTemplateToSDK(
     // 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' && 
+      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 => 
+        const transformedIdCard = transformedComponents.find(c =>
           hashStringToNumber(govIdWithSelection.id) === c.id
         );
-        
+
         if (transformedIdCard) {
           // Create a country_selection component before id_card
           const countrySelectionComponent: TemplateComponent = {
@@ -372,14 +384,14 @@ export function transformBackendTemplateToSDK(
               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;