@oxy.so/services 11.2.0 → 11.3.1

package/src/ui/components/organizations/OrganizationDirectorySearch.tsx

@@ -0,0 +1,228 @@
+import { useEffect, useState } from 'react';
+import { ActivityIndicator, View } from 'react-native';
+import { useInfiniteQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import {
+  createOrganizationSchema,
+  organizationClaimInputSchema,
+  type Organization,
+  type OrganizationType,
+} from '@oxy.so/contracts';
+import { Avatar } from '@oxy.so/bloom/avatar';
+import { Button } from '@oxy.so/bloom/button';
+import { SettingsListGroup, SettingsListItem } from '@oxy.so/bloom/settings-list';
+import { TextField, TextFieldInput } from '@oxy.so/bloom/text-field';
+import { Text } from '@oxy.so/bloom/typography';
+import { useOxy } from '../../context/OxyContext';
+import { useI18n } from '../../hooks/useI18n';
+import { OrganizationTypePicker } from './OrganizationTypePicker';
+
+/** Finding an existing identity never grants ownership or silently creates an account. */
+export function OrganizationDirectorySearch({
+  onCreateAccount,
+}: {
+  onCreateAccount: (name: string, type: OrganizationType) => void;
+}) {
+  const { oxyServices, user, canUsePrivateApi } = useOxy();
+  const { t } = useI18n();
+  const queryClient = useQueryClient();
+  const [search, setSearch] = useState('');
+  const [query, setQuery] = useState('');
+  const [selected, setSelected] = useState<Organization | null>(null);
+  const [adding, setAdding] = useState(false);
+  const [type, setType] = useState<OrganizationType>('business');
+  const [evidence, setEvidence] = useState('');
+  const [validationError, setValidationError] = useState(false);
+  const personalReady = canUsePrivateApi && user?.kind === 'personal';
+  useEffect(() => {
+    const timer = setTimeout(() => setQuery(search.trim()), 300);
+    return () => clearTimeout(timer);
+  }, [search]);
+  const results = useInfiniteQuery({
+    queryKey: ['oxy', 'organizations', 'search', query],
+    queryFn: ({ pageParam }) =>
+      oxyServices.organizations.search({
+        query,
+        limit: 20,
+        ...(pageParam ? { cursor: pageParam } : {}),
+      }),
+    initialPageParam: undefined as string | undefined,
+    getNextPageParam: (page) => page.nextCursor ?? undefined,
+    enabled: query.length > 0,
+    retry: false,
+  });
+  const claim = useMutation({
+    mutationFn: () => {
+      if (!personalReady || !selected || selected.status !== 'active')
+        throw new Error('An active organization and personal session are required');
+      return oxyServices.organizations.claim(
+        selected.accountId,
+        organizationClaimInputSchema.parse({ evidenceReference: evidence }),
+      );
+    },
+    onSuccess: () => queryClient.invalidateQueries({ queryKey: ['oxy', 'organizations'] }),
+  });
+  const create = useMutation({
+    mutationFn: () => {
+      if (!personalReady) throw new Error('A personal session is required');
+      return oxyServices.organizations.create(
+        createOrganizationSchema.parse({ name: search.trim(), organizationType: type }),
+      );
+    },
+    onSuccess: (organization) => {
+      setSelected(organization);
+      setAdding(false);
+      void queryClient.invalidateQueries({ queryKey: ['oxy', 'organizations'] });
+    },
+  });
+  const reset = () => {
+    setSelected(null);
+    setAdding(false);
+    setEvidence('');
+    claim.reset();
+    create.reset();
+    setValidationError(false);
+  };
+  if (selected)
+    return (
+      <SettingsListGroup title={selected.name}>
+        <View className="gap-space-16 p-space-16">
+          <Text>{t(`organizationDirectory.${selected.claimStatus}`)}</Text>
+          {selected.status === 'inactive' ? (
+            <Text>{t('organizationDirectory.inactive')}</Text>
+          ) : null}
+          {selected.claimStatus === 'unclaimed' ? (
+            <>
+              <Text>{t('organizationDirectory.claimHint')}</Text>
+              <TextField>
+                <TextFieldInput
+                  label={t('organizationDirectory.evidence')}
+                  value={evidence}
+                  onChangeText={setEvidence}
+                  maxLength={1000}
+                />
+              </TextField>
+              <Text>{t('organizationDirectory.evidenceHint')}</Text>
+              {claim.isSuccess ? (
+                <Text accessibilityRole="alert">{t('organizationDirectory.claimSent')}</Text>
+              ) : (
+                <Button
+                  onPress={() => claim.mutate()}
+                  disabled={
+                    !personalReady ||
+                    selected.status !== 'active' ||
+                    !evidence.trim() ||
+                    claim.isPending
+                  }
+                  loading={claim.isPending}
+                >
+                  {t('organizationDirectory.claim')}
+                </Button>
+              )}
+              {claim.isError ? (
+                <Text accessibilityRole="alert">{t('organizationDirectory.claimFailed')}</Text>
+              ) : null}
+            </>
+          ) : (
+            <Text>{t('organizationDirectory.claimedHint')}</Text>
+          )}
+          <Button appearance="outline" onPress={reset} disabled={claim.isPending}>
+            {t('organizationDirectory.back')}
+          </Button>
+        </View>
+      </SettingsListGroup>
+    );
+  return (
+    <View className="gap-space-16">
+      <TextField>
+        <TextFieldInput
+          label={t('organizationDirectory.search')}
+          value={search}
+          onChangeText={(value) => {
+            setSearch(value);
+            setValidationError(false);
+          }}
+          maxLength={200}
+        />
+      </TextField>
+      {query && results.isPending ? <ActivityIndicator /> : null}
+      {results.isError ? (
+        <View>
+          <Text accessibilityRole="alert">{t('organizationDirectory.failed')}</Text>
+          <Button onPress={() => results.refetch()}>{t('organizationDirectory.retry')}</Button>
+        </View>
+      ) : null}
+      {results.data ? (
+        <SettingsListGroup title={t('organizationDirectory.title')}>
+          {results.data.pages
+            .flatMap((page) => page.items)
+            .map((organization) => (
+              <SettingsListItem
+                key={organization.accountId}
+                title={organization.name}
+                description={[
+                  organization.websiteUrl,
+                  organization.countryCode,
+                  t(`organizationDirectory.${organization.claimStatus}`),
+                ]
+                  .filter(Boolean)
+                  .join(' · ')}
+                icon={<Avatar source={organization.avatar} name={organization.name} size={40} />}
+                onPress={() => setSelected(organization)}
+              />
+            ))}
+          {results.data.pages[0].items.length === 0 ? (
+            <Text>{t('organizationDirectory.empty')}</Text>
+          ) : null}
+          {results.hasNextPage ? (
+            <Button onPress={() => results.fetchNextPage()} disabled={results.isFetchingNextPage}>
+              {t('organizationDirectory.loadMore')}
+            </Button>
+          ) : null}
+        </SettingsListGroup>
+      ) : null}
+      {results.isSuccess && query === search.trim() ? (
+        <>
+          <Text>{t('organizationDirectory.newAccountHint')}</Text>
+          <Button onPress={() => onCreateAccount(search.trim(), type)}>
+            {t('organizationDirectory.newAccount')}
+          </Button>
+          {personalReady && !adding ? (
+            <Button appearance="outline" onPress={() => setAdding(true)}>
+              {t('organizationDirectory.addDirectory')}
+            </Button>
+          ) : null}
+        </>
+      ) : null}
+      {adding ? (
+        <>
+          <Text>{t('organizationDirectory.directoryHint')}</Text>
+          <OrganizationTypePicker value={type} onChange={setType} disabled={create.isPending} />
+          {validationError ? (
+            <Text accessibilityRole="alert">{t('organizationDirectory.invalid')}</Text>
+          ) : null}
+          {create.isError ? (
+            <Text accessibilityRole="alert">{t('organizationDirectory.saveFailed')}</Text>
+          ) : null}
+          <Button
+            disabled={
+              !personalReady || create.isPending || !results.isSuccess || query !== search.trim()
+            }
+            loading={create.isPending}
+            onPress={() => {
+              if (
+                !createOrganizationSchema.safeParse({ name: search.trim(), organizationType: type })
+                  .success
+              ) {
+                setValidationError(true);
+                return;
+              }
+              create.mutate();
+            }}
+          >
+            {t('organizationDirectory.addDirectory')}
+          </Button>
+        </>
+      ) : null}
+    </View>
+  );
+}

package/src/ui/components/organizations/OrganizationSettings.tsx

@@ -0,0 +1,131 @@
+import { useState } from 'react';
+import { ActivityIndicator, View } from 'react-native';
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import {
+  updateOrganizationSchema,
+  type Organization,
+  type OrganizationType,
+} from '@oxy.so/contracts';
+import { Button } from '@oxy.so/bloom/button';
+import { toast } from '@oxy.so/bloom/toast';
+import { SettingsListGroup } from '@oxy.so/bloom/settings-list';
+import { TextField, TextFieldInput } from '@oxy.so/bloom/text-field';
+import { Text } from '@oxy.so/bloom/typography';
+import { useOxy } from '../../context/OxyContext';
+import { useI18n } from '../../hooks/useI18n';
+import { OrganizationTypePicker } from './OrganizationTypePicker';
+
+export function OrganizationSettings({
+  accountId,
+  canUpdate,
+}: {
+  accountId: string;
+  canUpdate: boolean;
+}) {
+  const { oxyServices, canUsePrivateApi } = useOxy();
+  const { t } = useI18n();
+  const organization = useQuery({
+    queryKey: ['oxy', 'organizations', accountId],
+    queryFn: () => oxyServices.organizations.get(accountId),
+    retry: false,
+  });
+  if (organization.isPending) return <ActivityIndicator />;
+  if (organization.isError)
+    return (
+      <View>
+        <Text accessibilityRole="alert">{t('organizationDirectory.failed')}</Text>
+        <Button onPress={() => organization.refetch()}>{t('organizationDirectory.retry')}</Button>
+      </View>
+    );
+  if (!canUpdate || !canUsePrivateApi)
+    return (
+      <SettingsListGroup title={t('organizationDirectory.title')}>
+        <Text>{t(`organizationDirectory.types.${organization.data.organizationType}`)}</Text>
+        <Text>{t('organizationDirectory.readonly')}</Text>
+      </SettingsListGroup>
+    );
+  return (
+    <OrganizationForm
+      key={`${accountId}:${organization.data.updatedAt}`}
+      organization={organization.data}
+    />
+  );
+}
+
+function OrganizationForm({ organization }: { organization: Organization }) {
+  const { oxyServices, canUsePrivateApi } = useOxy();
+  const { t } = useI18n();
+  const queryClient = useQueryClient();
+  const [legalName, setLegalName] = useState(organization.legalName ?? '');
+  const [website, setWebsite] = useState(organization.websiteUrl ?? '');
+  const [country, setCountry] = useState(organization.countryCode ?? '');
+  const [type, setType] = useState<OrganizationType>(organization.organizationType);
+  const [invalid, setInvalid] = useState(false);
+  const save = useMutation({
+    mutationFn: (input: ReturnType<typeof updateOrganizationSchema.parse>) => {
+      if (!canUsePrivateApi) throw new Error('An authenticated session is required');
+      return oxyServices.organizations.update(organization.accountId, input);
+    },
+    onSuccess: () => {
+      toast.success(t('organizationDirectory.saved'));
+      void queryClient.invalidateQueries({ queryKey: ['oxy', 'organizations'] });
+      void queryClient.invalidateQueries({ queryKey: ['accounts'] });
+      void queryClient.invalidateQueries({ queryKey: ['users'] });
+    },
+  });
+  return (
+    <SettingsListGroup title={t('organizationDirectory.title')}>
+      <View className="gap-space-16 p-space-16">
+        <TextField>
+          <TextFieldInput
+            label={t('organizationDirectory.legalName')}
+            value={legalName}
+            onChangeText={setLegalName}
+            maxLength={300}
+          />
+        </TextField>
+        <TextField>
+          <TextFieldInput
+            label={t('organizationDirectory.website')}
+            value={website}
+            onChangeText={setWebsite}
+            autoCapitalize="none"
+            maxLength={2048}
+          />
+        </TextField>
+        <TextField>
+          <TextFieldInput
+            label={t('organizationDirectory.country')}
+            value={country}
+            onChangeText={setCountry}
+            autoCapitalize="characters"
+            maxLength={2}
+          />
+        </TextField>
+        <OrganizationTypePicker value={type} onChange={setType} disabled={save.isPending} />
+        {invalid ? (
+          <Text accessibilityRole="alert">{t('organizationDirectory.invalid')}</Text>
+        ) : null}
+        {save.isError ? (
+          <Text accessibilityRole="alert">{t('organizationDirectory.saveFailed')}</Text>
+        ) : null}
+        <Button
+          disabled={save.isPending || !canUsePrivateApi}
+          loading={save.isPending}
+          onPress={() => {
+            const input = updateOrganizationSchema.safeParse({
+              legalName: legalName.trim() || null,
+              websiteUrl: website.trim() || null,
+              countryCode: country.trim().toUpperCase() || null,
+              organizationType: type,
+            });
+            setInvalid(!input.success);
+            if (input.success) save.mutate(input.data);
+          }}
+        >
+          {t('organizationDirectory.save')}
+        </Button>
+      </View>
+    </SettingsListGroup>
+  );
+}

package/src/ui/components/organizations/OrganizationTypePicker.tsx

@@ -0,0 +1,31 @@
+import { ORGANIZATION_TYPES, type OrganizationType } from '@oxy.so/contracts';
+import { SettingsListGroup, SettingsListItem } from '@oxy.so/bloom/settings-list';
+import { Text } from '@oxy.so/bloom/typography';
+import { useI18n } from '../../hooks/useI18n';
+
+export function OrganizationTypePicker({
+  value,
+  onChange,
+  disabled = false,
+}: {
+  value: OrganizationType;
+  onChange: (value: OrganizationType) => void;
+  disabled?: boolean;
+}) {
+  const { t } = useI18n();
+  return (
+    <SettingsListGroup title={t('organizationDirectory.type')}>
+      {ORGANIZATION_TYPES.map((type) => (
+        <SettingsListItem
+          key={type}
+          title={t(`organizationDirectory.types.${type}`)}
+          accessibilityLabel={t(`organizationDirectory.types.${type}`)}
+          disabled={disabled}
+          onPress={() => onChange(type)}
+          showChevron={false}
+          rightElement={value === type ? <Text>✓</Text> : undefined}
+        />
+      ))}
+    </SettingsListGroup>
+  );
+}

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'}>