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

package/src/components/KYCElements/EmailVerificationTemplate.tsx

@@ -1,5 +1,5 @@
-import React, { useState } from 'react';
-import { View, Text, StyleSheet, TextInput, TouchableOpacity, Alert } from 'react-native';
+import React, { useState, useRef, useEffect } from 'react';
+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';
@@ -15,10 +15,10 @@ interface EmailVerificationTemplateProps {
 }
 
 type VerificationStep = 'email' | 'otp';
+const CODE_LENGTH = 6;
 
 /** RFC-style email validation: local@domain.tld */
 const EMAIL_REGEX = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
-
 const isValidEmail = (value: string): boolean => EMAIL_REGEX.test((value || '').trim());
 
 export const EmailVerificationTemplate: React.FC<EmailVerificationTemplateProps> = ({
@@ -31,7 +31,6 @@ export const EmailVerificationTemplate: React.FC<EmailVerificationTemplateProps>
     const { t } = useI18n();
 
     const auth = apiKey ? { apiKey } : (state.session.token ? { token: state.session.token } : undefined);
-    // const config = component.config as EmailVerificationConfig; // Keep for future use
 
     // State
     const [step, setStep] = useState<VerificationStep>('email');
@@ -39,6 +38,11 @@ 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);
 
     const title = getLocalizedText(component.labels as LocalizedText);
     const instructions = getLocalizedText(component.instructions as LocalizedText);
@@ -48,6 +52,29 @@ export const EmailVerificationTemplate: React.FC<EmailVerificationTemplateProps>
     const sendButtonText = t('common.sendCode') || 'Send Verification Code';
     const buttonText = step === 'email' ? sendButtonText : verifyButtonText;
 
+    // --- AUTO SUBMIT LOGIC ---
+    useEffect(() => {
+        if (otp.length === CODE_LENGTH && step === 'otp' && !isSimulating) {
+            handleVerifyCode();
+        }
+    }, [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)) {
@@ -61,6 +88,7 @@ export const EmailVerificationTemplate: React.FC<EmailVerificationTemplateProps>
         try {
             await kycService.sendEmailVerificationCode(trimmed, auth);
             setStep('otp');
+            // 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));
@@ -70,7 +98,7 @@ export const EmailVerificationTemplate: React.FC<EmailVerificationTemplateProps>
     };
 
     const handleVerifyCode = async () => {
-        if (!otp || otp.length < 4) {
+        if (!otp || otp.length < CODE_LENGTH) {
             setLocalError(t('errors.invalidCode') || 'Please enter the 6-digit code');
             return;
         }
@@ -86,6 +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(''); 
+            inputRef.current?.focus(); // Refocus on error
         } finally {
             setIsSimulating(false);
         }
@@ -97,7 +127,9 @@ export const EmailVerificationTemplate: React.FC<EmailVerificationTemplateProps>
     };
 
     const onChangeOtp = (text: string) => {
-        setOtp(text);
+        // Only allow numbers
+        const cleaned = text.replace(/[^0-9]/g, '');
+        setOtp(cleaned);
         if (localError) setLocalError(null);
     };
 
@@ -107,6 +139,35 @@ export const EmailVerificationTemplate: React.FC<EmailVerificationTemplateProps>
         setLocalError(null);
     };
 
+    const renderOtpBoxes = () => {
+        const boxes = new Array(CODE_LENGTH).fill(0);
+        return (
+            <Pressable style={styles.otpBoxesContainer} onPress={() => inputRef.current?.focus()}>
+                {boxes.map((_, index) => {
+                    const digit = otp[index] || '';
+                    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, 
+                                isFilled && styles.otpBoxFilled,
+                                isCurrent && styles.otpBoxActive // Active overrides filled
+                            ]}
+                        >
+                            <Text style={styles.otpBoxText}>{digit}</Text>
+                        </View>
+                    );
+                })}
+            </Pressable>
+        );
+    };
+
     return (
         <View style={styles.container}>
             <Text style={styles.title}>{title}</Text>
@@ -132,16 +193,27 @@ export const EmailVerificationTemplate: React.FC<EmailVerificationTemplateProps>
                 ) : (
                     <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={handleBackToEmail} style={styles.changeEmailLink}>
+                        
+                        <View style={styles.otpWrapper}>
+                            {renderOtpBoxes()}
+                            
+                            <TextInput
+                                ref={inputRef}
+                                style={styles.hiddenInput}
+                                value={otp}
+                                onChangeText={onChangeOtp}
+                                keyboardType="number-pad"
+                                maxLength={CODE_LENGTH}
+                                editable={!isSimulating}
+                                textContentType="oneTimeCode"
+                                caretHidden={true}
+                                // 🚨 NEW: Track focus state
+                                onFocus={() => setIsInputFocused(true)}
+                                onBlur={() => setIsInputFocused(false)}
+                            />
+                        </View>
+
+                        <TouchableOpacity onPress={handleBackToEmail} style={styles.changeEmailLink} disabled={isSimulating}>
                             <Text style={styles.changeEmailText}>{t('common.changeEmail') || 'Change email'}</Text>
                         </TouchableOpacity>
                     </View>
@@ -154,11 +226,10 @@ export const EmailVerificationTemplate: React.FC<EmailVerificationTemplateProps>
                 <Button
                     title={isSimulating ? (t('common.processing') || 'Processing...') : buttonText}
                     onPress={step === 'email' ? handleSendCode : handleVerifyCode}
-
-
+                    style={styles.button}
                     disabled={
                         isSimulating ||
-                        (step === 'email' ? !email : !otp)
+                        (step === 'email' ? !email : otp.length < CODE_LENGTH)
                     }
                 />
 
@@ -174,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));
@@ -219,9 +292,7 @@ const styles = StyleSheet.create({
         lineHeight: 24,
         textAlign: 'center',
     },
-    contentContainer: {
-        // width: '100%',
-    },
+    contentContainer: {},
     inputContainer: {
         marginBottom: 24,
     },
@@ -241,6 +312,50 @@ const styles = StyleSheet.create({
         backgroundColor: '#f8f9fa',
         color: '#333',
     },
+    otpWrapper: {
+        position: 'relative',
+        width: '100%',
+        height: 60,
+    },
+    otpBoxesContainer: {
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        width: '100%',
+        height: '100%',
+    },
+    otpBox: {
+        width: '14%',
+        aspectRatio: 1, // keeps it perfectly square
+        borderWidth: 1,
+        borderColor: '#e0e0e0',
+        borderRadius: 12,
+        backgroundColor: '#f8f9fa',
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+    otpBoxFilled: {
+        borderColor: '#9ca3af',
+        backgroundColor: '#ffffff',
+    },
+    otpBoxActive: {
+        borderColor: '#2DBD60',
+        borderWidth: 2,
+        backgroundColor: '#ffffff',
+    },
+    otpBoxText: {
+        fontSize: 24,
+        fontWeight: '700',
+        color: '#1a1a1a',
+    },
+    hiddenInput: {
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        width: '100%',
+        height: '100%',
+        opacity: 0, // completely invisible but handles native keyboard interactions perfectly
+    },
     errorText: {
         color: '#dc2626',
         marginBottom: 16,
@@ -254,11 +369,11 @@ const styles = StyleSheet.create({
     button: {
         height: 50,
         borderRadius: 12,
-        width: "100%"
+        width: "100%",
     },
     changeEmailLink: {
         alignSelf: 'flex-end',
-        marginTop: 8,
+        marginTop: 12,
     },
     changeEmailText: {
         color: '#2DBD60',
@@ -268,11 +383,11 @@ const styles = StyleSheet.create({
     resendButton: {
         marginTop: 16,
         alignItems: 'center',
-        width: "100%"
+        width: "100%",
     },
     resendText: {
         color: '#666',
         fontSize: 14,
         textDecorationLine: 'underline',
     },
-});
+});