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

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 } from 'react-native';
+import { View, Text, StyleSheet, TextInput, TouchableOpacity, Alert, Pressable, Modal, FlatList } from 'react-native';
 import { TemplateComponent, LocalizedText } from '../../types/KYC.types';
 import { useTemplateKYCFlowContext } from '../../hooks/useTemplateKYCFlow';
 import { useI18n } from '../../hooks/useI18n';
@@ -17,6 +17,19 @@ interface PhoneVerificationTemplateProps {
 type VerificationStep = 'phone' | 'otp';
 const CODE_LENGTH = 6;
 
+// 🌍 The Country Codes Array
+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,
@@ -31,10 +44,16 @@ 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);
+    
+    // Track actual focus state for visual feedback
+    const [isInputFocused, setIsInputFocused] = useState(false); 
 
     const inputRef = useRef<TextInput>(null);
 
@@ -52,6 +71,22 @@ export const PhoneVerificationTemplate: React.FC<PhoneVerificationTemplateProps>
         }
     }, [otp]);
 
+    // --- SAFE AUTO FOCUS LOGIC ---
+    useEffect(() => {
+        let focusTimer: ReturnType<typeof setTimeout>;
+        
+        // Only attempt focus when we are on the OTP step AND the loading state is completely finished
+        if (step === 'otp' && !isSimulating) {
+            focusTimer = setTimeout(() => {
+                inputRef.current?.focus();
+            }, 300); // 300ms guarantees view is painted before requesting keyboard
+        }
+        
+        return () => {
+            if (focusTimer) clearTimeout(focusTimer);
+        };
+    }, [step, isSimulating]);
+
     const handleSendCode = async () => {
         const trimmedPhone = phone.trim();
         if (!trimmedPhone || trimmedPhone.length < 5) {
@@ -62,11 +97,11 @@ export const PhoneVerificationTemplate: React.FC<PhoneVerificationTemplateProps>
         setLocalError(null);
         setIsSimulating(true);
 
+        const fullPhoneNumber = `${countryCode}${trimmedPhone}`;
+
         try {
-            await kycService.sendWhatsAppVerificationCode(sessionId, trimmedPhone, auth);
+            await kycService.sendWhatsAppVerificationCode(sessionId, fullPhoneNumber, 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));
@@ -83,29 +118,32 @@ export const PhoneVerificationTemplate: React.FC<PhoneVerificationTemplateProps>
 
         setLocalError(null);
         setIsSimulating(true);
+        
+        const fullPhoneNumber = `${countryCode}${phone.trim()}`;
 
         try {
-            await kycService.verifyWhatsAppCode(sessionId, otp.trim(), auth);
-            const data = { phone, otp, verified: true };
+            await kycService.verifyWhatsAppCode(sessionId, otp.trim(), fullPhoneNumber, auth);
+            
+            const data = { phone: fullPhoneNumber, 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(''); // Clear the boxes on error so they can type again
-            inputRef.current?.focus();
+            setOtp('');
+            inputRef.current?.focus(); 
         } finally {
             setIsSimulating(false);
         }
     };
 
     const onChangePhone = (text: string) => {
-        setPhone(text);
+        const cleaned = text.replace(/[^0-9]/g, '');
+        setPhone(cleaned);
         if (localError) setLocalError(null);
     };
 
     const onChangeOtp = (text: string) => {
-        // Only allow numbers
         const cleaned = text.replace(/[^0-9]/g, '');
         setOtp(cleaned);
         if (localError) setLocalError(null);
@@ -123,16 +161,19 @@ 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;
+                    
+                    // Only highlight if the input is ACTUALLY focused. 
+                    const isActiveIndex = index === otp.length || (index === CODE_LENGTH - 1 && otp.length === CODE_LENGTH);
+                    const isCurrent = isInputFocused && isActiveIndex;
 
                     return (
                         <View 
                             key={index} 
                             style={[
                                 styles.otpBox, 
-                                isCurrent && styles.otpBoxActive,
-                                isFilled && styles.otpBoxFilled
+                                isFilled && styles.otpBoxFilled,
+                                isCurrent && styles.otpBoxActive // Active overrides filled
                             ]}
                         >
                             <Text style={styles.otpBoxText}>{digit}</Text>
@@ -147,22 +188,34 @@ 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 ${phone}`)}
+                {step === 'phone' ? instructions : (t('kyc.enterCodeSent') || `Please enter the code sent to ${countryCode} ${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 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>
                     </View>
                 ) : (
                     <View style={styles.inputContainer}>
@@ -170,7 +223,7 @@ export const PhoneVerificationTemplate: React.FC<PhoneVerificationTemplateProps>
                         
                         <View style={styles.otpWrapper}>
                             {renderOtpBoxes()}
-                            {/* Hidden TextInput overlaid to handle native keyboard & pasting seamlessly */}
+                            
                             <TextInput
                                 ref={inputRef}
                                 style={styles.hiddenInput}
@@ -181,6 +234,8 @@ export const PhoneVerificationTemplate: React.FC<PhoneVerificationTemplateProps>
                                 editable={!isSimulating}
                                 textContentType="oneTimeCode"
                                 caretHidden={true}
+                                onFocus={() => setIsInputFocused(true)}
+                                onBlur={() => setIsInputFocused(false)}
                             />
                         </View>
 
@@ -210,12 +265,14 @@ export const PhoneVerificationTemplate: React.FC<PhoneVerificationTemplateProps>
                             if (isSimulating) return;
                             setLocalError(null);
                             setIsSimulating(true);
+                            const fullPhoneNumber = `${countryCode}${phone.trim()}`;
                             try {
-                                await kycService.sendWhatsAppVerificationCode(sessionId, phone.trim(), auth);
+                                await kycService.sendWhatsAppVerificationCode(sessionId, fullPhoneNumber, auth);
                                 Alert.alert(
                                     t('common.codeResent') || 'Code Resent',
-                                    t('common.codeResentMessage', { email: phone }) || 'Code resent to ' + phone
+                                    t('common.codeResentMessage', { email: fullPhoneNumber }) || 'Code resent to ' + fullPhoneNumber
                                 );
+                                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));
@@ -230,6 +287,45 @@ 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>
     );
 };
@@ -272,7 +368,35 @@ const styles = StyleSheet.create({
         marginBottom: 8,
         marginLeft: 4,
     },
-    input: {
+    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, 
         borderWidth: 1,
         borderColor: '#e0e0e0',
         padding: 16,
@@ -281,6 +405,54 @@ 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%',
@@ -295,7 +467,7 @@ const styles = StyleSheet.create({
     },
     otpBox: {
         width: '14%',
-        aspectRatio: 1, // keeps it perfectly square
+        aspectRatio: 1,
         borderWidth: 1,
         borderColor: '#e0e0e0',
         borderRadius: 12,
@@ -323,7 +495,7 @@ const styles = StyleSheet.create({
         left: 0,
         width: '100%',
         height: '100%',
-        opacity: 0, // completely invisible but handles native keyboard interactions perfectly
+        opacity: 0,
     },
     errorText: {
         color: '#dc2626',

package/src/modules/api/CardAuthentification.ts

@@ -82,7 +82,6 @@ export async function frontVerification(
         console.log("Front verification START", JSON.stringify({ result }, null, 2));
         logger.log("Front verification", JSON.stringify({ result }, null, 2));
 
-        // 🚨 FIX 1: Bulletproof Case-Insensitive Check
         const authMethods = Array.isArray(result.regionMapping?.authMethod) 
             ? result.regionMapping.authMethod.map(m => String(m).toUpperCase()) 
             : [];
@@ -164,7 +163,6 @@ export async function frontVerification(
             bbox = crop.bbox;
         } catch { }
 
-        // 🚨 FIX 2: Execute MRZ if required (Removed restrictive guards)
         if (hasMrz) {
             try {
                 logger.log("Tentative d'extraction MRZ (Front)");
@@ -176,7 +174,7 @@ export async function frontVerification(
                         postfix: result?.currentSide || 'front',
                         token: token,
                         template_path: result?.templatePath || '',
-                        mrz_type: result?.mrzType || 'TD1' // Fallback to ensure it always runs
+                        mrz_type: result?.mrzType || 'TD1' 
                     },
                     env
                 );
@@ -201,7 +199,6 @@ export async function frontVerification(
     }
 }
 
-// ─── backVerification ────────────────────────────────────────────────────────
 
 export async function backVerification(
     result: {
@@ -219,12 +216,13 @@ export async function backVerification(
     try {
         if (!result.path) throw new Error('No path provided');
         logger.log("result.regionMapping", result.regionMapping, result.currentSide, result.code);
+        logger.log('result object', result)
 
-        // 🚨 FIX 3: Robust Auth Method Resolution for the Back Side
         const authMethods = Array.isArray(result.regionMapping?.authMethod) 
             ? result.regionMapping.authMethod.map(m => String(m).toUpperCase()) 
             : [];
-        const hasMrz = authMethods.some(m => m.includes('MRZ'));
+
+        const hasMrz = authMethods.some(m => m.includes('MRZ'))
         const hasBarcode = authMethods.some(m => m.includes('BARCODE') || m.includes('2D'));
 
         if (env === 'SANDBOX') {
@@ -338,7 +336,6 @@ export async function backVerification(
 
         let extractionResult: any = {};
 
-        // 🚨 FIX 4: Guaranteed MRZ Extraction Attachment
         if (hasMrz) {
             try {
                 logger.log("Tentative d'extraction MRZ (Back)");
@@ -481,7 +478,7 @@ export async function checkTemplateType(
         logger.log("templateType result", JSON.stringify(truncateFields(templateType), null, 2));
         return templateType;
     } catch (e: any) {
-        logger.error('Error checking template type:', JSON.stringify(errorMessage(e), null, 2));
+        logger.error('Errorrr checking template type:', JSON.stringify(errorMessage(e), null, 2));
         if (e?.message === 'CARD_NOT_FULLY_IN_FRAME' || e?.message === 'TOO_FAR_AWAY' || e?.message?.includes('ne correspond pas')) throw e;
         throw new Error(e?.message || 'Erreur de vérification du template');
     }