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

package/build/src/components/KYCElements/PhoneVerificationTemplate.js

@@ -1,64 +1,117 @@
-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, Modal, FlatList } from 'react-native';
 import { useTemplateKYCFlowContext } from '../../hooks/useTemplateKYCFlow';
 import { useI18n } from '../../hooks/useI18n';
 import { Button } from '../ui/Button';
+import kycService, { errorMessage } from '../../modules/api/KYCService';
+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 = ({ component, value, onValueChange, error: propError, }) => {
-    const { actions, getLocalizedText } = useTemplateKYCFlowContext();
+    const { actions, getLocalizedText, state, apiKey } = useTemplateKYCFlowContext();
     const { t } = useI18n();
-    // const config = component.config as PhoneVerificationConfig;
+    const auth = apiKey ? { apiKey } : (state.session?.token ? { token: state.session.token } : undefined);
+    const sessionId = state.session?.session_id || '';
     // State
     const [step, setStep] = useState('phone');
+    const [countryCode, setCountryCode] = useState('+254');
     const [phone, setPhone] = useState('');
+    const [showCountryPicker, setShowCountryPicker] = useState(false);
     const [otp, setOtp] = useState('');
     const [localError, setLocalError] = useState(null);
     const [isSimulating, setIsSimulating] = useState(false);
+    // 🚨 NEW: Track actual focus state for visual feedback
+    const [isInputFocused, setIsInputFocused] = useState(false);
+    const inputRef = useRef(null);
     const title = getLocalizedText(component.labels);
     const instructions = getLocalizedText(component.instructions);
-    // Determine button text based on step
     const verifyButtonText = getLocalizedText(component.ui.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) {
+    // --- AUTO SUBMIT LOGIC ---
+    useEffect(() => {
+        if (otp.length === CODE_LENGTH && step === 'otp' && !isSimulating) {
+            handleVerifyCode();
+        }
+    }, [otp]);
+    // --- AUTO FOCUS LOGIC ---
+    useEffect(() => {
+        let focusTimer;
+        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) {
             setLocalError(t('errors.invalidPhone') || 'Please enter a valid phone number');
             return;
         }
         setLocalError(null);
         setIsSimulating(true);
-        // Simulate API call to send code
-        setTimeout(() => {
-            setIsSimulating(false);
+        const fullPhoneNumber = `${countryCode}${trimmedPhone}`;
+        try {
+            await kycService.sendWhatsAppVerificationCode(sessionId, fullPhoneNumber, auth);
             setStep('otp');
-        }, 1500);
+        }
+        catch (err) {
+            const msg = errorMessage(err) ?? err?.message ?? (t('errors.sendCodeFailed') || 'Failed to send verification code');
+            setLocalError(typeof msg === 'string' ? msg : JSON.stringify(msg));
+        }
+        finally {
+            setIsSimulating(false);
+        }
     };
-    const handleVerifyCode = () => {
-        if (!otp || otp.length < 4) {
+    const handleVerifyCode = async () => {
+        if (!otp || otp.length < CODE_LENGTH) {
             setLocalError(t('errors.invalidCode') || 'Please enter the 6-digit code');
             return;
         }
         setLocalError(null);
         setIsSimulating(true);
-        // Simulate verification API
-        setTimeout(() => {
+        const fullPhoneNumber = `${countryCode}${phone.trim()}`;
+        try {
+            await kycService.verifyWhatsAppCode(sessionId, otp.trim(), fullPhoneNumber, auth);
+            const data = { phone: fullPhoneNumber, otp, verified: true };
+            onValueChange(data);
+            actions.nextComponent(data);
+        }
+        catch (err) {
+            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();
+        }
+        finally {
             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) => {
-        setPhone(text);
+        const cleaned = text.replace(/[^0-9]/g, '');
+        setPhone(cleaned);
         if (localError)
             setLocalError(null);
     };
     const onChangeOtp = (text) => {
-        setOtp(text);
+        const cleaned = text.replace(/[^0-9]/g, '');
+        setOtp(cleaned);
         if (localError)
             setLocalError(null);
     };
@@ -67,20 +120,53 @@ export const PhoneVerificationTemplate = ({ component, value, onValueChange, err
         setOtp('');
         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. 
+                // 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
+                    ]}>
+                            <Text style={styles.otpBoxText}>{digit}</Text>
+                        </View>);
+            })}
+            </Pressable>);
+    };
     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}`)}
+                {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}>
                         <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}>
+                        
+                        <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} onFocus={() => setIsInputFocused(true)} onBlur={() => setIsInputFocused(false)}/>
+                        </View>
+
+                        <TouchableOpacity onPress={handleBackToPhone} style={styles.changeLink} disabled={isSimulating}>
                             <Text style={styles.changeText}>{t('common.back') || 'Change number'}</Text>
                         </TouchableOpacity>
                     </View>)}
@@ -88,18 +174,56 @@ export const PhoneVerificationTemplate = ({ component, value, onValueChange, err
                 {(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 === 'phone' ? !phone : otp.length < CODE_LENGTH)}/>
 
-                {step === 'otp' && (<TouchableOpacity onPress={() => {
-                // Resend logic
-                Alert.alert(t('common.codeResent') || 'Code Resent', t('common.codeResentMessage', { email: phone }) || 'Code resent to ' + phone);
+                {step === 'otp' && (<TouchableOpacity onPress={async () => {
+                if (isSimulating)
+                    return;
+                setLocalError(null);
+                setIsSimulating(true);
+                const fullPhoneNumber = `${countryCode}${phone.trim()}`;
+                try {
+                    await kycService.sendWhatsAppVerificationCode(sessionId, fullPhoneNumber, auth);
+                    Alert.alert(t('common.codeResent') || 'Code Resent', t('common.codeResentMessage', { email: fullPhoneNumber }) || 'Code resent to ' + fullPhoneNumber);
+                    // Refocus after resending
+                    inputRef.current?.focus();
+                }
+                catch (err) {
+                    const msg = errorMessage(err) ?? err?.message ?? (t('errors.sendCodeFailed') || 'Failed to send code');
+                    setLocalError(typeof msg === 'string' ? msg : JSON.stringify(msg));
+                }
+                finally {
+                    setIsSimulating(false);
+                }
             }} style={styles.resendButton} disabled={isSimulating}>
                         <Text style={styles.resendText}>{t('common.resendCode') || 'Resend Code'}</Text>
                     </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',
@@ -126,9 +250,7 @@ const styles = StyleSheet.create({
         lineHeight: 24,
         textAlign: 'center',
     },
-    contentContainer: {
-    // width: '100%',
-    },
+    contentContainer: {},
     inputContainer: {
         marginBottom: 24,
     },
@@ -139,7 +261,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,
@@ -148,6 +298,98 @@ 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%',
+        height: 60,
+    },
+    otpBoxesContainer: {
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        width: '100%',
+        height: '100%',
+    },
+    otpBox: {
+        width: '14%',
+        aspectRatio: 1,
+        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,
+    },
     errorText: {
         color: '#dc2626',
         marginBottom: 16,
@@ -161,11 +403,11 @@ const styles = StyleSheet.create({
     button: {
         height: 50,
         borderRadius: 12,
-        width: "100%"
+        width: "100%",
     },
     changeLink: {
         alignSelf: 'flex-end',
-        marginTop: 8,
+        marginTop: 12,
     },
     changeText: {
         color: '#2DBD60',

package/build/src/components/KYCElements/PhoneVerificationTemplate.js.map

@@ -1 +1 @@
-{"version":3,"file":"PhoneVerificationTemplate.js","sourceRoot":"","sources":["../../../../src/components/KYCElements/PhoneVerificationTemplate.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useState } from 'react';\nimport { View, Text, StyleSheet, TextInput, TouchableOpacity, Alert } from 'react-native';\nimport { TemplateComponent, LocalizedText } from '../../types/KYC.types';\nimport { useTemplateKYCFlowContext } from '../../hooks/useTemplateKYCFlow';\nimport { useI18n } from '../../hooks/useI18n';\nimport { Button } from '../ui/Button';\n\ninterface PhoneVerificationTemplateProps {\n    component: TemplateComponent;\n    value?: any;\n    onValueChange: (data: any) => void;\n    error?: string;\n    language?: string;\n}\n\ntype VerificationStep = 'phone' | 'otp';\n\nexport const PhoneVerificationTemplate: React.FC<PhoneVerificationTemplateProps> = ({\n    component,\n    value,\n    onValueChange,\n    error: propError,\n}) => {\n    const { actions, getLocalizedText } = useTemplateKYCFlowContext();\n    const { t } = useI18n();\n    // const config = component.config as PhoneVerificationConfig;\n\n    // State\n    const [step, setStep] = useState<VerificationStep>('phone');\n    const [phone, setPhone] = useState('');\n    const [otp, setOtp] = useState('');\n    const [localError, setLocalError] = useState<string | null>(null);\n    const [isSimulating, setIsSimulating] = useState(false);\n\n    const title = getLocalizedText(component.labels as LocalizedText);\n    const instructions = getLocalizedText(component.instructions as LocalizedText);\n\n    // Determine button text based on step\n    const verifyButtonText = getLocalizedText((component.ui as any).buttonText) || t('common.verify') || 'Verify';\n    const sendButtonText = t('common.sendCode') || 'Send Verification Code';\n    const buttonText = step === 'phone' ? sendButtonText : verifyButtonText;\n\n    const handleSendCode = () => {\n        if (!phone || phone.length < 5) {\n            setLocalError(t('errors.invalidPhone') || 'Please enter a valid phone number');\n            return;\n        }\n\n        setLocalError(null);\n        setIsSimulating(true);\n\n        // Simulate API call to send code\n        setTimeout(() => {\n            setIsSimulating(false);\n            setStep('otp');\n        }, 1500);\n    };\n\n    const handleVerifyCode = () => {\n        if (!otp || otp.length < 4) {\n            setLocalError(t('errors.invalidCode') || 'Please enter the 6-digit code');\n            return;\n        }\n\n        setLocalError(null);\n        setIsSimulating(true);\n\n        // Simulate verification API\n        setTimeout(() => {\n            setIsSimulating(false);\n\n            // Mock validation logic\n            if (otp === '123456') {\n                onValueChange({ phone, otp, verified: true });\n                actions.nextComponent();\n            } else {\n                setLocalError(t('errors.wrongCode') || 'Invalid verification code. Try 123456');\n            }\n        }, 1500);\n    };\n\n    const onChangePhone = (text: string) => {\n        setPhone(text);\n        if (localError) setLocalError(null);\n    };\n\n    const onChangeOtp = (text: string) => {\n        setOtp(text);\n        if (localError) setLocalError(null);\n    };\n\n    const handleBackToPhone = () => {\n        setStep('phone');\n        setOtp('');\n        setLocalError(null);\n    };\n\n    return (\n        <View style={styles.container}>\n            <Text style={styles.title}>{title}</Text>\n            <Text style={styles.instructions}>\n                {step === 'phone' ? instructions : (t('kyc.enterCodeSent') || `Please enter the code sent to ${phone}`)}\n            </Text>\n\n            <View style={styles.contentContainer}>\n                {step === 'phone' ? (\n                    <View style={styles.inputContainer}>\n                        <Text style={styles.label}>{t('common.phone') || 'Phone Number'}</Text>\n                        <TextInput\n                            style={styles.input}\n                            placeholder=\"+1234567890\"\n                            value={phone}\n                            onChangeText={onChangePhone}\n                            keyboardType=\"phone-pad\"\n                            autoComplete=\"tel\"\n                            editable={!isSimulating}\n                        />\n                    </View>\n                ) : (\n                    <View style={styles.inputContainer}>\n                        <Text style={styles.label}>{t('common.verificationCode') || 'Verification Code'}</Text>\n                        <TextInput\n                            style={styles.input}\n                            placeholder=\"123456\"\n                            value={otp}\n                            onChangeText={onChangeOtp}\n                            keyboardType=\"number-pad\"\n                            maxLength={6}\n                            editable={!isSimulating}\n                        />\n                        <TouchableOpacity onPress={handleBackToPhone} style={styles.changeLink}>\n                            <Text style={styles.changeText}>{t('common.back') || 'Change number'}</Text>\n                        </TouchableOpacity>\n                    </View>\n                )}\n\n                {(localError || propError) && (\n                    <Text style={styles.errorText}>{localError || propError}</Text>\n                )}\n\n                <Button\n                    title={isSimulating ? (t('common.processing') || 'Processing...') : buttonText}\n                    onPress={step === 'phone' ? handleSendCode : handleVerifyCode}\n                    style={styles.button}\n                    disabled={\n                        isSimulating ||\n                        (step === 'phone' ? !phone : !otp)\n                    }\n                />\n\n                {step === 'otp' && (\n                    <TouchableOpacity\n                        onPress={() => {\n                            // Resend logic\n                            Alert.alert(\n                                t('common.codeResent') || 'Code Resent',\n                                t('common.codeResentMessage', { email: phone }) || 'Code resent to ' + phone\n                            );\n                        }}\n                        style={styles.resendButton}\n                        disabled={isSimulating}\n                    >\n                        <Text style={styles.resendText}>{t('common.resendCode') || 'Resend Code'}</Text>\n                    </TouchableOpacity>\n                )}\n            </View>\n        </View>\n    );\n};\n\nconst styles = StyleSheet.create({\n    container: {\n        padding: 24,\n        backgroundColor: 'white',\n        borderRadius: 16,\n        margin: 16,\n        shadowColor: '#000',\n        shadowOffset: { width: 0, height: 4 },\n        shadowOpacity: 0.1,\n        shadowRadius: 12,\n        elevation: 5,\n        width: '95%',\n    },\n    title: {\n        fontSize: 24,\n        fontWeight: '700',\n        marginBottom: 8,\n        color: '#1a1a1a',\n        textAlign: 'center',\n    },\n    instructions: {\n        fontSize: 16,\n        color: '#666',\n        marginBottom: 32,\n        lineHeight: 24,\n        textAlign: 'center',\n    },\n    contentContainer: {\n        // width: '100%',\n    },\n    inputContainer: {\n        marginBottom: 24,\n    },\n    label: {\n        fontSize: 14,\n        fontWeight: '600',\n        color: '#333',\n        marginBottom: 8,\n        marginLeft: 4,\n    },\n    input: {\n        borderWidth: 1,\n        borderColor: '#e0e0e0',\n        padding: 16,\n        borderRadius: 12,\n        fontSize: 16,\n        backgroundColor: '#f8f9fa',\n        color: '#333',\n    },\n    errorText: {\n        color: '#dc2626',\n        marginBottom: 16,\n        fontSize: 14,\n        textAlign: 'center',\n        backgroundColor: '#fee2e2',\n        padding: 8,\n        borderRadius: 8,\n        overflow: 'hidden',\n    },\n    button: {\n        height: 50,\n        borderRadius: 12,\n        width: \"100%\"\n    },\n    changeLink: {\n        alignSelf: 'flex-end',\n        marginTop: 8,\n    },\n    changeText: {\n        color: '#2DBD60',\n        fontSize: 14,\n        fontWeight: '500',\n    },\n    resendButton: {\n        marginTop: 16,\n        alignItems: 'center',\n    },\n    resendText: {\n        color: '#666',\n        fontSize: 14,\n        textDecorationLine: 'underline',\n    },\n});\n"]}
+{"version":3,"file":"PhoneVerificationTemplate.js","sourceRoot":"","sources":["../../../../src/components/KYCElements/PhoneVerificationTemplate.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useState, useRef, useEffect } from 'react';\nimport { View, Text, StyleSheet, TextInput, TouchableOpacity, Alert, Pressable, Modal, FlatList } from 'react-native';\nimport { TemplateComponent, LocalizedText } from '../../types/KYC.types';\nimport { useTemplateKYCFlowContext } from '../../hooks/useTemplateKYCFlow';\nimport { useI18n } from '../../hooks/useI18n';\nimport { Button } from '../ui/Button';\nimport kycService, { errorMessage } from '../../modules/api/KYCService';\n\ninterface PhoneVerificationTemplateProps {\n    component: TemplateComponent;\n    value?: any;\n    onValueChange: (data: any) => void;\n    error?: string;\n    language?: string;\n}\n\ntype VerificationStep = 'phone' | 'otp';\nconst CODE_LENGTH = 6;\n\n// Easily expand this list with any countries your app supports\nconst COUNTRY_CODES = [\n    { code: '+254', label: '🇰🇪 Kenya (+254)' },\n    { code: '+255', label: '🇹🇿 Tanzania (+255)' },\n    { code: '+256', label: '🇺🇬 Uganda (+256)' },\n    { code: '+250', label: '🇷🇼 Rwanda (+250)' },\n    { code: '+234', label: '🇳🇬 Nigeria (+234)' },\n    { code: '+27',  label: '🇿🇦 South Africa (+27)' },\n    { code: '+44',  label: '🇬🇧 UK (+44)' },\n    { code: '+1',   label: '🇺🇸 US/Canada (+1)' },\n    { code: '+91',  label: '🇮🇳 India (+91)' },\n];\n\nexport const PhoneVerificationTemplate: React.FC<PhoneVerificationTemplateProps> = ({\n    component,\n    value,\n    onValueChange,\n    error: propError,\n}) => {\n    const { actions, getLocalizedText, state, apiKey } = useTemplateKYCFlowContext();\n    const { t } = useI18n();\n\n    const auth = apiKey ? { apiKey } : (state.session?.token ? { token: state.session.token } : undefined);\n    const sessionId = state.session?.session_id || '';\n\n    // State\n    const [step, setStep] = useState<VerificationStep>('phone');\n    const [countryCode, setCountryCode] = useState('+254');\n    const [phone, setPhone] = useState('');\n    const [showCountryPicker, setShowCountryPicker] = useState(false);\n    \n    const [otp, setOtp] = useState('');\n    const [localError, setLocalError] = useState<string | null>(null);\n    const [isSimulating, setIsSimulating] = useState(false);\n    \n    // 🚨 NEW: Track actual focus state for visual feedback\n    const [isInputFocused, setIsInputFocused] = useState(false); \n\n    const inputRef = useRef<TextInput>(null);\n\n    const title = getLocalizedText(component.labels as LocalizedText);\n    const instructions = getLocalizedText(component.instructions as LocalizedText);\n\n    const verifyButtonText = getLocalizedText((component.ui as any).buttonText) || t('common.verify') || 'Verify';\n    const sendButtonText = t('common.sendCode') || 'Send Verification Code';\n    const buttonText = step === 'phone' ? sendButtonText : verifyButtonText;\n\n    // --- AUTO SUBMIT LOGIC ---\n    useEffect(() => {\n        if (otp.length === CODE_LENGTH && step === 'otp' && !isSimulating) {\n            handleVerifyCode();\n        }\n    }, [otp]);\n\n    // --- AUTO FOCUS LOGIC ---\n    useEffect(() => {\n        let focusTimer: ReturnType<typeof setTimeout>;\n        \n        if (step === 'otp' && !isSimulating) {\n            focusTimer = setTimeout(() => {\n                inputRef.current?.focus();\n            }, 100); \n        }\n        \n        return () => {\n            if (focusTimer) clearTimeout(focusTimer);\n        };\n    }, [step, isSimulating]); // 🚨 Must watch both states\n\n    const handleSendCode = async () => {\n        const trimmedPhone = phone.trim();\n        if (!trimmedPhone || trimmedPhone.length < 5) {\n            setLocalError(t('errors.invalidPhone') || 'Please enter a valid phone number');\n            return;\n        }\n\n        setLocalError(null);\n        setIsSimulating(true);\n\n        const fullPhoneNumber = `${countryCode}${trimmedPhone}`;\n\n        try {\n            await kycService.sendWhatsAppVerificationCode(sessionId, fullPhoneNumber, auth);\n            setStep('otp');\n        } catch (err: any) {\n            const msg = errorMessage(err) ?? err?.message ?? (t('errors.sendCodeFailed') || 'Failed to send verification code');\n            setLocalError(typeof msg === 'string' ? msg : JSON.stringify(msg));\n        } finally {\n            setIsSimulating(false);\n        }\n    };\n\n    const handleVerifyCode = async () => {\n        if (!otp || otp.length < CODE_LENGTH) {\n            setLocalError(t('errors.invalidCode') || 'Please enter the 6-digit code');\n            return;\n        }\n\n        setLocalError(null);\n        setIsSimulating(true);\n        \n        const fullPhoneNumber = `${countryCode}${phone.trim()}`;\n\n        try {\n            await kycService.verifyWhatsAppCode(sessionId, otp.trim(), fullPhoneNumber, auth);\n            \n            const data = { phone: fullPhoneNumber, otp, verified: true };\n            onValueChange(data);\n            actions.nextComponent(data);\n        } catch (err: any) {\n            const msg = errorMessage(err) ?? err?.message ?? (t('errors.wrongCode') || 'Invalid verification code');\n            setLocalError(typeof msg === 'string' ? msg : JSON.stringify(msg));\n            setOtp('');\n            // Refocus so they can type immediately after an error\n            inputRef.current?.focus(); \n        } finally {\n            setIsSimulating(false);\n        }\n    };\n\n    const onChangePhone = (text: string) => {\n        const cleaned = text.replace(/[^0-9]/g, '');\n        setPhone(cleaned);\n        if (localError) setLocalError(null);\n    };\n\n    const onChangeOtp = (text: string) => {\n        const cleaned = text.replace(/[^0-9]/g, '');\n        setOtp(cleaned);\n        if (localError) setLocalError(null);\n    };\n\n    const handleBackToPhone = () => {\n        setStep('phone');\n        setOtp('');\n        setLocalError(null);\n    };\n\n    const renderOtpBoxes = () => {\n        const boxes = new Array(CODE_LENGTH).fill(0);\n        return (\n            <Pressable style={styles.otpBoxesContainer} onPress={() => inputRef.current?.focus()}>\n                {boxes.map((_, index) => {\n                    const digit = otp[index] || '';\n                    const isFilled = index < otp.length;\n                    \n                    // 🚨 NEW: Only highlight if the input is ACTUALLY focused. \n                    // Highlights the next empty box, or the last box if full.\n                    const isActiveIndex = index === otp.length || (index === CODE_LENGTH - 1 && otp.length === CODE_LENGTH);\n                    const isCurrent = isInputFocused && isActiveIndex;\n\n                    return (\n                        <View \n                            key={index} \n                            style={[\n                                styles.otpBox, \n                                isFilled && styles.otpBoxFilled,\n                                isCurrent && styles.otpBoxActive // Active overrides filled\n                            ]}\n                        >\n                            <Text style={styles.otpBoxText}>{digit}</Text>\n                        </View>\n                    );\n                })}\n            </Pressable>\n        );\n    };\n\n    return (\n        <View style={styles.container}>\n            <Text style={styles.title}>{title}</Text>\n            <Text style={styles.instructions}>\n                {step === 'phone' ? instructions : (t('kyc.enterCodeSent') || `Please enter the code sent to ${countryCode} ${phone}`)}\n            </Text>\n\n            <View style={styles.contentContainer}>\n                {step === 'phone' ? (\n                    <View style={styles.inputContainer}>\n                        <Text style={styles.label}>{t('common.phone') || 'Phone Number'}</Text>\n                        \n                        <View style={styles.phoneInputRow}>\n                            <TouchableOpacity \n                                style={styles.countryPickerBtn} \n                                onPress={() => setShowCountryPicker(true)}\n                                disabled={isSimulating}\n                            >\n                                <Text style={styles.countryPickerText}>{countryCode}</Text>\n                                <Text style={styles.dropdownIcon}>▼</Text>\n                            </TouchableOpacity>\n\n                            <TextInput\n                                style={styles.phoneInput}\n                                placeholder=\"712 345 678\"\n                                value={phone}\n                                onChangeText={onChangePhone}\n                                keyboardType=\"phone-pad\"\n                                autoComplete=\"tel\"\n                                editable={!isSimulating}\n                            />\n                        </View>\n                    </View>\n                ) : (\n                    <View style={styles.inputContainer}>\n                        <Text style={styles.label}>{t('common.verificationCode') || 'Verification Code'}</Text>\n                        \n                        <View style={styles.otpWrapper}>\n                            {renderOtpBoxes()}     \n                            <TextInput\n                                ref={inputRef}\n                                style={styles.hiddenInput}\n                                value={otp}\n                                onChangeText={onChangeOtp}\n                                keyboardType=\"number-pad\"\n                                maxLength={CODE_LENGTH}\n                                editable={!isSimulating}\n                                textContentType=\"oneTimeCode\"\n                                caretHidden={true}\n                                onFocus={() => setIsInputFocused(true)}\n                                onBlur={() => setIsInputFocused(false)}\n                            />\n                        </View>\n\n                        <TouchableOpacity onPress={handleBackToPhone} style={styles.changeLink} disabled={isSimulating}>\n                            <Text style={styles.changeText}>{t('common.back') || 'Change number'}</Text>\n                        </TouchableOpacity>\n                    </View>\n                )}\n\n                {(localError || propError) && (\n                    <Text style={styles.errorText}>{localError || propError}</Text>\n                )}\n\n                <Button\n                    title={isSimulating ? (t('common.processing') || 'Processing...') : buttonText}\n                    onPress={step === 'phone' ? handleSendCode : handleVerifyCode}\n                    style={styles.button}\n                    disabled={\n                        isSimulating ||\n                        (step === 'phone' ? !phone : otp.length < CODE_LENGTH)\n                    }\n                />\n\n                {step === 'otp' && (\n                    <TouchableOpacity\n                        onPress={async () => {\n                            if (isSimulating) return;\n                            setLocalError(null);\n                            setIsSimulating(true);\n                            const fullPhoneNumber = `${countryCode}${phone.trim()}`;\n                            try {\n                                await kycService.sendWhatsAppVerificationCode(sessionId, fullPhoneNumber, auth);\n                                Alert.alert(\n                                    t('common.codeResent') || 'Code Resent',\n                                    t('common.codeResentMessage', { email: fullPhoneNumber }) || 'Code resent to ' + fullPhoneNumber\n                                );\n                                // Refocus after resending\n                                inputRef.current?.focus();\n                            } catch (err: any) {\n                                const msg = errorMessage(err) ?? err?.message ?? (t('errors.sendCodeFailed') || 'Failed to send code');\n                                setLocalError(typeof msg === 'string' ? msg : JSON.stringify(msg));\n                            } finally {\n                                setIsSimulating(false);\n                            }\n                        }}\n                        style={styles.resendButton}\n                        disabled={isSimulating}\n                    >\n                        <Text style={styles.resendText}>{t('common.resendCode') || 'Resend Code'}</Text>\n                    </TouchableOpacity>\n                )}\n            </View>\n\n            {/* COUNTRY PICKER MODAL */}\n            <Modal\n                visible={showCountryPicker}\n                animationType=\"slide\"\n                transparent={true}\n                onRequestClose={() => setShowCountryPicker(false)}\n            >\n                <TouchableOpacity \n                    style={styles.modalOverlay} \n                    activeOpacity={1} \n                    onPress={() => setShowCountryPicker(false)}\n                >\n                    <View style={styles.modalContent}>\n                        <View style={styles.modalHeader}>\n                            <Text style={styles.modalTitle}>Select Country</Text>\n                            <TouchableOpacity onPress={() => setShowCountryPicker(false)}>\n                                <Text style={styles.modalClose}>✕</Text>\n                            </TouchableOpacity>\n                        </View>\n                        <FlatList\n                            data={COUNTRY_CODES}\n                            keyExtractor={(item) => item.code}\n                            renderItem={({ item }) => (\n                                <TouchableOpacity \n                                    style={styles.countryItem}\n                                    onPress={() => {\n                                        setCountryCode(item.code);\n                                        setShowCountryPicker(false);\n                                    }}\n                                >\n                                    <Text style={styles.countryItemLabel}>{item.label}</Text>\n                                    {countryCode === item.code && <Text style={styles.checkMark}>✓</Text>}\n                                </TouchableOpacity>\n                            )}\n                        />\n                    </View>\n                </TouchableOpacity>\n            </Modal>\n        </View>\n    );\n};\n\nconst styles = StyleSheet.create({\n    // ... Keeping all previous styles identical for safety ...\n    container: {\n        padding: 24,\n        backgroundColor: 'white',\n        borderRadius: 16,\n        margin: 16,\n        shadowColor: '#000',\n        shadowOffset: { width: 0, height: 4 },\n        shadowOpacity: 0.1,\n        shadowRadius: 12,\n        elevation: 5,\n        width: '95%',\n    },\n    title: {\n        fontSize: 24,\n        fontWeight: '700',\n        marginBottom: 8,\n        color: '#1a1a1a',\n        textAlign: 'center',\n    },\n    instructions: {\n        fontSize: 16,\n        color: '#666',\n        marginBottom: 32,\n        lineHeight: 24,\n        textAlign: 'center',\n    },\n    contentContainer: {},\n    inputContainer: {\n        marginBottom: 24,\n    },\n    label: {\n        fontSize: 14,\n        fontWeight: '600',\n        color: '#333',\n        marginBottom: 8,\n        marginLeft: 4,\n    },\n    phoneInputRow: {\n        flexDirection: 'row',\n        alignItems: 'center',\n        gap: 10,\n    },\n    countryPickerBtn: {\n        flexDirection: 'row',\n        alignItems: 'center',\n        justifyContent: 'space-between',\n        borderWidth: 1,\n        borderColor: '#e0e0e0',\n        paddingHorizontal: 12,\n        paddingVertical: 16,\n        borderRadius: 12,\n        backgroundColor: '#f8f9fa',\n        minWidth: 90,\n    },\n    countryPickerText: {\n        fontSize: 16,\n        color: '#333',\n        fontWeight: '600',\n    },\n    dropdownIcon: {\n        fontSize: 12,\n        color: '#666',\n        marginLeft: 8,\n    },\n    phoneInput: {\n        flex: 1, \n        borderWidth: 1,\n        borderColor: '#e0e0e0',\n        padding: 16,\n        borderRadius: 12,\n        fontSize: 16,\n        backgroundColor: '#f8f9fa',\n        color: '#333',\n    },\n    modalOverlay: {\n        flex: 1,\n        backgroundColor: 'rgba(0,0,0,0.5)',\n        justifyContent: 'flex-end',\n    },\n    modalContent: {\n        backgroundColor: 'white',\n        borderTopLeftRadius: 24,\n        borderTopRightRadius: 24,\n        maxHeight: '60%',\n        paddingBottom: 40,\n    },\n    modalHeader: {\n        flexDirection: 'row',\n        justifyContent: 'space-between',\n        alignItems: 'center',\n        padding: 20,\n        borderBottomWidth: 1,\n        borderBottomColor: '#f0f0f0',\n    },\n    modalTitle: {\n        fontSize: 18,\n        fontWeight: '700',\n        color: '#1a1a1a',\n    },\n    modalClose: {\n        fontSize: 20,\n        color: '#666',\n        padding: 5,\n    },\n    countryItem: {\n        flexDirection: 'row',\n        justifyContent: 'space-between',\n        alignItems: 'center',\n        paddingVertical: 16,\n        paddingHorizontal: 24,\n        borderBottomWidth: 1,\n        borderBottomColor: '#f8f9fa',\n    },\n    countryItemLabel: {\n        fontSize: 16,\n        color: '#333',\n    },\n    checkMark: {\n        color: '#2DBD60',\n        fontSize: 18,\n        fontWeight: 'bold',\n    },\n    otpWrapper: {\n        position: 'relative',\n        width: '100%',\n        height: 60,\n    },\n    otpBoxesContainer: {\n        flexDirection: 'row',\n        justifyContent: 'space-between',\n        alignItems: 'center',\n        width: '100%',\n        height: '100%',\n    },\n    otpBox: {\n        width: '14%',\n        aspectRatio: 1,\n        borderWidth: 1,\n        borderColor: '#e0e0e0',\n        borderRadius: 12,\n        backgroundColor: '#f8f9fa',\n        justifyContent: 'center',\n        alignItems: 'center',\n    },\n    otpBoxFilled: {\n        borderColor: '#9ca3af',\n        backgroundColor: '#ffffff',\n    },\n    otpBoxActive: {\n        borderColor: '#2DBD60',\n        borderWidth: 2,\n        backgroundColor: '#ffffff',\n    },\n    otpBoxText: {\n        fontSize: 24,\n        fontWeight: '700',\n        color: '#1a1a1a',\n    },\n    hiddenInput: {\n        position: 'absolute',\n        top: 0,\n        left: 0,\n        width: '100%',\n        height: '100%',\n        opacity: 0,\n    },\n    errorText: {\n        color: '#dc2626',\n        marginBottom: 16,\n        fontSize: 14,\n        textAlign: 'center',\n        backgroundColor: '#fee2e2',\n        padding: 8,\n        borderRadius: 8,\n        overflow: 'hidden',\n    },\n    button: {\n        height: 50,\n        borderRadius: 12,\n        width: \"100%\",\n    },\n    changeLink: {\n        alignSelf: 'flex-end',\n        marginTop: 12,\n    },\n    changeText: {\n        color: '#2DBD60',\n        fontSize: 14,\n        fontWeight: '500',\n    },\n    resendButton: {\n        marginTop: 16,\n        alignItems: 'center',\n    },\n    resendText: {\n        color: '#666',\n        fontSize: 14,\n        textDecorationLine: 'underline',\n    },\n});"]}

package/build/src/components/KYCElements/SelfieCapture.d.ts

@@ -3,7 +3,7 @@ import { KYCElement } from '../../types/KYC.types';
 interface SelfieCaptureProps {
     element: KYCElement;
     value?: string;
-    onValueChange: (value: string) => void;
+    onValueChange: (value: string) => void | Promise<void>;
     error?: string;
 }
 export declare const SelfieCapture: React.FC<SelfieCaptureProps>;

package/build/src/components/KYCElements/SelfieCapture.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SelfieCapture.d.ts","sourceRoot":"","sources":["../../../../src/components/KYCElements/SelfieCapture.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAKxC,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAEnD,UAAU,kBAAkB;IAC1B,OAAO,EAAE,UAAU,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAiHtD,CAAC"}
+{"version":3,"file":"SelfieCapture.d.ts","sourceRoot":"","sources":["../../../../src/components/KYCElements/SelfieCapture.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAKxC,OAAO,EAAE,UAAU,EAAwB,MAAM,uBAAuB,CAAC;AAEzE,UAAU,kBAAkB;IAC1B,OAAO,EAAE,UAAU,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IACvD,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CA4MtD,CAAC"}