@aglyn/plugins-commerce 1.0.0-beta.218 → 1.0.0-beta.219

package/src/lib/components/console/product-editor-dialog.component.js

@@ -23,7 +23,7 @@ import { Timestamp } from "@aglyn/shared-util-timestamp";
 import { Alert, Autocomplete, Box, Button, Dialog, DialogActions, DialogContent, DialogTitle, Divider, IconButton, MenuItem, Stack, TableBody, TableCell, TableHead, TableRow, TextField, Typography } from "@mui/material";
 import { collection, doc, getDoc } from "firebase/firestore";
 import { productCollectionFields } from "./smart-collections.js";
-import { useCallback, useMemo, useState } from "react";
+import { memo, useCallback, useMemo, useRef, useState } from "react";
 import { ceilingedWindow, collectionCeiling, useFirestore, useFirestoreCollection, useHostResourceApi, writeGuardedBySeed, useUser } from "@aglyn/tenant-feature-instance";
 import { writeSiteWideChange } from "@aglyn/tenant-feature-instance/hooks/helpers/site-wide-change";
 import { useMediaPicker } from "@aglyn/aglyn";
@@ -31,6 +31,7 @@ import { useConsoleWidgetSlot } from "@aglyn/aglyn/app-utils/console-widget-slot
 import { seoListingFieldCount, seoListingFieldTooLong } from "@aglyn/aglyn/app-utils/seo-listing-fields";
 import { ScrollTable } from "@aglyn/shared-ui-jsx/components/scroll-table.component";
 import { EntitlementUpsell, useCommerceEntitlement } from "./entitlement-gate.component.js";
+import { PRODUCT_EDITOR_ZONE } from "./product-zones.js";
 import { MembersVideosField, PaidDownloadAddButton, PaidMediaProtection } from "./paid-media.js";
 /**
  * What each picker in this dialog will offer.
@@ -72,6 +73,49 @@ function comboLabel(options) {
     const values = Object.values(options != null ? options : {});
     return values.length ? values.join(' / ') : 'Default';
 }
+/** Stand-in for a list the product does not hold yet, the same one each render. */ const NO_ITEMS = [];
+const FILL_ROW = {
+    flex: 1
+};
+const categoryLabel = (category)=>category.name;
+const recordLabel = (item)=>{
+    var _item_name;
+    return (_item_name = item.name) != null ? _item_name : item.$id;
+};
+const sameRecord = (option, value)=>option.$id === value.$id;
+/**
+ * One of the editor's chip lists — tags, categories, an option's values,
+ * related products — MEMOIZED, and every prop it takes is stable while its
+ * own list is (AGL-3423).
+ *
+ * A multiple Autocomplete hands its input a new chip array as
+ * `startAdornment` on every render, and MUI's `InputBase` copies that into
+ * its `FormControl` from a passive effect: a state update left pending after
+ * every commit the field takes part in. React 19 counts each such commit as a
+ * nested update, and keystrokes delivered back to back commit one after
+ * another with nothing to clear the count, so the fifty-first throws
+ * "Maximum update depth exceeded" (#185). Every field in this editor writes
+ * one draft, so every keystroke in any of them re-rendered all four lists;
+ * kept out of those renders, a list commits only when it changes.
+ */ const ProductChipsField = /*#__PURE__*/ memo(function ProductChipsField(props) {
+    const { index = 0, onChange } = props;
+    return /*#__PURE__*/ _jsx(Autocomplete, {
+        multiple: true,
+        freeSolo: props.freeSolo,
+        options: props.options,
+        value: props.value,
+        getOptionLabel: props.getOptionLabel,
+        isOptionEqualToValue: props.isOptionEqualToValue,
+        onChange: (_event, next)=>onChange(next, index),
+        renderInput: (params)=>/*#__PURE__*/ _jsx(TextField, _extends({}, params, {
+                label: props.label,
+                size: "small",
+                placeholder: props.placeholder,
+                helperText: props.helperText
+            })),
+        sx: props.fill ? FILL_ROW : undefined
+    });
+});
 /**
  * Products hub editor (AGL-279): the full catalog editor — basics,
  * media, tags, options → variants matrix, per-variant pricing/stock, and
@@ -161,6 +205,42 @@ function comboLabel(options) {
     // Lazy-init per open; parent remounts via `key` on product change.
     const current = (_ref = draft != null ? draft : lifted) != null ? _ref : blankProduct();
     const update = (patch)=>setDraft(_extends({}, current, patch));
+    /*
+   * `update` for the memoized chip lists: the same write from the last
+   * rendered draft, from a callback that keeps its identity across renders.
+   */ const latest = useRef(current);
+    latest.current = current;
+    const updateLatest = useCallback((patch)=>setDraft(_extends({}, latest.current, patch)), []);
+    const setTags = useCallback((tags)=>updateLatest({
+            tags: tags.map((tag)=>String(tag).trim()).filter(Boolean)
+        }), [
+        updateLatest
+    ]);
+    const setCategories = useCallback((picked)=>updateLatest({
+            categoryIds: picked.map((category)=>category.$id)
+        }), [
+        updateLatest
+    ]);
+    const setRelatedProducts = useCallback((picked)=>updateLatest({
+            relatedProductIds: picked.map((item)=>item.$id)
+        }), [
+        updateLatest
+    ]);
+    const categoryIds = current.categoryIds;
+    const pickedCategories = useMemo(()=>categories.rows.filter((category)=>(categoryIds != null ? categoryIds : []).includes(category.$id)), [
+        categories.rows,
+        categoryIds
+    ]);
+    const relatedProductIds = current.relatedProductIds;
+    const productId = product == null ? void 0 : product.$id;
+    const relatedOptions = useMemo(()=>relatedProducts.rows.filter((item)=>!item.deletedAt && item.$id !== productId), [
+        relatedProducts.rows,
+        productId
+    ]);
+    const pickedRelated = useMemo(()=>relatedProducts.rows.filter((item)=>(relatedProductIds != null ? relatedProductIds : []).includes(item.$id)), [
+        relatedProducts.rows,
+        relatedProductIds
+    ]);
     /** The shell's zone renderer (AGL-2910); `null` outside the console shell. */ const WidgetSlot = useConsoleWidgetSlot();
     /**
    * A listing zone widget's proposal, staged into the draft like typing.
@@ -303,6 +383,11 @@ function comboLabel(options) {
     }, [
         current
     ]);
+    const latestOptionsChange = useRef(handleOptionsChange);
+    latestOptionsChange.current = handleOptionsChange;
+    const setOptionValues = useCallback((values, index)=>latestOptionsChange.current(index, {
+            values: values.map((value)=>String(value).trim()).filter(Boolean)
+        }), []);
     const handleVariantField = (index, field, raw)=>{
         const variants = [
             ...current.variants
@@ -633,39 +718,24 @@ function comboLabel(options) {
                         multiline: true,
                         minRows: 2
                     }),
-                    /*#__PURE__*/ _jsx(Autocomplete, {
-                        multiple: true,
+                    /*#__PURE__*/ _jsx(ProductChipsField, {
                         freeSolo: true,
-                        options: [],
-                        value: (_current_tags1 = current.tags) != null ? _current_tags1 : [],
-                        onChange: (_event, tags)=>update({
-                                tags: tags.map((tag)=>String(tag).trim()).filter(Boolean)
-                            }),
-                        renderInput: (params)=>/*#__PURE__*/ _jsx(TextField, _extends({}, params, {
-                                label: "Tags",
-                                size: "small",
-                                placeholder: "Type and press Enter"
-                            }))
+                        label: "Tags",
+                        placeholder: "Type and press Enter",
+                        options: NO_ITEMS,
+                        value: (_current_tags1 = current.tags) != null ? _current_tags1 : NO_ITEMS,
+                        onChange: setTags
                     }),
-                    categories.rows.length > 0 ? /*#__PURE__*/ _jsx(Autocomplete, {
-                        multiple: true,
+                    categories.rows.length > 0 ? /*#__PURE__*/ _jsx(ProductChipsField, {
+                        label: "Categories",
                         options: categories.rows,
-                        getOptionLabel: (category)=>category.name,
-                        isOptionEqualToValue: (option, value)=>option.$id === value.$id,
-                        value: categories.rows.filter((category)=>{
-                            var _current_categoryIds;
-                            return ((_current_categoryIds = current.categoryIds) != null ? _current_categoryIds : []).includes(category.$id);
-                        }),
-                        onChange: (_event, picked)=>update({
-                                categoryIds: picked.map((category)=>category.$id)
-                            }),
-                        renderInput: (params)=>/*#__PURE__*/ _jsx(TextField, _extends({}, params, {
-                                label: "Categories",
-                                size: "small"
-                            }))
+                        getOptionLabel: categoryLabel,
+                        isOptionEqualToValue: sameRecord,
+                        value: pickedCategories,
+                        onChange: setCategories
                     }) : null,
                     WidgetSlot ? /*#__PURE__*/ _jsx(WidgetSlot, {
-                        slot: "productEditor",
+                        slot: PRODUCT_EDITOR_ZONE.id,
                         hostId: hostId,
                         orgId: undefined,
                         product: zoneProduct,
@@ -761,22 +831,15 @@ function comboLabel(options) {
                                     },
                                     placeholder: "Size"
                                 }),
-                                /*#__PURE__*/ _jsx(Autocomplete, {
-                                    multiple: true,
+                                /*#__PURE__*/ _jsx(ProductChipsField, {
                                     freeSolo: true,
-                                    options: [],
+                                    fill: true,
+                                    label: "Values",
+                                    placeholder: "S, M, L…",
+                                    options: NO_ITEMS,
                                     value: option.values,
-                                    onChange: (_event, values)=>handleOptionsChange(index, {
-                                            values: values.map((value)=>String(value).trim()).filter(Boolean)
-                                        }),
-                                    renderInput: (params)=>/*#__PURE__*/ _jsx(TextField, _extends({}, params, {
-                                            label: "Values",
-                                            size: "small",
-                                            placeholder: "S, M, L…"
-                                        })),
-                                    sx: {
-                                        flex: 1
-                                    }
+                                    index: index,
+                                    onChange: setOptionValues
                                 }),
                                 /*#__PURE__*/ _jsx(Button, {
                                     size: "small",
@@ -1283,26 +1346,14 @@ function comboLabel(options) {
                             })
                         ]
                     }) : null,
-                    /*#__PURE__*/ _jsx(Autocomplete, {
-                        multiple: true,
-                        options: relatedProducts.rows.filter((item)=>!item.deletedAt && item.$id !== (product == null ? void 0 : product.$id)),
-                        getOptionLabel: (item)=>{
-                            var _item_name;
-                            return (_item_name = item.name) != null ? _item_name : item.$id;
-                        },
-                        isOptionEqualToValue: (option, value)=>option.$id === value.$id,
-                        value: relatedProducts.rows.filter((item)=>{
-                            var _current_relatedProductIds;
-                            return ((_current_relatedProductIds = current.relatedProductIds) != null ? _current_relatedProductIds : []).includes(item.$id);
-                        }),
-                        onChange: (_event, picked)=>update({
-                                relatedProductIds: picked.map((item)=>item.$id)
-                            }),
-                        renderInput: (params)=>/*#__PURE__*/ _jsx(TextField, _extends({}, params, {
-                                label: "Related products (upsells)",
-                                size: "small",
-                                helperText: "Shown by the Related products block; blank falls back to frequently-bought-together"
-                            }))
+                    /*#__PURE__*/ _jsx(ProductChipsField, {
+                        label: "Related products (upsells)",
+                        helperText: "Shown by the Related products block; blank falls back to frequently-bought-together",
+                        options: relatedOptions,
+                        getOptionLabel: recordLabel,
+                        isOptionEqualToValue: sameRecord,
+                        value: pickedRelated,
+                        onChange: setRelatedProducts
                     }),
                     /*#__PURE__*/ _jsx(Divider, {
                         textAlign: "left",