@oxyhq/services 5.3.11 → 5.4.1

package/src/ui/components/QuickActions.tsx

@@ -0,0 +1,90 @@
+import React from 'react';
+import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
+import { Ionicons } from '@expo/vector-icons';
+
+interface QuickAction {
+    id: string;
+    icon: string;
+    iconColor: string;
+    title: string;
+    onPress: () => void;
+}
+
+interface QuickActionsProps {
+    actions: QuickAction[];
+    theme: 'light' | 'dark';
+}
+
+const QuickActions: React.FC<QuickActionsProps> = ({ actions, theme }) => {
+    const isDarkTheme = theme === 'dark';
+    const textColor = isDarkTheme ? '#FFFFFF' : '#000000';
+    const secondaryBackgroundColor = isDarkTheme ? '#222222' : '#FFFFFF';
+
+    return (
+        <View style={[
+            styles.quickActionsContainer,
+            styles.firstGroupedItem,
+            styles.lastGroupedItem,
+            { backgroundColor: secondaryBackgroundColor }
+        ]}>
+            <View style={styles.quickActionsRow}>
+                {actions.map((action) => (
+                    <View key={action.id} style={styles.quickActionItem}>
+                        <TouchableOpacity
+                            style={[
+                                styles.quickActionCircle,
+                                { backgroundColor: isDarkTheme ? 'rgba(255,255,255,0.08)' : 'rgba(0,0,0,0.03)' }
+                            ]}
+                            onPress={action.onPress}
+                        >
+                            <Ionicons name={action.icon as any} size={24} color={action.iconColor} />
+                        </TouchableOpacity>
+                        <Text style={[styles.quickActionText, { color: textColor }]}>{action.title}</Text>
+                    </View>
+                ))}
+            </View>
+        </View>
+    );
+};
+
+const styles = StyleSheet.create({
+    quickActionsContainer: {
+        padding: 16,
+        marginBottom: 8,
+    },
+    firstGroupedItem: {
+        borderTopLeftRadius: 24,
+        borderTopRightRadius: 24,
+    },
+    lastGroupedItem: {
+        borderBottomLeftRadius: 24,
+        borderBottomRightRadius: 24,
+        marginBottom: 8,
+    },
+    quickActionsRow: {
+        flexDirection: 'row',
+        alignItems: 'flex-start',
+        justifyContent: 'space-around',
+        flexWrap: 'wrap',
+    },
+    quickActionItem: {
+        alignItems: 'center',
+        minWidth: 70,
+        marginBottom: 8,
+    },
+    quickActionCircle: {
+        width: 50,
+        height: 50,
+        borderRadius: 25,
+        alignItems: 'center',
+        justifyContent: 'center',
+        marginBottom: 8,
+    },
+    quickActionText: {
+        fontSize: 12,
+        fontWeight: '500',
+        textAlign: 'center',
+    },
+});
+
+export default QuickActions;

package/src/ui/components/Section.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import { View, StyleSheet } from 'react-native';
+import SectionTitle from './SectionTitle';
+
+interface SectionProps {
+    title?: string;
+    theme: 'light' | 'dark';
+    children: React.ReactNode;
+    isFirst?: boolean;
+    style?: any;
+}
+
+const Section: React.FC<SectionProps> = ({ 
+    title, 
+    theme, 
+    children, 
+    isFirst = false,
+    style 
+}) => {
+    return (
+        <View style={[styles.section, isFirst && styles.firstSection, style]}>
+            {title && <SectionTitle title={title} theme={theme} />}
+            {children}
+        </View>
+    );
+};
+
+const styles = StyleSheet.create({
+    section: {
+        marginBottom: 24,
+    },
+    firstSection: {
+        marginTop: 8,
+    },
+});
+
+export default Section;

package/src/ui/components/SectionTitle.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import { Text, StyleSheet } from 'react-native';
+import { fontFamilies } from '../styles/fonts';
+
+interface SectionTitleProps {
+    title: string;
+    theme: 'light' | 'dark';
+    style?: any;
+}
+
+const SectionTitle: React.FC<SectionTitleProps> = ({ title, theme, style }) => {
+    const isDarkTheme = theme === 'dark';
+    const textColor = isDarkTheme ? '#FFFFFF' : '#000000';
+
+    return (
+        <Text style={[styles.sectionTitle, { color: textColor }, style]}>
+            {title}
+        </Text>
+    );
+};
+
+const styles = StyleSheet.create({
+    sectionTitle: {
+        fontSize: 16,
+        fontWeight: '600',
+        fontFamily: fontFamilies.phuduSemiBold,
+        marginBottom: 12,
+    },
+});
+
+export default SectionTitle;

package/src/ui/components/bottomSheet/index.tsx

@@ -1,12 +1,14 @@
-import React from 'react';
-import { BottomSheetModal, BottomSheetBackdrop, BottomSheetBackdropProps, BottomSheetModalProvider, BottomSheetView } from '@gorhom/bottom-sheet';
-
-// Re-export components from @gorhom/bottom-sheet
-// This allows us to use these components internally without requiring the consumer to install @gorhom/bottom-sheet
+// Re-export bottom sheet components from @gorhom/bottom-sheet
 export {
-    BottomSheetModal,
-    BottomSheetBackdrop,
-    BottomSheetBackdropProps,
-    BottomSheetModalProvider,
-    BottomSheetView
-};
+  BottomSheetModal,
+  BottomSheetBackdrop,
+  BottomSheetModalProvider,
+  BottomSheetView,
+  BottomSheetScrollView,
+} from '@gorhom/bottom-sheet';
+
+export type {
+  BottomSheetModalProps,
+  BottomSheetBackdropProps,
+} from '@gorhom/bottom-sheet';
+export type { BottomSheetModalMethods as BottomSheetModalRef } from '@gorhom/bottom-sheet/lib/typescript/types';

package/src/ui/components/index.ts

@@ -0,0 +1,15 @@
+// Re-export all reusable UI components
+export { default as ProfileCard } from './ProfileCard';
+export { default as Section } from './Section';
+export { default as SectionTitle } from './SectionTitle';
+export { default as GroupedItem } from './GroupedItem';
+export { default as GroupedSection } from './GroupedSection';
+export { default as QuickActions } from './QuickActions';
+
+// Re-export existing components
+export { default as Avatar } from './Avatar';
+export { default as FollowButton } from './FollowButton';
+export { FontLoader, setupFonts } from './FontLoader';
+export { default as OxyLogo } from './OxyLogo';
+export { default as OxyProvider } from './OxyProvider';
+export { default as OxySignInButton } from './OxySignInButton';

package/src/ui/navigation/OxyRouter.tsx

@@ -10,6 +10,8 @@ import AccountSwitcherScreen from '../screens/AccountSwitcherScreen';
 import SessionManagementScreen from '../screens/SessionManagementScreen';
 import AccountOverviewScreen from '../screens/AccountOverviewScreen';
 import AccountSettingsScreen from '../screens/AccountSettingsScreen';
+import PremiumSubscriptionScreen from '../screens/PremiumSubscriptionScreen';
+import BillingManagementScreen from '../screens/BillingManagementScreen';
 import AppInfoScreen from '../screens/AppInfoScreen';
 import KarmaCenterScreen from '../screens/karma/KarmaCenterScreen';
 import KarmaLeaderboardScreen from '../screens/karma/KarmaLeaderboardScreen';
@@ -18,6 +20,7 @@ import KarmaAboutScreen from '../screens/karma/KarmaAboutScreen';
 import KarmaRewardsScreen from '../screens/karma/KarmaRewardsScreen';
 import KarmaFAQScreen from '../screens/karma/KarmaFAQScreen';
 import ProfileScreen from '../screens/ProfileScreen';
+import FileManagementScreen from '../screens/FileManagementScreen';
 
 // Import types
 import { OxyRouterProps, RouteConfig } from './types';
@@ -52,6 +55,14 @@ const routes: Record<string, RouteConfig> = {
         component: AccountSettingsScreen,
         snapPoints: ['60%', '100%'],
     },
+    PremiumSubscription: {
+        component: PremiumSubscriptionScreen,
+        snapPoints: ['70%', '100%'],
+    },
+    BillingManagement: {
+        component: BillingManagementScreen,
+        snapPoints: ['70%', '100%'],
+    },
     AppInfo: {
         component: AppInfoScreen,
         snapPoints: ['60%', '90%'],
@@ -84,6 +95,10 @@ const routes: Record<string, RouteConfig> = {
         component: ProfileScreen,
         snapPoints: ['60%', '90%'],
     },
+    FileManagement: {
+        component: FileManagementScreen,
+        snapPoints: ['70%', '100%'],
+    },
 };
 
 const OxyRouter: React.FC<OxyRouterProps> = ({
@@ -94,6 +109,7 @@ const OxyRouter: React.FC<OxyRouterProps> = ({
     theme,
     adjustSnapPoints,
     navigationRef,
+    containerWidth,
 }) => {
     const [currentScreen, setCurrentScreen] = useState<string>(initialScreen);
     const [screenHistory, setScreenHistory] = useState<string[]>([initialScreen]);
@@ -149,7 +165,7 @@ const OxyRouter: React.FC<OxyRouterProps> = ({
         };
 
         // For React Native - check for global navigation events
-        let intervalId: NodeJS.Timeout | null = null;
+        let intervalId: any = null;
         
         if (typeof document !== 'undefined') {
             // Web - use custom event listener
@@ -157,14 +173,14 @@ const OxyRouter: React.FC<OxyRouterProps> = ({
         } else {
             // React Native - poll for global navigation events
             intervalId = setInterval(() => {
-                const globalNav = (global as any).oxyNavigateEvent;
+                const globalNav = (globalThis as any).oxyNavigateEvent;
                 if (globalNav) {
                     console.log(`RN Navigation event received:`, globalNav);
                     if (globalNav.screen) {
                         navigate(globalNav.screen, globalNav.props || {});
                     }
                     // Clear the event after processing
-                    (global as any).oxyNavigateEvent = null;
+                    (globalThis as any).oxyNavigateEvent = null;
                 }
             }, 100); // Check every 100ms
         }
@@ -217,6 +233,7 @@ const OxyRouter: React.FC<OxyRouterProps> = ({
                 onClose={onClose}
                 onAuthenticated={onAuthenticated}
                 theme={theme}
+                containerWidth={containerWidth}
                 {...screenProps}
             />
         );

package/src/ui/navigation/types.ts

@@ -1,7 +1,7 @@
 import { OxyServices } from '../../core';
 import { User } from '../../models/interfaces';
 import { ComponentType, ReactNode } from 'react';
-import { BottomSheetModal } from '@gorhom/bottom-sheet';
+import { BottomSheetModalRef } from '../components/bottomSheet';
 
 /**
  * Base props for all screens in the Oxy UI system
@@ -13,6 +13,7 @@ export interface BaseScreenProps {
   onClose?: () => void;
   onAuthenticated?: (user: User) => void;
   theme: 'light' | 'dark';
+  containerWidth?: number;
 }
 
 /**
@@ -34,6 +35,7 @@ export interface OxyRouterProps {
   theme: 'light' | 'dark';
   adjustSnapPoints: (snapPoints: string[]) => void;
   navigationRef?: React.MutableRefObject<((screen: string, props?: Record<string, any>) => void) | null>;
+  containerWidth?: number;
 }
 
 /**
@@ -122,4 +124,11 @@ export interface OxyProviderProps {
    * @default "oxy"
    */
   storageKeyPrefix?: string;
+
+  /**
+   * Whether to show the internal toaster in the bottom sheet
+   * If false, only the provider's global toaster will be shown
+   * @default true
+   */
+  showInternalToaster?: boolean;
 }