@12-apps/discounts 1.3.0 → 1.5.0

package/README.md

@@ -341,9 +341,44 @@ export const discounts = createWebDiscounts({
 ```
 
 What that one call replaces: a server-driven grid with eight columns, five
-filter pills and a CSV/JSON export; a create/edit form of fourteen inputs, four
-of which appear only when another says so; the target pickers; two card
-layouts; four confirmation popups; and every wire call between them.
+filter pills and a CSV/JSON export; a create/edit form whose value input and
+target block both follow the toggles above them; the target pickers and the
+combo builder; two card layouts; four confirmation popups; and every wire call
+between them.
+
+### Authoring a combo
+
+The four discount types and the four scopes are not independent, and the form
+is where that stops being a table in a README:
+
+| the offer | scope | type | what the operator fills in |
+|---|---|---|---|
+| "leve 3, pague 2" | `COMBO` | `FREE_UNITS` | one group of 3, and 1 free |
+| "2 refrigerantes, 2 hambúrgueres e 2 batatas por R$ 25" | `COMBO` | `BUNDLE_PRICE` | three groups of 2, and the price |
+| the same six items at 20% off | `COMBO` | `PERCENTAGE` | three groups of 2, and the rate |
+
+Picking `COMBO` swaps the single target picker for the **group builder**: each
+group is a quantity plus the rows that can fill it, and a group may name
+categories AND products at once, because a real menu mixes them — "any drink,
+or specifically the large fries" is one group. Every registered
+`DiscountableCollection` gets a picker inside every group, so a host that
+registers a third dimension gets it here with no change to this package.
+
+Three consequences worth stating, because each is a bug this shape prevents:
+
+- **The reward input is MOUNTED, not hidden.** The four value columns are
+  mutually exclusive at the database, so a leftover number from a branch the
+  operator flipped away from is a 500 on a form they filled in correctly.
+- **`freeUnits` is bounded by the groups.** "Take 3, three free" is a giveaway,
+  so the form compares it against what one application takes out of the cart
+  and names the ceiling when it refuses.
+- **Position is the array index.** The list an operator builds is the list a
+  card reads back; two groups of the same size are otherwise indistinguishable
+  once stored, which is why `toTargetRows` stamps the index as `position`.
+
+`maxComboApplications` appears at `COMBO` scope and nowhere else — it is the
+only scope where "how many times may one cart claim this" means anything — and
+blank means as often as it fits.
 
 **Build it once, at module scope.** The members are component TYPES, so
 rebuilding per render gives React new types every time and remounts the whole

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@12-apps/discounts",
-  "version": "1.3.0",
+  "version": "1.5.0",
   "type": "module",
   "description": "The discount/promotion domain: a host-agnostic evaluator (percentage or fixed amount, order/category/item scope, automatic or coupon-triggered, stacking and exclusivity, integer-cent allocation) plus the admin CRUD surface as wiring-contract route descriptors over a store port. No database, no framework, no baked user copy.",
   "exports": {
@@ -31,7 +31,7 @@
     "@12-apps/app-shell": "^5.1.0",
     "@12-apps/forms-core": "^1.20.0",
     "@12-apps/shared-helpers": "^2.0.2",
-    "@12-apps/ui": "^6.2.0",
+    "@12-apps/ui": "^6.3.0",
     "@mui/icons-material": "^6.5.0",
     "zod": "^4.3.5"
   },

package/src/react/api.ts

@@ -80,6 +80,12 @@ export interface DiscountFormPayload {
   percentOff: string;
   /** A money amount, as the currency field stores it. */
   amountOff: string;
+  /** What the matched combo group costs, as the currency field stores it. */
+  bundlePrice: string;
+  /** How many of the matched units are free, as typed. */
+  freeUnits: string;
+  /** How many combos one cart may claim. Blank = as often as it fits. */
+  maxComboApplications: string;
   scope: string;
   trigger: string;
   code: string;
@@ -92,6 +98,8 @@ export interface DiscountFormPayload {
   active: boolean;
   categoryIds: string[];
   menuItemIds: string[];
+  /** The combo's groups, in the operator's own order. Empty at every other scope. */
+  comboRequirements: readonly ComboRequirement[];
 }
 
 /** A money amount as integer cents, or null when blank. */
@@ -130,12 +138,28 @@ export function toWriteBody(
   input: DiscountFormPayload,
   formatters: DiscountsFormatters,
 ): Record<string, unknown> {
-  const isPercentage = input.type === "PERCENTAGE";
+  const isCombo = input.scope === "COMBO";
   return {
     name: input.name.trim(),
     type: input.type,
-    percentOffBp: isPercentage ? toBasisPoints(input.percentOff, formatters) : null,
-    amountOffCents: isPercentage ? null : toCents(input.amountOff, formatters),
+    // Exactly one value column, chosen by the TYPE, with the other three
+    // forced to null. The four are mutually exclusive at the database
+    // (`discounts_value_check`), so carrying a leftover from a branch the
+    // operator flipped away from is a 500 on a form they filled in correctly —
+    // the same reason the server's own folder nulls them rather than passing
+    // them through.
+    percentOffBp:
+      input.type === "PERCENTAGE" ? toBasisPoints(input.percentOff, formatters) : null,
+    amountOffCents: input.type === "FIXED_AMOUNT" ? toCents(input.amountOff, formatters) : null,
+    bundlePriceCents:
+      input.type === "BUNDLE_PRICE" ? toCents(input.bundlePrice, formatters) : null,
+    freeUnits: input.type === "FREE_UNITS" ? toCount(input.freeUnits, formatters) : null,
+    // The combo SPEC, narrowed to the scope for the reason the id lists below
+    // are: a rule whose scope moved off COMBO keeps neither its groups nor its
+    // cap, or it would go on being matched as a combo by a screen that no
+    // longer shows one.
+    comboRequirements: isCombo ? [...input.comboRequirements] : [],
+    maxComboApplications: isCombo ? toCount(input.maxComboApplications, formatters) : null,
     scope: input.scope,
     trigger: input.trigger,
     code: input.trigger === "CODE" ? toNullable(input.code) : null,

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

@@ -0,0 +1,214 @@
+"use client";
+
+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 type { ComboRequirement } from "../engine/types";
+
+import type { WireTargetGroup } from "./api";
+import { fill, type DiscountsWebCopy } from "./copy";
+import { TargetPickerField } from "./target-picker-field";
+
+/**
+ * The combo builder — how an operator says "2 refrigerantes, 2 hambúrgueres e
+ * 2 batatas" (FUT-268).
+ *
+ * A combo is a list of GROUPS. Each group is a quantity and the rows that can
+ * fill it, and a cart matches the combo when every group is satisfiable at
+ * once. That shape is already the engine's (`ComboRequirement`), the
+ * validator's and the schema's — `discount_combo_slots` with its own targets —
+ * so this file adds no concept. It adds the only thing that was missing: a way
+ * to author one.
+ *
+ * Two decisions worth stating, because both are visible in the markup:
+ *
+ * **A group can name categories AND items at once.** "2 refrigerantes" is a
+ * category; "2 batatas médias" is an item; and a real menu mixes them inside
+ * one group ("any drink, or specifically the large fries"). So each group gets
+ * every registered collection's picker rather than a scope toggle — the union
+ * is what `ComboRequirement` already stores, and forcing a choice would make
+ * the common offer unexpressible.
+ *
+ * **Position is the array index, and it is meaningful.** The list an operator
+ * builds is the list a card reads back; two groups of the same size are
+ * otherwise indistinguishable once stored. Removing a group therefore
+ * renumbers the ones after it, which is what an operator expects from a list
+ * they are editing — and `toTargetRows` stamps the index as `position` on the
+ * way to the database.
+ */
+
+/** How many units one application of the combo takes out of the cart. */
+export function comboUnits(slots: readonly ComboRequirement[]): number {
+  return slots.reduce((total, slot) => total + (Number.isFinite(slot.quantity) ? slot.quantity : 0), 0);
+}
+
+/** An empty group: one unit, nothing chosen yet. */
+export function blankSlot(): ComboRequirement {
+  return { quantity: 1, categoryIds: [], menuItemIds: [] };
+}
+
+/** Replace one group, leaving the rest (and their order) alone. */
+function replaceAt(
+  slots: readonly ComboRequirement[],
+  index: number,
+  next: ComboRequirement,
+): ComboRequirement[] {
+  return slots.map((slot, position) => (position === index ? next : slot));
+}
+
+/** Which id list of a group a collection reads and writes. */
+function idsFor(slot: ComboRequirement, targetType: string): readonly string[] {
+  return targetType === "CATEGORY" ? slot.categoryIds : slot.menuItemIds;
+}
+
+function withIds(slot: ComboRequirement, targetType: string, ids: string[]): ComboRequirement {
+  return targetType === "CATEGORY" ? { ...slot, categoryIds: ids } : { ...slot, menuItemIds: ids };
+}
+
+/**
+ * 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
+ * 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.
+ */
+function ComboSlotRow({
+  slot,
+  index,
+  groups,
+  copy,
+  onChange,
+  onRemove,
+}: {
+  slot: ComboRequirement;
+  index: number;
+  groups: readonly WireTargetGroup[];
+  copy: DiscountsWebCopy;
+  onChange: (next: ComboRequirement) => void;
+  onRemove: () => void;
+}): JSX.Element {
+  const position = index + 1;
+  const empty = slot.categoryIds.length === 0 && slot.menuItemIds.length === 0;
+  return (
+    <Box
+      data-testid={`combo-slot-${index}`}
+      sx={{ border: 1, borderColor: "divider", borderRadius: 1, p: 2 }}
+    >
+      <Stack direction="row" alignItems="center" justifyContent="space-between" spacing={1}>
+        <Text weight="medium">{fill(copy.combo.slot, { position })}</Text>
+        <Button
+          variant="text"
+          onClick={onRemove}
+          // The label carries the POSITION, so a screen reader announces which
+          // group this removes — "remove" alone is three identical buttons.
+          aria-label={fill(copy.combo.removeSlot, { position })}
+          data-testid={`combo-slot-${index}-remove`}
+        >
+          ✕
+        </Button>
+      </Stack>
+      <Stack spacing={2} sx={{ mt: 1 }}>
+        <Input
+          type="number"
+          label={copy.combo.quantity}
+          value={String(slot.quantity)}
+          onChange={(event) => onChange({ ...slot, quantity: Number(event.target.value) })}
+          data-testid={`combo-slot-${index}-quantity`}
+        />
+        {groups.map((group) => (
+          <TargetPickerField
+            key={group.targetType}
+            group={group}
+            label={fill(copy.combo.pick, { collection: group.label })}
+            placeholder={fill(copy.targets.search, { collection: group.label })}
+            // The refusal belongs to the GROUP, not to either picker: a group
+            // naming a category is complete even with no items in it. So the
+            // message hangs below both, once, and only when both are empty.
+            requiredMessage={undefined}
+            ids={idsFor(slot, group.targetType)}
+            onChange={(ids) => onChange(withIds(slot, group.targetType, ids))}
+            copy={copy.categorySelect}
+            dataTestId={`combo-slot-${index}-${group.slug}`}
+          />
+        ))}
+        {empty && (
+          <FormMessage error dataTestId={`combo-slot-${index}-message`}>
+            {copy.form.comboSlotTargetRequired}
+          </FormMessage>
+        )}
+      </Stack>
+    </Box>
+  );
+}
+
+/**
+ * The whole builder: the heading, the groups, the add button and the read-back.
+ *
+ * The read-back line is not decoration. A combo is the one promotion whose
+ * meaning is spread across several controls, and "the combo takes 6 items in 3
+ * groups" is the sentence that catches a mistyped quantity before a save — the
+ * same number `freeUnits` is validated against, computed once and shown.
+ */
+export function ComboSlotBuilder({
+  slots,
+  groups,
+  copy,
+  onChange,
+}: {
+  slots: readonly ComboRequirement[];
+  groups: readonly WireTargetGroup[];
+  copy: DiscountsWebCopy;
+  onChange: (next: ComboRequirement[]) => void;
+}): JSX.Element {
+  return (
+    <FormControl fullWidth>
+      <FormLabel>{copy.combo.title}</FormLabel>
+      <Text variant="caption">{copy.combo.hint}</Text>
+      <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}
+            slot={slot}
+            index={index}
+            groups={groups}
+            copy={copy}
+            onChange={(next) => onChange(replaceAt(slots, index, next))}
+            onRemove={() => onChange(slots.filter((_, position) => position !== index))}
+          />
+        ))}
+        {slots.length === 0 && (
+          <Text variant="caption" data-testid="combo-slots-empty">
+            {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>
+          {slots.length > 0 && (
+            <Text variant="caption" data-testid="combo-summary">
+              {fill(copy.combo.summary, { units: comboUnits(slots), groups: slots.length })}
+            </Text>
+          )}
+        </Stack>
+      </Stack>
+    </FormControl>
+  );
+}

package/src/react/copy.ts

@@ -1,3 +1,5 @@
+import type { CategorySelectCopy, ConfirmActionCopy } from "@12-apps/ui/copy";
+import type { DataViewsCopy } from "@12-apps/ui/data-display/DataViews";
 import type {
   DiscountScope,
   DiscountTrigger,
@@ -101,6 +103,12 @@ export interface DiscountsFormCopy {
   /** 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. */
+  readonly bundlePrice: string;
+  /** How many of the matched units are given away, for a FREE_UNITS rule. */
+  readonly freeUnits: string;
+  /** Under it: what "leve 3 pague 2" means in this rule's own numbers. */
+  readonly freeUnitsHint: string;
   readonly trigger: string;
   readonly code: string;
   /** The example inside the empty coupon input. */
@@ -111,6 +119,9 @@ export interface DiscountsFormCopy {
   readonly minSubtotal: string;
   readonly usageLimit: string;
   readonly perBuyerLimit: string;
+  /** How many times ONE cart may claim the combo. Blank = as often as it fits. */
+  readonly maxComboApplications: string;
+  readonly maxComboApplicationsHint: string;
   readonly active: string;
   readonly activeHint: string;
   readonly stackable: string;
@@ -123,12 +134,59 @@ export interface DiscountsFormCopy {
   readonly nameRequired: string;
   readonly invalidPercent: string;
   readonly invalidAmount: string;
+  readonly invalidBundlePrice: string;
+  readonly invalidFreeUnits: string;
+  /**
+   * "Take 3, three free" is a giveaway, not a promotion — the free count has to
+   * be smaller than what one application takes out of the cart. `{units}` is
+   * that number, so the operator is told the ceiling rather than just refused.
+   */
+  readonly freeUnitsExceedCombo: string;
   readonly codeRequired: string;
   readonly categoryTargetRequired: string;
   readonly itemTargetRequired: string;
+  /** COMBO scope with no groups: there is nothing for the reward to apply to. */
+  readonly comboSlotsRequired: string;
+  /** A group naming nothing can never be filled, so the combo never fires. */
+  readonly comboSlotTargetRequired: string;
+  readonly invalidComboQuantity: string;
+  readonly invalidMaxComboApplications: string;
   readonly endsBeforeStarts: string;
 }
 
+/**
+ * The combo builder — the "2 refrigerantes + 2 hambúrgueres + 2 batatas" half
+ * of a promotion (FUT-268).
+ *
+ * A combo is a list of GROUPS, each a quantity and the rows that can fill it,
+ * and the reward is whichever value the type asks for. So this group covers the
+ * builder's chrome; the reward's own input is a `form` key beside the other
+ * value fields, because to the operator it is one.
+ */
+export interface DiscountsComboCopy {
+  /** The section heading over the group list. */
+  readonly title: string;
+  /** One sentence saying what a group is, in the merchant's terms. */
+  readonly hint: string;
+  /** The button that appends a group. */
+  readonly addSlot: string;
+  /** The accessible name of one group's remove control. `{position}`. */
+  readonly removeSlot: string;
+  /** One group's heading. `{position}` is 1-based — an operator counts from 1. */
+  readonly slot: string;
+  /** The units this group takes. */
+  readonly quantity: string;
+  /** The group's picker label, `{collection}` — the registration's own label. */
+  readonly pick: string;
+  /** Shown when COMBO is chosen and no group exists yet. */
+  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}`.
+   */
+  readonly summary: string;
+}
+
 /** The target pickers, and what an empty selection says. */
 export interface DiscountsTargetCopy {
   /** The picker's label, `{collection}` — the registration's own label. */
@@ -185,9 +243,21 @@ export interface DiscountsWebCopy {
   readonly labels: DiscountsVocabularyCopy;
   readonly window: DiscountsWindowCopy;
   readonly form: DiscountsFormCopy;
+  readonly combo: DiscountsComboCopy;
   readonly targets: DiscountsTargetCopy;
   readonly actions: DiscountsActionsCopy;
   readonly card: DiscountsCardCopy;
+  /**
+   * The words of the `@12-apps/ui` components these screens MOUNT but do not
+   * own — the confirmation popup and the category picker.
+   *
+   * They arrive here because that package stopped shipping defaults for them
+   * (FUT-760): a design system's Portuguese reached every adopter silently,
+   * so its copy is required config now and this surface is one of its hosts.
+   */
+  readonly confirmAction: ConfirmActionCopy;
+  readonly categorySelect: CategorySelectCopy;
+  readonly dataViews: DataViewsCopy;
 }
 
 /**
@@ -234,6 +304,12 @@ export function missingWebCopy(
 ): string[] {
   return leafPaths(reference).filter((path) => {
     const value = read(copy, path);
+    // A leaf is satisfied by a non-blank string OR a function. The `@12-apps/ui`
+    // packs folded in below carry entries that take the interpolated value as
+    // an argument — `noResults.title(query)`, `footer.selectedCount(count)` —
+    // because Portuguese decides word order and plural agreement per sentence.
+    // Demanding a string here would report every one of them as missing.
+    if (typeof value === "function") return false;
     return typeof value !== "string" || value.trim() === "";
   });
 }

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

@@ -2,7 +2,11 @@
 
 import { useState, type JSX } from "react";
 
-import { CardKebab, useCardActions, useRemoveConfirm } from "@12-apps/ui/data-display/CardKit";
+import {
+  CardKebab,
+  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";
 
@@ -45,6 +49,34 @@ export interface DiscountActionsMenuProps {
   onError: (error: unknown, context: string) => void;
 }
 
+/**
+ * The row's delete, popup and all.
+ *
+ * Split out of the menu only to keep that component inside the size gate: the
+ * options object is a dozen lines of pure wording, and it reads better named.
+ */
+function useDeleteConfirm(
+  row: DiscountListItem,
+  api: DiscountsApiClient,
+  copy: DiscountsWebCopy,
+  onError: (error: unknown, context: string) => void,
+): ReturnType<typeof useRemoveConfirm> {
+  return useRemoveConfirm({
+    write: async () => {
+      const result = await api.remove(row.id);
+      if (!result.ok) onError(result, "discounts.delete");
+      return result;
+    },
+    title: copy.actions.deleteTitle,
+    entityName: row.name,
+    description: copy.actions.deleteDescription,
+    confirmText: copy.actions.delete,
+    fallbackError: copy.actions.deleteFailed,
+    copy: copy.confirmAction,
+    dataTestId: "discount-delete-confirm",
+  });
+}
+
 export function DiscountActionsMenu({
   row,
   api,
@@ -58,23 +90,15 @@ export function DiscountActionsMenu({
   const [editOpen, setEditOpen] = useState(false);
   const canEdit = groups !== undefined;
 
-  const remove = useRemoveConfirm({
-    write: async () => {
-      const result = await api.remove(row.id);
-      if (!result.ok) onError(result, "discounts.delete");
-      return result;
-    },
-    title: copy.actions.deleteTitle,
-    entityName: row.name,
-    description: copy.actions.deleteDescription,
-    confirmText: copy.actions.delete,
-    fallbackError: copy.actions.deleteFailed,
-    dataTestId: "discount-delete-confirm",
-  });
+  const remove = useDeleteConfirm(row, api, copy, onError);
 
   const items: DropdownMenuItem[] = [];
   if (canEdit) {
-    items.push({ id: "edit", label: copy.actions.edit, onClick: () => setEditOpen(true) });
+    items.push({
+      id: "edit",
+      label: copy.actions.edit,
+      onClick: () => setEditOpen(true),
+    });
   }
   items.push({
     id: "delete",

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

@@ -6,6 +6,7 @@ import { Switch } from "@12-apps/ui/form/Switch";
 import { Fields, useFormContext } from "@12-apps/ui/form/total-form";
 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 { DISCOUNT_SCOPES, DISCOUNT_TRIGGERS, DISCOUNT_TYPES } from "../engine/kinds";
 
@@ -21,6 +22,32 @@ import type { DiscountsWebCopy } from "./copy";
  * hand-written list is how a form offers a fifth type the database refuses.
  */
 
+/**
+ * A field with a sentence under it.
+ *
+ * `Fields.TextField` has no helper-text slot — deliberately, it is a thin bind
+ * over `Input` — and two of the combo inputs are meaningless without one:
+ * "itens grátis" and "combos por pedido" are both numbers whose UNIT an
+ * operator cannot guess. So the caption is composed here rather than pushed
+ * into `@12-apps/ui`, where it would be a prop every other consumer ignores.
+ */
+function HintedField({
+  name,
+  label,
+  hint,
+}: {
+  name: string;
+  label: string;
+  hint: string;
+}): JSX.Element {
+  return (
+    <Stack spacing={0.5}>
+      <Fields.TextField name={name} label={label} type="number" />
+      <Text variant="caption">{hint}</Text>
+    </Stack>
+  );
+}
+
 /** One closed set as a toggle's options, labelled by the pack. */
 function optionsFor<TKey extends string>(
   values: readonly TKey[],
@@ -29,7 +56,22 @@ function optionsFor<TKey extends string>(
   return values.map((value) => ({ value, label: labels[value] }));
 }
 
-/** Percentage or amount — whichever the chosen type actually stores. */
+/**
+ * The reward, in whichever unit the chosen type actually stores.
+ *
+ * One input per type, and the wrong one must never be mounted: the four value
+ * columns are mutually exclusive at the database (`discounts_value_check`), so
+ * a leftover value from another branch is a 500 on a form the operator filled
+ * in correctly. Mounting rather than hiding is what guarantees it — an unmounted
+ * field cannot carry a stale number to submit.
+ *
+ * The two combo rewards read differently from the two plain ones, and that is
+ * the whole point of FUT-268: BUNDLE_PRICE is what the matched group COSTS
+ * ("2 refrigerantes, 2 hambúrgueres e 2 batatas por R$ 49,90"), FREE_UNITS is
+ * how many of the matched units are given away ("leve 3, pague 2"). Both are
+ * money-or-count fields like the two above them; what makes them combos is the
+ * scope, and the scope is what the builder below hangs off.
+ */
 function ValueField({
   copy,
   currencyField,
@@ -42,6 +84,14 @@ function ValueField({
   if (values.type === "FIXED_AMOUNT") {
     return <Currency name="amountOff" label={copy.form.amountOff} />;
   }
+  if (values.type === "BUNDLE_PRICE") {
+    return <Currency name="bundlePrice" label={copy.form.bundlePrice} />;
+  }
+  if (values.type === "FREE_UNITS") {
+    return (
+      <HintedField name="freeUnits" label={copy.form.freeUnits} hint={copy.form.freeUnitsHint} />
+    );
+  }
   return (
     <Fields.TextField
       name="percentOff"
@@ -111,6 +161,26 @@ export function ScopeField({ copy }: { copy: DiscountsWebCopy }): JSX.Element {
   );
 }
 
+/**
+ * How many times one cart may claim the combo.
+ *
+ * Only at COMBO scope, because it is the only scope where the question means
+ * anything: an order-wide or category discount applies once by construction. A
+ * blank field is "as often as it fits", which is the merchant's usual answer
+ * and therefore the default rather than a number they have to type.
+ */
+function ComboCapField({ copy }: { copy: DiscountsWebCopy }): JSX.Element | null {
+  const { values } = useFormContext();
+  if (values.scope !== "COMBO") return null;
+  return (
+    <HintedField
+      name="maxComboApplications"
+      label={copy.form.maxComboApplications}
+      hint={copy.form.maxComboApplicationsHint}
+    />
+  );
+}
+
 /** The active window. Both sides optional; the end date is EXCLUSIVE. */
 export function WindowFields({ copy }: { copy: DiscountsWebCopy }): JSX.Element {
   return (
@@ -135,6 +205,7 @@ export function LimitFields({
       <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" />
+      <ComboCapField copy={copy} />
     </Box>
   );
 }