@12-apps/discounts 1.4.0 → 1.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@12-apps/discounts",
-  "version": "1.4.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/combo-slot-builder.tsx

@@ -136,6 +136,7 @@ function ComboSlotRow({
             requiredMessage={undefined}
             ids={idsFor(slot, group.targetType)}
             onChange={(ids) => onChange(withIds(slot, group.targetType, ids))}
+            copy={copy.categorySelect}
             dataTestId={`combo-slot-${index}-${group.slug}`}
           />
         ))}

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,
@@ -245,6 +247,17 @@ export interface DiscountsWebCopy {
   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;
 }
 
 /**
@@ -291,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-target-picker.tsx

@@ -108,6 +108,7 @@ export function DiscountTargetPicker({
       requiredMessage={copy.targets.required}
       ids={ids}
       onChange={onChange}
+      copy={copy.categorySelect}
       dataTestId={`discount-${group.slug}-targets`}
     />
   );

package/src/react/discounts-screen.tsx

@@ -6,8 +6,15 @@ import { useSearchParams } from "react-router-dom";
 import AddIcon from "@mui/icons-material/Add";
 
 import { useServerDataViews } from "@12-apps/app-shell/react";
-import { CardActionsProvider, useRowConfirm } from "@12-apps/ui/data-display/CardKit";
-import { DataViewsGrid, type DataViewState } from "@12-apps/ui/data-display/DataViews";
+import {
+  CardActionsProvider,
+  useRowConfirm,
+} from "@12-apps/ui/data-display/CardKit";
+import {
+  DataViewsCopyProvider,
+  DataViewsGrid,
+  type DataViewState,
+} from "@12-apps/ui/data-display/DataViews";
 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";
@@ -87,6 +94,7 @@ function useBulkDelete(
             confirmText: copy.actions.delete,
           },
     errorText: copy.actions.deleteFailed,
+    copy: copy.confirmAction,
     dataTestId: "discount-bulk-delete-confirm",
   });
 }
@@ -103,7 +111,9 @@ function HeaderControls({
 }): JSX.Element {
   return (
     <>
-      <Dashboard.Info title={copy.screen.aboutTitle}>{copy.screen.aboutBody}</Dashboard.Info>
+      <Dashboard.Info title={copy.screen.aboutTitle}>
+        {copy.screen.aboutBody}
+      </Dashboard.Info>
       <Dashboard.Spacer />
       <Dashboard.Export
         formats={[
@@ -234,6 +244,68 @@ function CreateDialog({
   );
 }
 
+/**
+ * Everything below the header: the create dialog and the grid.
+ *
+ * Split out of {@link DiscountsScreen} only to keep that component inside the
+ * size gate — this is one tree, not a second concern.
+ */
+function ScreenBody({
+  createOpen,
+  setCreateOpen,
+  menu,
+  refresh,
+  rows,
+  copy,
+  appliedState,
+  server,
+  onVisibleRowsChange,
+  bulkDelete,
+}: {
+  createOpen: boolean;
+  setCreateOpen: (open: boolean) => void;
+  menu: MenuBinding;
+  refresh: () => void;
+  rows: DiscountListItem[];
+  copy: DiscountsWebCopy;
+  appliedState: DataViewState;
+  server: ReturnType<typeof useServerDataViews>;
+  onVisibleRowsChange: (rows: DiscountListItem[]) => void;
+  bulkDelete: ReturnType<typeof useBulkDelete>;
+}): JSX.Element {
+  return (
+    <Dashboard.Body>
+      <CreateDialog
+        open={createOpen}
+        menu={menu}
+        onClose={() => setCreateOpen(false)}
+        onSaved={() => {
+          setCreateOpen(false);
+          refresh();
+        }}
+      />
+      <CardActionsProvider
+        // The menus read the refresh and the error channel from here; the
+        // tenant is already baked into `apiBase`, so there is nothing for a
+        // slug to do but be a second place it could disagree.
+        tenantSlug=""
+        onRefresh={refresh}
+        errorTitle={copy.actions.actionFailed}
+      >
+        <DiscountsGrid
+          rows={rows}
+          copy={copy}
+          menu={menu}
+          appliedState={appliedState}
+          server={server}
+          onVisibleRowsChange={onVisibleRowsChange}
+          bulkDelete={bulkDelete}
+        />
+      </CardActionsProvider>
+    </Dashboard.Body>
+  );
+}
+
 export function DiscountsScreen(props: DiscountsScreenProps): JSX.Element {
   const { api, copy, formatters, currencyField, onError, breadcrumb } = props;
   const [searchParams] = useSearchParams();
@@ -246,12 +318,16 @@ export function DiscountsScreen(props: DiscountsScreenProps): JSX.Element {
   // "now"s could disagree about which of them is still running.
   const rows = useMemo(() => {
     const now = new Date();
-    return (data.page?.data ?? []).map((record) => toListItem(record, formatters, copy, now));
+    return (data.page?.data ?? []).map((record) =>
+      toListItem(record, formatters, copy, now),
+    );
   }, [data.page, formatters, copy]);
 
   // Seeded ONCE from the URL. Re-applying it on every render would wipe the
   // operator's column-visibility choices each time the query synced back.
-  const [appliedState] = useState<DataViewState>(() => discountsAppliedState(searchParams, copy));
+  const [appliedState] = useState<DataViewState>(() =>
+    discountsAppliedState(searchParams, copy),
+  );
 
   const server = useServerDataViews({
     totalCount: data.page?.pagination.total ?? 0,
@@ -260,7 +336,14 @@ export function DiscountsScreen(props: DiscountsScreenProps): JSX.Element {
     toParams: discountsQueryToParams,
   });
 
-  const menu: MenuBinding = { api, copy, formatters, currencyField, groups: data.groups, onError };
+  const menu: MenuBinding = {
+    api,
+    copy,
+    formatters,
+    currencyField,
+    groups: data.groups,
+    onError,
+  };
 
   if (data.loading) return <LoadingState dataTestId="discounts-loading" />;
   if (data.error !== null) {
@@ -275,40 +358,31 @@ export function DiscountsScreen(props: DiscountsScreenProps): JSX.Element {
   }
 
   return (
-    <Dashboard testIdPrefix="discounts-dashboard">
-      {breadcrumb && <Dashboard.Breadcrumb items={[...breadcrumb]} />}
-      <Dashboard.Header title={copy.screen.title}>
-        <HeaderControls rows={visibleRows} copy={copy} onCreate={() => setCreateOpen(true)} />
-      </Dashboard.Header>
-      <Dashboard.Body>
-        <CreateDialog
-          open={createOpen}
-          menu={menu}
-          onClose={() => setCreateOpen(false)}
-          onSaved={() => {
-            setCreateOpen(false);
-            data.refresh();
-          }}
-        />
-        <CardActionsProvider
-          // The menus read the refresh and the error channel from here; the
-          // tenant is already baked into `apiBase`, so there is nothing for a
-          // slug to do but be a second place it could disagree.
-          tenantSlug=""
-          onRefresh={data.refresh}
-          errorTitle={copy.actions.actionFailed}
-        >
-          <DiscountsGrid
-            rows={rows}
+    // The grid, its toolbar and its saved-view dialogs read their words from
+    // here: `@12-apps/ui` ships none and throws rather than falling back.
+    <DataViewsCopyProvider copy={copy.dataViews}>
+      <Dashboard testIdPrefix="discounts-dashboard">
+        {breadcrumb && <Dashboard.Breadcrumb items={[...breadcrumb]} />}
+        <Dashboard.Header title={copy.screen.title}>
+          <HeaderControls
+            rows={visibleRows}
             copy={copy}
-            menu={menu}
-            appliedState={appliedState}
-            server={server}
-            onVisibleRowsChange={setVisibleRows}
-            bulkDelete={bulkDelete}
+            onCreate={() => setCreateOpen(true)}
           />
-        </CardActionsProvider>
-      </Dashboard.Body>
-    </Dashboard>
+        </Dashboard.Header>
+        <ScreenBody
+          createOpen={createOpen}
+          setCreateOpen={setCreateOpen}
+          menu={menu}
+          refresh={data.refresh}
+          rows={rows}
+          copy={copy}
+          appliedState={appliedState}
+          server={server}
+          onVisibleRowsChange={setVisibleRows}
+          bulkDelete={bulkDelete}
+        />
+      </Dashboard>
+    </DataViewsCopyProvider>
   );
 }

package/src/react/pt-BR.ts

@@ -1,3 +1,9 @@
+import {
+  PT_BR_CATEGORY_SELECT_COPY,
+  PT_BR_CONFIRM_ACTION_COPY,
+  PT_BR_DATA_VIEWS_COPY,
+} from "@12-apps/ui/pt-BR";
+
 import type { DiscountsWebCopy } from "./copy";
 
 /**
@@ -154,4 +160,7 @@ export const PT_BR_DISCOUNTS_WEB_COPY: DiscountsWebCopy = {
     perBuyerLimit: "Limite por cliente",
     unlimited: "Sem limite",
   },
+  confirmAction: PT_BR_CONFIRM_ACTION_COPY,
+  dataViews: PT_BR_DATA_VIEWS_COPY,
+  categorySelect: PT_BR_CATEGORY_SELECT_COPY,
 };

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

@@ -1,5 +1,6 @@
 "use client";
 
+import type { CategorySelectCopy } from "@12-apps/ui/copy";
 import { useState, type JSX } from "react";
 
 import { Autocomplete } from "@12-apps/ui/form/Autocomplete";
@@ -100,6 +101,7 @@ export function TargetPickerField({
   ids,
   onChange,
   dataTestId,
+  copy,
 }: {
   group: WireTargetGroup;
   label: string;
@@ -108,6 +110,8 @@ export function TargetPickerField({
   ids: readonly string[];
   onChange: (next: string[]) => void;
   dataTestId: string;
+  /** `CategorySelect`'s own words — required since FUT-760, never defaulted. */
+  copy: CategorySelectCopy;
 }): JSX.Element {
   if (group.nests) {
     return (
@@ -119,6 +123,7 @@ export function TargetPickerField({
         value={[...ids]}
         onChange={onChange}
         error={requiredMessage !== undefined && ids.length === 0 ? requiredMessage : undefined}
+        copy={copy}
         dataTestId={dataTestId}
       />
     );