@oxyhq/services 6.9.13 → 6.9.15

package/src/ui/styles/theme.js

@@ -0,0 +1,114 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createCommonStyles = exports.useThemeColors = exports.getTheme = void 0;
+const react_native_1 = require("react-native");
+const fonts_1 = require("./fonts");
+const lightColors = {
+    text: '#000000',
+    background: '#FFFFFF',
+    inputBackground: '#F5F5F5',
+    placeholder: '#999999',
+    primary: '#d169e5',
+    border: '#E0E0E0',
+    error: '#D32F2F',
+    success: '#2E7D32',
+    warning: '#F57C00',
+    secondaryText: '#666666',
+};
+const darkColors = {
+    text: '#FFFFFF',
+    background: '#000000',
+    inputBackground: '#333333',
+    placeholder: '#AAAAAA',
+    primary: '#d169e5',
+    border: '#444444',
+    error: '#EF5350',
+    success: '#81C784',
+    warning: '#FFB74D',
+    secondaryText: '#BBBBBB',
+};
+const createTheme = (isDark) => {
+    const colors = isDark ? darkColors : lightColors;
+    return {
+        colors,
+        fonts: {
+            title: {
+                fontFamily: fonts_1.fontFamilies.interBold,
+                fontWeight: react_native_1.Platform.OS === 'web' ? 'bold' : undefined,
+                fontSize: 34,
+            },
+            body: {
+                fontSize: 16,
+                lineHeight: 24,
+            },
+            button: {
+                fontFamily: fonts_1.fontFamilies.interSemiBold,
+                fontSize: 16,
+                fontWeight: '600',
+                color: '#FFFFFF',
+            },
+            label: {
+                fontSize: 14,
+                fontWeight: '500',
+                marginBottom: 8,
+            },
+        }
+    };
+};
+const getTheme = (theme) => {
+    return createTheme(theme === 'dark');
+};
+exports.getTheme = getTheme;
+const useThemeColors = (theme) => {
+    return (0, exports.getTheme)(theme).colors;
+};
+exports.useThemeColors = useThemeColors;
+// Common styles that can be reused across components
+const createCommonStyles = (theme) => {
+    const themeObj = (0, exports.getTheme)(theme);
+    const { colors } = themeObj;
+    return react_native_1.StyleSheet.create({
+        container: {
+            backgroundColor: colors.background,
+        },
+        scrollContainer: {
+            padding: 10,
+        },
+        input: {
+            height: 48,
+            borderRadius: 35,
+            paddingHorizontal: 16,
+            borderWidth: 1,
+            fontSize: 16,
+            backgroundColor: colors.inputBackground,
+            borderColor: colors.border,
+            color: colors.text,
+        },
+        button: {
+            backgroundColor: colors.primary,
+            height: 48,
+            borderRadius: 35,
+            alignItems: 'center',
+            justifyContent: 'center',
+            marginTop: 24,
+        },
+        buttonText: {
+            fontFamily: fonts_1.fontFamilies.interSemiBold,
+            fontSize: 16,
+            fontWeight: '600',
+            color: '#FFFFFF',
+        },
+        errorContainer: {
+            backgroundColor: '#FFEBEE',
+            padding: 12,
+            borderRadius: 35,
+            marginBottom: 16,
+        },
+        errorText: {
+            fontSize: 14,
+            fontWeight: '500',
+            color: colors.error,
+        },
+    });
+};
+exports.createCommonStyles = createCommonStyles;

package/src/ui/types/fileManagement.d.ts

@@ -0,0 +1,40 @@
+import type { BaseScreenProps } from './navigation';
+import type { FileMetadata } from '@oxyhq/core';
+export type OnConfirmFileSelection = (files: FileMetadata[]) => void;
+export interface FileManagementScreenProps extends BaseScreenProps {
+    userId?: string;
+    containerWidth?: number;
+    selectMode?: boolean;
+    multiSelect?: boolean;
+    onSelect?: (file: FileMetadata) => void;
+    onConfirmSelection?: OnConfirmFileSelection;
+    initialSelectedIds?: string[];
+    maxSelection?: number;
+    disabledMimeTypes?: string[];
+    /**
+     * What to do after a single selection (non-multiSelect) is made.
+     * 'close' (default) will dismiss the bottom sheet via onClose.
+     * 'back' will navigate back to the previous screen (e.g., return to AccountSettings without closing sheet).
+     * 'none' will keep the picker open (caller can manually close or navigate).
+     */
+    afterSelect?: 'close' | 'back' | 'none';
+    allowUploadInSelectMode?: boolean;
+    /**
+     * Default visibility for uploaded files in this screen
+     * Useful for third-party apps that want files to be public (e.g., GIF selector)
+     */
+    defaultVisibility?: 'private' | 'public' | 'unlisted';
+    /**
+     * Link context for tracking file usage by third-party apps
+     * When provided, selected files will be linked to this entity
+     */
+    linkContext?: {
+        app: string;
+        entityType: string;
+        entityId: string;
+        webhookUrl?: string;
+    };
+}
+export type ViewMode = 'all' | 'photos' | 'videos' | 'documents' | 'audio';
+export type SortBy = 'date' | 'size' | 'name' | 'type';
+export type SortOrder = 'asc' | 'desc';

package/src/ui/types/fileManagement.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/src/ui/types/navigation.d.ts

@@ -0,0 +1,36 @@
+import type { ReactNode, RefObject } from 'react';
+import type { QueryClient } from '@tanstack/react-query';
+import type { RouteName } from '../navigation/routes';
+export type { RouteName };
+export interface StepController {
+    canGoBack: () => boolean;
+    goBack: () => void;
+}
+export interface BaseScreenProps {
+    navigate?: (screen: RouteName, props?: Record<string, unknown>) => void;
+    goBack?: () => void;
+    onClose?: () => void;
+    onAuthenticated?: (payload?: unknown) => void;
+    theme?: 'light' | 'dark' | string;
+    initialStep?: number;
+    stepControllerRef?: RefObject<StepController | null>;
+    onStepChange?: (currentStep: number, totalSteps: number) => void;
+    currentScreen?: RouteName;
+    scrollTo?: (y: number, animated?: boolean) => void;
+    username?: string;
+    email?: string;
+    password?: string;
+    confirmPassword?: string;
+    userProfile?: unknown;
+    [key: string]: unknown;
+}
+export interface OxyProviderProps {
+    oxyServices?: unknown;
+    children?: ReactNode;
+    onAuthStateChange?: (user: unknown) => void;
+    storageKeyPrefix?: string;
+    baseURL?: string;
+    authWebUrl?: string;
+    authRedirectUri?: string;
+    queryClient?: QueryClient;
+}

package/src/ui/types/navigation.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/src/ui/utils/avatarUtils.d.ts

@@ -0,0 +1,22 @@
+import type { OxyServices, User } from '@oxyhq/core';
+import type { QueryClient } from '@tanstack/react-query';
+/**
+ * Refreshes avatar in accountStore with cache-busted URL to force image reload.
+ *
+ * @param sessionId - The session ID for the account to update
+ * @param avatarFileId - The new avatar file ID
+ * @param oxyServices - OxyServices instance to generate download URL
+ */
+export declare function refreshAvatarInStore(sessionId: string, avatarFileId: string, oxyServices: OxyServices): void;
+/**
+ * Updates user profile with avatar and handles all side effects (query invalidation, accountStore update).
+ * This function can be used from within OxyContext provider without requiring useOxy hook.
+ *
+ * @param updates - Profile updates including avatar
+ * @param oxyServices - OxyServices instance
+ * @param activeSessionId - Active session ID
+ * @param queryClient - TanStack Query client
+ * @param syncSession - Optional function to sync session/refresh token when auth errors occur
+ * @returns Promise that resolves with updated user data
+ */
+export declare function updateProfileWithAvatar(updates: Partial<User>, oxyServices: OxyServices, activeSessionId: string | null, queryClient: QueryClient, syncSession?: () => Promise<User>): Promise<User>;

package/src/ui/utils/avatarUtils.js

@@ -0,0 +1,52 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.refreshAvatarInStore = refreshAvatarInStore;
+exports.updateProfileWithAvatar = updateProfileWithAvatar;
+const core_1 = require("@oxyhq/core");
+const accountStore_1 = require("../stores/accountStore");
+const authStore_1 = require("../stores/authStore");
+const queryKeys_1 = require("../hooks/queries/queryKeys");
+/**
+ * Refreshes avatar in accountStore with cache-busted URL to force image reload.
+ *
+ * @param sessionId - The session ID for the account to update
+ * @param avatarFileId - The new avatar file ID
+ * @param oxyServices - OxyServices instance to generate download URL
+ */
+function refreshAvatarInStore(sessionId, avatarFileId, oxyServices) {
+    const { updateAccount } = accountStore_1.useAccountStore.getState();
+    const cacheBustedUrl = `${oxyServices.getFileDownloadUrl(avatarFileId, 'thumb')}?t=${Date.now()}`;
+    updateAccount(sessionId, {
+        avatar: avatarFileId,
+        avatarUrl: cacheBustedUrl,
+    });
+}
+/**
+ * Updates user profile with avatar and handles all side effects (query invalidation, accountStore update).
+ * This function can be used from within OxyContext provider without requiring useOxy hook.
+ *
+ * @param updates - Profile updates including avatar
+ * @param oxyServices - OxyServices instance
+ * @param activeSessionId - Active session ID
+ * @param queryClient - TanStack Query client
+ * @param syncSession - Optional function to sync session/refresh token when auth errors occur
+ * @returns Promise that resolves with updated user data
+ */
+async function updateProfileWithAvatar(updates, oxyServices, activeSessionId, queryClient, syncSession) {
+    const data = await (0, core_1.authenticatedApiCall)(oxyServices, activeSessionId, () => oxyServices.updateProfile(updates), syncSession);
+    // Update cache with server response
+    queryClient.setQueryData(queryKeys_1.queryKeys.accounts.current(), data);
+    if (activeSessionId) {
+        queryClient.setQueryData(queryKeys_1.queryKeys.users.profile(activeSessionId), data);
+    }
+    // Update authStore so frontend components see the changes immediately
+    authStore_1.useAuthStore.getState().setUser(data);
+    // If avatar was updated, refresh accountStore with cache-busted URL
+    if (updates.avatar && activeSessionId) {
+        refreshAvatarInStore(activeSessionId, updates.avatar, oxyServices);
+    }
+    // Invalidate all related queries to refresh everywhere
+    (0, queryKeys_1.invalidateUserQueries)(queryClient);
+    (0, queryKeys_1.invalidateAccountQueries)(queryClient);
+    return data;
+}

package/src/ui/utils/colorUtils.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Color Utility Functions
+ *
+ * Re-exports from shared module for cleaner internal imports.
+ * External consumers should use '@oxyhq/services/shared' directly.
+ *
+ * @module ui/utils/colorUtils
+ */
+export { darkenColor, lightenColor, hexToRgb, rgbToHex, withOpacity, isLightColor, getContrastTextColor, } from '@oxyhq/core';

package/src/ui/utils/colorUtils.js

@@ -0,0 +1,19 @@
+"use strict";
+/**
+ * Color Utility Functions
+ *
+ * Re-exports from shared module for cleaner internal imports.
+ * External consumers should use '@oxyhq/services/shared' directly.
+ *
+ * @module ui/utils/colorUtils
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getContrastTextColor = exports.isLightColor = exports.withOpacity = exports.rgbToHex = exports.hexToRgb = exports.lightenColor = exports.darkenColor = void 0;
+var core_1 = require("@oxyhq/core");
+Object.defineProperty(exports, "darkenColor", { enumerable: true, get: function () { return core_1.darkenColor; } });
+Object.defineProperty(exports, "lightenColor", { enumerable: true, get: function () { return core_1.lightenColor; } });
+Object.defineProperty(exports, "hexToRgb", { enumerable: true, get: function () { return core_1.hexToRgb; } });
+Object.defineProperty(exports, "rgbToHex", { enumerable: true, get: function () { return core_1.rgbToHex; } });
+Object.defineProperty(exports, "withOpacity", { enumerable: true, get: function () { return core_1.withOpacity; } });
+Object.defineProperty(exports, "isLightColor", { enumerable: true, get: function () { return core_1.isLightColor; } });
+Object.defineProperty(exports, "getContrastTextColor", { enumerable: true, get: function () { return core_1.getContrastTextColor; } });

package/src/ui/utils/confirmAction.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Cross-platform confirm dialog. Uses window.confirm on web, Alert.alert on native.
+ * @param message The message to display
+ * @param onConfirm Callback if user confirms
+ */
+export declare function confirmAction(message: string, onConfirm: () => void): void;

package/src/ui/utils/confirmAction.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.confirmAction = confirmAction;
+const react_native_1 = require("react-native");
+/**
+ * Cross-platform confirm dialog. Uses window.confirm on web, Alert.alert on native.
+ * @param message The message to display
+ * @param onConfirm Callback if user confirms
+ */
+function confirmAction(message, onConfirm) {
+    if (react_native_1.Platform.OS === 'web') {
+        if (window.confirm(message)) {
+            onConfirm();
+        }
+    }
+    else {
+        react_native_1.Alert.alert('Confirm', message, [
+            { text: 'Cancel', style: 'cancel' },
+            { text: 'OK', onPress: onConfirm },
+        ]);
+    }
+}

package/src/ui/utils/errorHandlers.d.ts

@@ -0,0 +1,34 @@
+import type { ApiError } from '@oxyhq/core';
+export interface HandleAuthErrorOptions {
+    defaultMessage: string;
+    code: string;
+    status?: number;
+    onError?: (error: ApiError) => void;
+    setAuthError?: (message: string) => void;
+    logger?: (message: string, error?: unknown) => void;
+}
+/**
+ * Determine whether the error represents an invalid session condition.
+ * This centralizes 401 detection across different fetch clients.
+ */
+export declare const isInvalidSessionError: (error: unknown) => boolean;
+/**
+ * Determine whether the error represents a timeout or network error.
+ * These are expected when the device is offline or has poor connectivity.
+ */
+export declare const isTimeoutOrNetworkError: (error: unknown) => boolean;
+/**
+ * Extract a consistent error message from unknown error shapes.
+ *
+ * @param error - The unknown error payload
+ * @param fallbackMessage - Message to return when no concrete message is available
+ */
+export declare const extractErrorMessage: (error: unknown, fallbackMessage?: string) => string;
+/**
+ * Centralized error handler for auth-related operations.
+ *
+ * @param error - Unknown error object
+ * @param options - Error handling configuration
+ * @returns Resolved error message
+ */
+export declare const handleAuthError: (error: unknown, { defaultMessage, code, status, onError, setAuthError, logger, }: HandleAuthErrorOptions) => string;

package/src/ui/utils/errorHandlers.js

@@ -0,0 +1,128 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.handleAuthError = exports.extractErrorMessage = exports.isTimeoutOrNetworkError = exports.isInvalidSessionError = void 0;
+const DEFAULT_INVALID_SESSION_MESSAGES = [
+    'Invalid or expired session',
+    'Session is invalid',
+    'Session not found',
+    'Session expired',
+];
+const isObject = (value) => typeof value === 'object' && value !== null;
+const getResponseStatus = (error) => {
+    if (!isObject(error))
+        return undefined;
+    const response = error.response;
+    return response?.status;
+};
+/**
+ * Determine whether the error represents an invalid session condition.
+ * This centralizes 401 detection across different fetch clients.
+ */
+const isInvalidSessionError = (error) => {
+    const status = getResponseStatus(error);
+    if (status === 401) {
+        return true;
+    }
+    if (!isObject(error)) {
+        return false;
+    }
+    // Check error.status directly (HttpService sets this)
+    if ('status' in error && error.status === 401) {
+        return true;
+    }
+    const normalizedMessage = (0, exports.extractErrorMessage)(error)?.toLowerCase();
+    if (!normalizedMessage) {
+        return false;
+    }
+    // Check for HTTP 401 in message (HttpService creates errors with "HTTP 401:" format)
+    if (normalizedMessage.includes('http 401') || normalizedMessage.includes('401')) {
+        return true;
+    }
+    return DEFAULT_INVALID_SESSION_MESSAGES.some((msg) => normalizedMessage.includes(msg.toLowerCase()));
+};
+exports.isInvalidSessionError = isInvalidSessionError;
+/**
+ * Determine whether the error represents a timeout or network error.
+ * These are expected when the device is offline or has poor connectivity.
+ */
+const isTimeoutOrNetworkError = (error) => {
+    if (!isObject(error) && !(error instanceof Error)) {
+        return false;
+    }
+    const message = (0, exports.extractErrorMessage)(error, '').toLowerCase();
+    const errorCode = isObject(error) && 'code' in error ? error.code : undefined;
+    // Check for timeout/cancelled messages
+    if (message.includes('timeout') ||
+        message.includes('cancelled') ||
+        message.includes('econnaborted') ||
+        message.includes('aborted') ||
+        message.includes('request timeout or cancelled')) {
+        return true;
+    }
+    // Check for timeout/network error codes
+    if (errorCode === 'TIMEOUT' || errorCode === 'NETWORK_ERROR' || errorCode === 'ECONNABORTED') {
+        return true;
+    }
+    // Check for AbortError
+    if (error instanceof Error && error.name === 'AbortError') {
+        return true;
+    }
+    // Check for network-related TypeErrors
+    if (error instanceof TypeError) {
+        const typeErrorMessage = error.message.toLowerCase();
+        if (typeErrorMessage.includes('fetch') ||
+            typeErrorMessage.includes('network') ||
+            typeErrorMessage.includes('failed to fetch')) {
+            return true;
+        }
+    }
+    return false;
+};
+exports.isTimeoutOrNetworkError = isTimeoutOrNetworkError;
+/**
+ * Extract a consistent error message from unknown error shapes.
+ *
+ * @param error - The unknown error payload
+ * @param fallbackMessage - Message to return when no concrete message is available
+ */
+const extractErrorMessage = (error, fallbackMessage = 'Unexpected error') => {
+    if (typeof error === 'string' && error.trim().length > 0) {
+        return error;
+    }
+    if (!isObject(error)) {
+        return fallbackMessage;
+    }
+    const withMessage = error;
+    if (withMessage.message && withMessage.message.trim().length > 0) {
+        return withMessage.message;
+    }
+    const withResponse = error;
+    const responseMessage = withResponse.response?.data?.message ?? withResponse.response?.data?.error;
+    if (typeof responseMessage === 'string' && responseMessage.trim().length > 0) {
+        return responseMessage;
+    }
+    return fallbackMessage;
+};
+exports.extractErrorMessage = extractErrorMessage;
+/**
+ * Centralized error handler for auth-related operations.
+ *
+ * @param error - Unknown error object
+ * @param options - Error handling configuration
+ * @returns Resolved error message
+ */
+const handleAuthError = (error, { defaultMessage, code, status, onError, setAuthError, logger, }) => {
+    const resolvedStatus = status ?? getResponseStatus(error) ?? ((0, exports.isInvalidSessionError)(error) ? 401 : 500);
+    const message = (0, exports.extractErrorMessage)(error, defaultMessage);
+    if (logger) {
+        logger(message, error);
+    }
+    setAuthError?.(message);
+    onError?.({
+        message,
+        code,
+        status: resolvedStatus,
+    });
+    return message;
+};
+exports.handleAuthError = handleAuthError;

package/src/ui/utils/fileManagement.d.ts

@@ -0,0 +1,86 @@
+import type { FileMetadata } from '@oxyhq/core';
+import type { RouteName } from '../navigation/routes';
+/**
+ * Format file size in bytes to human-readable string
+ */
+export declare function formatFileSize(bytes: number): string;
+/**
+ * Get icon name for file based on content type
+ */
+export declare function getFileIcon(contentType: string): string;
+/**
+ * Unified confirmation dialog - uses Alert.alert for all platforms
+ */
+export declare function confirmAction(message: string, title?: string, confirmText?: string, cancelText?: string): Promise<boolean>;
+/**
+ * Convert DocumentPicker asset to File object
+ * Handles both web (native File API) and mobile (URI-based) file sources
+ * Expo 54 compatible - works across all platforms
+ */
+export declare function convertDocumentPickerAssetToFile(doc: {
+    file?: File | Blob;
+    uri?: string;
+    name?: string | null;
+    mimeType?: string | null;
+    size?: number | null;
+}, index: number): Promise<File | null>;
+/**
+ * Helper to safely request a thumbnail variant only for image mime types.
+ * Prevents backend warnings: "Variant thumb not supported for mime application/pdf".
+ *
+ * @param file - File metadata
+ * @param variant - Variant type (default: 'thumb')
+ * @param getFileDownloadUrl - Function to get download URL from oxyServices
+ */
+export declare function getSafeDownloadUrl(file: FileMetadata, variant: string, getFileDownloadUrl: (fileId: string, variant?: string) => string): string;
+/**
+ * Upload file raw - helper function for file uploads
+ */
+export declare function uploadFileRaw(file: File | Blob, userId: string, oxyServices: any, visibility?: 'private' | 'public' | 'unlisted'): Promise<any>;
+/**
+ * Configuration for creating an avatar picker handler
+ */
+export interface AvatarPickerConfig {
+    /** Navigation function from BaseScreenProps */
+    navigate?: (screen: RouteName, props?: Record<string, unknown>) => void;
+    /** OxyServices instance */
+    oxyServices: any;
+    /** TanStack Query mutation for updating profile */
+    updateProfileMutation: {
+        mutateAsync: (updates: {
+            avatar: string;
+        }) => Promise<unknown>;
+    };
+    /** Callback to update local avatar state */
+    onAvatarSelected?: (fileId: string) => void;
+    /** i18n translation function */
+    t: (key: string) => string | undefined;
+    /** Optional context name for logging (e.g., 'AccountSettings', 'WelcomeNewUser') */
+    contextName?: string;
+}
+/**
+ * Creates a reusable avatar picker handler function.
+ *
+ * This function navigates to the FileManagement screen and handles:
+ * - Image file validation
+ * - File visibility update to public
+ * - Profile avatar update via mutation
+ * - Success/error toast notifications
+ *
+ * @example
+ * ```tsx
+ * const openAvatarPicker = createAvatarPickerHandler({
+ *   navigate,
+ *   oxyServices,
+ *   updateProfileMutation,
+ *   onAvatarSelected: setAvatarFileId,
+ *   t,
+ *   contextName: 'AccountSettings'
+ * });
+ *
+ * <TouchableOpacity onPress={openAvatarPicker}>
+ *   <Text>Change Avatar</Text>
+ * </TouchableOpacity>
+ * ```
+ */
+export declare function createAvatarPickerHandler(config: AvatarPickerConfig): () => void;