@oxy.so/services 11.2.0-oxy-one.7 → 11.3.0

package/src/ui/screens/AccountSettingsScreen.tsx

@@ -1,4 +1,6 @@
 import type React from 'react';
+import { ORGANIZATION_NAME_MAX_LENGTH, organizationNameSchema } from '@oxy.so/contracts';
+import { OrganizationSettings } from '../components/organizations/OrganizationSettings';
 import { useCallback, useMemo, useState } from 'react';
 import { View, ActivityIndicator } from 'react-native';
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
@@ -52,12 +54,12 @@ const AccountSettingsScreen: React.FC<BaseScreenProps> = ({
   const id = typeof accountId === 'string' ? accountId : '';
 
   const accountQuery = useQuery({
-    queryKey: ['accounts', 'detail', id],
+    queryKey: ['accounts', 'detail', id, user?.id, canUsePrivateApi],
     queryFn: () => oxyServices.accounts.get(id),
     enabled: canUsePrivateApi && id.length > 0,
   });
 
-  const node = accountQuery.data ?? null;
+  const node = canUsePrivateApi && accountQuery.isSuccess ? accountQuery.data : null;
   const permissions = node?.callerMembership?.permissions ?? [];
   const isImplicitOwner = node ? node.relationship !== 'member' : false;
   const can = useCallback(
@@ -148,6 +150,14 @@ const AccountSettingsScreen: React.FC<BaseScreenProps> = ({
         setDisplayNameError('');
         return;
       }
+      if (node?.account.kind === 'organization') {
+        setDisplayNameError(
+          organizationNameSchema.safeParse(trimmed).success
+            ? ''
+            : t('organizationDirectory.invalidName'),
+        );
+        return;
+      }
       const nameParts = trimmed.split(/\s+/).filter(Boolean);
       const first = nameParts[0] || '';
       const last = nameParts.length > 1 ? nameParts.slice(1).join(' ') : '';
@@ -158,7 +168,7 @@ const AccountSettingsScreen: React.FC<BaseScreenProps> = ({
           : '',
       );
     },
-    [t],
+    [node?.account.kind, t],
   );
 
   const handleSave = useCallback(() => {
@@ -219,7 +229,11 @@ const AccountSettingsScreen: React.FC<BaseScreenProps> = ({
                       value={displayName}
                       onChangeText={handleDisplayNameChange}
                       isInvalid={Boolean(displayNameError)}
-                      maxLength={DISPLAY_NAME_MAX}
+                      maxLength={
+                        node?.account.kind === 'organization'
+                          ? ORGANIZATION_NAME_MAX_LENGTH
+                          : DISPLAY_NAME_MAX
+                      }
                     />
                   </TextField>
                   {displayNameError ? (
@@ -261,6 +275,10 @@ const AccountSettingsScreen: React.FC<BaseScreenProps> = ({
               </View>
             ) : null}
 
+            {node?.account.kind === 'organization' ? (
+              <OrganizationSettings key={id} accountId={id} canUpdate={canUpdate} />
+            ) : null}
+
             {/* Members entry */}
             {canViewMembers ? (
               <SettingsListGroup title={t('accounts.settings.sections.access') || 'Access'}>

package/src/ui/screens/CreateAccountScreen.tsx

@@ -1,4 +1,11 @@
 import type React from 'react';
+import {
+  ORGANIZATION_NAME_MAX_LENGTH,
+  organizationNameSchema,
+  type OrganizationType,
+} from '@oxy.so/contracts';
+import { OrganizationDirectorySearch } from '../components/organizations/OrganizationDirectorySearch';
+import { OrganizationTypePicker } from '../components/organizations/OrganizationTypePicker';
 import { useState, useCallback, useRef, useEffect } from 'react';
 import { View, ActivityIndicator } from 'react-native';
 import Ionicons from '../icons/Ionicons';
@@ -114,19 +121,21 @@ const ACCOUNT_CATEGORY_OPTIONS: readonly AccountCategoryId[] = SELECTABLE_ACCOUN
  */
 const CreateAccountScreen: React.FC<BaseScreenProps> = ({ onClose, goBack, parentAccountId }) => {
   const bloomTheme = useTheme();
-  const { oxyServices, createAccount, switchToAccount } = useOxy();
+  const { oxyServices, createAccount, switchToAccount, user, canUsePrivateApi } = useOxy();
   const { t, locale } = useI18n();
 
-  useSurfaceHeader({
-    title: t('accounts.create.title') || 'Create account',
-    subtitle:
-      t('accounts.create.subtitle') ||
-      'Create an account you control. It will have its own profile, members, and apps.',
-  });
-
   const parentId = typeof parentAccountId === 'string' ? parentAccountId : undefined;
 
   const [kind, setKind] = useState<CreatableAccountKind>('project');
+  const [organizationType, setOrganizationType] = useState<OrganizationType>('business');
+  const [newOrganization, setNewOrganization] = useState(false);
+  const findingOrganization = kind === 'organization' && !newOrganization;
+  useSurfaceHeader({
+    title: t(findingOrganization ? 'organizationDirectory.title' : 'accounts.create.title'),
+    subtitle: t(
+      findingOrganization ? 'organizationDirectory.searchHint' : 'accounts.create.subtitle',
+    ),
+  });
   /**
    * ORDER IS THE DATA: index 0 is the primary category. Selecting appends,
    * de-selecting removes, and neither sorts — so the list the user assembles is
@@ -254,6 +263,7 @@ const CreateAccountScreen: React.FC<BaseScreenProps> = ({ onClose, goBack, paren
   const handleKindChange = useCallback(
     (nextKind: CreatableAccountKind) => {
       setKind(nextKind);
+      setNewOrganization(false);
       if (!username) return;
       const proposed = nextKind === 'bot' ? applyBotUsernameSuffix(username) : username;
       setUsername(proposed);
@@ -270,6 +280,14 @@ const CreateAccountScreen: React.FC<BaseScreenProps> = ({ onClose, goBack, paren
         setDisplayNameError('');
         return;
       }
+      if (kind === 'organization') {
+        setDisplayNameError(
+          organizationNameSchema.safeParse(trimmed).success
+            ? ''
+            : t('organizationDirectory.invalidName'),
+        );
+        return;
+      }
       const nameParts = trimmed.split(/\s+/);
       const firstName = nameParts[0] || '';
       const lastName = nameParts.length > 1 ? nameParts.slice(1).join(' ') : '';
@@ -280,7 +298,7 @@ const CreateAccountScreen: React.FC<BaseScreenProps> = ({ onClose, goBack, paren
           : '',
       );
     },
-    [t],
+    [kind, t],
   );
 
   /**
@@ -301,10 +319,12 @@ const CreateAccountScreen: React.FC<BaseScreenProps> = ({ onClose, goBack, paren
   }, []);
 
   const canCreate =
+    canUsePrivateApi &&
     usernameStatus === 'available' &&
     displayName.trim().length > 0 &&
     !displayNameError &&
-    !isCreating;
+    !isCreating &&
+    (kind !== 'organization' || newOrganization);
 
   const handleCreate = useCallback(async () => {
     if (!canCreate) return;
@@ -313,6 +333,7 @@ const CreateAccountScreen: React.FC<BaseScreenProps> = ({ onClose, goBack, paren
     try {
       const input: CreateAccountInput = {
         kind,
+        ...(kind === 'organization' ? { organizationType } : {}),
         username,
         name: { displayName: displayName.trim() },
         bio: bio.trim() || undefined,
@@ -352,6 +373,7 @@ const CreateAccountScreen: React.FC<BaseScreenProps> = ({ onClose, goBack, paren
   }, [
     canCreate,
     kind,
+    organizationType,
     accountCategories,
     username,
     displayName,
@@ -405,128 +427,159 @@ const CreateAccountScreen: React.FC<BaseScreenProps> = ({ onClose, goBack, paren
         })}
       </SettingsListGroup>
 
-      {/* Categories — multi-select, shown for every kind this screen can create
+      {kind === 'organization' && !newOrganization ? (
+        <OrganizationDirectorySearch
+          key={user?.id}
+          onCreateAccount={(name, type) => {
+            handleDisplayNameChange(name);
+            setOrganizationType(type);
+            setNewOrganization(true);
+          }}
+        />
+      ) : (
+        <>
+          {kind === 'organization' ? (
+            <>
+              <Button appearance="outline" onPress={() => setNewOrganization(false)}>
+                {t('organizationDirectory.back')}
+              </Button>
+              <OrganizationTypePicker
+                value={organizationType}
+                onChange={setOrganizationType}
+                disabled={isCreating}
+              />
+            </>
+          ) : null}
+          {/* Categories — multi-select, shown for every kind this screen can create
           (they are all non-personal). The badge on a selected row is its
           POSITION, so the primary is legible as "1" rather than being a rule the
           user has to be told. */}
-      <View className="gap-space-4">
-        <SettingsListGroup title={t('accounts.create.accountCategory.label')}>
-          {ACCOUNT_CATEGORY_OPTIONS.map((option) => {
-            const position = accountCategories.indexOf(option);
-            const selected = position >= 0;
-            const label = accountCategoryLabel(locale, option);
-            return (
-              <SettingsListItem
-                key={option}
-                title={label}
-                disabled={!selected && accountCategories.length >= MAX_ACCOUNT_CATEGORIES}
-                onPress={() => toggleAccountCategory(option)}
-                showChevron={false}
-                rightElement={
-                  selected ? (
-                    <Text className="text-caption-1 font-semibold text-primary">
-                      {position + 1}
-                    </Text>
-                  ) : undefined
-                }
-                accessibilityLabel={label}
-              />
-            );
-          })}
-        </SettingsListGroup>
-        <Text className="text-caption font-caption text-text-tertiary px-space-4">
-          {t('accounts.create.accountCategory.hint', { max: MAX_ACCOUNT_CATEGORIES })}
-        </Text>
-      </View>
-
-      {/* Details — a grouped section card hosting the form fields */}
-      <SettingsListGroup title={t('accounts.create.detailsSection') || 'Details'}>
-        <View className="p-space-16 gap-space-16">
-          {/* Username */}
-          <View className="gap-space-8">
-            <TextField isInvalid={usernameIsInvalid}>
-              <TextFieldInput
-                floatingLabel
-                label={t('accounts.create.username.label') || 'Username'}
-                value={username}
-                onChangeText={handleUsernameChange}
-                isInvalid={usernameIsInvalid}
-                autoCapitalize="none"
-                autoCorrect={false}
-                autoComplete="off"
-                maxLength={USERNAME_MAX_LENGTH}
-              />
-            </TextField>
-            {usernameStatus === 'checking' || usernameMessage ? (
-              <View className="flex-row items-center gap-space-4 px-space-4">
-                {usernameStatus === 'checking' ? (
-                  <ActivityIndicator size="small" color={bloomTheme.colors.primary} />
-                ) : usernameStatus === 'available' ? (
-                  <Ionicons name="checkmark-circle" size={16} color={bloomTheme.colors.success} />
-                ) : usernameIsInvalid ? (
-                  <Ionicons name="alert-circle" size={16} color={bloomTheme.colors.negative} />
+          <View className="gap-space-4">
+            <SettingsListGroup title={t('accounts.create.accountCategory.label')}>
+              {ACCOUNT_CATEGORY_OPTIONS.map((option) => {
+                const position = accountCategories.indexOf(option);
+                const selected = position >= 0;
+                const label = accountCategoryLabel(locale, option);
+                return (
+                  <SettingsListItem
+                    key={option}
+                    title={label}
+                    disabled={!selected && accountCategories.length >= MAX_ACCOUNT_CATEGORIES}
+                    onPress={() => toggleAccountCategory(option)}
+                    showChevron={false}
+                    rightElement={
+                      selected ? (
+                        <Text className="text-caption-1 font-semibold text-primary">
+                          {position + 1}
+                        </Text>
+                      ) : undefined
+                    }
+                    accessibilityLabel={label}
+                  />
+                );
+              })}
+            </SettingsListGroup>
+            <Text className="text-caption font-caption text-text-tertiary px-space-4">
+              {t('accounts.create.accountCategory.hint', { max: MAX_ACCOUNT_CATEGORIES })}
+            </Text>
+          </View>
+
+          {/* Details — a grouped section card hosting the form fields */}
+          <SettingsListGroup title={t('accounts.create.detailsSection') || 'Details'}>
+            <View className="p-space-16 gap-space-16">
+              {/* Username */}
+              <View className="gap-space-8">
+                <TextField isInvalid={usernameIsInvalid}>
+                  <TextFieldInput
+                    floatingLabel
+                    label={t('accounts.create.username.label') || 'Username'}
+                    value={username}
+                    onChangeText={handleUsernameChange}
+                    isInvalid={usernameIsInvalid}
+                    autoCapitalize="none"
+                    autoCorrect={false}
+                    autoComplete="off"
+                    maxLength={USERNAME_MAX_LENGTH}
+                  />
+                </TextField>
+                {usernameStatus === 'checking' || usernameMessage ? (
+                  <View className="flex-row items-center gap-space-4 px-space-4">
+                    {usernameStatus === 'checking' ? (
+                      <ActivityIndicator size="small" color={bloomTheme.colors.primary} />
+                    ) : usernameStatus === 'available' ? (
+                      <Ionicons
+                        name="checkmark-circle"
+                        size={16}
+                        color={bloomTheme.colors.success}
+                      />
+                    ) : usernameIsInvalid ? (
+                      <Ionicons name="alert-circle" size={16} color={bloomTheme.colors.negative} />
+                    ) : null}
+                    {usernameMessage ? (
+                      <Text className="text-caption font-caption" style={{ color: statusColor }}>
+                        {usernameMessage}
+                      </Text>
+                    ) : null}
+                  </View>
                 ) : null}
-                {usernameMessage ? (
-                  <Text className="text-caption font-caption" style={{ color: statusColor }}>
-                    {usernameMessage}
+              </View>
+
+              {/* Display Name */}
+              <View className="gap-space-4">
+                <TextField isInvalid={Boolean(displayNameError)}>
+                  <TextFieldInput
+                    floatingLabel
+                    label={t('accounts.create.displayName.label') || 'Display name'}
+                    value={displayName}
+                    onChangeText={handleDisplayNameChange}
+                    isInvalid={Boolean(displayNameError)}
+                    maxLength={
+                      kind === 'organization' ? ORGANIZATION_NAME_MAX_LENGTH : DISPLAY_NAME_MAX
+                    }
+                  />
+                </TextField>
+                {displayNameError ? (
+                  <Text className="text-caption font-caption text-negative px-space-4">
+                    {displayNameError}
                   </Text>
                 ) : null}
               </View>
-            ) : null}
-          </View>
-
-          {/* Display Name */}
-          <View className="gap-space-4">
-            <TextField isInvalid={Boolean(displayNameError)}>
-              <TextFieldInput
-                floatingLabel
-                label={t('accounts.create.displayName.label') || 'Display name'}
-                value={displayName}
-                onChangeText={handleDisplayNameChange}
-                isInvalid={Boolean(displayNameError)}
-                maxLength={DISPLAY_NAME_MAX}
-              />
-            </TextField>
-            {displayNameError ? (
-              <Text className="text-caption font-caption text-negative px-space-4">
-                {displayNameError}
-              </Text>
-            ) : null}
-          </View>
 
-          {/* Bio */}
-          <View className="gap-space-4">
-            <TextField>
-              <TextFieldInput
-                floatingLabel
-                label={t('accounts.create.bio.label') || 'Bio (optional)'}
-                value={bio}
-                onChangeText={setBio}
-                maxLength={BIO_MAX}
-                multiline
-                numberOfLines={3}
-                textAlignVertical="top"
-              />
-            </TextField>
-            <Text className="text-caption font-caption text-text-tertiary px-space-4 text-right">
-              {bio.length}/{BIO_MAX}
-            </Text>
-          </View>
-        </View>
-      </SettingsListGroup>
-
-      {/* Create Button */}
-      <Button
-        appearance="solid"
-        tone="accent"
-        onPress={handleCreate}
-        disabled={!canCreate}
-        loading={isCreating}
-        accessibilityLabel={title}
-        className="w-full"
-      >
-        {title}
-      </Button>
+              {/* Bio */}
+              <View className="gap-space-4">
+                <TextField>
+                  <TextFieldInput
+                    floatingLabel
+                    label={t('accounts.create.bio.label') || 'Bio (optional)'}
+                    value={bio}
+                    onChangeText={setBio}
+                    maxLength={BIO_MAX}
+                    multiline
+                    numberOfLines={3}
+                    textAlignVertical="top"
+                  />
+                </TextField>
+                <Text className="text-caption font-caption text-text-tertiary px-space-4 text-right">
+                  {bio.length}/{BIO_MAX}
+                </Text>
+              </View>
+            </View>
+          </SettingsListGroup>
+
+          {/* Create Button */}
+          <Button
+            appearance="solid"
+            tone="accent"
+            onPress={handleCreate}
+            disabled={!canCreate}
+            loading={isCreating}
+            accessibilityLabel={title}
+            className="w-full"
+          >
+            {title}
+          </Button>
+        </>
+      )}
     </View>
   );
 };

package/src/ui/screens/ManageAccountScreen.tsx

@@ -1,3 +1,5 @@
+import { OrganizationClaimReview } from '../components/organizations/OrganizationClaimReview';
+import { OrganizationClaims } from '../components/organizations/OrganizationClaims';
 import type React from 'react';
 import { useCallback, useMemo, useState } from 'react';
 import { View, StyleSheet, ActivityIndicator, Linking, Platform } from 'react-native';
@@ -396,6 +398,22 @@ const ManageAccountScreen: React.FC<BaseScreenProps> = ({ onClose, goBack, navig
           />
         </SettingsListGroup>
 
+        {user?.kind === 'organization' ? (
+          <SettingsListGroup title={t('organizationDirectory.title')}>
+            <SettingsListItem
+              title={t('organizationDirectory.view')}
+              onPress={() => navigate?.('AccountSettings', { accountId: user.id })}
+            />
+          </SettingsListGroup>
+        ) : null}
+
+        {user?.kind === 'personal' ? (
+          <>
+            <OrganizationClaims key={user.id} />
+            <OrganizationClaimReview key={`review:${user.id}`} />
+          </>
+        ) : null}
+
         {/* Sessions section */}
         <SettingsListGroup title={t('manageAccount.sections.sessions') || 'Sessions & devices'}>
           {deviceSessionsLoading ? (