@oxy.so/services 11.2.0 → 11.4.0

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

package/src/ui/hooks/useDisplayCurrency.ts

@@ -0,0 +1,64 @@
+import { useSyncExternalStore } from 'react';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { authenticatedApiCall, type UserPreferences } from '@oxy.so/core';
+import { useOxy } from '../context/OxyContext';
+import { useCurrentUser } from './queries/useAccountQueries';
+import { queryKeys } from './queries/queryKeys';
+import { useAuthStore } from '../stores/authStore';
+import { mutationKeys } from './mutations/mutationKeys';
+
+export type DisplayCurrency = NonNullable<UserPreferences['displayCurrency']>;
+export const DISPLAY_CURRENCIES: readonly DisplayCurrency[] = ['USD', 'EUR', 'FAIR'];
+
+let anonymousCurrency: DisplayCurrency = 'USD';
+const anonymousListeners = new Set<() => void>();
+const subscribeAnonymous = (listener: () => void) => {
+  anonymousListeners.add(listener);
+  return () => {
+    anonymousListeners.delete(listener);
+  };
+};
+const anonymousSnapshot = () => anonymousCurrency;
+
+/** Account-scoped server preference. A late save can never replace another account. */
+export function useDisplayCurrency() {
+  const { oxyServices, activeSessionId, isAuthenticated, user } = useOxy();
+  const current = useCurrentUser({ enabled: isAuthenticated });
+  const client = useQueryClient();
+  const anonymous = useSyncExternalStore(
+    subscribeAnonymous,
+    anonymousSnapshot,
+    () => 'USD' as const,
+  );
+  const currency = isAuthenticated
+    ? (current.data?.userPreferences?.displayCurrency ??
+      user?.userPreferences?.displayCurrency ??
+      'USD')
+    : anonymous;
+  const mutation = useMutation({
+    mutationKey: [...mutationKeys.account.updateSettings],
+    mutationFn: async (input: { currency: DisplayCurrency; sessionId: string; userId: string }) => {
+      const updated = await authenticatedApiCall(oxyServices, input.sessionId, () =>
+        oxyServices.users.updateMe({ userPreferences: { displayCurrency: input.currency } }),
+      );
+      if (updated.id !== input.userId) throw new Error('Account changed. Please try again.');
+      return updated;
+    },
+    onSuccess: (updated, input) => {
+      client.setQueryData(queryKeys.accounts.current(input.sessionId), updated);
+      if (useAuthStore.getState().user?.id === input.userId)
+        useAuthStore.getState().setUser(updated);
+    },
+  });
+  function selectCurrency(next: DisplayCurrency) {
+    if (!DISPLAY_CURRENCIES.includes(next)) return;
+    if (!isAuthenticated) {
+      anonymousCurrency = next;
+      for (const listener of anonymousListeners) listener();
+      return;
+    }
+    if (activeSessionId && user?.id)
+      mutation.mutate({ currency: next, sessionId: activeSessionId, userId: user.id });
+  }
+  return { currency, selectCurrency, isSaving: mutation.isPending, error: mutation.error };
+}

package/src/ui/hooks/useDisplayPrice.ts

@@ -0,0 +1,40 @@
+import { useQuery } from '@tanstack/react-query';
+import { useEffect, useState } from 'react';
+import { convertDisplayAmount, readDisplayRates } from '@peable.to/sdk/display';
+import { useDisplayCurrency } from './useDisplayCurrency';
+import { useI18n } from './useI18n';
+
+/** Display conversion only. Pricing and checkout request bodies retain their source units. */
+export function useDisplayPrice() {
+  const { currency } = useDisplayCurrency();
+  const { t } = useI18n();
+  const [now, setNow] = useState(Date.now);
+  const rates = useQuery({
+    queryKey: ['display-currency', 'faircoin-indexed-price'],
+    queryFn: ({ signal }) => readDisplayRates({ signal }),
+    enabled: currency !== 'USD',
+    staleTime: 30_000,
+    gcTime: 0,
+    retry: false,
+    refetchInterval: 60_000,
+    refetchOnWindowFocus: 'always',
+  });
+  useEffect(() => {
+    const timer = setInterval(() => setNow(Date.now()), 1000);
+    return () => clearInterval(timer);
+  }, []);
+  function formatUsd(minorUnits: number) {
+    const display = convertDisplayAmount({
+      units: String(minorUnits),
+      currency: 'USD',
+      displayCurrency: currency,
+      rates: rates.isError ? null : rates.data,
+      now,
+    });
+    if (!display) return t('preferences.displayCurrency.unavailable', { currency });
+    return currency === 'USD'
+      ? display
+      : t('preferences.displayCurrency.approximate', { amount: display });
+  }
+  return { currency, formatUsd };
+}