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

package/src/components/KYCElements/PhoneVerificationTemplate.tsx

@@ -1,9 +1,10 @@
-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 { TemplateComponent, LocalizedText } from '../../types/KYC.types';
 import { useTemplateKYCFlowContext } from '../../hooks/useTemplateKYCFlow';
 import { useI18n } from '../../hooks/useI18n';
 import { Button } from '../ui/Button';
+import kycService, { errorMessage } from '../../modules/api/KYCService';
 
 interface PhoneVerificationTemplateProps {
     component: TemplateComponent;
@@ -14,6 +15,20 @@ interface PhoneVerificationTemplateProps {
 }
 
 type VerificationStep = 'phone' | 'otp';
+const CODE_LENGTH = 6;
+
+// Easily expand this list with any countries your app supports
+const COUNTRY_CODES = [
+    { code: '+254', label: '🇰🇪 Kenya (+254)' },
+    { code: '+255', label: '🇹🇿 Tanzania (+255)' },
+    { code: '+256', label: '🇺🇬 Uganda (+256)' },
+    { code: '+250', label: '🇷🇼 Rwanda (+250)' },
+    { code: '+234', label: '🇳🇬 Nigeria (+234)' },
+    { code: '+27',  label: '🇿🇦 South Africa (+27)' },
+    { code: '+44',  label: '🇬🇧 UK (+44)' },
+    { code: '+1',   label: '🇺🇸 US/Canada (+1)' },
+    { code: '+91',  label: '🇮🇳 India (+91)' },
+];
 
 export const PhoneVerificationTemplate: React.FC<PhoneVerificationTemplateProps> = ({
     component,
@@ -21,27 +36,59 @@ export const PhoneVerificationTemplate: React.FC<PhoneVerificationTemplateProps>
     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<VerificationStep>('phone');
+    const [countryCode, setCountryCode] = useState('+254');
     const [phone, setPhone] = useState('');
+    const [showCountryPicker, setShowCountryPicker] = useState(false);
+    
     const [otp, setOtp] = useState('');
     const [localError, setLocalError] = useState<string | null>(null);
     const [isSimulating, setIsSimulating] = useState(false);
+    
+    // 🚨 NEW: Track actual focus state for visual feedback
+    const [isInputFocused, setIsInputFocused] = useState(false); 
+
+    const inputRef = useRef<TextInput>(null);
 
     const title = getLocalizedText(component.labels as LocalizedText);
     const instructions = getLocalizedText(component.instructions as LocalizedText);
 
-    // Determine button text based on step
     const verifyButtonText = getLocalizedText((component.ui as any).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: 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) {
             setLocalError(t('errors.invalidPhone') || 'Please enter a valid phone number');
             return;
         }
@@ -49,43 +96,56 @@ export const PhoneVerificationTemplate: React.FC<PhoneVerificationTemplateProps>
         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: any) {
+            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);
+        
+        const fullPhoneNumber = `${countryCode}${phone.trim()}`;
 
-        // Simulate verification API
-        setTimeout(() => {
+        try {
+            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('');
+            // 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: string) => {
-        setPhone(text);
+        const cleaned = text.replace(/[^0-9]/g, '');
+        setPhone(cleaned);
         if (localError) setLocalError(null);
     };
 
     const onChangeOtp = (text: string) => {
-        setOtp(text);
+        const cleaned = text.replace(/[^0-9]/g, '');
+        setOtp(cleaned);
         if (localError) setLocalError(null);
     };
 
@@ -95,40 +155,91 @@ export const PhoneVerificationTemplate: React.FC<PhoneVerificationTemplateProps>
         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>
@@ -144,18 +255,31 @@ export const PhoneVerificationTemplate: React.FC<PhoneVerificationTemplateProps>
                     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
-                            );
+                        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: any) {
+                                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}
@@ -164,11 +288,51 @@ export const PhoneVerificationTemplate: React.FC<PhoneVerificationTemplateProps>
                     </TouchableOpacity>
                 )}
             </View>
+
+            {/* COUNTRY PICKER MODAL */}
+            <Modal
+                visible={showCountryPicker}
+                animationType="slide"
+                transparent={true}
+                onRequestClose={() => setShowCountryPicker(false)}
+            >
+                <TouchableOpacity 
+                    style={styles.modalOverlay} 
+                    activeOpacity={1} 
+                    onPress={() => setShowCountryPicker(false)}
+                >
+                    <View style={styles.modalContent}>
+                        <View style={styles.modalHeader}>
+                            <Text style={styles.modalTitle}>Select Country</Text>
+                            <TouchableOpacity onPress={() => setShowCountryPicker(false)}>
+                                <Text style={styles.modalClose}>✕</Text>
+                            </TouchableOpacity>
+                        </View>
+                        <FlatList
+                            data={COUNTRY_CODES}
+                            keyExtractor={(item) => item.code}
+                            renderItem={({ item }) => (
+                                <TouchableOpacity 
+                                    style={styles.countryItem}
+                                    onPress={() => {
+                                        setCountryCode(item.code);
+                                        setShowCountryPicker(false);
+                                    }}
+                                >
+                                    <Text style={styles.countryItemLabel}>{item.label}</Text>
+                                    {countryCode === item.code && <Text style={styles.checkMark}>✓</Text>}
+                                </TouchableOpacity>
+                            )}
+                        />
+                    </View>
+                </TouchableOpacity>
+            </Modal>
         </View>
     );
 };
 
 const styles = StyleSheet.create({
+    // ... Keeping all previous styles identical for safety ...
     container: {
         padding: 24,
         backgroundColor: 'white',
@@ -195,9 +359,7 @@ const styles = StyleSheet.create({
         lineHeight: 24,
         textAlign: 'center',
     },
-    contentContainer: {
-        // width: '100%',
-    },
+    contentContainer: {},
     inputContainer: {
         marginBottom: 24,
     },
@@ -208,7 +370,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,
@@ -217,6 +407,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,
@@ -230,11 +512,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',
@@ -250,4 +532,4 @@ const styles = StyleSheet.create({
         fontSize: 14,
         textDecorationLine: 'underline',
     },
-});
+});