@12-apps/discounts 1.16.0 → 1.17.0

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

@@ -13,7 +13,9 @@ 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 { COMBO_REWARDS, isComboKind, SELECTABLE_DISCOUNT_SCOPES } from "./form-kind";
+import { DateField } from "./date-field";
+import { PercentField, WholeNumberField } from "./number-fields";
 import { ScheduleBuilder } from "./schedule-builder";
 
 /**
@@ -49,14 +51,14 @@ function HintedField({
 }): JSX.Element {
   return (
     <Stack spacing={0.5}>
-      <Fields.TextField name={name} label={label} type="number" />
+      <WholeNumberField name={name} label={label} />
       <Text variant="caption">{hint}</Text>
     </Stack>
   );
 }
 
 /** One closed set as a toggle's options, labelled by the pack. */
-function optionsFor<TKey extends string>(
+export function optionsFor<TKey extends string>(
   values: readonly TKey[],
   labels: Readonly<Record<TKey, string>>,
 ): { value: string; label: string }[] {
@@ -73,29 +75,6 @@ function optionsFor<TKey extends string>(
  */
 export type CurrencyFieldComponent = (props: { name: string; label: string }) => JSX.Element;
 
-/**
- * What kind of promotion this is — the form's first and most consequential
- * question, and the only one that decides what the rest of it looks like.
- *
- * The option list comes from the caller rather than from the constant, because
- * it is one longer when a legacy `BUNDLE_PRICE` rule is being edited.
- */
-export function KindField({
-  copy,
-  kinds,
-}: {
-  copy: DiscountsWebCopy;
-  kinds: readonly DiscountKind[];
-}): JSX.Element {
-  return (
-    <Fields.ToggleField
-      name="kind"
-      label={copy.form.kind}
-      options={optionsFor(kinds, copy.labels.kind)}
-    />
-  );
-}
-
 /**
  * A combo's reward: which of the two, and how much.
  *
@@ -125,11 +104,7 @@ function ComboRewardFields({
         {values.comboReward === "FIXED_AMOUNT" ? (
           <Currency name="amountOff" label={copy.form.amountOff} />
         ) : (
-          <Fields.TextField
-            name="percentOff"
-            label={copy.form.percentOff}
-            placeholder={copy.form.percentPlaceholder}
-          />
+          <PercentField copy={copy} />
         )}
       </Box>
       <Text variant="caption">{copy.form.comboRewardHint}</Text>
@@ -164,13 +139,7 @@ export function RewardFields({
   if (kind === "FREE_UNITS") return null;
   if (kind === "BUNDLE_PRICE") return <Currency name="bundlePrice" label={copy.form.bundlePrice} />;
   if (kind === "FIXED_AMOUNT") return <Currency name="amountOff" label={copy.form.amountOff} />;
-  return (
-    <Fields.TextField
-      name="percentOff"
-      label={copy.form.percentOff}
-      placeholder={copy.form.percentPlaceholder}
-    />
-  );
+  return <PercentField copy={copy} />;
 }
 
 /** The coupon input, shown only for a CODE-triggered rule. */
@@ -252,6 +221,24 @@ export function ComboCapField({ copy }: { copy: DiscountsWebCopy }): JSX.Element
   );
 }
 
+/** Início and Término, day-first on every browser (FUT-4156). */
+function PeriodFields({ copy }: { copy: DiscountsWebCopy }): JSX.Element {
+  return (
+    <Box sx={{ display: "grid", gap: 2, gridTemplateColumns: { xs: "1fr", sm: "1fr 1fr" } }}>
+      {(["startsAt", "endsAt"] as const).map((name) => (
+        <DateField
+          key={name}
+          name={name}
+          label={copy.form[name]}
+          placeholder={copy.form.datePlaceholder}
+          invalidMessage={copy.form.invalidDate}
+          incompleteMessage={copy.form.dateIncomplete}
+        />
+      ))}
+    </Box>
+  );
+}
+
 /**
  * "Quando vale" — the campaign PERIOD, and the weekly schedule inside it
  * (FUT-996).
@@ -281,14 +268,19 @@ export function WindowFields({
   onScheduleChange: (next: DiscountSchedule) => void;
   onScheduleEnabledChange: (next: boolean) => void;
 }): JSX.Element {
+  // The schedule is not a form value, so nothing paints `errors.schedule` for
+  // it: it is handed to the builder, and cleared on the next edit the way a
+  // field's own error is (FUT-4155).
+  const { errors, setFieldValue } = useFormContext();
+  const scheduleError = errors.schedule;
+  const clearScheduleError = (): void => {
+    if (scheduleError !== undefined) setFieldValue("schedule", "");
+  };
   return (
     <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>
+        <PeriodFields copy={copy} />
         <Text variant="caption">{copy.schedule.periodHint}</Text>
       </Stack>
       <FormControl>
@@ -303,7 +295,10 @@ export function WindowFields({
                 type="radio"
                 name="discount-repetition"
                 checked={scheduleEnabled === value}
-                onChange={() => onScheduleEnabledChange(value)}
+                onChange={() => {
+                  clearScheduleError();
+                  onScheduleEnabledChange(value);
+                }}
                 data-testid={value ? "repetition-specific" : "repetition-always"}
               />
               <Text variant="body">{label}</Text>
@@ -317,7 +312,11 @@ export function WindowFields({
             schedule={schedule}
             copy={copy}
             timezone={timezoneLabel ?? ""}
-            onChange={onScheduleChange}
+            error={scheduleError}
+            onChange={(next) => {
+              clearScheduleError();
+              onScheduleChange(next);
+            }}
           />
           <OrderScopeScheduleNote copy={copy} />
         </>
@@ -355,8 +354,8 @@ export function LimitFields({
   return (
     <Box sx={{ display: "grid", gap: 2, gridTemplateColumns: { xs: "1fr", sm: "1fr 1fr 1fr" } }}>
       <Currency name="minSubtotal" label={copy.form.minSubtotal} />
-      <Fields.TextField name="usageLimit" label={copy.form.usageLimit} type="number" />
-      <Fields.TextField name="perBuyerLimit" label={copy.form.perBuyerLimit} type="number" />
+      <WholeNumberField name="usageLimit" label={copy.form.usageLimit} />
+      <WholeNumberField name="perBuyerLimit" label={copy.form.perBuyerLimit} />
     </Box>
   );
 }

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

@@ -1,8 +1,11 @@
+import { minLength, required } from "@12-apps/forms-core";
+
 import { toMinutes, type DiscountSchedule } from "../engine/schedule";
 import type { ComboRequirement } from "../engine/types";
 
 import { comboUnits } from "./combo-slot-builder";
 import { fill, type DiscountsWebCopy } from "./copy";
+import { isCompleteMaskedDay, isIsoDay } from "./date-field";
 import type { DiscountFormValues } from "./discount-form-values";
 import { isComboKind, typeAndScopeFor } from "./form-kind";
 import type { DiscountsFormatters } from "./format";
@@ -19,12 +22,40 @@ import type { DiscountsFormatters } from "./format";
  * inputs red.
  */
 
-/** A whole number above zero, as typed. `null` when it is neither. */
+/**
+ * A whole number above zero, as typed. `null` when it is neither.
+ *
+ * Digits only (FUT-4143): `Number` reads "2.0" and "1e1" as whole numbers, and
+ * a count an operator typed with a separator in it was meant as something else.
+ */
 function positiveCount(typed: string): number | null {
   const trimmed = typed.trim();
-  if (trimmed === "") return null;
+  if (!/^\d+$/u.test(trimmed)) return null;
   const value = Number(trimmed);
-  return Number.isInteger(value) && value > 0 ? value : null;
+  return value > 0 ? value : null;
+}
+
+/** The name: present, and at least two characters, in the pack's words. */
+function checkName(typed: string, copy: DiscountsWebCopy): Record<string, string> {
+  const refused =
+    required(copy.form.nameRequired)(typed) ?? minLength(2, copy.form.nameTooShort)(typed.trim());
+  return refused === undefined ? {} : { name: refused };
+}
+
+/**
+ * The two redemption caps. Blank is "no cap"; anything else is a whole number
+ * from 1, so "2,5" is refused here instead of reaching the wire as 2 — or, in a
+ * browser that read the comma away, as 25.
+ */
+function checkLimits(values: DiscountFormValues, copy: DiscountsWebCopy): Record<string, string> {
+  const errors: Record<string, string> = {};
+  if (values.usageLimit.trim() !== "" && positiveCount(values.usageLimit) === null) {
+    errors.usageLimit = copy.form.invalidUsageLimit;
+  }
+  if (values.perBuyerLimit.trim() !== "" && positiveCount(values.perBuyerLimit) === null) {
+    errors.perBuyerLimit = copy.form.invalidPerBuyerLimit;
+  }
+  return errors;
 }
 
 /** A money field that has to hold something above zero. */
@@ -134,6 +165,28 @@ function checkCombo(
   return errors;
 }
 
+/**
+ * Início and Término. Each is blank or a whole real ISO day — the date box
+ * holds its typed text until it is one (FUT-4156) — and only two real days are
+ * compared. The window is half-open [start, end): equal dates are an EMPTY
+ * window, so the rule is "after", not "not before".
+ */
+function checkPeriod(values: DiscountFormValues, copy: DiscountsWebCopy): Record<string, string> {
+  const errors: Record<string, string> = {};
+  for (const name of ["startsAt", "endsAt"] as const) {
+    if (values[name] === "" || isIsoDay(values[name])) continue;
+    // A whole DD/MM/AAAA that is no day does not exist; anything shorter is
+    // simply not finished, and is told so.
+    errors[name] = isCompleteMaskedDay(values[name])
+      ? copy.form.invalidDate
+      : copy.form.dateIncomplete;
+  }
+  if (isIsoDay(values.startsAt) && isIsoDay(values.endsAt) && values.endsAt <= values.startsAt) {
+    errors.endsAt = copy.form.endsBeforeStarts;
+  }
+  return errors;
+}
+
 /** What the pickers and the builder currently hold, in one argument. */
 export interface FormTargets {
   categoryIds: string[];
@@ -164,13 +217,19 @@ function checkSchedule(
   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 } : {};
+  const ends = windows.flatMap((window) => [window.from, window.to]);
+  // Unfinished first: "1:00" mid-edit is not a pair of equal ends, it is a
+  // time nobody has finished typing.
+  if (ends.some((end) => !/^\d{2}:\d{2}$/u.test(end))) {
+    return { schedule: copy.schedule.timeIncomplete };
+  }
+  // Then a whole HH:MM that no day has (25:00), in the clock's own words —
+  // "start and end must differ" would be untrue of it.
+  if (ends.some((end) => toMinutes(end) === null)) {
+    return { schedule: copy.schedule.invalidTime };
+  }
+  const sameEnds = windows.some((window) => window.from === window.to);
+  return sameEnds ? { schedule: copy.schedule.timesRequired } : {};
 }
 
 /** The schedule editor's state: its switch and its rows, kept separate. */
@@ -187,8 +246,13 @@ export function validate(
   scheduleState: ScheduleState,
 ): Record<string, string> {
   const slots = targets.comboRequirements;
+  // Every rule in ONE pass, the name's included (FUT-4143): the name used to be
+  // the container's schema, which stops before this function runs, so a 150%
+  // sat unmarked beside a red name until the name was fixed.
   const errors: Record<string, string> = {
+    ...checkName(values.name, copy),
     ...checkValue(values, slots, formatters, copy),
+    ...checkLimits(values, copy),
     ...checkCombo(values, slots, copy),
     ...checkSchedule(scheduleState, copy),
   };
@@ -202,11 +266,7 @@ export function validate(
   if (scope === "ITEM" && targets.menuItemIds.length === 0) {
     errors.scope = copy.form.itemTargetRequired;
   }
-  // The window is half-open [start, end): equal dates are an EMPTY window, so
-  // the rule is "after", not "not before".
-  if (values.startsAt !== "" && values.endsAt !== "" && values.endsAt <= values.startsAt) {
-    errors.endsAt = copy.form.endsBeforeStarts;
-  }
+  Object.assign(errors, checkPeriod(values, copy));
   return errors;
 }
 

package/src/react/discount-form.tsx

@@ -2,7 +2,6 @@
 
 import { useState, type JSX } from "react";
 
-import { minLength, required } from "@12-apps/forms-core";
 import { Alert } from "@12-apps/ui/data-display/Alert";
 import {
   Fields,
@@ -21,7 +20,6 @@ import type { DiscountsWebCopy } from "./copy";
 import {
   ComboCapField,
   DiscountSwitches,
-  KindField,
   LimitFields,
   RewardFields,
   ScopeField,
@@ -30,6 +28,7 @@ import {
   type CurrencyFieldComponent,
 } from "./discount-form-fields";
 import { DiscountTargetPicker } from "./discount-target-picker";
+import { KindField } from "./kind-field";
 import { blankWindow } from "./schedule-builder";
 import { validate, type FormTargets } from "./discount-form-validate";
 import { initialValues, type DiscountFormValues } from "./discount-form-values";
@@ -147,8 +146,9 @@ function makeSubmit(
       schedule: extra.schedule,
     });
     if (Object.keys(invalid).length > 0) {
+      // ONE message for a client refusal: the red fields and the toast
+      // (FUT-4143). The `saveFailed` alert is the SERVER's, below.
       setFieldErrors(invalid);
-      setError(copy.form.reviewFields);
       return;
     }
     const payload: DiscountFormPayload = {
@@ -188,8 +188,10 @@ export function DiscountForm(props: DiscountFormProps): JSX.Element {
 
   return (
     <FormContainer<DiscountFormValues>
+      // No `schema`: the container runs one before `onSubmit` and stops when
+      // it fails, which judged the name alone. Every rule, the name's too,
+      // lives in `validate` so one Criar marks every field (FUT-4143).
       initialValues={initialValues(editing, formatters)}
-      schema={{ name: [required(copy.form.nameRequired), minLength(2)] }}
       onSubmit={handleSubmit}
       dataTestId="discount-form"
     >
@@ -245,7 +247,7 @@ export function DiscountForm(props: DiscountFormProps): JSX.Element {
           {editing ? copy.form.submitEdit : copy.form.submitCreate}
         </SubmitButton>
       </Stack>
-      <FormErrorSnackbar />
+      <FormErrorSnackbar message={copy.form.errorSnackbar} />
     </FormContainer>
   );
 }

package/src/react/en-US.ts

@@ -3,6 +3,7 @@ import {
   EN_US_CATEGORY_SELECT_COPY,
   EN_US_CONFIRM_ACTION_COPY,
   EN_US_DATA_VIEWS_COPY,
+  EN_US_UI_LABELS,
 } from "@12-apps/ui/en-US";
 
 import type { DiscountsWebCopy } from "./copy";
@@ -131,6 +132,8 @@ export const EN_US_DISCOUNTS_WEB_COPY: DiscountsWebCopy = {
     activeNow: "Running now",
     daysRequired: "Pick at least one day.",
     timesRequired: "Enter a start and end time that differ.",
+    invalidTime: "That time does not exist. Use 00:00 to 23:59.",
+    timeIncomplete: "Finish the time: HH:MM.",
     windowsRequired: "Add at least one time.",
   },
   form: {
@@ -172,8 +175,13 @@ export const EN_US_DISCOUNTS_WEB_COPY: DiscountsWebCopy = {
     firstOrderOnlyHint:
       "Only for customers who have never bought here. Menu prices do not change: the discount shows in the cart of whoever can use it.",
     reviewFields: "Check the highlighted fields.",
+    errorSnackbar: EN_US_UI_LABELS.formErrorSnackbar.message,
     saveFailed: "Could not save the discount",
     nameRequired: "Give the promotion a name.",
+    nameTooShort: "The name needs at least 2 characters.",
+    datePlaceholder: "DD/MM/YYYY",
+    invalidDate: "That date does not exist. Use DD/MM/YYYY, such as 25/12/2026.",
+    dateIncomplete: "Finish the date: DD/MM/YYYY.",
     invalidPercent: "Enter a percentage greater than 0 and at most 100.",
     invalidAmount: "Enter a discount amount greater than zero.",
     invalidBundlePrice: "Enter the bundle price, greater than zero.",
@@ -188,6 +196,9 @@ export const EN_US_DISCOUNTS_WEB_COPY: DiscountsWebCopy = {
     comboSlotTargetRequired: "Choose what can go in each group of the bundle.",
     invalidComboQuantity: "Enter how many units each group takes, from 1 upwards.",
     invalidMaxComboApplications: "Enter how many bundles fit in one order, from 1 upwards.",
+    invalidUsageLimit: "Enter a whole number of uses from 1 upwards, or leave it blank.",
+    invalidPerBuyerLimit: "Enter a whole number per customer from 1 upwards, or leave it blank.",
+    wholeNumberOnly: "Whole numbers only, no decimals.",
     endsBeforeStarts: "The end date must be after the start date.",
   },
   combo: {
@@ -201,7 +212,11 @@ export const EN_US_DISCOUNTS_WEB_COPY: DiscountsWebCopy = {
     // sentence is built around it rather than naming a noun of its own.
     pick: "{collection} in this group",
     empty: "No groups yet. Add the first one to build the bundle.",
-    summary: "The bundle takes {units} items across {groups} groups.",
+    summary: "The bundle takes {units} across {groups}.",
+    unitsOne: "{count} item",
+    unitsOther: "{count} items",
+    groupsOne: "{count} group",
+    groupsOther: "{count} groups",
     freeUnitsTitle: "Buy more, pay less",
     freeUnitsHint:
       'Choose the products, how many the customer takes and how many are free — the classic "buy 3, pay for 2".',

package/src/react/free-units-builder.tsx

@@ -3,7 +3,6 @@
 import type { JSX } from "react";
 
 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 { blankSlot } from "./combo-slot-builder";
 import { fill, type DiscountsWebCopy } from "./copy";
+import { CountInput, WholeNumberInput } from "./number-fields";
 import { TargetPickerField } from "./target-picker-field";
 
 /**
@@ -41,6 +41,11 @@ function onlySlot(slots: readonly ComboRequirement[]): ComboRequirement {
   return slots[0] ?? blankSlot();
 }
 
+/** Typed with something besides digits: marked as it is typed, like the other counts. */
+function notDigits(typed: string): boolean {
+  return typed.trim() !== "" && !/^\d+$/u.test(typed.trim());
+}
+
 /** How many the customer pays for: what they take, minus what is free. */
 function paidUnits(taken: number, free: number): number {
   return Math.max(taken - free, 0);
@@ -84,20 +89,22 @@ function FreeUnitsCounts({
 }): JSX.Element {
   return (
     <Box sx={{ display: "grid", gap: 2, gridTemplateColumns: { xs: "1fr", sm: "1fr 1fr" } }}>
-      <Input
-        type="number"
+      <CountInput
         label={copy.combo.buyQuantity}
-        value={String(quantity)}
-        onChange={(event) => onQuantity(Number(event.target.value))}
-        data-testid="free-units-quantity"
+        value={quantity}
+        copy={copy}
+        invalidMessage={copy.form.invalidComboQuantity}
+        dataTestId="free-units-quantity"
+        onChange={onQuantity}
       />
-      <Input
-        type="number"
+      {/* Held as the form's string, so "2,5" stays as typed and the validator
+          refuses it with `invalidFreeUnits` below the builder. */}
+      <WholeNumberInput
         label={copy.form.freeUnits}
         value={freeUnits}
-        onChange={(event) => onFreeUnits(event.target.value)}
-        error={error !== undefined}
-        data-testid="free-units-free"
+        error={error !== undefined || notDigits(freeUnits)}
+        dataTestId="free-units-free"
+        onChange={onFreeUnits}
       />
     </Box>
   );
@@ -160,9 +167,9 @@ export function FreeUnitsBuilder({
           autocompleteCopy={copy.autocomplete}
           dataTestId="free-units-items"
         />
-        {error !== undefined && (
+        {(error !== undefined || notDigits(freeUnits)) && (
           <FormMessage error dataTestId="free-units-free-message">
-            {error}
+            {error ?? copy.form.wholeNumberOnly}
           </FormMessage>
         )}
         {empty ? (

package/src/react/kind-field.tsx

@@ -0,0 +1,67 @@
+"use client";
+
+import { useLayoutEffect, useRef, useState, type JSX, type RefObject } from "react";
+
+import { Fields } from "@12-apps/ui/form/total-form";
+import { Box } from "@12-apps/ui/mui/Box";
+
+import type { DiscountsWebCopy } from "./copy";
+import { optionsFor } from "./discount-form-fields";
+import type { DiscountKind } from "./form-kind";
+
+/**
+ * What kind of promotion this is — the form's first and most consequential
+ * question, and the only one that decides what the rest of it looks like.
+ *
+ * The option list comes from the caller rather than from the constant, because
+ * it is one longer when a legacy `BUNDLE_PRICE` rule is being edited.
+ *
+ * **One line, at every width** (FUT-4157, ADR 0190 in the host). Four equal
+ * parts need about 530 px before "Porcentagem" and "Itens grátis" wrap inside
+ * their buttons; at 320 and 390 the toggle wrapped every label AND pushed the
+ * page to 422 px. Where the FORM is narrower than its parts need, the same
+ * question is asked with a select: same field, same options in the same order,
+ * same refusal painted under it. What is measured is the form's own width, not
+ * the window's — the form also lives in a dialog narrower than the screen.
+ */
+
+/** The widest pt-BR kind label at the toggle's type size (132 px measured), plus its padding. */
+const PART_MIN_PX = 136;
+
+/** The element's own width as it changes; `null` until measured, or where nothing can measure. */
+function useElementWidth(ref: RefObject<HTMLElement | null>): number | null {
+  const [width, setWidth] = useState<number | null>(null);
+  useLayoutEffect(() => {
+    const element = ref.current;
+    if (element === null || typeof ResizeObserver === "undefined") return undefined;
+    const observer = new ResizeObserver((entries) => {
+      const measured = entries[0]?.contentRect.width;
+      if (measured !== undefined && measured > 0) setWidth(measured);
+    });
+    observer.observe(element);
+    return () => observer.disconnect();
+  }, [ref]);
+  return width;
+}
+
+export function KindField({
+  copy,
+  kinds,
+}: {
+  copy: DiscountsWebCopy;
+  kinds: readonly DiscountKind[];
+}): JSX.Element {
+  const box = useRef<HTMLDivElement>(null);
+  const width = useElementWidth(box);
+  const options = optionsFor(kinds, copy.labels.kind);
+  const fits = width === null || width >= kinds.length * PART_MIN_PX;
+  return (
+    <Box ref={box} sx={{ minWidth: 0 }}>
+      {fits ? (
+        <Fields.ToggleField name="kind" label={copy.form.kind} options={options} />
+      ) : (
+        <Fields.SelectField name="kind" label={copy.form.kind} options={options} />
+      )}
+    </Box>
+  );
+}