@spree/dashboard-core 1.0.0-beta.3 → 1.0.0-beta.4

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@spree/dashboard-core",
   "license": "MIT",
-  "version": "1.0.0-beta.3",
+  "version": "1.0.0-beta.4",
   "description": "Spree Dashboard framework — registries (table, nav, slot, settings-nav), providers (auth, permission, store), admin SDK client, generic infra hooks, and the defineDashboardPlugin extension API. Developer Preview.",
   "author": "Vendo Connect Inc.",
   "homepage": "https://spreecommerce.org",
@@ -25,6 +25,8 @@
   "types": "./src/index.ts",
   "exports": {
     ".": "./src/index.ts",
+    "./client": "./src/client.ts",
+    "./api-client": "./src/api-client.ts",
     "./plugin": "./src/plugin.ts",
     "./vite": {
       "types": "./src/vite/index.ts",
@@ -65,22 +67,22 @@
     "@dnd-kit/sortable": "^10.0.0",
     "@dnd-kit/utilities": "^3.2.2",
     "@tailwindcss/vite": "^4.2.4",
+    "@types/spark-md5": "^3.0.5",
     "date-fns": "^4.1.0",
     "date-fns-tz": "^3.2.0",
-    "lucide-react": "^1.14.0",
+    "lucide-react": "^1.47.0",
     "spark-md5": "^3.0.2",
     "zod": "^4.4.3"
   },
   "devDependencies": {
     "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
-    "@types/spark-md5": "^3.0.5",
     "tsup": "^8.5.1",
     "typescript": "~6.0.3",
     "vite": "^8.0.16",
     "vitest": "^4.1.5",
-    "@spree/admin-sdk": "^1.0.0-beta.2",
-    "@spree/dashboard-ui": "^1.0.0-beta.3"
+    "@spree/admin-sdk": "^1.0.0-beta.3",
+    "@spree/dashboard-ui": "^1.0.0-beta.4"
   },
   "scripts": {
     "lint": "biome check src",

package/src/api-client.ts

@@ -16,6 +16,34 @@
 
 import type { PermissionRule } from '@spree/admin-sdk'
 
+/** What a panel may change on the signed-in person's own account. */
+export interface PanelAccountParams {
+  first_name?: string
+  last_name?: string
+  /** The panel's UI language, as a bundle code the panel ships (e.g. `de`). */
+  selected_locale?: string
+  /**
+   * ActiveStorage signed id to set the photo, or `null` to remove it. Omit to
+   * leave the current one alone — the only field here where `null` means
+   * something the API acts on.
+   */
+  avatar?: string | null
+}
+
+/**
+ * The account fields both panels' `/me` answer with. Deliberately the subset
+ * they share — anything one API alone returns stays on its own client.
+ */
+export interface PanelAccountUser {
+  id: string
+  email: string
+  first_name?: string | null
+  last_name?: string | null
+  full_name?: string | null
+  selected_locale?: string | null
+  avatar_url?: string | null
+}
+
 /** What the permission provider needs, whichever panel asked. */
 export interface PanelPermissions {
   /**
@@ -90,6 +118,21 @@ export interface PanelApiClient {
     direct_upload: { url: string; headers: Record<string, string> }
     signed_id: string
   }>
+  /**
+   * Writes the signed-in person's own account — their name, photo and the
+   * panel's language.
+   *
+   * Registered rather than imported for the same reason as everything else
+   * here: the account menu's language switcher is one shared component, and
+   * reaching for `adminClient` inside it would send a seller's language
+   * change to an API they hold no credential for.
+   *
+   * Required, unlike most of this contract: the account menu lives in the
+   * shared sidebar, so every panel mounting the shell already offers the
+   * language switcher that calls this. An optional marker would describe a
+   * host that does not exist and push a runtime guard onto every caller.
+   */
+  updateAccount(params: PanelAccountParams): Promise<{ user: PanelAccountUser }>
   stockLocations?: {
     list(params?: Record<string, unknown>): Promise<{ data: PanelStockLocation[]; meta?: unknown }>
     get(id: string): Promise<PanelStockLocation>

package/src/components/address-form-dialog.tsx

@@ -226,8 +226,11 @@ export function AddressFormDialog({
   }, [address?.country_code, storeDefaultCountryCode, form])
 
   const countryCode = form.watch('country_code')
-  const { states, statesRequired } = useCountryStates(countryCode)
-  const useStateCombobox = statesRequired && states.length > 0
+  const { states } = useCountryStates(countryCode)
+  // Show the dropdown whenever the country enumerates subdivisions, not only
+  // when it strictly requires one — so a country like Pakistan still lets the
+  // user pick a province instead of typing a name that may not match.
+  const useStateCombobox = states.length > 0
 
   async function onSubmit(values: AddressFormValues) {
     try {

package/src/components/app-sidebar.tsx

@@ -19,7 +19,7 @@ import { type NavEntry, resolveNavLabel, useNavEntries } from '../lib/nav-regist
 import type { ActionName, SubjectName } from '../lib/permissions'
 import { type Permissions, usePermissions } from '../providers/permission-provider'
 import { useOptionalStore } from '../providers/store-provider'
-import { type NavItem, NavMain } from './nav-main'
+import { NavBottom, type NavItem, NavMain } from './nav-main'
 import { SidebarSearch } from './sidebar-search'
 import { SidebarUser } from './sidebar-user'
 import { StoreSwitcher } from './store-switcher'
@@ -146,6 +146,7 @@ export function AppSidebar({
   const { i18n } = useTranslation()
   const { storeId } = useParams({ strict: false }) as { storeId?: string }
   const { navItems, bottomItems, isLoading } = useNavItems(tenantId ?? storeId ?? 'default')
+  const { isMobile } = useSidebar()
 
   return (
     <Sidebar collapsible="icon" variant="inset" side={primarySidebarSide(i18n.language)} {...props}>
@@ -173,8 +174,21 @@ export function AppSidebar({
             Keyed on `isLoading` alone, not on an empty list: entries without a
             `subject` (Home, Getting Started) skip the permission filter, so the
             list is never actually empty and a length check would never fire. */}
-        {isLoading ? <NavSkeleton /> : <NavMain items={navItems} bottomItems={bottomItems} />}
+        {isLoading ? (
+          <NavSkeleton />
+        ) : (
+          <>
+            <NavMain items={navItems} />
+            {/* Pinned to the foot of a full-height drawer, Settings would sit
+                alone below a screen of empty space, so on a phone it follows
+                the list. */}
+            {isMobile && <NavBottom items={bottomItems} className="mb-2" />}
+          </>
+        )}
       </SidebarContent>
+      {/* Outside the scroll area on desktop, so Settings stays in reach and the
+          list fades out above it rather than scrolling it away. */}
+      {!isLoading && !isMobile && <NavBottom items={bottomItems} className="py-2" />}
       <SidebarFooter className="hidden md:flex">
         <SidebarUser uiLocales={uiLocales} onEditProfile={onEditProfile} />
       </SidebarFooter>

package/src/components/currency-select.tsx

@@ -13,21 +13,7 @@ import { useTranslation } from 'react-i18next'
 import { useDisplayName } from '../hooks/use-display-name'
 import { useOptionalStore } from '../providers/store-provider'
 
-/**
- * Every ISO 4217 currency code the runtime knows about — the active-currency
- * counterpart to the Rails admin's `Money::Currency.table` list. Used for
- * contexts where the merchant can pick *any* currency (a market's currency)
- * rather than one the store already supports. Degrades to an empty list on
- * runtimes without `Intl.supportedValuesOf`, so callers fall back to
- * `supported_currencies`.
- */
-export const ALL_CURRENCY_CODES: string[] = (() => {
-  try {
-    return Intl.supportedValuesOf('currency')
-  } catch {
-    return []
-  }
-})()
+export { ALL_CURRENCY_CODES } from '../lib/currencies'
 
 interface CurrencySelectProps {
   /** Classes for the trigger — used to match a neighbouring control's height. */

package/src/components/nav-main.tsx

@@ -1,5 +1,4 @@
 import {
-  cn,
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
@@ -279,20 +278,25 @@ function NavItemContent({
   )
 }
 
-export function NavMain({ items, bottomItems }: { items: NavItem[]; bottomItems?: NavItem[] }) {
-  const routerState = useRouterState()
-  const currentPath = routerState.location.pathname
-  const { state, isMobile, setOpenMobile } = useSidebar()
-  const isCollapsed = state === 'collapsed'
-  // Close the drawer as the link is tapped. Done here rather than in an effect
-  // watching the path: this tree renders *inside* the Sheet, so it remounts on
-  // every open and an effect could not tell "just opened" from "just navigated".
-  const handleLinkTap = useCallback(
+// Close the drawer as the link is tapped. Done here rather than in an effect
+// watching the path: this tree renders *inside* the Sheet, so it remounts on
+// every open and an effect could not tell "just opened" from "just navigated".
+function useCloseDrawerOnLinkTap() {
+  const { isMobile, setOpenMobile } = useSidebar()
+  return useCallback(
     (event: React.MouseEvent) => {
       if (isMobile && (event.target as HTMLElement).closest('a')) setOpenMobile(false)
     },
     [isMobile, setOpenMobile],
   )
+}
+
+export function NavMain({ items }: { items: NavItem[] }) {
+  const routerState = useRouterState()
+  const currentPath = routerState.location.pathname
+  const { state, isMobile } = useSidebar()
+  const isCollapsed = state === 'collapsed'
+  const handleLinkTap = useCloseDrawerOnLinkTap()
   // One controller for the whole rail so only a single hover menu is ever open.
   const hoverMenu = useHoverMenuController()
 
@@ -325,35 +329,44 @@ export function NavMain({ items, bottomItems }: { items: NavItem[]; bottomItems?
           ))}
         </SidebarMenu>
       </SidebarGroup>
+    </div>
+  )
+}
 
-      {bottomItems && bottomItems.length > 0 && (
-        // `mt-auto` pins Settings to the foot of the desktop rail. In a
-        // full-height drawer that strands it alone below a screen of empty
-        // space, so on mobile it simply follows the list.
-        <SidebarGroup className={cn('mb-2', !isMobile && 'mt-auto')}>
-          <SidebarMenu>
-            {bottomItems.map((item) => {
-              const isActive =
-                currentPath === item.url ||
-                (item.url !== '/' && isPathWithin(currentPath, item.url))
+/** The entries kept apart from the main list — Settings, and anything registered beside it. */
+export function NavBottom({ items, className }: { items: NavItem[]; className?: string }) {
+  const currentPath = useRouterState().location.pathname
+  const isCollapsed = useSidebar().state === 'collapsed'
+  const handleLinkTap = useCloseDrawerOnLinkTap()
 
-              return (
-                <SidebarMenuItem key={item.title}>
-                  <SidebarMenuButton tooltip={item.title} asChild isActive={isActive}>
-                    {/* `aria-label` for the same reason as the main nav above:
-                        collapsed mode hides the label, and Settings lives here
-                        — the one place the rail is collapsed by default. */}
-                    <Link to={item.url} aria-label={isCollapsed ? item.title : undefined}>
-                      <NavIcon icon={item.icon} isActive={isActive} />
-                      <span>{item.title}</span>
-                    </Link>
-                  </SidebarMenuButton>
-                </SidebarMenuItem>
-              )
-            })}
-          </SidebarMenu>
-        </SidebarGroup>
-      )}
+  if (items.length === 0) return null
+
+  return (
+    // biome-ignore lint/a11y/noStaticElementInteractions: delegated link taps only
+    // biome-ignore lint/a11y/useKeyWithClickEvents: links keep their own keyboard behaviour
+    <div onClick={handleLinkTap} className="contents">
+      <SidebarGroup className={className}>
+        <SidebarMenu>
+          {items.map((item) => {
+            const isActive =
+              currentPath === item.url || (item.url !== '/' && isPathWithin(currentPath, item.url))
+
+            return (
+              <SidebarMenuItem key={item.title}>
+                <SidebarMenuButton tooltip={item.title} asChild isActive={isActive}>
+                  {/* `aria-label` for the same reason as the main nav: collapsed
+                      mode hides the label, and Settings lives here — the one
+                      place the rail is collapsed by default. */}
+                  <Link to={item.url} aria-label={isCollapsed ? item.title : undefined}>
+                    <NavIcon icon={item.icon} isActive={isActive} />
+                    <span>{item.title}</span>
+                  </Link>
+                </SidebarMenuButton>
+              </SidebarMenuItem>
+            )
+          })}
+        </SidebarMenu>
+      </SidebarGroup>
     </div>
   )
 }

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

@@ -34,7 +34,7 @@ export function SheetTopBar({
   if (!collapsed) return null
 
   return (
-    <div className="hidden min-h-8 items-center gap-2 px-4 pt-3 md:flex lg:px-6">
+    <div className="hidden min-h-8 items-center gap-2 px-4 pt-3 md:flex">
       {!inSettings && (
         <SidebarTrigger className="-ms-1 shrink-0 text-muted-foreground hover:bg-accent hover:text-foreground" />
       )}

package/src/components/table-toolbar.tsx

@@ -306,8 +306,6 @@ export function TableToolbar({
                 <PopoverContent align="start" className="w-[min(480px,calc(100vw-1rem))] p-0">
                   <FilterPanel
                     columns={panelColumns}
-                    allColumns={filterableColumns}
-                    quickFilterKeys={quickFilterKeys}
                     filters={filters}
                     onApply={(f) => {
                       onFiltersChange(f)
@@ -1233,22 +1231,14 @@ function InlineValueList({
  */
 function FilterPanel({
   columns,
-  allColumns,
-  quickFilterKeys,
   filters,
   onApply,
   onChange,
 }: {
-  /** Fields offered first — those with no quick control of their own. */
+  /** The fields with no quick control of their own. A field that has one is
+   *  filtered there alone — its checkbox list already says "is" and "is not",
+   *  so offering it here too only listed the same field twice. */
   columns: ColumnDef[]
-  /** Every filterable field. The ones absent from `columns` are listed after
-   *  them, for the operators their quick control cannot express. */
-  allColumns: ColumnDef[]
-  /** Which fields have a quick control on the row. Such a field goes to the
-   *  operator picker rather than the one-click value list: the list writes
-   *  `eq`, and only `in` is the operator a control displays, so a one-click
-   *  `eq` would chip while its control still read "All". */
-  quickFilterKeys: Set<string>
   filters: FilterRule[]
   /** Commit and close — for the filters that are finished in one action. */
   onApply: (filters: FilterRule[]) => void
@@ -1269,9 +1259,7 @@ function FilterPanel({
   // strand a half-entered range.
   const [customRange, setCustomRange] = useState<{ from: string; to: string } | null>(null)
 
-  // Resolved against every field, not just the offered ones: the switch
-  // select can land on a quick-filtered field the list deliberately omits.
-  const column = allColumns.find((c) => c.key === field)
+  const column = columns.find((c) => c.key === field)
   const type = column?.filterType ?? 'string'
   const operators = useMemo(
     () => getOperators(type).map((op) => ({ value: op.value, label: t(op.labelKey) })),
@@ -1284,18 +1272,12 @@ function FilterPanel({
   // Types whose values are chosen from a list rather than typed. `multi` ones
   // accumulate a set and need an explicit Apply; the single ones commit on the
   // click that picks them.
-  // A field whose quick control already covers the straightforward case is
-  // here for the operators that control cannot express, so it skips the
-  // shorthands — the value list and the date presets — and goes to the
-  // operator picker. Those shorthands write exactly what the control already
-  // writes, which is the one thing the panel does not need to offer twice.
-  const quickFiltered = Boolean(field) && quickFilterKeys.has(field as string)
-  const multi = !quickFiltered && (type === 'tags' || type === 'resource' || type === 'currency')
+  const multi = type === 'tags' || type === 'resource' || type === 'currency'
   // Dates are their own shape: a list of relative presets, with the calendar
   // behind "custom". Same presets the quick filter offers, so a range means
   // the same thing wherever it was set.
-  const dated = !quickFiltered && type === 'date'
-  const listed = !quickFiltered && (type === 'enum' || type === 'boolean' || multi)
+  const dated = type === 'date'
+  const listed = type === 'enum' || type === 'boolean' || multi
   // The header search filters the list below it, so it earns its place only
   // when there is a list: the fields, or a list-shaped type's values.
   const searchable = (!field || listed) && !dated
@@ -1319,18 +1301,8 @@ function FilterPanel({
     return matching(columns)
   }, [columns, query])
 
-  // The fields a quick control already owns, listed under their own heading
-  // below the rest. They are the only route to an operator the control cannot
-  // express, and burying them entirely is what left `status is not active`
-  // unbuildable from anywhere.
-  const visibleQuickFields = useMemo(() => {
-    const offered = allColumns.filter((c) => quickFilterKeys.has(c.key))
-    const needle = query.trim().toLowerCase()
-    return needle ? offered.filter((c) => c.label.toLowerCase().includes(needle)) : offered
-  }, [allColumns, quickFilterKeys, query])
-
   function chooseField(key: string) {
-    const col = allColumns.find((c) => c.key === key)
+    const col = columns.find((c) => c.key === key)
     const firstOperator = getOperators(col?.filterType ?? 'string')[0].value
     setField(key)
     setOperator(firstOperator)
@@ -1507,32 +1479,6 @@ function FilterPanel({
             </button>
           ))}
 
-        {/* The fields that already have a control on the row. Set apart under
-            a heading rather than mixed in, because picking one here means
-            something narrower than picking any field above: not "filter by
-            status" — the control does that — but "filter by status in a way
-            the control cannot say". */}
-        {!field && visibleQuickFields.length > 0 && (
-          <>
-            {visibleFields.length > 0 && <div className="my-1 border-t" />}
-            <p className="px-2 py-1.5 text-xs text-muted-foreground">
-              {t('admin.components.table_toolbar.more_conditions')}
-            </p>
-            {visibleQuickFields.map((col) => (
-              <button
-                key={col.key}
-                type="button"
-                data-slot="filter-panel-item"
-                className="flex w-full items-center justify-between gap-2 rounded-md px-2 py-1.5 text-left transition-colors hover:bg-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50"
-                onClick={() => chooseField(col.key)}
-              >
-                {col.label}
-                <ChevronRightIcon className="size-3.5 shrink-0 text-muted-foreground" />
-              </button>
-            ))}
-          </>
-        )}
-
         {/* Stage two, list-shaped types: the values themselves, one click to
             apply. No operator control — "is" is the only thing a list of
             values can mean, and offering "is not" here would double the list's
@@ -1737,7 +1683,7 @@ function FilterPanel({
 
         {/* Nothing matched the search — say so rather than showing a blank
             panel that reads as broken. */}
-        {((!field && visibleFields.length === 0 && visibleQuickFields.length === 0) ||
+        {((!field && visibleFields.length === 0) ||
           (field && listed && !multi && listOptions.length === 0)) && (
           <p className="px-2 py-6 text-center text-muted-foreground">
             {t('admin.common.no_results')}

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

@@ -11,7 +11,11 @@ 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'
+import {
+  resolveSettingsBreadcrumbLabel,
+  type SettingsNavEntry,
+  useSettingsNav,
+} from '../lib/settings-nav-registry'
 
 interface Crumb {
   label: string
@@ -190,7 +194,10 @@ function buildCrumbs({
     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}` })
+      crumbs.push({
+        label: resolveSettingsBreadcrumbLabel(entry, t),
+        to: `${settingsRoot}${entry.path}`,
+      })
     }
     return crumbs
   }

package/src/hooks/use-switch-admin-locale.ts

@@ -1,6 +1,6 @@
 import { toastManager } from '@spree/dashboard-ui'
 import { useTranslation } from 'react-i18next'
-import { adminClient } from '../client'
+import { getApiClient } from '../api-client'
 import { i18n, markGenuineLocaleChoice, switchLocale } from '../lib/i18n'
 import { useAuth } from './use-auth'
 
@@ -36,8 +36,17 @@ export function useSwitchAdminLocale() {
   return async (code: string): Promise<void> => {
     // Already adopted on the account AND on screen — nothing to do.
     if (code === user?.selected_locale && code === i18n.language) return
+    // Resolved OUTSIDE the try: `getApiClient` throws a named error when no
+    // client is registered, and that is a misconfigured host rather than a
+    // failed save — caught below it would surface as "we could not save your
+    // language", which sends the reader looking in the wrong place.
+    //
+    // Through the registered client rather than `adminClient`: this hook runs
+    // in the account menu, which both panels mount, and a seller's language
+    // change sent to the Admin API is a request they hold no credential for.
+    const { updateAccount } = getApiClient()
     try {
-      const { user: updated } = await adminClient.me.update({ selected_locale: code })
+      const { user: updated } = await updateAccount({ selected_locale: code })
       updateUser(updated)
       if (code !== i18n.language) {
         // Displayed language changes — persist the genuine choice + reload.

package/src/lib/currencies.ts

@@ -0,0 +1,15 @@
+/**
+ * Every ISO 4217 currency code the runtime knows about — the active-currency
+ * counterpart to the Rails admin's `Money::Currency.table` list. Used for
+ * contexts where the merchant can pick *any* currency (a market's currency)
+ * rather than one the store already supports. Degrades to an empty list on
+ * runtimes without `Intl.supportedValuesOf`, so callers fall back to
+ * `supported_currencies`.
+ */
+export const ALL_CURRENCY_CODES: string[] = (() => {
+  try {
+    return Intl.supportedValuesOf('currency')
+  } catch {
+    return []
+  }
+})()

package/src/lib/form-mappers.ts

@@ -1,3 +1,5 @@
+import type { PanelAccountParams } from '../api-client'
+
 /**
  * Treat a blank or whitespace-only string as "not set" — common when mapping
  * form values to API params, where a blank `<input>` should become `undefined`
@@ -104,3 +106,41 @@ export function editableAddressToStockLocationParams(values: {
     phone: values.phone,
   }
 }
+
+/**
+ * The signed-in person's own account, mapped from either panel's edit form to
+ * the params its API accepts.
+ *
+ * Shared because the three rules here are the same on both panels and each is
+ * easy to get subtly wrong:
+ *
+ *  - A name is sent as typed, empty string included. Blank is how a person
+ *    removes a name they once gave — the model normalizes it away — so
+ *    coercing blank to `undefined` would drop the field and leave the old name
+ *    in place while the form reported success.
+ *  - A blank language is omitted instead: it means none was chosen, never
+ *    "clear the one I have".
+ *  - The photo is a three-state field — a fresh upload sends its signed id, an
+ *    explicit clear sends `null` to purge the attachment, and an untouched
+ *    field is left out entirely.
+ */
+export function accountFormToParams(values: {
+  first_name?: string | null
+  last_name?: string | null
+  selected_locale?: string | null
+  avatar_signed_id: string | null
+  avatar_cleared: boolean
+}): PanelAccountParams {
+  return {
+    first_name: values.first_name ?? undefined,
+    last_name: values.last_name ?? undefined,
+    selected_locale: blankToUndefined(values.selected_locale),
+    ...avatarParam(values.avatar_signed_id, values.avatar_cleared),
+  }
+}
+
+function avatarParam(signedId: string | null, cleared: boolean) {
+  if (signedId) return { avatar: signedId }
+  if (cleared) return { avatar: null }
+  return {}
+}

package/src/lib/fulfillment-items.test.ts

@@ -82,6 +82,35 @@ describe('fulfillmentItemRows', () => {
     })
   })
 
+  it('names an exchange replacement by its own variant, not the original line item', () => {
+    const rows = fulfillmentItemRows(
+      fulfillment({
+        fulfillment_items: [
+          {
+            line_item_id: 'li_1',
+            variant_id: 'variant_2',
+            name: 'Blender',
+            options_text: 'White',
+            quantity: 1,
+          },
+        ],
+      }),
+      [lineItem({ variant_id: 'variant_1' })],
+    )
+
+    expect(rows).toEqual([
+      {
+        key: 'li_1:variant_2',
+        lineItem: expect.objectContaining({ id: 'li_1' }),
+        name: 'Blender',
+        optionsText: 'White',
+        thumbnailUrl: null,
+        displayPrice: null,
+        quantity: 1,
+      },
+    ])
+  })
+
   it('keys an item with no line item by its variant so it still renders', () => {
     const rows = fulfillmentItemRows(
       fulfillment({