@transfergratis/react-native-sdk 0.1.24 → 0.1.25

package/src/modules/api/KYCService.ts

@@ -2,7 +2,21 @@ import axios from 'axios';
 import { GovernmentDocumentType, GovernmentDocumentTypeShorted, OrientationVideoResponse } from '../../types/KYC.types';
 import { CheckTemplateTypeResponse, ExtractMrzTextResponse } from '../../components/OverLay/type';
 import { SessionResponse, VerificationResult, VerificationSessionRequest } from './types';
+import { KycEnvironment } from '../../types/env.types';
 import { logger } from '../../utils/logger';
+import { Platform } from 'react-native';
+import KYCConfig from '../../config/KYCConfig';
+
+const appendFileToFormData = async (formData: FormData, key: string, uri: string, name: string = 'file.jpg', type: string = 'image/jpeg') => {
+  if (Platform.OS === 'web') {
+    const response = await fetch(uri);
+    const blob = await response.blob();
+    formData.append(key, blob, name);
+  } else {
+    formData.append(key, { uri, type, name } as any);
+  }
+};
+
 
 export interface KYCRequest {
   userId: string;
@@ -48,7 +62,6 @@ export class KYCService {
   private mrzServiceURL = 'https://kyc-engine.transfergratis.net:8002';
   private barcodeServiceURL = 'https://kyc-engine.transfergratis.net:8000';
   private orientationServiceURL = 'http://18.188.180.154:8080';
-  private backendServiceURL = 'https://service.sanctumkey.com/api/v1';
 
   constructor(baseURL: string, apiKey: string) {
     this.baseURL = baseURL;
@@ -120,12 +133,8 @@ export class KYCService {
   async processSelfieOrientationPicture(videoFile: string, token: string): Promise<SelfieVideoResponse[]> {
     try {
       const formData = new FormData();
-      const rnFile: any = {
-        uri: videoFile,
-        type: 'image/jpeg',
-        name: 'selfie_picture.jpg',
-      };
-      formData.append('file', rnFile);
+      await appendFileToFormData(formData, 'file', videoFile, 'selfie_picture.jpg', 'image/jpeg');
+
       const response = await axios.post<SelfieVideoResponse[]>(
         `${this.faceServiceURL}/detect_face_orientation/`,
         formData,
@@ -141,17 +150,27 @@ export class KYCService {
     }
   }
 
-  async processOrientationVideo(videoFile: string): Promise<OrientationVideoResponse> {
+  async processOrientationVideo(videoFile: string, env: KycEnvironment = 'PRODUCTION'): Promise<OrientationVideoResponse> {
     try {
+      // SANDBOX mode: skip AI verification and return mock response
+      if (env === 'SANDBOX') {
+        console.log("SANDBOX mode: Skipping AI orientation video processing");
+        logger.log("SANDBOX mode: Returning mock orientation video response");
+        return {
+          success: true,
+          data: {
+            center: { captured: true, frame: 10 },
+            left: { captured: true, frame: 30 },
+            right: { captured: true, frame: 50 }
+          },
+          message: 'SANDBOX: Orientation video processed successfully (mocked)'
+        };
+      }
+
       // Create FormData for multipart/form-data request
       const formData = new FormData();
-      // In React Native, prefer the { uri, type, name } pattern rather than Blob
-      const rnFile: any = {
-        uri: videoFile,
-        type: 'video/mp4',
-        name: 'orientation_video.mp4',
-      };
-      formData.append('file', rnFile);
+      await appendFileToFormData(formData, 'file', videoFile, 'orientation_video.mp4', 'video/mp4');
+
 
       const response = await axios.post(
         `${this.orientationServiceURL}/process_orientation_video_stream/`,
@@ -196,10 +215,21 @@ export class KYCService {
   }
 
   // STEP 1 - ID CARD VALIDATION
-  async detectFaceOnId(idCardImageUri: string, token: string, docType: string): Promise<{ result: boolean, detail: any[] }> {
+  async detectFaceOnId(idCardImageUri: string, token: string, docType: string, env: KycEnvironment = 'PRODUCTION'): Promise<{ result: boolean, detail: any[] }> {
+    // SANDBOX mode: skip AI verification and return mock response
+    if (env === 'SANDBOX') {
+      console.log("SANDBOX mode: Skipping AI face detection on ID");
+      logger.log("SANDBOX mode: Returning mock face detection response");
+      return {
+        result: true,
+        detail: [{ confidence: 0.95, bbox: [50, 50, 200, 200] }],
+        card_obb: { x: 50, y: 50, width: 200, height: 200 }
+      } as any;
+    }
+
     const formData = new FormData();
-    const rnFile: any = { uri: idCardImageUri, type: 'image/jpeg', name: 'id_card_photo.jpg' };
-    formData.append('file', rnFile);
+    await appendFileToFormData(formData, 'file', idCardImageUri, 'id_card_photo.jpg', 'image/jpeg');
+
     logger.log('detectFaceOnId formData', JSON.stringify(formData, null, 2));
 
     const docTypeShorted = GovernmentDocumentTypeShorted[docType as GovernmentDocumentType];
@@ -221,11 +251,22 @@ export class KYCService {
   }
 
   //check templatetemplate_type
-  async checkTemplateType(params: { fileUri: string; docType: string; docRegion: string; token: string; postfix: string }): Promise<any> {
+  async checkTemplateType(params: { fileUri: string; docType: string; docRegion: string; token: string; postfix: string }, env: KycEnvironment = 'PRODUCTION'): Promise<any> {
+    // SANDBOX mode: skip AI verification and return mock response
+    if (env === 'SANDBOX') {
+      console.log("SANDBOX mode: Skipping AI template type check");
+      logger.log("SANDBOX mode: Returning mock template type response");
+      const { docType, docRegion, postfix } = params;
+      return {
+        template_path: `templates/${docType}_${docRegion}_${postfix}.jpg`,
+        card_obb: { x: 50, y: 50, width: 200, height: 200 }
+      };
+    }
+
     const { fileUri, docType, docRegion, token, postfix } = params;
     const formData = new FormData();
-    const rnFile: any = { uri: fileUri, type: 'image/jpeg', name: 'id_card_front.jpg' };
-    formData.append('file', rnFile);
+    await appendFileToFormData(formData, 'file', fileUri, 'id_card_front.jpg', 'image/jpeg');
+
     const docTypeShorted = GovernmentDocumentTypeShorted[docType as GovernmentDocumentType];
     const url = `${this.mrzServiceURL}/get_template_version/?doc_type=${encodeURIComponent(docTypeShorted)}&doc_region=${encodeURIComponent(docRegion)}&postfix=${postfix}`;
 
@@ -247,8 +288,8 @@ export class KYCService {
   async extractDocumentInformation(params: { fileUri: string; docType: string; docRegion: string; token: string }): Promise<any> {
     const { fileUri, docType, docRegion, token } = params;
     const formData = new FormData();
-    const rnFile: any = { uri: fileUri, type: 'image/jpeg', name: 'id_card_front.jpg' };
-    formData.append('file', rnFile);
+    await appendFileToFormData(formData, 'file', fileUri, 'id_card_front.jpg', 'image/jpeg');
+
 
     const url = `${this.textExtractionServiceURL}/extract_doc_information/?doc_type=${encodeURIComponent(docType)}&doc_region=${encodeURIComponent(docRegion)}`;
     const attempt = async () => {
@@ -271,11 +312,21 @@ export class KYCService {
     }
   }
   // STEP 2 - barcode extraction
-  async extractBarcode(params: { fileUri: string; token: string }): Promise<any> {
+  async extractBarcode(params: { fileUri: string; token: string }, env: KycEnvironment = 'PRODUCTION'): Promise<any> {
+    // SANDBOX mode: skip AI verification and return mock response
+    if (env === 'SANDBOX') {
+      console.log("SANDBOX mode: Skipping AI barcode extraction");
+      logger.log("SANDBOX mode: Returning mock barcode response");
+      return {
+        barcode_data: 'SANDBOX_MOCK_BARCODE_DATA',
+        card_obb: { x: 50, y: 50, width: 200, height: 200 }
+      };
+    }
+
     const { fileUri, token } = params;
     const formData = new FormData();
-    const rnFile: any = { uri: fileUri, type: 'image/jpeg', name: 'id_card_back.jpg' };
-    formData.append('file', rnFile);
+    await appendFileToFormData(formData, 'file', fileUri, 'id_card_back.jpg', 'image/jpeg');
+
 
     const url = `${this.barcodeServiceURL}/decode_barcode/`;
     const attempt = async () => {
@@ -300,11 +351,29 @@ export class KYCService {
     }
   }
   // STEP 3 - MRZ TEXT EXTRACTION
-  async extractMrzText(params: { fileUri: string; docType: string; docRegion: string; postfix?: string; token: string; template_path: string; mrz_type: string }): Promise<any> {
+  async extractMrzText(params: { fileUri: string; docType: string; docRegion: string; postfix?: string; token: string; template_path: string; mrz_type: string }, env: KycEnvironment = 'PRODUCTION'): Promise<any> {
+    // SANDBOX mode: skip AI verification and return mock response
+    if (env === 'SANDBOX') {
+      console.log("SANDBOX mode: Skipping AI MRZ extraction");
+      logger.log("SANDBOX mode: Returning mock MRZ response");
+      const { docType, docRegion, postfix = 'back', mrz_type } = params;
+      return {
+        success: true,
+        parsed_data: {
+          status: 'success',
+          document_type: docType,
+          mrz_type: mrz_type || 'TD1',
+          doc_region: docRegion,
+          postfix: postfix
+        },
+        card_obb: { x: 50, y: 50, width: 200, height: 200 }
+      };
+    }
+
     const { fileUri, docType, docRegion, postfix = 'back', token, template_path, mrz_type } = params;
     const formData = new FormData();
-    const rnFile: any = { uri: fileUri, type: 'image/jpeg', name: 'id_card_back.jpg' };
-    formData.append('file', rnFile);
+    await appendFileToFormData(formData, 'file', fileUri, 'id_card_back.jpg', 'image/jpeg');
+
     const docTypeShorted = GovernmentDocumentTypeShorted[docType as GovernmentDocumentType];
     logger.log("docTypeShorted", docTypeShorted, docRegion, postfix);
 
@@ -335,13 +404,24 @@ export class KYCService {
   }
 
   // STEP 2 - SELFIE VALIDATION
-  async recognizeFace(params: { idPhotoUri: string; selfiePhotoUri: string }): Promise<{ is_match: boolean; similarity: number; id_bbox?: number[]; selfie_bbox?: number[] }> {
+  async recognizeFace(params: { idPhotoUri: string; selfiePhotoUri: string }, env: KycEnvironment = 'PRODUCTION'): Promise<{ is_match: boolean; similarity: number; id_bbox?: number[]; selfie_bbox?: number[] }> {
+    // SANDBOX mode: skip AI verification and return mock response
+    if (env === 'SANDBOX') {
+      console.log("SANDBOX mode: Skipping AI face recognition");
+      logger.log("SANDBOX mode: Returning mock face recognition response");
+      return {
+        is_match: true,
+        similarity: 0.95,
+        id_bbox: [50, 50, 200, 200],
+        selfie_bbox: [50, 50, 200, 200]
+      };
+    }
+
     const { idPhotoUri, selfiePhotoUri } = params;
     const formData = new FormData();
-    const idFile: any = { uri: idPhotoUri, type: 'image/jpeg', name: 'id_card_photo.jpg' };
-    const selfieFile: any = { uri: selfiePhotoUri, type: 'image/jpeg', name: 'selfie_final.jpg' };
-    formData.append('id_photo', idFile);
-    formData.append('selfie_photo', selfieFile);
+    await appendFileToFormData(formData, 'id_photo', idPhotoUri, 'id_card_photo.jpg', 'image/jpeg');
+    await appendFileToFormData(formData, 'selfie_photo', selfiePhotoUri, 'selfie_final.jpg', 'image/jpeg');
+
 
     const res = await axios.post(`${this.faceServiceURL}/recognize_face/`, formData, { timeout: 45000 });
     if (res.data?.detail) throw new Error(res.data.detail);
@@ -375,7 +455,7 @@ export class KYCService {
         "status": "PENDING",
         "metadata": {},
       }
-      const res = await axios.post<SessionResponse>(`${this.backendServiceURL}/verification/sessions/`,
+      const res = await axios.post<SessionResponse>(`${KYCConfig.getBackendUrl()}/verification/sessions/`,
         data, {
         headers: {
           'Content-Type': 'application/json',
@@ -419,7 +499,7 @@ export class KYCService {
         ...({ session_id: session_id }),
         timestamp: new Date().toISOString()
       }
-      const url = `${this.backendServiceURL}/verification/api/kyc/sessions/${session_id}/steps/${step}/`;
+      const url = `${KYCConfig.getBackendUrl()}/verification/api/kyc/sessions/${session_id}/steps/${step}/`;
 
 
       const logPayload = truncateFields({ payloadData, session_id, step });
@@ -448,7 +528,7 @@ export class KYCService {
   async getVerificationResult(session_id: string): Promise<VerificationResult> {
     try {
       const token = await authentification();
-      const url = `${this.backendServiceURL}/verification/api/kyc/result/?session_id=${session_id}`;
+      const url = `${KYCConfig.getBackendUrl()}/verification/api/kyc/result/?session_id=${session_id}`;
       const res = await axios.get<VerificationResult>(url,
         { headers: { 'Content-Type': 'application/json', 'Authorization': `Bearer ${token}` } });
       logger.log('getVerificationResult res', JSON.stringify(truncateFields(res.data), null, 2));

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/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>;
@@ -487,6 +493,7 @@ export interface UseTemplateReturn {
   isComplete: boolean;
   getLocalizedText: (text: LocalizedText) => string;
   initializeSession: () => Promise<void>;
+  env: 'PRODUCTION' | 'SANDBOX';
 }
 
 
@@ -646,7 +653,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 +678,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 +762,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/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;