@12-apps/discounts 1.15.0 → 1.17.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@12-apps/discounts",
-  "version": "1.15.0",
+  "version": "1.17.0",
   "type": "module",
   "sideEffects": [
     "**/e2e/**"
@@ -41,10 +41,10 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
-    "@12-apps/app-shell": "^5.11.0",
-    "@12-apps/forms-core": "^1.21.0",
+    "@12-apps/app-shell": "^5.14.1",
+    "@12-apps/forms-core": "^1.23.0",
     "@12-apps/shared-helpers": "^2.1.0",
-    "@12-apps/ui": "^6.43.0",
+    "@12-apps/ui": "^6.86.0",
     "@mui/icons-material": "^6.5.0",
     "zod": "^4.3.5"
   },
@@ -80,7 +80,7 @@
     "@12-apps/eslint-config": "^1.22.0",
     "@12-apps/i18n": "^1.3.0",
     "@12-apps/typescript-config": "^1.21.0",
-    "@12-apps/wiring": "^1.16.0",
+    "@12-apps/wiring": "^1.17.0",
     "@electric-sql/pglite": "^0.2.17",
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.0",

package/src/react/clock-input.tsx

@@ -0,0 +1,107 @@
+"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 { Stack } from "@12-apps/ui/mui/Stack";
+
+import { toMinutes } from "../engine/schedule";
+
+/**
+ * A 24-hour `HH:MM` box that is NOT `<input type="time">` (FUT-4143).
+ *
+ * The native control renders itself in the BROWSER's language, not the page's:
+ * on an English machine "Das 16:00" reads "04:00 PM" to a Brazilian merchant on
+ * a Portuguese screen, and no attribute overrides it. The host's own hours
+ * screens dropped it for the same reason (FUT-872), and this is the same field:
+ * text, masked, with the phone's digit keypad.
+ *
+ * The mask inserts the colon as the operator types, so four digits make
+ * `09:00` and "0900123" can never exist — the same rule as the host's
+ * `maskTime`, restated because a package cannot import a host. A half-typed
+ * `09:` is a fine intermediate state and is not shouted at; a COMPLETE time no
+ * day has (25:00, 12:60) is marked on the spot, in the pack's words.
+ */
+
+/**
+ * Keep four digits and put the colon after the second.
+ *
+ * Except while EDITING a time that already has its colon: select "09" in
+ * "09:00" and type "1" and the box holds "1:00", whose digits re-masked would
+ * read "10:0". So when the previous value had a separator and the new one
+ * still does, each side keeps its own digits — "1:00" stays, then "15:00".
+ * Any separator counts ("25/10" reads 25:10), and the result is still at most
+ * two digits a side.
+ */
+function maskTime(raw: string, previous: string): string {
+  const separator = /\D/u.exec(raw);
+  if (separator !== null && previous.includes(":")) {
+    const hours = raw.slice(0, separator.index).replace(/\D/gu, "").slice(0, 2);
+    const minutes = raw.slice(separator.index + 1).replace(/\D/gu, "").slice(0, 2);
+    return `${hours}:${minutes}`;
+  }
+  const digits = raw.replace(/\D/gu, "").slice(0, 4);
+  if (digits.length <= 2) return digits;
+  return `${digits.slice(0, 2)}:${digits.slice(2)}`;
+}
+
+/** A finished `HH:MM` that names no minute of a day. */
+function isImpossibleTime(value: string): boolean {
+  return /^\d{2}:\d{2}$/u.test(value) && toMinutes(value) === null;
+}
+
+export function ClockInput({
+  value,
+  label,
+  invalidMessage,
+  incompleteMessage,
+  submitted = false,
+  dataTestId,
+  onChange,
+}: {
+  value: string;
+  /** The accessible name — "Das" and "às" sit side by side. */
+  label: string;
+  /** Under a time that does not exist. */
+  invalidMessage: string;
+  /** Under a half-typed time once the box is left — never while typing. */
+  incompleteMessage: string;
+  /**
+   * The form refused this row's times at Criar: an unfinished clock says so
+   * now, left or not, and the row does not repeat it (FUT-4143).
+   */
+  submitted?: boolean;
+  dataTestId: string;
+  onChange: (next: string) => void;
+}): JSX.Element {
+  const [left, setLeft] = useState(false);
+  const impossible = isImpossibleTime(value);
+  const whole = /^\d{2}:\d{2}$/u.test(value);
+  const unfinished = !whole && ((left && value !== "") || submitted);
+  const message = impossible ? invalidMessage : unfinished ? incompleteMessage : undefined;
+  return (
+    <Stack spacing={0.5}>
+      <Input
+        type="text"
+        size="sm"
+        placeholder="00:00"
+        value={value}
+        error={message !== undefined}
+        aria-label={label}
+        inputProps={{ inputMode: "numeric", maxLength: 5, autoComplete: "off" }}
+        onBlur={() => setLeft(true)}
+        onChange={(event) => {
+          setLeft(false);
+          onChange(maskTime(event.target.value, value));
+        }}
+        data-testid={dataTestId}
+      />
+      {message !== undefined && (
+        <FormMessage error dataTestId={`${dataTestId}-message`}>
+          {message}
+        </FormMessage>
+      )}
+    </Stack>
+  );
+}

package/src/react/combo-slot-builder.tsx

@@ -1,10 +1,9 @@
 "use client";
 
-import type { JSX } from "react";
+import { useRef, 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";
@@ -13,6 +12,7 @@ import type { ComboRequirement } from "../engine/types";
 
 import type { WireTargetGroup } from "./api";
 import { fill, type DiscountsWebCopy } from "./copy";
+import { CountInput } from "./number-fields";
 import { TargetPickerField } from "./target-picker-field";
 
 /**
@@ -48,11 +48,45 @@ export function comboUnits(slots: readonly ComboRequirement[]): number {
   return slots.reduce((total, slot) => total + (Number.isFinite(slot.quantity) ? slot.quantity : 0), 0);
 }
 
+/** "1 item" or "4 itens": the pack's one form for exactly 1, its other form otherwise. */
+function counted(count: number, one: string, other: string): string {
+  return fill(count === 1 ? one : other, { count });
+}
+
+/** The read-back sentence, both nouns in the right number. */
+function comboSummary(slots: readonly ComboRequirement[], copy: DiscountsWebCopy): string {
+  const { combo } = copy;
+  return fill(combo.summary, {
+    units: counted(comboUnits(slots), combo.unitsOne, combo.unitsOther),
+    groups: counted(slots.length, combo.groupsOne, combo.groupsOther),
+  });
+}
+
 /** An empty group: one unit, nothing chosen yet. */
 export function blankSlot(): ComboRequirement {
   return { quantity: 1, categoryIds: [], menuItemIds: [] };
 }
 
+/**
+ * One screen-only id per group, in list order (FUT-4143).
+ *
+ * A group has no id until the database gives it one, and an index key hands a
+ * removed row's component — and its half-typed draft — to the row that moves
+ * up. These ids live here and nowhere else: the wire still carries the plain
+ * `ComboRequirement`s. Appends get a fresh id; a removal drops its own (see
+ * `onRemove`); a list replaced from outside is padded or cut to length.
+ */
+function useRowIds(length: number): { current: number[] } {
+  const ids = useRef<number[]>([]);
+  const next = useRef(0);
+  while (ids.current.length < length) {
+    ids.current = [...ids.current, next.current];
+    next.current += 1;
+  }
+  if (ids.current.length > length) ids.current = ids.current.slice(0, length);
+  return ids;
+}
+
 /** Replace one group, leaving the rest (and their order) alone. */
 function replaceAt(
   slots: readonly ComboRequirement[],
@@ -75,8 +109,9 @@ function withIds(slot: ComboRequirement, targetType: string, ids: string[]): Com
  * One group: its quantity, one picker per registered collection, and the
  * control that removes it.
  *
- * The quantity is a `number` input rather than a masked one — it counts units,
- * not money, so there is no locale in it. It is held as a NUMBER in state
+ * The quantity is a digits-only text box (`CountInput`, FUT-4143) rather than
+ * `type="number"`, which read "2,5" by the browser's language — as 25 in an
+ * English one. It is held as a NUMBER in state
  * rather than as the form's string, because the summary line above adds them up
  * and the validator compares them against `freeUnits`; parsing on every read
  * would put the same `Number()` in three places.
@@ -117,12 +152,13 @@ function ComboSlotRow({
         </Button>
       </Stack>
       <Stack spacing={2} sx={{ mt: 1 }}>
-        <Input
-          type="number"
+        <CountInput
           label={copy.combo.quantity}
-          value={String(slot.quantity)}
-          onChange={(event) => onChange({ ...slot, quantity: Number(event.target.value) })}
-          data-testid={`combo-slot-${index}-quantity`}
+          value={slot.quantity}
+          copy={copy}
+          invalidMessage={copy.form.invalidComboQuantity}
+          dataTestId={`combo-slot-${index}-quantity`}
+          onChange={(quantity) => onChange({ ...slot, quantity })}
         />
         {groups.map((group) => (
           <TargetPickerField
@@ -170,6 +206,7 @@ export function ComboSlotBuilder({
   copy: DiscountsWebCopy;
   onChange: (next: ComboRequirement[]) => void;
 }): JSX.Element {
+  const rowIds = useRowIds(slots.length);
   return (
     <FormControl fullWidth>
       <FormLabel>{copy.combo.title}</FormLabel>
@@ -177,17 +214,19 @@ export function ComboSlotBuilder({
       <Stack spacing={2} sx={{ mt: 1 }} data-testid="combo-slots">
         {slots.map((slot, index) => (
           <ComboSlotRow
-            // The index IS the identity here: `position` is the array index,
-            // and a group carries no id of its own until the database gives it
-            // one. Removing a group renumbers the rest, which is exactly what
-            // the operator sees happen.
-            key={index}
+            // `position` is the array index, and removing a group renumbers
+            // the rest — but the ROW is keyed by a screen-only id, so the
+            // group below does not inherit the removed one's draft.
+            key={rowIds.current[index]}
             slot={slot}
             index={index}
             groups={groups}
             copy={copy}
             onChange={(next) => onChange(replaceAt(slots, index, next))}
-            onRemove={() => onChange(slots.filter((_, position) => position !== index))}
+            onRemove={() => {
+              rowIds.current = rowIds.current.filter((_, position) => position !== index);
+              onChange(slots.filter((_, position) => position !== index));
+            }}
           />
         ))}
         {slots.length === 0 && (
@@ -195,20 +234,27 @@ export function ComboSlotBuilder({
             {copy.combo.empty}
           </Text>
         )}
-        <Stack direction="row" alignItems="center" justifyContent="space-between" spacing={2}>
-          <Button
-            variant="outline"
-            onClick={() => onChange([...slots, blankSlot()])}
-            data-testid="combo-add-slot"
-          >
-            {copy.combo.addSlot}
-          </Button>
+        {/* Wraps as a ROW, never inside the button: where the note does not
+            fit beside "Adicionar grupo" it takes the line below, and the
+            button's own label stays on one line (FUT-4143 UI review). */}
+        <Box sx={{ display: "flex", flexWrap: "wrap", alignItems: "center", columnGap: 2, rowGap: 1 }}>
+          <Box sx={{ flexShrink: 0, "& > button": { whiteSpace: "nowrap" } }}>
+            <Button
+              variant="outline"
+              onClick={() => onChange([...slots, blankSlot()])}
+              data-testid="combo-add-slot"
+            >
+              {copy.combo.addSlot}
+            </Button>
+          </Box>
           {slots.length > 0 && (
-            <Text variant="caption" data-testid="combo-summary">
-              {fill(copy.combo.summary, { units: comboUnits(slots), groups: slots.length })}
-            </Text>
+            <Box sx={{ flex: "1 1 200px", minWidth: 0 }}>
+              <Text variant="caption" data-testid="combo-summary">
+                {comboSummary(slots, copy)}
+              </Text>
+            </Box>
           )}
-        </Stack>
+        </Box>
       </Stack>
     </FormControl>
   );

package/src/react/copy.ts

@@ -132,6 +132,8 @@ export interface DiscountsFormCopy {
   readonly scope: string;
   readonly startsAt: string;
   readonly endsAt: string;
+  /** Inside an empty Início / Término: the day-first order the box reads (FUT-4156). */
+  readonly datePlaceholder: string;
   readonly minSubtotal: string;
   readonly usageLimit: string;
   readonly perBuyerLimit: string;
@@ -147,12 +149,24 @@ export interface DiscountsFormCopy {
   /** The first-purchase condition (FUT-2825), and what it does to the menu. */
   readonly firstOrderOnly: string;
   readonly firstOrderOnlyHint: string;
-  /** The banner over a form the operator must fix before it will send. */
+  /**
+   * The banner over a form the operator must fix before it will send. No
+   * longer rendered (FUT-4143): a client refusal says it once, in the toast
+   * (`errorSnackbar`). Kept so a host's own pack still type-checks.
+   */
   readonly reviewFields: string;
+  /**
+   * The toast a failed submit raises over the whole form (FUT-4143). The packs
+   * take it from `@12-apps/ui`'s own labels; `FormErrorSnackbar`'s fallback is
+   * English, so a form that does not pass one shows English on any screen.
+   */
+  readonly errorSnackbar: 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;
+  /** A name of one character — the two-character floor this form has always held. */
+  readonly nameTooShort: string;
   readonly invalidPercent: string;
   readonly invalidAmount: string;
   readonly invalidBundlePrice: string;
@@ -174,7 +188,20 @@ export interface DiscountsFormCopy {
   readonly comboSlotTargetRequired: string;
   readonly invalidComboQuantity: string;
   readonly invalidMaxComboApplications: string;
+  /** The two redemption caps: whole numbers from 1, or blank for "no cap". */
+  readonly invalidUsageLimit: string;
+  readonly invalidPerBuyerLimit: string;
+  /**
+   * Under a unit count typed with anything but digits ("2,5"), said while it is
+   * typed: a count of units has no decimals, and a browser that read the comma
+   * away stored 25.
+   */
+  readonly wholeNumberOnly: string;
   readonly endsBeforeStarts: string;
+  /** A date that is not a whole, real day — "31/02/2026", or "12/0" at Criar. */
+  readonly invalidDate: string;
+  /** A date left half-typed ("25/10/202"): shown once the box is left, or at Criar. */
+  readonly dateIncomplete: string;
 }
 
 /**
@@ -205,9 +232,17 @@ export interface DiscountsComboCopy {
   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}`.
+   * checked without saving it. `{units}` and `{groups}` are the two counted
+   * nouns below, already filled — "4 itens", "1 grupo" (FUT-4143: the sentence
+   * used to say "1 grupos").
    */
   readonly summary: string;
+  /** "1 item" / "{count} itens": one for exactly 1, the other for every other count. */
+  readonly unitsOne: string;
+  readonly unitsOther: string;
+  /** "1 grupo" / "{count} grupos", the same rule. */
+  readonly groupsOne: string;
+  readonly groupsOther: string;
   /**
    * The "leve 3, pague 2" builder (`./free-units-builder`), which is the same
    * stored shape wearing the sentence an operator would actually say. Its own

package/src/react/date-field.tsx

@@ -0,0 +1,141 @@
+"use client";
+
+import { useState, type JSX } from "react";
+
+import { FormControl, FormLabel, FormMessage } from "@12-apps/ui/form/Form";
+import { Input } from "@12-apps/ui/form/Input";
+import { useFormContext } from "@12-apps/ui/form/total-form";
+
+/**
+ * A day-first `DD/MM/AAAA` box that is NOT `<input type="date">` (FUT-4156).
+ *
+ * The native control follows the BROWSER's language: an English Chromium shows
+ * Início as `mm/dd/yyyy` on a Portuguese screen, the same trap `ClockInput`
+ * avoids for the hours. This is the same family: text, masked, numeric keypad,
+ * a complete day that does not exist (31/02/2026) marked as it is typed.
+ *
+ * **The form value stays ISO** (`YYYY-MM-DD`), exactly what the native input
+ * held, so the wire and the validator's date comparison are unchanged. While
+ * the box holds anything that is not a whole real day the value IS that text,
+ * and `validate` refuses it at Criar — a half-typed date is never sent, and
+ * never silently dropped to "no date" either.
+ */
+
+const ISO_DAY = /^(\d{4})-(\d{2})-(\d{2})$/u;
+const MASKED_DAY = /^(\d{2})\/(\d{2})\/(\d{4})$/u;
+const PART_LIMITS = [2, 2, 4];
+
+/** `YYYY-MM-DD` that names a real calendar day. */
+export function isIsoDay(value: string): boolean {
+  const match = ISO_DAY.exec(value);
+  if (match === null) return false;
+  const [year, month, day] = [Number(match[1]), Number(match[2]), Number(match[3])];
+  const date = new Date(Date.UTC(year, month - 1, day));
+  return (
+    date.getUTCFullYear() === year && date.getUTCMonth() === month - 1 && date.getUTCDate() === day
+  );
+}
+
+/** A whole `DD/MM/AAAA`, real or not. */
+export function isCompleteMaskedDay(value: string): boolean {
+  return MASKED_DAY.test(value);
+}
+
+/** `DD/MM/AAAA` → `YYYY-MM-DD`, or `null` when it is not a complete real day. */
+function maskedToIso(masked: string): string | null {
+  const match = MASKED_DAY.exec(masked);
+  if (match === null) return null;
+  const iso = `${match[3]}-${match[2]}-${match[1]}`;
+  return isIsoDay(iso) ? iso : null;
+}
+
+function isoToMasked(iso: string): string {
+  const match = ISO_DAY.exec(iso);
+  return match === null ? iso : `${match[3]}/${match[2]}/${match[1]}`;
+}
+
+/** Up to eight digits, day first, with the slashes put in as they are typed. */
+function maskDigits(raw: string): string {
+  const digits = raw.replace(/\D/gu, "").slice(0, 8);
+  if (digits.length <= 2) return digits;
+  if (digits.length <= 4) return `${digits.slice(0, 2)}/${digits.slice(2)}`;
+  return `${digits.slice(0, 2)}/${digits.slice(2, 4)}/${digits.slice(4)}`;
+}
+
+/**
+ * The typed text, masked.
+ *
+ * - A pasted ISO day reads as that day, not as eight digits split day-first.
+ * - Editing a date that already has its slashes keeps each part's own digits:
+ *   select "25" in "25/10/2026", type "0" and the box holds "0/10/2026", then
+ *   "05/10/2026" — re-masking the digits would read "01/02/026".
+ * - A part typed past its length moves on to the next part ("12/032" →
+ *   "12/03/2"), which is plain typing, not an edit.
+ */
+function maskDate(raw: string, previous: string): string {
+  if (ISO_DAY.test(raw.trim())) return isoToMasked(raw.trim());
+  if (previous.includes("/") && /\D/u.test(raw)) {
+    const parts = raw.split(/\D/u);
+    const fits =
+      parts.length <= 3 && parts.every((part, index) => part.length <= (PART_LIMITS[index] ?? 0));
+    if (fits) return parts.join("/");
+  }
+  return maskDigits(raw);
+}
+
+/** A form-bound day: the value is ISO when whole and real, the typed text otherwise. */
+export function DateField({
+  name,
+  label,
+  placeholder,
+  invalidMessage,
+  incompleteMessage,
+}: {
+  name: string;
+  label: string;
+  placeholder: string;
+  invalidMessage: string;
+  /** Under a half-typed date once the box is left — never while typing. */
+  incompleteMessage: string;
+}): JSX.Element {
+  const { values, errors, setFieldValue } = useFormContext();
+  const [left, setLeft] = useState(false);
+  const value = values[name] ?? "";
+  const shown = isIsoDay(value) ? isoToMasked(value) : value;
+  // A complete day that no calendar has is marked while typed; anything still
+  // being typed waits for Criar, like every other field.
+  const impossible = MASKED_DAY.test(shown) && maskedToIso(shown) === null;
+  const unfinished = left && shown !== "" && !MASKED_DAY.test(shown);
+  const message =
+    errors[name] ??
+    (impossible ? invalidMessage : unfinished ? incompleteMessage : undefined);
+  const testId = `total-form-field-${name}`;
+  return (
+    <FormControl fullWidth>
+      <FormLabel htmlFor={name} error={message !== undefined}>
+        {label}
+      </FormLabel>
+      <Input
+        id={name}
+        name={name}
+        type="text"
+        placeholder={placeholder}
+        value={shown}
+        error={message !== undefined}
+        inputProps={{ inputMode: "numeric", maxLength: 10, autoComplete: "off", "data-testid": testId }}
+        data-testid={testId}
+        onBlur={() => setLeft(true)}
+        onChange={(event) => {
+          setLeft(false);
+          const masked = maskDate(event.target.value, shown);
+          setFieldValue(name, maskedToIso(masked) ?? masked);
+        }}
+      />
+      {message !== undefined && (
+        <FormMessage error dataTestId={`${testId}-message`}>
+          {message}
+        </FormMessage>
+      )}
+    </FormControl>
+  );
+}