@12-apps/discounts 1.2.0 → 1.4.0

package/src/react/copy.ts

@@ -0,0 +1,296 @@
+import type {
+  DiscountScope,
+  DiscountTrigger,
+  DiscountType,
+  DiscountWindowState,
+} from "../engine/kinds";
+
+/**
+ * Every word the discounts ADMIN screens put in front of a human — required
+ * host config, with NO defaults.
+ *
+ * The third copy port in this package, after `DiscountRejectionCopy` (what a
+ * buyer is told) and `DiscountsServerCopy` (what an operator is told when a
+ * write is refused). Same rule, for the third time and for the same reason: a
+ * default in the origin's language reads as finished to the next host right up
+ * until a user sees it, and the copy-portability gate exists to refuse exactly
+ * that.
+ *
+ * It is a LOT of keys, and that is the honest count rather than a design
+ * failure. This surface is a grid, a form of fourteen inputs, two pickers, two
+ * card layouts and four confirmation popups; the origin held roughly 1,800
+ * lines, three quarters of which was this. Nothing here has been folded
+ * together to make the interface look smaller — two sentences that happen to
+ * match today in one language are two sentences.
+ *
+ * Grouped by SURFACE rather than alphabetically, because a host fills it in by
+ * walking a screen.
+ *
+ * Interpolation is `{name}`-style and there are exactly four of them, each
+ * documented at its key. A template rather than a function so the pack stays
+ * plain data a host can lint, diff and translate.
+ */
+
+/** The labels for one closed set — every member, so nothing renders raw. */
+type LabelsFor<TKey extends string> = Readonly<Record<TKey, string>>;
+
+/** The list page: its chrome, its columns and its filters. */
+export interface DiscountsScreenCopy {
+  /** The page title, and the last breadcrumb crumb. */
+  readonly title: string;
+  /** The header's explanatory panel — its heading and its paragraph. */
+  readonly aboutTitle: string;
+  readonly aboutBody: string;
+  /** The primary action that opens the create dialog. */
+  readonly create: string;
+  /** Shown when the tenant has no promotions at all. */
+  readonly empty: string;
+  /** The exported file's base name, without extension. */
+  readonly exportFileName: string;
+  /** While the first page is loading. */
+  readonly loading: string;
+  /** The read failed: a heading, and the button that tries again. */
+  readonly loadFailed: string;
+  readonly retry: string;
+  /** Column headers, which are also the export's column keys. */
+  readonly columns: {
+    readonly name: string;
+    readonly value: string;
+    readonly type: string;
+    readonly scope: string;
+    readonly trigger: string;
+    readonly window: string;
+    readonly code: string;
+    readonly usageCount: string;
+    readonly active: string;
+  };
+  /** The two words a boolean column and its filter pill render. */
+  readonly yes: string;
+  readonly no: string;
+}
+
+/** The four closed sets, each labelled in full. */
+export interface DiscountsVocabularyCopy {
+  readonly type: LabelsFor<DiscountType>;
+  readonly scope: LabelsFor<DiscountScope>;
+  readonly trigger: LabelsFor<DiscountTrigger>;
+  readonly window: LabelsFor<DiscountWindowState>;
+}
+
+/** The validity sentence, in all four shapes a nullable window can take. */
+export interface DiscountsWindowCopy {
+  /** Neither bound set — it runs until somebody stops it. */
+  readonly always: string;
+  /** Only a start. `{date}`. */
+  readonly from: string;
+  /** Only an end. `{date}`. */
+  readonly until: string;
+  /** Both. `{from}` and `{to}`. */
+  readonly between: string;
+}
+
+/** The create/edit form: its inputs, and every rule it can refuse for. */
+export interface DiscountsFormCopy {
+  readonly createTitle: string;
+  readonly editTitle: string;
+  readonly submitCreate: string;
+  readonly submitEdit: string;
+  readonly name: string;
+  readonly type: string;
+  readonly percentOff: string;
+  /** The example inside the empty percentage input. */
+  readonly percentPlaceholder: string;
+  readonly amountOff: string;
+  /** The combo's total price, shown only for a BUNDLE_PRICE rule. */
+  readonly bundlePrice: string;
+  /** How many of the matched units are given away, for a FREE_UNITS rule. */
+  readonly freeUnits: string;
+  /** Under it: what "leve 3 pague 2" means in this rule's own numbers. */
+  readonly freeUnitsHint: string;
+  readonly trigger: string;
+  readonly code: string;
+  /** The example inside the empty coupon input. */
+  readonly codePlaceholder: string;
+  readonly scope: string;
+  readonly startsAt: string;
+  readonly endsAt: string;
+  readonly minSubtotal: string;
+  readonly usageLimit: string;
+  readonly perBuyerLimit: string;
+  /** How many times ONE cart may claim the combo. Blank = as often as it fits. */
+  readonly maxComboApplications: string;
+  readonly maxComboApplicationsHint: string;
+  readonly active: string;
+  readonly activeHint: string;
+  readonly stackable: string;
+  readonly stackableHint: string;
+  /** The banner over a form the operator must fix before it will send. */
+  readonly reviewFields: string;
+  /** The banner over a write the SERVER refused. */
+  readonly saveFailed: string;
+  /** Per-input refusals, each attached to the input it names. */
+  readonly nameRequired: string;
+  readonly invalidPercent: string;
+  readonly invalidAmount: string;
+  readonly invalidBundlePrice: string;
+  readonly invalidFreeUnits: string;
+  /**
+   * "Take 3, three free" is a giveaway, not a promotion — the free count has to
+   * be smaller than what one application takes out of the cart. `{units}` is
+   * that number, so the operator is told the ceiling rather than just refused.
+   */
+  readonly freeUnitsExceedCombo: string;
+  readonly codeRequired: string;
+  readonly categoryTargetRequired: string;
+  readonly itemTargetRequired: string;
+  /** COMBO scope with no groups: there is nothing for the reward to apply to. */
+  readonly comboSlotsRequired: string;
+  /** A group naming nothing can never be filled, so the combo never fires. */
+  readonly comboSlotTargetRequired: string;
+  readonly invalidComboQuantity: string;
+  readonly invalidMaxComboApplications: string;
+  readonly endsBeforeStarts: string;
+}
+
+/**
+ * The combo builder — the "2 refrigerantes + 2 hambúrgueres + 2 batatas" half
+ * of a promotion (FUT-268).
+ *
+ * A combo is a list of GROUPS, each a quantity and the rows that can fill it,
+ * and the reward is whichever value the type asks for. So this group covers the
+ * builder's chrome; the reward's own input is a `form` key beside the other
+ * value fields, because to the operator it is one.
+ */
+export interface DiscountsComboCopy {
+  /** The section heading over the group list. */
+  readonly title: string;
+  /** One sentence saying what a group is, in the merchant's terms. */
+  readonly hint: string;
+  /** The button that appends a group. */
+  readonly addSlot: string;
+  /** The accessible name of one group's remove control. `{position}`. */
+  readonly removeSlot: string;
+  /** One group's heading. `{position}` is 1-based — an operator counts from 1. */
+  readonly slot: string;
+  /** The units this group takes. */
+  readonly quantity: string;
+  /** The group's picker label, `{collection}` — the registration's own label. */
+  readonly pick: string;
+  /** Shown when COMBO is chosen and no group exists yet. */
+  readonly empty: string;
+  /**
+   * The offer read back in the operator's own numbers, so a combo can be
+   * checked without saving it. `{units}` and `{groups}`.
+   */
+  readonly summary: string;
+}
+
+/** The target pickers, and what an empty selection says. */
+export interface DiscountsTargetCopy {
+  /** The picker's label, `{collection}` — the registration's own label. */
+  readonly pick: string;
+  /** The placeholder inside a searchable picker, `{collection}`. */
+  readonly search: string;
+  /** Shown under a picker the scope requires and nothing is chosen in. */
+  readonly required: string;
+}
+
+/** The row and card menus, and the two destructive confirmations. */
+export interface DiscountsActionsCopy {
+  /** The kebab's accessible name — announced verbatim by a screen reader. */
+  readonly menu: string;
+  readonly edit: string;
+  readonly delete: string;
+  /** The delete popup for ONE rule. */
+  readonly deleteTitle: string;
+  readonly deleteDescription: string;
+  /** The delete popup for a SELECTION. `{count}`. */
+  readonly deleteManyTitle: string;
+  readonly deleteManyDescription: string;
+  /** When a delete fails and the server said nothing useful. */
+  readonly deleteFailed: string;
+  /** The shared snackbar's heading, over whatever an action reported. */
+  readonly actionFailed: string;
+}
+
+/** The two card layouts. */
+export interface DiscountsCardCopy {
+  /** The chip a switched-off rule carries. Shown only when it is off. */
+  readonly paused: string;
+  /** Headings inside an expanded list-card body. */
+  readonly ruleHeading: string;
+  readonly targetsHeading: string;
+  /** What an ORDER-scoped rule covers. */
+  readonly wholeOrder: string;
+  /** How many rows it points at: one, and `{count}` for the rest. */
+  readonly oneTarget: string;
+  readonly manyTargets: string;
+  /** A CODE rule's secondary line, `{code}`. */
+  readonly withCode: string;
+  /** An empty target run inside a card. */
+  readonly noTargets: string;
+  /** Row labels inside the expanded body. */
+  readonly usage: string;
+  readonly minSubtotal: string;
+  readonly perBuyerLimit: string;
+  readonly unlimited: string;
+}
+
+export interface DiscountsWebCopy {
+  readonly screen: DiscountsScreenCopy;
+  readonly labels: DiscountsVocabularyCopy;
+  readonly window: DiscountsWindowCopy;
+  readonly form: DiscountsFormCopy;
+  readonly combo: DiscountsComboCopy;
+  readonly targets: DiscountsTargetCopy;
+  readonly actions: DiscountsActionsCopy;
+  readonly card: DiscountsCardCopy;
+}
+
+/**
+ * Fill `{name}` placeholders. Unknown names are left alone rather than blanked,
+ * so a pack with a typo shows the typo instead of a hole nobody can trace.
+ */
+export function fill(template: string, values: Readonly<Record<string, string | number>>): string {
+  return template.replace(/\{(\w+)\}/g, (whole, key: string) =>
+    key in values ? String(values[key]) : whole,
+  );
+}
+
+/** Every leaf path of an object, dotted. */
+function leafPaths(value: unknown, prefix = ""): string[] {
+  if (value === null || typeof value !== "object") return prefix === "" ? [] : [prefix];
+  return Object.entries(value as Record<string, unknown>).flatMap(([key, child]) =>
+    leafPaths(child, prefix === "" ? key : `${prefix}.${key}`),
+  );
+}
+
+/** One dotted path out of a pack, or `undefined` where the path does not exist. */
+function read(copy: unknown, path: string): unknown {
+  return path.split(".").reduce<unknown>(
+    (node, key) =>
+      node !== null && typeof node === "object"
+        ? (node as Record<string, unknown>)[key]
+        : undefined,
+    copy,
+  );
+}
+
+/**
+ * The keys a pack is missing or left blank, as dotted paths.
+ *
+ * Walked from a REFERENCE pack rather than from a hand-kept key list: this
+ * interface is seventy-odd keys deep in seven groups, and a list beside it
+ * would be wrong within one release. Only the reference's SHAPE is read, never
+ * its words — `createWebDiscounts` passes the pt-BR pack for that and nothing
+ * of it survives into the answer.
+ */
+export function missingWebCopy(
+  copy: DiscountsWebCopy | undefined,
+  reference: DiscountsWebCopy,
+): string[] {
+  return leafPaths(reference).filter((path) => {
+    const value = read(copy, path);
+    return typeof value !== "string" || value.trim() === "";
+  });
+}

package/src/react/create-web-discounts.tsx

@@ -0,0 +1,162 @@
+"use client";
+
+import { useMemo, type ComponentType, type JSX } from "react";
+
+import { createDiscountsApiClient, type DiscountsApiClient } from "./api";
+import { missingWebCopy, type DiscountsWebCopy } from "./copy";
+import { DiscountForm, type DiscountFormProps } from "./discount-form";
+import type { CurrencyFieldComponent } from "./discount-form-fields";
+import { DiscountsScreen, type DiscountsScreenProps } from "./discounts-screen";
+import { createFormatters, type DiscountsFormatters } from "./format";
+import { PT_BR_DISCOUNTS_WEB_COPY } from "./pt-BR";
+import { httpDiscountsTransport, type DiscountsTransport } from "./transport";
+
+/**
+ * The one thing this package exposes to a FRONTEND host.
+ *
+ * Everything the promotions admin IS — the server-driven grid with its filters
+ * and its export, the create/edit form and its fourteen inputs, the target
+ * pickers, both card layouts, the four confirmations and every wire call
+ * between them — lives inside this package now. The host names where the API is
+ * mounted, supplies every sentence, says which locale its operators read, and
+ * that is the whole wiring.
+ *
+ * ## Build it ONCE, at module scope
+ *
+ * The members are component TYPES. Rebuilding the surface per render gives
+ * React new types every time, which unmounts and remounts the entire tree below
+ * — a form loses what the operator typed on every keystroke that reaches the
+ * page above it. Every `createWeb*` in this org carries the same warning
+ * because it is the same hazard, and it is silent: the screen works, it just
+ * cannot be typed into.
+ */
+
+export interface DiscountsWebConfig {
+  /** The admin mount the routes live under, e.g. `/api/admin/my-store`. */
+  apiBase: string;
+  /**
+   * Every sentence the screens render — REQUIRED, the host's words. A pt-BR
+   * host passes `PT_BR_DISCOUNTS_WEB_COPY`.
+   */
+  copy: DiscountsWebCopy;
+  /**
+   * How money, percentages and dates are written — and READ BACK. A form takes
+   * what the operator typed in their own notation, so this decides parsing as
+   * much as rendering.
+   */
+  locale: string;
+  /** ISO 4217, e.g. `BRL`. */
+  currency: string;
+  /**
+   * Where a failure goes, beyond the operator's own screen — REQUIRED, and for
+   * the same reason `createApiDiscounts` requires a logger.
+   *
+   * The screens already SHOW an operator what went wrong; that is not the same
+   * as anybody knowing. A refused write, a catalog that would not load, a page
+   * read that failed — each of those reaches a person only if a host routes it
+   * somewhere, and a no-op default here would make "nothing is broken" and
+   * "nothing is watching" look identical. A host wires this to its browser
+   * error reporter.
+   *
+   * `context` is a stable dotted token (`discounts.create`, `discounts.list`)
+   * rather than a sentence, so a reporter can group on it.
+   */
+  onError: (error: unknown, context: string) => void;
+  /**
+   * The money input. Currency entry is a host decision — masking, which side
+   * the symbol sits on, whether cents are typed or implied — and there is no
+   * neutral answer to ship. A host with nothing special passes a plain text
+   * field.
+   */
+  currencyField: CurrencyFieldComponent;
+  /** How the surface reaches its data. Default: same-origin fetch. */
+  transport?: DiscountsTransport;
+  /** The crumbs above the title. The host owns its information hierarchy. */
+  breadcrumb?: readonly { label: string; href?: string }[];
+}
+
+export interface WebDiscounts {
+  /** The whole promotions admin. */
+  Screen: ComponentType;
+  /**
+   * The form on its own, for a host embedding it somewhere of its own — an
+   * onboarding step, a wizard. Already bound to the same client and copy.
+   */
+  DiscountForm: ComponentType<
+    Pick<DiscountFormProps, "editing" | "groups" | "onSaved">
+  >;
+  /** The bound wire client, for host glue. */
+  api: DiscountsApiClient;
+  /** The bound formatters, for a host rendering a discount outside these screens. */
+  formatters: DiscountsFormatters;
+}
+
+/** Assert the config at construction, where the wiring is written. */
+function assertConfig(config: DiscountsWebConfig): void {
+  const missing = missingWebCopy(config.copy, PT_BR_DISCOUNTS_WEB_COPY);
+  if (missing.length > 0) {
+    throw new Error(
+      `@12-apps/discounts: createWebDiscounts is missing copy for ${missing.join(", ")} — ` +
+        "every sentence these screens render is host config, with no defaults.",
+    );
+  }
+  if (typeof config.onError !== "function") {
+    throw new Error(
+      "@12-apps/discounts: createWebDiscounts needs an onError — a surface whose " +
+        "failures reach nobody is indistinguishable from one that never fails.",
+    );
+  }
+}
+
+export function createWebDiscounts(config: DiscountsWebConfig): WebDiscounts {
+  assertConfig(config);
+  const { copy, onError, currencyField, breadcrumb } = config;
+  const formatters = createFormatters(config.locale, config.currency);
+  const transport = config.transport ?? httpDiscountsTransport(copy.form.saveFailed);
+  const api = createDiscountsApiClient(config.apiBase, transport, formatters);
+
+  const screenProps: DiscountsScreenProps = {
+    api,
+    copy,
+    formatters,
+    currencyField,
+    onError,
+    ...(breadcrumb ? { breadcrumb } : {}),
+  };
+
+  return {
+    Screen: () => <DiscountsScreen {...screenProps} />,
+    DiscountForm: (props) => (
+      <DiscountForm
+        api={api}
+        copy={copy}
+        formatters={formatters}
+        currencyField={currencyField}
+        onError={onError}
+        {...props}
+      />
+    ),
+    api,
+    formatters,
+  };
+}
+
+/**
+ * The same factory, memoised on config IDENTITY — the shape a host that must
+ * build inside a component should reach for.
+ *
+ * Not a substitute for building at module scope: `useMemo` keyed on the config
+ * object still rebuilds whenever that object is a fresh literal, which it is on
+ * every render unless the host memoised it too. It exists for the case where
+ * the mount path genuinely is dynamic (the api base carries a tenant slug from
+ * the router), and it makes the dependency explicit instead of silent.
+ */
+export function useWebDiscounts(config: DiscountsWebConfig): WebDiscounts {
+  return useMemo(() => createWebDiscounts(config), [config]);
+}
+
+/** The screen as a bare component, for a host that wires everything itself. */
+export type { DiscountsScreenProps };
+export function DiscountsSurface(props: DiscountsScreenProps): JSX.Element {
+  return <DiscountsScreen {...props} />;
+}

package/src/react/discount-actions-menu.tsx

@@ -0,0 +1,127 @@
+"use client";
+
+import { useState, type JSX } from "react";
+
+import { CardKebab, useCardActions, useRemoveConfirm } from "@12-apps/ui/data-display/CardKit";
+import { Dialog, DialogContent } from "@12-apps/ui/feedback/Dialog";
+import type { DropdownMenuItem } from "@12-apps/ui/navigation/DropdownMenu";
+
+import type { DiscountsApiClient, WireTargetGroup } from "./api";
+import type { DiscountsWebCopy } from "./copy";
+import { DiscountForm } from "./discount-form";
+import type { CurrencyFieldComponent } from "./discount-form-fields";
+import type { DiscountsFormatters } from "./format";
+import type { DiscountListItem } from "./row";
+
+/**
+ * One rule's self-contained "⋮" menu: it owns its edit dialog inline and its
+ * delete write, reading the refresh and the error channel from
+ * `CardActionsProvider`.
+ *
+ * Reused by BOTH the grid row and the card, so the two can never offer a
+ * different set of actions — which is the whole reason it is one component
+ * rather than a menu per surface.
+ *
+ * There is deliberately no version-history entry. A discount is not versioned
+ * catalog content: restoring "version 3" of a coupon whose redemption counter
+ * has since moved is meaningless, so the surface does not offer it.
+ */
+
+export interface DiscountActionsMenuProps {
+  row: DiscountListItem;
+  api: DiscountsApiClient;
+  copy: DiscountsWebCopy;
+  formatters: DiscountsFormatters;
+  currencyField: CurrencyFieldComponent;
+  /**
+   * The registered collections, for the edit form's target pickers.
+   *
+   * Optional, and the absence is a real state rather than an oversight: while
+   * they are still loading, only DELETE is offered — an edit form opened
+   * without them would show empty pickers, and saving would silently clear a
+   * target list it never had the chance to display.
+   */
+  groups?: readonly WireTargetGroup[];
+  onError: (error: unknown, context: string) => void;
+}
+
+export function DiscountActionsMenu({
+  row,
+  api,
+  copy,
+  formatters,
+  currencyField,
+  groups,
+  onError,
+}: DiscountActionsMenuProps): JSX.Element {
+  const { onRefresh } = useCardActions();
+  const [editOpen, setEditOpen] = useState(false);
+  const canEdit = groups !== undefined;
+
+  const remove = useRemoveConfirm({
+    write: async () => {
+      const result = await api.remove(row.id);
+      if (!result.ok) onError(result, "discounts.delete");
+      return result;
+    },
+    title: copy.actions.deleteTitle,
+    entityName: row.name,
+    description: copy.actions.deleteDescription,
+    confirmText: copy.actions.delete,
+    fallbackError: copy.actions.deleteFailed,
+    dataTestId: "discount-delete-confirm",
+  });
+
+  const items: DropdownMenuItem[] = [];
+  if (canEdit) {
+    items.push({ id: "edit", label: copy.actions.edit, onClick: () => setEditOpen(true) });
+  }
+  items.push({
+    id: "delete",
+    label: copy.actions.delete,
+    color: "danger",
+    onClick: remove.request,
+  });
+
+  return (
+    <>
+      <CardKebab
+        items={items}
+        menuLabel={copy.actions.menu}
+        dataTestId={`discount-actions-${row.id}`}
+      />
+      {remove.dialog}
+      {canEdit && (
+        <Dialog
+          open={editOpen}
+          onClose={() => setEditOpen(false)}
+          title={copy.form.editTitle}
+          size="md"
+          showCloseButton
+          dataTestId="discount-dialog"
+        >
+          {/* Mounted only while open, so the next open re-seeds from the row
+              instead of keeping the last attempt's values. */}
+          {editOpen && (
+            <DialogContent>
+              <DiscountForm
+                key={row.id}
+                api={api}
+                copy={copy}
+                formatters={formatters}
+                currencyField={currencyField}
+                groups={groups}
+                editing={row.record}
+                onError={onError}
+                onSaved={() => {
+                  setEditOpen(false);
+                  onRefresh();
+                }}
+              />
+            </DialogContent>
+          )}
+        </Dialog>
+      )}
+    </>
+  );
+}

package/src/react/discount-card.tsx

@@ -0,0 +1,92 @@
+"use client";
+
+import type { JSX } from "react";
+
+import LocalOfferOutlinedIcon from "@mui/icons-material/LocalOfferOutlined";
+
+import type { KindCardProps } from "@12-apps/ui/data-display/CardKit";
+import { BaseCard } from "@12-apps/ui/data-display/DataViews";
+import { Chip } from "@12-apps/ui/data-display/Chip";
+import { Box } from "@12-apps/ui/mui/Box";
+
+import type { DiscountsWebCopy } from "./copy";
+import { DiscountActionsMenu, type DiscountActionsMenuProps } from "./discount-actions-menu";
+import type { DiscountListItem } from "./row";
+
+/**
+ * One rule as a tile for the grid's card layout.
+ *
+ * The subtitle carries the two numbers an operator scans a promotions board
+ * for: what it takes off, and how long it runs. The chips carry the two facts
+ * that decide WHERE and WHEN it fires. "Paused" is shown only when true —
+ * a card shouting "Active" on every tile would make the one paused promotion
+ * harder to spot, not easier.
+ */
+
+/** The semantic colour a scope's chip carries. Not copy: it is a token. */
+const SCOPE_COLOR: Record<string, "neutral" | "warning" | "success" | "info"> = {
+  ORDER: "neutral",
+  CATEGORY: "warning",
+  ITEM: "success",
+  COMBO: "info",
+};
+
+const TRIGGER_COLOR: Record<string, "success" | "info"> = {
+  AUTOMATIC: "success",
+  CODE: "info",
+};
+
+type DiscountCardProps = KindCardProps &
+  Omit<DiscountActionsMenuProps, "row"> & { row: DiscountListItem };
+
+export function DiscountCard({
+  row,
+  selection,
+  aspectRatio,
+  copy,
+  ...menu
+}: DiscountCardProps & { copy: DiscountsWebCopy }): JSX.Element {
+  const scopeLabel = copy.labels.scope[row.scope as keyof typeof copy.labels.scope] ?? row.scope;
+  const triggerLabel =
+    copy.labels.trigger[row.trigger as keyof typeof copy.labels.trigger] ?? row.trigger;
+  return (
+    <BaseCard
+      aspectRatio={aspectRatio ?? "4:3"}
+      scale={selection.scale}
+      selected={selection.selected}
+      onToggleSelect={selection.onToggleSelect}
+      testId={`discount-card-${row.id}`}
+      title={row.name}
+      subtitle={`${row.valueLabel} · ${row.windowLabel}`}
+      imageFallback={<LocalOfferOutlinedIcon sx={{ fontSize: 40, opacity: 0.35 }} />}
+      menu={<DiscountActionsMenu row={row} copy={copy} {...menu} />}
+    >
+      <Box sx={{ display: "flex", gap: 0.5, flexWrap: "wrap" }}>
+        <Chip
+          label={scopeLabel}
+          size="sm"
+          variant="filled"
+          color={SCOPE_COLOR[row.scope] ?? "neutral"}
+          dataTestId={`discount-card-scope-${row.id}`}
+        />
+        <Chip
+          // A coupon identifies itself; the word "code" beside a code says less.
+          label={row.trigger === "CODE" ? (row.code ?? triggerLabel) : triggerLabel}
+          size="sm"
+          variant="outlined"
+          color={TRIGGER_COLOR[row.trigger] ?? "neutral"}
+          dataTestId={`discount-card-trigger-${row.id}`}
+        />
+        {!row.active && (
+          <Chip
+            label={copy.card.paused}
+            size="sm"
+            variant="outlined"
+            color="neutral"
+            dataTestId={`discount-card-paused-${row.id}`}
+          />
+        )}
+      </Box>
+    </BaseCard>
+  );
+}