@12-apps/discounts 1.16.0 → 1.18.0

package/src/react/schedule-builder.tsx

@@ -4,13 +4,18 @@ 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 {
+  MAX_SCHEDULE_WINDOWS,
+  toMinutes,
+  type DiscountSchedule,
+  type DiscountScheduleWindow,
+} from "../engine/schedule";
 
+import { ClockInput } from "./clock-input";
 import { fill, type DiscountsWebCopy } from "./copy";
 import { formatScheduleWindow } from "./schedule-summary";
 
@@ -45,6 +50,83 @@ const WEEK = [0, 1, 2, 3, 4, 5, 6];
 const WEEKDAY_PRESET = [0, 1, 2, 3, 4];
 const WEEKEND_PRESET = [5, 6];
 
+/**
+ * The options of one question on ONE line, in equal parts (FUT-4143 UI review,
+ * ADR 0190 in the host): seven day chips, or three presets. Each part shrinks
+ * with the form instead of wrapping to a second line, and a label too long for
+ * its part is cut with an ellipsis — the full text stays the button's name.
+ */
+function equalParts(count: number, compact = false) {
+  return {
+    display: "grid",
+    gridTemplateColumns: `repeat(${count}, minmax(0, 1fr))`,
+    gap: 0.25,
+    // No side padding, and a smaller type on a phone, so every label fits its
+    // part whole at 320; the ellipsis is only for a form narrower than that.
+    "& > button.MuiButton-root": {
+      minWidth: 0,
+      width: "100%",
+      px: 0,
+      // Days at 13 px on a phone: "Dom" is 31 px at 14 and its part ~30.
+      fontSize: compact ? "0.75rem" : { xs: "0.8125rem", sm: "0.875rem" },
+    },
+  };
+}
+
+/** A label that ellipsizes inside its part rather than wrapping. */
+function OneLine({ children }: { children: string }): JSX.Element {
+  return (
+    <span style={{ overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>
+      {children}
+    </span>
+  );
+}
+
+/** Where a schedule refusal is about: a row's days, or a row's times. */
+interface ErrorSpot {
+  index: number;
+  part: "days" | "times";
+}
+
+const WHOLE_TIME = /^\d{2}:\d{2}$/u;
+
+/** Which row a time refusal is about, by the refusal itself. */
+function timeCulprit(error: string, copy: DiscountsWebCopy): ((w: DiscountScheduleWindow) => boolean) | null {
+  const { timesRequired, timeIncomplete, invalidTime } = copy.schedule;
+  const ends = (w: DiscountScheduleWindow): string[] => [w.from, w.to];
+  if (error === timeIncomplete) return (w) => ends(w).some((end) => !WHOLE_TIME.test(end));
+  if (error === invalidTime) return (w) => ends(w).some((end) => toMinutes(end) === null);
+  if (error === timesRequired) return (w) => w.from === w.to;
+  return null;
+}
+
+/**
+ * Put the refusal under the control it is about (FUT-4143 UI review): "choose
+ * a day" under the first row with no day, a time refusal under the first row
+ * whose times are refused. Anything else stays at the foot of the builder.
+ */
+function errorSpot(
+  error: string | null | undefined,
+  windows: readonly DiscountScheduleWindow[],
+  copy: DiscountsWebCopy,
+): ErrorSpot | null {
+  if (error == null || error === "") return null;
+  const days =
+    error === copy.schedule.daysRequired ? windows.findIndex((w) => w.days.length === 0) : -1;
+  if (days >= 0) return { index: days, part: "days" };
+  const culprit = timeCulprit(error, copy);
+  const times = culprit === null ? -1 : windows.findIndex(culprit);
+  return times >= 0 ? { index: times, part: "times" } : null;
+}
+
+function ScheduleMessage({ text }: { text: string }): JSX.Element {
+  return (
+    <FormMessage error dataTestId="schedule-builder-message">
+      {text}
+    </FormMessage>
+  );
+}
+
 /** 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" };
@@ -76,17 +158,75 @@ function DayChip({
       aria-pressed={selected}
       data-testid={`schedule-day-${index}-${label}`}
     >
-      {label}
+      <OneLine>{label}</OneLine>
     </Button>
   );
 }
 
+/** One row's "Das … às …", two 24-hour clocks. */
+function WindowTimes({
+  window,
+  index,
+  copy,
+  submitted,
+  onChange,
+}: {
+  window: DiscountScheduleWindow;
+  index: number;
+  copy: DiscountsWebCopy;
+  /** Criar refused one of these clocks in its own words; each clock says it. */
+  submitted: boolean;
+  onChange: (next: DiscountScheduleWindow) => void;
+}): JSX.Element {
+  return (
+    <Box sx={{ display: "flex", gap: 1, alignItems: "flex-start", flexWrap: "wrap" }}>
+      <Box sx={{ pt: 1 }}>
+        <Text variant="caption">{copy.schedule.fromLabel}</Text>
+      </Box>
+      <ClockInput
+        value={window.from}
+        label={copy.schedule.fromLabel}
+        invalidMessage={copy.schedule.invalidTime}
+        incompleteMessage={copy.schedule.timeIncomplete}
+        submitted={submitted}
+        onChange={(from) => onChange({ ...window, from })}
+        dataTestId={`schedule-from-${index}`}
+      />
+      <Box sx={{ pt: 1 }}>
+        <Text variant="caption">{copy.schedule.toLabel}</Text>
+      </Box>
+      <ClockInput
+        value={window.to}
+        label={copy.schedule.toLabel}
+        invalidMessage={copy.schedule.invalidTime}
+        incompleteMessage={copy.schedule.timeIncomplete}
+        submitted={submitted}
+        onChange={(to) => onChange({ ...window, to })}
+        dataTestId={`schedule-to-${index}`}
+      />
+    </Box>
+  );
+}
+
+/**
+ * An unfinished or impossible clock says so itself, under the clock; the row
+ * repeats only the time refusal no single clock owns (equal ends).
+ */
+function clocksSayIt(
+  message: { part: "days" | "times"; text: string } | null,
+  copy: DiscountsWebCopy,
+): boolean {
+  if (message?.part !== "times") return false;
+  return message.text === copy.schedule.timeIncomplete || message.text === copy.schedule.invalidTime;
+}
+
 /** One "these days, these hours" row. */
 function WindowRow({
   window,
   index,
   copy,
   canRemove,
+  message,
   onChange,
   onRemove,
 }: {
@@ -94,27 +234,23 @@ function WindowRow({
   index: number;
   copy: DiscountsWebCopy;
   canRemove: boolean;
+  /** This row's share of the builder's refusal, painted under the part it names. */
+  message: { part: "days" | "times"; text: string } | null;
   onChange: (next: DiscountScheduleWindow) => void;
   onRemove: () => void;
 }): JSX.Element {
   const sentence = formatScheduleWindow(window, copy);
+  const clockSays = clocksSayIt(message, copy);
   return (
     <Stack
       spacing={1}
-      sx={{ border: 1, borderColor: "divider", borderRadius: 1, p: 1.5 }}
+      sx={{ border: 1, borderColor: "divider", borderRadius: 1, p: { xs: 1, sm: 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 && (
+      {/* The remove control sits on its own line, top-right, so the seven
+          days keep the whole width for their one line. */}
+      {canRemove && (
+        <Box sx={{ display: "flex", justifyContent: "flex-end" }}>
           <Button
             type="button"
             variant="ghost"
@@ -125,26 +261,28 @@ function WindowRow({
           >
             ✕
           </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>
+      )}
+      <Box sx={equalParts(WEEK.length)} data-testid={`schedule-days-${index}`}>
+        {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) })}
+          />
+        ))}
       </Box>
+      {message?.part === "days" && <ScheduleMessage text={message.text} />}
+      <WindowTimes
+        window={window}
+        index={index}
+        copy={copy}
+        submitted={clockSays}
+        onChange={onChange}
+      />
+      {message?.part === "times" && !clockSays && <ScheduleMessage text={message.text} />}
       {sentence !== null && (
         <Text variant="caption" data-testid={`schedule-summary-${index}`}>
           {sentence}
@@ -168,7 +306,7 @@ function Presets({
     [copy.schedule.presetWeekend, WEEKEND_PRESET],
   ];
   return (
-    <Box sx={{ display: "flex", gap: 0.5, flexWrap: "wrap" }}>
+    <Box sx={equalParts(presets.length, true)}>
       {presets.map(([label, days]) => (
         <Button
           key={label}
@@ -178,7 +316,7 @@ function Presets({
           onClick={() => onApply([...days])}
           data-testid={`schedule-preset-${label}`}
         >
-          {label}
+          <OneLine>{label}</OneLine>
         </Button>
       ))}
     </Box>
@@ -200,6 +338,7 @@ export function ScheduleBuilder({
   onChange: (next: DiscountSchedule) => void;
 }): JSX.Element {
   const { windows } = schedule;
+  const spot = errorSpot(error, windows, copy);
   const replace = (index: number, next: DiscountScheduleWindow): void =>
     onChange({ windows: windows.map((w, i) => (i === index ? next : w)) });
 
@@ -227,6 +366,11 @@ export function ScheduleBuilder({
             index={index}
             copy={copy}
             canRemove={windows.length > 1}
+            message={
+              spot !== null && spot.index === index && error != null
+                ? { part: spot.part, text: error }
+                : null
+            }
             onChange={(next) => replace(index, next)}
             onRemove={() => onChange({ windows: windows.filter((_, i) => i !== index) })}
           />
@@ -246,7 +390,7 @@ export function ScheduleBuilder({
         )}
         <Text variant="caption">{fill(copy.schedule.timezoneNote, { timezone })}</Text>
         <Text variant="caption">{copy.schedule.guaranteeNote}</Text>
-        {error != null && error !== "" && <FormMessage error>{error}</FormMessage>}
+        {spot === null && error != null && error !== "" && <ScheduleMessage text={error} />}
       </Stack>
     </FormControl>
   );

package/src/react/schedule-copy.ts

@@ -70,5 +70,9 @@ export interface DiscountsScheduleCopy {
   /** Refusals. */
   readonly daysRequired: string;
   readonly timesRequired: string;
+  /** Under a clock holding a whole `HH:MM` that no day has, such as 25:00. */
+  readonly invalidTime: string;
+  /** A clock left half-typed ("1:00"): shown once the box is left, or at Criar. */
+  readonly timeIncomplete: string;
   readonly windowsRequired: string;
 }

package/src/react/table-config.ts

@@ -54,9 +54,23 @@ function labelled(labels: Readonly<Record<string, string>>, value: string): stri
   return labels[value] ?? value;
 }
 
+/** The Nome column's floor, in design px (the grid converts it through the type scale). */
+const NAME_COLUMN_MIN_PX = 200;
+
 export function discountColumns(copy: DiscountsWebCopy): DataViewColumn<DiscountListItem>[] {
   return [
-    { id: "name", header: copy.screen.columns.name, accessor: "name", searchable: true },
+    {
+      id: "name",
+      header: copy.screen.columns.name,
+      accessor: "name",
+      searchable: true,
+      // The column a row is read by: nine columns share the width, and with no
+      // floor the grid squeezed it until "Frete grátis na segunda" stood on
+      // three lines with "na" alone on one (ADR 0074 U1, FUT-4417). The floor
+      // holds a typical promotion name on one or two lines; the table scrolls
+      // sideways inside its own wrapper on a phone, as it already did.
+      minWidth: NAME_COLUMN_MIN_PX,
+    },
     // Pre-formatted by the page: a cell must not do arithmetic on basis points.
     { id: "value", header: copy.screen.columns.value, accessor: (row) => row.valueLabel },
     {

package/src/server/collections.ts

@@ -40,6 +40,26 @@ export interface DiscountTarget {
    * category path is built from the same edges. Absent or null at the root.
    */
   parentId?: string | null;
+  /**
+   * What a buyer can pay for one unit of this row, cheapest to dearest — its own
+   * price and its variations' (FUT-4417). Only an ITEM row carries it, and only
+   * so the combo form can say what a group's items sum to ("Como fica no
+   * carrinho"); nothing prices a cart from it. Absent: the form shows no
+   * preview for a group that can take this row alone.
+   */
+  priceRangeCents?: DiscountTargetPriceRange | null;
+  /**
+   * The category an ITEM row is filed under, for the same preview: a group that
+   * names a category takes every product filed under it or under its
+   * subcategories. Absent or null: uncategorized.
+   */
+  categoryId?: string | null;
+}
+
+/** The cheapest and dearest unit price of one target, in integer cents. */
+export interface DiscountTargetPriceRange {
+  minCents: number;
+  maxCents: number;
 }
 
 /**

package/src/server/index.ts

@@ -28,6 +28,7 @@ export {
   type DiscountableCollection,
   type DiscountableOps,
   type DiscountTarget,
+  type DiscountTargetPriceRange,
   type DiscountTargetGroup,
 } from "./collections";