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

package/src/components/KYCElements/EmailVerificationTemplate.tsx

@@ -38,6 +38,9 @@ export const EmailVerificationTemplate: React.FC<EmailVerificationTemplateProps>
     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);
 
@@ -56,6 +59,22 @@ export const EmailVerificationTemplate: React.FC<EmailVerificationTemplateProps>
         }
     }, [otp]);
 
+    // --- 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();
+            }, 100); 
+        }
+        
+        return () => {
+            if (focusTimer) clearTimeout(focusTimer);
+        };
+    }, [step, isSimulating]);
+
     const handleSendCode = async () => {
         const trimmed = email.trim();
         if (!trimmed || !isValidEmail(trimmed)) {
@@ -69,8 +88,7 @@ export const EmailVerificationTemplate: React.FC<EmailVerificationTemplateProps>
         try {
             await kycService.sendEmailVerificationCode(trimmed, auth);
             setStep('otp');
-            // Auto-focus the OTP input shortly after switching steps
-            setTimeout(() => inputRef.current?.focus(), 100);
+            // Note: Removed the buggy setTimeout from here. The useEffect handles it now!
         } 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));
@@ -96,8 +114,8 @@ export const EmailVerificationTemplate: React.FC<EmailVerificationTemplateProps>
         } 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(); // Refocus on error
         } finally {
             setIsSimulating(false);
         }
@@ -127,16 +145,19 @@ export const EmailVerificationTemplate: React.FC<EmailVerificationTemplateProps>
             <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. 
+                    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>
@@ -175,7 +196,7 @@ export const EmailVerificationTemplate: React.FC<EmailVerificationTemplateProps>
                         
                         <View style={styles.otpWrapper}>
                             {renderOtpBoxes()}
-                            {/* Hidden TextInput overlaid to handle native keyboard & pasting seamlessly */}
+                            
                             <TextInput
                                 ref={inputRef}
                                 style={styles.hiddenInput}
@@ -186,6 +207,9 @@ export const EmailVerificationTemplate: React.FC<EmailVerificationTemplateProps>
                                 editable={!isSimulating}
                                 textContentType="oneTimeCode"
                                 caretHidden={true}
+                                // 🚨 NEW: Track focus state
+                                onFocus={() => setIsInputFocused(true)}
+                                onBlur={() => setIsInputFocused(false)}
                             />
                         </View>
 
@@ -221,6 +245,8 @@ export const EmailVerificationTemplate: React.FC<EmailVerificationTemplateProps>
                                     t('common.codeResent') || 'Code Resent',
                                     t('common.codeResentMessage', { email }) || 'Code resent to ' + email
                                 );
+                                // 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));
@@ -300,7 +326,7 @@ const styles = StyleSheet.create({
     },
     otpBox: {
         width: '14%',
-        aspectRatio: 1,
+        aspectRatio: 1, // keeps it perfectly square
         borderWidth: 1,
         borderColor: '#e0e0e0',
         borderRadius: 12,
@@ -328,7 +354,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/KYCElements/IDCardCapture.tsx

@@ -270,7 +270,7 @@ export const IDCardCapture: React.FC<IDCardCaptureProps> = ({ component, value =
     return (
       <View style={styles.cameraContainer}>
         <EnhancedCameraView
-          key={currentSide} // 🚨 BUG FIX: Forces the camera instance to completely reset when switching sides
+          key={currentSide} 
           showCamera={true}
           isProcessing={isBusy}
           cameraType={cameraConfig.cameraType}

package/src/components/KYCElements/PhoneVerificationTemplate.tsx

@@ -44,8 +44,6 @@ export const PhoneVerificationTemplate: React.FC<PhoneVerificationTemplateProps>
 
     // State
     const [step, setStep] = useState<VerificationStep>('phone');
-    
-    // Split phone state into code and number
     const [countryCode, setCountryCode] = useState('+254');
     const [phone, setPhone] = useState('');
     const [showCountryPicker, setShowCountryPicker] = useState(false);
@@ -53,6 +51,9 @@ export const PhoneVerificationTemplate: React.FC<PhoneVerificationTemplateProps>
     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);
 
@@ -70,6 +71,21 @@ 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) {
@@ -80,13 +96,11 @@ export const PhoneVerificationTemplate: React.FC<PhoneVerificationTemplateProps>
         setLocalError(null);
         setIsSimulating(true);
 
-        // Combine code and number for the API
         const fullPhoneNumber = `${countryCode}${trimmedPhone}`;
 
         try {
             await kycService.sendWhatsAppVerificationCode(sessionId, fullPhoneNumber, auth);
             setStep('otp');
-            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));
@@ -116,14 +130,14 @@ export const PhoneVerificationTemplate: React.FC<PhoneVerificationTemplateProps>
             const msg = errorMessage(err) ?? err?.message ?? (t('errors.wrongCode') || 'Invalid verification code');
             setLocalError(typeof msg === 'string' ? msg : JSON.stringify(msg));
             setOtp('');
-            inputRef.current?.focus();
+            // Refocus so they can type immediately after an error
+            inputRef.current?.focus(); 
         } finally {
             setIsSimulating(false);
         }
     };
 
     const onChangePhone = (text: string) => {
-        // Strip out any non-numeric characters the user might type (like spaces or dashes)
         const cleaned = text.replace(/[^0-9]/g, '');
         setPhone(cleaned);
         if (localError) setLocalError(null);
@@ -147,16 +161,20 @@ 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, 
-                                isCurrent && styles.otpBoxActive,
-                                isFilled && styles.otpBoxFilled
+                                isFilled && styles.otpBoxFilled,
+                                isCurrent && styles.otpBoxActive // Active overrides filled
                             ]}
                         >
                             <Text style={styles.otpBoxText}>{digit}</Text>
@@ -179,7 +197,6 @@ export const PhoneVerificationTemplate: React.FC<PhoneVerificationTemplateProps>
                     <View style={styles.inputContainer}>
                         <Text style={styles.label}>{t('common.phone') || 'Phone Number'}</Text>
                         
-                        {/* 🚨 UPGRADED PHONE INPUT ROW */}
                         <View style={styles.phoneInputRow}>
                             <TouchableOpacity 
                                 style={styles.countryPickerBtn} 
@@ -206,7 +223,7 @@ export const PhoneVerificationTemplate: React.FC<PhoneVerificationTemplateProps>
                         <Text style={styles.label}>{t('common.verificationCode') || 'Verification Code'}</Text>
                         
                         <View style={styles.otpWrapper}>
-                            {renderOtpBoxes()}
+                            {renderOtpBoxes()}     
                             <TextInput
                                 ref={inputRef}
                                 style={styles.hiddenInput}
@@ -217,6 +234,8 @@ export const PhoneVerificationTemplate: React.FC<PhoneVerificationTemplateProps>
                                 editable={!isSimulating}
                                 textContentType="oneTimeCode"
                                 caretHidden={true}
+                                onFocus={() => setIsInputFocused(true)}
+                                onBlur={() => setIsInputFocused(false)}
                             />
                         </View>
 
@@ -253,6 +272,8 @@ export const PhoneVerificationTemplate: React.FC<PhoneVerificationTemplateProps>
                                     t('common.codeResent') || 'Code Resent',
                                     t('common.codeResentMessage', { email: fullPhoneNumber }) || 'Code resent to ' + fullPhoneNumber
                                 );
+                                // 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));
@@ -268,7 +289,7 @@ export const PhoneVerificationTemplate: React.FC<PhoneVerificationTemplateProps>
                 )}
             </View>
 
-            {/* 🚨 COUNTRY PICKER MODAL */}
+            {/* COUNTRY PICKER MODAL */}
             <Modal
                 visible={showCountryPicker}
                 animationType="slide"
@@ -311,6 +332,7 @@ export const PhoneVerificationTemplate: React.FC<PhoneVerificationTemplateProps>
 };
 
 const styles = StyleSheet.create({
+    // ... Keeping all previous styles identical for safety ...
     container: {
         padding: 24,
         backgroundColor: 'white',
@@ -348,12 +370,10 @@ const styles = StyleSheet.create({
         marginBottom: 8,
         marginLeft: 4,
     },
-    
-    // --- Phone Row Styles ---
     phoneInputRow: {
         flexDirection: 'row',
         alignItems: 'center',
-        gap: 10, // Space between picker and input
+        gap: 10,
     },
     countryPickerBtn: {
         flexDirection: 'row',
@@ -378,7 +398,7 @@ const styles = StyleSheet.create({
         marginLeft: 8,
     },
     phoneInput: {
-        flex: 1, // Takes up remaining space
+        flex: 1, 
         borderWidth: 1,
         borderColor: '#e0e0e0',
         padding: 16,
@@ -387,8 +407,6 @@ const styles = StyleSheet.create({
         backgroundColor: '#f8f9fa',
         color: '#333',
     },
-
-    // --- Country Modal Styles ---
     modalOverlay: {
         flex: 1,
         backgroundColor: 'rgba(0,0,0,0.5)',
@@ -437,8 +455,6 @@ const styles = StyleSheet.create({
         fontSize: 18,
         fontWeight: 'bold',
     },
-
-    // --- OTP Styles ---
     otpWrapper: {
         position: 'relative',
         width: '100%',
@@ -483,8 +499,6 @@ const styles = StyleSheet.create({
         height: '100%',
         opacity: 0,
     },
-    
-    // --- General Styles ---
     errorText: {
         color: '#dc2626',
         marginBottom: 16,

package/src/modules/api/KYCService.ts

@@ -620,7 +620,7 @@ export class KYCService {
     }
   }
 
-  /** Send WhatsApp verification code. POST /api/v1/accounts/send-whatsapp-verification/ */
+  /** Send WhatsApp verification code. */
   async sendWhatsAppVerificationCode(
     sessionId: string,
     phoneNumber: string,
@@ -629,15 +629,19 @@ 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: phoneNumber
+        phone_number: formattedPhone 
       },
       {
         headers: {
           'Content-Type': 'application/json',
+          'Referer': KYCConfig.getBackendUrl(), // CSRF Protection
           ...(auth?.apiKey ? { 'Authorization': `ApiKey ${auth.apiKey}` } : { 'Authorization': `Bearer ${token}` }),
         },
       }
@@ -645,31 +649,30 @@ export class KYCService {
     return res.data;
   }
 
+  /** Verify WhatsApp code with OTP. */
   async verifyWhatsAppCode(
     sessionId: string,
     otp: string,
     phoneNumber: string, 
     auth?: { apiKey?: string; token?: string }
   ): Promise<unknown> {
-    
-    const url = `${KYCConfig.getBackendUrl()}/accounts/verify-whatsapp-verification/`; 
+    const url = `${KYCConfig.getBackendUrl()}/accounts/verify-whatsapp-code/`; 
     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,
-          otp: otp,
-          phone_number: phoneNumber 
+          phone_number: formattedPhone,
+          verification_code: cleanOtp 
         },
         {
           headers: {
-            'Content-Type': 'application/json',
-            
-            // 🚨 THE FIX: Spoof the Referer header for Django's CSRF middleware
-            'Referer': KYCConfig.getBackendUrl(), 
-            
+            'Content-Type': 'application/json',            
             ...(auth?.apiKey ? { 'Authorization': `ApiKey ${auth.apiKey}` } : { 'Authorization': `Bearer ${token}` }),
           },
         }
@@ -724,8 +727,7 @@ 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(
@@ -757,7 +759,6 @@ 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 ||