@oxyhq/services 5.5.9 → 5.6.1

package/src/ui/hooks/useFollow.ts

@@ -1,173 +1,102 @@
-import { useDispatch, useSelector } from 'react-redux';
 import { useCallback, useMemo } from 'react';
-import { toggleFollowUser, setFollowingStatus, clearFollowError, fetchFollowStatus } from '../store';
-import type { RootState } from '../store';
+import { useFollowStore } from '../stores/followStore';
 import { useOxy } from '../context/OxyContext';
 
-// Memoized selector to prevent unnecessary re-renders
-const createFollowSelector = (userId: string) => (state: RootState) => ({
-  isFollowing: state.follow.followingUsers[userId] ?? false,
-  isLoading: state.follow.loadingUsers[userId] ?? false,
-  error: state.follow.errors[userId] ?? null,
-});
-
-// Memoized selector for multiple users
-const createMultipleFollowSelector = (userIds: string[]) => (state: RootState) => {
-  const followData: Record<string, { isFollowing: boolean; isLoading: boolean; error: string | null }> = {};
-  const followState = state.follow;
-  
-  for (const userId of userIds) {
-    followData[userId] = {
-      isFollowing: followState.followingUsers[userId] ?? false,
-      isLoading: followState.loadingUsers[userId] ?? false,
-      error: followState.errors[userId] ?? null,
-    };
-  }
-  
-  return {
-    followData,
-    isAnyLoading: userIds.some(uid => followState.loadingUsers[uid]),
-    hasAnyError: userIds.some(uid => followState.errors[uid]),
-    allFollowing: userIds.every(uid => followState.followingUsers[uid]),
-    allNotFollowing: userIds.every(uid => !followState.followingUsers[uid]),
-  };
-};
-
-/**
- * Custom hook for managing follow/unfollow functionality
- * Optimized to prevent unnecessary re-renders
- * Can handle both single user and multiple users
- */
 export const useFollow = (userId?: string | string[]) => {
-  const dispatch = useDispatch();
   const { oxyServices } = useOxy();
-  
-  // Memoize user IDs to prevent recreation on every render
-  const userIds = useMemo(() => {
-    return Array.isArray(userId) ? userId : userId ? [userId] : [];
-  }, [userId]);
-  
+  const userIds = useMemo(() => (Array.isArray(userId) ? userId : userId ? [userId] : []), [userId]);
   const isSingleUser = typeof userId === 'string';
-  
-  // Memoize selectors to prevent recreation
-  const singleUserSelector = useMemo(() => {
-    return isSingleUser && userId ? createFollowSelector(userId) : null;
-  }, [isSingleUser, userId]);
-  
-  const multipleUserSelector = useMemo(() => {
-    return !isSingleUser ? createMultipleFollowSelector(userIds) : null;
-  }, [isSingleUser, userIds]);
-  
-  // Use appropriate selector based on mode
-  const singleUserData = useSelector(singleUserSelector || (() => ({ isFollowing: false, isLoading: false, error: null })));
-  const multipleUserData = useSelector(multipleUserSelector || (() => ({ 
-    followData: {}, 
-    isAnyLoading: false, 
-    hasAnyError: false, 
-    allFollowing: false, 
-    allNotFollowing: true 
-  })));
-
-  // Memoized callbacks to prevent recreation on every render
+
+  // Zustand selectors
+  const followState = useFollowStore();
+
+  // Single user helpers
+  const isFollowing = isSingleUser && userId ? followState.followingUsers[userId] ?? false : false;
+  const isLoading = isSingleUser && userId ? followState.loadingUsers[userId] ?? false : false;
+  const error = isSingleUser && userId ? followState.errors[userId] ?? null : null;
+
   const toggleFollow = useCallback(async () => {
     if (!isSingleUser || !userId) throw new Error('toggleFollow is only available for single user mode');
-    
-    try {
-      const result = await dispatch(toggleFollowUser({
-        userId,
-        oxyServices,
-        isCurrentlyFollowing: singleUserData.isFollowing
-      })).unwrap();
-      return result;
-    } catch (error) {
-      throw error;
-    }
-  }, [dispatch, userId, oxyServices, singleUserData.isFollowing, isSingleUser]);
+    await followState.toggleFollowUser(userId, oxyServices, isFollowing);
+  }, [isSingleUser, userId, followState, oxyServices, isFollowing]);
 
   const setFollowStatus = useCallback((following: boolean) => {
     if (!isSingleUser || !userId) throw new Error('setFollowStatus is only available for single user mode');
-    dispatch(setFollowingStatus({ userId, isFollowing: following }));
-  }, [dispatch, userId, isSingleUser]);
+    followState.setFollowingStatus(userId, following);
+  }, [isSingleUser, userId, followState]);
 
   const fetchStatus = useCallback(async () => {
     if (!isSingleUser || !userId) throw new Error('fetchStatus is only available for single user mode');
-    
-    try {
-      await dispatch(fetchFollowStatus({ userId, oxyServices })).unwrap();
-    } catch (error) {
-      console.warn(`Failed to fetch follow status for user ${userId}:`, error);
-    }
-  }, [dispatch, userId, oxyServices, isSingleUser]);
+    await followState.fetchFollowStatus(userId, oxyServices);
+  }, [isSingleUser, userId, followState, oxyServices]);
 
   const clearError = useCallback(() => {
     if (!isSingleUser || !userId) throw new Error('clearError is only available for single user mode');
-    dispatch(clearFollowError(userId));
-  }, [dispatch, userId, isSingleUser]);
+    followState.clearFollowError(userId);
+  }, [isSingleUser, userId, followState]);
+
+  // Multiple user helpers
+  const followData = useMemo(() => {
+    const data: Record<string, { isFollowing: boolean; isLoading: boolean; error: string | null }> = {};
+    userIds.forEach(uid => {
+      data[uid] = {
+        isFollowing: followState.followingUsers[uid] ?? false,
+        isLoading: followState.loadingUsers[uid] ?? false,
+        error: followState.errors[uid] ?? null,
+      };
+    });
+    return data;
+  }, [userIds, followState.followingUsers, followState.loadingUsers, followState.errors]);
 
-  // Multiple user callbacks
   const toggleFollowForUser = useCallback(async (targetUserId: string) => {
-    const currentState = multipleUserData.followData[targetUserId]?.isFollowing ?? false;
-    try {
-      const result = await dispatch(toggleFollowUser({
-        userId: targetUserId,
-        oxyServices,
-        isCurrentlyFollowing: currentState
-      })).unwrap();
-      return result;
-    } catch (error) {
-      throw error;
-    }
-  }, [dispatch, oxyServices, multipleUserData.followData]);
+    const currentState = followState.followingUsers[targetUserId] ?? false;
+    await followState.toggleFollowUser(targetUserId, oxyServices, currentState);
+  }, [followState, oxyServices]);
 
   const setFollowStatusForUser = useCallback((targetUserId: string, following: boolean) => {
-    dispatch(setFollowingStatus({ userId: targetUserId, isFollowing: following }));
-  }, [dispatch]);
+    followState.setFollowingStatus(targetUserId, following);
+  }, [followState]);
 
   const fetchStatusForUser = useCallback(async (targetUserId: string) => {
-    try {
-      await dispatch(fetchFollowStatus({ userId: targetUserId, oxyServices })).unwrap();
-    } catch (error) {
-      console.warn(`Failed to fetch follow status for user ${targetUserId}:`, error);
-    }
-  }, [dispatch, oxyServices]);
+    await followState.fetchFollowStatus(targetUserId, oxyServices);
+  }, [followState, oxyServices]);
 
   const fetchAllStatuses = useCallback(async () => {
-    const promises = userIds.map(uid => 
-      dispatch(fetchFollowStatus({ userId: uid, oxyServices })).unwrap().catch((error: any) => {
-        console.warn(`Failed to fetch follow status for user ${uid}:`, error);
-      })
-    );
-    await Promise.all(promises);
-  }, [dispatch, userIds, oxyServices]);
+    await Promise.all(userIds.map(uid => followState.fetchFollowStatus(uid, oxyServices)));
+  }, [userIds, followState, oxyServices]);
 
   const clearErrorForUser = useCallback((targetUserId: string) => {
-    dispatch(clearFollowError(targetUserId));
-  }, [dispatch]);
+    followState.clearFollowError(targetUserId);
+  }, [followState]);
+
+  // Aggregate helpers for multiple users
+  const isAnyLoading = userIds.some(uid => followState.loadingUsers[uid]);
+  const hasAnyError = userIds.some(uid => !!followState.errors[uid]);
+  const allFollowing = userIds.every(uid => followState.followingUsers[uid]);
+  const allNotFollowing = userIds.every(uid => !followState.followingUsers[uid]);
 
-  // Return appropriate interface based on mode
   if (isSingleUser && userId) {
     return {
-      isFollowing: singleUserData.isFollowing,
-      isLoading: singleUserData.isLoading,
-      error: singleUserData.error,
+      isFollowing,
+      isLoading,
+      error,
       toggleFollow,
       setFollowStatus,
       fetchStatus,
       clearError,
     };
   }
-  
+
   return {
-    followData: multipleUserData.followData,
+    followData,
     toggleFollowForUser,
     setFollowStatusForUser,
     fetchStatusForUser,
     fetchAllStatuses,
     clearErrorForUser,
-    // Helper methods
-    isAnyLoading: multipleUserData.isAnyLoading,
-    hasAnyError: multipleUserData.hasAnyError,
-    allFollowing: multipleUserData.allFollowing,
-    allNotFollowing: multipleUserData.allNotFollowing,
+    isAnyLoading,
+    hasAnyError,
+    allFollowing,
+    allNotFollowing,
   };
 }; 

package/src/ui/hooks/useSessionSocket.ts

@@ -0,0 +1,50 @@
+import { useEffect, useRef } from 'react';
+import io from 'socket.io-client';
+import { toast } from '../../lib/sonner';
+
+interface UseSessionSocketProps {
+  userId: string | null | undefined;
+  activeSessionId: string | null | undefined;
+  refreshSessions: () => Promise<void>;
+  logout: () => Promise<void>;
+  baseURL: string;
+  onRemoteSignOut?: () => void;
+}
+
+export function useSessionSocket({ userId, activeSessionId, refreshSessions, logout, baseURL, onRemoteSignOut }: UseSessionSocketProps) {
+  const socketRef = useRef<any>(null);
+
+  useEffect(() => {
+    if (!userId || !baseURL) return;
+
+    if (!socketRef.current) {
+      socketRef.current = io(baseURL, {
+        transports: ['websocket'],
+      });
+    }
+    const socket = socketRef.current;
+
+    socket.on('connect', () => {
+      console.log('Socket connected:', socket.id);
+    });
+
+    socket.emit('join', { userId: `user:${userId}` });
+    console.log('Emitting join for room:', `user:${userId}`);
+
+    socket.on('session_update', (data: { type: string; sessionId: string }) => {
+      console.log('Received session_update:', data);
+      if (data.sessionId === activeSessionId) {
+        if (onRemoteSignOut) onRemoteSignOut();
+        else toast.info('You have been signed out remotely.');
+        logout();
+      } else {
+        refreshSessions();
+      }
+    });
+
+    return () => {
+      socket.emit('leave', { userId: `user:${userId}` });
+      socket.off('session_update');
+    };
+  }, [userId, baseURL, activeSessionId, refreshSessions, logout, onRemoteSignOut]);
+} 

package/src/ui/index.ts

@@ -8,6 +8,7 @@ export { default as OxySignInButton } from './components/OxySignInButton';
 export { default as OxyLogo } from './components/OxyLogo';
 export { default as Avatar } from './components/Avatar';
 export { default as FollowButton } from './components/FollowButton';
+export { default as OxyPayButton } from './components/OxyPayButton';
 export { FontLoader, setupFonts } from './components/FontLoader';
 
 // Export icon components
@@ -21,41 +22,6 @@ export {
   OxyContextProviderProps
 } from './context/OxyContext';
 
-// Redux store exports - NEW ARCHITECTURE
-export { 
-  setupOxyStore, 
-  oxyReducers,
-  // Individual slices
-  authSlice,
-  authActions,
-  authSelectors,
-  authReducer,
-  followSlice,
-  followActions,
-  followSelectors,
-  followThunks,
-  followReducer,
-  // Action creators
-  loginStart,
-  loginSuccess,
-  loginFailure,
-  logout,
-  setFollowingStatus,
-  clearFollowError,
-  resetFollowState,
-  fetchFollowStatus,
-  toggleFollowUser,
-  // Types
-  AuthState,
-  FollowState,
-  initialAuthState,
-  initialFollowState
-} from './store';
-
-// Legacy store exports (deprecated)
-export { store } from './store';
-export type { RootState, AppDispatch } from './store';
-
 // Export styles
 export { fontFamilies, fontStyles } from './styles/fonts';
 
@@ -63,8 +29,7 @@ export { fontFamilies, fontStyles } from './styles/fonts';
 export * from './navigation/types';
 
 // Hooks
-export { useOxyFollow, useFollow } from './hooks';
-export { default as useAuthFetch } from './hooks/useAuthFetch';
+export { useFollow } from './hooks';
 
 // Screens
 export { default as ProfileScreen } from './screens/ProfileScreen';

package/src/ui/navigation/OxyRouter.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useCallback } from 'react';
 import { View, StyleSheet } from 'react-native';
 import { OxyServices } from '../../core';
 
@@ -11,7 +11,6 @@ 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 FeedbackScreen from '../screens/FeedbackScreen';
 import KarmaCenterScreen from '../screens/karma/KarmaCenterScreen';
@@ -22,6 +21,8 @@ import KarmaRewardsScreen from '../screens/karma/KarmaRewardsScreen';
 import KarmaFAQScreen from '../screens/karma/KarmaFAQScreen';
 import ProfileScreen from '../screens/ProfileScreen';
 import FileManagementScreen from '../screens/FileManagementScreen';
+import RecoverAccountScreen from '../screens/RecoverAccountScreen';
+import PaymentGatewayScreen from '../screens/PaymentGatewayScreen';
 
 // Import types
 import { OxyRouterProps, RouteConfig } from './types';
@@ -36,6 +37,10 @@ const routes: Record<string, RouteConfig> = {
         component: SignUpScreen,
         snapPoints: ['10%', '90%'],
     },
+    RecoverAccount: {
+        component: RecoverAccountScreen,
+        snapPoints: ['10%', '80%'],
+    },
     AccountCenter: {
         component: AccountCenterScreen,
         snapPoints: ['60%', '100%'],
@@ -60,10 +65,6 @@ const routes: Record<string, RouteConfig> = {
         component: PremiumSubscriptionScreen,
         snapPoints: ['70%', '100%'],
     },
-    BillingManagement: {
-        component: BillingManagementScreen,
-        snapPoints: ['70%', '100%'],
-    },
     AppInfo: {
         component: AppInfoScreen,
         snapPoints: ['60%', '90%'],
@@ -104,6 +105,10 @@ const routes: Record<string, RouteConfig> = {
         component: FileManagementScreen,
         snapPoints: ['70%', '100%'],
     },
+    PaymentGateway: {
+        component: PaymentGatewayScreen,
+        snapPoints: ['60%', '90%'],
+    },
 };
 
 const OxyRouter: React.FC<OxyRouterProps> = ({
@@ -118,32 +123,49 @@ const OxyRouter: React.FC<OxyRouterProps> = ({
 }) => {
     const [currentScreen, setCurrentScreen] = useState<string>(initialScreen);
     const [screenHistory, setScreenHistory] = useState<string[]>([initialScreen]);
-    const [screenProps, setScreenProps] = useState<Record<string, any>>({});
+    // Store props per screen for correct restoration on back
+    const [screenPropsMap, setScreenPropsMap] = useState<Record<string, any>>({ [initialScreen]: {} });
 
     // Update snap points when the screen changes
     useEffect(() => {
-        if (routes[currentScreen]) {
+        if (routes[currentScreen] && typeof adjustSnapPoints === 'function') {
             adjustSnapPoints(routes[currentScreen].snapPoints);
         }
     }, [currentScreen, adjustSnapPoints]);
 
-    // Navigation methods
-    const navigate = (screen: string, props: Record<string, any> = {}) => {
+    // Memoized navigation methods
+    const navigate = useCallback((screen: string, props: Record<string, any> = {}) => {
         if (routes[screen]) {
             setCurrentScreen(screen);
             setScreenHistory(prev => [...prev, screen]);
-            setScreenProps(props);
+            setScreenPropsMap(prev => ({ ...prev, [screen]: props }));
         } else {
-            console.error(`Screen "${screen}" not found`);
+            if (process.env.NODE_ENV !== 'production') {
+                console.error(`Screen "${screen}" not found`);
+            }
         }
-    };
+    }, []);
+
+    const goBack = useCallback(() => {
+        setScreenHistory(prev => {
+            if (prev.length > 1) {
+                const newHistory = [...prev];
+                newHistory.pop();
+                const previousScreen = newHistory[newHistory.length - 1];
+                setCurrentScreen(previousScreen);
+                return newHistory;
+            } else {
+                if (onClose) onClose();
+                return prev;
+            }
+        });
+    }, [onClose]);
 
     // Expose the navigate function to the parent component
     useEffect(() => {
         if (navigationRef) {
             navigationRef.current = navigate;
         }
-
         return () => {
             if (navigationRef) {
                 navigationRef.current = null;
@@ -153,83 +175,48 @@ const OxyRouter: React.FC<OxyRouterProps> = ({
 
     // Expose the navigate method to the parent component (OxyProvider)
     useEffect(() => {
-        // Set up event listener for navigation events
         const handleNavigationEvent = (event: any) => {
             if (event && event.detail) {
-                // Support both string and object detail
                 if (typeof event.detail === 'string') {
-                    const screenName = event.detail;
-                    console.log(`Navigation event received for screen: ${screenName}`);
-                    navigate(screenName);
+                    navigate(event.detail);
                 } else if (typeof event.detail === 'object' && event.detail.screen) {
                     const { screen, props } = event.detail;
-                    console.log(`Navigation event received for screen: ${screen} with props`, props);
                     navigate(screen, props || {});
                 }
             }
         };
 
-        // For React Native - check for global navigation events
         let intervalId: any = null;
-
-        if (typeof document !== 'undefined') {
-            // Web - use custom event listener
+        if (typeof document !== 'undefined' && document.addEventListener) {
             document.addEventListener('oxy:navigate', handleNavigationEvent);
         } else {
-            // React Native - poll for global navigation events
             intervalId = setInterval(() => {
                 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
+                if (globalNav && globalNav.screen) {
+                    navigate(globalNav.screen, globalNav.props || {});
                     (globalThis as any).oxyNavigateEvent = null;
                 }
-            }, 100); // Check every 100ms
+            }, 100);
         }
-
-        // Cleanup
         return () => {
-            if (typeof document !== 'undefined') {
+            if (typeof document !== 'undefined' && document.removeEventListener) {
                 document.removeEventListener('oxy:navigate', handleNavigationEvent);
             }
             if (intervalId) {
                 clearInterval(intervalId);
             }
         };
-    }, []);
-
-    const goBack = () => {
-        if (screenHistory.length > 1) {
-            const newHistory = [...screenHistory];
-            newHistory.pop();
-            const previousScreen = newHistory[newHistory.length - 1];
-            setCurrentScreen(previousScreen);
-            setScreenHistory(newHistory);
-        } else {
-            // If no history, close the UI
-            if (onClose) {
-                onClose();
-            }
-        }
-    };
+    }, [navigate]);
 
     // Render the current screen component
     const renderScreen = () => {
         const CurrentScreen = routes[currentScreen]?.component;
-
-        console.log('[OxyRouter] Rendering screen:', currentScreen);
-        console.log('[OxyRouter] Available routes:', Object.keys(routes));
-        console.log('[OxyRouter] Current screen component found:', !!CurrentScreen);
-
         if (!CurrentScreen) {
-            console.error(`Screen "${currentScreen}" not found`);
+            if (process.env.NODE_ENV !== 'production') {
+                console.error(`Screen "${currentScreen}" not found`);
+            }
             return <View style={styles.errorContainer} />;
         }
-
-        console.log('[OxyRouter] Rendering screen component for:', currentScreen);
         return (
             <CurrentScreen
                 oxyServices={oxyServices}
@@ -239,7 +226,7 @@ const OxyRouter: React.FC<OxyRouterProps> = ({
                 onAuthenticated={onAuthenticated}
                 theme={theme}
                 containerWidth={containerWidth}
-                {...screenProps}
+                {...(screenPropsMap[currentScreen] || {})}
             />
         );
     };
@@ -254,15 +241,12 @@ const OxyRouter: React.FC<OxyRouterProps> = ({
 const styles = StyleSheet.create({
     container: {
         flex: 1,
-        minHeight: 200, // Ensure minimum height
-        backgroundColor: 'transparent', // Make sure it's visible
     },
     errorContainer: {
         flex: 1,
         justifyContent: 'center',
         alignItems: 'center',
         minHeight: 100,
-        backgroundColor: 'red', // Make errors visible
     },
 });
 

package/src/ui/navigation/types.ts

@@ -1,7 +1,6 @@
 import { OxyServices } from '../../core';
 import { User } from '../../models/interfaces';
 import { ComponentType, ReactNode } from 'react';
-import { BottomSheetModalRef } from '../components/bottomSheet';
 
 /**
  * Base props for all screens in the Oxy UI system
@@ -33,7 +32,7 @@ export interface OxyRouterProps {
   onClose?: () => void;
   onAuthenticated?: (user: User) => void;
   theme: 'light' | 'dark';
-  adjustSnapPoints: (snapPoints: string[]) => void;
+  adjustSnapPoints?: (snapPoints: string[]) => void;
   navigationRef?: React.MutableRefObject<((screen: string, props?: Record<string, any>) => void) | null>;
   containerWidth?: number;
 }
@@ -120,35 +119,15 @@ export interface OxyProviderProps {
   onAuthStateChange?: (user: User | null) => void;
 
   /**
-   * Storage key prefix for AsyncStorage
+   * Prefix for keys in AsyncStorage
+   * @default "oxy"
    */
   storageKeyPrefix?: string;
 
   /**
-   * Whether to show the internal toaster
+   * 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;
-
-  /**
-   * External Redux store to use instead of the internal store
-   * If provided, the store must include the Oxy reducers using setupOxyStore()
-   * @example
-   * ```ts
-   * const store = configureStore({
-   *   reducer: {
-   *     ...setupOxyStore(),
-   *     myAppReducer,
-   *   },
-   * });
-   * ```
-   */
-  store?: any;
-
-  /**
-   * Skip Redux Provider wrapper if store is managed externally
-   * Set to true if your app already has a Redux Provider higher in the component tree
-   * @default false
-   */
-  skipReduxProvider?: boolean;
 }