@oxyhq/services 22.9.0 → 22.10.0

package/src/ui/screens/AccountMembersScreen.tsx

@@ -2,26 +2,23 @@ import type React from 'react';
 import { useCallback, useMemo, useState } from 'react';
 import {
   View,
-  ScrollView,
   TouchableOpacity,
   ActivityIndicator,
-  Platform,
-  KeyboardAvoidingView,
 } from 'react-native';
 import { Ionicons } from '@expo/vector-icons';
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
-import { toast, Dialog, useDialogControl } from '@oxyhq/bloom';
+import { toast } from '@oxyhq/bloom';
+import { surfaces } from '@oxyhq/bloom/surfaces';
 import { useTheme } from '@oxyhq/bloom/theme';
-import { H1, Text } from '@oxyhq/bloom/typography';
+import { Text } from '@oxyhq/bloom/typography';
 import { Button } from '@oxyhq/bloom/button';
 import { TextField, TextFieldInput } from '@oxyhq/bloom/text-field';
 import { Divider } from '@oxyhq/bloom/divider';
 import type { AccountMember, AccountRole } from '@oxyhq/core';
-import { logger as loggerUtil } from '@oxyhq/core';
 import type { BaseScreenProps } from '../types/navigation';
-import Header from '../components/Header';
 import { useOxy } from '../context/OxyContext';
 import { useI18n } from '../hooks/useI18n';
+import { useSurfaceHeader } from '../hooks/useSurfaceHeader';
 
 /** Roles assignable via invite / role change — everything except `owner`. */
 type AssignableRole = Exclude<AccountRole, 'owner'>;
@@ -45,6 +42,11 @@ const AccountMembersScreen: React.FC<BaseScreenProps> = ({ onClose, goBack, acco
   const bloomTheme = useTheme();
   const colors = bloomTheme.colors;
   const { t } = useI18n();
+
+  useSurfaceHeader({
+    title: t('accounts.members.title') || 'Members',
+    subtitle: t('accounts.members.subtitle') || 'People with access to this account.',
+  });
   const { oxyServices, canUsePrivateApi } = useOxy();
   const queryClient = useQueryClient();
 
@@ -155,11 +157,6 @@ const AccountMembersScreen: React.FC<BaseScreenProps> = ({ onClose, goBack, acco
     },
   });
 
-  const [memberToRemove, setMemberToRemove] = useState<AccountMember | null>(null);
-  const [memberToPromote, setMemberToPromote] = useState<AccountMember | null>(null);
-  const removeDialog = useDialogControl();
-  const transferDialog = useDialogControl();
-
   const handleInvite = useCallback(() => {
     const usernameOrEmail = inviteIdentifier.trim();
     if (!usernameOrEmail) {
@@ -177,53 +174,46 @@ const AccountMembersScreen: React.FC<BaseScreenProps> = ({ onClose, goBack, acco
     updateMutation.mutate({ memberId: member._id, role });
   }, [updateMutation]);
 
-  const confirmRemove = useCallback((member: AccountMember) => {
-    setMemberToRemove(member);
-    removeDialog.open();
-  }, [removeDialog]);
-
-  const confirmTransfer = useCallback((member: AccountMember) => {
-    setMemberToPromote(member);
-    transferDialog.open();
-  }, [transferDialog]);
-
-  const title = t('accounts.members.title') || 'Members';
+  const confirmRemove = useCallback(async (member: AccountMember) => {
+    const confirmed = await surfaces.confirm({
+      title: t('accounts.members.removeConfirm.title') || 'Remove member',
+      message:
+        t('accounts.members.removeConfirm.description')
+        || 'Remove this member from the account? They will lose all access.',
+      confirmLabel: t('accounts.members.actions.remove') || 'Remove',
+      cancelLabel: t('common.cancel') || 'Cancel',
+      destructive: true,
+    });
+    if (confirmed) removeMutation.mutate(member._id);
+  }, [removeMutation, t]);
+
+  const confirmTransfer = useCallback(async (member: AccountMember) => {
+    const confirmed = await surfaces.confirm({
+      title: t('accounts.members.transferConfirm.title') || 'Transfer ownership',
+      message:
+        t('accounts.members.transferConfirm.description')
+        || 'Transfer ownership of this account to this member? You will be demoted to admin. This cannot be undone.',
+      confirmLabel: t('accounts.members.actions.transfer') || 'Transfer ownership',
+      cancelLabel: t('common.cancel') || 'Cancel',
+      destructive: true,
+    });
+    if (confirmed) transferMutation.mutate(member.memberUserId);
+  }, [transferMutation, t]);
 
   if (!id) {
     return (
-      <View className="flex-1 bg-bg">
-        <Header title={title} onBack={goBack} onClose={onClose} showBackButton showCloseButton elevation="subtle" />
-        <View className="flex-1 items-center justify-center px-screen-margin">
+      <>
+        <View className="items-center justify-center px-screen-margin py-space-40">
           <Text className="text-body font-body text-text-secondary text-center">
             {t('accounts.members.errors.missingAccount') || 'No account selected.'}
           </Text>
         </View>
-      </View>
+      </>
     );
   }
 
   return (
-    <View className="flex-1 bg-bg">
-      <Header title={title} onBack={goBack} onClose={onClose} showBackButton showCloseButton elevation="subtle" />
-
-      <KeyboardAvoidingView
-        className="flex-1"
-        behavior={Platform.OS === 'ios' ? 'padding' : undefined}
-        keyboardVerticalOffset={Platform.OS === 'ios' ? 88 : 0}
-      >
-        <ScrollView
-          className="flex-1"
-          contentContainerClassName="px-screen-margin pt-space-24 pb-space-32 gap-space-24"
-          showsVerticalScrollIndicator={false}
-          keyboardShouldPersistTaps="handled"
-        >
-          <View className="gap-space-8">
-            <H1 className="text-headerBold font-headerBold text-text">{title}</H1>
-            <Text className="text-body font-body text-text-secondary">
-              {t('accounts.members.subtitle') || 'People with access to this account.'}
-            </Text>
-          </View>
-
+      <View className="px-screen-margin pt-space-16 pb-space-32 gap-space-24">
           {!accountQuery.isLoading && !canRead ? (
             <Text className="text-body font-body text-text-secondary text-center py-space-24">
               {t('accounts.members.errors.noPermission') || 'You do not have permission to view members.'}
@@ -423,58 +413,7 @@ const AccountMembersScreen: React.FC<BaseScreenProps> = ({ onClose, goBack, acco
               )}
             </View>
           ) : null}
-        </ScrollView>
-      </KeyboardAvoidingView>
-
-      <Dialog
-        control={removeDialog}
-        title={t('accounts.members.removeConfirm.title') || 'Remove member'}
-        description={
-          t('accounts.members.removeConfirm.description')
-          || 'Remove this member from the account? They will lose all access.'
-        }
-        actions={[
-          {
-            label: t('accounts.members.actions.remove') || 'Remove',
-            color: 'destructive',
-            onPress: () => {
-              const target = memberToRemove;
-              setMemberToRemove(null);
-              if (target) {
-                removeMutation.mutate(target._id);
-              } else {
-                loggerUtil.debug('Remove confirmed with no pending member', { component: 'AccountMembersScreen' });
-              }
-            },
-          },
-          { label: t('common.cancel') || 'Cancel', color: 'cancel' },
-        ]}
-      />
-      <Dialog
-        control={transferDialog}
-        title={t('accounts.members.transferConfirm.title') || 'Transfer ownership'}
-        description={
-          t('accounts.members.transferConfirm.description')
-          || 'Transfer ownership of this account to this member? You will be demoted to admin. This cannot be undone.'
-        }
-        actions={[
-          {
-            label: t('accounts.members.actions.transfer') || 'Transfer ownership',
-            color: 'destructive',
-            onPress: () => {
-              const target = memberToPromote;
-              setMemberToPromote(null);
-              if (target) {
-                transferMutation.mutate(target.memberUserId);
-              } else {
-                loggerUtil.debug('Transfer confirmed with no pending member', { component: 'AccountMembersScreen' });
-              }
-            },
-          },
-          { label: t('common.cancel') || 'Cancel', color: 'cancel' },
-        ]}
-      />
-    </View>
+      </View>
   );
 };
 

package/src/ui/screens/AccountSettingsScreen.tsx

@@ -2,24 +2,22 @@ import type React from 'react';
 import { useCallback, useMemo, useState } from 'react';
 import {
   View,
-  ScrollView,
   ActivityIndicator,
-  Platform,
-  KeyboardAvoidingView,
 } from 'react-native';
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
-import { toast, Dialog, useDialogControl } from '@oxyhq/bloom';
+import { toast } from '@oxyhq/bloom';
+import { surfaces } from '@oxyhq/bloom/surfaces';
 import { useTheme } from '@oxyhq/bloom/theme';
-import { H1, Text } from '@oxyhq/bloom/typography';
+import { Text } from '@oxyhq/bloom/typography';
 import { Button } from '@oxyhq/bloom/button';
 import { TextField, TextFieldInput } from '@oxyhq/bloom/text-field';
 import { SettingsListGroup, SettingsListItem } from '@oxyhq/bloom/settings-list';
 import type { UpdateAccountInput } from '@oxyhq/core';
 import type { BaseScreenProps } from '../types/navigation';
-import Header from '../components/Header';
 import { SettingsIcon } from '../components/SettingsIcon';
 import { useOxy } from '../context/OxyContext';
 import { useI18n } from '../hooks/useI18n';
+import { useSurfaceHeader } from '../hooks/useSurfaceHeader';
 
 const DISPLAY_NAME_MAX = 50;
 const BIO_MAX = 160;
@@ -38,6 +36,7 @@ const AccountSettingsScreen: React.FC<BaseScreenProps> = ({ onClose, goBack, nav
   const bloomTheme = useTheme();
   const colors = bloomTheme.colors;
   const { t } = useI18n();
+
   const { oxyServices, canUsePrivateApi, user, accounts, switchToAccount } = useOxy();
   const queryClient = useQueryClient();
 
@@ -109,7 +108,18 @@ const AccountSettingsScreen: React.FC<BaseScreenProps> = ({ onClose, goBack, nav
     },
   });
 
-  const archiveDialog = useDialogControl();
+  const handleArchive = useCallback(async () => {
+    const confirmed = await surfaces.confirm({
+      title: t('accounts.settings.archive.confirmTitle') || 'Archive account',
+      message:
+        t('accounts.settings.archive.confirmDescription')
+        || 'Archive this account? It will be deactivated and its members will lose access.',
+      confirmLabel: t('accounts.settings.archive.title') || 'Archive account',
+      cancelLabel: t('common.cancel') || 'Cancel',
+      destructive: true,
+    });
+    if (confirmed) archiveMutation.mutate();
+  }, [archiveMutation, t]);
 
   const handleSave = useCallback(() => {
     const trimmed = displayName.trim();
@@ -129,49 +139,35 @@ const AccountSettingsScreen: React.FC<BaseScreenProps> = ({ onClose, goBack, nav
     return username ? `@${username}` : '';
   }, [node?.account?.username]);
 
+  // The nav large title is the account's handle once loaded (falls back to the
+  // generic screen title before the account resolves).
+  useSurfaceHeader({
+    title: accountHandle || title,
+    subtitle: t('accounts.settings.subtitle') || 'Manage this account’s profile, members, and access.',
+  });
+
   if (!id) {
     return (
-      <View className="flex-1 bg-bg">
-        <Header title={title} onBack={goBack} onClose={onClose} showBackButton showCloseButton elevation="subtle" />
-        <View className="flex-1 items-center justify-center px-screen-margin">
+      <>
+        <View className="items-center justify-center px-screen-margin py-space-40">
           <Text className="text-body font-body text-text-secondary text-center">
             {t('accounts.settings.errors.missingAccount') || 'No account selected.'}
           </Text>
         </View>
-      </View>
+      </>
     );
   }
 
   return (
-    <View className="flex-1 bg-bg">
-      <Header title={title} onBack={goBack} onClose={onClose} showBackButton showCloseButton elevation="subtle" />
+    <>
 
-      <KeyboardAvoidingView
-        className="flex-1"
-        behavior={Platform.OS === 'ios' ? 'padding' : undefined}
-        keyboardVerticalOffset={Platform.OS === 'ios' ? 88 : 0}
-      >
-        <ScrollView
-          className="flex-1"
-          contentContainerClassName="px-screen-margin pt-space-24 pb-space-32 gap-space-24"
-          showsVerticalScrollIndicator={false}
-          keyboardShouldPersistTaps="handled"
-        >
+      <View className="px-screen-margin pt-space-24 pb-space-32 gap-space-24">
           {accountQuery.isLoading ? (
             <View className="items-center py-space-32">
               <ActivityIndicator color={colors.primary} />
             </View>
           ) : (
             <>
-              <View className="gap-space-8">
-                <H1 className="text-headerBold font-headerBold text-text" numberOfLines={1}>
-                  {accountHandle || title}
-                </H1>
-                <Text className="text-body font-body text-text-secondary">
-                  {t('accounts.settings.subtitle') || 'Manage this account’s profile, members, and access.'}
-                </Text>
-              </View>
-
               {/* Profile edit */}
               {canUpdate ? (
                 <View className="gap-space-16 p-space-16 rounded-radius-20 bg-fill">
@@ -233,32 +229,14 @@ const AccountSettingsScreen: React.FC<BaseScreenProps> = ({ onClose, goBack, nav
                     icon={<SettingsIcon name="archive-arrow-down" color={colors.error} />}
                     title={t('accounts.settings.archive.title') || 'Archive account'}
                     description={t('accounts.settings.archive.subtitle') || 'Deactivate this account'}
-                    onPress={() => archiveDialog.open()}
+                    onPress={handleArchive}
                   />
                 </SettingsListGroup>
               ) : null}
             </>
           )}
-        </ScrollView>
-      </KeyboardAvoidingView>
-
-      <Dialog
-        control={archiveDialog}
-        title={t('accounts.settings.archive.confirmTitle') || 'Archive account'}
-        description={
-          t('accounts.settings.archive.confirmDescription')
-          || 'Archive this account? It will be deactivated and its members will lose access.'
-        }
-        actions={[
-          {
-            label: t('accounts.settings.archive.title') || 'Archive account',
-            color: 'destructive',
-            onPress: () => archiveMutation.mutate(),
-          },
-          { label: t('common.cancel') || 'Cancel', color: 'cancel' },
-        ]}
-      />
-    </View>
+      </View>
+    </>
   );
 };
 

package/src/ui/screens/AccountVerificationScreen.tsx

@@ -1,13 +1,11 @@
 import React, { useState, useCallback } from 'react';
 import {
     View,
-    ScrollView,
     StyleSheet,
-    Platform,
-    KeyboardAvoidingView,
 } from 'react-native';
 import type { BaseScreenProps } from '../types/navigation';
-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 { H4, Text } from '@oxyhq/bloom/typography';
 import { Button } from '@oxyhq/bloom/button';
@@ -15,8 +13,8 @@ import { TextField, TextFieldInput } from '@oxyhq/bloom/text-field';
 import { IconCircle } from '@oxyhq/bloom/icon-circle';
 import { BenefitList, BenefitRow } from '@oxyhq/bloom/benefit-list';
 import * as Icons from '@oxyhq/bloom/icons';
-import Header from '../components/Header';
 import { useI18n } from '../hooks/useI18n';
+import { useSurfaceHeader } from '../hooks/useSurfaceHeader';
 import { useOxy } from '../context/OxyContext';
 
 const AccountVerificationScreen: React.FC<BaseScreenProps> = ({
@@ -26,21 +24,13 @@ const AccountVerificationScreen: React.FC<BaseScreenProps> = ({
     // Use useOxy() hook for OxyContext values
     const { oxyServices } = useOxy();
     const { t } = useI18n();
+
+    useSurfaceHeader({ title: t('accountVerification.title') || 'Account Verification' });
     const bloomTheme = useTheme();
 
     const [reason, setReason] = useState('');
     const [evidence, setEvidence] = useState('');
     const [isSubmitting, setIsSubmitting] = useState(false);
-    const [successMessage, setSuccessMessage] = useState('');
-
-    // Dialog controls
-    const successDialog = useDialogControl();
-
-    const handleSuccessAcknowledged = useCallback(() => {
-        setReason('');
-        setEvidence('');
-        goBack?.();
-    }, [goBack]);
 
     const handleSubmit = useCallback(async () => {
         if (!reason.trim()) {
@@ -60,10 +50,18 @@ const AccountVerificationScreen: React.FC<BaseScreenProps> = ({
                 evidence.trim() || undefined
             );
 
-            setSuccessMessage(
-                t('accountVerification.successMessage') || `Your verification request has been submitted. Request ID: ${result.requestId}`
-            );
-            successDialog.open();
+            // Acknowledgement surface — dismiss (button OR backdrop) resets and
+            // returns; there is no negative action.
+            await surfaces.confirm({
+                title: t('accountVerification.successTitle') || 'Request Submitted',
+                message:
+                    t('accountVerification.successMessage') || `Your verification request has been submitted. Request ID: ${result.requestId}`,
+                confirmLabel: t('accountVerification.ok') || 'OK',
+                hideCancel: true,
+            });
+            setReason('');
+            setEvidence('');
+            goBack?.();
         } catch (error: unknown) {
             if (__DEV__) {
                 console.error('Failed to submit verification request:', error);
@@ -74,28 +72,14 @@ const AccountVerificationScreen: React.FC<BaseScreenProps> = ({
         } finally {
             setIsSubmitting(false);
         }
-    }, [reason, evidence, oxyServices, t, successDialog]);
+    }, [reason, evidence, oxyServices, t, goBack]);
 
     const canSubmit = Boolean(reason.trim()) && !isSubmitting;
 
     return (
-        <KeyboardAvoidingView
-            className="flex-1 bg-bg"
-            behavior={Platform.OS === 'ios' ? 'padding' : undefined}
-        >
-            <Header
-                title={t('accountVerification.title') || 'Account Verification'}
-                onBack={goBack || onClose}
-                variant="minimal"
-                elevation="subtle"
-            />
-
-            <ScrollView
-                className="flex-1 px-screen-margin"
-                showsVerticalScrollIndicator={false}
-                contentContainerClassName="pb-space-32"
-                keyboardShouldPersistTaps="handled"
-            >
+        <>
+
+            <View className="px-screen-margin pb-space-32">
                 {/* Hero */}
                 <View className="items-center py-space-24 gap-space-12">
                     <IconCircle icon={Icons.Verified_Stroke2_Corner2_Rounded} />
@@ -185,20 +169,8 @@ const AccountVerificationScreen: React.FC<BaseScreenProps> = ({
                         {t('accountVerification.note') || 'Note: Verification requests are reviewed manually and may take several days. We will notify you once your request has been reviewed.'}
                     </Text>
                 </View>
-            </ScrollView>
-
-            <Dialog
-                control={successDialog}
-                title={t('accountVerification.successTitle') || 'Request Submitted'}
-                description={successMessage}
-                actions={[
-                    {
-                        label: t('accountVerification.ok') || 'OK',
-                        onPress: handleSuccessAcknowledged,
-                    },
-                ]}
-            />
-        </KeyboardAvoidingView>
+            </View>
+        </>
     );
 };
 

package/src/ui/screens/AppInfoScreen.tsx

@@ -5,7 +5,6 @@ import {
     Platform,
     Dimensions,
     Clipboard,
-    ScrollView,
     ActivityIndicator,
 } from 'react-native';
 import type { BaseScreenProps } from '../types/navigation';
@@ -13,10 +12,10 @@ import { packageInfo } from '@oxyhq/core';
 import { toast } from '@oxyhq/bloom';
 import OxyServicesLogo from '../../assets/icons/OxyServices';
 import { SettingsIcon } from '../components/SettingsIcon';
-import Header from '../components/Header';
 import { useTheme } from '@oxyhq/bloom/theme';
 import { useOxy } from '../context/OxyContext';
 import { useI18n } from '../hooks/useI18n';
+import { useSurfaceHeader } from '../hooks/useSurfaceHeader';
 import { SettingsListGroup, SettingsListItem } from '@oxyhq/bloom/settings-list';
 
 interface SystemInfo {
@@ -37,6 +36,8 @@ const AppInfoScreen: React.FC<BaseScreenProps> = ({
     // Use useOxy() hook for OxyContext values
     const { user, sessions, oxyServices, isAuthenticated } = useOxy();
     const { t } = useI18n();
+
+    useSurfaceHeader({ title: t('appInfo.title') });
     const [systemInfo, setSystemInfo] = useState<SystemInfo | null>(null);
     const [isRunningSystemCheck, setIsRunningSystemCheck] = useState(false);
     const [connectionStatus, setConnectionStatus] = useState<'checking' | 'connected' | 'disconnected' | 'unknown'>('unknown');
@@ -148,16 +149,9 @@ const AppInfoScreen: React.FC<BaseScreenProps> = ({
     };
 
     return (
-        <View className="flex-1 bg-bg">
-            <Header
-                title={t('appInfo.title')}
-                onBack={goBack || onClose}
-                variant="minimal"
-                elevation="subtle"
-            />
+        <>
 
-            <ScrollView className="flex-1" showsVerticalScrollIndicator={false}>
-                <View className="px-screen-margin py-space-16 pb-space-24">
+            <View className="px-screen-margin py-space-16 pb-space-24">
                     {/* Package Information */}
                     <SettingsListGroup title={t('appInfo.sections.package')}>
                         <SettingsListItem
@@ -353,8 +347,7 @@ const AppInfoScreen: React.FC<BaseScreenProps> = ({
                         />
                     </SettingsListGroup>
                 </View>
-            </ScrollView>
-        </View>
+        </>
     );
 };
 

package/src/ui/screens/AvatarCropScreen.tsx

@@ -72,10 +72,6 @@ export interface AvatarCropScreenProps extends BaseScreenProps {
     sourceWidth?: number;
     /** Natural height of the source image (optional — measured if absent). */
     sourceHeight?: number;
-    /** Called with the cropped file once the user confirms. */
-    onConfirm?: (result: AvatarCropResult) => void | Promise<void>;
-    /** Called if the user cancels without confirming. */
-    onCancel?: () => void;
 }
 
 /** Side length (in dp) of the crop viewport. The output is always 512x512px. */
@@ -296,13 +292,10 @@ async function hapticSelection(): Promise<void> {
 }
 
 const AvatarCropScreen: React.FC<AvatarCropScreenProps> = ({
-    goBack,
-    onClose,
+    dismiss,
     imageUri,
     sourceWidth,
     sourceHeight,
-    onConfirm,
-    onCancel,
 }) => {
     const theme = useTheme();
     const { t } = useI18n();
@@ -765,16 +758,15 @@ const AvatarCropScreen: React.FC<AvatarCropScreenProps> = ({
 
             void hapticNotification('success');
 
-            await onConfirm?.({
+            // Resolve the surface's present() promise with the cropped JPEG and
+            // close it. The awaiting caller (`useAvatarPicker`) handles the
+            // upload + any success toast.
+            dismiss?.({
                 uri: result.uri,
                 width: result.width,
                 height: result.height,
                 mime: 'image/jpeg',
             });
-
-            // Close the sheet on success. The caller is responsible for any
-            // success toast (uploads typically toast their own outcome).
-            onClose?.();
         } catch (err) {
             const normalizedError = normalizeCropError(err);
             logger.error('handleConfirm failed', normalizedError, { component: LOG_COMPONENT });
@@ -786,12 +778,11 @@ const AvatarCropScreen: React.FC<AvatarCropScreenProps> = ({
             preparedImageCleanup?.();
             setIsProcessing(false);
         }
-    }, [baseFit, imageUri, naturalSize, onClose, onConfirm, t]);
+    }, [baseFit, imageUri, naturalSize, dismiss, t]);
 
     const handleCancel = useCallback(() => {
-        onCancel?.();
-        goBack?.();
-    }, [goBack, onCancel]);
+        dismiss?.();
+    }, [dismiss]);
 
     const topInset = Platform.OS === 'ios' ? Math.max(insets.top, 12) : Math.max(insets.top, 16);
     const bottomInset = Math.max(insets.bottom, 16);