@12-apps/discounts 1.16.0 → 1.18.0

package/src/react/copy.ts

@@ -7,6 +7,7 @@ import type {
   DiscountWindowState,
 } from "../engine/kinds";
 
+import type { DiscountsComboRewardsCopy } from "./combo-reward-copy";
 import type { DiscountsScheduleCopy } from "./schedule-copy";
 
 /**
@@ -80,8 +81,8 @@ export interface DiscountsVocabularyCopy {
   /**
    * The KIND toggle's words — the one question the form actually asks (see
    * `./form-kind`). It is keyed by `DiscountType` because every kind is named
-   * after the type it stands for, `COMBO` included: a combo IS a discount, and
-   * `BUNDLE_PRICE`'s label survives for the legacy rules that still carry it.
+   * after the type it stands for. `BUNDLE_PRICE` is no longer a kind on offer
+   * (FUT-4417: a combo reward, `comboRewards.labels`); its entry keeps the shape.
    */
   readonly kind: LabelsFor<DiscountType | "COMBO">;
   readonly type: LabelsFor<DiscountType>;
@@ -106,20 +107,21 @@ export interface DiscountsWindowCopy {
 export interface DiscountsFormCopy {
   readonly createTitle: string;
   readonly editTitle: string;
+  readonly dialog: { readonly close: string; readonly back: string };
   readonly submitCreate: string;
   readonly submitEdit: string;
   readonly name: string;
   readonly type: string;
   /** The kind toggle's own label — the form's first real question. */
   readonly kind: string;
-  /** Which of the two rewards a COMBO gives, and the sentence under it. */
+  /** The combo reward's label; its choices and hints are `comboRewards` (FUT-4417). */
   readonly comboReward: string;
   readonly comboRewardHint: string;
   readonly percentOff: string;
   /** The example inside the empty percentage input. */
   readonly percentPlaceholder: string;
   readonly amountOff: string;
-  /** The combo's total price, shown only for a BUNDLE_PRICE rule. */
+  /** The combo's closed price, under the "Preço fechado" reward (FUT-4417). */
   readonly bundlePrice: string;
   /** How many of the matched units are given away, for a FREE_UNITS rule. */
   readonly freeUnits: string;
@@ -132,6 +134,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 +151,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 +190,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 +234,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
@@ -284,6 +321,7 @@ export interface DiscountsWebCopy {
   readonly schedule: DiscountsScheduleCopy;
   readonly form: DiscountsFormCopy;
   readonly combo: DiscountsComboCopy;
+  readonly comboRewards: DiscountsComboRewardsCopy;
   readonly targets: DiscountsTargetCopy;
   readonly actions: DiscountsActionsCopy;
   readonly card: DiscountsCardCopy;

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

package/src/react/discount-actions-menu.tsx

@@ -7,11 +7,11 @@ import {
   useCardActions,
   useRemoveConfirm,
 } from "@12-apps/ui/data-display/CardKit";
-import { Dialog, DialogContent } from "@12-apps/ui/feedback/Dialog";
 import type { DropdownMenuItem } from "@12-apps/ui/navigation/DropdownMenu";
 
 import type { DiscountsApiClient, WireTargetGroup } from "./api";
 import type { DiscountsWebCopy } from "./copy";
+import { DiscountDialog } from "./discount-dialog";
 import { DiscountForm } from "./discount-form";
 import type { CurrencyFieldComponent } from "./discount-form-fields";
 import type { DiscountsFormatters } from "./format";
@@ -125,36 +125,30 @@ export function DiscountActionsMenu({
       />
       {remove.dialog}
       {canEdit && (
-        <Dialog
+        <DiscountDialog
           open={editOpen}
           onClose={() => setEditOpen(false)}
           title={copy.form.editTitle}
-          size="md"
-          showCloseButton
-          dataTestId="discount-dialog"
+          copy={copy}
         >
-          {/* Mounted only while open, so the next open re-seeds from the row
+          {/* Each opening mounts a fresh form, so it re-seeds from the row
               instead of keeping the last attempt's values. */}
-          {editOpen && (
-            <DialogContent>
-              <DiscountForm
-                key={row.id}
-                api={api}
-                copy={copy}
-                formatters={formatters}
-                currencyField={currencyField}
-                groups={groups}
-                editing={row.record}
-                onError={onError}
-                {...(timezoneLabel ? { timezoneLabel } : {})}
-                onSaved={() => {
-                  setEditOpen(false);
-                  onRefresh();
-                }}
-              />
-            </DialogContent>
-          )}
-        </Dialog>
+          <DiscountForm
+            key={row.id}
+            api={api}
+            copy={copy}
+            formatters={formatters}
+            currencyField={currencyField}
+            groups={groups}
+            editing={row.record}
+            onError={onError}
+            {...(timezoneLabel ? { timezoneLabel } : {})}
+            onSaved={() => {
+              setEditOpen(false);
+              onRefresh();
+            }}
+          />
+        </DiscountDialog>
       )}
     </>
   );

package/src/react/discount-dialog.tsx

@@ -0,0 +1,67 @@
+"use client";
+
+import { Fragment, useState, type JSX, type ReactNode } from "react";
+
+import { UsableModal } from "@12-apps/ui/feedback/UsableModal";
+import { Box } from "@12-apps/ui/mui/Box";
+
+import type { DiscountsWebCopy } from "./copy";
+
+/**
+ * The surface the create and edit forms open in (FUT-4417): a stacked modal on
+ * a computer, a bottom sheet on a phone (`UsableModal`).
+ *
+ * `size="wide"` — the panel the library keeps for a dense two-column editor —
+ * because the combo form lays out "Como fica no carrinho" in its own column
+ * beside the fields when the form has the room (`PREVIEW_ASIDE_MIN_PX`), and
+ * the 800 px dialog it replaced never had it. The owner's call, 2026-11-05:
+ * "Substitui o modal pelo stacked modal no desktop".
+ *
+ * Every opening mounts a fresh form, so it re-seeds instead of keeping the
+ * last attempt's values — even when it reopens inside the modal's 400 ms way
+ * out, while the closing body is still mounted (hence the key per opening).
+ * The body stays mounted while it leaves, so the panel does not slide out
+ * empty. The submit stays in the form: it acts on the fields above it.
+ *
+ * `copy.form.dialog` names the ✕ and the back arrow, which carry a glyph only;
+ * the arrow shows when the modal opens over another stacked panel.
+ */
+export function DiscountDialog({
+  open,
+  onClose,
+  title,
+  copy,
+  children,
+}: {
+  open: boolean;
+  onClose: () => void;
+  title: string;
+  copy: DiscountsWebCopy;
+  children: ReactNode;
+}): JSX.Element {
+  const [opening, setOpening] = useState(open ? 1 : 0);
+  const [wasOpen, setWasOpen] = useState(open);
+  if (open !== wasOpen) {
+    setWasOpen(open);
+    if (open) setOpening(opening + 1);
+  }
+  return (
+    <UsableModal
+      open={open}
+      onClose={onClose}
+      title={title}
+      size="wide"
+      closeLabel={copy.form.dialog.close}
+      backLabel={copy.form.dialog.back}
+      dataTestId="discount-dialog"
+    >
+      {/* `clip`, not `hidden`: a checked switch's hit area reaches 24 px past
+          its track (the input is three tracks wide), which the sheet's 16 px
+          gutter turned into an 8 px sideways scroll of the whole form. Clipping
+          keeps that overflow out of the scroller without making a second one. */}
+      <Box sx={{ minWidth: 0, overflowX: "clip" }}>
+        <Fragment key={opening}>{children}</Fragment>
+      </Box>
+    </UsableModal>
+  );
+}

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

@@ -13,7 +13,10 @@ 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 { ComboRewardFields } from "./combo-reward-fields";
+import { 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 +52,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,70 +76,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.
- *
- * Both are here rather than split between the top of the form and the bottom,
- * because to a merchant they are one sentence — "este combo dá 15% de
- * desconto". The two are the ONLY rewards a combo can give: a flat bundle price
- * reprices the group and goes silently wrong the first time one of its items
- * changes price, so it is not offered (see `./form-kind`).
- */
-function ComboRewardFields({
-  copy,
-  currencyField,
-}: {
-  copy: DiscountsWebCopy;
-  currencyField: CurrencyFieldComponent;
-}): JSX.Element {
-  const { values } = useFormContext();
-  const Currency = currencyField;
-  return (
-    <Stack spacing={0.5}>
-      <Box sx={{ display: "grid", gap: 2, gridTemplateColumns: { xs: "1fr", sm: "1fr 1fr" } }}>
-        <Fields.ToggleField
-          name="comboReward"
-          label={copy.form.comboReward}
-          options={optionsFor(COMBO_REWARDS, copy.labels.type)}
-        />
-        {values.comboReward === "FIXED_AMOUNT" ? (
-          <Currency name="amountOff" label={copy.form.amountOff} />
-        ) : (
-          <Fields.TextField
-            name="percentOff"
-            label={copy.form.percentOff}
-            placeholder={copy.form.percentPlaceholder}
-          />
-        )}
-      </Box>
-      <Text variant="caption">{copy.form.comboRewardHint}</Text>
-    </Stack>
-  );
-}
-
 /**
  * The reward, in whichever unit the chosen KIND actually stores.
  *
@@ -148,7 +87,8 @@ function ComboRewardFields({
  *
  * `FREE_UNITS` is the one kind with nothing here: its reward is a count of the
  * units it gives away, which only reads as an offer beside the units it takes,
- * so the free-units builder carries both.
+ * so the free-units builder carries both. A `COMBO`'s reward is one of three —
+ * a rate, an amount or a closed price (FUT-4417) — see `./combo-reward-fields`.
  */
 export function RewardFields({
   copy,
@@ -162,15 +102,8 @@ export function RewardFields({
   const kind = values.kind ?? "PERCENTAGE";
   if (kind === "COMBO") return <ComboRewardFields copy={copy} currencyField={currencyField} />;
   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 +185,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 +232,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 +259,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 +276,11 @@ export function WindowFields({
             schedule={schedule}
             copy={copy}
             timezone={timezoneLabel ?? ""}
-            onChange={onScheduleChange}
+            error={scheduleError}
+            onChange={(next) => {
+              clearScheduleError();
+              onScheduleChange(next);
+            }}
           />
           <OrderScopeScheduleNote copy={copy} />
         </>
@@ -355,8 +318,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>
   );
 }