@spree/dashboard-core 0.13.0 → 1.0.0-beta.1

package/src/components/tag-combobox.tsx

@@ -13,9 +13,10 @@ import {
 import { useQuery } from '@tanstack/react-query'
 import { useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import { adminClient } from '../client'
+import { getApiClient } from '../api-client'
 import { useAuth } from '../hooks/use-auth'
 import type { TaggableType } from '../lib/table-registry'
+import { useTenantId } from '../providers/tenant-provider'
 
 export type { TaggableType }
 
@@ -35,11 +36,18 @@ export function TagCombobox({
   const anchorRef = useComboboxAnchor()
   const [inputValue, setInputValue] = useState('')
   const { isAuthenticated } = useAuth()
+  const tenantId = useTenantId()
+
+  // Through the registered client, so a panel without a tag vocabulary
+  // simply has none rather than calling an API it holds no key for.
+  const tagsClient = getApiClient().tags
 
   const { data } = useQuery({
-    queryKey: ['admin-tags', taggableType],
-    queryFn: () => adminClient.tags.list({ taggable_type: taggableType }),
-    enabled: isAuthenticated,
+    // Tenant-scoped: tag vocabularies are per-store, so a shared key would
+    // serve one store's tags to the next for as long as the result stays fresh.
+    queryKey: ['panel-tags', tenantId, taggableType],
+    queryFn: () => tagsClient?.list({ taggable_type: taggableType }),
+    enabled: isAuthenticated && Boolean(tagsClient),
     staleTime: 60_000,
   })
 

package/src/components/top-bar-breadcrumbs.tsx

@@ -0,0 +1,235 @@
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from '@spree/dashboard-ui'
+import { MenuIcon } from '@spree/dashboard-ui/icons'
+import { Link, useParams, useRouterState } from '@tanstack/react-router'
+import { Fragment, type ReactNode, useMemo } from 'react'
+import { useTranslation } from 'react-i18next'
+import { isPathWithin, type NavEntry, resolveNavLabel, useNavEntries } from '../lib/nav-registry'
+import { type SettingsNavEntry, useSettingsNav } from '../lib/settings-nav-registry'
+
+interface Crumb {
+  label: string
+  /** Omitted on the final crumb, which renders as plain text. */
+  to?: string
+}
+
+/**
+ * Location trail for the TopBar, derived from the current path by matching it
+ * against the nav registries. Fills the empty space beside the search box and
+ * gives deep pages the orientation the collapsed sidebars stop providing.
+ *
+ * Only segments the registries know are named. A record-detail path
+ * (`/settings/delivery-profiles/dp_123`) resolves as far as its section and
+ * stops there — inventing a crumb for an id the shell can't name would be
+ * worse than a shorter trail, and the page's own `PageHeader` carries the
+ * record's title anyway.
+ */
+export function TopBarBreadcrumbs({ tenantId }: { tenantId?: string } = {}) {
+  const trail = useCrumbs(tenantId)
+  if (!trail) return null
+
+  return <CrumbTrail crumbs={trail.crumbs} pathname={trail.pathname} className="min-w-0" />
+}
+
+/**
+ * Breadcrumbs for a narrow screen, as a row beneath `MobileTopBar` rather
+ * than inside it — that bar has no width to spare on a phone, so the trail
+ * lives on its own line and scrolls sideways instead of wrapping.
+ *
+ * Only rendered where it earns the vertical space: inside settings, and on
+ * record pages. A top-level list page would only repeat its own heading.
+ *
+ * Inside settings the leading crumb is a button rather than a link — it opens
+ * the settings nav sheet, which is the fastest way between two settings pages
+ * on a screen with no settings sidebar.
+ */
+export function MobileBreadcrumbBar({
+  onOpenSettingsNav,
+  tenantId,
+}: {
+  onOpenSettingsNav?: () => void
+  /** See `SettingsSidebar` — a seller id on the marketplace panel. */
+  tenantId?: string
+}) {
+  const trail = useCrumbs(tenantId)
+  if (!trail) return null
+
+  const { crumbs, pathname, inSettings } = trail
+
+  return (
+    <div className="flex h-11 shrink-0 items-center border-b border-border bg-background px-4 md:hidden">
+      <CrumbTrail
+        crumbs={crumbs}
+        pathname={pathname}
+        className="min-w-0 overflow-x-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
+        // In settings the leading crumb opens the nav sheet instead of
+        // navigating — it is the only way between settings pages on a phone.
+        renderFirst={
+          inSettings && onOpenSettingsNav
+            ? (crumb) => (
+                <button
+                  type="button"
+                  onClick={onOpenSettingsNav}
+                  // 44px tall via the row; the negative inline margin keeps the
+                  // text on the page gutter while the tap area overhangs it.
+                  className="-ms-2 inline-flex h-11 items-center gap-1 rounded-lg px-2 text-sm text-muted-foreground transition-colors hover:text-foreground"
+                >
+                  <MenuIcon className="size-4" />
+                  {crumb.label}
+                </button>
+              )
+            : undefined
+        }
+      />
+    </div>
+  )
+}
+
+function CrumbTrail({
+  crumbs,
+  pathname,
+  className,
+  renderFirst,
+}: {
+  crumbs: Crumb[]
+  pathname: string
+  className?: string
+  /** Replaces the leading crumb's content — used for the settings nav trigger. */
+  renderFirst?: (crumb: Crumb) => ReactNode
+}) {
+  return (
+    <Breadcrumb className={className}>
+      <BreadcrumbList className="flex-nowrap">
+        {crumbs.map((crumb, index) => {
+          // The trail ends in a link, not plain text, when the last crumb names
+          // a section the current page sits *inside* (a record page, whose own
+          // name the registries can't supply) — there it is the way back up.
+          const isCurrentPage = crumb.to === pathname
+          const custom = index === 0 ? renderFirst?.(crumb) : undefined
+          return (
+            // Crumbs are a fixed trail for one path — no stable id beyond
+            // position. The separator is a sibling `<li>`, never a child of
+            // BreadcrumbItem — nesting one list item inside another is invalid.
+            // biome-ignore lint/suspicious/noArrayIndexKey: positional by nature
+            <Fragment key={index}>
+              <BreadcrumbItem className="min-w-0">
+                {custom ??
+                  (isCurrentPage || !crumb.to ? (
+                    <BreadcrumbPage className="truncate">{crumb.label}</BreadcrumbPage>
+                  ) : (
+                    <BreadcrumbLink asChild>
+                      <Link to={crumb.to} className="truncate">
+                        {crumb.label}
+                      </Link>
+                    </BreadcrumbLink>
+                  ))}
+              </BreadcrumbItem>
+              {index < crumbs.length - 1 && <BreadcrumbSeparator />}
+            </Fragment>
+          )
+        })}
+      </BreadcrumbList>
+    </Breadcrumb>
+  )
+}
+
+/** Resolves the trail for the current path, or null when there is nothing worth showing. */
+function useCrumbs(tenantId?: string): {
+  crumbs: Crumb[]
+  pathname: string
+  inSettings: boolean
+} | null {
+  const { t } = useTranslation()
+  const { storeId: routeStoreId } = useParams({ strict: false }) as { storeId?: string }
+  const storeId = tenantId ?? routeStoreId
+  const pathname = useRouterState({ select: (s) => s.location.pathname })
+  const { main, bottom } = useNavEntries()
+  const settings = useSettingsNav()
+
+  // Memoized because both breadcrumb surfaces are mounted at once (the
+  // responsive split is CSS, not conditional mounting), so an unmemoized pass
+  // would run twice on every render of the app-wide TopBar.
+  return useMemo(() => {
+    if (!storeId) return null
+
+    const crumbs = buildCrumbs({ pathname, storeId, main, bottom, settings: settings.all, t })
+    // A lone crumb naming the page you are already on says nothing the
+    // PageHeader doesn't. A lone crumb naming the *section* of a record page
+    // does — it is the way back up — so that one stays.
+    if (crumbs.length === 0) return null
+    if (crumbs.length === 1 && crumbs[0].to === pathname) return null
+
+    return { crumbs, pathname, inSettings: isPathWithin(pathname, `/${storeId}/settings`) }
+  }, [pathname, storeId, main, bottom, settings.all, t])
+}
+
+function buildCrumbs({
+  pathname,
+  storeId,
+  main,
+  bottom,
+  settings,
+  t,
+}: {
+  pathname: string
+  storeId: string
+  main: NavEntry[]
+  bottom: NavEntry[]
+  settings: SettingsNavEntry[]
+  t: (key: string) => string
+}): Crumb[] {
+  const settingsRoot = `/${storeId}/settings`
+
+  if (isPathWithin(pathname, settingsRoot)) {
+    const crumbs: Crumb[] = [{ label: t('admin.settings_page.title'), to: settingsRoot }]
+    const entry = bestMatch(settings, (e) => `${settingsRoot}${e.path}`, pathname)
+    if (entry) {
+      crumbs.push({ label: resolveNavLabel(entry, t), to: `${settingsRoot}${entry.path}` })
+    }
+    return crumbs
+  }
+
+  // One pass handles both a page under its parent's path and a child that sits
+  // outside it (Returns lives at `/returns` but nests under Orders), so a
+  // matching child alone is enough to claim the trail.
+  for (const parent of [...main, ...bottom]) {
+    const parentUrl = `/${storeId}${parent.path}`
+    const child = bestMatch(parent.children ?? [], (c) => `/${storeId}${c.path}`, pathname)
+    const parentMatches = parent.path !== '/' && isPathWithin(pathname, parentUrl)
+    if (!child && !parentMatches) continue
+
+    const crumbs: Crumb[] = [{ label: resolveNavLabel(parent, t), to: parentUrl }]
+    if (child) crumbs.push({ label: resolveNavLabel(child, t), to: `/${storeId}${child.path}` })
+    return crumbs
+  }
+
+  return []
+}
+
+/**
+ * The matching entry whose URL is longest, so `/webhooks/wh_1` prefers
+ * `/webhooks` over a shorter entry that also prefixes it. Written as a scan
+ * rather than sort-then-find: this runs for every entry on every navigation,
+ * and the ordering is needed only to break ties.
+ */
+function bestMatch<T>(
+  entries: readonly T[],
+  urlOf: (entry: T) => string,
+  pathname: string,
+): T | undefined {
+  let best: T | undefined
+  let bestLength = -1
+  for (const entry of entries) {
+    const url = urlOf(entry)
+    if (!isPathWithin(pathname, url) || url.length <= bestLength) continue
+    best = entry
+    bestLength = url.length
+  }
+  return best
+}

package/src/components/wizard-close-guard.test.ts

@@ -0,0 +1,54 @@
+import { describe, expect, it, vi } from 'vitest'
+
+// The decision table both wizards close by: which reasons ask before
+// discarding and which pass straight through. The components wire this to Base
+// UI's `onOpenChange` reason; `catalogs.spec.ts` covers that wiring in a
+// browser, and this pins the rules themselves.
+function makeHandler(
+  hasUnsavedChanges: boolean,
+  confirm: () => Promise<boolean>,
+  close: () => void,
+) {
+  return async (next: boolean, details?: { reason?: string }) => {
+    if (next) return
+    if (details?.reason === 'escape-key' || details?.reason === 'outside-press') {
+      if (hasUnsavedChanges && !(await confirm())) return
+      close()
+      return
+    }
+    close()
+  }
+}
+
+describe('wizard close guard', () => {
+  it('asks before Escape discards unsaved work', async () => {
+    const confirm = vi.fn().mockResolvedValue(false)
+    const close = vi.fn()
+    await makeHandler(true, confirm, close)(false, { reason: 'escape-key' })
+    expect(confirm).toHaveBeenCalledOnce()
+    expect(close).not.toHaveBeenCalled()
+  })
+
+  it('closes on Escape once discarding is confirmed', async () => {
+    const confirm = vi.fn().mockResolvedValue(true)
+    const close = vi.fn()
+    await makeHandler(true, confirm, close)(false, { reason: 'escape-key' })
+    expect(close).toHaveBeenCalledOnce()
+  })
+
+  it('guards a click outside the wizard too', async () => {
+    const confirm = vi.fn().mockResolvedValue(false)
+    const close = vi.fn()
+    await makeHandler(true, confirm, close)(false, { reason: 'outside-press' })
+    expect(confirm).toHaveBeenCalledOnce()
+    expect(close).not.toHaveBeenCalled()
+  })
+
+  it('does not nag when nothing has been entered', async () => {
+    const confirm = vi.fn()
+    const close = vi.fn()
+    await makeHandler(false, confirm, close)(false, { reason: 'escape-key' })
+    expect(confirm).not.toHaveBeenCalled()
+    expect(close).toHaveBeenCalledOnce()
+  })
+})

package/src/hooks/use-auto-collapse-sidebar.ts

@@ -0,0 +1,57 @@
+import { useSidebar } from '@spree/dashboard-ui'
+import { useEffect, useRef } from 'react'
+
+/**
+ * Collapses the primary sidebar to its icon rail while `active` is true, and
+ * restores the previous state when it goes false.
+ *
+ * Used by the settings area, where a second full-width nav appears beside the
+ * primary one: two stacked 220px columns leave the settings forms squeezed, so
+ * the primary nav folds down to icons for the duration.
+ *
+ * Only the entering and leaving transitions are driven — a manual toggle while
+ * `active` stays true is left alone, and is what gets remembered on the way
+ * out, so the merchant always keeps the last word.
+ */
+export function useAutoCollapseSidebar(active: boolean) {
+  // Transient on purpose: this collapse is the app's doing, not the
+  // merchant's, so it must not overwrite their remembered preference.
+  const { open, setOpenTransient, isMobile } = useSidebar()
+  // Reading `open` through a ref keeps it out of the effect's dependencies:
+  // the effect must run on the `active` edges only, never on every toggle.
+  const openRef = useRef(open)
+  openRef.current = open
+  const restoreTo = useRef<boolean | null>(null)
+
+  useEffect(() => {
+    // On mobile the primary nav is an overlay sheet, not a column competing
+    // for width, so there is nothing to reclaim. Undo any collapse this hook
+    // already made before bailing out: `useIsMobile` reports false on its
+    // first render, so a phone loading straight into settings collapses the
+    // rail and only then learns it is mobile. Dropping the snapshot without
+    // restoring would strand the rail collapsed for the whole session.
+    if (isMobile) {
+      if (restoreTo.current) setOpenTransient(true)
+      restoreTo.current = null
+      return
+    }
+
+    if (active) {
+      // Only snapshot on the way in. Re-running while already active (e.g.
+      // navigating between two settings pages) must not re-capture a state
+      // this hook itself imposed.
+      if (restoreTo.current === null) restoreTo.current = openRef.current
+      if (openRef.current) setOpenTransient(false)
+      return
+    }
+
+    if (restoreTo.current !== null) {
+      const wasOpenOnEntry = restoreTo.current
+      restoreTo.current = null
+      // Restore only if the rail is still collapsed — i.e. still as this hook
+      // left it. A merchant who expanded it during settings has said what they
+      // want, and forcing the entry-time value back would overrule them.
+      if (wasOpenOnEntry && !openRef.current) setOpenTransient(true)
+    }
+  }, [active, isMobile, setOpenTransient])
+}

package/src/hooks/use-command-palette.tsx

@@ -32,3 +32,16 @@ export function useCommandPalette(): CommandPaletteState {
   }
   return ctx
 }
+
+/**
+ * The palette state when one is mounted, `null` otherwise.
+ *
+ * The shared app shell offers a search affordance, but not every panel has a
+ * palette behind it — the seller panel deliberately mounts none. This lets the
+ * shell omit the trigger there rather than render a button that throws on
+ * click, and keeps `useCommandPalette` strict for callers that genuinely
+ * require the provider.
+ */
+export function useOptionalCommandPalette(): CommandPaletteState | null {
+  return useContext(CommandPaletteContext)
+}

package/src/hooks/use-countries.test.ts

@@ -0,0 +1,56 @@
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import { type PanelApiClient, setApiClient } from '../api-client'
+import { loadCountries, resetCountriesCache } from './use-countries'
+
+function registerClient(listCountries?: PanelApiClient['listCountries']) {
+  setApiClient({ listCountries } as PanelApiClient)
+}
+
+afterEach(() => {
+  resetCountriesCache()
+})
+
+describe('loadCountries', () => {
+  it('calls the API once and reuses the stored list', async () => {
+    const data = [{ iso: 'US', iso3: 'USA', name: 'United States' }]
+    const listCountries = vi.fn().mockResolvedValue({ data })
+    registerClient(listCountries)
+
+    const first = await loadCountries()
+    const second = await loadCountries()
+
+    expect(listCountries).toHaveBeenCalledTimes(1)
+    expect(first).toBe(second)
+    expect(first.data).toEqual(data)
+  })
+
+  it('shares one in-flight request across overlapping callers', async () => {
+    let resolveList!: (value: { data: [] }) => void
+    const listCountries = vi.fn(
+      () =>
+        new Promise<{ data: [] }>((resolve) => {
+          resolveList = resolve
+        }),
+    )
+    registerClient(listCountries)
+
+    const first = loadCountries()
+    const second = loadCountries()
+    resolveList({ data: [] })
+
+    expect(await first).toBe(await second)
+    expect(listCountries).toHaveBeenCalledTimes(1)
+  })
+
+  it('retries after a failed load', async () => {
+    const listCountries = vi
+      .fn()
+      .mockRejectedValueOnce(new Error('network'))
+      .mockResolvedValueOnce({ data: [] })
+    registerClient(listCountries)
+
+    await expect(loadCountries()).rejects.toThrow('network')
+    await expect(loadCountries()).resolves.toEqual({ data: [] })
+    expect(listCountries).toHaveBeenCalledTimes(2)
+  })
+})

package/src/hooks/use-countries.ts

@@ -1,15 +1,61 @@
-import type { Country } from '@spree/admin-sdk'
 import { useQuery } from '@tanstack/react-query'
-import { adminClient } from '../client'
+import { getApiClient, type PanelCountry } from '../api-client'
 
+/**
+ * One process-wide load of the country table.
+ *
+ * Countries are reference data — the same ~250 rows for every store, every
+ * panel, every session — so the first successful fetch is reused for the
+ * rest of the page. React Query's cache alone is not enough: it is dropped
+ * when the last picker unmounts (`gcTime`) and wiped on logout
+ * (`queryClient.clear()`), which is why a country field on every sheet was
+ * hitting the API again.
+ *
+ * A failed load is not stored, so the next picker can retry.
+ */
+let countriesRequest: Promise<{ data: PanelCountry[] }> | null = null
+
+/**
+ * The country list, loaded at most once per page. Subsequent callers share
+ * the same in-flight or resolved promise.
+ *
+ * @returns The panel's country payload (`{ data }`).
+ */
+export function loadCountries(): Promise<{ data: PanelCountry[] }> {
+  if (!countriesRequest) {
+    countriesRequest = (getApiClient().listCountries?.() ?? Promise.resolve({ data: [] })).catch(
+      (error: unknown) => {
+        countriesRequest = null
+        throw error
+      },
+    )
+  }
+
+  return countriesRequest
+}
+
+/** Drops the stored country list so the next read hits the API. For tests. */
+export function resetCountriesCache(): void {
+  countriesRequest = null
+}
+
+/**
+ * Countries for the shared address form, through the registered panel client.
+ *
+ * Deliberately not `adminClient`: this hook backs the one address form both
+ * panels use, and importing the operator's client made a seller's country
+ * list come back empty — the form rendered, and "No countries found" was the
+ * only symptom.
+ */
 export function useCountries() {
   const { data, isLoading } = useQuery({
     queryKey: ['countries'],
-    queryFn: () => adminClient.countries.list({ expand: ['states'] }),
-    staleTime: 1000 * 60 * 30, // 30 minutes — countries rarely change
+    queryFn: loadCountries,
+    staleTime: Number.POSITIVE_INFINITY,
+    gcTime: Number.POSITIVE_INFINITY,
   })
 
-  const countries: Country[] = data?.data ?? []
+  const countries: PanelCountry[] = data?.data ?? []
 
   return { countries, isLoading }
 }

package/src/hooks/use-direct-upload.ts

@@ -1,6 +1,6 @@
 import { useMutation } from '@tanstack/react-query'
 import SparkMD5 from 'spark-md5'
-import { adminClient } from '../client'
+import { getApiClient } from '../api-client'
 
 function computeMD5Checksum(file: File): Promise<string> {
   return new Promise((resolve, reject) => {
@@ -51,7 +51,16 @@ function sameOriginIfRailsDisk(url: string): string {
   }
 }
 
-export function useDirectUpload() {
+interface DirectUploadOptions {
+  /**
+   * Upload to private storage instead of the public bucket. Required for files
+   * that are only ever served through an authorized, signed link — attaching a
+   * blob never moves it between services, so this has to be decided up front.
+   */
+  private?: boolean
+}
+
+export function useDirectUpload(options: DirectUploadOptions = {}) {
   return useMutation({
     mutationFn: async (file: File): Promise<UploadResult> => {
       const checksum = await computeMD5Checksum(file)
@@ -62,13 +71,17 @@ export function useDirectUpload() {
         signed_id: string
       }
       try {
-        response = await adminClient.directUploads.create({
+        const presign = getApiClient().createDirectUpload
+        if (!presign) throw new Error('This panel cannot upload files.')
+
+        response = await presign({
           blob: {
             filename: file.name,
             byte_size: file.size,
             checksum,
             content_type: file.type || 'application/octet-stream',
           },
+          ...(options.private ? { private: true } : {}),
         })
       } catch (err) {
         throw new Error(`Presign failed: ${err instanceof Error ? err.message : err}`)

package/src/hooks/use-export.ts

@@ -1,11 +1,30 @@
-import type { Export, ExportCreateParams } from '@spree/admin-sdk'
+import { toastManager } from '@spree/dashboard-ui'
 import { useMutation } from '@tanstack/react-query'
-import { toast } from 'sonner'
-import { adminClient } from '../client'
+import { getApiClient, type PanelExport, type PanelExportCreateParams } from '../api-client'
 import { downloadFromApi } from '../lib/download'
 import { i18n } from '../lib/i18n'
 import { useAuth } from './use-auth'
 
+/**
+ * The registered client's export methods.
+ *
+ * Throws rather than returning undefined: reaching here means a panel rendered
+ * the export dialog without registering the methods behind it, and every call
+ * would otherwise fail further away with a less useful message.
+ */
+function exportsApi() {
+  const api = getApiClient().exports
+
+  if (!api) {
+    throw new Error(
+      '@spree/dashboard-core: this panel registered no `exports` on its API client, so it ' +
+        'cannot queue an export. Register one, or do not render <ExportButton>.',
+    )
+  }
+
+  return api
+}
+
 const POLL_INTERVAL_MS = 2000
 const POLL_TIMEOUT_MS = 5 * 60 * 1000
 
@@ -16,11 +35,11 @@ class ExportTimeoutError extends Error {
   }
 }
 
-async function pollUntilDone(id: string): Promise<Export> {
+async function pollUntilDone(id: string): Promise<PanelExport> {
   const deadline = Date.now() + POLL_TIMEOUT_MS
 
   while (Date.now() < deadline) {
-    const exp = await adminClient.exports.get(id)
+    const exp = await exportsApi().get(id)
     if (exp.done) return exp
     await new Promise<void>((resolve) => setTimeout(resolve, POLL_INTERVAL_MS))
   }
@@ -28,10 +47,15 @@ async function pollUntilDone(id: string): Promise<Export> {
   throw new ExportTimeoutError()
 }
 
-async function downloadExportFile(exp: Export, token: string | null): Promise<void> {
+async function downloadExportFile(exp: PanelExport, token: string | null): Promise<void> {
   if (!exp.download_url) throw new Error('Export has no download_url')
 
-  await downloadFromApi(token, exp.download_url, exp.filename ?? 'export.csv')
+  await downloadFromApi(
+    token,
+    exp.download_url,
+    exp.filename ?? 'export.csv',
+    getApiClient().downloadHeaders?.() ?? {},
+  )
 }
 
 /**
@@ -43,30 +67,41 @@ export function useExport() {
   const { token } = useAuth()
 
   return useMutation({
-    mutationFn: async (params: ExportCreateParams) => {
+    mutationFn: async (params: PanelExportCreateParams) => {
       // Per-invocation id so concurrent exports don't collide on a single
       // sticky toast.
       const toastId = `export-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`
-      toast.loading(i18n.t('admin.components.export_button.preparing'), { id: toastId })
+      toastManager.add({
+        type: 'loading',
+        title: i18n.t('admin.components.export_button.preparing'),
+        id: toastId,
+      })
 
       try {
-        const created = await adminClient.exports.create(params)
+        const created = await exportsApi().create(params)
         const finished = await pollUntilDone(created.id)
         await downloadExportFile(finished, token)
-        toast.success(i18n.t('admin.components.export_button.downloaded'), { id: toastId })
+        toastManager.add({
+          type: 'success',
+          title: i18n.t('admin.components.export_button.downloaded'),
+          id: toastId,
+        })
         return finished
       } catch (err) {
         if (err instanceof ExportTimeoutError) {
-          toast.info(i18n.t('admin.components.export_button.email_fallback'), {
+          toastManager.add({
+            type: 'info',
+            title: i18n.t('admin.components.export_button.email_fallback'),
             id: toastId,
           })
         } else {
-          toast.error(
-            i18n.t('admin.components.export_button.failed', {
+          toastManager.add({
+            type: 'error',
+            title: i18n.t('admin.components.export_button.failed', {
               message: err instanceof Error ? err.message : String(err),
             }),
-            { id: toastId },
-          )
+            id: toastId,
+          })
         }
         throw err
       }