@sanctum-key/react-native-sdk 1.0.8 → 1.0.9

package/src/components/KYCElements/PhoneVerificationTemplate.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useRef, useEffect } from 'react';
-import { View, Text, StyleSheet, TextInput, TouchableOpacity, Alert, Pressable, Modal, FlatList } from 'react-native';
+import { View, Text, StyleSheet, TextInput, TouchableOpacity, Alert, Pressable } from 'react-native';
 import { TemplateComponent, LocalizedText } from '../../types/KYC.types';
 import { useTemplateKYCFlowContext } from '../../hooks/useTemplateKYCFlow';
 import { useI18n } from '../../hooks/useI18n';
@@ -17,19 +17,6 @@ interface PhoneVerificationTemplateProps {
 type VerificationStep = 'phone' | 'otp';
 const CODE_LENGTH = 6;
 
-// Easily expand this list with any countries your app supports
-const COUNTRY_CODES = [
-    { code: '+254', label: '🇰🇪 Kenya (+254)' },
-    { code: '+255', label: '🇹🇿 Tanzania (+255)' },
-    { code: '+256', label: '🇺🇬 Uganda (+256)' },
-    { code: '+250', label: '🇷🇼 Rwanda (+250)' },
-    { code: '+234', label: '🇳🇬 Nigeria (+234)' },
-    { code: '+27',  label: '🇿🇦 South Africa (+27)' },
-    { code: '+44',  label: '🇬🇧 UK (+44)' },
-    { code: '+1',   label: '🇺🇸 US/Canada (+1)' },
-    { code: '+91',  label: '🇮🇳 India (+91)' },
-];
-
 export const PhoneVerificationTemplate: React.FC<PhoneVerificationTemplateProps> = ({
     component,
     value,
@@ -44,16 +31,10 @@ export const PhoneVerificationTemplate: React.FC<PhoneVerificationTemplateProps>
 
     // State
     const [step, setStep] = useState<VerificationStep>('phone');
-    const [countryCode, setCountryCode] = useState('+254');
     const [phone, setPhone] = useState('');
-    const [showCountryPicker, setShowCountryPicker] = useState(false);
-    
     const [otp, setOtp] = useState('');
     const [localError, setLocalError] = useState<string | null>(null);
     const [isSimulating, setIsSimulating] = useState(false);
-    
-    // 🚨 NEW: Track actual focus state for visual feedback
-    const [isInputFocused, setIsInputFocused] = useState(false); 
 
     const inputRef = useRef<TextInput>(null);
 
@@ -71,21 +52,6 @@ export const PhoneVerificationTemplate: React.FC<PhoneVerificationTemplateProps>
         }
     }, [otp]);
 
-    // --- AUTO FOCUS LOGIC ---
-    useEffect(() => {
-        let focusTimer: ReturnType<typeof setTimeout>;
-        
-        if (step === 'otp' && !isSimulating) {
-            focusTimer = setTimeout(() => {
-                inputRef.current?.focus();
-            }, 100); 
-        }
-        
-        return () => {
-            if (focusTimer) clearTimeout(focusTimer);
-        };
-    }, [step, isSimulating]); // 🚨 Must watch both states
-
     const handleSendCode = async () => {
         const trimmedPhone = phone.trim();
         if (!trimmedPhone || trimmedPhone.length < 5) {
@@ -96,11 +62,11 @@ export const PhoneVerificationTemplate: React.FC<PhoneVerificationTemplateProps>
         setLocalError(null);
         setIsSimulating(true);
 
-        const fullPhoneNumber = `${countryCode}${trimmedPhone}`;
-
         try {
-            await kycService.sendWhatsAppVerificationCode(sessionId, fullPhoneNumber, auth);
+            await kycService.sendWhatsAppVerificationCode(sessionId, trimmedPhone, auth);
             setStep('otp');
+            // Auto-focus the OTP input shortly after switching steps
+            setTimeout(() => inputRef.current?.focus(), 100);
         } catch (err: any) {
             const msg = errorMessage(err) ?? err?.message ?? (t('errors.sendCodeFailed') || 'Failed to send verification code');
             setLocalError(typeof msg === 'string' ? msg : JSON.stringify(msg));
@@ -117,33 +83,29 @@ export const PhoneVerificationTemplate: React.FC<PhoneVerificationTemplateProps>
 
         setLocalError(null);
         setIsSimulating(true);
-        
-        const fullPhoneNumber = `${countryCode}${phone.trim()}`;
 
         try {
-            await kycService.verifyWhatsAppCode(sessionId, otp.trim(), fullPhoneNumber, auth);
-            
-            const data = { phone: fullPhoneNumber, otp, verified: true };
+            await kycService.verifyWhatsAppCode(sessionId, otp.trim(), auth);
+            const data = { phone, otp, verified: true };
             onValueChange(data);
             actions.nextComponent(data);
         } catch (err: any) {
             const msg = errorMessage(err) ?? err?.message ?? (t('errors.wrongCode') || 'Invalid verification code');
             setLocalError(typeof msg === 'string' ? msg : JSON.stringify(msg));
-            setOtp('');
-            // Refocus so they can type immediately after an error
-            inputRef.current?.focus(); 
+            setOtp(''); // Clear the boxes on error so they can type again
+            inputRef.current?.focus();
         } finally {
             setIsSimulating(false);
         }
     };
 
     const onChangePhone = (text: string) => {
-        const cleaned = text.replace(/[^0-9]/g, '');
-        setPhone(cleaned);
+        setPhone(text);
         if (localError) setLocalError(null);
     };
 
     const onChangeOtp = (text: string) => {
+        // Only allow numbers
         const cleaned = text.replace(/[^0-9]/g, '');
         setOtp(cleaned);
         if (localError) setLocalError(null);
@@ -161,20 +123,16 @@ export const PhoneVerificationTemplate: React.FC<PhoneVerificationTemplateProps>
             <Pressable style={styles.otpBoxesContainer} onPress={() => inputRef.current?.focus()}>
                 {boxes.map((_, index) => {
                     const digit = otp[index] || '';
+                    const isCurrent = index === otp.length;
                     const isFilled = index < otp.length;
-                    
-                    // 🚨 NEW: Only highlight if the input is ACTUALLY focused. 
-                    // Highlights the next empty box, or the last box if full.
-                    const isActiveIndex = index === otp.length || (index === CODE_LENGTH - 1 && otp.length === CODE_LENGTH);
-                    const isCurrent = isInputFocused && isActiveIndex;
 
                     return (
                         <View 
                             key={index} 
                             style={[
                                 styles.otpBox, 
-                                isFilled && styles.otpBoxFilled,
-                                isCurrent && styles.otpBoxActive // Active overrides filled
+                                isCurrent && styles.otpBoxActive,
+                                isFilled && styles.otpBoxFilled
                             ]}
                         >
                             <Text style={styles.otpBoxText}>{digit}</Text>
@@ -189,41 +147,30 @@ export const PhoneVerificationTemplate: React.FC<PhoneVerificationTemplateProps>
         <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 ${countryCode} ${phone}`)}
+                {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>
-                        
-                        <View style={styles.phoneInputRow}>
-                            <TouchableOpacity 
-                                style={styles.countryPickerBtn} 
-                                onPress={() => setShowCountryPicker(true)}
-                                disabled={isSimulating}
-                            >
-                                <Text style={styles.countryPickerText}>{countryCode}</Text>
-                                <Text style={styles.dropdownIcon}>▼</Text>
-                            </TouchableOpacity>
-
-                            <TextInput
-                                style={styles.phoneInput}
-                                placeholder="712 345 678"
-                                value={phone}
-                                onChangeText={onChangePhone}
-                                keyboardType="phone-pad"
-                                autoComplete="tel"
-                                editable={!isSimulating}
-                            />
-                        </View>
+                        <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>
                         
                         <View style={styles.otpWrapper}>
-                            {renderOtpBoxes()}     
+                            {renderOtpBoxes()}
+                            {/* Hidden TextInput overlaid to handle native keyboard & pasting seamlessly */}
                             <TextInput
                                 ref={inputRef}
                                 style={styles.hiddenInput}
@@ -234,8 +181,6 @@ export const PhoneVerificationTemplate: React.FC<PhoneVerificationTemplateProps>
                                 editable={!isSimulating}
                                 textContentType="oneTimeCode"
                                 caretHidden={true}
-                                onFocus={() => setIsInputFocused(true)}
-                                onBlur={() => setIsInputFocused(false)}
                             />
                         </View>
 
@@ -265,15 +210,12 @@ export const PhoneVerificationTemplate: React.FC<PhoneVerificationTemplateProps>
                             if (isSimulating) return;
                             setLocalError(null);
                             setIsSimulating(true);
-                            const fullPhoneNumber = `${countryCode}${phone.trim()}`;
                             try {
-                                await kycService.sendWhatsAppVerificationCode(sessionId, fullPhoneNumber, auth);
+                                await kycService.sendWhatsAppVerificationCode(sessionId, phone.trim(), auth);
                                 Alert.alert(
                                     t('common.codeResent') || 'Code Resent',
-                                    t('common.codeResentMessage', { email: fullPhoneNumber }) || 'Code resent to ' + fullPhoneNumber
+                                    t('common.codeResentMessage', { email: phone }) || 'Code resent to ' + phone
                                 );
-                                // Refocus after resending
-                                inputRef.current?.focus();
                             } catch (err: any) {
                                 const msg = errorMessage(err) ?? err?.message ?? (t('errors.sendCodeFailed') || 'Failed to send code');
                                 setLocalError(typeof msg === 'string' ? msg : JSON.stringify(msg));
@@ -288,51 +230,11 @@ export const PhoneVerificationTemplate: React.FC<PhoneVerificationTemplateProps>
                     </TouchableOpacity>
                 )}
             </View>
-
-            {/* COUNTRY PICKER MODAL */}
-            <Modal
-                visible={showCountryPicker}
-                animationType="slide"
-                transparent={true}
-                onRequestClose={() => setShowCountryPicker(false)}
-            >
-                <TouchableOpacity 
-                    style={styles.modalOverlay} 
-                    activeOpacity={1} 
-                    onPress={() => setShowCountryPicker(false)}
-                >
-                    <View style={styles.modalContent}>
-                        <View style={styles.modalHeader}>
-                            <Text style={styles.modalTitle}>Select Country</Text>
-                            <TouchableOpacity onPress={() => setShowCountryPicker(false)}>
-                                <Text style={styles.modalClose}>✕</Text>
-                            </TouchableOpacity>
-                        </View>
-                        <FlatList
-                            data={COUNTRY_CODES}
-                            keyExtractor={(item) => item.code}
-                            renderItem={({ item }) => (
-                                <TouchableOpacity 
-                                    style={styles.countryItem}
-                                    onPress={() => {
-                                        setCountryCode(item.code);
-                                        setShowCountryPicker(false);
-                                    }}
-                                >
-                                    <Text style={styles.countryItemLabel}>{item.label}</Text>
-                                    {countryCode === item.code && <Text style={styles.checkMark}>✓</Text>}
-                                </TouchableOpacity>
-                            )}
-                        />
-                    </View>
-                </TouchableOpacity>
-            </Modal>
         </View>
     );
 };
 
 const styles = StyleSheet.create({
-    // ... Keeping all previous styles identical for safety ...
     container: {
         padding: 24,
         backgroundColor: 'white',
@@ -370,35 +272,7 @@ const styles = StyleSheet.create({
         marginBottom: 8,
         marginLeft: 4,
     },
-    phoneInputRow: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        gap: 10,
-    },
-    countryPickerBtn: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        justifyContent: 'space-between',
-        borderWidth: 1,
-        borderColor: '#e0e0e0',
-        paddingHorizontal: 12,
-        paddingVertical: 16,
-        borderRadius: 12,
-        backgroundColor: '#f8f9fa',
-        minWidth: 90,
-    },
-    countryPickerText: {
-        fontSize: 16,
-        color: '#333',
-        fontWeight: '600',
-    },
-    dropdownIcon: {
-        fontSize: 12,
-        color: '#666',
-        marginLeft: 8,
-    },
-    phoneInput: {
-        flex: 1, 
+    input: {
         borderWidth: 1,
         borderColor: '#e0e0e0',
         padding: 16,
@@ -407,54 +281,6 @@ const styles = StyleSheet.create({
         backgroundColor: '#f8f9fa',
         color: '#333',
     },
-    modalOverlay: {
-        flex: 1,
-        backgroundColor: 'rgba(0,0,0,0.5)',
-        justifyContent: 'flex-end',
-    },
-    modalContent: {
-        backgroundColor: 'white',
-        borderTopLeftRadius: 24,
-        borderTopRightRadius: 24,
-        maxHeight: '60%',
-        paddingBottom: 40,
-    },
-    modalHeader: {
-        flexDirection: 'row',
-        justifyContent: 'space-between',
-        alignItems: 'center',
-        padding: 20,
-        borderBottomWidth: 1,
-        borderBottomColor: '#f0f0f0',
-    },
-    modalTitle: {
-        fontSize: 18,
-        fontWeight: '700',
-        color: '#1a1a1a',
-    },
-    modalClose: {
-        fontSize: 20,
-        color: '#666',
-        padding: 5,
-    },
-    countryItem: {
-        flexDirection: 'row',
-        justifyContent: 'space-between',
-        alignItems: 'center',
-        paddingVertical: 16,
-        paddingHorizontal: 24,
-        borderBottomWidth: 1,
-        borderBottomColor: '#f8f9fa',
-    },
-    countryItemLabel: {
-        fontSize: 16,
-        color: '#333',
-    },
-    checkMark: {
-        color: '#2DBD60',
-        fontSize: 18,
-        fontWeight: 'bold',
-    },
     otpWrapper: {
         position: 'relative',
         width: '100%',
@@ -469,7 +295,7 @@ const styles = StyleSheet.create({
     },
     otpBox: {
         width: '14%',
-        aspectRatio: 1,
+        aspectRatio: 1, // keeps it perfectly square
         borderWidth: 1,
         borderColor: '#e0e0e0',
         borderRadius: 12,
@@ -497,7 +323,7 @@ const styles = StyleSheet.create({
         left: 0,
         width: '100%',
         height: '100%',
-        opacity: 0,
+        opacity: 0, // completely invisible but handles native keyboard interactions perfectly
     },
     errorText: {
         color: '#dc2626',

package/src/components/NativeCameraView.tsx

@@ -10,7 +10,7 @@ export interface NativeCameraViewProps {
   onError?: (event: any) => void;
 }
 
-const NativeCameraViewComponent = requireNativeViewManager('SanctumKeySdk_SanctumKeySdkView');
+const NativeCameraViewComponent = requireNativeViewManager('TransfergratisSdk_TransfergratisSdkView');
 
 export const NativeCameraView: React.FC<NativeCameraViewProps> = (props) => {
   

package/src/config/KYCConfig.ts

@@ -6,7 +6,7 @@ class KYCConfig {
 
     private backendUrls: Record<BackendEnvironment, string> = {
         PRODUCTION: 'https://service.sanctumkey.com/api/v1',
-        TEST: 'https://kyc-backend.SanctumKey.net/api/v1', 
+        TEST: 'https://kyc-backend.transfergratis.net/api/v1', 
     };
 
     private constructor() { }

package/src/config/allowedDomains.ts

@@ -12,11 +12,11 @@ export interface AllowedDomainConfig {
 // Default configuration - can be overridden via environment variables
 const DEFAULT_CONFIG: AllowedDomainConfig = {
   domains: [
-    'SanctumKey.com',
-    'www.SanctumKey.com',
-    'admin.SanctumKey.com',
-    'dashboard.SanctumKey.com',
-    'preweb.SanctumKey.net',
+    'transfergratis.com',
+    'www.transfergratis.com',
+    'admin.transfergratis.com',
+    'dashboard.transfergratis.com',
+    'preweb.transfergratis.net',
     // Add other trusted domains here
   ],
   enforceHttps: true,
@@ -59,7 +59,7 @@ export const isDomainAllowed = (domain: string): boolean => {
       return true;
     }
 
-    // Subdomain match (e.g., app.SanctumKey.com matches SanctumKey.com)
+    // Subdomain match (e.g., app.transfergratis.com matches transfergratis.com)
     if (domain.endsWith('.' + allowedDomain)) {
       return true;
     }

package/src/i18n/README.md

@@ -1,4 +1,4 @@
-# 🌍 Système d'Internationalisation (i18n) - SanctumKey SDK
+# 🌍 Système d'Internationalisation (i18n) - Transfergratis SDK
 
 Ce système d'internationalisation permet de traduire facilement votre application KYC en plusieurs langues.
 

package/src/index.ts

@@ -1,4 +1,4 @@
-export * from './SanctumKeySdk.types';
+export * from './TransfergratisSdk.types';
 
 
 // Export KYC types
@@ -8,9 +8,9 @@ export * from './types/KYC.types';
 export * from './types/env.types';
 
 
-export { TemplateKYCExample as LaunchSanctumKeyKYC } from './components/TemplateKYCExample';
+export { TemplateKYCExample as LaunchTransferGratisKYC } from './components/TemplateKYCExample';
 // Backward compatibility for existing integrations using the typo.
-export { TemplateKYCExample as LauchSanctumKeyKYC } from './components/TemplateKYCExample';
+export { TemplateKYCExample as LauchTransferGratisKYC } from './components/TemplateKYCExample';
 
 // Export Template Flow Components
 export { TemplateKYCFlow } from './components/TemplateKYCFlowRefactored';

package/src/modules/api/KYCService.ts

@@ -60,10 +60,10 @@ export class KYCService {
   private baseURL: string;
   private apiKey: string;
   // Additional service base URLs (fixed as per current infra)
-  private faceServiceURL = 'https://kyc-engine.SanctumKey.net:8000';
-  private textExtractionServiceURL = 'https://kyc-engine.SanctumKey.net:8006';
-  private mrzServiceURL = 'https://kyc-engine.SanctumKey.net:8002';
-  private barcodeServiceURL = 'https://kyc-engine.SanctumKey.net:8000';
+  private faceServiceURL = 'https://kyc-engine.transfergratis.net:8000';
+  private textExtractionServiceURL = 'https://kyc-engine.transfergratis.net:8006';
+  private mrzServiceURL = 'https://kyc-engine.transfergratis.net:8002';
+  private barcodeServiceURL = 'https://kyc-engine.transfergratis.net:8000';
   private orientationServiceURL = 'http://18.188.180.154:8080';
 
   constructor(baseURL: string, apiKey: string) {
@@ -620,7 +620,7 @@ export class KYCService {
     }
   }
 
-  /** Send WhatsApp verification code. */
+  /** Send WhatsApp verification code. POST /api/v1/accounts/send-whatsapp-verification/ */
   async sendWhatsAppVerificationCode(
     sessionId: string,
     phoneNumber: string,
@@ -629,19 +629,15 @@ export class KYCService {
     const url = `${KYCConfig.getBackendUrl()}/accounts/send-whatsapp-verification/`;
     const token = auth?.apiKey ? undefined : (auth?.token ?? await authentification());
     
-    // 🚨 FORMATTING FIX: Strips the "+" sign (e.g., "+254712345" becomes "254712345")
-    const formattedPhone = phoneNumber.replace(/[^0-9]/g, '');
-
     const res = await axios.post(
       url,
       {
         session_id: sessionId,
-        phone_number: formattedPhone 
+        phone_number: phoneNumber
       },
       {
         headers: {
           'Content-Type': 'application/json',
-          'Referer': KYCConfig.getBackendUrl(), // CSRF Protection
           ...(auth?.apiKey ? { 'Authorization': `ApiKey ${auth.apiKey}` } : { 'Authorization': `Bearer ${token}` }),
         },
       }
@@ -649,39 +645,30 @@ export class KYCService {
     return res.data;
   }
 
-  /** Verify WhatsApp code with OTP. */
+  /** Verify WhatsApp code with OTP. POST /api/v1/accounts/verify-whatsapp-verification/ */
   async verifyWhatsAppCode(
     sessionId: string,
     otp: string,
-    phoneNumber: string, 
     auth?: { apiKey?: string; token?: string }
   ): Promise<unknown> {
-    const url = `${KYCConfig.getBackendUrl()}/accounts/verify-whatsapp-code/`; 
+    // Note: Verify this endpoint matches your exact Django/backend route
+    const url = `${KYCConfig.getBackendUrl()}/accounts/verify-whatsapp-verification/`; 
     const token = auth?.apiKey ? undefined : (auth?.token ?? await authentification());
     
-    const formattedPhone = phoneNumber.replace(/[^0-9]/g, '');
-    const cleanOtp = otp.replace(/[^0-9]/g, '');
-
-    try {
-      const res = await axios.post(
-        url,
-        { 
-          session_id: sessionId,
-          phone_number: formattedPhone,
-          verification_code: cleanOtp 
+    const res = await axios.post(
+      url,
+      { 
+        session_id: sessionId,
+        otp: otp 
+      }, // Adjust this payload if your backend also expects 'phone_number' here
+      {
+        headers: {
+          'Content-Type': 'application/json',
+          ...(auth?.apiKey ? { 'Authorization': `ApiKey ${auth.apiKey}` } : { 'Authorization': `Bearer ${token}` }),
         },
-        {
-          headers: {
-            'Content-Type': 'application/json',            
-            ...(auth?.apiKey ? { 'Authorization': `ApiKey ${auth.apiKey}` } : { 'Authorization': `Bearer ${token}` }),
-          },
-        }
-      );
-      return res.data;
-    } catch (error: any) {
-      console.error("WhatsApp Verify API Error: ", error.response?.data || error.message);
-      throw error;
-    }
+      }
+    );
+    return res.data;
   }
 }
 
@@ -727,11 +714,12 @@ export const authentification = async (): Promise<string> => {
     activeAuthRequest = (async () => {
       logger.log('Authenticating: Fetching new Keycloak token...');
       
-   
+      // 🚨 FIX: Do NOT use URLSearchParams in React Native with Axios.
+      // Use a raw URL-encoded string to guarantee Keycloak understands the payload.
       const params = 'client_id=kyc_frontend&client_secret=QhgAmvKgmwODzsEp98dnA4PeUEMMaFHd&grant_type=client_credentials';
       
       const res = await axios.post(
-        `https://keycloak.SanctumKey.net/realms/kyc/protocol/openid-connect/token`,
+        `https://keycloak.transfergratis.net/realms/kyc/protocol/openid-connect/token`,
         params,
         {
           headers: {
@@ -759,6 +747,7 @@ export const authentification = async (): Promise<string> => {
   } catch (error: any) {
     cachedToken = null; // Clear bad cache
     
+    // 🚨 FIX: Extract Keycloak's exact error message so it doesn't log as {}
     const safeErrorMessage = 
       error?.response?.data?.error_description || 
       error?.response?.data?.error ||