@12-apps/discounts 1.12.0 → 1.13.0

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

package/src/react/schedule-builder.tsx

@@ -0,0 +1,253 @@
+"use client";
+
+import type { JSX } from "react";
+
+import { Button } from "@12-apps/ui/form/Button";
+import { FormControl, FormLabel, FormMessage } from "@12-apps/ui/form/Form";
+import { Input } from "@12-apps/ui/form/Input";
+import { Box } from "@12-apps/ui/mui/Box";
+import { Stack } from "@12-apps/ui/mui/Stack";
+import { Text } from "@12-apps/ui/typography/Text";
+
+import { MAX_SCHEDULE_WINDOWS, type DiscountSchedule, type DiscountScheduleWindow } from "../engine/schedule";
+
+import { fill, type DiscountsWebCopy } from "./copy";
+import { formatScheduleWindow } from "./schedule-summary";
+
+/**
+ * "Toda sexta, das 16:00 às 20:00" — the weekly schedule editor (FUT-996).
+ *
+ * The shape is chosen from how a merchant DESCRIBES a promotion, not from how
+ * a week is stored. Three decisions carry it:
+ *
+ * **Day chips, not checkboxes.** Seven chips in a row read as a week at a
+ * glance; seven checkboxes read as a list you have to parse. Monday-first,
+ * because that is the axis `WeekHours` and every hours screen already uses, and
+ * a promotions screen starting on Sunday next to an hours screen starting on
+ * Monday is its own bug report.
+ *
+ * **A LIST of rows, each with its own days and hours** — not a per-weekday
+ * hours grid. One row covers "toda sexta das 16 às 20" and "segunda e terça à
+ * tarde" alike; a second covers "sexta 16–20 e sábado 12–16". The grid shape
+ * (what `openingHours` uses) asks seven questions to answer one, and a
+ * promotion is a sentence, not a business week.
+ *
+ * **A live read-back.** See `./schedule-summary` — it is the only thing on this
+ * screen the operator can check against what they meant.
+ *
+ * Presets WRITE INTO the chips rather than being a mode: after "Seg a Sex" the
+ * operator can still deselect Wednesday, which is what makes them a shortcut
+ * instead of a fourth thing to understand.
+ */
+
+/** Monday-first, 0..6 — the axis the engine and every hours surface share. */
+const WEEK = [0, 1, 2, 3, 4, 5, 6];
+const WEEKDAY_PRESET = [0, 1, 2, 3, 4];
+const WEEKEND_PRESET = [5, 6];
+
+/** A new row: the most common promotion, so an operator edits rather than fills. */
+export function blankWindow(): DiscountScheduleWindow {
+  return { days: [], from: "16:00", to: "20:00" };
+}
+
+function toggleDay(days: readonly number[], day: number): number[] {
+  return days.includes(day) ? days.filter((d) => d !== day) : [...days, day].sort((a, b) => a - b);
+}
+
+/** One day chip. A button rather than a checkbox — see the header. */
+function DayChip({
+  label,
+  index,
+  selected,
+  onClick,
+}: {
+  label: string;
+  /** The ROW this chip belongs to — test ids must be unique across rows. */
+  index: number;
+  selected: boolean;
+  onClick: () => void;
+}): JSX.Element {
+  return (
+    <Button
+      type="button"
+      variant={selected ? "solid" : "outline"}
+      size="sm"
+      onClick={onClick}
+      aria-pressed={selected}
+      data-testid={`schedule-day-${index}-${label}`}
+    >
+      {label}
+    </Button>
+  );
+}
+
+/** One "these days, these hours" row. */
+function WindowRow({
+  window,
+  index,
+  copy,
+  canRemove,
+  onChange,
+  onRemove,
+}: {
+  window: DiscountScheduleWindow;
+  index: number;
+  copy: DiscountsWebCopy;
+  canRemove: boolean;
+  onChange: (next: DiscountScheduleWindow) => void;
+  onRemove: () => void;
+}): JSX.Element {
+  const sentence = formatScheduleWindow(window, copy);
+  return (
+    <Stack
+      spacing={1}
+      sx={{ border: 1, borderColor: "divider", borderRadius: 1, p: 1.5 }}
+      data-testid={`schedule-window-${index}`}
+    >
+      <Box sx={{ display: "flex", gap: 0.5, flexWrap: "wrap", alignItems: "center" }}>
+        {WEEK.map((day) => (
+          <DayChip
+            key={day}
+            label={copy.schedule.dayShort[day] ?? String(day)}
+            index={index}
+            selected={window.days.includes(day)}
+            onClick={() => onChange({ ...window, days: toggleDay(window.days, day) })}
+          />
+        ))}
+        {canRemove && (
+          <Button
+            type="button"
+            variant="ghost"
+            size="sm"
+            onClick={onRemove}
+            aria-label={copy.schedule.removeWindow}
+            data-testid={`schedule-remove-${index}`}
+          >
+            ✕
+          </Button>
+        )}
+      </Box>
+      <Box sx={{ display: "flex", gap: 1, alignItems: "center", flexWrap: "wrap" }}>
+        <Text variant="caption">{copy.schedule.fromLabel}</Text>
+        <Input
+          type="time"
+          value={window.from}
+          onChange={(event) => onChange({ ...window, from: event.target.value })}
+          aria-label={copy.schedule.fromLabel}
+          data-testid={`schedule-from-${index}`}
+        />
+        <Text variant="caption">{copy.schedule.toLabel}</Text>
+        <Input
+          type="time"
+          value={window.to}
+          onChange={(event) => onChange({ ...window, to: event.target.value })}
+          aria-label={copy.schedule.toLabel}
+          data-testid={`schedule-to-${index}`}
+        />
+      </Box>
+      {sentence !== null && (
+        <Text variant="caption" data-testid={`schedule-summary-${index}`}>
+          {sentence}
+        </Text>
+      )}
+    </Stack>
+  );
+}
+
+/** The three shortcuts. They write into the chips; they are not a mode. */
+function Presets({
+  copy,
+  onApply,
+}: {
+  copy: DiscountsWebCopy;
+  onApply: (days: number[]) => void;
+}): JSX.Element {
+  const presets: [string, number[]][] = [
+    [copy.schedule.presetEveryDay, WEEK],
+    [copy.schedule.presetWeekdays, WEEKDAY_PRESET],
+    [copy.schedule.presetWeekend, WEEKEND_PRESET],
+  ];
+  return (
+    <Box sx={{ display: "flex", gap: 0.5, flexWrap: "wrap" }}>
+      {presets.map(([label, days]) => (
+        <Button
+          key={label}
+          type="button"
+          variant="ghost"
+          size="sm"
+          onClick={() => onApply([...days])}
+          data-testid={`schedule-preset-${label}`}
+        >
+          {label}
+        </Button>
+      ))}
+    </Box>
+  );
+}
+
+export function ScheduleBuilder({
+  schedule,
+  copy,
+  timezone,
+  error,
+  onChange,
+}: {
+  schedule: DiscountSchedule;
+  copy: DiscountsWebCopy;
+  /** Whose clock these times are in — a merchant setting 16:00 must know. */
+  timezone: string;
+  error?: string | null;
+  onChange: (next: DiscountSchedule) => void;
+}): JSX.Element {
+  const { windows } = schedule;
+  const replace = (index: number, next: DiscountScheduleWindow): void =>
+    onChange({ windows: windows.map((w, i) => (i === index ? next : w)) });
+
+  return (
+    <FormControl>
+      <FormLabel>{copy.schedule.builderTitle}</FormLabel>
+      <Stack spacing={1} data-testid="schedule-builder">
+        <Presets
+          copy={copy}
+          onApply={(days) =>
+            onChange({
+              windows:
+                windows.length === 0
+                  ? [{ ...blankWindow(), days }]
+                  : windows.map((w, i) => (i === 0 ? { ...w, days } : w)),
+            })
+          }
+        />
+        {windows.map((window, index) => (
+          <WindowRow
+            // Index is the identity here: rows have no id, and the list is
+            // edited by position — which is also the order the sentence reads.
+            key={index}
+            window={window}
+            index={index}
+            copy={copy}
+            canRemove={windows.length > 1}
+            onChange={(next) => replace(index, next)}
+            onRemove={() => onChange({ windows: windows.filter((_, i) => i !== index) })}
+          />
+        ))}
+        {windows.length < MAX_SCHEDULE_WINDOWS && (
+          <Box>
+            <Button
+              type="button"
+              variant="outline"
+              size="sm"
+              onClick={() => onChange({ windows: [...windows, blankWindow()] })}
+              data-testid="schedule-add-window"
+            >
+              {copy.schedule.addWindow}
+            </Button>
+          </Box>
+        )}
+        <Text variant="caption">{fill(copy.schedule.timezoneNote, { timezone })}</Text>
+        <Text variant="caption">{copy.schedule.guaranteeNote}</Text>
+        {error != null && error !== "" && <FormMessage error>{error}</FormMessage>}
+      </Stack>
+    </FormControl>
+  );
+}