@oxyhq/services 5.17.18 → 5.18.0

package/src/ui/hooks/useSettingToggle.ts

@@ -0,0 +1,147 @@
+import { useState, useCallback, useEffect } from 'react';
+import { toast } from '../../lib/sonner';
+
+interface UseSettingToggleOptions {
+    /** Initial value of the setting */
+    initialValue: boolean;
+    /** Function to save the setting to the server */
+    onSave: (value: boolean) => Promise<void>;
+    /** Success message when saving */
+    successMessage?: string;
+    /** Error message when save fails */
+    errorMessage?: string;
+    /** Whether to revert on error (default: true) */
+    revertOnError?: boolean;
+    /** Whether to show success toast (default: false) */
+    showSuccessToast?: boolean;
+}
+
+interface UseSettingToggleReturn {
+    /** Current value */
+    value: boolean;
+    /** Whether the setting is being saved */
+    isSaving: boolean;
+    /** Toggle the setting (optimistic update with revert on error) */
+    toggle: () => Promise<void>;
+    /** Set the value directly */
+    setValue: (value: boolean) => void;
+}
+
+/**
+ * Hook for handling boolean toggle settings with optimistic updates.
+ * Automatically reverts to the previous value if the save fails.
+ *
+ * @example
+ * const { value, toggle, isSaving } = useSettingToggle({
+ *   initialValue: user.notificationsEnabled,
+ *   onSave: (value) => api.updateNotifications(value),
+ *   errorMessage: 'Failed to update notifications',
+ * });
+ *
+ * <Switch value={value} onValueChange={toggle} disabled={isSaving} />
+ */
+export function useSettingToggle(options: UseSettingToggleOptions): UseSettingToggleReturn {
+    const {
+        initialValue,
+        onSave,
+        successMessage,
+        errorMessage = 'Failed to save setting',
+        revertOnError = true,
+        showSuccessToast = false,
+    } = options;
+
+    const [value, setValue] = useState(initialValue);
+    const [isSaving, setIsSaving] = useState(false);
+
+    // Update value when initialValue changes (e.g., from server)
+    useEffect(() => {
+        setValue(initialValue);
+    }, [initialValue]);
+
+    const toggle = useCallback(async () => {
+        const previousValue = value;
+        const newValue = !value;
+
+        // Optimistic update
+        setValue(newValue);
+        setIsSaving(true);
+
+        try {
+            await onSave(newValue);
+
+            if (showSuccessToast && successMessage) {
+                toast.success(successMessage);
+            }
+        } catch (err: any) {
+            // Revert on error
+            if (revertOnError) {
+                setValue(previousValue);
+            }
+
+            toast.error(errorMessage || err?.message || 'An error occurred');
+        } finally {
+            setIsSaving(false);
+        }
+    }, [value, onSave, successMessage, errorMessage, revertOnError, showSuccessToast]);
+
+    return { value, isSaving, toggle, setValue };
+}
+
+/**
+ * Hook for managing multiple toggle settings at once.
+ * Useful when you have several related boolean settings.
+ */
+export function useSettingToggles<T extends Record<string, boolean>>(options: {
+    initialValues: T;
+    onSave: (key: keyof T, value: boolean) => Promise<void>;
+    errorMessage?: string | ((key: keyof T) => string);
+    revertOnError?: boolean;
+}): {
+    values: T;
+    savingKeys: Set<keyof T>;
+    toggle: (key: keyof T) => Promise<void>;
+    setValues: (values: T) => void;
+} {
+    const { initialValues, onSave, errorMessage = 'Failed to save setting', revertOnError = true } = options;
+
+    const [values, setValues] = useState<T>(initialValues);
+    const [savingKeys, setSavingKeys] = useState<Set<keyof T>>(new Set());
+
+    // Update values when initialValues change
+    useEffect(() => {
+        setValues(initialValues);
+    }, [initialValues]);
+
+    const toggle = useCallback(async (key: keyof T) => {
+        const previousValue = values[key];
+        const newValue = !previousValue;
+
+        // Optimistic update
+        setValues(prev => ({ ...prev, [key]: newValue }));
+        setSavingKeys(prev => new Set(prev).add(key));
+
+        try {
+            await onSave(key, newValue);
+        } catch (err: any) {
+            // Revert on error
+            if (revertOnError) {
+                setValues(prev => ({ ...prev, [key]: previousValue }));
+            }
+
+            const message = typeof errorMessage === 'function'
+                ? errorMessage(key)
+                : errorMessage;
+            toast.error(message || err?.message || 'An error occurred');
+        } finally {
+            setSavingKeys(prev => {
+                const next = new Set(prev);
+                next.delete(key);
+                return next;
+            });
+        }
+    }, [values, onSave, errorMessage, revertOnError]);
+
+    return { values, savingKeys, toggle, setValues };
+}
+
+export default useSettingToggle;

package/src/ui/navigation/routes.ts

@@ -22,6 +22,7 @@ export type RouteName =
     | 'SearchSettings'
     | 'FileManagement'
     | 'HelpSupport'
+    | 'FAQ'
     | 'Feedback'
     | 'LegalDocuments'
     | 'AppInfo'
@@ -59,6 +60,7 @@ const screenLoaders: Record<RouteName, () => ComponentType<BaseScreenProps>> = {
     SearchSettings: () => require('../screens/SearchSettingsScreen').default,
     FileManagement: () => require('../screens/FileManagementScreen').default,
     HelpSupport: () => require('../screens/HelpSupportScreen').default,
+    FAQ: () => require('../screens/FAQScreen').default,
     Feedback: () => require('../screens/FeedbackScreen').default,
     LegalDocuments: () => require('../screens/LegalDocumentsScreen').default,
     AppInfo: () => require('../screens/AppInfoScreen').default,

package/src/ui/screens/AccountCenterScreen.tsx

@@ -226,7 +226,7 @@ const AccountCenterScreen: React.FC<BaseScreenProps> = ({
                                 iconColor: colors.iconStorage,
                                 title: t('accountCenter.items.notifications.title') || 'Notifications',
                                 subtitle: t('accountCenter.items.notifications.subtitle') || 'Manage notification settings',
-                                onPress: () => toast.info(t('accountCenter.items.notifications.coming') || 'Notifications feature coming soon!'),
+                                onPress: () => navigate?.('EditProfile', { activeTab: 'notifications' }),
                             }] : []),
                             {
                                 id: 'language',
@@ -242,7 +242,7 @@ const AccountCenterScreen: React.FC<BaseScreenProps> = ({
                                 iconColor: colors.iconSecurity,
                                 title: t('accountOverview.items.help.title') || 'Help & Support',
                                 subtitle: t('accountOverview.items.help.subtitle') || 'Get help and contact support',
-                                onPress: () => toast.info(t('accountOverview.items.help.coming') || 'Help & Support feature coming soon!'),
+                                onPress: () => navigate?.('HelpSupport'),
                             },
                             {
                                 id: 'appinfo',

package/src/ui/screens/AccountOverviewScreen.tsx

@@ -34,6 +34,7 @@ import {
     HEADER_PADDING_TOP_OVERVIEW,
     createScreenContentStyle,
 } from '../constants/spacing';
+import { DeleteAccountModal } from '../components/modals';
 
 // Optional Lottie import - gracefully handle if not available
 let LottieView: any = null;
@@ -83,6 +84,7 @@ const AccountOverviewScreen: React.FC<BaseScreenProps> = ({
     const [showMoreAccounts, setShowMoreAccounts] = useState(false);
     const [additionalAccountsData, setAdditionalAccountsData] = useState<any[]>([]);
     const [loadingAdditionalAccounts, setLoadingAdditionalAccounts] = useState(false);
+    const [showDeleteModal, setShowDeleteModal] = useState(false);
     const lottieRef = useRef<any>(null);
     const hasPlayedRef = useRef(false);
     const insets = useSafeAreaInsets();
@@ -289,45 +291,22 @@ const AccountOverviewScreen: React.FC<BaseScreenProps> = ({
             toast.error(t('accountOverview.items.deleteAccount.error') || 'User not available');
             return;
         }
+        setShowDeleteModal(true);
+    }, [user, t]);
 
-        confirmAction(
-            t('accountOverview.items.deleteAccount.confirmMessage') || `This action cannot be undone. This will permanently delete your account and all associated data.\n\nAre you sure you want to delete your account?`,
-            async () => {
-                // For React Native, we'd need a separate modal for password/confirmation input
-                // For now, we'll use a simplified confirmation
-                // In production, you'd want to create a modal with password and username confirmation fields
-                if (!oxyServices) {
-                    toast.error(t('accountOverview.items.deleteAccount.error') || 'Service not available');
-                    return;
-                }
+    const handleConfirmDelete = useCallback(async (password: string) => {
+        if (!oxyServices || !user) {
+            throw new Error(t('accountOverview.items.deleteAccount.error') || 'Service not available');
+        }
 
-                Alert.alert(
-                    t('accountOverview.items.deleteAccount.confirmTitle') || 'Delete Account',
-                    t('accountOverview.items.deleteAccount.finalConfirm') || `This is your final warning. Your account will be permanently deleted and cannot be recovered. Type "${user.username}" to confirm.`,
-                    [
-                        {
-                            text: t('common.cancel') || 'Cancel',
-                            style: 'cancel',
-                        },
-                        {
-                            text: t('accountOverview.items.deleteAccount.confirm') || 'Delete Forever',
-                            style: 'destructive',
-                            onPress: async () => {
-                                try {
-                                    // Note: In a production app, you'd want to show a modal with password and username confirmation fields
-                                    // For now, we'll require the user to enter these via a custom modal or prompt
-                                    toast.error(t('accountOverview.items.deleteAccount.passwordRequired') || 'Password confirmation required. This feature needs a modal with password input.');
-                                } catch (error: any) {
-                                    console.error('Failed to delete account:', error);
-                                    toast.error(error?.message || t('accountOverview.items.deleteAccount.error') || 'Failed to delete account');
-                                }
-                            },
-                        },
-                    ]
-                );
-            }
-        );
-    }, [user, oxyServices, logout, onClose, t]);
+        await oxyServices.deleteAccount(password);
+        toast.success(t('accountOverview.items.deleteAccount.success') || 'Account deleted successfully');
+        setShowDeleteModal(false);
+        await logout();
+        if (onClose) {
+            onClose();
+        }
+    }, [oxyServices, user, logout, onClose, t]);
 
     if (!isAuthenticated) {
         return (
@@ -703,6 +682,25 @@ const AccountOverviewScreen: React.FC<BaseScreenProps> = ({
                     />
                 </Section>
             </ScrollView>
+
+            {/* Delete Account Modal */}
+            {user && (
+                <DeleteAccountModal
+                    visible={showDeleteModal}
+                    username={user.username || ''}
+                    onClose={() => setShowDeleteModal(false)}
+                    onDelete={handleConfirmDelete}
+                    colors={{
+                        background: themeStyles.backgroundColor,
+                        text: themeStyles.textColor,
+                        secondaryText: themeStyles.isDarkTheme ? '#888888' : '#666666',
+                        border: themeStyles.borderColor,
+                        danger: '#FF3B30',
+                        inputBackground: themeStyles.isDarkTheme ? '#333333' : '#F5F5F5',
+                    }}
+                    t={t}
+                />
+            )}
         </View>
     );
 };

package/src/ui/screens/FAQScreen.tsx

@@ -0,0 +1,332 @@
+import React, { useState, useEffect, useCallback, useMemo } from 'react';
+import {
+    View,
+    Text,
+    TouchableOpacity,
+    StyleSheet,
+    ScrollView,
+    TextInput,
+    Platform,
+} from 'react-native';
+import { Ionicons } from '@expo/vector-icons';
+import type { BaseScreenProps } from '../types/navigation';
+import { toast } from '../../lib/sonner';
+import { Header, LoadingState, EmptyState } from '../components';
+import { useI18n } from '../hooks/useI18n';
+import { useThemeStyles } from '../hooks/useThemeStyles';
+import { useOxy } from '../context/OxyContext';
+
+interface FAQ {
+    id: string;
+    question: string;
+    answer: string;
+    category: string;
+}
+
+const FAQScreen: React.FC<BaseScreenProps> = ({
+    onClose,
+    theme,
+    goBack,
+}) => {
+    const { oxyServices } = useOxy();
+    const { t } = useI18n();
+    const themeStyles = useThemeStyles(theme || 'light');
+
+    const [faqs, setFaqs] = useState<FAQ[]>([]);
+    const [isLoading, setIsLoading] = useState(true);
+    const [searchQuery, setSearchQuery] = useState('');
+    const [expandedIds, setExpandedIds] = useState<Set<string>>(new Set());
+    const [selectedCategory, setSelectedCategory] = useState<string | null>(null);
+
+    // Load FAQs from API
+    useEffect(() => {
+        const loadFAQs = async () => {
+            try {
+                setIsLoading(true);
+                const data = await oxyServices.getFAQs();
+                setFaqs(data);
+            } catch (error) {
+                toast.error(t('faq.loadError') || 'Failed to load FAQs');
+            } finally {
+                setIsLoading(false);
+            }
+        };
+
+        loadFAQs();
+    }, [oxyServices, t]);
+
+    // Get unique categories
+    const categories = useMemo(() => {
+        const cats = [...new Set(faqs.map(f => f.category))];
+        return cats.sort();
+    }, [faqs]);
+
+    // Filter FAQs based on search and category
+    const filteredFaqs = useMemo(() => {
+        let result = faqs;
+
+        if (selectedCategory) {
+            result = result.filter(f => f.category === selectedCategory);
+        }
+
+        if (searchQuery.trim()) {
+            const query = searchQuery.toLowerCase();
+            result = result.filter(f =>
+                f.question.toLowerCase().includes(query) ||
+                f.answer.toLowerCase().includes(query)
+            );
+        }
+
+        return result;
+    }, [faqs, searchQuery, selectedCategory]);
+
+    const toggleExpanded = useCallback((id: string) => {
+        setExpandedIds(prev => {
+            const next = new Set(prev);
+            if (next.has(id)) {
+                next.delete(id);
+            } else {
+                next.add(id);
+            }
+            return next;
+        });
+    }, []);
+
+    const styles = useMemo(() => createStyles(themeStyles), [themeStyles]);
+
+    return (
+        <View style={[styles.container, { backgroundColor: themeStyles.backgroundColor }]}>
+            <Header
+                title={t('faq.title') || 'FAQ'}
+                onBack={goBack || onClose}
+                variant="minimal"
+                elevation="subtle"
+            />
+
+            {/* Search bar */}
+            <View style={styles.searchContainer}>
+                <View style={[styles.searchInputWrapper, { backgroundColor: themeStyles.secondaryBackgroundColor, borderColor: themeStyles.borderColor }]}>
+                    <Ionicons name="search" size={20} color={themeStyles.mutedTextColor} style={styles.searchIcon} />
+                    <TextInput
+                        style={[styles.searchInput, { color: themeStyles.textColor }]}
+                        placeholder={t('faq.searchPlaceholder') || 'Search FAQs...'}
+                        placeholderTextColor={themeStyles.mutedTextColor}
+                        value={searchQuery}
+                        onChangeText={setSearchQuery}
+                        accessibilityLabel="Search FAQs"
+                    />
+                    {searchQuery.length > 0 && (
+                        <TouchableOpacity
+                            onPress={() => setSearchQuery('')}
+                            accessibilityRole="button"
+                            accessibilityLabel="Clear search"
+                        >
+                            <Ionicons name="close-circle" size={20} color={themeStyles.mutedTextColor} />
+                        </TouchableOpacity>
+                    )}
+                </View>
+            </View>
+
+            {/* Category filters */}
+            {categories.length > 0 && (
+                <ScrollView
+                    horizontal
+                    showsHorizontalScrollIndicator={false}
+                    style={styles.categoriesContainer}
+                    contentContainerStyle={styles.categoriesContent}
+                >
+                    <TouchableOpacity
+                        style={[
+                            styles.categoryChip,
+                            !selectedCategory && styles.categoryChipActive,
+                            { backgroundColor: !selectedCategory ? themeStyles.primaryColor : themeStyles.secondaryBackgroundColor }
+                        ]}
+                        onPress={() => setSelectedCategory(null)}
+                        accessibilityRole="button"
+                        accessibilityLabel="Show all categories"
+                        accessibilityState={{ selected: !selectedCategory }}
+                    >
+                        <Text style={[
+                            styles.categoryChipText,
+                            { color: !selectedCategory ? '#FFFFFF' : themeStyles.textColor }
+                        ]}>
+                            {t('faq.allCategories') || 'All'}
+                        </Text>
+                    </TouchableOpacity>
+                    {categories.map(cat => (
+                        <TouchableOpacity
+                            key={cat}
+                            style={[
+                                styles.categoryChip,
+                                selectedCategory === cat && styles.categoryChipActive,
+                                { backgroundColor: selectedCategory === cat ? themeStyles.primaryColor : themeStyles.secondaryBackgroundColor }
+                            ]}
+                            onPress={() => setSelectedCategory(cat)}
+                            accessibilityRole="button"
+                            accessibilityLabel={`Filter by ${cat}`}
+                            accessibilityState={{ selected: selectedCategory === cat }}
+                        >
+                            <Text style={[
+                                styles.categoryChipText,
+                                { color: selectedCategory === cat ? '#FFFFFF' : themeStyles.textColor }
+                            ]}>
+                                {cat}
+                            </Text>
+                        </TouchableOpacity>
+                    ))}
+                </ScrollView>
+            )}
+
+            <ScrollView style={styles.content} showsVerticalScrollIndicator={false}>
+                {isLoading ? (
+                    <LoadingState
+                        message={t('faq.loading') || 'Loading FAQs...'}
+                        color={themeStyles.textColor}
+                    />
+                ) : filteredFaqs.length === 0 ? (
+                    <EmptyState
+                        message={searchQuery ? (t('faq.noResults') || 'No FAQs match your search') : (t('faq.empty') || 'No FAQs available')}
+                        textColor={themeStyles.textColor}
+                    />
+                ) : (
+                    filteredFaqs.map((faq, index) => {
+                        const isExpanded = expandedIds.has(faq.id);
+                        return (
+                            <View
+                                key={faq.id}
+                                style={[
+                                    styles.faqItem,
+                                    { backgroundColor: themeStyles.secondaryBackgroundColor, borderColor: themeStyles.borderColor },
+                                    index === 0 && styles.faqItemFirst,
+                                ]}
+                            >
+                                <TouchableOpacity
+                                    style={styles.faqQuestion}
+                                    onPress={() => toggleExpanded(faq.id)}
+                                    accessibilityRole="button"
+                                    accessibilityLabel={faq.question}
+                                    accessibilityHint={isExpanded ? 'Collapse answer' : 'Expand answer'}
+                                    accessibilityState={{ expanded: isExpanded }}
+                                >
+                                    <Text style={[styles.faqQuestionText, { color: themeStyles.textColor }]}>
+                                        {faq.question}
+                                    </Text>
+                                    <Ionicons
+                                        name={isExpanded ? 'chevron-up' : 'chevron-down'}
+                                        size={20}
+                                        color={themeStyles.mutedTextColor}
+                                    />
+                                </TouchableOpacity>
+                                {isExpanded && (
+                                    <View style={[styles.faqAnswer, { borderTopColor: themeStyles.borderColor }]}>
+                                        <Text style={[styles.faqAnswerText, { color: themeStyles.mutedTextColor }]}>
+                                            {faq.answer}
+                                        </Text>
+                                        <View style={styles.faqCategory}>
+                                            <Ionicons name="pricetag-outline" size={14} color={themeStyles.primaryColor} />
+                                            <Text style={[styles.faqCategoryText, { color: themeStyles.primaryColor }]}>
+                                                {faq.category}
+                                            </Text>
+                                        </View>
+                                    </View>
+                                )}
+                            </View>
+                        );
+                    })
+                )}
+            </ScrollView>
+        </View>
+    );
+};
+
+const createStyles = (themeStyles: any) => StyleSheet.create({
+    container: {
+        flex: 1,
+    },
+    searchContainer: {
+        paddingHorizontal: 16,
+        paddingVertical: 12,
+    },
+    searchInputWrapper: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        borderRadius: 12,
+        borderWidth: 1,
+        paddingHorizontal: 12,
+        height: 44,
+    },
+    searchIcon: {
+        marginRight: 8,
+    },
+    searchInput: {
+        flex: 1,
+        fontSize: 16,
+        ...Platform.select({
+            web: { outlineStyle: 'none' as any },
+        }),
+    },
+    categoriesContainer: {
+        maxHeight: 50,
+    },
+    categoriesContent: {
+        paddingHorizontal: 16,
+        gap: 8,
+    },
+    categoryChip: {
+        paddingHorizontal: 16,
+        paddingVertical: 8,
+        borderRadius: 20,
+        marginRight: 8,
+    },
+    categoryChipActive: {},
+    categoryChipText: {
+        fontSize: 14,
+        fontWeight: '500',
+    },
+    content: {
+        flex: 1,
+        padding: 16,
+    },
+    faqItem: {
+        borderRadius: 12,
+        borderWidth: 1,
+        marginBottom: 12,
+        overflow: 'hidden',
+    },
+    faqItemFirst: {
+        marginTop: 0,
+    },
+    faqQuestion: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        padding: 16,
+    },
+    faqQuestionText: {
+        flex: 1,
+        fontSize: 16,
+        fontWeight: '600',
+        marginRight: 12,
+    },
+    faqAnswer: {
+        padding: 16,
+        paddingTop: 12,
+        borderTopWidth: 1,
+    },
+    faqAnswerText: {
+        fontSize: 14,
+        lineHeight: 22,
+    },
+    faqCategory: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        marginTop: 12,
+    },
+    faqCategoryText: {
+        fontSize: 12,
+        marginLeft: 6,
+        fontWeight: '500',
+    },
+});
+
+export default FAQScreen;