@12-apps/discounts 1.16.0 → 1.18.0

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,71 @@
+"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 { DISCOUNT_KINDS, 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. It used
+ * to be one longer on a legacy `BUNDLE_PRICE` rule's form; since FUT-4417 that
+ * rule is a combo with the "Preço fechado" reward, so it is always the four.
+ *
+ * **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;
+
+/** How wide the form must be for the four kinds to be a toggle rather than a select. */
+export const KIND_TOGGLE_MIN_PX = DISCOUNT_KINDS.length * PART_MIN_PX;
+
+/** The element's own width as it changes; `null` until measured, or where nothing can measure. */
+export 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>
+  );
+}

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,11 +123,14 @@ 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: {
     createTitle: "Novo desconto",
     editTitle: "Editar desconto",
+    dialog: { close: PT_BR_UI_LABELS.common.close, back: "Voltar" },
     submitCreate: "Criar desconto",
     submitEdit: "Salvar alterações",
     name: "Nome da promoção",
@@ -162,8 +166,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,8 +187,37 @@ 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.",
   },
+  comboRewards: {
+    labels: { PERCENTAGE: "Porcentagem", FIXED_AMOUNT: "Valor fixo", BUNDLE_PRICE: "Preço fechado" },
+    hints: {
+      PERCENTAGE: "O combo sai pelo preço dos itens menos este desconto.",
+      FIXED_AMOUNT: "O combo sai pelo preço dos itens menos este valor.",
+      BUNDLE_PRICE: "O combo sai por este preço, qualquer que seja o preço dos itens.",
+    },
+    preview: {
+      title: "Como fica no carrinho",
+      itemsRange: "{units} somam de {min} a {max}",
+      itemsExact: "{units} somam {sum}",
+      paysRange: "Cliente paga de {min} a {max}",
+      paysRangeOff: "Cliente paga de {min} a {max} ({off} a menos)",
+      paysExact: "Cliente paga {pays}",
+      paysExactOff: "Cliente paga {pays} ({off} a menos)",
+      paysOff: "Cliente paga {off} a menos",
+      paysPriceSaving: "Cliente paga {price} — economiza de {min} a {max}",
+      paysPriceSavingExact: "Cliente paga {price} — economiza {saving}",
+      paysPriceSavingUpTo: "Cliente paga {price} — economiza até {max}",
+      paysUpToPrice: "Cliente paga de {min} a {price} — economiza até {max}",
+      noSaving: "Cliente paga o preço dos itens: o preço do combo não é menor que eles.",
+      examples: "Exemplos: {cheapest} · {dearest}",
+      example: "{quantity} de {name} → {pays}",
+      exampleSaving: "{quantity} de {name} → {pays} (economiza {saving})",
+    },
+  },
   combo: {
     title: "Monte o combo",
     hint: "Cada grupo é uma parte do combo: quantas unidades leva e o que pode entrar nela.",
@@ -189,7 +227,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\".",