@base44/app-plugin-commerce 0.1.3 → 0.1.5

package/src/commerce/admin/pages/products/ProductEditor.jsx

@@ -11,7 +11,7 @@ import { useAdminHref } from "../../context/BasePathContext";
 import PageHeader from "../../components/PageHeader";
 import MediaUploader from "../../components/MediaUploader";
 import RichTextarea from "../../components/RichTextarea";
-import { slugify, isVariable } from "../../lib/product-utils";
+import { slugify } from "../../lib/product-utils";
 import ProductDataPanel from "./components/ProductDataPanel";
 import TaxonomyPanel from "./components/TaxonomyPanel";
 import PublishBox from "./components/PublishBox";
@@ -19,7 +19,6 @@ import PublishBox from "./components/PublishBox";
 const NEW_PRODUCT = {
   name: "",
   slug: "",
-  type: "simple",
   status: "draft",
   featured: false,
   catalog_visibility: "visible",
@@ -35,8 +34,6 @@ const NEW_PRODUCT = {
   downloads: [],
   download_limit: -1,
   download_expiry: -1,
-  external_url: "",
-  button_text: "",
   tax_status: "taxable",
   tax_class: "standard",
   manage_stock: false,
@@ -48,17 +45,13 @@ const NEW_PRODUCT = {
   weight: null,
   dimensions: { length: null, width: null, height: null },
   shipping_class_id: "",
-  reviews_allowed: true,
   upsell_ids: [],
   cross_sell_ids: [],
-  grouped_products: [],
-  purchase_note: "",
   category_ids: [],
   tag_ids: [],
   images: [],
   attributes: [],
   default_attributes: [],
-  menu_order: 0,
   meta_data: [],
 };
 
@@ -83,7 +76,10 @@ export default function ProductEditor() {
     () => base44.entities["commerce.ProductTag"].list(undefined, 1000),
     []
   );
-  const { data: attributes } = useAsync(() => base44.entities["commerce.ProductAttribute"].list(undefined, 500), []);
+  const { data: attributes, refetch: refreshAttributes } = useAsync(
+    () => base44.entities["commerce.ProductAttribute"].list("order", 500),
+    []
+  );
   const { data: shippingClasses } = useAsync(() => base44.entities["commerce.ShippingClass"].list(undefined, 500), []);
   const { data: taxClasses } = useAsync(() => base44.entities["commerce.TaxClass"].list(undefined, 100), []);
 
@@ -127,8 +123,7 @@ export default function ProductEditor() {
     }
     setSaving(true);
     try {
-      const payload = { product: { ...product, name: product.name.trim() } };
-      if (isVariable(product)) payload.variations = variations;
+      const payload = { product: { ...product, name: product.name.trim() }, variations };
       const data = await call("admin-products", "save", payload);
       const savedId = data?.product?.id || data?.id || id;
       toast.success(isNew ? "Product created" : "Product saved");
@@ -162,7 +157,10 @@ export default function ProductEditor() {
     );
   }
 
-  const refs = { categories, tags, attributes, shippingClasses, taxClasses, refreshCategories, refreshTags };
+  const refs = {
+    categories, tags, attributes, shippingClasses, taxClasses,
+    refreshCategories, refreshTags, refreshAttributes,
+  };
 
   return (
     <div className="space-y-4">

package/src/commerce/admin/pages/products/ProductsList.jsx

@@ -32,7 +32,7 @@ import SearchSelect from "../../components/SearchSelect";
 import StatusBadge from "../../components/StatusBadge";
 import MoneyInput from "../../components/MoneyInput";
 import ConfirmDialog from "../../components/ConfirmDialog";
-import { PRODUCT_TYPES, PRODUCT_STATUSES, STOCK_STATUSES, statusMeta } from "../../lib/constants";
+import { PRODUCT_STATUSES, STOCK_STATUSES, statusMeta } from "../../lib/constants";
 import { formatDate } from "../../lib/format";
 
 const ALL = "all";
@@ -123,7 +123,6 @@ export default function ProductsList() {
 
   const [q, setQ] = useState("");
   const [category, setCategory] = useState(null);
-  const [type, setType] = useState(ALL);
   const [stock, setStock] = useState(ALL);
   const [selected, setSelected] = useState([]);
   const [quickEdit, setQuickEdit] = useState(null);
@@ -145,7 +144,6 @@ export default function ProductsList() {
         const data = await call("admin-products", "search", {
           q: debouncedQ || undefined,
           category_id: category?.value || undefined,
-          type: type === ALL ? undefined : type,
           stock_status: stock === ALL ? undefined : stock,
           sort,
           limit,
@@ -154,14 +152,13 @@ export default function ProductsList() {
         return data?.rows || data || [];
       }
       const query = {};
-      if (type !== ALL) query.type = type;
       if (stock !== ALL) query.stock_status = stock;
       return base44.entities["commerce.Product"].filter(query, sort, limit, skip);
     },
-    [usingSearch, debouncedQ, category, type, stock]
+    [usingSearch, debouncedQ, category, stock]
   );
 
-  const list = usePagedList(fetcher, { deps: [debouncedQ, category?.value, type, stock] });
+  const list = usePagedList(fetcher, { deps: [debouncedQ, category?.value, stock] });
 
   const toggleFeatured = async (row) => {
     await call("admin-products", "save", { product: { id: row.id, featured: !row.featured } });
@@ -322,15 +319,6 @@ export default function ProductsList() {
               .map((c) => ({ value: c.id, label: c.name }))
           }
         />
-        <Select value={type} onValueChange={setType}>
-          <SelectTrigger className="w-44"><SelectValue /></SelectTrigger>
-          <SelectContent>
-            <SelectItem value={ALL}>All types</SelectItem>
-            {PRODUCT_TYPES.map((t) => (
-              <SelectItem key={t.value} value={t.value}>{t.label}</SelectItem>
-            ))}
-          </SelectContent>
-        </Select>
         <Select value={stock} onValueChange={setStock}>
           <SelectTrigger className="w-40"><SelectValue /></SelectTrigger>
           <SelectContent>

package/src/commerce/admin/pages/products/components/AttributesSection.jsx

@@ -0,0 +1,426 @@
+import React, { useCallback, useEffect, useState } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Card } from "@/components/ui/card";
+import {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { ChevronDown, ChevronRight, ChevronUp, Loader2, Plus, Settings2, Trash2 } from "lucide-react";
+
+import { base44, call } from "../../../lib/api";
+import SearchSelect from "../../../components/SearchSelect";
+import { slugify } from "../../../lib/product-utils";
+
+/** Sentinel option value for "create the thing I just typed". */
+const CREATE = "__create__";
+const createdName = (label) => label.replace(/^Create "/, "").replace(/"$/, "");
+
+const fetchValues = (attributeId) =>
+  base44.entities["commerce.ProductAttributeTerm"]
+    .filter({ attribute_id: attributeId }, "order", 500)
+    .then((rows) => rows || [])
+    .catch(() => []);
+
+/**
+ * Which attributes this product varies by, and which of their values it comes in.
+ *
+ * Editing this drives the variant list directly — the caller reconciles variants
+ * against these options, so there is no generate step. The attribute and value
+ * records themselves are shared between products, so edits to those save
+ * immediately, while the choice of which values *this* product uses is part of
+ * the product form and saves with it.
+ */
+export default function AttributesSection({ product, up, refs }) {
+  const attributes = product.attributes || [];
+  const globalAttributes = refs.attributes || [];
+  const [valuesByAttr, setValuesByAttr] = useState({});
+  const [manageOpen, setManageOpen] = useState(false);
+  const [busy, setBusy] = useState(false);
+
+  const loadValues = useCallback(async (attributeId) => {
+    const rows = await fetchValues(attributeId);
+    setValuesByAttr((c) => ({ ...c, [attributeId]: rows }));
+    return rows;
+  }, []);
+
+  const attachedIds = attributes.map((a) => a.attribute_id).filter(Boolean).join(",");
+  useEffect(() => {
+    const missing = attachedIds.split(",").filter((id) => id && !valuesByAttr[id]);
+    if (!missing.length) return;
+    let cancelled = false;
+    Promise.all(missing.map((id) => fetchValues(id).then((rows) => [id, rows]))).then((entries) => {
+      if (!cancelled) setValuesByAttr((c) => ({ ...c, ...Object.fromEntries(entries) }));
+    });
+    return () => {
+      cancelled = true;
+    };
+    // eslint-disable-next-line -- keyed on the id list, not the cache
+  }, [attachedIds]);
+
+  const setRow = (index, patch) =>
+    up({ attributes: attributes.map((a, i) => (i === index ? { ...a, ...patch } : a)) });
+
+  const removeRow = (index) =>
+    up({ attributes: attributes.filter((_, i) => i !== index).map((a, i) => ({ ...a, position: i })) });
+
+  const moveRow = (index, delta) => {
+    const target = index + delta;
+    if (target < 0 || target >= attributes.length) return;
+    const next = [...attributes];
+    [next[index], next[target]] = [next[target], next[index]];
+    up({ attributes: next.map((a, i) => ({ ...a, position: i })) });
+  };
+
+  const attach = (attr) => {
+    if (!attr?.id || attributes.some((a) => a.attribute_id === attr.id)) return;
+    up({
+      attributes: [
+        ...attributes,
+        { attribute_id: attr.id, name: attr.name, position: attributes.length, options: [] },
+      ],
+    });
+  };
+
+  const createAndAttach = async (name) => {
+    setBusy(true);
+    try {
+      const order = globalAttributes.reduce((max, a) => Math.max(max, a.order ?? 0), -1) + 1;
+      const created = await call("admin-products", "save-term", {
+        taxonomy: "attribute",
+        term: { name, code: slugify(name), order },
+      });
+      await refs.refreshAttributes?.();
+      attach(created);
+    } catch {
+      /* toast handled by call() */
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  const createAndSelectValue = async (row, index, name) => {
+    setBusy(true);
+    try {
+      const existing = valuesByAttr[row.attribute_id] || [];
+      const order = existing.reduce((max, v) => Math.max(max, v.order ?? 0), -1) + 1;
+      await call("admin-products", "save-term", {
+        taxonomy: "attribute-term",
+        term: { attribute_id: row.attribute_id, name, order },
+      });
+      await loadValues(row.attribute_id);
+      setRow(index, { options: [...(row.options || []), name] });
+    } catch {
+      /* toast handled by call() */
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  return (
+    <div className="space-y-3">
+      <div className="flex items-start justify-between gap-4">
+        <div>
+          <h3 className="text-sm font-semibold">Attributes</h3>
+          <p className="text-xs text-muted-foreground">
+            What this product varies by. Every attribute is an axis, and the variants below follow
+            the values you pick.
+          </p>
+        </div>
+        <Button type="button" variant="outline" size="sm" onClick={() => setManageOpen(true)}>
+          <Settings2 className="mr-2 h-4 w-4" /> Manage attributes…
+        </Button>
+      </div>
+
+      {attributes.length === 0 && (
+        <p className="text-sm text-muted-foreground">
+          None — this product sells as a single item. Add one (Size, Color) to sell variants.
+        </p>
+      )}
+
+      {attributes.map((row, i) => {
+        const values = valuesByAttr[row.attribute_id] || [];
+        const selected = row.options || [];
+        return (
+          <Card key={`${row.attribute_id}-${i}`} className="space-y-2 p-3">
+            <div className="flex items-center gap-2">
+              <div className="flex flex-col">
+                <button
+                  type="button"
+                  className="text-muted-foreground disabled:opacity-30"
+                  disabled={i === 0}
+                  onClick={() => moveRow(i, -1)}
+                  title="Move up"
+                >
+                  <ChevronUp className="h-4 w-4" />
+                </button>
+                <button
+                  type="button"
+                  className="text-muted-foreground disabled:opacity-30"
+                  disabled={i === attributes.length - 1}
+                  onClick={() => moveRow(i, 1)}
+                  title="Move down"
+                >
+                  <ChevronDown className="h-4 w-4" />
+                </button>
+              </div>
+              <span className="flex-1 font-medium">{row.name}</span>
+              <Button
+                type="button"
+                variant="ghost"
+                size="icon"
+                onClick={() => removeRow(i)}
+                title="Remove from this product"
+              >
+                <Trash2 className="h-4 w-4 text-muted-foreground" />
+              </Button>
+            </div>
+            <SearchSelect
+              multiple
+              placeholder="Values this product comes in…"
+              value={selected.map((o) => ({ value: o, label: o }))}
+              onChange={(next) => {
+                const created = next.find((o) => o.value === CREATE);
+                if (created) createAndSelectValue(row, i, createdName(created.label));
+                else setRow(i, { options: next.map((o) => o.value) });
+              }}
+              search={async (q) => {
+                const term = (q || "").trim();
+                const opts = values
+                  .filter((v) => !term || v.name.toLowerCase().includes(term.toLowerCase()))
+                  .map((v) => ({ value: v.name, label: v.name }));
+                const exact = values.some((v) => v.name.toLowerCase() === term.toLowerCase());
+                if (term && !exact) opts.push({ value: CREATE, label: `Create "${term}"` });
+                return opts;
+              }}
+            />
+          </Card>
+        );
+      })}
+
+      <div className="flex items-center gap-2">
+        <SearchSelect
+          className="w-72"
+          placeholder="Add attribute…"
+          value={null}
+          onChange={(opt) => {
+            if (!opt) return;
+            if (opt.value === CREATE) createAndAttach(createdName(opt.label));
+            else attach(globalAttributes.find((a) => a.id === opt.value));
+          }}
+          search={async (q) => {
+            const term = (q || "").trim();
+            const opts = globalAttributes
+              .filter((a) => !attributes.some((row) => row.attribute_id === a.id))
+              .filter((a) => !term || a.name.toLowerCase().includes(term.toLowerCase()))
+              .map((a) => ({ value: a.id, label: a.name, meta: a.code || undefined }));
+            const exact = globalAttributes.some((a) => a.name.toLowerCase() === term.toLowerCase());
+            if (term && !exact) opts.push({ value: CREATE, label: `Create "${term}"` });
+            return opts;
+          }}
+        />
+        {busy && <Loader2 className="h-4 w-4 animate-spin text-muted-foreground" />}
+      </div>
+
+      {manageOpen && (
+        <ManageAttributesDialog
+          attributes={globalAttributes}
+          valuesByAttr={valuesByAttr}
+          loadValues={loadValues}
+          onClose={() => setManageOpen(false)}
+          onChanged={refs.refreshAttributes}
+        />
+      )}
+    </div>
+  );
+}
+
+/**
+ * The only place attributes and their values are edited, reachable from the
+ * product form alone. These records are shared between products, so every edit
+ * saves immediately rather than waiting for the product's Save.
+ *
+ * Deleting happens in the entity data, so there is no delete control.
+ */
+function ManageAttributesDialog({ attributes, valuesByAttr, loadValues, onClose, onChanged }) {
+  const [expanded, setExpanded] = useState(null);
+  const [saving, setSaving] = useState(false);
+  const [newName, setNewName] = useState("");
+
+  const saveAttribute = async (attr, patch) => {
+    if (Object.entries(patch).every(([k, v]) => (attr[k] ?? "") === v)) return;
+    setSaving(true);
+    try {
+      await call("admin-products", "save-term", {
+        taxonomy: "attribute",
+        term: { ...attr, ...patch },
+      });
+      await onChanged?.();
+    } catch {
+      /* toast handled by call() */
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const saveValue = async (attributeId, value, patch) => {
+    if (Object.entries(patch).every(([k, v]) => (value[k] ?? "") === v)) return;
+    setSaving(true);
+    try {
+      await call("admin-products", "save-term", {
+        taxonomy: "attribute-term",
+        term: { ...value, attribute_id: attributeId, ...patch },
+      });
+      await loadValues(attributeId);
+    } catch {
+      /* toast handled by call() */
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const addAttribute = async () => {
+    const name = newName.trim();
+    if (!name) return;
+    setSaving(true);
+    try {
+      const order = attributes.reduce((max, a) => Math.max(max, a.order ?? 0), -1) + 1;
+      await call("admin-products", "save-term", {
+        taxonomy: "attribute",
+        term: { name, code: slugify(name), order },
+      });
+      setNewName("");
+      await onChanged?.();
+    } catch {
+      /* toast handled by call() */
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const addValue = async (attributeId) => {
+    const existing = valuesByAttr[attributeId] || [];
+    const order = existing.reduce((max, v) => Math.max(max, v.order ?? 0), -1) + 1;
+    setSaving(true);
+    try {
+      await call("admin-products", "save-term", {
+        taxonomy: "attribute-term",
+        term: { attribute_id: attributeId, name: `Value ${order + 1}`, order },
+      });
+      await loadValues(attributeId);
+    } catch {
+      /* toast handled by call() */
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const toggle = async (id) => {
+    const opening = expanded !== id;
+    setExpanded(opening ? id : null);
+    if (opening && !valuesByAttr[id]) await loadValues(id);
+  };
+
+  return (
+    <Dialog open onOpenChange={(o) => !o && onClose()}>
+      <DialogContent className="max-h-[85vh] overflow-y-auto sm:max-w-2xl">
+        <DialogHeader>
+          <DialogTitle>Manage attributes</DialogTitle>
+        </DialogHeader>
+        <p className="-mt-2 text-xs text-muted-foreground">
+          Shared across every product — changes save immediately. To delete an attribute or a value,
+          remove it from the entity data.
+        </p>
+
+        <div className="space-y-2">
+          <div className="grid grid-cols-[1fr_140px_72px_32px] gap-2 text-xs text-muted-foreground">
+            <span>Name</span>
+            <span>Code</span>
+            <span>Order</span>
+            <span />
+          </div>
+          {attributes.map((attr) => (
+            <div key={attr.id} className="space-y-2 rounded-md border p-2">
+              <div className="grid grid-cols-[1fr_140px_72px_32px] items-center gap-2">
+                <Input
+                  defaultValue={attr.name || ""}
+                  className="h-8"
+                  onBlur={(e) => saveAttribute(attr, { name: e.target.value.trim() })}
+                />
+                <Input
+                  defaultValue={attr.code || ""}
+                  className="h-8 font-mono text-xs"
+                  onBlur={(e) => saveAttribute(attr, { code: e.target.value.trim() })}
+                />
+                <Input
+                  type="number"
+                  defaultValue={attr.order ?? 0}
+                  className="h-8"
+                  onBlur={(e) => saveAttribute(attr, { order: Number(e.target.value) || 0 })}
+                />
+                <button type="button" className="text-muted-foreground" onClick={() => toggle(attr.id)} title="Values">
+                  {expanded === attr.id ? (
+                    <ChevronDown className="h-4 w-4" />
+                  ) : (
+                    <ChevronRight className="h-4 w-4" />
+                  )}
+                </button>
+              </div>
+
+              {expanded === attr.id && (
+                <div className="space-y-1.5 border-t pt-2 pl-4">
+                  {(valuesByAttr[attr.id] || []).map((v) => (
+                    <div key={v.id} className="grid grid-cols-[1fr_72px] gap-2">
+                      <Input
+                        defaultValue={v.name || ""}
+                        className="h-8"
+                        onBlur={(e) => saveValue(attr.id, v, { name: e.target.value.trim() })}
+                      />
+                      <Input
+                        type="number"
+                        defaultValue={v.order ?? 0}
+                        className="h-8"
+                        onBlur={(e) => saveValue(attr.id, v, { order: Number(e.target.value) || 0 })}
+                      />
+                    </div>
+                  ))}
+                  {!(valuesByAttr[attr.id] || []).length && (
+                    <p className="text-xs text-muted-foreground">No values yet.</p>
+                  )}
+                  <Button type="button" variant="outline" size="sm" onClick={() => addValue(attr.id)}>
+                    <Plus className="mr-1 h-4 w-4" /> Add value
+                  </Button>
+                </div>
+              )}
+            </div>
+          ))}
+          {!attributes.length && <p className="text-sm text-muted-foreground">No attributes yet.</p>}
+        </div>
+
+        <div className="flex items-end gap-2 border-t pt-3">
+          <div className="flex-1 space-y-1.5">
+            <Label>New attribute</Label>
+            <Input
+              placeholder="e.g. Fabric"
+              value={newName}
+              onChange={(e) => setNewName(e.target.value)}
+              onKeyDown={(e) => e.key === "Enter" && addAttribute()}
+            />
+          </div>
+          <Button type="button" variant="outline" onClick={addAttribute} disabled={!newName.trim() || saving}>
+            <Plus className="mr-1 h-4 w-4" /> Add
+          </Button>
+        </div>
+
+        <DialogFooter>
+          {saving && <Loader2 className="mr-auto h-4 w-4 animate-spin text-muted-foreground" />}
+          <Button onClick={onClose}>Done</Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}