@sanctum-key/react-native-sdk 1.0.11 → 1.0.13

package/src/components/KYCElements/PhoneVerificationTemplate.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useRef, useEffect } from 'react';
-import { View, Text, StyleSheet, TextInput, TouchableOpacity, Alert, Pressable, Modal, FlatList } from 'react-native';
+import { View, Text, StyleSheet, TextInput, TouchableOpacity, Alert, Pressable, Modal, FlatList, Platform } from 'react-native';
 import { TemplateComponent, LocalizedText } from '../../types/KYC.types';
 import { useTemplateKYCFlowContext } from '../../hooks/useTemplateKYCFlow';
 import { useI18n } from '../../hooks/useI18n';
@@ -17,7 +17,6 @@ interface PhoneVerificationTemplateProps {
 type VerificationStep = 'phone' | 'otp';
 const CODE_LENGTH = 6;
 
-// 🌍 The Country Codes Array
 const COUNTRY_CODES = [
     { code: '+254', label: '🇰🇪 Kenya (+254)' },
     { code: '+255', label: '🇹🇿 Tanzania (+255)' },
@@ -38,7 +37,6 @@ export const PhoneVerificationTemplate: React.FC<PhoneVerificationTemplateProps>
 }) => {
     const { actions, getLocalizedText, state, apiKey } = useTemplateKYCFlowContext();
     const { t } = useI18n();
-
     const auth = apiKey ? { apiKey } : (state.session?.token ? { token: state.session.token } : undefined);
     const sessionId = state.session?.session_id || '';
 
@@ -47,19 +45,16 @@ export const PhoneVerificationTemplate: React.FC<PhoneVerificationTemplateProps>
     const [countryCode, setCountryCode] = useState('+254');
     const [phone, setPhone] = useState('');
     const [showCountryPicker, setShowCountryPicker] = useState(false);
-    
     const [otp, setOtp] = useState('');
     const [localError, setLocalError] = useState<string | null>(null);
     const [isSimulating, setIsSimulating] = useState(false);
     
     // Track actual focus state for visual feedback
-    const [isInputFocused, setIsInputFocused] = useState(false); 
-
+    const [isInputFocused, setIsInputFocused] = useState(false);
     const inputRef = useRef<TextInput>(null);
 
     const title = getLocalizedText(component.labels as LocalizedText);
     const instructions = getLocalizedText(component.instructions as LocalizedText);
-
     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;
@@ -74,14 +69,11 @@ export const PhoneVerificationTemplate: React.FC<PhoneVerificationTemplateProps>
     // --- SAFE AUTO FOCUS LOGIC ---
     useEffect(() => {
         let focusTimer: ReturnType<typeof setTimeout>;
-        
-        // Only attempt focus when we are on the OTP step AND the loading state is completely finished
         if (step === 'otp' && !isSimulating) {
             focusTimer = setTimeout(() => {
                 inputRef.current?.focus();
-            }, 300); // 300ms guarantees view is painted before requesting keyboard
+            }, 300);
         }
-        
         return () => {
             if (focusTimer) clearTimeout(focusTimer);
         };
@@ -93,10 +85,8 @@ export const PhoneVerificationTemplate: React.FC<PhoneVerificationTemplateProps>
             setLocalError(t('errors.invalidPhone') || 'Please enter a valid phone number');
             return;
         }
-
         setLocalError(null);
         setIsSimulating(true);
-
         const fullPhoneNumber = `${countryCode}${trimmedPhone}`;
 
         try {
@@ -115,15 +105,12 @@ export const PhoneVerificationTemplate: React.FC<PhoneVerificationTemplateProps>
             setLocalError(t('errors.invalidCode') || 'Please enter the 6-digit code');
             return;
         }
-
         setLocalError(null);
         setIsSimulating(true);
-        
         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);
@@ -131,7 +118,7 @@ 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(); 
+            inputRef.current?.focus();
         } finally {
             setIsSimulating(false);
         }
@@ -162,18 +149,15 @@ export const PhoneVerificationTemplate: React.FC<PhoneVerificationTemplateProps>
                 {boxes.map((_, index) => {
                     const digit = otp[index] || '';
                     const isFilled = index < otp.length;
-                    
-                    // Only highlight if the input is ACTUALLY focused. 
                     const isActiveIndex = index === otp.length || (index === CODE_LENGTH - 1 && otp.length === CODE_LENGTH);
                     const isCurrent = isInputFocused && isActiveIndex;
-
                     return (
-                        <View 
-                            key={index} 
+                        <View
+                            key={index}
                             style={[
-                                styles.otpBox, 
+                                styles.otpBox,
                                 isFilled && styles.otpBoxFilled,
-                                isCurrent && styles.otpBoxActive // Active overrides filled
+                                isCurrent && styles.otpBoxActive
                             ]}
                         >
                             <Text style={styles.otpBoxText}>{digit}</Text>
@@ -185,152 +169,169 @@ export const PhoneVerificationTemplate: React.FC<PhoneVerificationTemplateProps>
     };
 
     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 ${countryCode} ${phone}`)}
-            </Text>
-
-            <View style={styles.contentContainer}>
-                {step === 'phone' ? (
-                    <View style={styles.inputContainer}>
-                        <Text style={styles.label}>{t('common.phone') || 'Phone Number'}</Text>
-                        
-                        <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>
+        <View style={styles.wrapper}>
+            <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 ${countryCode} ${phone}`)}
+                </Text>
+
+                <View style={styles.contentContainer}>
+                    {step === 'phone' ? (
+                        <View style={styles.inputContainer}>
+                            <Text style={styles.label}>{t('common.phone') || 'Phone Number'}</Text>
+                            <View style={styles.phoneInputRow}>
+                                <TouchableOpacity
+                                    style={styles.countryPickerBtn}
+                                    onPress={() => setShowCountryPicker(true)}
+                                    disabled={isSimulating}
+                                    activeOpacity={0.7}
+                                >
+                                    <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}
-                            />
+                                <TextInput
+                                    style={[
+                                        styles.phoneInput, 
+                                        // 🚨 Removes browser focus ring on web
+                                        Platform.OS === 'web' && { outlineStyle: 'none' } as any
+                                    ]}
+                                    placeholder="712 345 678"
+                                    placeholderTextColor="#9CA3AF" // 🚨 Explicit light color so it looks like a placeholder
+                                    value={phone}
+                                    onChangeText={onChangePhone}
+                                    keyboardType="phone-pad"
+                                    autoComplete="tel"
+                                    editable={!isSimulating}
+                                />
+                            </View>
                         </View>
-                    </View>
-                ) : (
-                    <View style={styles.inputContainer}>
-                        <Text style={styles.label}>{t('common.verificationCode') || 'Verification Code'}</Text>
-                        
-                        <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 style={styles.inputContainer}>
+                            <Text style={styles.label}>{t('common.verificationCode') || 'Verification Code'}</Text>
+                            <View style={styles.otpWrapper}>
+                                {renderOtpBoxes()}
+                                <TextInput
+                                    ref={inputRef}
+                                    style={[
+                                        styles.hiddenInput,
+                                        Platform.OS === 'web' && { outlineStyle: 'none' } as any
+                                    ]}
+                                    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>
-
-                        <TouchableOpacity onPress={handleBackToPhone} style={styles.changeLink} disabled={isSimulating}>
-                            <Text style={styles.changeText}>{t('common.back') || 'Change number'}</Text>
+                    )}
+
+                    {(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.length < CODE_LENGTH)
+                        }
+                    />
+
+                    {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
+                                    );
+                                    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}
+                        >
+                            <Text style={styles.resendText}>{t('common.resendCode') || 'Resend Code'}</Text>
                         </TouchableOpacity>
-                    </View>
-                )}
-
-                {(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.length < CODE_LENGTH)
-                    }
-                />
-
-                {step === 'otp' && (
+                    )}
+                </View>
+
+                {/* COUNTRY PICKER MODAL */}
+                <Modal
+                    visible={showCountryPicker}
+                    animationType="slide"
+                    transparent={true}
+                    onRequestClose={() => setShowCountryPicker(false)}
+                >
                     <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
-                                );
-                                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}
+                        style={styles.modalOverlay}
+                        activeOpacity={1}
+                        onPress={() => setShowCountryPicker(false)}
                     >
-                        <Text style={styles.resendText}>{t('common.resendCode') || 'Resend Code'}</Text>
+                        {/* 🚨 Added wrapper to center modal on desktop */}
+                        <View style={styles.modalCenteredWrapper}>
+                            <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>
+                        </View>
                     </TouchableOpacity>
-                )}
+                </Modal>
             </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({
+    // 🚨 Added wrapper to easily center the component on web
+    wrapper: {
+        flex: 1,
+        width: '100%',
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
     container: {
         padding: 24,
         backgroundColor: 'white',
@@ -342,6 +343,8 @@ const styles = StyleSheet.create({
         shadowRadius: 12,
         elevation: 5,
         width: '95%',
+        // 🚨 Max width constraint for web so inputs don't stretch infinitely
+        ...(Platform.OS === 'web' ? { maxWidth: 450, paddingVertical: 40 } : {}),
     },
     title: {
         fontSize: 24,
@@ -357,7 +360,9 @@ const styles = StyleSheet.create({
         lineHeight: 24,
         textAlign: 'center',
     },
-    contentContainer: {},
+    contentContainer: {
+        width: '100%',
+    },
     inputContainer: {
         marginBottom: 24,
     },
@@ -380,10 +385,11 @@ const styles = StyleSheet.create({
         borderWidth: 1,
         borderColor: '#e0e0e0',
         paddingHorizontal: 12,
-        paddingVertical: 16,
+        paddingVertical: Platform.OS === 'web' ? 14 : 16, // Adjusted for web inputs
         borderRadius: 12,
         backgroundColor: '#f8f9fa',
-        minWidth: 90,
+        minWidth: 100,
+        ...(Platform.OS === 'web' ? { cursor: 'pointer' } as any : {}),
     },
     countryPickerText: {
         fontSize: 16,
@@ -396,10 +402,10 @@ const styles = StyleSheet.create({
         marginLeft: 8,
     },
     phoneInput: {
-        flex: 1, 
+        flex: 1,
         borderWidth: 1,
         borderColor: '#e0e0e0',
-        padding: 16,
+        padding: Platform.OS === 'web' ? 14 : 16,
         borderRadius: 12,
         fontSize: 16,
         backgroundColor: '#f8f9fa',
@@ -410,12 +416,19 @@ const styles = StyleSheet.create({
         backgroundColor: 'rgba(0,0,0,0.5)',
         justifyContent: 'flex-end',
     },
+    // 🚨 Centering wrapper for the modal on web
+    modalCenteredWrapper: {
+        width: '100%',
+        alignSelf: 'center',
+        ...(Platform.OS === 'web' ? { maxWidth: 500, justifyContent: 'center', flex: 1 } : {}),
+    },
     modalContent: {
         backgroundColor: 'white',
         borderTopLeftRadius: 24,
         borderTopRightRadius: 24,
-        maxHeight: '60%',
-        paddingBottom: 40,
+        maxHeight: '70%',
+        paddingBottom: Platform.OS === 'ios' ? 40 : 20,
+        ...(Platform.OS === 'web' ? { borderRadius: 24, maxHeight: 500 } : {}),
     },
     modalHeader: {
         flexDirection: 'row',
@@ -434,6 +447,7 @@ const styles = StyleSheet.create({
         fontSize: 20,
         color: '#666',
         padding: 5,
+        ...(Platform.OS === 'web' ? { cursor: 'pointer' } as any : {}),
     },
     countryItem: {
         flexDirection: 'row',
@@ -443,6 +457,7 @@ const styles = StyleSheet.create({
         paddingHorizontal: 24,
         borderBottomWidth: 1,
         borderBottomColor: '#f8f9fa',
+        ...(Platform.OS === 'web' ? { cursor: 'pointer' } as any : {}),
     },
     countryItemLabel: {
         fontSize: 16,
@@ -464,10 +479,12 @@ const styles = StyleSheet.create({
         alignItems: 'center',
         width: '100%',
         height: '100%',
+        ...(Platform.OS === 'web' ? { cursor: 'text' } as any : {}),
     },
     otpBox: {
         width: '14%',
-        aspectRatio: 1,
+        aspectRatio: Platform.OS === 'web' ? undefined : 1, // Let height dictate aspect ratio on web
+        height: Platform.OS === 'web' ? 56 : undefined, // Fixed height prevents blowouts on web
         borderWidth: 1,
         borderColor: '#e0e0e0',
         borderRadius: 12,
@@ -496,6 +513,7 @@ const styles = StyleSheet.create({
         width: '100%',
         height: '100%',
         opacity: 0,
+        ...(Platform.OS === 'web' ? { cursor: 'text' } as any : {}),
     },
     errorText: {
         color: '#dc2626',
@@ -515,6 +533,7 @@ const styles = StyleSheet.create({
     changeLink: {
         alignSelf: 'flex-end',
         marginTop: 12,
+        ...(Platform.OS === 'web' ? { cursor: 'pointer' } as any : {}),
     },
     changeText: {
         color: '#2DBD60',
@@ -524,6 +543,7 @@ const styles = StyleSheet.create({
     resendButton: {
         marginTop: 16,
         alignItems: 'center',
+        ...(Platform.OS === 'web' ? { cursor: 'pointer' } as any : {}),
     },
     resendText: {
         color: '#666',

package/src/modules/api/KYCService.ts

@@ -63,7 +63,7 @@ export class KYCService {
   private faceServiceURL = 'https://face-infera.sanctumkey.com';
   private textExtractionServiceURL = 'https://text-infera.sanctumkey.com';
   private mrzServiceURL = 'https://mrz-infera.sanctumkey.com';
-  private barcodeServiceURL = 'https://kyc-engine.SanctumKey.net:8000';
+  private barcodeServiceURL = 'https://kyc-engine.SanctumKey.net';
   private orientationServiceURL = 'http://18.188.180.154:8080';
 
   // private faceServiceURL = 'https://kyc-engine.transfergratis.net:8000';