@oxyhq/services 5.13.40 → 5.15.0

package/src/ui/components/index.ts

@@ -5,7 +5,10 @@ export { default as SectionTitle } from './SectionTitle';
 export { default as GroupedItem } from './GroupedItem';
 export { default as GroupedSection } from './GroupedSection';
 export { default as QuickActions } from './QuickActions';
-export { default as Header } from './Header';
+export { default as Header, getHeaderHeight } from './Header';
+export { default as LoadingState } from './LoadingState';
+export { default as EmptyState } from './EmptyState';
+export { default as SettingRow } from './SettingRow';
 
 // Re-export existing components
 export { default as Avatar } from './Avatar';

package/src/ui/components/profile/EditBioModal.tsx

@@ -0,0 +1,184 @@
+import React, { useState, useEffect } from 'react';
+import {
+    View,
+    Text,
+    TextInput,
+    TouchableOpacity,
+    StyleSheet,
+    Modal,
+    Platform,
+} from 'react-native';
+import { Ionicons } from '@expo/vector-icons';
+import { useThemeStyles } from '../../hooks/useThemeStyles';
+import { useColorScheme } from '../../hooks/use-color-scheme';
+import { useI18n } from '../../hooks/useI18n';
+import { fontFamilies } from '../../styles/fonts';
+import { useProfileEditing } from '../../hooks/useProfileEditing';
+
+interface EditBioModalProps {
+    visible: boolean;
+    onClose: () => void;
+    initialValue?: string;
+    theme?: 'light' | 'dark';
+    onSave?: () => void;
+}
+
+export const EditBioModal: React.FC<EditBioModalProps> = ({
+    visible,
+    onClose,
+    initialValue = '',
+    theme = 'light',
+    onSave,
+}) => {
+    const { t } = useI18n();
+    const colorScheme = useColorScheme();
+    const themeStyles = useThemeStyles(theme || 'light', colorScheme);
+    const colors = themeStyles.colors;
+    const { updateField, isSaving } = useProfileEditing();
+
+    const [bio, setBio] = useState(initialValue);
+
+    useEffect(() => {
+        if (visible) {
+            setBio(initialValue);
+        }
+    }, [visible, initialValue]);
+
+    const handleSave = async () => {
+        const success = await updateField('bio', bio);
+        if (success) {
+            onSave?.();
+            onClose();
+        }
+    };
+
+    return (
+        <Modal
+            visible={visible}
+            animationType="slide"
+            transparent={true}
+            onRequestClose={onClose}
+        >
+            <View style={styles.modalOverlay}>
+                <View style={[styles.modalContent, { backgroundColor: colors.background }]}>
+                    <View style={styles.modalHeader}>
+                        <TouchableOpacity onPress={onClose} style={styles.closeButton}>
+                            <Ionicons name="close" size={24} color={colors.text} />
+                        </TouchableOpacity>
+                        <Text style={[styles.modalTitle, { color: colors.text }]}>
+                            {t('editProfile.items.bio.title') || 'Bio'}
+                        </Text>
+                        <TouchableOpacity
+                            onPress={handleSave}
+                            disabled={isSaving}
+                            style={[styles.saveButton, { opacity: isSaving ? 0.5 : 1 }]}
+                        >
+                            <Text style={[styles.saveButtonText, { color: colors.tint }]}>
+                                {isSaving ? 'Saving...' : 'Save'}
+                            </Text>
+                        </TouchableOpacity>
+                    </View>
+
+                    <View style={styles.modalBody}>
+                        <View style={styles.inputGroup}>
+                            <Text style={[styles.label, { color: colors.text }]}>
+                                {t('editProfile.items.bio.label') || 'Bio'}
+                            </Text>
+                            <TextInput
+                                style={[
+                                    styles.textArea,
+                                    {
+                                        backgroundColor: colors.card,
+                                        color: colors.text,
+                                        borderColor: colors.border,
+                                    },
+                                ]}
+                                value={bio}
+                                onChangeText={setBio}
+                                placeholder={t('editProfile.items.bio.placeholder') || 'Tell people about yourself...'}
+                                placeholderTextColor={colors.secondaryText}
+                                autoFocus
+                                multiline
+                                numberOfLines={6}
+                                textAlignVertical="top"
+                                selectionColor={colors.tint}
+                            />
+                        </View>
+                    </View>
+                </View>
+            </View>
+        </Modal>
+    );
+};
+
+const styles = StyleSheet.create({
+    modalOverlay: {
+        flex: 1,
+        backgroundColor: 'rgba(0, 0, 0, 0.5)',
+        justifyContent: 'flex-end',
+    },
+    modalContent: {
+        borderTopLeftRadius: 20,
+        borderTopRightRadius: 20,
+        paddingTop: Platform.OS === 'ios' ? 20 : 16,
+        maxHeight: '80%',
+    },
+    modalHeader: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        paddingHorizontal: 16,
+        paddingBottom: 16,
+        borderBottomWidth: StyleSheet.hairlineWidth,
+        borderBottomColor: '#E5E5EA',
+    },
+    closeButton: {
+        width: 40,
+        height: 40,
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    modalTitle: {
+        fontSize: 18,
+        fontWeight: '600',
+        fontFamily: fontFamilies.phuduSemiBold,
+        flex: 1,
+        textAlign: 'center',
+    },
+    saveButton: {
+        paddingHorizontal: 16,
+        paddingVertical: 8,
+    },
+    saveButtonText: {
+        fontSize: 16,
+        fontWeight: '600',
+        fontFamily: fontFamilies.phuduSemiBold,
+    },
+    modalBody: {
+        padding: 16,
+        gap: 16,
+    },
+    inputGroup: {
+        gap: 8,
+    },
+    label: {
+        fontSize: 14,
+        fontWeight: '600',
+        fontFamily: fontFamilies.phuduSemiBold,
+    },
+    textArea: {
+        borderWidth: StyleSheet.hairlineWidth,
+        borderRadius: 12,
+        padding: 16,
+        fontSize: 16,
+        minHeight: 120,
+    },
+});
+
+
+
+
+
+
+
+

package/src/ui/components/profile/EditDisplayNameModal.tsx

@@ -0,0 +1,205 @@
+import React, { useState, useEffect } from 'react';
+import {
+    View,
+    Text,
+    TextInput,
+    TouchableOpacity,
+    StyleSheet,
+    Modal,
+    Platform,
+} from 'react-native';
+import { Ionicons } from '@expo/vector-icons';
+import { useThemeStyles } from '../../hooks/useThemeStyles';
+import { useColorScheme } from '../../hooks/use-color-scheme';
+import { useI18n } from '../../hooks/useI18n';
+import { fontFamilies } from '../../styles/fonts';
+import { useProfileEditing } from '../../hooks/useProfileEditing';
+
+interface EditDisplayNameModalProps {
+    visible: boolean;
+    onClose: () => void;
+    initialDisplayName?: string;
+    initialLastName?: string;
+    theme?: 'light' | 'dark';
+    onSave?: () => void;
+}
+
+export const EditDisplayNameModal: React.FC<EditDisplayNameModalProps> = ({
+    visible,
+    onClose,
+    initialDisplayName = '',
+    initialLastName = '',
+    theme = 'light',
+    onSave,
+}) => {
+    const { t } = useI18n();
+    const colorScheme = useColorScheme();
+    const themeStyles = useThemeStyles(theme || 'light', colorScheme);
+    const colors = themeStyles.colors;
+    const { updateField, isSaving } = useProfileEditing();
+
+    const [displayName, setDisplayName] = useState(initialDisplayName);
+    const [lastName, setLastName] = useState(initialLastName);
+
+    useEffect(() => {
+        if (visible) {
+            setDisplayName(initialDisplayName);
+            setLastName(initialLastName);
+        }
+    }, [visible, initialDisplayName, initialLastName]);
+
+    const { saveProfile } = useProfileEditing();
+
+    const handleSave = async () => {
+        const updates = {
+            displayName,
+            lastName,
+        };
+        const success = await saveProfile(updates);
+        if (success) {
+            onSave?.();
+            onClose();
+        }
+    };
+
+    return (
+        <Modal
+            visible={visible}
+            animationType="slide"
+            transparent={true}
+            onRequestClose={onClose}
+        >
+            <View style={styles.modalOverlay}>
+                <View style={[styles.modalContent, { backgroundColor: colors.background }]}>
+                    <View style={styles.modalHeader}>
+                        <TouchableOpacity onPress={onClose} style={styles.closeButton}>
+                            <Ionicons name="close" size={24} color={colors.text} />
+                        </TouchableOpacity>
+                        <Text style={[styles.modalTitle, { color: colors.text }]}>
+                            {t('editProfile.items.displayName.title') || 'Display Name'}
+                        </Text>
+                        <TouchableOpacity
+                            onPress={handleSave}
+                            disabled={isSaving}
+                            style={[styles.saveButton, { opacity: isSaving ? 0.5 : 1 }]}
+                        >
+                            <Text style={[styles.saveButtonText, { color: colors.tint }]}>
+                                {isSaving ? 'Saving...' : 'Save'}
+                            </Text>
+                        </TouchableOpacity>
+                    </View>
+
+                    <View style={styles.modalBody}>
+                        <View style={styles.inputGroup}>
+                            <Text style={[styles.label, { color: colors.text }]}>
+                                {t('editProfile.items.displayName.firstName') || 'First Name'}
+                            </Text>
+                            <TextInput
+                                style={[
+                                    styles.input,
+                                    {
+                                        backgroundColor: colors.card,
+                                        color: colors.text,
+                                        borderColor: colors.border,
+                                    },
+                                ]}
+                                value={displayName}
+                                onChangeText={setDisplayName}
+                                placeholder={t('editProfile.items.displayName.firstNamePlaceholder') || 'Enter first name'}
+                                placeholderTextColor={colors.secondaryText}
+                                autoFocus
+                                selectionColor={colors.tint}
+                            />
+                        </View>
+
+                        <View style={styles.inputGroup}>
+                            <Text style={[styles.label, { color: colors.text }]}>
+                                {t('editProfile.items.displayName.lastName') || 'Last Name'}
+                            </Text>
+                            <TextInput
+                                style={[
+                                    styles.input,
+                                    {
+                                        backgroundColor: colors.card,
+                                        color: colors.text,
+                                        borderColor: colors.border,
+                                    },
+                                ]}
+                                value={lastName}
+                                onChangeText={setLastName}
+                                placeholder={t('editProfile.items.displayName.lastNamePlaceholder') || 'Enter last name (optional)'}
+                                placeholderTextColor={colors.secondaryText}
+                                selectionColor={colors.tint}
+                            />
+                        </View>
+                    </View>
+                </View>
+            </View>
+        </Modal>
+    );
+};
+
+const styles = StyleSheet.create({
+    modalOverlay: {
+        flex: 1,
+        backgroundColor: 'rgba(0, 0, 0, 0.5)',
+        justifyContent: 'flex-end',
+    },
+    modalContent: {
+        borderTopLeftRadius: 20,
+        borderTopRightRadius: 20,
+        paddingTop: Platform.OS === 'ios' ? 20 : 16,
+        maxHeight: '80%',
+    },
+    modalHeader: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        paddingHorizontal: 16,
+        paddingBottom: 16,
+        borderBottomWidth: StyleSheet.hairlineWidth,
+        borderBottomColor: '#E5E5EA',
+    },
+    closeButton: {
+        width: 40,
+        height: 40,
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    modalTitle: {
+        fontSize: 18,
+        fontWeight: '600',
+        fontFamily: fontFamilies.phuduSemiBold,
+        flex: 1,
+        textAlign: 'center',
+    },
+    saveButton: {
+        paddingHorizontal: 16,
+        paddingVertical: 8,
+    },
+    saveButtonText: {
+        fontSize: 16,
+        fontWeight: '600',
+        fontFamily: fontFamilies.phuduSemiBold,
+    },
+    modalBody: {
+        padding: 16,
+        gap: 16,
+    },
+    inputGroup: {
+        gap: 8,
+    },
+    label: {
+        fontSize: 14,
+        fontWeight: '600',
+        fontFamily: fontFamilies.phuduSemiBold,
+    },
+    input: {
+        borderWidth: StyleSheet.hairlineWidth,
+        borderRadius: 12,
+        padding: 16,
+        fontSize: 16,
+        minHeight: 52,
+    },
+});
+

package/src/ui/components/profile/EditEmailModal.tsx

@@ -0,0 +1,188 @@
+import React, { useState, useEffect } from 'react';
+import {
+    View,
+    Text,
+    TextInput,
+    TouchableOpacity,
+    StyleSheet,
+    Modal,
+    Platform,
+} from 'react-native';
+import { Ionicons } from '@expo/vector-icons';
+import { useThemeStyles } from '../../hooks/useThemeStyles';
+import { useColorScheme } from '../../hooks/use-color-scheme';
+import { useI18n } from '../../hooks/useI18n';
+import { fontFamilies } from '../../styles/fonts';
+import { useProfileEditing } from '../../hooks/useProfileEditing';
+
+interface EditEmailModalProps {
+    visible: boolean;
+    onClose: () => void;
+    initialValue?: string;
+    theme?: 'light' | 'dark';
+    onSave?: () => void;
+}
+
+export const EditEmailModal: React.FC<EditEmailModalProps> = ({
+    visible,
+    onClose,
+    initialValue = '',
+    theme = 'light',
+    onSave,
+}) => {
+    const { t } = useI18n();
+    const colorScheme = useColorScheme();
+    const themeStyles = useThemeStyles(theme || 'light', colorScheme);
+    const colors = themeStyles.colors;
+    const { updateField, isSaving } = useProfileEditing();
+
+    const [email, setEmail] = useState(initialValue);
+
+    useEffect(() => {
+        if (visible) {
+            setEmail(initialValue);
+        }
+    }, [visible, initialValue]);
+
+    const handleSave = async () => {
+        const success = await updateField('email', email);
+        if (success) {
+            onSave?.();
+            onClose();
+        }
+    };
+
+    const isValidEmail = (email: string) => {
+        return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
+    };
+
+    return (
+        <Modal
+            visible={visible}
+            animationType="slide"
+            transparent={true}
+            onRequestClose={onClose}
+        >
+            <View style={styles.modalOverlay}>
+                <View style={[styles.modalContent, { backgroundColor: colors.background }]}>
+                    <View style={styles.modalHeader}>
+                        <TouchableOpacity onPress={onClose} style={styles.closeButton}>
+                            <Ionicons name="close" size={24} color={colors.text} />
+                        </TouchableOpacity>
+                        <Text style={[styles.modalTitle, { color: colors.text }]}>
+                            {t('editProfile.items.email.title') || 'Email'}
+                        </Text>
+                        <TouchableOpacity
+                            onPress={handleSave}
+                            disabled={isSaving || !isValidEmail(email)}
+                            style={[styles.saveButton, { opacity: (isSaving || !isValidEmail(email)) ? 0.5 : 1 }]}
+                        >
+                            <Text style={[styles.saveButtonText, { color: colors.tint }]}>
+                                {isSaving ? 'Saving...' : 'Save'}
+                            </Text>
+                        </TouchableOpacity>
+                    </View>
+
+                    <View style={styles.modalBody}>
+                        <View style={styles.inputGroup}>
+                            <Text style={[styles.label, { color: colors.text }]}>
+                                {t('editProfile.items.email.label') || 'Email Address'}
+                            </Text>
+                            <TextInput
+                                style={[
+                                    styles.input,
+                                    {
+                                        backgroundColor: colors.card,
+                                        color: colors.text,
+                                        borderColor: colors.border,
+                                    },
+                                ]}
+                                value={email}
+                                onChangeText={setEmail}
+                                placeholder={t('editProfile.items.email.placeholder') || 'Enter your email address'}
+                                placeholderTextColor={colors.secondaryText}
+                                autoFocus
+                                keyboardType="email-address"
+                                autoCapitalize="none"
+                                autoCorrect={false}
+                                selectionColor={colors.tint}
+                            />
+                        </View>
+                    </View>
+                </View>
+            </View>
+        </Modal>
+    );
+};
+
+const styles = StyleSheet.create({
+    modalOverlay: {
+        flex: 1,
+        backgroundColor: 'rgba(0, 0, 0, 0.5)',
+        justifyContent: 'flex-end',
+    },
+    modalContent: {
+        borderTopLeftRadius: 20,
+        borderTopRightRadius: 20,
+        paddingTop: Platform.OS === 'ios' ? 20 : 16,
+        maxHeight: '80%',
+    },
+    modalHeader: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        paddingHorizontal: 16,
+        paddingBottom: 16,
+        borderBottomWidth: StyleSheet.hairlineWidth,
+        borderBottomColor: '#E5E5EA',
+    },
+    closeButton: {
+        width: 40,
+        height: 40,
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    modalTitle: {
+        fontSize: 18,
+        fontWeight: '600',
+        fontFamily: fontFamilies.phuduSemiBold,
+        flex: 1,
+        textAlign: 'center',
+    },
+    saveButton: {
+        paddingHorizontal: 16,
+        paddingVertical: 8,
+    },
+    saveButtonText: {
+        fontSize: 16,
+        fontWeight: '600',
+        fontFamily: fontFamilies.phuduSemiBold,
+    },
+    modalBody: {
+        padding: 16,
+        gap: 16,
+    },
+    inputGroup: {
+        gap: 8,
+    },
+    label: {
+        fontSize: 14,
+        fontWeight: '600',
+        fontFamily: fontFamilies.phuduSemiBold,
+    },
+    input: {
+        borderWidth: StyleSheet.hairlineWidth,
+        borderRadius: 12,
+        padding: 16,
+        fontSize: 16,
+        minHeight: 52,
+    },
+});
+
+
+
+
+
+
+
+