@oxyhq/services 5.13.4 → 5.13.10

package/src/ui/screens/HelpSupportScreen.tsx

@@ -0,0 +1,143 @@
+import React, { useMemo } from 'react';
+import {
+    View,
+    Text,
+    TouchableOpacity,
+    StyleSheet,
+    ScrollView,
+    Linking,
+} from 'react-native';
+import type { BaseScreenProps } from '../navigation/types';
+import { toast } from '../../lib/sonner';
+import { Header, Section, GroupedSection } from '../components';
+import { useI18n } from '../hooks/useI18n';
+
+const HelpSupportScreen: React.FC<BaseScreenProps> = ({
+    onClose,
+    theme,
+    goBack,
+}) => {
+    const { t } = useI18n();
+
+    const handleContactSupport = useMemo(() => () => {
+        // In a real implementation, this would open a contact form or email
+        Linking.openURL('mailto:support@oxy.so?subject=Support Request').catch(() => {
+            toast.error(t('help.contactError') || 'Failed to open email client');
+        });
+    }, [t]);
+
+    const handleFAQ = useMemo(() => () => {
+        // In a real implementation, this would navigate to FAQ screen
+        toast.info(t('help.faqComing') || 'FAQ coming soon');
+    }, [t]);
+
+    const handleReportBug = useMemo(() => () => {
+        // In a real implementation, this would open a bug report form
+        Linking.openURL('mailto:bugs@oxy.so?subject=Bug Report').catch(() => {
+            toast.error(t('help.reportError') || 'Failed to open email client');
+        });
+    }, [t]);
+
+    const themeStyles = useMemo(() => {
+        const isDarkTheme = theme === 'dark';
+        return {
+            textColor: isDarkTheme ? '#FFFFFF' : '#000000',
+            backgroundColor: isDarkTheme ? '#121212' : '#FFFFFF',
+            secondaryBackgroundColor: isDarkTheme ? '#222222' : '#F5F5F5',
+            borderColor: isDarkTheme ? '#444444' : '#E0E0E0',
+        };
+    }, [theme]);
+
+    return (
+        <View style={[styles.container, { backgroundColor: themeStyles.backgroundColor }]}>
+            <Header
+                title={t('help.title') || 'Help & Support'}
+                theme={theme}
+                onBack={goBack || onClose}
+                variant="minimal"
+                elevation="subtle"
+            />
+
+            <ScrollView style={styles.content}>
+                {/* Help Options */}
+                <Section title={t('help.options') || 'Get Help'} theme={theme} isFirst={true}>
+                    <GroupedSection
+                        items={[
+                            {
+                                id: 'faq',
+                                icon: 'help-circle',
+                                iconColor: '#007AFF',
+                                title: t('help.faq.title') || 'Frequently Asked Questions',
+                                subtitle: t('help.faq.subtitle') || 'Find answers to common questions',
+                                onPress: handleFAQ,
+                            },
+                            {
+                                id: 'contact',
+                                icon: 'mail',
+                                iconColor: '#32D74B',
+                                title: t('help.contact.title') || 'Contact Support',
+                                subtitle: t('help.contact.subtitle') || 'Get help from our support team',
+                                onPress: handleContactSupport,
+                            },
+                            {
+                                id: 'report-bug',
+                                icon: 'bug',
+                                iconColor: '#FF9500',
+                                title: t('help.reportBug.title') || 'Report a Bug',
+                                subtitle: t('help.reportBug.subtitle') || 'Help us improve by reporting issues',
+                                onPress: handleReportBug,
+                            },
+                        ]}
+                        theme={theme}
+                    />
+                </Section>
+
+                {/* Resources */}
+                <Section title={t('help.resources') || 'Resources'} theme={theme}>
+                    <GroupedSection
+                        items={[
+                            {
+                                id: 'documentation',
+                                icon: 'document-text',
+                                iconColor: '#8E8E93',
+                                title: t('help.documentation.title') || 'Documentation',
+                                subtitle: t('help.documentation.subtitle') || 'User guides and tutorials',
+                                onPress: () => {
+                                    Linking.openURL('https://docs.oxy.so').catch(() => {
+                                        toast.error(t('help.linkError') || 'Failed to open link');
+                                    });
+                                },
+                            },
+                            {
+                                id: 'community',
+                                icon: 'people',
+                                iconColor: '#5856D6',
+                                title: t('help.community.title') || 'Community',
+                                subtitle: t('help.community.subtitle') || 'Join our community',
+                                onPress: () => {
+                                    Linking.openURL('https://community.oxy.so').catch(() => {
+                                        toast.error(t('help.linkError') || 'Failed to open link');
+                                    });
+                                },
+                            },
+                        ]}
+                        theme={theme}
+                    />
+                </Section>
+            </ScrollView>
+        </View>
+    );
+};
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+    },
+    content: {
+        flex: 1,
+        padding: 16,
+    },
+});
+
+export default React.memo(HelpSupportScreen);
+

package/src/ui/screens/HistoryViewScreen.tsx

@@ -0,0 +1,280 @@
+import React, { useState, useCallback, useMemo } from 'react';
+import {
+    View,
+    Text,
+    TouchableOpacity,
+    StyleSheet,
+    ScrollView,
+    ActivityIndicator,
+} from 'react-native';
+import type { BaseScreenProps } from '../navigation/types';
+import { useOxy } from '../context/OxyContext';
+import { toast } from '../../lib/sonner';
+import { confirmAction } from '../utils/confirmAction';
+import { Header, Section, GroupedSection } from '../components';
+import { useI18n } from '../hooks/useI18n';
+
+interface HistoryItem {
+    id: string;
+    query: string;
+    type: 'search' | 'browse';
+    timestamp: Date;
+}
+
+const HistoryViewScreen: React.FC<BaseScreenProps> = ({
+    onClose,
+    theme,
+    goBack,
+}) => {
+    const { user } = useOxy();
+    const { t } = useI18n();
+    const [history, setHistory] = useState<HistoryItem[]>([]);
+    const [isLoading, setIsLoading] = useState(true);
+    const [isDeleting, setIsDeleting] = useState(false);
+
+    // Helper to get storage
+    const getStorage = async () => {
+        const isReactNative = typeof navigator !== 'undefined' && navigator.product === 'ReactNative';
+
+        if (isReactNative) {
+            try {
+                const asyncStorageModule = await import('@react-native-async-storage/async-storage');
+                const storage = (asyncStorageModule.default as unknown) as any;
+                return {
+                    getItem: storage.getItem.bind(storage),
+                    setItem: storage.setItem.bind(storage),
+                    removeItem: storage.removeItem.bind(storage),
+                };
+            } catch (error) {
+                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);
+                    }
+                }
+            };
+        }
+    };
+
+    // Load history from storage
+    React.useEffect(() => {
+        const loadHistory = async () => {
+            try {
+                setIsLoading(true);
+                // In a real implementation, this would fetch from API or local storage
+                // For now, we'll use a mock implementation
+                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);
+            }
+        };
+
+        loadHistory();
+    }, [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) {
+                    console.error('Failed to delete history:', error);
+                    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) {
+                    console.error('Failed to clear history:', error);
+                    toast.error(t('history.clearAll.error') || 'Failed to clear history');
+                } finally {
+                    setIsDeleting(false);
+                }
+            }
+        );
+    }, [user?.id, t]);
+
+    const themeStyles = useMemo(() => {
+        const isDarkTheme = theme === 'dark';
+        return {
+            textColor: isDarkTheme ? '#FFFFFF' : '#000000',
+            backgroundColor: isDarkTheme ? '#121212' : '#FFFFFF',
+            secondaryBackgroundColor: isDarkTheme ? '#222222' : '#F5F5F5',
+            borderColor: isDarkTheme ? '#444444' : '#E0E0E0',
+        };
+    }, [theme]);
+
+    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'}`;
+        if (days < 7) return `${days} ${t('history.daysAgo') || 'days ago'}`;
+        return date.toLocaleDateString();
+    };
+
+    return (
+        <View style={[styles.container, { backgroundColor: themeStyles.backgroundColor }]}>
+            <Header
+                title={t('history.title') || 'History'}
+                theme={theme}
+                onBack={goBack || onClose}
+                variant="minimal"
+                elevation="subtle"
+            />
+
+            <ScrollView style={styles.content}>
+                {/* Actions */}
+                <Section title={t('history.actions') || 'Actions'} theme={theme} isFirst={true}>
+                    <GroupedSection
+                        items={[
+                            {
+                                id: 'delete-last-15',
+                                icon: 'time-outline',
+                                iconColor: '#FF9500',
+                                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: 'trash-outline',
+                                iconColor: '#FF3B30',
+                                title: t('history.clearAll.title') || 'Clear All History',
+                                subtitle: t('history.clearAll.subtitle') || 'Remove all history entries',
+                                onPress: handleClearAll,
+                                disabled: isDeleting || history.length === 0,
+                            },
+                        ]}
+                        theme={theme}
+                    />
+                </Section>
+
+                {/* History List */}
+                <Section title={t('history.recent') || 'Recent History'} theme={theme}>
+                    {isLoading ? (
+                        <View style={styles.loadingContainer}>
+                            <ActivityIndicator size="large" color={themeStyles.textColor} />
+                            <Text style={[styles.loadingText, { color: themeStyles.textColor }]}>
+                                {t('history.loading') || 'Loading history...'}
+                            </Text>
+                        </View>
+                    ) : history.length === 0 ? (
+                        <View style={styles.emptyContainer}>
+                            <Text style={[styles.emptyText, { color: themeStyles.textColor }]}>
+                                {t('history.empty') || 'No history yet'}
+                            </Text>
+                        </View>
+                    ) : (
+                        <GroupedSection
+                            items={history.map((item) => ({
+                                id: item.id,
+                                icon: item.type === 'search' ? 'search' : 'globe',
+                                iconColor: item.type === 'search' ? '#007AFF' : '#32D74B',
+                                title: item.query,
+                                subtitle: formatTime(item.timestamp),
+                            }))}
+                            theme={theme}
+                        />
+                    )}
+                </Section>
+            </ScrollView>
+        </View>
+    );
+};
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+    },
+    content: {
+        flex: 1,
+        padding: 16,
+    },
+    loadingContainer: {
+        padding: 40,
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    loadingText: {
+        marginTop: 12,
+        fontSize: 16,
+    },
+    emptyContainer: {
+        padding: 40,
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    emptyText: {
+        fontSize: 16,
+        textAlign: 'center',
+    },
+});
+
+export default React.memo(HistoryViewScreen);
+

package/src/ui/screens/LegalDocumentsScreen.tsx

@@ -0,0 +1,220 @@
+import React, { useMemo, useState, useCallback } from 'react';
+import {
+    View,
+    Text,
+    TouchableOpacity,
+    StyleSheet,
+    ScrollView,
+    ActivityIndicator,
+    Linking,
+} from 'react-native';
+import type { BaseScreenProps } from '../navigation/types';
+import { toast } from '../../lib/sonner';
+import { Header, Section, GroupedSection } from '../components';
+import { useI18n } from '../hooks/useI18n';
+
+const LegalDocumentsScreen: React.FC<BaseScreenProps> = ({
+    onClose,
+    theme,
+    goBack,
+    initialStep,
+}) => {
+    const { t } = useI18n();
+    const [loading, setLoading] = useState(false);
+
+    // Policy URLs from Oxy Transparency Center
+    const POLICY_URLS = {
+        privacy: 'https://oxy.so/company/transparency/policies/privacy',
+        terms: 'https://oxy.so/company/transparency/policies/terms-of-service',
+        community: 'https://oxy.so/company/transparency/policies/community-guidelines',
+        dataRetention: 'https://oxy.so/company/transparency/policies/data-retention',
+        contentModeration: 'https://oxy.so/company/transparency/policies/content-moderation',
+        childSafety: 'https://oxy.so/company/transparency/policies/child-safety',
+        cookie: 'https://oxy.so/company/transparency/policies/cookies',
+    };
+
+    // Determine which document to show based on initialStep
+    const documentType = initialStep === 1 ? 'privacy'
+        : initialStep === 2 ? 'terms'
+            : initialStep === 3 ? 'community'
+                : initialStep === 4 ? 'dataRetention'
+                    : initialStep === 5 ? 'contentModeration'
+                        : initialStep === 6 ? 'childSafety'
+                            : initialStep === 7 ? 'cookie'
+                                : null;
+
+    // Generic handler to open any policy URL
+    const handleOpenPolicy = useCallback((policyKey: keyof typeof POLICY_URLS) => {
+        return async () => {
+            try {
+                setLoading(true);
+                const url = POLICY_URLS[policyKey];
+                const canOpen = await Linking.canOpenURL(url);
+                if (canOpen) {
+                    await Linking.openURL(url);
+                } else {
+                    toast.error(t('legal.openError') || 'Failed to open document');
+                }
+            } catch (error) {
+                console.error(`Failed to open ${policyKey} policy:`, error);
+                toast.error(t('legal.openError') || 'Failed to open document');
+            } finally {
+                setLoading(false);
+            }
+        };
+    }, [t]);
+
+    const themeStyles = useMemo(() => {
+        const isDarkTheme = theme === 'dark';
+        return {
+            textColor: isDarkTheme ? '#FFFFFF' : '#000000',
+            backgroundColor: isDarkTheme ? '#121212' : '#FFFFFF',
+            secondaryBackgroundColor: isDarkTheme ? '#222222' : '#F5F5F5',
+            borderColor: isDarkTheme ? '#444444' : '#E0E0E0',
+        };
+    }, [theme]);
+
+    // If a specific document type is requested, open it directly
+    React.useEffect(() => {
+        if (documentType) {
+            handleOpenPolicy(documentType)();
+        }
+    }, [documentType, handleOpenPolicy]);
+
+    // Get policy title for display
+    const getPolicyTitle = (key: string) => {
+        const titles: Record<string, string> = {
+            privacy: t('legal.privacyPolicy.title') || 'Privacy Policy',
+            terms: t('legal.termsOfService.title') || 'Terms of Service',
+            community: t('legal.communityGuidelines.title') || 'Community Guidelines',
+            dataRetention: t('legal.dataRetention.title') || 'Data Retention Policy',
+            contentModeration: t('legal.contentModeration.title') || 'Content Moderation Policy',
+            childSafety: t('legal.childSafety.title') || 'Child Safety Policy',
+            cookie: t('legal.cookiePolicy.title') || 'Cookie Policy',
+        };
+        return titles[key] || 'Document';
+    };
+
+    // If a specific document type is requested, show loading state while opening
+    if (documentType) {
+        return (
+            <View style={[styles.container, { backgroundColor: themeStyles.backgroundColor }]}>
+                <Header
+                    title={getPolicyTitle(documentType)}
+                    theme={theme}
+                    onBack={goBack || onClose}
+                    variant="minimal"
+                    elevation="subtle"
+                />
+                <View style={styles.loadingContainer}>
+                    <ActivityIndicator size="large" color={themeStyles.textColor} />
+                    <Text style={[styles.loadingText, { color: themeStyles.textColor }]}>
+                        {t('legal.opening') || 'Opening document...'}
+                    </Text>
+                </View>
+            </View>
+        );
+    }
+
+    // Default: show both options
+    return (
+        <View style={[styles.container, { backgroundColor: themeStyles.backgroundColor }]}>
+            <Header
+                title={t('legal.title') || 'Legal Documents'}
+                theme={theme}
+                onBack={goBack || onClose}
+                variant="minimal"
+                elevation="subtle"
+            />
+
+            <ScrollView style={styles.content}>
+                <Section title={t('legal.policies') || 'Policies & Guidelines'} theme={theme} isFirst={true}>
+                    <GroupedSection
+                        items={[
+                            {
+                                id: 'privacy-policy',
+                                icon: 'shield-checkmark',
+                                iconColor: '#30D158',
+                                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: 'document-text',
+                                iconColor: '#007AFF',
+                                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: 'people',
+                                iconColor: '#5856D6',
+                                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: 'time',
+                                iconColor: '#FF9500',
+                                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: '#FF3B30',
+                                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'),
+                            },
+                        ]}
+                        theme={theme}
+                    />
+                </Section>
+            </ScrollView>
+        </View>
+    );
+};
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+    },
+    content: {
+        flex: 1,
+        padding: 16,
+    },
+    loadingContainer: {
+        flex: 1,
+        alignItems: 'center',
+        justifyContent: 'center',
+        gap: 16,
+    },
+    loadingText: {
+        fontSize: 16,
+        marginTop: 12,
+    },
+});
+
+export default React.memo(LegalDocumentsScreen);
+

package/src/ui/screens/PremiumSubscriptionScreen.tsx

@@ -1045,7 +1045,6 @@ const PremiumSubscriptionScreen: React.FC<BaseScreenProps> = ({
                                 ]}
                                 onPress={() => {
                                     setCurrentAppPackage(app);
-                                    console.log('Switched to app context:', app);
                                 }}
                             >
                                 <Text style={[