@oxyhq/services 6.9.44 → 6.9.46

package/src/ui/screens/HistoryViewScreen.tsx

@@ -1,33 +1,22 @@
 import React, { useState, useCallback } from 'react';
-import {
-    View,
-    StyleSheet,
-    ScrollView,
-} from 'react-native';
+import { View, StyleSheet, ScrollView } from 'react-native';
 import type { BaseScreenProps } from '../types/navigation';
 import { toast } from '../../lib/sonner';
-import { confirmAction } from '../utils/confirmAction';
-import { Header, Section, GroupedSection, LoadingState, EmptyState } from '../components';
+import { Header, LoadingState, EmptyState } from '../components';
+import { SettingsListGroup, SettingsListItem } from '@oxyhq/bloom/settings-list';
+import { SettingsIcon } from '../components/SettingsIcon';
 import { useI18n } from '../hooks/useI18n';
 import { useTheme } from '@oxyhq/bloom/theme';
 import { useColorScheme } from '../hooks/useColorScheme';
 import { Colors } from '../constants/theme';
 import { normalizeColorScheme } from '../utils/themeUtils';
 import { useOxy } from '../context/OxyContext';
+import * as Prompt from '@oxyhq/bloom/prompt';
+import { usePromptControl } from '@oxyhq/bloom/prompt';
 
-interface HistoryItem {
-    id: string;
-    query: string;
-    type: 'search' | 'browse';
-    timestamp: Date;
-}
+interface HistoryItem { id: string; query: string; type: 'search' | 'browse'; timestamp: Date; }
 
-const HistoryViewScreen: React.FC<BaseScreenProps> = ({
-    onClose,
-    theme,
-    goBack,
-}) => {
-    // Use useOxy() hook for OxyContext values
+const HistoryViewScreen: React.FC<BaseScreenProps> = ({ onClose, theme, goBack }) => {
     const { user } = useOxy();
     const { t } = useI18n();
     const bloomTheme = useTheme();
@@ -37,227 +26,110 @@ const HistoryViewScreen: React.FC<BaseScreenProps> = ({
     const [history, setHistory] = useState<HistoryItem[]>([]);
     const [isLoading, setIsLoading] = useState(true);
     const [isDeleting, setIsDeleting] = useState(false);
+    const deleteLast15Prompt = usePromptControl();
+    const clearAllPrompt = usePromptControl();
 
-    // Helper to get storage
     const getStorage = async () => {
-        const isReactNative = typeof navigator !== 'undefined' && navigator.product === 'ReactNative';
-
-        if (isReactNative) {
+        const isRN = typeof navigator !== 'undefined' && navigator.product === 'ReactNative';
+        if (isRN) {
             try {
-                const asyncStorageModule = await import('@react-native-async-storage/async-storage');
-                const storage = asyncStorageModule.default as unknown as {
-                    getItem: (key: string) => Promise<string | null>;
-                    setItem: (key: string, value: string) => Promise<void>;
-                    removeItem: (key: string) => Promise<void>;
-                };
-                return {
-                    getItem: storage.getItem.bind(storage),
-                    setItem: storage.setItem.bind(storage),
-                    removeItem: storage.removeItem.bind(storage),
-                };
-            } catch (error) {
-                if (__DEV__) {
-                    console.error('AsyncStorage not available:', error);
-                }
-                throw new Error('AsyncStorage is required in React Native environment');
-            }
-        } else {
-            // Use localStorage for web
-            return {
-                getItem: async (key: string) => {
-                    if (typeof window !== 'undefined' && window.localStorage) {
-                        return window.localStorage.getItem(key);
-                    }
-                    return null;
-                },
-                setItem: async (key: string, value: string) => {
-                    if (typeof window !== 'undefined' && window.localStorage) {
-                        window.localStorage.setItem(key, value);
-                    }
-                },
-                removeItem: async (key: string) => {
-                    if (typeof window !== 'undefined' && window.localStorage) {
-                        window.localStorage.removeItem(key);
-                    }
-                }
-            };
+                const mod = await import('@react-native-async-storage/async-storage');
+                const s = mod.default as unknown as { getItem: (k: string) => Promise<string | null>; setItem: (k: string, v: string) => Promise<void>; removeItem: (k: string) => Promise<void> };
+                return { getItem: s.getItem.bind(s), setItem: s.setItem.bind(s), removeItem: s.removeItem.bind(s) };
+            } catch (e) { if (__DEV__) console.error('AsyncStorage not available:', e); throw new Error('AsyncStorage required'); }
         }
+        return {
+            getItem: async (k: string) => typeof window !== 'undefined' && window.localStorage ? window.localStorage.getItem(k) : null,
+            setItem: async (k: string, v: string) => { if (typeof window !== 'undefined' && window.localStorage) window.localStorage.setItem(k, v); },
+            removeItem: async (k: string) => { if (typeof window !== 'undefined' && window.localStorage) window.localStorage.removeItem(k); },
+        };
     };
 
-    // TODO: Integrate with backend API for history storage
-    // Currently uses local storage only. Should fetch from backend API and sync across devices.
-    // Load history from storage
     React.useEffect(() => {
-        const loadHistory = async () => {
+        const load = async () => {
             try {
                 setIsLoading(true);
                 const storage = await getStorage();
-                const historyKey = `history_${user?.id || 'guest'}`;
-                const stored = await storage.getItem(historyKey);
-
-                if (stored) {
-                    const parsed = JSON.parse(stored);
-                    setHistory(parsed.map((item: any) => ({
-                        ...item,
-                        timestamp: new Date(item.timestamp),
-                    })));
-                } else {
-                    setHistory([]);
-                }
-            } catch (error) {
-                setHistory([]);
-            } finally {
-                setIsLoading(false);
-            }
+                const stored = await storage.getItem(`history_${user?.id || 'guest'}`);
+                if (stored) { const parsed = JSON.parse(stored); setHistory(parsed.map((i: HistoryItem) => ({ ...i, timestamp: new Date(i.timestamp) }))); }
+                else setHistory([]);
+            } catch { setHistory([]); } finally { setIsLoading(false); }
         };
-
-        loadHistory();
+        load();
     }, [user?.id]);
 
     const handleDeleteLast15Minutes = useCallback(async () => {
-        confirmAction(
-            t('history.deleteLast15Minutes.confirm') || 'Delete last 15 minutes of history?',
-            async () => {
-                try {
-                    setIsDeleting(true);
-                    const fifteenMinutesAgo = new Date(Date.now() - 15 * 60 * 1000);
-
-                    const filtered = history.filter(item => item.timestamp < fifteenMinutesAgo);
-                    setHistory(filtered);
-
-                    // Save to storage
-                    const storage = await getStorage();
-                    const historyKey = `history_${user?.id || 'guest'}`;
-                    await storage.setItem(historyKey, JSON.stringify(filtered));
-
-                    toast.success(t('history.deleteLast15Minutes.success') || 'Last 15 minutes deleted');
-                } catch (error) {
-                    if (__DEV__) {
-                        console.error('Failed to delete history:', error);
-                    }
-                    toast.error(t('history.deleteLast15Minutes.error') || 'Failed to delete history');
-                } finally {
-                    setIsDeleting(false);
-                }
-            }
-        );
+        try {
+            setIsDeleting(true);
+            const cutoff = new Date(Date.now() - 15 * 60 * 1000);
+            const filtered = history.filter(item => item.timestamp < cutoff);
+            setHistory(filtered);
+            const storage = await getStorage();
+            await storage.setItem(`history_${user?.id || 'guest'}`, JSON.stringify(filtered));
+            toast.success(t('history.deleteLast15Minutes.success') || 'Last 15 minutes deleted');
+        } catch (e) { if (__DEV__) console.error('Failed to delete history:', e); toast.error(t('history.deleteLast15Minutes.error') || 'Failed to delete history'); }
+        finally { setIsDeleting(false); }
     }, [history, user?.id, t]);
 
     const handleClearAll = useCallback(async () => {
-        confirmAction(
-            t('history.clearAll.confirm') || 'Clear all history? This cannot be undone.',
-            async () => {
-                try {
-                    setIsDeleting(true);
-                    setHistory([]);
-
-                    // Clear from storage
-                    const storage = await getStorage();
-                    const historyKey = `history_${user?.id || 'guest'}`;
-                    await storage.removeItem(historyKey);
-
-                    toast.success(t('history.clearAll.success') || 'History cleared');
-                } catch (error) {
-                    if (__DEV__) {
-                        console.error('Failed to clear history:', error);
-                    }
-                    toast.error(t('history.clearAll.error') || 'Failed to clear history');
-                } finally {
-                    setIsDeleting(false);
-                }
-            }
-        );
+        try {
+            setIsDeleting(true); setHistory([]);
+            const storage = await getStorage();
+            await storage.removeItem(`history_${user?.id || 'guest'}`);
+            toast.success(t('history.clearAll.success') || 'History cleared');
+        } catch (e) { if (__DEV__) console.error('Failed to clear history:', e); toast.error(t('history.clearAll.error') || 'Failed to clear history'); }
+        finally { setIsDeleting(false); }
     }, [user?.id, t]);
 
     const formatTime = (date: Date) => {
-        const now = new Date();
-        const diff = now.getTime() - date.getTime();
-        const minutes = Math.floor(diff / 60000);
-        const hours = Math.floor(minutes / 60);
-        const days = Math.floor(hours / 24);
-
-        if (minutes < 1) return t('history.justNow') || 'Just now';
-        if (minutes < 60) return `${minutes} ${t('history.minutesAgo') || 'minutes ago'}`;
-        if (hours < 24) return `${hours} ${t('history.hoursAgo') || 'hours ago'}`;
+        const diff = new Date().getTime() - date.getTime();
+        const min = Math.floor(diff / 60000); const hrs = Math.floor(min / 60); const days = Math.floor(hrs / 24);
+        if (min < 1) return t('history.justNow') || 'Just now';
+        if (min < 60) return `${min} ${t('history.minutesAgo') || 'minutes ago'}`;
+        if (hrs < 24) return `${hrs} ${t('history.hoursAgo') || 'hours ago'}`;
         if (days < 7) return `${days} ${t('history.daysAgo') || 'days ago'}`;
         return date.toLocaleDateString();
     };
 
     return (
         <View style={[styles.container, { backgroundColor: bloomTheme.colors.background }]}>
-            <Header
-                title={t('history.title') || 'History'}
-                onBack={goBack || onClose}
-                variant="minimal"
-                elevation="subtle"
-            />
-
+            <Header title={t('history.title') || 'History'} onBack={goBack || onClose} variant="minimal" elevation="subtle" />
             <ScrollView style={styles.content}>
-                {/* Actions */}
-                <Section title={t('history.actions') || 'Actions'} isFirst={true}>
-                    <GroupedSection
-                        items={[
-                            {
-                                id: 'delete-last-15',
-                                icon: 'clock-outline',
-                                iconColor: themeColors.iconStorage,
-                                title: t('history.deleteLast15Minutes.title') || 'Delete Last 15 Minutes',
-                                subtitle: t('history.deleteLast15Minutes.subtitle') || 'Remove recent history entries',
-                                onPress: handleDeleteLast15Minutes,
-                                disabled: isDeleting || history.length === 0,
-                            },
-                            {
-                                id: 'clear-all',
-                                icon: 'delete-outline',
-                                iconColor: themeColors.iconSharing,
-                                title: t('history.clearAll.title') || 'Clear All History',
-                                subtitle: t('history.clearAll.subtitle') || 'Remove all history entries',
-                                onPress: handleClearAll,
-                                disabled: isDeleting || history.length === 0,
-                            },
-                        ]}
-
+                <SettingsListGroup title={t('history.actions') || 'Actions'}>
+                    <SettingsListItem
+                        icon={<SettingsIcon name="clock-outline" color={themeColors.iconStorage} />}
+                        title={t('history.deleteLast15Minutes.title') || 'Delete Last 15 Minutes'}
+                        description={t('history.deleteLast15Minutes.subtitle') || 'Remove recent history entries'}
+                        onPress={() => deleteLast15Prompt.open()}
+                        disabled={isDeleting || history.length === 0}
                     />
-                </Section>
-
-                {/* History List */}
-                <Section title={t('history.recent') || 'Recent History'}>
-                    {isLoading ? (
-                        <LoadingState
-                            message={t('history.loading') || 'Loading history...'}
-                            color={bloomTheme.colors.text}
-                        />
-                    ) : history.length === 0 ? (
-                        <EmptyState
-                            message={t('history.empty') || 'No history yet'}
-                            textColor={bloomTheme.colors.text}
-                        />
-                    ) : (
-                        <GroupedSection
-                            items={history.map((item) => ({
-                                id: item.id,
-                                icon: item.type === 'search' ? 'search' : 'globe',
-                                iconColor: item.type === 'search' ? themeColors.iconSecurity : themeColors.iconPersonalInfo,
-                                title: item.query,
-                                subtitle: formatTime(item.timestamp),
-                            }))}
+                    <SettingsListItem
+                        icon={<SettingsIcon name="delete-outline" color={themeColors.iconSharing} />}
+                        title={t('history.clearAll.title') || 'Clear All History'}
+                        description={t('history.clearAll.subtitle') || 'Remove all history entries'}
+                        onPress={() => clearAllPrompt.open()}
+                        disabled={isDeleting || history.length === 0}
+                    />
+                </SettingsListGroup>
+                <SettingsListGroup title={t('history.recent') || 'Recent History'}>
+                    {isLoading ? <LoadingState message={t('history.loading') || 'Loading history...'} color={bloomTheme.colors.text} />
+                     : history.length === 0 ? <EmptyState message={t('history.empty') || 'No history yet'} textColor={bloomTheme.colors.text} />
+                     : history.map(item => (
+                        <SettingsListItem
+                            key={item.id}
+                            icon={<SettingsIcon name={item.type === 'search' ? 'magnify' : 'earth'} color={item.type === 'search' ? themeColors.iconSecurity : themeColors.iconPersonalInfo} />}
+                            title={item.query}
+                            description={formatTime(item.timestamp)}
                         />
-                    )}
-                </Section>
+                    ))}
+                </SettingsListGroup>
             </ScrollView>
+            <Prompt.Basic control={deleteLast15Prompt} title={t('history.deleteLast15Minutes.title') || 'Delete Last 15 Minutes'} description={t('history.deleteLast15Minutes.confirm') || 'Delete last 15 minutes of history?'} onConfirm={handleDeleteLast15Minutes} confirmButtonCta={t('common.actions.delete') || 'Delete'} confirmButtonColor="negative" />
+            <Prompt.Basic control={clearAllPrompt} title={t('history.clearAll.title') || 'Clear All History'} description={t('history.clearAll.confirm') || 'Clear all history? This cannot be undone.'} onConfirm={handleClearAll} confirmButtonCta={t('history.clearAll.title') || 'Clear All'} confirmButtonColor="negative" />
         </View>
     );
 };
 
-const styles = StyleSheet.create({
-    container: {
-        flex: 1,
-    },
-    content: {
-        flex: 1,
-        padding: 16,
-    },
-});
+const styles = StyleSheet.create({ container: { flex: 1 }, content: { flex: 1, padding: 16 } });
 
 export default React.memo(HistoryViewScreen);
-

package/src/ui/screens/LanguageSelectorScreen.tsx

@@ -12,7 +12,8 @@ import { useTheme } from '@oxyhq/bloom/theme';
 import { normalizeTheme } from '../utils/themeUtils';
 import { Ionicons } from '@expo/vector-icons';
 import { toast } from '../../lib/sonner';
-import { Header, GroupedSection } from '../components';
+import { Header } from '../components';
+import { SettingsListGroup, SettingsListItem } from '@oxyhq/bloom/settings-list';
 import { useI18n } from '../hooks/useI18n';
 import { SUPPORTED_LANGUAGES } from '@oxyhq/core';
 import { useOxy } from '../context/OxyContext';
@@ -98,18 +99,17 @@ const LanguageSelectorScreen: React.FC<LanguageSelectorScreenProps> = ({
             return {
                 id: language.id,
                 title: language.name,
-                subtitle: language.nativeName,
-                customIcon: (
+                description: language.nativeName,
+                icon: (
                     <View style={[styles.languageFlag, { backgroundColor: `${language.color}15` }]}>
                         <Text style={styles.flagEmoji}>{language.flag}</Text>
                     </View>
                 ),
-                iconColor: language.color,
-                selected: isSelected,
                 onPress: () => handleLanguageSelect(language.id),
-                customContent: isSelected ? (
+                rightElement: isSelected ? (
                     <Ionicons name="checkmark-circle" size={24} color={bloomTheme.colors.primary} />
                 ) : undefined,
+                showChevron: false,
             };
         }),
         [currentLanguage, handleLanguageSelect, bloomTheme]
@@ -150,7 +150,19 @@ const LanguageSelectorScreen: React.FC<LanguageSelectorScreenProps> = ({
                     <View style={[styles.materialCard, {
                         backgroundColor: bloomTheme.colors.card,
                     }]}>
-                        <GroupedSection items={languageItems} />
+                        <SettingsListGroup>
+                            {languageItems.map(item => (
+                                <SettingsListItem
+                                    key={item.id}
+                                    icon={item.icon}
+                                    title={item.title}
+                                    description={item.description}
+                                    onPress={item.onPress}
+                                    rightElement={item.rightElement}
+                                    showChevron={false}
+                                />
+                            ))}
+                        </SettingsListGroup>
                     </View>
                 </View>
             </ScrollView>

package/src/ui/screens/LegalDocumentsScreen.tsx

@@ -7,7 +7,9 @@ import {
 } from 'react-native';
 import type { BaseScreenProps } from '../types/navigation';
 import { toast } from '../../lib/sonner';
-import { Header, Section, GroupedSection, LoadingState } from '../components';
+import { Header, LoadingState } from '../components';
+import { SettingsListGroup, SettingsListItem } from '@oxyhq/bloom/settings-list';
+import { SettingsIcon } from '../components/SettingsIcon';
 import { useI18n } from '../hooks/useI18n';
 import { useTheme } from '@oxyhq/bloom/theme';
 import { useColorScheme } from '../hooks/useColorScheme';
@@ -121,69 +123,50 @@ const LegalDocumentsScreen: React.FC<BaseScreenProps> = ({
             />
 
             <ScrollView style={styles.content}>
-                <Section title={t('legal.policies') || 'Policies & Guidelines'}  isFirst={true}>
-                    <GroupedSection
-                        items={[
-                            {
-                                id: 'privacy-policy',
-                                icon: 'shield-check',
-                                iconColor: themeColors.iconPersonalInfo,
-                                title: t('legal.privacyPolicy.title') || 'Privacy Policy',
-                                subtitle: t('legal.privacyPolicy.subtitle') || 'How we handle your data',
-                                onPress: handleOpenPolicy('privacy'),
-                            },
-                            {
-                                id: 'terms-of-service',
-                                icon: 'file-document',
-                                iconColor: themeColors.iconSecurity,
-                                title: t('legal.termsOfService.title') || 'Terms of Service',
-                                subtitle: t('legal.termsOfService.subtitle') || 'Terms and conditions of use',
-                                onPress: handleOpenPolicy('terms'),
-                            },
-                            {
-                                id: 'community-guidelines',
-                                icon: 'account-group',
-                                iconColor: themeColors.iconData,
-                                title: t('legal.communityGuidelines.title') || 'Community Guidelines',
-                                subtitle: t('legal.communityGuidelines.subtitle') || 'Rules and expectations for our community',
-                                onPress: handleOpenPolicy('community'),
-                            },
-                            {
-                                id: 'data-retention',
-                                icon: 'clock',
-                                iconColor: themeColors.iconStorage,
-                                title: t('legal.dataRetention.title') || 'Data Retention Policy',
-                                subtitle: t('legal.dataRetention.subtitle') || 'How long we keep your data',
-                                onPress: handleOpenPolicy('dataRetention'),
-                            },
-                            {
-                                id: 'content-moderation',
-                                icon: 'eye',
-                                iconColor: themeColors.iconSharing,
-                                title: t('legal.contentModeration.title') || 'Content Moderation Policy',
-                                subtitle: t('legal.contentModeration.subtitle') || 'How we moderate content',
-                                onPress: handleOpenPolicy('contentModeration'),
-                            },
-                            {
-                                id: 'child-safety',
-                                icon: 'heart',
-                                iconColor: '#FF2D55',
-                                title: t('legal.childSafety.title') || 'Child Safety Policy',
-                                subtitle: t('legal.childSafety.subtitle') || 'Protecting minors on our platform',
-                                onPress: handleOpenPolicy('childSafety'),
-                            },
-                            {
-                                id: 'cookie-policy',
-                                icon: 'cookie',
-                                iconColor: '#8E8E93',
-                                title: t('legal.cookiePolicy.title') || 'Cookie Policy',
-                                subtitle: t('legal.cookiePolicy.subtitle') || 'How we use cookies and similar technologies',
-                                onPress: handleOpenPolicy('cookie'),
-                            },
-                        ]}
-                        
+                <SettingsListGroup title={t('legal.policies') || 'Policies & Guidelines'}>
+                    <SettingsListItem
+                        icon={<SettingsIcon name="shield-check" color={themeColors.iconPersonalInfo} />}
+                        title={t('legal.privacyPolicy.title') || 'Privacy Policy'}
+                        description={t('legal.privacyPolicy.subtitle') || 'How we handle your data'}
+                        onPress={handleOpenPolicy('privacy')}
                     />
-                </Section>
+                    <SettingsListItem
+                        icon={<SettingsIcon name="file-document" color={themeColors.iconSecurity} />}
+                        title={t('legal.termsOfService.title') || 'Terms of Service'}
+                        description={t('legal.termsOfService.subtitle') || 'Terms and conditions of use'}
+                        onPress={handleOpenPolicy('terms')}
+                    />
+                    <SettingsListItem
+                        icon={<SettingsIcon name="account-group" color={themeColors.iconData} />}
+                        title={t('legal.communityGuidelines.title') || 'Community Guidelines'}
+                        description={t('legal.communityGuidelines.subtitle') || 'Rules and expectations for our community'}
+                        onPress={handleOpenPolicy('community')}
+                    />
+                    <SettingsListItem
+                        icon={<SettingsIcon name="clock" color={themeColors.iconStorage} />}
+                        title={t('legal.dataRetention.title') || 'Data Retention Policy'}
+                        description={t('legal.dataRetention.subtitle') || 'How long we keep your data'}
+                        onPress={handleOpenPolicy('dataRetention')}
+                    />
+                    <SettingsListItem
+                        icon={<SettingsIcon name="eye" color={themeColors.iconSharing} />}
+                        title={t('legal.contentModeration.title') || 'Content Moderation Policy'}
+                        description={t('legal.contentModeration.subtitle') || 'How we moderate content'}
+                        onPress={handleOpenPolicy('contentModeration')}
+                    />
+                    <SettingsListItem
+                        icon={<SettingsIcon name="heart" color="#FF2D55" />}
+                        title={t('legal.childSafety.title') || 'Child Safety Policy'}
+                        description={t('legal.childSafety.subtitle') || 'Protecting minors on our platform'}
+                        onPress={handleOpenPolicy('childSafety')}
+                    />
+                    <SettingsListItem
+                        icon={<SettingsIcon name="cookie" color="#8E8E93" />}
+                        title={t('legal.cookiePolicy.title') || 'Cookie Policy'}
+                        description={t('legal.cookiePolicy.subtitle') || 'How we use cookies and similar technologies'}
+                        onPress={handleOpenPolicy('cookie')}
+                    />
+                </SettingsListGroup>
             </ScrollView>
         </View>
     );

package/src/ui/screens/PaymentGatewayScreen.tsx

@@ -11,7 +11,8 @@ import {
 import type { BaseScreenProps } from '../types/navigation';
 import { useThemeColors } from '../styles';
 import { normalizeTheme } from '../utils/themeUtils';
-import GroupedPillButtons from '../components/internal/GroupedPillButtons';
+import { Button } from '@oxyhq/bloom/button';
+import { Ionicons } from '@expo/vector-icons';
 import { useI18n } from '../hooks/useI18n';
 import QRCode from 'react-native-qrcode-svg';
 
@@ -184,17 +185,15 @@ const PaymentGatewayScreen: React.FC<PaymentGatewayScreenProps> = (props) => {
         return (
             <View style={styles.errorContainer}>
                 <Text style={styles.errorText}>{t('payment.errors.invalidAmount')}</Text>
-                <GroupedPillButtons
-                    buttons={[
-                        {
-                            text: t('payment.actions.close'),
-                            onPress: handleClose,
-                            icon: 'close',
-                            variant: 'primary',
-                        },
-                    ]}
-                    colors={colors}
-                />
+                <Button
+                    variant="primary"
+                    onPress={handleClose}
+                    size="small"
+                    icon={<Ionicons name="close" size={16} />}
+                    iconPosition="right"
+                >
+                    {t('payment.actions.close')}
+                </Button>
             </View>
         );
     }