@12-apps/discounts 1.17.0 → 1.18.0

package/src/react/combo-reward-copy.ts

@@ -0,0 +1,59 @@
+import type { ComboReward } from "./form-kind";
+
+/**
+ * The combo reward's words (FUT-4417): the three choices, the sentence under
+ * each, and "Como fica no carrinho" — what the group's items sum to and what
+ * the buyer pays for them under this reward.
+ *
+ * A group of its own rather than more `form` keys because the preview is a
+ * small grammar of its own: which sentence is said depends on the reward, on
+ * whether the items' prices are one figure or a range, and on whether the form
+ * is wide enough to put the preview in its own column (where it reads in short
+ * sentences plus an example line) or under the field (one sentence carrying
+ * the range). Each placeholder is a figure the package has already formatted.
+ */
+export interface DiscountsComboPreviewCopy {
+  /** The box's heading. */
+  readonly title: string;
+  /** `{units}` ("5 itens"), `{min}`, `{max}`: what one combo's items sum to. */
+  readonly itemsRange: string;
+  /** The same when every item the groups can take costs the same. `{units}`, `{sum}`. */
+  readonly itemsExact: string;
+  /** `{min}`, `{max}`: what the buyer pays, as a range. */
+  readonly paysRange: string;
+  /** `{min}`, `{max}`, `{off}` (the rate, "10%"): the percentage's range, under the field. */
+  readonly paysRangeOff: string;
+  /** `{pays}`: one figure. */
+  readonly paysExact: string;
+  /** `{pays}`, `{off}`: one figure, at a rate. */
+  readonly paysExactOff: string;
+  /** `{off}` — "10%" or "R$ 15,00": the reward itself, in the wide layout. */
+  readonly paysOff: string;
+  /** Closed price under every items sum: `{price}`, `{min}`, `{max}` (the saving's range). */
+  readonly paysPriceSaving: string;
+  /** The same with one saving figure: `{price}`, `{saving}`. */
+  readonly paysPriceSavingExact: string;
+  /**
+   * Closed price EQUAL to the cheapest sum: the cheapest combo saves nothing,
+   * so the saving reads "up to" rather than "from R$ 0,00 to": `{price}`, `{max}`.
+   */
+  readonly paysPriceSavingUpTo: string;
+  /** Closed price between the cheapest and dearest sums: `{min}`, `{price}`, `{max}` (most saved). */
+  readonly paysUpToPrice: string;
+  /** Closed price at or above the dearest sum: nothing is saved. */
+  readonly noSaving: string;
+  /** The wide layout's third line: `{cheapest}` and `{dearest}`, each an `example`. */
+  readonly examples: string;
+  /** `{quantity}`, `{name}` (as the catalog stores it), `{pays}`. */
+  readonly example: string;
+  /** The same with what it saves: `{quantity}`, `{name}`, `{pays}`, `{saving}`. */
+  readonly exampleSaving: string;
+}
+
+export interface DiscountsComboRewardsCopy {
+  /** The toggle's three choices, in `COMBO_REWARDS` order. */
+  readonly labels: Readonly<Record<ComboReward, string>>;
+  /** The sentence under the reward's field, one per choice. */
+  readonly hints: Readonly<Record<ComboReward, string>>;
+  readonly preview: DiscountsComboPreviewCopy;
+}

package/src/react/combo-reward-fields.tsx

@@ -0,0 +1,162 @@
+"use client";
+
+import { useLayoutEffect, useRef, useState, type JSX, type RefObject } from "react";
+
+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 type { DiscountsWebCopy } from "./copy";
+import { InlineComboCartPreview } from "./combo-cart-preview";
+import type { CurrencyFieldComponent } from "./discount-form-fields";
+import { COMBO_REWARDS, comboRewardOf } from "./form-kind";
+import { useElementWidth } from "./kind-field";
+import { PercentField } from "./number-fields";
+
+/**
+ * A combo's reward: which of the three, how much, and what it comes to in the
+ * cart (FUT-4417).
+ *
+ * All of it is here rather than split between the top of the form and the
+ * bottom, because to a merchant it is one sentence — "este combo dá 15% de
+ * desconto", "…sai por R$ 120". "Preço fechado" is the third choice: the
+ * matched group costs exactly the price typed, whatever its items cost. That
+ * used to be refused as a choice because it goes on charging the same when an
+ * item's price changes — which is the point of a closed price, so the hint says
+ * it in those words and the preview shows it against the store's real prices.
+ *
+ * **One line at every width** (ADR 0190 in the host), like the kind question
+ * (`./kind-field`): a segmented control of three equal parts where they fit,
+ * the same field as a select where they do not. The value's field sits beside
+ * the choices where both fit on one row, and under them otherwise.
+ */
+
+/**
+ * What one part needs before a label wraps inside it, when nothing could
+ * measure it (a test DOM): the kind toggle's own figure for "Porcentagem".
+ */
+const FALLBACK_PART_PX = 136;
+
+/** The gap between the choices and the value's field, `gap: 2`. */
+const ROW_GAP_PX = 16;
+
+const PART_SELECTOR = '[data-testid^="total-form-field-comboReward-item-"]';
+
+/**
+ * A part's width with its label on ONE line: a hidden, unwrapped clone of it,
+ * measured beside it so it inherits the same type.
+ */
+function naturalWidth(part: HTMLElement): number {
+  const clone = part.cloneNode(true) as HTMLElement;
+  Object.assign(clone.style, {
+    position: "absolute",
+    visibility: "hidden",
+    width: "auto",
+    minWidth: "0",
+    flex: "none",
+    whiteSpace: "nowrap",
+  });
+  (part.parentElement ?? document.body).appendChild(clone);
+  const width = clone.getBoundingClientRect().width;
+  clone.remove();
+  return width;
+}
+
+/**
+ * The width the three equal parts need, measured off the toggle the first time
+ * it is on screen — the theme decides the type size and the padding, so a
+ * figure typed here would be wrong in the next density mode. Parts are equal,
+ * so the widest label sizes all three; the group's own padding and gaps are
+ * added on top.
+ */
+function useTogglePartsWidth(box: RefObject<HTMLElement | null>): number {
+  const [measured, setMeasured] = useState<number | null>(null);
+  useLayoutEffect(() => {
+    if (measured !== null || box.current === null) return;
+    const parts = [...box.current.querySelectorAll<HTMLElement>(PART_SELECTOR)];
+    const group = parts[0]?.parentElement;
+    if (parts.length === 0 || !group) return;
+    const widest = Math.max(...parts.map(naturalWidth));
+    if (widest <= 0) return;
+    const style = getComputedStyle(group);
+    const chrome =
+      (parseFloat(style.paddingLeft) || 0) +
+      (parseFloat(style.paddingRight) || 0) +
+      (parseFloat(style.columnGap) || 0) * (parts.length - 1);
+    // +1 px a part: sub-pixel widths round the other way often enough to wrap.
+    setMeasured(Math.ceil((widest + 1) * parts.length + chrome));
+  });
+  return measured ?? COMBO_REWARDS.length * FALLBACK_PART_PX;
+}
+
+/** The value's input for the chosen reward; the other two are unmounted (`discounts_value_check`). */
+function RewardValueField({
+  reward,
+  copy,
+  currencyField,
+}: {
+  reward: string;
+  copy: DiscountsWebCopy;
+  currencyField: CurrencyFieldComponent;
+}): JSX.Element {
+  const Currency = currencyField;
+  if (reward === "BUNDLE_PRICE")
+    return <Currency name="bundlePrice" label={copy.form.bundlePrice} />;
+  if (reward === "FIXED_AMOUNT") return <Currency name="amountOff" label={copy.form.amountOff} />;
+  return <PercentField copy={copy} />;
+}
+
+export function ComboRewardFields({
+  copy,
+  currencyField,
+}: {
+  copy: DiscountsWebCopy;
+  currencyField: CurrencyFieldComponent;
+}): JSX.Element {
+  const { values } = useFormContext();
+  const box = useRef<HTMLDivElement>(null);
+  const width = useElementWidth(box);
+  const needed = useTogglePartsWidth(box);
+  const reward = comboRewardOf({ type: values.comboReward ?? "" });
+  const options = COMBO_REWARDS.map((value) => ({
+    value,
+    label: copy.comboRewards.labels[value],
+  }));
+  const sideBySide = width === null || width >= 2 * needed + ROW_GAP_PX;
+  const column = width === null ? null : sideBySide ? (width - ROW_GAP_PX) / 2 : width;
+  const fits = column === null || column >= needed;
+  return (
+    <Stack spacing={0.5} ref={box} sx={{ minWidth: 0 }}>
+      <Box
+        data-testid="combo-reward-row"
+        sx={{
+          display: "grid",
+          gap: 2,
+          gridTemplateColumns: sideBySide ? "1fr 1fr" : "1fr",
+        }}
+      >
+        <Box sx={{ minWidth: 0 }}>
+          {fits ? (
+            <Fields.ToggleField
+              name="comboReward"
+              label={copy.form.comboReward}
+              options={options}
+            />
+          ) : (
+            <Fields.SelectField
+              name="comboReward"
+              label={copy.form.comboReward}
+              options={options}
+            />
+          )}
+        </Box>
+        <RewardValueField reward={reward} copy={copy} currencyField={currencyField} />
+      </Box>
+      <Text variant="caption" data-testid="combo-reward-hint">
+        {copy.comboRewards.hints[reward]}
+      </Text>
+      <InlineComboCartPreview />
+    </Stack>
+  );
+}

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;
@@ -319,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/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,8 @@ import { DISCOUNT_TRIGGERS } from "../engine/kinds";
 import type { DiscountSchedule } from "../engine/schedule";
 
 import type { DiscountsWebCopy } from "./copy";
-import { COMBO_REWARDS, isComboKind, SELECTABLE_DISCOUNT_SCOPES } 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";
@@ -75,43 +76,6 @@ export function optionsFor<TKey extends string>(
  */
 export type CurrencyFieldComponent = (props: { name: string; label: string }) => JSX.Element;
 
-/**
- * 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} />
-        ) : (
-          <PercentField copy={copy} />
-        )}
-      </Box>
-      <Text variant="caption">{copy.form.comboRewardHint}</Text>
-    </Stack>
-  );
-}
-
 /**
  * The reward, in whichever unit the chosen KIND actually stores.
  *
@@ -123,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,
@@ -137,7 +102,6 @@ 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 <PercentField copy={copy} />;
 }

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

@@ -108,8 +108,9 @@ function checkPercent(
 /**
  * The reward, checked against the input the chosen KIND actually mounted.
  *
- * `type` is derived rather than read: a combo's reward is a percentage or an
- * amount, and which one it is lives in `comboReward` — so the check runs off
+ * `type` is derived rather than read: a combo's reward is a percentage, an
+ * amount or a closed price (FUT-4417), and which one it is lives in
+ * `comboReward` — so the check runs off
  * the same mapping the submit does, and the two cannot disagree about which
  * input holds the number.
  */

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

@@ -18,7 +18,7 @@ export interface DiscountFormValues extends Record<string, string> {
   name: string;
   /** What kind of promotion this is. Decides `type` and `scope` — see `./form-kind`. */
   kind: string;
-  /** Which of the two rewards a COMBO gives. Ignored by every other kind. */
+  /** Which of the three rewards a COMBO gives (FUT-4417). Ignored by every other kind. */
   comboReward: string;
   percentOff: string;
   amountOff: string;

package/src/react/discount-form.tsx

@@ -27,12 +27,13 @@ import {
   WindowFields,
   type CurrencyFieldComponent,
 } from "./discount-form-fields";
+import { ComboPreviewLayout } from "./combo-cart-preview";
 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";
-import { kindOptions, typeAndScopeFor } from "./form-kind";
+import { DISCOUNT_KINDS, typeAndScopeFor } from "./form-kind";
 import type { DiscountsFormatters } from "./format";
 
 /**
@@ -195,58 +196,66 @@ export function DiscountForm(props: DiscountFormProps): JSX.Element {
       onSubmit={handleSubmit}
       dataTestId="discount-form"
     >
-      <Stack spacing={2}>
-        <Fields.TextField name="name" label={copy.form.name} />
-        <KindField copy={copy} kinds={kindOptions(editing)} />
-        <RewardFields copy={copy} currencyField={currencyField} />
-        <ScopeField copy={copy} />
-        <DiscountTargetPicker
-          groups={groups}
-          copy={copy}
-          selection={{
-            categoryIds: extra.categoryIds,
-            menuItemIds: extra.menuItemIds,
-            comboRequirements: extra.comboRequirements,
-            onCategoryIdsChange: extra.setCategoryIds,
-            onMenuItemIdsChange: extra.setMenuItemIds,
-            onComboRequirementsChange: extra.setComboRequirements,
-          }}
-        />
-        <ComboCapField copy={copy} />
-        <TriggerFields copy={copy} />
-        <WindowFields
-          copy={copy}
-          schedule={extra.schedule}
-          scheduleEnabled={extra.scheduleEnabled}
-          timezoneLabel={props.timezoneLabel ?? null}
-          onScheduleChange={extra.setSchedule}
-          onScheduleEnabledChange={extra.setScheduleEnabled}
-        />
-        <LimitFields copy={copy} currencyField={currencyField} />
-        <FirstOrderField
-          copy={copy}
-          checked={extra.firstOrderOnly}
-          onChange={extra.setFirstOrderOnly}
-        />
-        <DiscountSwitches
-          copy={copy}
-          active={extra.active}
-          stackable={extra.stackable}
-          onActive={extra.setActive}
-          onStackable={extra.setStackable}
-        />
-        {error && (
-          <Alert
-            variant="danger"
-            title={copy.form.saveFailed}
-            description={error}
-            data-testid="discount-form-error"
+      {/* The combo preview's column (FUT-4417) beside a wide form; nothing for other kinds. */}
+      <ComboPreviewLayout
+        copy={copy}
+        formatters={formatters}
+        groups={groups}
+        slots={extra.comboRequirements}
+      >
+        <Stack spacing={2}>
+          <Fields.TextField name="name" label={copy.form.name} />
+          <KindField copy={copy} kinds={DISCOUNT_KINDS} />
+          <RewardFields copy={copy} currencyField={currencyField} />
+          <ScopeField copy={copy} />
+          <DiscountTargetPicker
+            groups={groups}
+            copy={copy}
+            selection={{
+              categoryIds: extra.categoryIds,
+              menuItemIds: extra.menuItemIds,
+              comboRequirements: extra.comboRequirements,
+              onCategoryIdsChange: extra.setCategoryIds,
+              onMenuItemIdsChange: extra.setMenuItemIds,
+              onComboRequirementsChange: extra.setComboRequirements,
+            }}
           />
-        )}
-        <SubmitButton dataTestId="discount-form-submit">
-          {editing ? copy.form.submitEdit : copy.form.submitCreate}
-        </SubmitButton>
-      </Stack>
+          <ComboCapField copy={copy} />
+          <TriggerFields copy={copy} />
+          <WindowFields
+            copy={copy}
+            schedule={extra.schedule}
+            scheduleEnabled={extra.scheduleEnabled}
+            timezoneLabel={props.timezoneLabel ?? null}
+            onScheduleChange={extra.setSchedule}
+            onScheduleEnabledChange={extra.setScheduleEnabled}
+          />
+          <LimitFields copy={copy} currencyField={currencyField} />
+          <FirstOrderField
+            copy={copy}
+            checked={extra.firstOrderOnly}
+            onChange={extra.setFirstOrderOnly}
+          />
+          <DiscountSwitches
+            copy={copy}
+            active={extra.active}
+            stackable={extra.stackable}
+            onActive={extra.setActive}
+            onStackable={extra.setStackable}
+          />
+          {error && (
+            <Alert
+              variant="danger"
+              title={copy.form.saveFailed}
+              description={error}
+              data-testid="discount-form-error"
+            />
+          )}
+          <SubmitButton dataTestId="discount-form-submit">
+            {editing ? copy.form.submitEdit : copy.form.submitCreate}
+          </SubmitButton>
+        </Stack>
+      </ComboPreviewLayout>
       <FormErrorSnackbar message={copy.form.errorSnackbar} />
     </FormContainer>
   );

package/src/react/discount-target-picker.tsx

@@ -102,7 +102,7 @@ export function DiscountTargetPicker({
     );
   }
 
-  if (kind === "COMBO" || kind === "BUNDLE_PRICE") {
+  if (kind === "COMBO") {
     return (
       <ComboSlotBuilder
         slots={selection.comboRequirements}