@transfergratis/react-native-sdk 0.1.24 → 0.1.25

package/src/components/KYCElements/PhoneVerificationTemplate.tsx

@@ -0,0 +1,253 @@
+import React, { useState } from 'react';
+import { View, Text, StyleSheet, TextInput, TouchableOpacity, Alert } from 'react-native';
+import { TemplateComponent, LocalizedText } from '../../types/KYC.types';
+import { useTemplateKYCFlowContext } from '../../hooks/useTemplateKYCFlow';
+import { useI18n } from '../../hooks/useI18n';
+import { Button } from '../ui/Button';
+
+interface PhoneVerificationTemplateProps {
+    component: TemplateComponent;
+    value?: any;
+    onValueChange: (data: any) => void;
+    error?: string;
+    language?: string;
+}
+
+type VerificationStep = 'phone' | 'otp';
+
+export const PhoneVerificationTemplate: React.FC<PhoneVerificationTemplateProps> = ({
+    component,
+    value,
+    onValueChange,
+    error: propError,
+}) => {
+    const { actions, getLocalizedText } = useTemplateKYCFlowContext();
+    const { t } = useI18n();
+    // const config = component.config as PhoneVerificationConfig;
+
+    // State
+    const [step, setStep] = useState<VerificationStep>('phone');
+    const [phone, setPhone] = useState('');
+    const [otp, setOtp] = useState('');
+    const [localError, setLocalError] = useState<string | null>(null);
+    const [isSimulating, setIsSimulating] = useState(false);
+
+    const title = getLocalizedText(component.labels as LocalizedText);
+    const instructions = getLocalizedText(component.instructions as LocalizedText);
+
+    // Determine button text based on step
+    const verifyButtonText = getLocalizedText((component.ui as any).buttonText) || t('common.verify') || 'Verify';
+    const sendButtonText = t('common.sendCode') || 'Send Verification Code';
+    const buttonText = step === 'phone' ? sendButtonText : verifyButtonText;
+
+    const handleSendCode = () => {
+        if (!phone || phone.length < 5) {
+            setLocalError(t('errors.invalidPhone') || 'Please enter a valid phone number');
+            return;
+        }
+
+        setLocalError(null);
+        setIsSimulating(true);
+
+        // Simulate API call to send code
+        setTimeout(() => {
+            setIsSimulating(false);
+            setStep('otp');
+        }, 1500);
+    };
+
+    const handleVerifyCode = () => {
+        if (!otp || otp.length < 4) {
+            setLocalError(t('errors.invalidCode') || 'Please enter the 6-digit code');
+            return;
+        }
+
+        setLocalError(null);
+        setIsSimulating(true);
+
+        // Simulate verification API
+        setTimeout(() => {
+            setIsSimulating(false);
+
+            // Mock validation logic
+            if (otp === '123456') {
+                onValueChange({ phone, otp, verified: true });
+                actions.nextComponent();
+            } else {
+                setLocalError(t('errors.wrongCode') || 'Invalid verification code. Try 123456');
+            }
+        }, 1500);
+    };
+
+    const onChangePhone = (text: string) => {
+        setPhone(text);
+        if (localError) setLocalError(null);
+    };
+
+    const onChangeOtp = (text: string) => {
+        setOtp(text);
+        if (localError) setLocalError(null);
+    };
+
+    const handleBackToPhone = () => {
+        setStep('phone');
+        setOtp('');
+        setLocalError(null);
+    };
+
+    return (
+        <View style={styles.container}>
+            <Text style={styles.title}>{title}</Text>
+            <Text style={styles.instructions}>
+                {step === 'phone' ? instructions : (t('kyc.enterCodeSent') || `Please enter the code sent to ${phone}`)}
+            </Text>
+
+            <View style={styles.contentContainer}>
+                {step === 'phone' ? (
+                    <View style={styles.inputContainer}>
+                        <Text style={styles.label}>{t('common.phone') || 'Phone Number'}</Text>
+                        <TextInput
+                            style={styles.input}
+                            placeholder="+1234567890"
+                            value={phone}
+                            onChangeText={onChangePhone}
+                            keyboardType="phone-pad"
+                            autoComplete="tel"
+                            editable={!isSimulating}
+                        />
+                    </View>
+                ) : (
+                    <View style={styles.inputContainer}>
+                        <Text style={styles.label}>{t('common.verificationCode') || 'Verification Code'}</Text>
+                        <TextInput
+                            style={styles.input}
+                            placeholder="123456"
+                            value={otp}
+                            onChangeText={onChangeOtp}
+                            keyboardType="number-pad"
+                            maxLength={6}
+                            editable={!isSimulating}
+                        />
+                        <TouchableOpacity onPress={handleBackToPhone} style={styles.changeLink}>
+                            <Text style={styles.changeText}>{t('common.back') || 'Change number'}</Text>
+                        </TouchableOpacity>
+                    </View>
+                )}
+
+                {(localError || propError) && (
+                    <Text style={styles.errorText}>{localError || propError}</Text>
+                )}
+
+                <Button
+                    title={isSimulating ? (t('common.processing') || 'Processing...') : buttonText}
+                    onPress={step === 'phone' ? handleSendCode : handleVerifyCode}
+                    style={styles.button}
+                    disabled={
+                        isSimulating ||
+                        (step === 'phone' ? !phone : !otp)
+                    }
+                />
+
+                {step === 'otp' && (
+                    <TouchableOpacity
+                        onPress={() => {
+                            // Resend logic
+                            Alert.alert(
+                                t('common.codeResent') || 'Code Resent',
+                                t('common.codeResentMessage', { email: phone }) || 'Code resent to ' + phone
+                            );
+                        }}
+                        style={styles.resendButton}
+                        disabled={isSimulating}
+                    >
+                        <Text style={styles.resendText}>{t('common.resendCode') || 'Resend Code'}</Text>
+                    </TouchableOpacity>
+                )}
+            </View>
+        </View>
+    );
+};
+
+const styles = StyleSheet.create({
+    container: {
+        padding: 24,
+        backgroundColor: 'white',
+        borderRadius: 16,
+        margin: 16,
+        shadowColor: '#000',
+        shadowOffset: { width: 0, height: 4 },
+        shadowOpacity: 0.1,
+        shadowRadius: 12,
+        elevation: 5,
+        width: '95%',
+    },
+    title: {
+        fontSize: 24,
+        fontWeight: '700',
+        marginBottom: 8,
+        color: '#1a1a1a',
+        textAlign: 'center',
+    },
+    instructions: {
+        fontSize: 16,
+        color: '#666',
+        marginBottom: 32,
+        lineHeight: 24,
+        textAlign: 'center',
+    },
+    contentContainer: {
+        // width: '100%',
+    },
+    inputContainer: {
+        marginBottom: 24,
+    },
+    label: {
+        fontSize: 14,
+        fontWeight: '600',
+        color: '#333',
+        marginBottom: 8,
+        marginLeft: 4,
+    },
+    input: {
+        borderWidth: 1,
+        borderColor: '#e0e0e0',
+        padding: 16,
+        borderRadius: 12,
+        fontSize: 16,
+        backgroundColor: '#f8f9fa',
+        color: '#333',
+    },
+    errorText: {
+        color: '#dc2626',
+        marginBottom: 16,
+        fontSize: 14,
+        textAlign: 'center',
+        backgroundColor: '#fee2e2',
+        padding: 8,
+        borderRadius: 8,
+        overflow: 'hidden',
+    },
+    button: {
+        height: 50,
+        borderRadius: 12,
+        width: "100%"
+    },
+    changeLink: {
+        alignSelf: 'flex-end',
+        marginTop: 8,
+    },
+    changeText: {
+        color: '#2DBD60',
+        fontSize: 14,
+        fontWeight: '500',
+    },
+    resendButton: {
+        marginTop: 16,
+        alignItems: 'center',
+    },
+    resendText: {
+        color: '#666',
+        fontSize: 14,
+        textDecorationLine: 'underline',
+    },
+});

package/src/components/KYCElements/SelfieCaptureTemplate.tsx

@@ -33,7 +33,7 @@ export const SelfieCaptureTemplate: React.FC<SelfieCaptureTemplateProps> = ({
   const { t } = useI18n();
   // const config = component.config as SelfieConfig;
   const orientations: OrientationType[] = (['center','left','right']) as OrientationType[];
-  const { actions, state, } = useTemplateKYCFlowContext();
+  const { actions, state, env } = useTemplateKYCFlowContext();
 
   const [silentCaptureResult, setSilentCaptureResult] = useState<ISilentCaptureResult>({ success: false, isAnalyzing: false });
 
@@ -152,10 +152,13 @@ export const SelfieCaptureTemplate: React.FC<SelfieCaptureTemplateProps> = ({
     }
     if (result.success && result.path) {
       setSilentCaptureResult((prev) => ({ ...prev, isAnalyzing: true, success: false, error: '' }));
-      selfieVerification(result.path).then((response) => {
+      selfieVerification(result.path, env).then((response) => {
         if (response.length > 0) {
           const res = response[0];
-          if (res?.orientation_direction === getOrientationOpposite(currentOrientation) && res?.capture) {
+          // In SANDBOX mode, always accept the result regardless of orientation
+          if (env === 'SANDBOX' && res?.capture) {
+            setSilentCaptureResult((prev) => ({ ...prev, isAnalyzing: false, success: true, error: '', path: result.path }));
+          } else if (res?.orientation_direction === getOrientationOpposite(currentOrientation) && res?.capture) {
             setSilentCaptureResult((prev) => ({ ...prev, isAnalyzing: false, success: true, error: '', path: result.path }));
           } else {
             setSilentCaptureResult((prev) => ({ ...prev, isAnalyzing: false, success: false, error: 'Le selfie n\'est pas correct' }));

package/src/components/TemplateKYCExample.tsx

@@ -2,8 +2,11 @@ import React from 'react';
 import { View, SafeAreaView } from 'react-native';
 import { TemplateKYCFlow } from './TemplateKYCFlowRefactored';
 import { KYCTemplate, VerificationState } from '../types/KYC.types';
+import { KycEnvironment } from '../types/env.types';
+
+
+
 
-// Template JSON basé sur votre exemple
 const advancedVerificationTemplate: KYCTemplate = {
   id: 1,
   name: {
@@ -103,7 +106,7 @@ const advancedVerificationTemplate: KYCTemplate = {
         allowed_formats: ["jpg", "png"],
         max_size_mb: 5,
         document_types: ["drivers_licence", "passport", "drivers_licence", "national_id"],
-         
+
       } as const
     },
     {
@@ -130,42 +133,21 @@ const advancedVerificationTemplate: KYCTemplate = {
         orientations: ["center", "left", "right"]
       } as const
     },
-    // {
-    //   id: 4,
-    //   type: "file_upload" as const,
-    //   order: 6,
-    //   labels: {
-    //     en: "Upload proof of address",
-    //     fr: "Téléversez un justificatif de domicile"
-    //   },
-    //   instructions: {
-    //     en: "Upload a recent utility bill or bank statement (PDF, JPG, PNG).",
-    //     fr: "Téléversez une facture récente ou un relevé bancaire (PDF, JPG, PNG)."
-    //   },
-    //   ui: {
-    //     icon: "file-upload-icon.png",
-    //     themeColor: "#2DBD60",
-    //     buttonText: { en: "Upload", fr: "Téléverser" }
-    //   },
-    //   config: {
-    //     allowed_formats: ["pdf", "jpg", "png"],
-    //     max_size_mb: 10,
-    //     required: true
-    //   } as const
-    // },
-
   ]
 };
 
-export const TemplateKYCExample: React.FC<{ 
-  onComplete: (data: VerificationState) => void; 
-  onCancel: () => void; 
-  onError: (error: string) => void; 
-  language: string; 
+export const TemplateKYCExample: React.FC<{
+  onComplete: (data: VerificationState) => void;
+  onCancel: () => void;
+  onError: (error: string) => void;
+  language: string;
   API_KEY?: string;
   templateId?: string;
   template?: KYCTemplate;
-}> = ({ onComplete, onCancel, onError, language, API_KEY, templateId, template }) => {
+  env?: KycEnvironment;
+  existingSessionId?: string;
+  initialStep?: number;
+}> = ({ onComplete, onCancel, onError, language, API_KEY, templateId, template, env = 'PRODUCTION', existingSessionId, initialStep }) => {
   const handleComplete = (data: VerificationState) => {
     console.log('KYC Template completed with data:', data);
     onComplete(data);
@@ -182,24 +164,27 @@ export const TemplateKYCExample: React.FC<{
     onError(error);
   };
 
+  // Transform backend template to SDK format
   // Determine which template to use: prefer templateId for dynamic loading, then template prop, then fallback to hardcoded
   const templateToUse = templateId ? undefined : (template || advancedVerificationTemplate);
 
   return (
-    <SafeAreaView style={{ flex: 1 , paddingVertical:25}}>
-    <View style={{ flex: 1 }}>
-      <TemplateKYCFlow
-        template={templateToUse}
-        templateId={templateId}
-        onComplete={handleComplete}
-        onError={handleError}
-        onCancel={handleCancel}
-        language={language} // ou "en" pour l'anglais
-        API_KEY={API_KEY}
-      />
-    </View>
-  </SafeAreaView>
+    <SafeAreaView style={{ flex: 1, paddingVertical: 25 }}>
+      <View style={{ flex: 1 }}>
+        <TemplateKYCFlow
+          template={templateToUse}
+          templateId={templateId}
+          onComplete={handleComplete}
+          onError={handleError}
+          onCancel={handleCancel}
+          language={language} // ou "en" pour l'anglais
+          API_KEY={API_KEY}
+          env={env}
+          existingSessionId={existingSessionId}
+          initialStep={initialStep}
+        />
+      </View>
+    </SafeAreaView>
   );
 };
 
- 

package/src/components/TemplateKYCFlowRefactored.tsx

@@ -14,6 +14,11 @@ import { ReviewSubmitTemplate } from './KYCElements/ReviewSubmitTemplate';
 import { VerificationProgressTemplate } from './KYCElements/VerificationProgressTemplate';
 import { useTemplateLoader } from '../hooks/useTemplateLoader';
 import { WelcomeTemplate } from './KYCElements/WelcomeTemplate';
+import { EmailVerificationTemplate } from './KYCElements/EmailVerificationTemplate';
+import { PhoneVerificationTemplate } from './KYCElements/PhoneVerificationTemplate';
+import { PersonalInformationTemplate } from './KYCElements/PersonalInformationTemplate';
+import { AdditionalDocumentsTemplate } from './KYCElements/AdditionalDocumentsTemplate';
+import { KycEnvironment } from '../types/env.types';
 
 interface TemplateKYCFlowProps {
   template?: KYCTemplate;        // Format SDK direct (existing, now optional)
@@ -23,6 +28,9 @@ interface TemplateKYCFlowProps {
   language?: string;
   onCancel?: () => void;
   API_KEY?: string;              // Required if templateId is used
+  env?: KycEnvironment;           // Environment mode: PRODUCTION or SANDBOX
+  existingSessionId?: string;
+  initialStep?: number;          // Initial step index to resume verification
 }
 
 export const TemplateKYCFlow: React.FC<TemplateKYCFlowProps> = ({
@@ -33,6 +41,9 @@ export const TemplateKYCFlow: React.FC<TemplateKYCFlowProps> = ({
   language = 'fr',
   onCancel,
   API_KEY,
+  env = 'PRODUCTION',
+  existingSessionId,
+  initialStep,
 }) => {
   const { t } = useI18n();
   const { template: loadedTemplate, isLoading, error, loadTemplate } = useTemplateLoader();
@@ -123,6 +134,9 @@ export const TemplateKYCFlow: React.FC<TemplateKYCFlowProps> = ({
       onCancel={OnCancel}
       initialLanguage={language}
       apiKey={API_KEY}
+      env={env}
+      existingSessionId={existingSessionId}
+      initialStep={initialStep}
     >
       <TemplateKYCFlowContent onCancel={OnCancel} />
     </TemplateKYCFlowProvider>
@@ -187,6 +201,18 @@ const TemplateKYCFlowContent: React.FC<{ onCancel?: () => void }> = ({ onCancel
       case 'review_submit':
         return <ReviewSubmitTemplate {...commonProps} />;
 
+      case 'email_verification':
+        return <EmailVerificationTemplate {...commonProps} />;
+
+      case 'phone_verification':
+        return <PhoneVerificationTemplate {...commonProps} />;
+
+      case 'personal_information':
+        return <PersonalInformationTemplate {...commonProps} />;
+
+      case 'additional_documents':
+        return <AdditionalDocumentsTemplate {...commonProps} />;
+
       case 'verification_progress':
         return <VerificationProgressTemplate {...commonProps} />;
 
@@ -238,7 +264,7 @@ const TemplateKYCFlowContent: React.FC<{ onCancel?: () => void }> = ({ onCancel
         ) : null}
 
         {/* Contenu principal */}
-        <ScrollView 
+        <ScrollView
           style={styles.scrollView}
           contentContainerStyle={styles.content}
           showsVerticalScrollIndicator={Platform.OS === 'web'}

package/src/config/KYCConfig.ts

@@ -0,0 +1,34 @@
+import { BackendEnvironment } from '../types/env.types';
+
+class KYCConfig {
+    private static instance: KYCConfig;
+    private backendEnvironment: BackendEnvironment = 'PRODUCTION';
+
+    private backendUrls: Record<BackendEnvironment, string> = {
+        PRODUCTION: 'https://service.sanctumkey.com/api/v1',
+        TEST: 'https://test-service.sanctumkey.com/api/v1', // Placeholder URL
+    };
+
+    private constructor() { }
+
+    public static getInstance(): KYCConfig {
+        if (!KYCConfig.instance) {
+            KYCConfig.instance = new KYCConfig();
+        }
+        return KYCConfig.instance;
+    }
+
+    public setBackendEnvironment(env: BackendEnvironment) {
+        this.backendEnvironment = env;
+    }
+
+    public getBackendUrl(): string {
+        return this.backendUrls[this.backendEnvironment];
+    }
+
+    public getBackendEnvironment(): BackendEnvironment {
+        return this.backendEnvironment;
+    }
+}
+
+export default KYCConfig.getInstance();

package/src/config/allowedDomains.ts

@@ -16,6 +16,7 @@ const DEFAULT_CONFIG: AllowedDomainConfig = {
     'www.transfergratis.com',
     'admin.transfergratis.com',
     'dashboard.transfergratis.com',
+    'preweb.transfergratis.net',
     // Add other trusted domains here
   ],
   enforceHttps: true,
@@ -45,7 +46,7 @@ export const getAllowedDomainsConfig = (): AllowedDomainConfig => {
  */
 export const isDomainAllowed = (domain: string): boolean => {
   const config = getAllowedDomainsConfig();
-  
+
   // Allow localhost in development
   if (config.allowLocalhost && (domain === 'localhost' || domain.startsWith('127.0.0.1'))) {
     return true;
@@ -57,12 +58,12 @@ export const isDomainAllowed = (domain: string): boolean => {
     if (domain === allowedDomain) {
       return true;
     }
-    
+
     // Subdomain match (e.g., app.transfergratis.com matches transfergratis.com)
     if (domain.endsWith('.' + allowedDomain)) {
       return true;
     }
-    
+
     return false;
   });
 };
@@ -71,30 +72,10 @@ export const isDomainAllowed = (domain: string): boolean => {
  * Validate if a URL is allowed for callback
  */
 export const isCallbackUrlAllowed = (url: string): { allowed: boolean; reason?: string } => {
-  const config = getAllowedDomainsConfig();
-
   try {
-    const urlObj = new URL(url);
-
-    // Check protocol
-    if (config.enforceHttps && urlObj.protocol !== 'https:') {
-      // Allow http for localhost in development
-      if (!(config.allowLocalhost && (urlObj.hostname === 'localhost' || urlObj.hostname.startsWith('127.0.0.1')))) {
-        return {
-          allowed: false,
-          reason: 'HTTPS required for callback URLs',
-        };
-      }
-    }
-
-    // Check domain
-    if (!isDomainAllowed(urlObj.hostname)) {
-      return {
-        allowed: false,
-        reason: `Domain '${urlObj.hostname}' is not in the allowed list`,
-      };
-    }
-
+    // Check if valid URL
+    new URL(url);
+    // Allow all URLs for redirection as requested
     return { allowed: true };
   } catch (error) {
     return {

package/src/hooks/useOrientationVideo.ts

@@ -6,6 +6,7 @@ import {
   OrientationVideoResult,
   OrientationType 
 } from '../types/KYC.types';
+import { KycEnvironment } from '../types/env.types';
 import kycService from '../modules/api/KYCService';
 
 export interface UseOrientationVideoReturn {
@@ -15,8 +16,8 @@ export interface UseOrientationVideoReturn {
 }
 
 export const useOrientationVideo = (
-  
-  config?: Partial<OrientationVideoConfig>
+  config?: Partial<OrientationVideoConfig>,
+  env: KycEnvironment = 'PRODUCTION'
 ): UseOrientationVideoReturn => {
   const defaultConfig: OrientationVideoConfig = {
     duration: 10,
@@ -66,7 +67,7 @@ export const useOrientationVideo = (
     setState(prev => ({ ...prev, isProcessing: true, error: null }));
 
     try {
-      const result = await kycService.processOrientationVideo(state.recordedVideo);
+      const result = await kycService.processOrientationVideo(state.recordedVideo, env);
       
       if (result.success && result.data) {
         setState(prev => ({ 
@@ -93,7 +94,7 @@ export const useOrientationVideo = (
       }));
       throw error;
     }
-  }, [state.recordedVideo, state.isProcessing, kycService]);
+  }, [state.recordedVideo, state.isProcessing, env]);
 
   const retake = useCallback(() => {
     if (state.retakeCount >= finalConfig.maxRetakes) {