@12-apps/discounts 1.16.0 → 1.17.0

package/src/react/number-fields.tsx

@@ -0,0 +1,142 @@
+"use client";
+
+import { useState, type JSX } from "react";
+
+import { FormMessage } from "@12-apps/ui/form/Form";
+import { Input } from "@12-apps/ui/form/Input";
+import { Fields, type TextFieldInputProps } from "@12-apps/ui/form/total-form";
+import { Stack } from "@12-apps/ui/mui/Stack";
+
+import type { DiscountsWebCopy } from "./copy";
+
+/**
+ * The form's number boxes, and the keypad each one asks the phone for
+ * (FUT-4143).
+ *
+ * None of them is `type="number"`. That control reads "2,5" according to the
+ * BROWSER's language — as 2.5, as nothing, or (in the survey's English
+ * Chromium) as 25 — and a promotion limited to 25 uses because the operator
+ * typed a comma is a silent, expensive mistake. Text boxes keep what was typed;
+ * the validator, which knows the pack's language, decides what it means.
+ */
+
+/** A percentage takes a separator: "12,5". */
+const DECIMAL_KEYPAD: TextFieldInputProps = { inputMode: "decimal" };
+
+/** A count of uses or units takes digits and nothing else. */
+const WHOLE_NUMBER_KEYPAD: TextFieldInputProps = { inputMode: "numeric", pattern: "[0-9]*" };
+
+/** Digits only, as typed. */
+function isWholeNumber(typed: string): boolean {
+  return /^\d+$/u.test(typed.trim());
+}
+
+/** "Desconto (%)", wherever the kind mounts it. */
+export function PercentField({ copy }: { copy: DiscountsWebCopy }): JSX.Element {
+  return (
+    <Fields.TextField
+      name="percentOff"
+      label={copy.form.percentOff}
+      placeholder={copy.form.percentPlaceholder}
+      inputProps={DECIMAL_KEYPAD}
+    />
+  );
+}
+
+/** A form-bound count: "Limite de usos", "Limite por cliente", "Combos por pedido". */
+export function WholeNumberField({ name, label }: { name: string; label: string }): JSX.Element {
+  return <Fields.TextField name={name} label={label} inputProps={WHOLE_NUMBER_KEYPAD} />;
+}
+
+/** The raw-`Input` twin of {@link WholeNumberField}, for a count held as text by its caller. */
+export function WholeNumberInput({
+  label,
+  value,
+  error,
+  dataTestId,
+  onChange,
+}: {
+  label: string;
+  value: string;
+  error: boolean;
+  dataTestId: string;
+  onChange: (next: string) => void;
+}): JSX.Element {
+  return (
+    <Input
+      label={label}
+      value={value}
+      error={error}
+      inputProps={WHOLE_NUMBER_KEYPAD}
+      onChange={(event) => onChange(event.target.value)}
+      data-testid={dataTestId}
+    />
+  );
+}
+
+/**
+ * What a count box shows for the number its caller holds.
+ *
+ * The STATE decides; the draft is only how it is spelled. A draft that reads
+ * as the held number is shown as typed. A draft that is not a number at all
+ * ("2,5", "") is shown while the held value is "not a number" too. Anything
+ * else is stale — a draft left from another row, a value changed from outside
+ * — and the state wins: the number, or an empty box for `NaN`.
+ */
+function countShown(typed: string, value: number): string {
+  const parsed = isWholeNumber(typed) ? Number(typed.trim()) : Number.NaN;
+  if (Number.isNaN(value)) return Number.isNaN(parsed) ? typed : "";
+  return parsed === value ? typed : String(value);
+}
+
+/**
+ * A count the caller holds as a NUMBER — a combo group's quantity, the units
+ * "leve 3, pague 2" takes.
+ *
+ * It keeps what was typed so "2,5" stays on screen and is refused there, in
+ * the pack's words, instead of becoming `NaN` in the box. What the caller gets
+ * is the number, or `NaN` while the text is not one — which its own validator
+ * refuses at submit, so nothing typed with a comma is ever sent. The box is
+ * red whenever the held value is not a count from 1, so it never looks fine
+ * beside a summary that says otherwise.
+ */
+export function CountInput({
+  label,
+  value,
+  copy,
+  invalidMessage,
+  dataTestId,
+  onChange,
+}: {
+  label: string;
+  value: number;
+  copy: DiscountsWebCopy;
+  /** Under an empty box or a zero — the caller's own refusal. */
+  invalidMessage: string;
+  dataTestId: string;
+  onChange: (next: number) => void;
+}): JSX.Element {
+  const [typed, setTyped] = useState<string>(() => (Number.isFinite(value) ? String(value) : ""));
+  const shown = countShown(typed, value);
+  const notDigits = shown.trim() !== "" && !isWholeNumber(shown);
+  const refused = !Number.isInteger(value) || value <= 0;
+  return (
+    <Stack spacing={0.5}>
+      <WholeNumberInput
+        label={label}
+        value={shown}
+        error={refused}
+        dataTestId={dataTestId}
+        onChange={(next) => {
+          setTyped(next);
+          onChange(isWholeNumber(next) ? Number(next.trim()) : Number.NaN);
+        }}
+      />
+      {refused && (
+        <FormMessage error dataTestId={`${dataTestId}-message`}>
+          {notDigits ? copy.form.wholeNumberOnly : invalidMessage}
+        </FormMessage>
+      )}
+    </Stack>
+  );
+}

package/src/react/pt-BR.ts

@@ -3,6 +3,7 @@ import {
   PT_BR_CATEGORY_SELECT_COPY,
   PT_BR_CONFIRM_ACTION_COPY,
   PT_BR_DATA_VIEWS_COPY,
+  PT_BR_UI_LABELS,
 } from "@12-apps/ui/pt-BR";
 
 import type { DiscountsWebCopy } from "./copy";
@@ -94,7 +95,7 @@ export const PT_BR_DISCOUNTS_WEB_COPY: DiscountsWebCopy = {
     toLabel: "às",
     presetEveryDay: "Todos os dias",
     presetWeekdays: "Seg a Sex",
-    presetWeekend: "Fim de semana",
+    presetWeekend: "Sáb e Dom",
     dayShort: ["Seg", "Ter", "Qua", "Qui", "Sex", "Sáb", "Dom"],
     dayLong: ["segunda", "terça", "quarta", "quinta", "sexta", "sábado", "domingo"],
     dayEvery: [
@@ -122,6 +123,8 @@ export const PT_BR_DISCOUNTS_WEB_COPY: DiscountsWebCopy = {
     activeNow: "Ativa agora",
     daysRequired: "Escolha ao menos um dia.",
     timesRequired: "Informe um horário de início e de fim diferentes.",
+    invalidTime: "Horário inexistente. Use de 00:00 a 23:59.",
+    timeIncomplete: "Termine o horário: HH:MM.",
     windowsRequired: "Adicione ao menos um horário.",
   },
   form: {
@@ -162,8 +165,13 @@ export const PT_BR_DISCOUNTS_WEB_COPY: DiscountsWebCopy = {
     firstOrderOnlyHint:
       "Vale só para quem nunca comprou aqui. O preço do cardápio não muda: o desconto aparece no carrinho de quem pode usar.",
     reviewFields: "Revise os campos destacados.",
+    errorSnackbar: PT_BR_UI_LABELS.formErrorSnackbar.message,
     saveFailed: "Não foi possível salvar o desconto",
     nameRequired: "Informe o nome da promoção.",
+    nameTooShort: "O nome precisa ter pelo menos 2 letras.",
+    datePlaceholder: "DD/MM/AAAA",
+    invalidDate: "Data inexistente. Use DD/MM/AAAA, como 25/12/2026.",
+    dateIncomplete: "Termine a data: DD/MM/AAAA.",
     invalidPercent: "Informe uma porcentagem maior que 0 e no máximo 100.",
     invalidAmount: "Informe um valor de desconto maior que zero.",
     invalidBundlePrice: "Informe o preço do combo, maior que zero.",
@@ -178,6 +186,9 @@ export const PT_BR_DISCOUNTS_WEB_COPY: DiscountsWebCopy = {
     comboSlotTargetRequired: "Escolha o que pode entrar em cada grupo do combo.",
     invalidComboQuantity: "Informe quantas unidades cada grupo leva, a partir de 1.",
     invalidMaxComboApplications: "Informe quantos combos cabem por pedido, a partir de 1.",
+    invalidUsageLimit: "Informe um número inteiro de usos, a partir de 1, ou deixe em branco.",
+    invalidPerBuyerLimit: "Informe um número inteiro por cliente, a partir de 1, ou deixe em branco.",
+    wholeNumberOnly: "Use só números inteiros, sem vírgula.",
     endsBeforeStarts: "A data de término deve ser posterior à data de início.",
   },
   combo: {
@@ -189,7 +200,11 @@ export const PT_BR_DISCOUNTS_WEB_COPY: DiscountsWebCopy = {
     quantity: "Quantidade",
     pick: "{collection} deste grupo",
     empty: "Nenhum grupo ainda. Adicione o primeiro para montar o combo.",
-    summary: "O combo leva {units} itens em {groups} grupos.",
+    summary: "O combo leva {units} em {groups}.",
+    unitsOne: "{count} item",
+    unitsOther: "{count} itens",
+    groupsOne: "{count} grupo",
+    groupsOther: "{count} grupos",
     freeUnitsTitle: "Leve mais, pague menos",
     freeUnitsHint:
       "Escolha os produtos, quantos o cliente leva e quantos saem de graça — é o clássico \"leve 3, pague 2\".",

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;
 }