@oxyhq/services 22.9.0 → 22.11.0

package/src/ui/screens/ManageAccountScreen.tsx

@@ -2,14 +2,13 @@ import type React from 'react';
 import { useCallback, useMemo, useState } from 'react';
 import {
     View,
-    ScrollView,
     StyleSheet,
     ActivityIndicator,
-    RefreshControl,
     Platform,
 } from 'react-native';
 import { Ionicons } from '@expo/vector-icons';
-import { Dialog, toast, useDialogControl } from '@oxyhq/bloom';
+import { toast } from '@oxyhq/bloom';
+import { surfaces } from '@oxyhq/bloom/surfaces';
 import { useTheme } from '@oxyhq/bloom/theme';
 import { Text } from '@oxyhq/bloom/typography';
 import { SettingsListGroup, SettingsListItem } from '@oxyhq/bloom/settings-list';
@@ -20,12 +19,13 @@ import {
     packageInfo,
 } from '@oxyhq/core';
 import type { BaseScreenProps } from '../types/navigation';
-import Header from '../components/Header';
 import ProfileSummaryCard from '../components/ProfileSummaryCard';
 import { SettingsIcon } from '../components/SettingsIcon';
-import DeleteAccountModal from '../components/modals/DeleteAccountModal';
+import { presentDeleteAccount } from '../components/modals/DeleteAccountModal';
+import { presentActionSheet } from '../components/surfaces/ActionSheetSurface';
 import { useOxy } from '../context/OxyContext';
 import { useI18n } from '../hooks/useI18n';
+import { useSurfaceHeader } from '../hooks/useSurfaceHeader';
 import { useCurrentUser } from '../hooks/queries/useAccountQueries';
 import { useUserSubscription } from '../hooks/queries/usePaymentQueries';
 import { useDeviceSessions } from '../hooks/queries/useServicesQueries';
@@ -77,7 +77,7 @@ const formatRelative = (dateString?: string): string => {
  * Replaces AccountOverview + AccountSettings + the per-account half of
  * SessionManagement. Lists ONLY the active user's profile, sessions on this
  * device, and security/destructive actions for THIS account. Multi-account
- * surface lives in the unified `OxyAccountDialog` — keep these concerns separate.
+ * surface lives in the unified `OxyAccountDialogScreen` — keep these concerns separate.
  */
 const ManageAccountScreen: React.FC<BaseScreenProps> = ({
     onClose,
@@ -86,6 +86,8 @@ const ManageAccountScreen: React.FC<BaseScreenProps> = ({
 }) => {
     const bloomTheme = useTheme();
     const { t, locale } = useI18n();
+
+    useSurfaceHeader({ title: t('manageAccount.title') || 'Manage your Oxy Account' });
     const {
         user: contextUser,
         isAuthenticated,
@@ -112,16 +114,8 @@ const ManageAccountScreen: React.FC<BaseScreenProps> = ({
         data: deviceSessions,
         isLoading: deviceSessionsLoading,
         refetch: refetchDeviceSessions,
-        isRefetching: deviceSessionsRefetching,
     } = useDeviceSessions({ enabled: isAuthenticated && !!activeSessionId });
 
-    const signOutDialog = useDialogControl();
-    const signOutAllDevicesDialog = useDialogControl();
-    const removeDeviceDialog = useDialogControl();
-    const downloadDataDialog = useDialogControl();
-    const deleteAccountDialog = useDialogControl();
-
-    const [pendingRemoveDevice, setPendingRemoveDevice] = useState<DeviceSessionRow | null>(null);
     const [removingDeviceId, setRemovingDeviceId] = useState<string | null>(null);
     const [signingOutAllDevices, setSigningOutAllDevices] = useState(false);
     const [signingOut, setSigningOut] = useState(false);
@@ -138,6 +132,16 @@ const ManageAccountScreen: React.FC<BaseScreenProps> = ({
         if (signingOut) {
             return;
         }
+        const confirmed = await surfaces.confirm({
+            title: t('common.actions.signOut') || 'Sign out',
+            message: t('common.confirms.signOut') || 'Are you sure you want to sign out?',
+            confirmLabel: t('common.actions.signOut') || 'Sign out',
+            cancelLabel: t('common.cancel') || 'Cancel',
+            destructive: true,
+        });
+        if (!confirmed) {
+            return;
+        }
         setSigningOut(true);
         try {
             await logout();
@@ -151,37 +155,57 @@ const ManageAccountScreen: React.FC<BaseScreenProps> = ({
         }
     }, [signingOut, logout, t, onClose]);
 
-    const confirmRemoveDevice = useCallback((device: DeviceSessionRow) => {
-        setPendingRemoveDevice(device);
-        removeDeviceDialog.open();
-    }, [removeDeviceDialog]);
-
-    const handleRemoveDevice = useCallback(async () => {
-        if (!pendingRemoveDevice || !activeSessionId) {
+    const confirmRemoveDevice = useCallback(async (device: DeviceSessionRow) => {
+        if (!activeSessionId) {
+            return;
+        }
+        const confirmed = await surfaces.confirm({
+            title: t('manageAccount.confirms.removeDeviceTitle') || 'Remove device',
+            message:
+                t('manageAccount.confirms.removeDevice', { name: device.deviceName })
+                || `Sign out from "${device.deviceName}"?`,
+            confirmLabel: t('common.remove') || 'Remove',
+            cancelLabel: t('common.cancel') || 'Cancel',
+            destructive: true,
+        });
+        if (!confirmed) {
             return;
         }
-        const target = pendingRemoveDevice;
-        setRemovingDeviceId(target.sessionId);
+        setRemovingDeviceId(device.sessionId);
         try {
-            await oxyServices.logoutSession(activeSessionId, target.sessionId);
+            await oxyServices.logoutSession(activeSessionId, device.sessionId);
             await refetchDeviceSessions();
             toast.success(
-                t('manageAccount.toasts.deviceRemoved', { name: target.deviceName })
-                || `Signed out from ${target.deviceName}`,
+                t('manageAccount.toasts.deviceRemoved', { name: device.deviceName })
+                || `Signed out from ${device.deviceName}`,
             );
         } catch (error) {
             loggerUtil.warn('Remove device failed', { component: 'ManageAccountScreen' }, error as unknown);
             toast.error(t('manageAccount.toasts.deviceRemoveFailed') || 'Failed to remove device');
         } finally {
             setRemovingDeviceId(null);
-            setPendingRemoveDevice(null);
         }
-    }, [pendingRemoveDevice, activeSessionId, oxyServices, refetchDeviceSessions, t]);
+    }, [activeSessionId, oxyServices, refetchDeviceSessions, t]);
 
     const handleSignOutAllDevices = useCallback(async () => {
         if (!activeSessionId || signingOutAllDevices) {
             return;
         }
+        const otherDeviceCount = ((deviceSessions ?? []) as DeviceSessionRow[]).filter(
+            (device) => !device.isCurrent,
+        ).length;
+        const confirmed = await surfaces.confirm({
+            title: t('manageAccount.confirms.signOutAllDevicesTitle') || 'Sign out of all other devices',
+            message:
+                t('manageAccount.confirms.signOutAllDevices', { count: otherDeviceCount })
+                || `End ${otherDeviceCount} other device session(s)? This won't sign you out here.`,
+            confirmLabel: t('common.actions.signOut') || 'Sign out',
+            cancelLabel: t('common.cancel') || 'Cancel',
+            destructive: true,
+        });
+        if (!confirmed) {
+            return;
+        }
         setSigningOutAllDevices(true);
         try {
             await oxyServices.logoutAllDeviceSessions(activeSessionId);
@@ -199,7 +223,7 @@ const ManageAccountScreen: React.FC<BaseScreenProps> = ({
         } finally {
             setSigningOutAllDevices(false);
         }
-    }, [activeSessionId, signingOutAllDevices, oxyServices, refetchDeviceSessions, t]);
+    }, [activeSessionId, signingOutAllDevices, deviceSessions, oxyServices, refetchDeviceSessions, t]);
 
     const performDownload = useCallback(
         async (format: 'json' | 'csv') => {
@@ -245,6 +269,9 @@ const ManageAccountScreen: React.FC<BaseScreenProps> = ({
         [oxyServices, user, t],
     );
 
+    // Runs the actual deletion from inside the delete-account surface; it throws
+    // on failure so the surface can surface the error and stay open. Sign-out +
+    // close happen in `handleDeleteAccount` once the surface resolves `true`.
     const handleConfirmDelete = useCallback(
         async (confirmText: string) => {
             if (!user) {
@@ -258,62 +285,70 @@ const ManageAccountScreen: React.FC<BaseScreenProps> = ({
                 t('accountOverview.items.deleteAccount.success')
                 || 'Account deleted successfully',
             );
-            deleteAccountDialog.close();
-            await logout();
-            onClose?.();
         },
-        [oxyServices, user, logout, onClose, t, deleteAccountDialog],
+        [oxyServices, user, t],
     );
 
-    const handleDownloadData = useCallback(() => {
+    const handleDownloadData = useCallback(async () => {
         if (!user) {
             toast.error(
                 t('accountOverview.items.downloadData.error') || 'Service not available',
             );
             return;
         }
-        downloadDataDialog.open();
-    }, [user, t, downloadDataDialog]);
+        const format = await presentActionSheet<'json' | 'csv'>({
+            title: t('accountOverview.items.downloadData.confirmTitle') || 'Download account data',
+            message:
+                t('accountOverview.items.downloadData.confirmMessage')
+                || 'Choose the format for your account data export:',
+            options: [
+                { label: 'JSON', value: 'json' },
+                { label: 'CSV', value: 'csv' },
+            ],
+            cancelLabel: t('common.cancel') || 'Cancel',
+        });
+        if (format) {
+            await performDownload(format);
+        }
+    }, [user, t, performDownload]);
 
-    const handleDeleteAccount = useCallback(() => {
+    const handleDeleteAccount = useCallback(async () => {
         if (!user) {
             toast.error(
                 t('accountOverview.items.deleteAccount.error') || 'User not available',
             );
             return;
         }
-        deleteAccountDialog.open();
-    }, [user, t, deleteAccountDialog]);
+        const deleted = await presentDeleteAccount({
+            username: user.username || '',
+            onDelete: handleConfirmDelete,
+            t,
+        });
+        if (deleted) {
+            await logout();
+            onClose?.();
+        }
+    }, [user, t, handleConfirmDelete, logout, onClose]);
 
     if (!isAuthenticated) {
         return (
-            <View className="flex-1 bg-bg">
-                <Header
-                    title={t('manageAccount.title') || 'Manage your Oxy Account'}
-                    onBack={goBack || onClose}
-                    elevation="subtle"
-                />
-                <View style={styles.center}>
+            <>
+                <View className="items-center py-space-40">
                     <Text className="text-text font-medium text-base">
                         {t('common.status.notSignedIn') || 'Not signed in'}
                     </Text>
                 </View>
-            </View>
+            </>
         );
     }
 
     if (userLoading && !user) {
         return (
-            <View className="flex-1 bg-bg">
-                <Header
-                    title={t('manageAccount.title') || 'Manage your Oxy Account'}
-                    onBack={goBack || onClose}
-                    elevation="subtle"
-                />
-                <View style={styles.center}>
+            <>
+                <View className="items-center py-space-40">
                     <ActivityIndicator color={bloomTheme.colors.primary} size="large" />
                 </View>
-            </View>
+            </>
         );
     }
 
@@ -321,23 +356,8 @@ const ManageAccountScreen: React.FC<BaseScreenProps> = ({
     const otherDevices = deviceRows.filter((d) => !d.isCurrent);
 
     return (
-        <View className="flex-1 bg-bg">
-            <Header
-                title={t('manageAccount.title') || 'Manage your Oxy Account'}
-                onBack={goBack || onClose}
-                elevation="subtle"
-            />
-            <ScrollView
-                className="flex-1"
-                contentContainerClassName="px-screen-margin pb-space-24"
-                refreshControl={
-                    <RefreshControl
-                        refreshing={deviceSessionsRefetching}
-                        onRefresh={refetchDeviceSessions}
-                        tintColor={bloomTheme.colors.primary}
-                    />
-                }
-            >
+        <>
+            <View className="px-screen-margin pb-space-24">
                 {/* Profile card */}
                 <ProfileSummaryCard
                     displayName={displayName}
@@ -517,7 +537,7 @@ const ManageAccountScreen: React.FC<BaseScreenProps> = ({
                                 })
                                 || `End ${otherDevices.length} other device session(s)`
                             }
-                            onPress={() => signOutAllDevicesDialog.open()}
+                            onPress={handleSignOutAllDevices}
                             destructive
                             showChevron={false}
                             disabled={signingOutAllDevices}
@@ -875,7 +895,7 @@ const ManageAccountScreen: React.FC<BaseScreenProps> = ({
                             t('manageAccount.signOutOfThisAccount')
                             || 'Sign out of this account'
                         }
-                        onPress={() => signOutDialog.open()}
+                        onPress={handleSignOut}
                         destructive
                         showChevron={false}
                         disabled={signingOut}
@@ -898,92 +918,8 @@ const ManageAccountScreen: React.FC<BaseScreenProps> = ({
                 </View>
 
                 <View style={styles.footerSpacer} />
-            </ScrollView>
-
-            <Dialog
-                control={signOutDialog}
-                title={t('common.actions.signOut') || 'Sign out'}
-                description={
-                    t('common.confirms.signOut')
-                    || 'Are you sure you want to sign out?'
-                }
-                actions={[
-                    {
-                        label: t('common.actions.signOut') || 'Sign out',
-                        color: 'destructive',
-                        onPress: handleSignOut,
-                    },
-                    { label: t('common.cancel') || 'Cancel', color: 'cancel' },
-                ]}
-            />
-            <Dialog
-                control={signOutAllDevicesDialog}
-                title={
-                    t('manageAccount.confirms.signOutAllDevicesTitle')
-                    || 'Sign out of all other devices'
-                }
-                description={
-                    t('manageAccount.confirms.signOutAllDevices', {
-                        count: otherDevices.length,
-                    })
-                    || `End ${otherDevices.length} other device session(s)? This won't sign you out here.`
-                }
-                actions={[
-                    {
-                        label: t('common.actions.signOut') || 'Sign out',
-                        color: 'destructive',
-                        onPress: handleSignOutAllDevices,
-                    },
-                    { label: t('common.cancel') || 'Cancel', color: 'cancel' },
-                ]}
-            />
-            <Dialog
-                control={removeDeviceDialog}
-                title={
-                    t('manageAccount.confirms.removeDeviceTitle') || 'Remove device'
-                }
-                description={
-                    pendingRemoveDevice
-                        ? (t('manageAccount.confirms.removeDevice', {
-                            name: pendingRemoveDevice.deviceName,
-                        })
-                            || `Sign out from "${pendingRemoveDevice.deviceName}"?`)
-                        : ''
-                }
-                actions={[
-                    {
-                        label: t('common.remove') || 'Remove',
-                        color: 'destructive',
-                        onPress: handleRemoveDevice,
-                    },
-                    { label: t('common.cancel') || 'Cancel', color: 'cancel' },
-                ]}
-            />
-            <Dialog
-                control={downloadDataDialog}
-                title={
-                    t('accountOverview.items.downloadData.confirmTitle')
-                    || 'Download account data'
-                }
-                description={
-                    t('accountOverview.items.downloadData.confirmMessage')
-                    || 'Choose the format for your account data export:'
-                }
-                actions={[
-                    { label: 'JSON', onPress: () => performDownload('json') },
-                    { label: 'CSV', onPress: () => performDownload('csv') },
-                    { label: t('common.cancel') || 'Cancel', color: 'cancel' },
-                ]}
-            />
-            {user ? (
-                <DeleteAccountModal
-                    control={deleteAccountDialog}
-                    username={user.username || ''}
-                    onDelete={handleConfirmDelete}
-                    t={t}
-                />
-            ) : null}
-        </View>
+            </View>
+        </>
     );
 };
 
@@ -992,11 +928,6 @@ const ManageAccountScreen: React.FC<BaseScreenProps> = ({
 // spacing, radius, and typography roles live on Bloom components + NativeWind
 // token classes.
 const styles = StyleSheet.create({
-    center: {
-        flex: 1,
-        alignItems: 'center',
-        justifyContent: 'center',
-    },
     footerSpacer: {
         height: 24,
     },

package/src/ui/screens/NotificationsScreen.tsx

@@ -1,13 +1,13 @@
 import React, { useCallback, useMemo } from 'react';
-import { View, ScrollView } from 'react-native';
+import { View } from 'react-native';
 import { SettingsListGroup, SettingsListItem } from '@oxyhq/bloom/settings-list';
 import { Switch } from '@oxyhq/bloom/switch';
 import { useTheme } from '@oxyhq/bloom/theme';
 import type { NotificationPreferences } from '@oxyhq/core';
 import type { BaseScreenProps } from '../types/navigation';
-import Header from '../components/Header';
 import { SettingsIcon } from '../components/SettingsIcon';
 import { useI18n } from '../hooks/useI18n';
+import { useSurfaceHeader } from '../hooks/useSurfaceHeader';
 import { useOxy } from '../context/OxyContext';
 import { useCurrentUser } from '../hooks/queries/useAccountQueries';
 import { useUpdateNotificationPreferences } from '../hooks/mutations/useAccountMutations';
@@ -38,6 +38,8 @@ const DEFAULT_VALUES: NotificationToggleValues = {
 const NotificationsScreen: React.FC<BaseScreenProps> = ({ onClose, goBack }) => {
     const bloomTheme = useTheme();
     const { t } = useI18n();
+
+    useSurfaceHeader({ title: t('notifications.title') || 'Notifications' });
     const { isAuthenticated } = useOxy();
     const { data: user } = useCurrentUser({ enabled: isAuthenticated });
     const updateMutation = useUpdateNotificationPreferences();
@@ -69,15 +71,8 @@ const NotificationsScreen: React.FC<BaseScreenProps> = ({ onClose, goBack }) =>
     const isSaving = savingKeys.size > 0;
 
     return (
-        <View className="flex-1 bg-bg">
-            <Header
-                title={t('notifications.title') || 'Notifications'}
-                onBack={goBack || onClose}
-                variant="minimal"
-                elevation="subtle"
-            />
-            <ScrollView className="flex-1">
-                <View className="px-screen-margin pb-space-24">
+        <>
+            <View className="px-screen-margin pb-space-24">
                     <SettingsListGroup
                         title={t('notifications.sections.channels') || 'Channels'}
                     >
@@ -182,8 +177,7 @@ const NotificationsScreen: React.FC<BaseScreenProps> = ({ onClose, goBack }) =>
                         />
                     </SettingsListGroup>
                 </View>
-            </ScrollView>
-        </View>
+        </>
     );
 };
 

package/src/ui/screens/PaymentGatewayScreen.tsx

@@ -2,7 +2,6 @@ import type React from 'react';
 import { useState, useRef, useMemo, useCallback } from 'react';
 import {
     View,
-    ScrollView,
     Animated,
     Platform,
     useWindowDimensions,
@@ -179,7 +178,7 @@ const PaymentGatewayScreen: React.FC<PaymentGatewayScreenProps> = (props) => {
     // Validate amount
     if (!amount || Number.isNaN(Number(amount)) || Number(amount) <= 0) {
         return (
-            <View className="flex-1 bg-bg items-center justify-center px-screen-margin gap-space-24">
+            <View className="items-center justify-center px-screen-margin gap-space-24 py-space-40">
                 <Ionicons name="alert-circle-outline" size={48} color={bloomTheme.colors.error} />
                 <H4 className="text-text text-center">
                     {t('payment.errors.invalidAmount')}
@@ -278,14 +277,8 @@ const PaymentGatewayScreen: React.FC<PaymentGatewayScreenProps> = (props) => {
     };
 
     return (
-        <View className="flex-1 bg-bg">
-            <ScrollView
-                className="flex-1"
-                contentContainerClassName="p-space-16"
-                showsVerticalScrollIndicator={false}
-            >
-                {renderCurrentStep()}
-            </ScrollView>
+        <View className="p-space-16">
+            {renderCurrentStep()}
         </View>
     );
 };

package/src/ui/screens/PreferencesScreen.tsx

@@ -1,14 +1,14 @@
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
-import { AccessibilityInfo, Platform, View, ScrollView } from 'react-native';
+import { AccessibilityInfo, Platform, View } from 'react-native';
 import { SettingsListGroup, SettingsListItem } from '@oxyhq/bloom/settings-list';
 import { Switch } from '@oxyhq/bloom/switch';
 import { useTheme } from '@oxyhq/bloom/theme';
 import type { UserPreferences } from '@oxyhq/core';
 import { getNativeLanguageName } from '@oxyhq/core';
 import type { BaseScreenProps } from '../types/navigation';
-import Header from '../components/Header';
 import { SettingsIcon } from '../components/SettingsIcon';
 import { useI18n } from '../hooks/useI18n';
+import { useSurfaceHeader } from '../hooks/useSurfaceHeader';
 import { useOxy } from '../context/OxyContext';
 import { useCurrentUser } from '../hooks/queries/useAccountQueries';
 import { useUpdateUserPreferences } from '../hooks/mutations/useAccountMutations';
@@ -44,6 +44,8 @@ const PreferencesScreen: React.FC<BaseScreenProps> = ({
 }) => {
     const bloomTheme = useTheme();
     const { t, locale } = useI18n();
+
+    useSurfaceHeader({ title: t('preferences.title') || 'Preferences' });
     const { isAuthenticated } = useOxy();
     const { data: user } = useCurrentUser({ enabled: isAuthenticated });
     const updateMutation = useUpdateUserPreferences();
@@ -120,15 +122,8 @@ const PreferencesScreen: React.FC<BaseScreenProps> = ({
     const isSaving = updateMutation.isPending;
 
     return (
-        <View className="flex-1 bg-bg">
-            <Header
-                title={t('preferences.title') || 'Preferences'}
-                onBack={goBack || onClose}
-                variant="minimal"
-                elevation="subtle"
-            />
-            <ScrollView className="flex-1">
-                <View className="px-screen-margin pb-space-24">
+        <>
+            <View className="px-screen-margin pb-space-24">
                     <SettingsListGroup
                         title={t('preferences.sections.appearance') || 'Appearance'}
                     >
@@ -233,8 +228,7 @@ const PreferencesScreen: React.FC<BaseScreenProps> = ({
                         </SettingsListGroup>
                     )}
                 </View>
-            </ScrollView>
-        </View>
+        </>
     );
 };