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

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

@@ -0,0 +1,218 @@
+import { useState } from 'react';
+import { ActivityIndicator, View } from 'react-native';
+import { useInfiniteQuery, useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { isHttpRequestError } from '@oxy.so/core';
+import {
+  organizationClaimReviewSchema,
+  type OrganizationClaimReview as OrganizationClaimReviewInput,
+} from '@oxy.so/contracts';
+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';
+
+/** The queue is requested only after an explicit action; the server rechecks staff authority. */
+export function OrganizationClaimReview() {
+  const { t } = useI18n();
+  const { user, canUsePrivateApi } = useOxy();
+  const [open, setOpen] = useState(false);
+  return (
+    <SettingsListGroup>
+      <SettingsListItem
+        title={t('organizationDirectory.review.title')}
+        disabled={!canUsePrivateApi}
+        onPress={() => setOpen((value) => !value)}
+      />
+      {open && user?.kind === 'personal' && canUsePrivateApi ? <ReviewQueue key={user.id} /> : null}
+    </SettingsListGroup>
+  );
+}
+function ReviewQueue() {
+  const { t } = useI18n();
+  const { oxyServices, user, canUsePrivateApi } = useOxy();
+  const [selected, setSelected] = useState<string | null>(null);
+  const requests = useInfiniteQuery({
+    queryKey: ['oxy', 'organizations', 'review', user?.id, canUsePrivateApi],
+    queryFn: ({ pageParam }) =>
+      oxyServices.organizations.reviewClaims({
+        status: 'pending',
+        limit: 20,
+        ...(pageParam ? { cursor: pageParam } : {}),
+      }),
+    initialPageParam: undefined as string | undefined,
+    getNextPageParam: (page) => page.nextCursor ?? undefined,
+    enabled: canUsePrivateApi,
+    retry: false,
+    gcTime: 0,
+  });
+  const claims = requests.data?.pages.flatMap((page) => page.items) ?? [];
+  const ids = [...new Set(claims.map((claim) => claim.accountId))].sort();
+  const organizations = useQuery({
+    queryKey: ['oxy', 'organizations', 'review-organizations', ids],
+    queryFn: async () => {
+      const batches = [];
+      for (let offset = 0; offset < ids.length; offset += 100)
+        batches.push(oxyServices.organizations.batch({ ids: ids.slice(offset, offset + 100) }));
+      return (await Promise.all(batches)).flatMap((batch) => batch.items);
+    },
+    enabled: canUsePrivateApi && requests.isSuccess && ids.length > 0,
+    retry: false,
+  });
+  if (requests.isPending) return <ActivityIndicator />;
+  if (requests.isError)
+    return (
+      <View className="gap-space-16 p-space-16">
+        <Text accessibilityRole="alert">
+          {t(
+            isHttpRequestError(requests.error) && requests.error.status === 403
+              ? 'organizationDirectory.review.forbidden'
+              : 'organizationDirectory.requestError',
+          )}
+        </Text>
+        <Button onPress={() => requests.refetch()}>{t('organizationDirectory.retry')}</Button>
+      </View>
+    );
+  if (selected)
+    return <ReviewDetail claimId={selected} key={selected} onClose={() => setSelected(null)} />;
+  return (
+    <View className="gap-space-16 p-space-16">
+      {claims.length === 0 ? <Text>{t('organizationDirectory.review.empty')}</Text> : null}
+      {claims.map((claim) => (
+        <SettingsListItem
+          key={claim.id}
+          title={
+            organizations.data?.find((item) => item.requestedAccountId === claim.accountId)
+              ?.organization.name ?? t('organizationDirectory.view')
+          }
+          description={t('organizationDirectory.pending')}
+          onPress={() => setSelected(claim.id)}
+        />
+      ))}
+      {requests.hasNextPage ? (
+        <Button onPress={() => requests.fetchNextPage()} disabled={requests.isFetchingNextPage}>
+          {t('organizationDirectory.loadMore')}
+        </Button>
+      ) : null}
+    </View>
+  );
+}
+function ReviewDetail({ claimId, onClose }: { claimId: string; onClose: () => void }) {
+  const { t } = useI18n();
+  const { oxyServices, user, canUsePrivateApi } = useOxy();
+  const queryClient = useQueryClient();
+  const [evidence, setEvidence] = useState('');
+  const [authorizationRevoked, setAuthorizationRevoked] = useState(false);
+  const detail = useQuery({
+    queryKey: ['oxy', 'organizations', 'review-detail', user?.id, canUsePrivateApi, claimId],
+    queryFn: () => oxyServices.organizations.reviewClaimDetail(claimId),
+    enabled: canUsePrivateApi,
+    retry: false,
+    gcTime: 0,
+  });
+  const review = useMutation({
+    mutationFn: (decision: OrganizationClaimReviewInput['decision']) => {
+      if (
+        !canUsePrivateApi ||
+        authorizationRevoked ||
+        !detail.isSuccess ||
+        !detail.data ||
+        detail.data.claimantUserId === user?.id
+      )
+        throw new Error('Independent staff review is required');
+      return oxyServices.organizations.reviewClaim(
+        claimId,
+        organizationClaimReviewSchema.parse({ decision, evidenceReference: evidence }),
+      );
+    },
+    onError: (error) => {
+      if (isHttpRequestError(error) && error.status === 403) setAuthorizationRevoked(true);
+    },
+    onSuccess: async () => {
+      await queryClient.invalidateQueries({ queryKey: ['oxy', 'organizations'] });
+      await queryClient.invalidateQueries({ queryKey: ['accounts'] });
+      onClose();
+    },
+  });
+  const conflict = isHttpRequestError(review.error) && review.error.status === 409;
+  const forbidden = isHttpRequestError(review.error) && review.error.status === 403;
+  const selfReview = detail.data?.claimantUserId === user?.id;
+  return (
+    <View className="gap-space-16 p-space-16">
+      {detail.isPending ? <ActivityIndicator /> : null}
+      {detail.isError ? (
+        <>
+          <Text accessibilityRole="alert">
+            {t(
+              isHttpRequestError(detail.error) && detail.error.status === 403
+                ? 'organizationDirectory.review.forbidden'
+                : 'organizationDirectory.requestError',
+            )}
+          </Text>
+          <Button onPress={() => detail.refetch()}>{t('organizationDirectory.retry')}</Button>
+        </>
+      ) : null}
+      {authorizationRevoked ? (
+        <Text accessibilityRole="alert">{t('organizationDirectory.review.forbidden')}</Text>
+      ) : null}
+      {detail.isSuccess && canUsePrivateApi && !authorizationRevoked ? (
+        <>
+          <Text>{t('organizationDirectory.evidence')}</Text>
+          <Text selectable>{detail.data.evidenceReference}</Text>
+          <Text>{t('organizationDirectory.review.hint')}</Text>
+          {selfReview ? <Text>{t('organizationDirectory.review.independent')}</Text> : null}
+          <TextField>
+            <TextFieldInput
+              label={t('organizationDirectory.review.evidence')}
+              value={evidence}
+              onChangeText={setEvidence}
+              maxLength={1000}
+            />
+          </TextField>
+          {review.isError ? (
+            <Text accessibilityRole="alert">
+              {t(
+                conflict
+                  ? 'organizationDirectory.review.conflict'
+                  : forbidden
+                    ? 'organizationDirectory.review.forbidden'
+                    : 'organizationDirectory.review.failed',
+              )}
+            </Text>
+          ) : null}
+          {(['approved', 'rejected'] as const).map((decision) => (
+            <Button
+              key={decision}
+              disabled={
+                !canUsePrivateApi ||
+                selfReview ||
+                detail.data.status !== 'pending' ||
+                !evidence.trim() ||
+                review.isPending ||
+                conflict ||
+                forbidden
+              }
+              onPress={() => review.mutate(decision)}
+            >
+              {t(`organizationDirectory.review.${decision}`)}
+            </Button>
+          ))}
+          {conflict ? (
+            <Button
+              onPress={async () => {
+                await queryClient.invalidateQueries({ queryKey: ['oxy', 'organizations'] });
+                onClose();
+              }}
+            >
+              {t('organizationDirectory.retry')}
+            </Button>
+          ) : null}
+        </>
+      ) : null}
+      <Button appearance="outline" onPress={onClose} disabled={review.isPending}>
+        {t('organizationDirectory.back')}
+      </Button>
+    </View>
+  );
+}

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

@@ -0,0 +1,67 @@
+import { View } from 'react-native';
+import { useInfiniteQuery, useQuery } from '@tanstack/react-query';
+import { Button } from '@oxy.so/bloom/button';
+import { SettingsListGroup, SettingsListItem } from '@oxy.so/bloom/settings-list';
+import { Text } from '@oxy.so/bloom/typography';
+import { useOxy } from '../../context/OxyContext';
+import { useI18n } from '../../hooks/useI18n';
+
+export function OrganizationClaims() {
+  const { oxyServices, user, canUsePrivateApi } = useOxy();
+  const { t } = useI18n();
+  const enabled = canUsePrivateApi && user?.kind === 'personal';
+  const requests = useInfiniteQuery({
+    queryKey: ['oxy', 'organizations', 'claims', user?.id, canUsePrivateApi],
+    queryFn: ({ pageParam }) =>
+      oxyServices.organizations.myClaims({
+        limit: 20,
+        ...(pageParam ? { cursor: pageParam } : {}),
+      }),
+    initialPageParam: undefined as string | undefined,
+    getNextPageParam: (page) => page.nextCursor ?? undefined,
+    enabled,
+    retry: false,
+    gcTime: 0,
+  });
+  const claims = requests.data?.pages.flatMap((page) => page.items) ?? [];
+  const ids = [...new Set(claims.map((claim) => claim.accountId))].sort();
+  const organizations = useQuery({
+    queryKey: ['oxy', 'organizations', 'claims-employers', ids],
+    queryFn: async () => {
+      const batches = [];
+      for (let offset = 0; offset < ids.length; offset += 100)
+        batches.push(oxyServices.organizations.batch({ ids: ids.slice(offset, offset + 100) }));
+      return (await Promise.all(batches)).flatMap((batch) => batch.items);
+    },
+    enabled: enabled && ids.length > 0,
+    retry: false,
+  });
+  if (!enabled || (!requests.isError && claims.length === 0)) return null;
+  return (
+    <SettingsListGroup title={t('organizationDirectory.requests')}>
+      {requests.isError ? (
+        <View>
+          <Text accessibilityRole="alert">{t('organizationDirectory.requestError')}</Text>
+          <Button onPress={() => requests.refetch()}>{t('organizationDirectory.retry')}</Button>
+        </View>
+      ) : null}
+      {!requests.isError &&
+        claims.map((claim) => (
+          <SettingsListItem
+            key={claim.id}
+            title={
+              organizations.data?.find((item) => item.requestedAccountId === claim.accountId)
+                ?.organization.name ?? t('organizationDirectory.view')
+            }
+            description={t(`organizationDirectory.${claim.status}`)}
+            showChevron={false}
+          />
+        ))}
+      {!requests.isError && requests.hasNextPage ? (
+        <Button onPress={() => requests.fetchNextPage()} disabled={requests.isFetchingNextPage}>
+          {t('organizationDirectory.loadMore')}
+        </Button>
+      ) : null}
+    </SettingsListGroup>
+  );
+}

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>
+  );
+}