@12-apps/discounts 1.11.0 → 1.13.0

package/src/react/discount-form-fields.tsx

@@ -2,6 +2,7 @@
 
 import type { JSX } from "react";
 
+import { FormControl, FormLabel } from "@12-apps/ui/form/Form";
 import { Switch } from "@12-apps/ui/form/Switch";
 import { Fields, useFormContext } from "@12-apps/ui/form/total-form";
 import { Box } from "@12-apps/ui/mui/Box";
@@ -9,9 +10,11 @@ import { Stack } from "@12-apps/ui/mui/Stack";
 import { Text } from "@12-apps/ui/typography/Text";
 
 import { DISCOUNT_TRIGGERS } from "../engine/kinds";
+import type { DiscountSchedule } from "../engine/schedule";
 
 import type { DiscountsWebCopy } from "./copy";
 import { COMBO_REWARDS, isComboKind, SELECTABLE_DISCOUNT_SCOPES, type DiscountKind } from "./form-kind";
+import { ScheduleBuilder } from "./schedule-builder";
 
 /**
  * The form's inputs, split from the form itself for the 400-line file gate —
@@ -249,16 +252,97 @@ export function ComboCapField({ copy }: { copy: DiscountsWebCopy }): JSX.Element
   );
 }
 
-/** The active window. Both sides optional; the end date is EXCLUSIVE. */
-export function WindowFields({ copy }: { copy: DiscountsWebCopy }): JSX.Element {
+/**
+ * "Quando vale" — the campaign PERIOD, and the weekly schedule inside it
+ * (FUT-996).
+ *
+ * The two are one section because they answer one question in two halves, and
+ * an operator reads them together: "de setembro a novembro" and "toda sexta,
+ * das 16 às 20" describe the same promotion. They were a bare pair of date
+ * inputs before there was a second half to pair with.
+ *
+ * Repetition defaults to "Sempre", so every rule that predates this and every
+ * simple new one is untouched — an operator creating a plain 10%-off never sees
+ * the builder. That default is what keeps the screen from getting harder for
+ * the promotions nobody schedules.
+ */
+export function WindowFields({
+  copy,
+  schedule,
+  scheduleEnabled,
+  timezoneLabel,
+  onScheduleChange,
+  onScheduleEnabledChange,
+}: {
+  copy: DiscountsWebCopy;
+  schedule: DiscountSchedule;
+  scheduleEnabled: boolean;
+  timezoneLabel: string | null;
+  onScheduleChange: (next: DiscountSchedule) => void;
+  onScheduleEnabledChange: (next: boolean) => void;
+}): JSX.Element {
   return (
-    <Box sx={{ display: "grid", gap: 2, gridTemplateColumns: { xs: "1fr", sm: "1fr 1fr" } }}>
-      <Fields.TextField name="startsAt" label={copy.form.startsAt} type="date" />
-      <Fields.TextField name="endsAt" label={copy.form.endsAt} type="date" />
-    </Box>
+    <Stack spacing={1.5}>
+      <Text variant="heading">{copy.schedule.sectionTitle}</Text>
+      <Stack spacing={0.5}>
+        <Box sx={{ display: "grid", gap: 2, gridTemplateColumns: { xs: "1fr", sm: "1fr 1fr" } }}>
+          <Fields.TextField name="startsAt" label={copy.form.startsAt} type="date" />
+          <Fields.TextField name="endsAt" label={copy.form.endsAt} type="date" />
+        </Box>
+        <Text variant="caption">{copy.schedule.periodHint}</Text>
+      </Stack>
+      <FormControl>
+        <FormLabel>{copy.schedule.repetitionTitle}</FormLabel>
+        <Stack spacing={0.5}>
+          {[
+            [false, copy.schedule.always] as const,
+            [true, copy.schedule.specific] as const,
+          ].map(([value, label]) => (
+            <label key={label} style={{ display: "flex", gap: 8, alignItems: "center" }}>
+              <input
+                type="radio"
+                name="discount-repetition"
+                checked={scheduleEnabled === value}
+                onChange={() => onScheduleEnabledChange(value)}
+                data-testid={value ? "repetition-specific" : "repetition-always"}
+              />
+              <Text variant="body">{label}</Text>
+            </label>
+          ))}
+        </Stack>
+      </FormControl>
+      {scheduleEnabled && (
+        <>
+          <ScheduleBuilder
+            schedule={schedule}
+            copy={copy}
+            timezone={timezoneLabel ?? ""}
+            onChange={onScheduleChange}
+          />
+          <OrderScopeScheduleNote copy={copy} />
+        </>
+      )}
+    </Stack>
   );
 }
 
+/**
+ * The ORDER-scope asymmetry, at the point of confusion.
+ *
+ * An order-wide rule has no line to anchor a schedule to, so it is judged at
+ * CHECKOUT while every other scope is judged per line — which means a cart
+ * straddling 20:00 behaves differently under "10% em tudo" than under "10% em
+ * cervejas". That is a real difference and an invisible one, so it is said
+ * here, only for the combination that has it, rather than left in a document
+ * nobody opens while filling in a form.
+ */
+function OrderScopeScheduleNote({ copy }: { copy: DiscountsWebCopy }): JSX.Element | null {
+  const { values } = useFormContext();
+  const kind = values.kind ?? "PERCENTAGE";
+  if (isComboKind(kind) || values.scope !== "ORDER") return null;
+  return <Text variant="caption">{copy.schedule.orderScopeNote}</Text>;
+}
+
 /** The minimum basket and the two redemption caps. */
 export function LimitFields({
   copy,

package/src/react/discount-form-validate.ts

@@ -1,3 +1,4 @@
+import { toMinutes, type DiscountSchedule } from "../engine/schedule";
 import type { ComboRequirement } from "../engine/types";
 
 import { comboUnits } from "./combo-slot-builder";
@@ -141,16 +142,55 @@ export interface FormTargets {
 }
 
 /** The cross-field rules a per-input schema cannot express. */
+/**
+ * The weekly schedule, when the operator asked for one (FUT-996).
+ *
+ * Three refusals, and each is a thing the operator can SEE and fix on the row
+ * in front of them. Deliberately NOT refused: a `to` earlier than `from` — that
+ * is a bar shutting at 02:00, the commonest happy hour there is, and the
+ * builder's own sentence says "do dia seguinte" so it can be checked rather
+ * than guessed at.
+ *
+ * Every one of these is re-checked on the server (`assertSchedule`), which is
+ * the authority. This half exists so the operator is told before they submit.
+ */
+function checkSchedule(
+  state: ScheduleState,
+  copy: DiscountsWebCopy,
+): Record<string, string> {
+  if (!state.enabled) return {};
+  const { windows } = state.schedule;
+  if (windows.length === 0) return { schedule: copy.schedule.windowsRequired };
+  if (windows.some((window) => window.days.length === 0)) {
+    return { schedule: copy.schedule.daysRequired };
+  }
+  const badTime = windows.some(
+    (window) =>
+      toMinutes(window.from) === null ||
+      toMinutes(window.to) === null ||
+      window.from === window.to,
+  );
+  return badTime ? { schedule: copy.schedule.timesRequired } : {};
+}
+
+/** The schedule editor's state: its switch and its rows, kept separate. */
+interface ScheduleState {
+  enabled: boolean;
+  schedule: DiscountSchedule;
+}
+
 export function validate(
   values: DiscountFormValues,
   targets: FormTargets,
   formatters: DiscountsFormatters,
   copy: DiscountsWebCopy,
+  scheduleState: ScheduleState,
 ): Record<string, string> {
   const slots = targets.comboRequirements;
   const errors: Record<string, string> = {
     ...checkValue(values, slots, formatters, copy),
     ...checkCombo(values, slots, copy),
+    ...checkSchedule(scheduleState, copy),
   };
   if (values.trigger === "CODE" && values.code.trim() === "") {
     errors.code = copy.form.codeRequired;

package/src/react/discount-form.tsx

@@ -12,6 +12,7 @@ import {
 } from "@12-apps/ui/form/total-form";
 import { Stack } from "@12-apps/ui/mui/Stack";
 
+import type { DiscountSchedule } from "../engine/schedule";
 import type { ComboRequirement } from "../engine/types";
 
 import type { DiscountFormPayload, DiscountsApiClient, DiscountWireRecord, WireTargetGroup } from "./api";
@@ -28,6 +29,7 @@ import {
   type CurrencyFieldComponent,
 } from "./discount-form-fields";
 import { DiscountTargetPicker } from "./discount-target-picker";
+import { blankWindow } from "./schedule-builder";
 import { validate, type FormTargets } from "./discount-form-validate";
 import { initialValues, type DiscountFormValues } from "./discount-form-values";
 import { kindOptions, typeAndScopeFor } from "./form-kind";
@@ -61,17 +63,36 @@ function useNonStringState(editing: DiscountWireRecord | null) {
   const [comboRequirements, setComboRequirements] = useState<ComboRequirement[]>(() =>
     editing?.comboRequirements ? [...editing.comboRequirements] : [],
   );
+  // The weekly schedule (FUT-996) is the fourth: a nested structure edited with
+  // chips and clocks, which `total-form`'s strings cannot hold.
+  //
+  // Its ON/OFF is kept SEPARATE from its contents on purpose. An operator who
+  // switches back to "Sempre" and then changes their mind has not lost the days
+  // they picked — the rows survive the toggle and only the SUBMIT reads the
+  // switch. Collapsing the two would make the radio destructive.
+  const [scheduleEnabled, setScheduleEnabled] = useState<boolean>(
+    () => (editing?.schedule?.windows.length ?? 0) > 0,
+  );
+  const [schedule, setSchedule] = useState<DiscountSchedule>(() =>
+    editing?.schedule && editing.schedule.windows.length > 0
+      ? { windows: editing.schedule.windows.map((w) => ({ ...w, days: [...w.days] })) }
+      : { windows: [blankWindow()] },
+  );
   return {
     active,
     stackable,
     categoryIds,
     menuItemIds,
     comboRequirements,
+    scheduleEnabled,
+    schedule,
     setActive,
     setStackable,
     setCategoryIds,
     setMenuItemIds,
     setComboRequirements,
+    setScheduleEnabled,
+    setSchedule,
   };
 }
 
@@ -88,6 +109,8 @@ export interface DiscountFormProps {
   onSaved: () => void;
   /** Where a refused or failed write is reported, beyond the operator's screen. */
   onError: (error: unknown, context: string) => void;
+  /** The store's timezone as a person says it — shown under the clocks. */
+  timezoneLabel?: string;
 }
 
 /**
@@ -110,7 +133,10 @@ function makeSubmit(
       menuItemIds: extra.menuItemIds,
       comboRequirements: extra.comboRequirements,
     };
-    const invalid = validate(values, targets, formatters, copy);
+    const invalid = validate(values, targets, formatters, copy, {
+      enabled: extra.scheduleEnabled,
+      schedule: extra.schedule,
+    });
     if (Object.keys(invalid).length > 0) {
       setFieldErrors(invalid);
       setError(copy.form.reviewFields);
@@ -118,6 +144,9 @@ function makeSubmit(
     }
     const payload: DiscountFormPayload = {
       ...values,
+      // The switch decides whether the rows are sent at all — see the state
+      // hook for why the two are separate.
+      schedule: extra.scheduleEnabled ? extra.schedule : null,
       // The one place the form's question becomes the API's two columns. Every
       // other consumer — the write path, the evaluator, the CHECK constraints —
       // still sees the `type`/`scope` pair it always did.
@@ -173,7 +202,14 @@ export function DiscountForm(props: DiscountFormProps): JSX.Element {
         />
         <ComboCapField copy={copy} />
         <TriggerFields copy={copy} />
-        <WindowFields copy={copy} />
+        <WindowFields
+          copy={copy}
+          schedule={extra.schedule}
+          scheduleEnabled={extra.scheduleEnabled}
+          timezoneLabel={props.timezoneLabel ?? null}
+          onScheduleChange={extra.setSchedule}
+          onScheduleEnabledChange={extra.setScheduleEnabled}
+        />
         <LimitFields copy={copy} currencyField={currencyField} />
         <DiscountSwitches
           copy={copy}

package/src/react/discounts-screen.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useMemo, useState, type JSX } from "react";
+import { useState, type JSX } from "react";
 import { useSearchParams } from "react-router-dom";
 
 import AddIcon from "@mui/icons-material/Add";
@@ -32,13 +32,13 @@ import { DiscountForm } from "./discount-form";
 import type { CurrencyFieldComponent } from "./discount-form-fields";
 import { DiscountListCard, discountCells } from "./discount-list-card";
 import type { DiscountsFormatters } from "./format";
-import { toListItem, type DiscountListItem } from "./row";
+import { useDiscountRows, type DiscountListItem } from "./row";
+import { toMenuBinding, usePagedServer } from "./screen-bindings";
 import {
   discountColumns,
   discountExportColumns,
   discountFilters,
   discountsAppliedState,
-  discountsQueryToParams,
   discountsSearch,
 } from "./table-config";
 import { useDiscountsData } from "./use-discounts-data";
@@ -55,6 +55,10 @@ export interface DiscountsScreenProps {
   api: DiscountsApiClient;
   copy: DiscountsWebCopy;
   formatters: DiscountsFormatters;
+  /** The store's IANA zone, for the grid's live "ativa agora" dot (FUT-996). */
+  timezone?: string;
+  /** The store's timezone as a person says it, for the schedule editor. */
+  timezoneLabel?: string;
   currencyField: CurrencyFieldComponent;
   onError: (error: unknown, context: string) => void;
   /** The crumbs above the title. The host owns its own information hierarchy. */
@@ -142,7 +146,7 @@ function HeaderControls({
 }
 
 /** Everything the row menu, both cards and the edit form are bound to. */
-type MenuBinding = Omit<Parameters<typeof DiscountActionsMenu>[0], "row">;
+export type MenuBinding = Omit<Parameters<typeof DiscountActionsMenu>[0], "row">;
 
 /**
  * The grid, split from the page container so neither crosses the size gate.
@@ -308,21 +312,14 @@ function ScreenBody({
 }
 
 export function DiscountsScreen(props: DiscountsScreenProps): JSX.Element {
-  const { api, copy, formatters, currencyField, onError, breadcrumb } = props;
+  const { api, copy, formatters, onError, breadcrumb, timezone } = props;
   const [searchParams] = useSearchParams();
   const data = useDiscountsData(api, discountsSearch(searchParams), onError);
   const [createOpen, setCreateOpen] = useState(false);
   const [visibleRows, setVisibleRows] = useState<DiscountListItem[]>([]);
   const bulkDelete = useBulkDelete(api, copy, data.refresh, onError);
 
-  // ONE instant for the whole render: two rows judged against two different
-  // "now"s could disagree about which of them is still running.
-  const rows = useMemo(() => {
-    const now = new Date();
-    return (data.page?.data ?? []).map((record) =>
-      toListItem(record, formatters, copy, now),
-    );
-  }, [data.page, formatters, copy]);
+  const rows = useDiscountRows(data.page?.data, formatters, copy, timezone);
 
   // Seeded ONCE from the URL. Re-applying it on every render would wipe the
   // operator's column-visibility choices each time the query synced back.
@@ -330,21 +327,8 @@ export function DiscountsScreen(props: DiscountsScreenProps): JSX.Element {
     discountsAppliedState(searchParams, copy),
   );
 
-  const server = useServerDataViews({
-    totalCount: data.page?.pagination.total ?? 0,
-    page: data.page?.pagination.page ?? 1,
-    pageSize: data.page?.pagination.pageSize ?? 20,
-    toParams: discountsQueryToParams,
-  });
-
-  const menu: MenuBinding = {
-    api,
-    copy,
-    formatters,
-    currencyField,
-    groups: data.groups,
-    onError,
-  };
+  const server = usePagedServer(data.page?.pagination);
+  const menu = toMenuBinding(props, data.groups);
 
   if (data.loading) return <LoadingState dataTestId="discounts-loading" />;
   if (data.error !== null) {

package/src/react/en-US.ts

@@ -88,6 +88,50 @@ export const EN_US_DISCOUNTS_WEB_COPY: DiscountsWebCopy = {
     until: "Until {date}",
     between: "{from} to {to}",
   },
+  schedule: {
+    sectionTitle: "When it applies",
+    periodTitle: "Period",
+    periodHint: "Leave blank to run with no end date.",
+    repetitionTitle: "Repeats",
+    always: "Always, within the period",
+    specific: "On specific days and hours",
+    builderTitle: "Days and hours",
+    addWindow: "Add another time",
+    removeWindow: "Remove time",
+    fromLabel: "From",
+    toLabel: "to",
+    presetEveryDay: "Every day",
+    presetWeekdays: "Mon to Fri",
+    presetWeekend: "Weekend",
+    dayShort: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
+    dayLong: ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"],
+    dayEvery: [
+      "Every Monday",
+      "Every Tuesday",
+      "Every Wednesday",
+      "Every Thursday",
+      "Every Friday",
+      "Every Saturday",
+      "Every Sunday",
+    ],
+    listSeparator: ", ",
+    listLast: " and ",
+    allDays: "Every day",
+    weekdays: "Monday to Friday",
+    weekend: "Saturday and Sunday",
+    summary: "{days}, from {from} to {to}.",
+    summaryOvernight: "{days}, from {from} to {to} the next day.",
+    timezoneNote: "Time zone: {timezone}.",
+    guaranteeNote: "The price is held from the moment the item went into the cart.",
+    orderScopeNote:
+      "Applies to orders placed within these hours. Unlike the other scopes, which follow the moment each item went into the cart.",
+    windowWithSchedule: "{window} · {schedule}",
+    moreWindows: "+{count}",
+    activeNow: "Running now",
+    daysRequired: "Pick at least one day.",
+    timesRequired: "Enter a start and end time that differ.",
+    windowsRequired: "Add at least one time.",
+  },
   form: {
     createTitle: "New discount",
     editTitle: "Edit discount",

package/src/react/format.ts

@@ -1,6 +1,8 @@
 import { discountWindowState, type DiscountWindowState } from "../engine/kinds";
+import type { DiscountSchedule } from "../engine/schedule";
 
 import { fill, type DiscountsWebCopy } from "./copy";
+import { formatScheduleCell } from "./schedule-summary";
 
 /**
  * Money, percentages and dates — as ONE locale's reader expects them, and as
@@ -103,6 +105,19 @@ export function formatDiscountValue(
  * mean very different things when it is not running yet.
  */
 export function formatWindow(
+  row: { startsAt: string | null; endsAt: string | null; schedule?: DiscountSchedule | null },
+  formatters: DiscountsFormatters,
+  copy: DiscountsWebCopy,
+): string {
+  const period = formatPeriod(row, formatters, copy);
+  const schedule = formatScheduleCell(row.schedule, copy);
+  // Both facts in one cell (FUT-996): the campaign period answers "for how
+  // long", the schedule answers "and when within that", and a cell showing only
+  // the first would say a happy hour runs all day for three months.
+  return schedule === null ? period : fill(copy.schedule.windowWithSchedule, { window: period, schedule });
+}
+
+function formatPeriod(
   row: { startsAt: string | null; endsAt: string | null },
   formatters: DiscountsFormatters,
   copy: DiscountsWebCopy,

package/src/react/pt-BR.ts

@@ -79,6 +79,50 @@ export const PT_BR_DISCOUNTS_WEB_COPY: DiscountsWebCopy = {
     until: "Até {date}",
     between: "{from} a {to}",
   },
+  schedule: {
+    sectionTitle: "Quando vale",
+    periodTitle: "Período",
+    periodHint: "Deixe em branco para valer sem prazo.",
+    repetitionTitle: "Repetição",
+    always: "Sempre, dentro do período",
+    specific: "Em dias e horários específicos",
+    builderTitle: "Dias e horários",
+    addWindow: "Adicionar outro horário",
+    removeWindow: "Remover horário",
+    fromLabel: "Das",
+    toLabel: "às",
+    presetEveryDay: "Todos os dias",
+    presetWeekdays: "Seg a Sex",
+    presetWeekend: "Fim de semana",
+    dayShort: ["Seg", "Ter", "Qua", "Qui", "Sex", "Sáb", "Dom"],
+    dayLong: ["segunda", "terça", "quarta", "quinta", "sexta", "sábado", "domingo"],
+    dayEvery: [
+      "Toda segunda",
+      "Toda terça",
+      "Toda quarta",
+      "Toda quinta",
+      "Toda sexta",
+      "Todo sábado",
+      "Todo domingo",
+    ],
+    listSeparator: ", ",
+    listLast: " e ",
+    allDays: "Todos os dias",
+    weekdays: "De segunda a sexta",
+    weekend: "Sábado e domingo",
+    summary: "{days}, das {from} às {to}.",
+    summaryOvernight: "{days}, das {from} às {to} do dia seguinte.",
+    timezoneNote: "Fuso horário: {timezone}.",
+    guaranteeNote: "O preço é garantido pelo horário em que o item entrou no carrinho.",
+    orderScopeNote:
+      "Vale para pedidos fechados dentro do horário. Diferente das outras abrangências, que valem pelo horário em que o item entrou no carrinho.",
+    windowWithSchedule: "{window} · {schedule}",
+    moreWindows: "+{count}",
+    activeNow: "Ativa agora",
+    daysRequired: "Escolha ao menos um dia.",
+    timesRequired: "Informe um horário de início e de fim diferentes.",
+    windowsRequired: "Adicione ao menos um horário.",
+  },
   form: {
     createTitle: "Novo desconto",
     editTitle: "Editar desconto",

package/src/react/row.ts

@@ -1,4 +1,8 @@
+import { useMemo } from "react";
+
 import type { DiscountWindowState } from "../engine/kinds";
+import { scheduleCovers } from "../engine/schedule";
+import { resolveLocalClock } from "../timezone";
 
 import type { DiscountWireRecord } from "./api";
 import type { DiscountsWebCopy } from "./copy";
@@ -40,6 +44,23 @@ export interface DiscountListItem extends Record<string, unknown> {
   windowLabel: string;
   /** Where it sits relative to its window, as a stable wire token. */
   windowState: DiscountWindowState;
+  /**
+   * Whether this rule's weekly SCHEDULE is running at this moment (FUT-996).
+   *
+   * Deliberately not folded into {@link windowState}. Those three values are
+   * resolved by a store-side SQL predicate so the grid's filter pill and the
+   * badge on a row cannot disagree — and a recurrence predicate is not
+   * expressible there. Widening the enum would mean offering a filter the
+   * backend cannot serve.
+   *
+   * So the pill keeps meaning the CAMPAIGN, and this answers the operator's
+   * actual question ("is my happy hour on right now?") as a row-level dot
+   * computed here. The cost, stated: you cannot FILTER by it.
+   *
+   * `false` for a rule with no schedule — there is nothing intermittent to
+   * report, and a dot on every row would say nothing.
+   */
+  activeNow: boolean;
   /** The record itself, for the edit dialog to re-seed from. */
   record: DiscountWireRecord;
 }
@@ -54,6 +75,8 @@ export function toListItem(
   formatters: DiscountsFormatters,
   copy: DiscountsWebCopy,
   now: Date,
+  /** The store's IANA zone. Omitted ⇒ no live dot; see {@link DiscountListItem.activeNow}. */
+  timezone?: string,
 ): DiscountListItem {
   return {
     ...record,
@@ -61,6 +84,47 @@ export function toListItem(
     valueLabel: formatDiscountValue(record, formatters),
     windowLabel: formatWindow(record, formatters, copy),
     windowState: windowStateOf(record, now),
+    activeNow: isRunningNow(record, now, timezone),
     record,
   };
 }
+
+/**
+ * Is this rule's schedule running right now, in the STORE's timezone?
+ *
+ * Answered with the same `scheduleCovers` the evaluator screens with — never a
+ * second implementation, or the dot and the price a shopper is charged would
+ * disagree about the same minute.
+ */
+function isRunningNow(
+  record: DiscountWireRecord,
+  now: Date,
+  timezone: string | undefined,
+): boolean {
+  if (record.schedule == null || timezone === undefined) return false;
+  const clock = resolveLocalClock(now, timezone);
+  // An unresolvable zone means "we do not know", which must not be drawn as a
+  // confident "on" — `scheduleCovers` answers TRUE for a null clock because a
+  // cart must keep pricing, and that is the wrong default for an indicator.
+  return clock !== null && scheduleCovers(record.schedule, clock);
+}
+
+/**
+ * The grid's rows, derived once per page load.
+ *
+ * ONE instant for the whole render: two rows judged against two different
+ * "now"s could disagree about which of them is still running, and on a list of
+ * forty that difference is invisible. A hook rather than an inline `useMemo`
+ * because {@link DiscountsScreen} sits at the size gate's ceiling.
+ */
+export function useDiscountRows(
+  records: readonly DiscountWireRecord[] | undefined,
+  formatters: DiscountsFormatters,
+  copy: DiscountsWebCopy,
+  timezone: string | undefined,
+): DiscountListItem[] {
+  return useMemo(() => {
+    const now = new Date();
+    return (records ?? []).map((record) => toListItem(record, formatters, copy, now, timezone));
+  }, [records, formatters, copy, timezone]);
+}