@oxyhq/services 5.17.17 → 5.18.0

package/src/ui/index.ts

@@ -6,8 +6,8 @@
  */
 import isFrontend from './isFrontend';
 
-// Real UI exports
-let OxyProvider, OxySignInButton, OxyLogo, Avatar, FollowButton, OxyPayButton, FontLoader, setupFonts, OxyIcon, useOxy, useOxyAuth, useOxyUser, useOxyKarma, useOxyPayments, useOxyDevices, useOxyNotifications, useOxySocket, useOxyQR, OxyContextProvider, OxyContextState, OxyContextProviderProps, useFollow, ProfileScreen, useAuthStore, useAccountStore, fontFamilies, fontStyles, toast;
+// UI exports
+let OxyProvider, OxySignInButton, OxyLogo, Avatar, FollowButton, OxyPayButton, FontLoader, setupFonts, OxyIcon, useOxy, useFollow, ProfileScreen, useAuthStore, useAccountStore, fontFamilies, fontStyles, toast, useStorage;
 
 if (isFrontend) {
   OxyProvider = require('./components/OxyProvider').default;
@@ -20,9 +20,6 @@ if (isFrontend) {
   setupFonts = require('./components/FontLoader').setupFonts;
   OxyIcon = require('./components/icon').OxyIcon;
   useOxy = require('./context/OxyContext').useOxy;
-  OxyContextProvider = require('./context/OxyContext').OxyContextProvider;
-  OxyContextState = require('./context/OxyContext').OxyContextState;
-  OxyContextProviderProps = require('./context/OxyContext').OxyContextProviderProps;
   useFollow = require('./hooks').useFollow;
   ProfileScreen = require('./screens/ProfileScreen').default;
   useAuthStore = require('./stores/authStore').useAuthStore;
@@ -30,10 +27,13 @@ if (isFrontend) {
   fontFamilies = require('./styles/fonts').fontFamilies;
   fontStyles = require('./styles/fonts').fontStyles;
   toast = require('../lib/sonner').toast;
+  useStorage = require('./hooks/useStorage').useStorage;
 } else {
   // Backend: no-op fallbacks
   const noopComponent = () => null;
   const noopHook = () => ({});
+  const noopStorageResult = { storage: null, isReady: false };
+
   OxyProvider = noopComponent;
   OxySignInButton = noopComponent;
   OxyLogo = noopComponent;
@@ -44,9 +44,6 @@ if (isFrontend) {
   setupFonts = () => {};
   OxyIcon = noopComponent;
   useOxy = noopHook;
-  OxyContextProvider = noopComponent;
-  OxyContextState = {};
-  OxyContextProviderProps = {};
   useFollow = noopHook;
   ProfileScreen = noopComponent;
   useAuthStore = noopHook;
@@ -54,6 +51,7 @@ if (isFrontend) {
   fontFamilies = {};
   fontStyles = {};
   toast = () => {};
+  useStorage = () => noopStorageResult;
 }
 
 export {
@@ -67,17 +65,28 @@ export {
   setupFonts,
   OxyIcon,
   useOxy,
-  OxyContextProvider,
-  OxyContextState,
-  OxyContextProviderProps,
   useFollow,
   ProfileScreen,
   useAuthStore,
   useAccountStore,
   fontFamilies,
   fontStyles,
-  toast
+  toast,
+  useStorage,
 };
 
-// Removed convenience re-export of core services from UI context.
+// Re-export core services for convenience in UI context
+export { OxyServices } from '../core';
 export type { User, LoginResponse, ApiError } from '../models/interfaces';
+
+// Export error handler utilities (pure functions, no conditional needed)
+export {
+  handleAuthError,
+  isInvalidSessionError,
+  isTimeoutOrNetworkError,
+  extractErrorMessage,
+} from './utils/errorHandlers';
+export type { HandleAuthErrorOptions } from './utils/errorHandlers';
+
+// Export useStorage hook and types (kept for external consumers)
+export type { UseStorageOptions, UseStorageResult } from './hooks/useStorage';

package/src/ui/navigation/routes.ts

@@ -22,6 +22,7 @@ export type RouteName =
     | 'SearchSettings'
     | 'FileManagement'
     | 'HelpSupport'
+    | 'FAQ'
     | 'Feedback'
     | 'LegalDocuments'
     | 'AppInfo'
@@ -30,18 +31,22 @@ export type RouteName =
     | 'UserLinks'
     | 'HistoryView'
     | 'SavesCollections'
+    | 'EditProfile' // For backward compatibility, maps to AccountSettings
     | 'KarmaCenter'
     | 'KarmaLeaderboard'
     | 'KarmaRewards'
     | 'KarmaRules'
     | 'AboutKarma'
     | 'KarmaFAQ'
-    | 'EditProfile'
+    // Legacy aliases for backward compatibility
+    | 'SignIn';  // Maps to OxyAuth
 
 // Lazy screen loaders - functions that return screen components on-demand
 // This breaks the require cycle by deferring imports until screens are actually needed
 const screenLoaders: Record<RouteName, () => ComponentType<BaseScreenProps>> = {
     OxyAuth: () => require('../screens/OxyAuthScreen').default,
+    // Legacy alias - SignIn now maps to OxyAuth
+    SignIn: () => require('../screens/OxyAuthScreen').default,
     AccountOverview: () => require('../screens/AccountOverviewScreen').default,
     AccountSettings: () => require('../screens/AccountSettingsScreen').default,
     AccountCenter: () => require('../screens/AccountCenterScreen').default,
@@ -55,6 +60,7 @@ const screenLoaders: Record<RouteName, () => ComponentType<BaseScreenProps>> = {
     SearchSettings: () => require('../screens/SearchSettingsScreen').default,
     FileManagement: () => require('../screens/FileManagementScreen').default,
     HelpSupport: () => require('../screens/HelpSupportScreen').default,
+    FAQ: () => require('../screens/FAQScreen').default,
     Feedback: () => require('../screens/FeedbackScreen').default,
     LegalDocuments: () => require('../screens/LegalDocumentsScreen').default,
     AppInfo: () => require('../screens/AppInfoScreen').default,
@@ -63,7 +69,7 @@ const screenLoaders: Record<RouteName, () => ComponentType<BaseScreenProps>> = {
     UserLinks: () => require('../screens/UserLinksScreen').default,
     HistoryView: () => require('../screens/HistoryViewScreen').default,
     SavesCollections: () => require('../screens/SavesCollectionsScreen').default,
-    // EditProfile kept for historical references
+    // Backward compatibility - EditProfile maps to AccountSettings
     EditProfile: () => require('../screens/AccountSettingsScreen').default,
     // Karma screens
     KarmaCenter: () => require('../screens/karma/KarmaCenterScreen').default,

package/src/ui/screens/AccountCenterScreen.tsx

@@ -189,7 +189,7 @@ const AccountCenterScreen: React.FC<BaseScreenProps> = ({
                                     iconColor: colors.iconPersonalInfo,
                                     title: t('accountCenter.items.addAccount.title') || 'Add Another Account',
                                     subtitle: t('accountCenter.items.addAccount.subtitle') || 'Sign in with a different account',
-                                    onPress: () => navigate?.('OxyAuth'),
+                                    onPress: () => navigate?.('SignIn'),
                                 },
                             ], [sessions.length, navigate, t, colors])}
 
@@ -208,7 +208,7 @@ const AccountCenterScreen: React.FC<BaseScreenProps> = ({
                                     iconColor: colors.iconPersonalInfo,
                                     title: t('accountCenter.items.addAccount.title') || 'Add Another Account',
                                     subtitle: t('accountCenter.items.addAccount.subtitle') || 'Sign in with a different account',
-                                    onPress: () => navigate?.('OxyAuth'),
+                                    onPress: () => navigate?.('SignIn'),
                                 },
                             ], [navigate, t, colors])}
 
@@ -226,7 +226,7 @@ const AccountCenterScreen: React.FC<BaseScreenProps> = ({
                                 iconColor: colors.iconStorage,
                                 title: t('accountCenter.items.notifications.title') || 'Notifications',
                                 subtitle: t('accountCenter.items.notifications.subtitle') || 'Manage notification settings',
-                                onPress: () => toast.info(t('accountCenter.items.notifications.coming') || 'Notifications feature coming soon!'),
+                                onPress: () => navigate?.('EditProfile', { activeTab: 'notifications' }),
                             }] : []),
                             {
                                 id: 'language',
@@ -242,7 +242,7 @@ const AccountCenterScreen: React.FC<BaseScreenProps> = ({
                                 iconColor: colors.iconSecurity,
                                 title: t('accountOverview.items.help.title') || 'Help & Support',
                                 subtitle: t('accountOverview.items.help.subtitle') || 'Get help and contact support',
-                                onPress: () => toast.info(t('accountOverview.items.help.coming') || 'Help & Support feature coming soon!'),
+                                onPress: () => navigate?.('HelpSupport'),
                             },
                             {
                                 id: 'appinfo',

package/src/ui/screens/AccountOverviewScreen.tsx

@@ -34,6 +34,7 @@ import {
     HEADER_PADDING_TOP_OVERVIEW,
     createScreenContentStyle,
 } from '../constants/spacing';
+import { DeleteAccountModal } from '../components/modals';
 
 // Optional Lottie import - gracefully handle if not available
 let LottieView: any = null;
@@ -83,6 +84,7 @@ const AccountOverviewScreen: React.FC<BaseScreenProps> = ({
     const [showMoreAccounts, setShowMoreAccounts] = useState(false);
     const [additionalAccountsData, setAdditionalAccountsData] = useState<any[]>([]);
     const [loadingAdditionalAccounts, setLoadingAdditionalAccounts] = useState(false);
+    const [showDeleteModal, setShowDeleteModal] = useState(false);
     const lottieRef = useRef<any>(null);
     const hasPlayedRef = useRef(false);
     const insets = useSafeAreaInsets();
@@ -143,7 +145,7 @@ const AccountOverviewScreen: React.FC<BaseScreenProps> = ({
 
     React.useEffect(() => {
         if (usersData && usersData.length > 0) {
-            const accountsData = usersData.map(({ sessionId, user: userProfile }) => {
+            const accountsData = usersData.map(({ sessionId, user: userProfile }: { sessionId: string; user: any }) => {
                 if (!userProfile) {
                     return {
                         id: sessionId,
@@ -289,45 +291,22 @@ const AccountOverviewScreen: React.FC<BaseScreenProps> = ({
             toast.error(t('accountOverview.items.deleteAccount.error') || 'User not available');
             return;
         }
+        setShowDeleteModal(true);
+    }, [user, t]);
 
-        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;
-                }
+    const handleConfirmDelete = useCallback(async (password: string) => {
+        if (!oxyServices || !user) {
+            throw new Error(t('accountOverview.items.deleteAccount.error') || 'Service not available');
+        }
 
-                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]);
+        await oxyServices.deleteAccount(password);
+        toast.success(t('accountOverview.items.deleteAccount.success') || 'Account deleted successfully');
+        setShowDeleteModal(false);
+        await logout();
+        if (onClose) {
+            onClose();
+        }
+    }, [oxyServices, user, logout, onClose, t]);
 
     if (!isAuthenticated) {
         return (
@@ -703,6 +682,25 @@ const AccountOverviewScreen: React.FC<BaseScreenProps> = ({
                     />
                 </Section>
             </ScrollView>
+
+            {/* Delete Account Modal */}
+            {user && (
+                <DeleteAccountModal
+                    visible={showDeleteModal}
+                    username={user.username || ''}
+                    onClose={() => setShowDeleteModal(false)}
+                    onDelete={handleConfirmDelete}
+                    colors={{
+                        background: themeStyles.backgroundColor,
+                        text: themeStyles.textColor,
+                        secondaryText: themeStyles.isDarkTheme ? '#888888' : '#666666',
+                        border: themeStyles.borderColor,
+                        danger: '#FF3B30',
+                        inputBackground: themeStyles.isDarkTheme ? '#333333' : '#F5F5F5',
+                    }}
+                    t={t}
+                />
+            )}
         </View>
     );
 };

package/src/ui/screens/AccountSettingsScreen.tsx

@@ -22,6 +22,7 @@ import { MaterialCommunityIcons } from '@expo/vector-icons';
 import { toast } from '../../lib/sonner';
 import { fontFamilies } from '../styles/fonts';
 import { confirmAction } from '../utils/confirmAction';
+import { useAuthStore } from '../stores/authStore';
 import { Header, GroupedSection, Section } from '../components';
 import { useI18n } from '../hooks/useI18n';
 import { useThemeStyles } from '../hooks/useThemeStyles';
@@ -76,9 +77,13 @@ const AccountSettingsScreen: React.FC<BaseScreenProps & { initialField?: string;
     const normalizedTheme = normalizeTheme(theme);
 
     // Use TanStack Query for user data
-    const { data: finalUser, isLoading: userLoading } = useCurrentUser({ enabled: isAuthenticated });
+    const { data: user, isLoading: userLoading } = useCurrentUser({ enabled: isAuthenticated });
     const updateProfileMutation = useUpdateProfile();
     const uploadAvatarMutation = useUploadAvatar();
+
+    // Fallback to store for backward compatibility
+    const userFromStore = useAuthStore((state) => state.user);
+    const finalUser = user || userFromStore;
     const [isLoading, setIsLoading] = useState(false);
     const isSaving = updateProfileMutation.isPending;
     const isUpdatingAvatar = uploadAvatarMutation.isPending;
@@ -215,10 +220,9 @@ const AccountSettingsScreen: React.FC<BaseScreenProps & { initialField?: string;
             // Only reset all fields if it's a new user or first load
             // Skip reset if it's just an avatar update
             if (shouldInitialize && !isAvatarOnlyUpdate) {
-                // Prioritize name.full over name.first for display name
                 const userDisplayName = typeof finalUser.name === 'string'
                     ? finalUser.name
-                    : finalUser.name?.full || finalUser.name?.first || '';
+                    : finalUser.name?.first || finalUser.name?.full || '';
                 const userLastName = typeof finalUser.name === 'object' ? finalUser.name?.last || '' : '';
                 setDisplayName(userDisplayName);
                 setLastName(userLastName);
@@ -363,15 +367,7 @@ const AccountSettingsScreen: React.FC<BaseScreenProps & { initialField?: string;
         try {
             switch (field) {
                 case 'displayName':
-                    // Send both first/last AND full name for proper synchronization
-                    const fullName = [tempDisplayName, tempLastName].filter(Boolean).join(' ').trim() || tempDisplayName;
-                    await updateProfileMutation.mutateAsync({
-                        name: {
-                            first: tempDisplayName,
-                            last: tempLastName,
-                            full: fullName
-                        }
-                    });
+                    await updateProfileMutation.mutateAsync({ name: { first: tempDisplayName, last: tempLastName } });
                     setDisplayName(tempDisplayName);
                     setLastName(tempLastName);
                     break;
@@ -476,12 +472,7 @@ const AccountSettingsScreen: React.FC<BaseScreenProps & { initialField?: string;
 
             // Handle name field
             if (displayName || lastName) {
-                const fullName = [displayName, lastName].filter(Boolean).join(' ').trim() || displayName;
-                updates.name = {
-                    first: displayName,
-                    last: lastName,
-                    full: fullName
-                };
+                updates.name = { first: displayName, last: lastName };
             }
 
             // Handle avatar
@@ -523,40 +514,46 @@ const AccountSettingsScreen: React.FC<BaseScreenProps & { initialField?: string;
     const handleOpenLinksModal = useCallback(() => setShowEditLinksModal(true), []);
 
     // Handler to refresh data after modal saves
-    // Note: Query will automatically refetch after mutations invalidate it
+    // Note: Access user directly from store when invoked to get latest value,
+    // not from closure which may be stale after modal saves update the backend
     const handleModalSave = useCallback(() => {
+        // Get fresh user data from store to ensure we have the latest values
+        // after the modal's save operation updates the backend
+        // Read from store directly (not from closure) to avoid stale data
+        const currentUser = useAuthStore.getState().user;
+
         // Reload user data to reflect changes
-        if (finalUser) {
-            const userDisplayName = typeof finalUser.name === 'string'
-                ? finalUser.name
-                : finalUser.name?.first || finalUser.name?.full || '';
-            const userLastName = typeof finalUser.name === 'object' ? finalUser.name?.last || '' : '';
+        if (currentUser) {
+            const userDisplayName = typeof currentUser.name === 'string'
+                ? currentUser.name
+                : currentUser.name?.first || currentUser.name?.full || '';
+            const userLastName = typeof currentUser.name === 'object' ? currentUser.name?.last || '' : '';
             setDisplayName(userDisplayName);
             setLastName(userLastName);
-            setUsername(finalUser.username || '');
-            setEmail(finalUser.email || '');
-            setBio(finalUser.bio || '');
+            setUsername(currentUser.username || '');
+            setEmail(currentUser.email || '');
+            setBio(currentUser.bio || '');
 
             // Reload locations and links
-            if (finalUser.locations && Array.isArray(finalUser.locations)) {
-                setLocations(finalUser.locations.map((loc: any, index: number) => ({
+            if (currentUser.locations && Array.isArray(currentUser.locations)) {
+                setLocations(currentUser.locations.map((loc, index) => ({
                     id: loc.id || `existing-${index}`,
                     name: loc.name,
                     label: loc.label,
                     coordinates: loc.coordinates
                 })));
-            } else if (finalUser.location) {
+            } else if (currentUser.location) {
                 setLocations([{
                     id: 'existing-0',
-                    name: finalUser.location,
+                    name: currentUser.location,
                     label: 'Location'
                 }]);
             } else {
                 setLocations([]);
             }
 
-            if (finalUser.linksMetadata && Array.isArray(finalUser.linksMetadata)) {
-                setLinksMetadata(finalUser.linksMetadata.map((link: any, index: number) => ({
+            if (currentUser.linksMetadata && Array.isArray(currentUser.linksMetadata)) {
+                setLinksMetadata(currentUser.linksMetadata.map((link, index) => ({
                     ...link,
                     id: link.id || `existing-${index}`
                 })));
@@ -564,7 +561,7 @@ const AccountSettingsScreen: React.FC<BaseScreenProps & { initialField?: string;
                 setLinksMetadata([]);
             }
         }
-    }, [finalUser]); // Query will automatically refetch after mutations
+    }, []); // Empty dependency array - callback reads fresh data from store at call time
 
     // Handle initialField prop - open appropriate modal
     useEffect(() => {
@@ -832,7 +829,7 @@ const AccountSettingsScreen: React.FC<BaseScreenProps & { initialField?: string;
                                     {/* Search results */}
                                     {locationSearchResults.length > 0 && (
                                         <View style={styles.searchResults}>
-                                            {locationSearchResults.map((result: any) => (
+                                            {locationSearchResults.map((result) => (
                                                 <TouchableOpacity
                                                     key={result.place_id}
                                                     style={styles.searchResultItem}
@@ -863,7 +860,7 @@ const AccountSettingsScreen: React.FC<BaseScreenProps & { initialField?: string;
                             {tempLocations.length > 0 && (
                                 <View style={styles.locationsList}>
                                     <Text style={styles.locationsListTitle}>Your Locations ({tempLocations.length})</Text>
-                                    {tempLocations.map((location: any, index: number) => (
+                                    {tempLocations.map((location, index) => (
                                         <View key={location.id} style={styles.locationItem}>
                                             <View style={styles.locationItemContent}>
                                                 <View style={styles.locationItemDragHandle}>
@@ -991,7 +988,7 @@ const AccountSettingsScreen: React.FC<BaseScreenProps & { initialField?: string;
                                         onPress: () => setIsAddingLink(true),
                                     }]),
                                     // Existing links
-                                    ...tempLinksWithMetadata.map((link: any, index: number) => ({
+                                    ...tempLinksWithMetadata.map((link, index) => ({
                                         id: link.id,
                                         customIcon: link.image ? (
                                             <Image source={{ uri: link.image }} style={{ width: 36, height: 36, borderRadius: 18 }} />

package/src/ui/screens/AccountSwitcherScreen.tsx

@@ -130,7 +130,7 @@ const ModernAccountSwitcherScreen: React.FC<BaseScreenProps> = ({
 
                 // Create a map for O(1) lookup
                 const userProfileMap = new Map<string, User | null>();
-                batchResults.forEach(({ sessionId, user }) => {
+                batchResults.forEach(({ sessionId, user }: { sessionId: string; user: any }) => {
                     userProfileMap.set(sessionId, user);
                 });
 
@@ -460,7 +460,7 @@ const ModernAccountSwitcherScreen: React.FC<BaseScreenProps> = ({
                                         iconColor: '#007AFF',
                                         title: 'Add Another Account',
                                         subtitle: 'Sign in with a different account',
-                                        onPress: () => navigate?.('OxyAuth'),
+                                        onPress: () => navigate?.('SignIn'),
                                     },
                                     {
                                         id: 'device-management',
@@ -561,7 +561,7 @@ const ModernAccountSwitcherScreen: React.FC<BaseScreenProps> = ({
                                             iconColor: '#ccc',
                                             title: t('accountSwitcher.empty.title') || 'No saved accounts',
                                             subtitle: t('accountSwitcher.empty.subtitle') || 'Add another account to switch between them quickly',
-                                            onPress: () => navigate?.('OxyAuth'),
+                                            onPress: () => navigate?.('SignIn'),
                                             customContent: (
                                                 <View style={styles.emptyStateContainer}>
                                                     <OxyIcon name="person-outline" size={48} color="#ccc" />
@@ -571,7 +571,7 @@ const ModernAccountSwitcherScreen: React.FC<BaseScreenProps> = ({
                                                     </Text>
                                                     <TouchableOpacity
                                                         style={styles.addAccountButton}
-                                                        onPress={() => navigate?.('OxyAuth')}
+                                                        onPress={() => navigate?.('SignIn')}
                                                     >
                                                         <Text style={styles.addAccountButtonText}>{t('accountCenter.sections.addAccount') || 'Add Account'}</Text>
                                                     </TouchableOpacity>