@base44/app-plugin-commerce 0.1.3 → 0.1.4

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>
+  );
+}

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

@@ -1,80 +1,51 @@
 import React, { useMemo, useState } from "react";
 import { Card, CardContent, CardHeader } from "@/components/ui/card";
 import { Checkbox } from "@/components/ui/checkbox";
-import { Label } from "@/components/ui/label";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select";
 import { Separator } from "@/components/ui/separator";
 
-import { PRODUCT_TYPES } from "../../../lib/constants";
-import { isSimple, isGrouped, isExternal, isVariable } from "../../../lib/product-utils";
-import GeneralTab from "./tabs/GeneralTab";
-import ExternalTab from "./tabs/ExternalTab";
-import InventoryTab from "./tabs/InventoryTab";
-import ShippingTab from "./tabs/ShippingTab";
+import { isVariable } from "../../../lib/product-utils";
+import PriceInventoryTab from "./tabs/PriceInventoryTab";
+import ModifiersTab from "./tabs/ModifiersTab";
 import LinkedTab from "./tabs/LinkedTab";
-import AttributesTab from "./tabs/AttributesTab";
-import VariationsTab from "./tabs/VariationsTab";
 import DownloadsTab from "./tabs/DownloadsTab";
-import AdvancedTab from "./tabs/AdvancedTab";
 
 /**
- * The "Product data" panel: type selector + vertical tabs.
- * Tab visibility follows the product type / virtual / downloadable flags.
+ * The "Product data" panel: vertical tabs. There is no product type, and nothing
+ * about a purchasable thing is split off into its own tab — Price & Inventory
+ * carries tax, the attributes, and a row per variant (or the product itself as
+ * its default variant), each row owning its price, stock and shipping.
  */
 export default function ProductDataPanel({ product, up, refs, variations, setVariations }) {
   const tabs = useMemo(() => {
-    const list = [];
-    if (!isGrouped(product)) list.push({ id: "general", label: "General" });
-    list.push({ id: "inventory", label: "Inventory" });
-    if (!product.virtual && !isExternal(product)) list.push({ id: "shipping", label: "Shipping" });
+    const list = [{ id: "price", label: "Price & Inventory" }, { id: "modifiers", label: "Modifiers" }];
+    if (product.downloadable) list.push({ id: "downloads", label: "Downloads" });
     list.push({ id: "linked", label: "Linked products" });
-    list.push({ id: "attributes", label: "Attributes" });
-    if (isVariable(product)) list.push({ id: "variations", label: "Variations" });
-    if (product.downloadable && !isGrouped(product) && !isExternal(product))
-      list.push({ id: "downloads", label: "Downloads" });
-    list.push({ id: "advanced", label: "Advanced" });
     return list;
   }, [product]);
 
-  const [active, setActive] = useState("general");
+  const [active, setActive] = useState("price");
   const activeTab = tabs.some((t) => t.id === active) ? active : tabs[0].id;
 
   return (
     <Card>
       <CardHeader className="flex-row items-center gap-4 space-y-0 border-b py-3">
         <span className="text-base font-semibold">Product data</span>
-        <Select value={product.type} onValueChange={(type) => up({ type })}>
-          <SelectTrigger className="h-8 w-52"><SelectValue /></SelectTrigger>
-          <SelectContent>
-            {PRODUCT_TYPES.map((t) => (
-              <SelectItem key={t.value} value={t.value}>{t.label}</SelectItem>
-            ))}
-          </SelectContent>
-        </Select>
-        {isSimple(product) && (
-          <div className="flex items-center gap-4 text-sm">
-            <label className="flex items-center gap-1.5">
-              <Checkbox
-                checked={product.virtual}
-                onCheckedChange={(v) => up({ virtual: Boolean(v) })}
-              />
-              Virtual
-            </label>
-            <label className="flex items-center gap-1.5">
-              <Checkbox
-                checked={product.downloadable}
-                onCheckedChange={(v) => up({ downloadable: Boolean(v) })}
-              />
-              Downloadable
-            </label>
-          </div>
-        )}
+        <div className="flex items-center gap-4 text-sm">
+          <label className="flex items-center gap-1.5">
+            <Checkbox
+              checked={product.virtual}
+              onCheckedChange={(v) => up({ virtual: Boolean(v) })}
+            />
+            Virtual
+          </label>
+          <label className="flex items-center gap-1.5">
+            <Checkbox
+              checked={product.downloadable}
+              onCheckedChange={(v) => up({ downloadable: Boolean(v) })}
+            />
+            Downloadable
+          </label>
+        </div>
       </CardHeader>
       <CardContent className="p-0">
         <div className="flex min-h-72 flex-col sm:flex-row">
@@ -97,18 +68,8 @@ export default function ProductDataPanel({ product, up, refs, variations, setVar
           </nav>
 
           <div className="min-w-0 flex-1 p-4">
-            {activeTab === "general" &&
-              (isExternal(product) ? (
-                <ExternalTab product={product} up={up} refs={refs} />
-              ) : (
-                <GeneralTab product={product} up={up} refs={refs} />
-              ))}
-            {activeTab === "inventory" && <InventoryTab product={product} up={up} />}
-            {activeTab === "shipping" && <ShippingTab product={product} up={up} refs={refs} />}
-            {activeTab === "linked" && <LinkedTab product={product} up={up} />}
-            {activeTab === "attributes" && <AttributesTab product={product} up={up} refs={refs} />}
-            {activeTab === "variations" && (
-              <VariationsTab
+            {activeTab === "price" && (
+              <PriceInventoryTab
                 product={product}
                 up={up}
                 refs={refs}
@@ -116,13 +77,16 @@ export default function ProductDataPanel({ product, up, refs, variations, setVar
                 setVariations={setVariations}
               />
             )}
+            {activeTab === "modifiers" && <ModifiersTab product={product} up={up} />}
             {activeTab === "downloads" && <DownloadsTab product={product} up={up} />}
-            {activeTab === "advanced" && <AdvancedTab product={product} up={up} />}
+            {activeTab === "linked" && <LinkedTab product={product} up={up} />}
           </div>
         </div>
         <Separator />
         <div className="px-4 py-2 text-xs text-muted-foreground">
-          Type: {PRODUCT_TYPES.find((t) => t.value === product.type)?.label}
+          {isVariable(product)
+            ? `${(product.attributes || []).length} variant attribute(s) · ${(variations || []).length} variant(s)`
+            : "No variants"}
           {product.virtual ? " · Virtual" : ""}
           {product.downloadable ? " · Downloadable" : ""}
         </div>

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

@@ -195,7 +195,7 @@ function TagsCard({ tags, selected, onChange, refresh }) {
     }
     setSaving(true);
     try {
-      const created = await base44.entities["commerce.ProductTag"].create({ name: label, slug: slugify(label) });
+      const created = await base44.entities["commerce.ProductTag"].create({ name: label, count: 0 });
       toast.success("Tag created");
       setNewTag("");
       await refresh?.();

package/src/commerce/admin/pages/products/components/tabs/LinkedTab.jsx

@@ -3,7 +3,6 @@ import { Label } from "@/components/ui/label";
 
 import { base44, call } from "../../../../lib/api";
 import SearchSelect from "../../../../components/SearchSelect";
-import { isGrouped } from "../../../../lib/product-utils";
 
 /** Search products server-side for the pickers. */
 const searchProducts = async (q) => {
@@ -60,22 +59,10 @@ function ProductIdsPicker({ ids, onChange, placeholder }) {
   );
 }
 
-/** Upsells, cross-sells and (for grouped products) child products. */
+/** Upsells and cross-sells. */
 export default function LinkedTab({ product, up }) {
   return (
     <div className="max-w-md space-y-4">
-      {isGrouped(product) && (
-        <div className="space-y-1.5">
-          <Label>Grouped products</Label>
-          <ProductIdsPicker
-            ids={product.grouped_products}
-            onChange={(grouped_products) => up({ grouped_products })}
-            placeholder="Search for products to group…"
-          />
-          <p className="text-xs text-muted-foreground">Products shown as part of this grouped product.</p>
-        </div>
-      )}
-
       <div className="space-y-1.5">
         <Label>Upsells</Label>
         <ProductIdsPicker

package/src/commerce/admin/pages/products/components/tabs/ModifiersTab.jsx

@@ -0,0 +1,19 @@
+import React from "react";
+
+import MetaDataEditor from "../../../../components/MetaDataEditor";
+
+/**
+ * Descriptive properties — Material, Care, GTIN. They are `meta_data`, never
+ * attributes: they don't create variants and never affect price or stock.
+ */
+export default function ModifiersTab({ product, up }) {
+  return (
+    <div className="max-w-xl space-y-2">
+      <p className="text-xs text-muted-foreground">
+        Shown as product details. They have no effect on price, stock or variants — what a product
+        varies by belongs in Attributes, under Price &amp; Inventory.
+      </p>
+      <MetaDataEditor value={product.meta_data || []} onChange={(meta_data) => up({ meta_data })} />
+    </div>
+  );
+}