@12-apps/discounts 1.17.0 → 1.18.0

package/src/react/discounts-screen.tsx

@@ -18,7 +18,6 @@ import {
 import type { RowAction } from "@12-apps/ui/data-display/DataViews";
 import { ErrorState } from "@12-apps/ui/data-display/ErrorState";
 import { LoadingState } from "@12-apps/ui/data-display/LoadingState";
-import { Dialog, DialogContent } from "@12-apps/ui/feedback/Dialog";
 import { HeaderButton } from "@12-apps/ui/form/HeaderButton";
 import { Dashboard } from "@12-apps/ui/layout/Dashboard";
 import { Text } from "@12-apps/ui/typography/Text";
@@ -28,6 +27,7 @@ import type { DiscountsApiClient } from "./api";
 import { fill, type DiscountsWebCopy } from "./copy";
 import { DiscountActionsMenu } from "./discount-actions-menu";
 import { DiscountCard } from "./discount-card";
+import { DiscountDialog } from "./discount-dialog";
 import { DiscountForm } from "./discount-form";
 import type { CurrencyFieldComponent } from "./discount-form-fields";
 import { DiscountListCard, discountCells } from "./discount-list-card";
@@ -214,7 +214,7 @@ function DiscountsGrid({
   );
 }
 
-/** The create dialog, mounted only while open so the next open re-seeds empty. */
+/** The create dialog; each opening mounts a fresh form, so it re-seeds empty. */
 function CreateDialog({
   open,
   onClose,
@@ -227,25 +227,19 @@ function CreateDialog({
   menu: MenuBinding;
 }): JSX.Element {
   return (
-    <Dialog
+    <DiscountDialog
       open={open}
       onClose={onClose}
       title={menu.copy.form.createTitle}
-      size="md"
-      showCloseButton
-      dataTestId="discount-dialog"
+      copy={menu.copy}
     >
-      {open && (
-        <DialogContent>
-          <DiscountForm
-            {...menu}
-            groups={menu.groups ?? []}
-            editing={null}
-            onSaved={onSaved}
-          />
-        </DialogContent>
-      )}
-    </Dialog>
+      <DiscountForm
+        {...menu}
+        groups={menu.groups ?? []}
+        editing={null}
+        onSaved={onSaved}
+      />
+    </DiscountDialog>
   );
 }
 

package/src/react/en-US.ts

@@ -139,6 +139,7 @@ export const EN_US_DISCOUNTS_WEB_COPY: DiscountsWebCopy = {
   form: {
     createTitle: "New discount",
     editTitle: "Edit discount",
+    dialog: { close: EN_US_UI_LABELS.common.close, back: "Back" },
     submitCreate: "Create discount",
     submitEdit: "Save changes",
     name: "Promotion name",
@@ -201,6 +202,32 @@ export const EN_US_DISCOUNTS_WEB_COPY: DiscountsWebCopy = {
     wholeNumberOnly: "Whole numbers only, no decimals.",
     endsBeforeStarts: "The end date must be after the start date.",
   },
+  comboRewards: {
+    labels: { PERCENTAGE: "Percentage", FIXED_AMOUNT: "Fixed amount", BUNDLE_PRICE: "Fixed price" },
+    hints: {
+      PERCENTAGE: "The bundle sells for the price of its items minus this discount.",
+      FIXED_AMOUNT: "The bundle sells for the price of its items minus this amount.",
+      BUNDLE_PRICE: "The bundle sells for this price, whatever its items cost.",
+    },
+    preview: {
+      title: "In the cart",
+      itemsRange: "{units} add up to {min}–{max}",
+      itemsExact: "{units} add up to {sum}",
+      paysRange: "The customer pays {min}–{max}",
+      paysRangeOff: "The customer pays {min}–{max} ({off} off)",
+      paysExact: "The customer pays {pays}",
+      paysExactOff: "The customer pays {pays} ({off} off)",
+      paysOff: "The customer pays {off} less",
+      paysPriceSaving: "The customer pays {price} — saves {min}–{max}",
+      paysPriceSavingExact: "The customer pays {price} — saves {saving}",
+      paysPriceSavingUpTo: "The customer pays {price} — saves up to {max}",
+      paysUpToPrice: "The customer pays {min}–{price} — saves up to {max}",
+      noSaving: "The customer pays the items' price: the bundle price is not lower than theirs.",
+      examples: "Examples: {cheapest} · {dearest}",
+      example: "{quantity} × {name} → {pays}",
+      exampleSaving: "{quantity} × {name} → {pays} (saves {saving})",
+    },
+  },
   combo: {
     title: "Build the bundle",
     hint: "Each group is one part of the bundle: how many units it takes, and what can go in it.",

package/src/react/form-kind.ts

@@ -20,18 +20,20 @@ import { DISCOUNT_SCOPES, type DiscountScope, type DiscountType } from "../engin
  * |---|---|---|---|
  * | `PERCENTAGE` | `PERCENTAGE` | ORDER / CATEGORY / ITEM | the rate, and what it covers |
  * | `FIXED_AMOUNT` | `FIXED_AMOUNT` | ORDER / CATEGORY / ITEM | the amount, and what it covers |
- * | `COMBO` | `PERCENTAGE` or `FIXED_AMOUNT` | `COMBO` | the groups, and which of the two rewards |
+ * | `COMBO` | `PERCENTAGE`, `FIXED_AMOUNT` or `BUNDLE_PRICE` | `COMBO` | the groups, and which of the three rewards |
  * | `FREE_UNITS` | `FREE_UNITS` | `COMBO` | the products, how many, how many free |
  *
  * Two consequences worth stating, because both are deliberate:
  *
- * **A combo is a DISCOUNT off its items, never a price.** "2 refrigerantes, 2
- * hambúrgueres e 2 batatas com 15% de desconto" and "…menos R$ 5,00" are the
- * two offers a merchant describes; a flat "por R$ 49,90" reprices the group and
- * silently goes wrong the moment one of its items changes price. `BUNDLE_PRICE`
- * is still a legal type in the engine and in the database — an older rule that
- * uses it keeps working and keeps being editable, see {@link kindOptions} — it
- * is simply not offered for a new promotion.
+ * **A combo's reward is a discount off its items OR a closed price**
+ * (FUT-4417). "2 refrigerantes, 2 hambúrgueres e 2 batatas com 15% de
+ * desconto" and "…menos R$ 5,00" are two offers a merchant describes; "5
+ * marmitas por R$ 120" is the third, and the one the form used to refuse. A
+ * closed price reprices the matched group whatever its items cost — which is
+ * exactly what the merchant asked for, and why the form says so under the price
+ * field and previews it against the store's real prices ("Como fica no
+ * carrinho"). `BUNDLE_PRICE` is therefore a combo REWARD, not a kind: a rule
+ * saved with it before FUT-4417 opens as a combo with "Preço fechado" chosen.
  *
  * **`COMBO` scope is not a choice any more.** It was never one: a combo is
  * defined by its groups, so "combo scope, but with an order-wide discount" is
@@ -39,15 +41,14 @@ import { DISCOUNT_SCOPES, type DiscountScope, type DiscountType } from "../engin
  * genuinely a choice, and the two combo kinds carry `COMBO` implicitly.
  */
 
-/** The kinds offered for a NEW promotion, in the order the toggle shows them. */
+/** The kinds the form offers, in the order the toggle shows them. */
 export const DISCOUNT_KINDS = ["PERCENTAGE", "FIXED_AMOUNT", "COMBO", "FREE_UNITS"] as const;
 
 /**
- * Every kind the form can HOLD, which is one more than it offers: a rule saved
- * as `BUNDLE_PRICE` before combos became a discount still has to open, edit and
- * save without losing what it is.
+ * Every kind the form can hold. `BUNDLE_PRICE` is not one any more (FUT-4417):
+ * it is the third reward of a `COMBO`, see {@link COMBO_REWARDS}.
  */
-export type DiscountKind = (typeof DISCOUNT_KINDS)[number] | "BUNDLE_PRICE";
+export type DiscountKind = (typeof DISCOUNT_KINDS)[number];
 
 /**
  * True when this kind's targets are groups — a builder, not a flat picker, and
@@ -58,7 +59,7 @@ export type DiscountKind = (typeof DISCOUNT_KINDS)[number] | "BUNDLE_PRICE";
  * second `includes` that drifts from this one.
  */
 export function isComboKind(kind: string): boolean {
-  return kind === "COMBO" || kind === "FREE_UNITS" || kind === "BUNDLE_PRICE";
+  return kind === "COMBO" || kind === "FREE_UNITS";
 }
 
 /** The scopes the toggle offers: every scope except the one a kind implies. */
@@ -70,39 +71,30 @@ export const SELECTABLE_DISCOUNT_SCOPES: readonly DiscountScope[] = DISCOUNT_SCO
  * Which kind an existing rule is, read back from the pair it was stored as.
  *
  * `FREE_UNITS` is checked before the scope because it is the narrower fact: it
- * is only ever legal at `COMBO` scope, so the type alone identifies it.
+ * is only ever legal at `COMBO` scope, so the type alone identifies it. A
+ * `BUNDLE_PRICE` rule is a combo (FUT-4417) — whatever scope it carries, since
+ * the type is only legal at `COMBO`.
  */
 export function kindOf(rule: { type: string; scope: string } | null): DiscountKind {
   if (rule === null) return "PERCENTAGE";
-  if (rule.type === "BUNDLE_PRICE") return "BUNDLE_PRICE";
   if (rule.type === "FREE_UNITS") return "FREE_UNITS";
-  if (rule.scope === "COMBO") return "COMBO";
+  if (rule.type === "BUNDLE_PRICE" || rule.scope === "COMBO") return "COMBO";
   return rule.type === "FIXED_AMOUNT" ? "FIXED_AMOUNT" : "PERCENTAGE";
 }
 
 /**
- * The kinds this particular form may show — the four, plus `BUNDLE_PRICE` when
- * that is what is being edited.
- *
- * Appended rather than inserted so the four keep the positions an operator has
- * learned, and present ONLY on the legacy rule's own form: an operator editing
- * a percentage promotion is not offered a bundle price they cannot create.
- */
-export function kindOptions(editing: { type: string; scope: string } | null): DiscountKind[] {
-  const kind = kindOf(editing);
-  return kind === "BUNDLE_PRICE" ? [...DISCOUNT_KINDS, kind] : [...DISCOUNT_KINDS];
-}
-
-/**
- * A combo's reward is one of the two plain types, chosen separately from the
- * kind — "15% off the combo" and "R$ 5,00 off the combo" are the same kind of
- * promotion with different arithmetic.
+ * A combo's reward, chosen separately from the kind — "15% off the combo",
+ * "R$ 5,00 off the combo" and "the combo for R$ 120" (FUT-4417) are the same
+ * kind of promotion with different arithmetic. In the order the toggle shows
+ * them.
  */
-export const COMBO_REWARDS = ["PERCENTAGE", "FIXED_AMOUNT"] as const;
+export const COMBO_REWARDS = ["PERCENTAGE", "FIXED_AMOUNT", "BUNDLE_PRICE"] as const;
+export type ComboReward = (typeof COMBO_REWARDS)[number];
 
-/** Which reward an existing combo was saved with. */
-export function comboRewardOf(rule: { type: string } | null): string {
-  return rule?.type === "FIXED_AMOUNT" ? "FIXED_AMOUNT" : "PERCENTAGE";
+/** Which reward an existing combo was saved with; a new one starts on the percentage. */
+export function comboRewardOf(rule: { type: string } | null): ComboReward {
+  if (rule?.type === "FIXED_AMOUNT" || rule?.type === "BUNDLE_PRICE") return rule.type;
+  return "PERCENTAGE";
 }
 
 /**
@@ -114,17 +106,19 @@ export function comboRewardOf(rule: { type: string } | null): string {
  * rather than trusted: the toggle is unmounted at combo kinds, so its value is
  * whatever it was before the operator changed their mind.
  */
-export function typeAndScopeFor(values: {
-  kind: string;
-  comboReward: string;
-  scope: string;
-}): { type: DiscountType; scope: DiscountScope } {
-  if (values.kind === "COMBO") {
-    const type = values.comboReward === "FIXED_AMOUNT" ? "FIXED_AMOUNT" : "PERCENTAGE";
-    return { type, scope: "COMBO" };
-  }
+export function typeAndScopeFor(values: { kind: string; comboReward: string; scope: string }): {
+  type: DiscountType;
+  scope: DiscountScope;
+} {
+  if (values.kind === "COMBO")
+    return {
+      type: comboRewardOf({ type: values.comboReward }),
+      scope: "COMBO",
+    };
   if (values.kind === "FREE_UNITS") return { type: "FREE_UNITS", scope: "COMBO" };
-  if (values.kind === "BUNDLE_PRICE") return { type: "BUNDLE_PRICE", scope: "COMBO" };
   const type = values.kind === "FIXED_AMOUNT" ? "FIXED_AMOUNT" : "PERCENTAGE";
-  return { type, scope: values.scope === "COMBO" ? "ORDER" : (values.scope as DiscountScope) };
+  return {
+    type,
+    scope: values.scope === "COMBO" ? "ORDER" : (values.scope as DiscountScope),
+  };
 }

package/src/react/kind-field.tsx

@@ -7,14 +7,15 @@ import { Box } from "@12-apps/ui/mui/Box";
 
 import type { DiscountsWebCopy } from "./copy";
 import { optionsFor } from "./discount-form-fields";
-import type { DiscountKind } from "./form-kind";
+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, because
- * it is one longer when a legacy `BUNDLE_PRICE` rule is being edited.
+ * 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
@@ -28,8 +29,11 @@ import type { DiscountKind } from "./form-kind";
 /** 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. */
-function useElementWidth(ref: RefObject<HTMLElement | null>): number | null {
+export function useElementWidth(ref: RefObject<HTMLElement | null>): number | null {
   const [width, setWidth] = useState<number | null>(null);
   useLayoutEffect(() => {
     const element = ref.current;

package/src/react/pt-BR.ts

@@ -130,6 +130,7 @@ export const PT_BR_DISCOUNTS_WEB_COPY: DiscountsWebCopy = {
   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",
@@ -191,6 +192,32 @@ export const PT_BR_DISCOUNTS_WEB_COPY: DiscountsWebCopy = {
     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.",

package/src/react/table-config.ts

@@ -54,9 +54,23 @@ function labelled(labels: Readonly<Record<string, string>>, value: string): stri
   return labels[value] ?? value;
 }
 
+/** The Nome column's floor, in design px (the grid converts it through the type scale). */
+const NAME_COLUMN_MIN_PX = 200;
+
 export function discountColumns(copy: DiscountsWebCopy): DataViewColumn<DiscountListItem>[] {
   return [
-    { id: "name", header: copy.screen.columns.name, accessor: "name", searchable: true },
+    {
+      id: "name",
+      header: copy.screen.columns.name,
+      accessor: "name",
+      searchable: true,
+      // The column a row is read by: nine columns share the width, and with no
+      // floor the grid squeezed it until "Frete grátis na segunda" stood on
+      // three lines with "na" alone on one (ADR 0074 U1, FUT-4417). The floor
+      // holds a typical promotion name on one or two lines; the table scrolls
+      // sideways inside its own wrapper on a phone, as it already did.
+      minWidth: NAME_COLUMN_MIN_PX,
+    },
     // Pre-formatted by the page: a cell must not do arithmetic on basis points.
     { id: "value", header: copy.screen.columns.value, accessor: (row) => row.valueLabel },
     {

package/src/server/collections.ts

@@ -40,6 +40,26 @@ export interface DiscountTarget {
    * category path is built from the same edges. Absent or null at the root.
    */
   parentId?: string | null;
+  /**
+   * What a buyer can pay for one unit of this row, cheapest to dearest — its own
+   * price and its variations' (FUT-4417). Only an ITEM row carries it, and only
+   * so the combo form can say what a group's items sum to ("Como fica no
+   * carrinho"); nothing prices a cart from it. Absent: the form shows no
+   * preview for a group that can take this row alone.
+   */
+  priceRangeCents?: DiscountTargetPriceRange | null;
+  /**
+   * The category an ITEM row is filed under, for the same preview: a group that
+   * names a category takes every product filed under it or under its
+   * subcategories. Absent or null: uncategorized.
+   */
+  categoryId?: string | null;
+}
+
+/** The cheapest and dearest unit price of one target, in integer cents. */
+export interface DiscountTargetPriceRange {
+  minCents: number;
+  maxCents: number;
 }
 
 /**

package/src/server/index.ts

@@ -28,6 +28,7 @@ export {
   type DiscountableCollection,
   type DiscountableOps,
   type DiscountTarget,
+  type DiscountTargetPriceRange,
   type DiscountTargetGroup,
 } from "./collections";