@oxyhq/services 5.13.4 → 5.13.11

package/src/ui/components/GroupedItem.tsx

@@ -45,7 +45,7 @@ const GroupedItem: React.FC<GroupedItemProps> = ({
 }) => {
     const isDarkTheme = theme === 'dark';
     const textColor = isDarkTheme ? '#FFFFFF' : '#000000';
-    const secondaryBackgroundColor = isDarkTheme ? '#222222' : '#FFFFFF';
+    const secondaryBackgroundColor = isDarkTheme ? '#1C1C1E' : '#FFFFFF';
     const selectedBackgroundColor = selected ? `${iconColor}15` : secondaryBackgroundColor;
 
     const itemStyles = [
@@ -80,7 +80,7 @@ const GroupedItem: React.FC<GroupedItemProps> = ({
             <View style={[styles.actionTextContainer, multiRow && styles.actionTextContainerMultiRow]}>
                 <Text style={[styles.actionButtonText, { color: textColor }]}>{title}</Text>
                 {subtitle && (
-                    <Text style={[styles.actionButtonSubtext, { color: isDarkTheme ? '#BBBBBB' : '#666666' }]}>
+                    <Text style={[styles.actionButtonSubtext, { color: isDarkTheme ? '#98989D' : '#8E8E93' }]}>
                         {subtitle}
                     </Text>
                 )}
@@ -90,7 +90,7 @@ const GroupedItem: React.FC<GroupedItemProps> = ({
             {selected ? (
                 <Ionicons name="checkmark-circle" size={20} color={iconColor || '#007AFF'} />
             ) : showChevron ? (
-                <Ionicons name="chevron-forward" size={16} color={isDarkTheme ? '#666666' : '#999999'} />
+                <Ionicons name="chevron-forward" size={16} color={isDarkTheme ? '#636366' : '#C7C7CC'} />
             ) : null}
         </View>
     );
@@ -115,56 +115,58 @@ const styles = StyleSheet.create({
         flexDirection: 'row',
         alignItems: 'center',
         justifyContent: 'space-between',
-        marginBottom: 2,
+        marginBottom: StyleSheet.hairlineWidth,
         overflow: 'hidden',
         width: '100%',
     },
     firstGroupedItem: {
-        borderTopLeftRadius: 24,
-        borderTopRightRadius: 24,
+        borderTopLeftRadius: 16,
+        borderTopRightRadius: 16,
     },
     lastGroupedItem: {
-        borderBottomLeftRadius: 24,
-        borderBottomRightRadius: 24,
-        marginBottom: 8,
+        borderBottomLeftRadius: 16,
+        borderBottomRightRadius: 16,
+        marginBottom: 0,
     },
     groupedItemContent: {
         flexDirection: 'row',
         alignItems: 'center',
-        paddingVertical: 12,
-        paddingHorizontal: 12,
+        paddingVertical: 14,
+        paddingHorizontal: 16,
         width: '100%',
     },
     groupedItemContentDense: {
-        paddingVertical: 10,
-        paddingHorizontal: 12,
+        paddingVertical: 12,
+        paddingHorizontal: 16,
     },
     actionIcon: {
         marginRight: 12,
     },
     iconContainer: {
-        width: 38,
-        height: 38,
-        borderRadius: 19,
+        width: 32,
+        height: 32,
+        borderRadius: 12,
         alignItems: 'center',
         justifyContent: 'center',
         marginRight: 12,
     },
     actionImage: {
         marginRight: 12,
-        borderRadius: 16,
+        borderRadius: 12,
     },
     actionTextContainer: {
         flex: 1,
     },
     actionButtonText: {
-        fontSize: 16,
-        fontWeight: '500',
+        fontSize: 17,
+        fontWeight: '400',
         marginBottom: 2,
+        letterSpacing: -0.2,
     },
     actionButtonSubtext: {
-        fontSize: 13,
-        lineHeight: 18,
+        fontSize: 15,
+        lineHeight: 20,
+        marginTop: 1,
     },
     groupedItemContentMultiRow: {
         alignItems: 'flex-start',

package/src/ui/components/OxyProvider.tsx

@@ -10,8 +10,9 @@ import { Toaster } from '../../lib/sonner';
 import { QueryClient, QueryClientProvider, focusManager } from '@tanstack/react-query';
 
 // Import bottom sheet components directly - no longer a peer dependency
-import { BottomSheetModal, BottomSheetBackdrop, type BottomSheetBackdropProps, BottomSheetModalProvider, BottomSheetView } from '@gorhom/bottom-sheet';
+import { BottomSheetModal, BottomSheetBackdrop, type BottomSheetBackdropProps, BottomSheetModalProvider, BottomSheetScrollView } from '@gorhom/bottom-sheet';
 import type { BottomSheetModalMethods as BottomSheetModalRef } from '@gorhom/bottom-sheet/lib/typescript/types';
+import { useWindowDimensions } from 'react-native';
 
 // Initialize fonts automatically
 setupFonts();
@@ -113,7 +114,7 @@ const OxyProvider: FC<OxyProviderProps> = (props) => {
                         {/* Global Toaster for app-wide notifications outside of Modal contexts - only show if internal toaster is disabled */}
                         {!showInternalToaster && (
                             <View style={styles.toasterContainer}>
-                                <Toaster position="top-center" swipeToDismissDirection="left" offset={15} />
+                                <Toaster position="bottom-center" swipeToDismissDirection="left" offset={15} />
                             </View>
                         )}
                     </GestureHandlerRootView>
@@ -146,6 +147,8 @@ const OxyBottomSheet = forwardRef<BottomSheetController, OxyBottomSheetProps>(({
     const shouldUseNativeDriver = () => {
         return Platform.OS === 'ios';
     };
+    // Get window dimensions for max height calculation
+    const { height: windowHeight } = useWindowDimensions();
     // Get oxyServices from context if not provided as prop
     const contextOxy = useOxy();
     const oxyServices = providedOxyServices || contextOxy?.oxyServices;
@@ -153,6 +156,7 @@ const OxyBottomSheet = forwardRef<BottomSheetController, OxyBottomSheetProps>(({
     const modalRef = useRef<BottomSheetModalRef>(null);
     const isOpenRef = useRef(false);
     const navigationRef = useRef<((screen: any, props?: Record<string, unknown>) => void) | null>(null);
+    
     // Remove contentHeight, containerWidth, and snap point state/logic
     // Animation values - keep for content fade/slide
     const fadeAnim = useRef(new Animated.Value(Platform.OS === 'android' ? 1 : 0)).current;
@@ -200,6 +204,13 @@ const OxyBottomSheet = forwardRef<BottomSheetController, OxyBottomSheetProps>(({
     const [keyboardVisible, setKeyboardVisible] = useState(false);
     const [keyboardHeight, setKeyboardHeight] = useState(0);
     const insets = useSafeAreaInsets();
+    
+    // Calculate max height for dynamic sizing (screen height minus insets and margin)
+    const maxHeight = useMemo(() => {
+        const topInset = (insets?.top ?? 0) + (appInsets?.top ?? 0);
+        const bottomInset = (insets?.bottom ?? 0) + (appInsets?.bottom ?? 0);
+        return windowHeight - topInset - bottomInset - 20; // 20px margin
+    }, [windowHeight, insets?.top, insets?.bottom, appInsets?.top, appInsets?.bottom]);
     useEffect(() => {
         // Use 'did' events on iOS to avoid multiple intermediate willShow updates
         const showEvent = Platform.OS === 'ios' ? 'keyboardDidShow' : 'keyboardDidShow';
@@ -293,12 +304,14 @@ const OxyBottomSheet = forwardRef<BottomSheetController, OxyBottomSheetProps>(({
         ),
         []
     );
+    
     // Modernized BottomSheetModal usage
     return (
         <BottomSheetModal
             ref={modalRef}
             index={0}
             enableDynamicSizing={true}
+            maxDynamicContentSize={maxHeight}
             enablePanDownToClose
             backdropComponent={renderBackdrop}
             backgroundStyle={[
@@ -335,12 +348,12 @@ const OxyBottomSheet = forwardRef<BottomSheetController, OxyBottomSheetProps>(({
             onChange={(index) => { isOpenRef.current = index !== -1; }}
             onDismiss={() => { isOpenRef.current = false; }}
         >
-            <BottomSheetView style={[styles.contentContainer]}>
-                <View
-                    style={[
-                        styles.centeredContentWrapper,
-                        { paddingBottom: (insets?.bottom ?? 0) + (appInsets?.bottom ?? 0) }
-                    ]}
+            <BottomSheetScrollView
+                style={[styles.contentContainer]}
+                contentContainerStyle={styles.scrollContentContainer}
+                showsVerticalScrollIndicator={true}
+                bounces={false}
+                nestedScrollEnabled={true}
                 >
                     <Animated.View
                         style={[
@@ -348,6 +361,12 @@ const OxyBottomSheet = forwardRef<BottomSheetController, OxyBottomSheetProps>(({
                             Platform.OS === 'android'
                                 ? { opacity: 1 }
                                 : { opacity: fadeAnim, transform: [{ translateY: slideAnim }] }
+                    ]}
+                >
+                    <View
+                        style={[
+                            styles.centeredContentWrapper,
+                            { paddingBottom: (insets?.bottom ?? 0) + (appInsets?.bottom ?? 0) }
                         ]}
                     >
                         {oxyServices ? (
@@ -365,12 +384,12 @@ const OxyBottomSheet = forwardRef<BottomSheetController, OxyBottomSheetProps>(({
                                 <Text>OxyServices not available</Text>
                             </View>
                         )}
+                    </View>
                     </Animated.View>
-                </View>
-            </BottomSheetView>
+            </BottomSheetScrollView>
             {showInternalToaster && (
                 <View style={styles.toasterContainer}>
-                    <Toaster position="top-center" swipeToDismissDirection="left" />
+                    <Toaster position="bottom-center" swipeToDismissDirection="left" />
                 </View>
             )}
         </BottomSheetModal>
@@ -389,6 +408,9 @@ const styles = StyleSheet.create({
         borderTopLeftRadius: 35,
         borderTopRightRadius: 35,
     },
+    scrollContentContainer: {
+        // Content will size naturally, ScrollView handles overflow
+    },
     centeredContentWrapper: {
         width: '100%',
         alignSelf: 'center',

package/src/ui/navigation/routes.ts

@@ -22,6 +22,13 @@ import RecoverAccountScreen from '../screens/RecoverAccountScreen';
 import PaymentGatewayScreen from '../screens/PaymentGatewayScreen';
 import WelcomeNewUserScreen from '../screens/WelcomeNewUserScreen';
 import LanguageSelectorScreen from '../screens/LanguageSelectorScreen';
+import HistoryViewScreen from '../screens/HistoryViewScreen';
+import SavesCollectionsScreen from '../screens/SavesCollectionsScreen';
+import SearchSettingsScreen from '../screens/SearchSettingsScreen';
+import HelpSupportScreen from '../screens/HelpSupportScreen';
+import LegalDocumentsScreen from '../screens/LegalDocumentsScreen';
+import PrivacySettingsScreen from '../screens/PrivacySettingsScreen';
+import AccountVerificationScreen from '../screens/AccountVerificationScreen';
 
 export interface RouteConfig {
   component: ComponentType<any>;
@@ -53,6 +60,13 @@ export const routeNames = [
   'PaymentGateway',
   'WelcomeNewUser',
   'LanguageSelector',
+  'HistoryView',
+  'SavesCollections',
+  'SearchSettings',
+  'HelpSupport',
+  'LegalDocuments',
+  'PrivacySettings',
+  'AccountVerification',
 ] as const;
 
 export type RouteName = typeof routeNames[number];
@@ -150,4 +164,32 @@ export const routes: Record<RouteName, RouteConfig> = {
     component: LanguageSelectorScreen as unknown as ComponentType<any>,
     snapPoints: ['70%', '100%'],
   },
+  HistoryView: {
+    component: HistoryViewScreen as unknown as ComponentType<any>,
+    snapPoints: ['70%', '100%'],
+  },
+  SavesCollections: {
+    component: SavesCollectionsScreen as unknown as ComponentType<any>,
+    snapPoints: ['70%', '100%'],
+  },
+  SearchSettings: {
+    component: SearchSettingsScreen as unknown as ComponentType<any>,
+    snapPoints: ['70%', '100%'],
+  },
+  HelpSupport: {
+    component: HelpSupportScreen as unknown as ComponentType<any>,
+    snapPoints: ['70%', '100%'],
+  },
+  LegalDocuments: {
+    component: LegalDocumentsScreen as unknown as ComponentType<any>,
+    snapPoints: ['70%', '100%'],
+  },
+  PrivacySettings: {
+    component: PrivacySettingsScreen as unknown as ComponentType<any>,
+    snapPoints: ['60%', '100%'],
+  },
+  AccountVerification: {
+    component: AccountVerificationScreen as unknown as ComponentType<any>,
+    snapPoints: ['70%', '100%'],
+  },
 };

package/src/ui/screens/AccountOverviewScreen.tsx

@@ -145,6 +145,130 @@ const AccountOverviewScreen: React.FC<BaseScreenProps> = ({
         confirmAction(t('common.confirms.signOutAll'), handleLogout);
     }, [handleLogout]);
 
+    const handleDownloadData = useCallback(async () => {
+        if (!oxyServices || !user) {
+            toast.error(t('accountOverview.items.downloadData.error') || 'Service not available');
+            return;
+        }
+
+        try {
+            Alert.alert(
+                t('accountOverview.items.downloadData.confirmTitle') || 'Download Account Data',
+                t('accountOverview.items.downloadData.confirmMessage') || 'Choose the format for your account data export:',
+                [
+                    {
+                        text: t('common.cancel') || 'Cancel',
+                        style: 'cancel',
+                    },
+                    {
+                        text: 'JSON',
+                        onPress: async () => {
+                            try {
+                                toast.loading(t('accountOverview.items.downloadData.downloading') || 'Preparing download...');
+                                const blob = await oxyServices.downloadAccountData('json');
+                                
+                                // Create download link for web
+                                if (Platform.OS === 'web') {
+                                    const url = URL.createObjectURL(blob);
+                                    const link = document.createElement('a');
+                                    link.href = url;
+                                    link.download = `account-data-${Date.now()}.json`;
+                                    document.body.appendChild(link);
+                                    link.click();
+                                    document.body.removeChild(link);
+                                    URL.revokeObjectURL(url);
+                                    toast.success(t('accountOverview.items.downloadData.success') || 'Data downloaded successfully');
+                                } else {
+                                    // For React Native, you'd need to use a library like expo-file-system
+                                    toast.success(t('accountOverview.items.downloadData.success') || 'Data downloaded successfully');
+                                }
+                            } catch (error: any) {
+                                console.error('Failed to download data:', error);
+                                toast.error(error?.message || t('accountOverview.items.downloadData.error') || 'Failed to download data');
+                            }
+                        },
+                    },
+                    {
+                        text: 'CSV',
+                        onPress: async () => {
+                            try {
+                                toast.loading(t('accountOverview.items.downloadData.downloading') || 'Preparing download...');
+                                const blob = await oxyServices.downloadAccountData('csv');
+                                
+                                // Create download link for web
+                                if (Platform.OS === 'web') {
+                                    const url = URL.createObjectURL(blob);
+                                    const link = document.createElement('a');
+                                    link.href = url;
+                                    link.download = `account-data-${Date.now()}.csv`;
+                                    document.body.appendChild(link);
+                                    link.click();
+                                    document.body.removeChild(link);
+                                    URL.revokeObjectURL(url);
+                                    toast.success(t('accountOverview.items.downloadData.success') || 'Data downloaded successfully');
+                                } else {
+                                    // For React Native, you'd need to use a library like expo-file-system
+                                    toast.success(t('accountOverview.items.downloadData.success') || 'Data downloaded successfully');
+                                }
+                            } catch (error: any) {
+                                console.error('Failed to download data:', error);
+                                toast.error(error?.message || t('accountOverview.items.downloadData.error') || 'Failed to download data');
+                            }
+                        },
+                    },
+                ]
+            );
+        } catch (error: any) {
+            console.error('Failed to initiate download:', error);
+            toast.error(error?.message || t('accountOverview.items.downloadData.error') || 'Failed to download data');
+        }
+    }, [oxyServices, user, t]);
+
+    const handleDeleteAccount = useCallback(() => {
+        if (!user) {
+            toast.error(t('accountOverview.items.deleteAccount.error') || 'User not available');
+            return;
+        }
+
+        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;
+                }
+
+                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]);
+
     if (!isAuthenticated) {
         return (
             <View style={[styles.container, { backgroundColor: themeStyles.backgroundColor }]}>
@@ -291,8 +415,6 @@ const AccountOverviewScreen: React.FC<BaseScreenProps> = ({
                                     subtitle: account.email || account.username,
                                     onPress: () => {
                                         toast.info(t('accountOverview.items.accountSwitcher.switchPrompt', { username: account.username }) || `Switch to ${account.username}?`);
-                                        // TODO: Implement account switching logic
-                                        // switchSession(account.sessionId);
                                     },
                                     customContent: (
                                         <>
@@ -377,13 +499,29 @@ const AccountOverviewScreen: React.FC<BaseScreenProps> = ({
                                             : t('accountOverview.items.accountSwitcher.subtitleManageMultiple'),
                                 onPress: () => setShowMoreAccounts(!showMoreAccounts),
                             },
+                            {
+                                id: 'history-view',
+                                icon: 'time',
+                                iconColor: '#007AFF',
+                                title: t('accountOverview.items.history.title') || 'History',
+                                subtitle: t('accountOverview.items.history.subtitle') || 'View and manage your search history',
+                                onPress: () => navigate?.('HistoryView'),
+                            },
+                            {
+                                id: 'saves-collections',
+                                icon: 'bookmark',
+                                iconColor: '#FF9500',
+                                title: t('accountOverview.items.saves.title') || 'Saves & Collections',
+                                subtitle: t('accountOverview.items.saves.subtitle') || 'View your saved items and collections',
+                                onPress: () => navigate?.('SavesCollections'),
+                            },
                             {
                                 id: 'download-data',
                                 icon: 'download',
                                 iconColor: '#34C759',
                                 title: t('accountOverview.items.downloadData.title'),
                                 subtitle: t('accountOverview.items.downloadData.subtitle'),
-                                onPress: () => toast.info(t('accountOverview.items.downloadData.coming')),
+                                onPress: handleDownloadData,
                             },
                             {
                                 id: 'delete-account',
@@ -391,7 +529,7 @@ const AccountOverviewScreen: React.FC<BaseScreenProps> = ({
                                 iconColor: '#FF3B30',
                                 title: t('accountOverview.items.deleteAccount.title'),
                                 subtitle: t('accountOverview.items.deleteAccount.subtitle'),
-                                onPress: () => toast.info(t('accountOverview.items.deleteAccount.coming')),
+                                onPress: handleDeleteAccount,
                             },
                         ]}
                         theme={theme}
@@ -402,6 +540,22 @@ const AccountOverviewScreen: React.FC<BaseScreenProps> = ({
                 <Section title={t('accountOverview.sections.support')} theme={theme}>
                     <GroupedSection
                         items={[
+                            {
+                                id: 'search-settings',
+                                icon: 'search',
+                                iconColor: '#007AFF',
+                                title: t('accountOverview.items.searchSettings.title') || 'Search Settings',
+                                subtitle: t('accountOverview.items.searchSettings.subtitle') || 'SafeSearch and personalization',
+                                onPress: () => navigate?.('SearchSettings'),
+                            },
+                            {
+                                id: 'language-settings',
+                                icon: 'language',
+                                iconColor: '#32D74B',
+                                title: t('accountOverview.items.language.title') || 'Language',
+                                subtitle: t('accountOverview.items.language.subtitle') || 'Choose your preferred language',
+                                onPress: () => navigate?.('LanguageSelector'),
+                            },
                             {
                                 id: 'account-preferences',
                                 icon: 'settings',
@@ -416,7 +570,23 @@ const AccountOverviewScreen: React.FC<BaseScreenProps> = ({
                                 iconColor: '#007AFF',
                                 title: t('accountOverview.items.help.title'),
                                 subtitle: t('accountOverview.items.help.subtitle'),
-                                onPress: () => toast.info(t('accountOverview.items.help.coming')),
+                                onPress: () => navigate?.('HelpSupport'),
+                            },
+                            {
+                                id: 'privacy-policy',
+                                icon: 'shield-checkmark',
+                                iconColor: '#30D158',
+                                title: t('accountOverview.items.privacyPolicy.title') || 'Privacy Policy',
+                                subtitle: t('accountOverview.items.privacyPolicy.subtitle') || 'How we handle your data',
+                                onPress: () => navigate?.('LegalDocuments', { initialStep: 1 }),
+                            },
+                            {
+                                id: 'terms-of-service',
+                                icon: 'document-text',
+                                iconColor: '#007AFF',
+                                title: t('accountOverview.items.termsOfService.title') || 'Terms of Service',
+                                subtitle: t('accountOverview.items.termsOfService.subtitle') || 'Terms and conditions of use',
+                                onPress: () => navigate?.('LegalDocuments', { initialStep: 2 }),
                             },
                             {
                                 id: 'connected-apps',