@base44/app-plugin-commerce 0.1.6 → 0.1.8

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

@@ -1,232 +1,202 @@
-import React, { useMemo, useState } from "react";
+import React, { useEffect, useState } from "react";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
-import { Textarea } from "@/components/ui/textarea";
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select";
-import { FolderTree, ImageIcon, Loader2, Pencil, Trash2 } from "lucide-react";
+import { Card, CardContent } from "@/components/ui/card";
+import { FolderTree, Loader2, Plus, Trash2 } from "lucide-react";
 import { toast } from "sonner";
 
-import { base44 } from "../../lib/api";
+import { base44, call } from "../../lib/api";
 import useAsync from "../../hooks/useAsync";
 import PageHeader from "../../components/PageHeader";
-import DataTable from "../../components/DataTable";
 import ConfirmDialog from "../../components/ConfirmDialog";
-import MediaUploader from "../../components/MediaUploader";
-import { slugify } from "../../lib/product-utils";
-
-const NO_PARENT = "__none__";
-const BLANK = { id: null, name: "", slug: "", parent_id: "", description: "", image: null };
 
+/**
+ * Categories as an editable list of name / slug / order rows. `+ Add category`
+ * appends a fresh row, and each row can be removed (with a warning). Rows save
+ * on blur/Enter through admin-products `save-term`. A blank slug is derived
+ * from the name (and uniquified) server-side; a filled one is kept — which is
+ * why the row always sends the stored slug back: otherwise a rename would
+ * silently regenerate it and break storefront links.
+ */
 export default function Categories() {
   const { data: categories, loading, refetch } = useAsync(
     () => base44.entities["commerce.ProductCategory"].list("menu_order", 1000),
     []
   );
-  const [form, setForm] = useState({ ...BLANK });
-  const [slugTouched, setSlugTouched] = useState(false);
-  const [saving, setSaving] = useState(false);
+
+  // rows: saved categories + any unsaved new lines (id: null). description and
+  // parent_id ride along untouched — save-term writes them, so omitting them
+  // would wipe what's stored.
+  const [rows, setRows] = useState([]);
+  const [savingId, setSavingId] = useState(null);
   const [confirmDelete, setConfirmDelete] = useState(null);
   const [deleting, setDeleting] = useState(false);
 
-  const list = categories || [];
+  const fromCategory = (c) => ({
+    id: c.id,
+    name: c.name || "",
+    slug: c.slug || "",
+    menu_order: c.menu_order ?? 0,
+    description: c.description ?? "",
+    parent_id: c.parent_id ?? "",
+    saved: { name: c.name || "", slug: c.slug || "", menu_order: c.menu_order ?? 0 },
+  });
 
-  // Depth map for indented display.
-  const rows = useMemo(() => {
-    const byParent = new Map();
-    for (const c of list) {
-      const key = c.parent_id || "";
-      if (!byParent.has(key)) byParent.set(key, []);
-      byParent.get(key).push(c);
-    }
-    const out = [];
-    const walk = (parentId, depth) => {
-      for (const c of byParent.get(parentId) || []) {
-        out.push({ ...c, depth });
-        walk(c.id, depth + 1);
-      }
-    };
-    walk("", 0);
-    return out;
-  }, [list]);
-
-  const edit = (c) => {
-    setForm({
-      id: c.id,
-      name: c.name || "",
-      slug: c.slug || "",
-      parent_id: c.parent_id || "",
-      description: c.description || "",
-      image: c.image || null,
+  useEffect(() => {
+    setRows((prev) => {
+      const drafts = prev.filter((r) => !r.id);
+      return [...(categories || []).map(fromCategory), ...drafts];
     });
-    setSlugTouched(true);
-  };
-
-  const reset = () => {
-    setForm({ ...BLANK });
-    setSlugTouched(false);
-  };
+  }, [categories]);
 
-  const setName = (name) => {
-    setForm((f) => ({ ...f, name, slug: slugTouched ? f.slug : slugify(name) }));
-  };
+  const setField = (index, key, value) =>
+    setRows((prev) => prev.map((r, i) => (i === index ? { ...r, [key]: value } : r)));
 
-  const save = async () => {
-    if (!form.name.trim()) {
-      toast.error("Name is required");
+  const commit = async (index) => {
+    const row = rows[index];
+    const name = row.name.trim();
+    const slug = String(row.slug ?? "").trim();
+    const menuOrder = Number(row.menu_order) || 0;
+    if (!name) {
+      if (!row.id) setRows((prev) => prev.filter((_, i) => i !== index)); // abandoned empty line
       return;
     }
-    setSaving(true);
+    const dirty =
+      !row.id ||
+      name !== row.saved.name ||
+      slug !== row.saved.slug ||
+      menuOrder !== row.saved.menu_order;
+    if (!dirty) return;
+    setSavingId(row.id || `new-${index}`);
     try {
-      const payload = {
-        name: form.name.trim(),
-        slug: form.slug || slugify(form.name),
-        parent_id: form.parent_id === NO_PARENT ? "" : form.parent_id,
-        description: form.description,
-        image: form.image,
-      };
-      if (form.id) await base44.entities["commerce.ProductCategory"].update(form.id, payload);
-      else await base44.entities["commerce.ProductCategory"].create(payload);
-      toast.success(form.id ? "Category updated" : "Category created");
-      reset();
+      await call("admin-products", "save-term", {
+        taxonomy: "category",
+        term: {
+          ...(row.id ? { id: row.id } : {}),
+          name,
+          slug, // blank = derive from the name server-side
+          menu_order: menuOrder,
+          description: row.description,
+          parent_id: row.parent_id,
+        },
+      });
+      toast.success(row.id ? "Category saved" : "Category added");
       refetch();
-    } catch (e) {
-      toast.error(e.message || "Failed to save category");
+    } catch {
+      /* toast handled by call() */
     } finally {
-      setSaving(false);
+      setSavingId(null);
     }
   };
 
   const doDelete = async () => {
     setDeleting(true);
     try {
-      await base44.entities["commerce.ProductCategory"].delete(confirmDelete.id);
+      await call("admin-products", "delete-term", { taxonomy: "category", id: confirmDelete.id });
       toast.success("Category deleted");
-      if (form.id === confirmDelete.id) reset();
       setConfirmDelete(null);
       refetch();
-    } catch (e) {
-      toast.error(e.message || "Failed to delete category");
+    } catch {
+      /* toast handled by call() */
     } finally {
       setDeleting(false);
     }
   };
 
-  const columns = [
-    {
-      key: "image",
-      label: "",
-      className: "w-12",
-      render: (row) =>
-        row.image?.src ? (
-          <img src={row.image.src} alt="" className="h-9 w-9 rounded object-cover" />
-        ) : (
-          <div className="flex h-9 w-9 items-center justify-center rounded bg-muted">
-            <ImageIcon className="h-4 w-4 text-muted-foreground" />
-          </div>
-        ),
-    },
-    {
-      key: "name",
-      label: "Name",
-      render: (row) => (
-        <span style={{ paddingLeft: `${row.depth * 16}px` }} className="font-medium">
-          {row.depth > 0 && <span className="text-muted-foreground">— </span>}
-          {row.name}
-        </span>
-      ),
-    },
-    { key: "slug", label: "Slug", className: "hidden md:table-cell text-muted-foreground" },
-  ];
+  const removeRow = (index) => {
+    const row = rows[index];
+    if (!row.id) setRows((prev) => prev.filter((_, i) => i !== index)); // unsaved line — just drop it
+    else setConfirmDelete(row);
+  };
+
+  const blurOnEnter = (e) => {
+    if (e.key === "Enter") e.currentTarget.blur();
+  };
 
   return (
     <div className="space-y-4">
-      <PageHeader title="Categories" description="Organize products into a hierarchy" />
-      <div className="grid gap-4 lg:grid-cols-[340px_1fr]">
-        <Card className="h-fit">
-          <CardHeader className="pb-2">
-            <CardTitle className="text-base">{form.id ? "Edit category" : "Add new category"}</CardTitle>
-          </CardHeader>
-          <CardContent className="space-y-3">
-            <div className="space-y-1.5">
-              <Label>Name</Label>
-              <Input value={form.name} onChange={(e) => setName(e.target.value)} />
+      <PageHeader title="Categories" description="Organize products into categories" />
+
+      <Card className="max-w-3xl">
+        <CardContent className="space-y-2 py-4">
+          {loading && !rows.length && <Loader2 className="h-5 w-5 animate-spin text-muted-foreground" />}
+
+          {!loading && !rows.length && (
+            <div className="flex items-center gap-3 py-6 text-muted-foreground">
+              <FolderTree className="h-5 w-5" />
+              <span className="text-sm">No categories yet — add the first one below.</span>
             </div>
-            <div className="space-y-1.5">
-              <Label>Slug</Label>
+          )}
+
+          {rows.length > 0 && (
+            <div className="grid grid-cols-[1fr_1fr_5rem_2.25rem] items-center gap-2 px-1 text-xs font-medium uppercase tracking-wide text-muted-foreground">
+              <span>Name</span>
+              <span>Slug</span>
+              <span>Order</span>
+              <span />
+            </div>
+          )}
+
+          {rows.map((row, i) => (
+            <div key={row.id || `new-${i}`} className="grid grid-cols-[1fr_1fr_5rem_2.25rem] items-center gap-2">
               <Input
-                value={form.slug}
-                onChange={(e) => {
-                  setSlugTouched(true);
-                  setForm((f) => ({ ...f, slug: e.target.value }));
-                }}
+                autoFocus={!row.id && !row.name}
+                placeholder="Category name"
+                value={row.name}
+                onChange={(e) => setField(i, "name", e.target.value)}
+                onBlur={() => commit(i)}
+                onKeyDown={blurOnEnter}
               />
-            </div>
-            <div className="space-y-1.5">
-              <Label>Parent</Label>
-              <Select
-                value={form.parent_id || NO_PARENT}
-                onValueChange={(v) => setForm((f) => ({ ...f, parent_id: v === NO_PARENT ? "" : v }))}
-              >
-                <SelectTrigger><SelectValue /></SelectTrigger>
-                <SelectContent>
-                  <SelectItem value={NO_PARENT}>— None —</SelectItem>
-                  {list
-                    .filter((c) => c.id !== form.id)
-                    .map((c) => (
-                      <SelectItem key={c.id} value={c.id}>{c.name}</SelectItem>
-                    ))}
-                </SelectContent>
-              </Select>
-            </div>
-            <div className="space-y-1.5">
-              <Label>Description</Label>
-              <Textarea
-                rows={3}
-                value={form.description}
-                onChange={(e) => setForm((f) => ({ ...f, description: e.target.value }))}
+              <Input
+                placeholder="auto from name"
+                className="font-mono text-xs lowercase"
+                value={row.slug}
+                onChange={(e) => setField(i, "slug", e.target.value)}
+                onBlur={() => commit(i)}
+                onKeyDown={blurOnEnter}
               />
+              <Input
+                type="number"
+                className="text-right"
+                value={row.menu_order}
+                onChange={(e) => setField(i, "menu_order", e.target.value === "" ? 0 : Number(e.target.value))}
+                onBlur={() => commit(i)}
+                onKeyDown={blurOnEnter}
+              />
+              <span className="flex items-center justify-end">
+                {savingId === (row.id || `new-${i}`) ? (
+                  <Loader2 className="h-4 w-4 animate-spin text-muted-foreground" />
+                ) : (
+                  <Button type="button" variant="ghost" size="icon" onClick={() => removeRow(i)}>
+                    <Trash2 className="h-4 w-4 text-muted-foreground" />
+                  </Button>
+                )}
+              </span>
             </div>
-            <div className="space-y-1.5">
-              <Label>Image</Label>
-              <MediaUploader value={form.image} onChange={(img) => setForm((f) => ({ ...f, image: img }))} />
-            </div>
-            <div className="flex gap-2">
-              <Button onClick={save} disabled={saving}>
-                {saving && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
-                {form.id ? "Update" : "Add category"}
-              </Button>
-              {form.id && (
-                <Button variant="ghost" onClick={reset} disabled={saving}>Cancel</Button>
-              )}
-            </div>
-          </CardContent>
-        </Card>
-
-        <DataTable
-          columns={columns}
-          rows={rows}
-          loading={loading}
-          rowActions={(row) => [
-            { label: "Edit", icon: Pencil, onClick: () => edit(row) },
-            { label: "Delete", icon: Trash2, destructive: true, onClick: () => setConfirmDelete(row) },
-          ]}
-          empty={{ icon: FolderTree, title: "No categories yet", description: "Create your first category." }}
-        />
-      </div>
+          ))}
+
+          <Button
+            type="button"
+            variant="link"
+            size="sm"
+            className="h-auto p-0"
+            onClick={() =>
+              setRows((prev) => [
+                ...prev,
+                { id: null, name: "", slug: "", menu_order: 0, description: "", parent_id: "", saved: { name: "", slug: "", menu_order: 0 } },
+              ])
+            }
+          >
+            <Plus className="mr-1 h-3 w-3" /> Add category
+          </Button>
+        </CardContent>
+      </Card>
 
       <ConfirmDialog
         open={Boolean(confirmDelete)}
         onOpenChange={(o) => !o && setConfirmDelete(null)}
         title={`Delete "${confirmDelete?.name}"?`}
-        description="Products in this category are not deleted; they simply lose the category."
+        description="Products in this category are not deleted; they simply lose the category. This cannot be undone."
         confirmLabel="Delete"
         onConfirm={doDelete}
         loading={deleting}

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

@@ -21,7 +21,6 @@ const NEW_PRODUCT = {
   slug: "",
   status: "draft",
   featured: false,
-  catalog_visibility: "visible",
   description: "",
   short_description: "",
   sku: "",
@@ -35,7 +34,7 @@ const NEW_PRODUCT = {
   download_limit: -1,
   download_expiry: -1,
   tax_status: "taxable",
-  tax_class: "standard",
+  tax_group: "Products",
   manage_stock: false,
   stock_quantity: null,
   stock_status: "instock",
@@ -44,11 +43,10 @@ const NEW_PRODUCT = {
   sold_individually: false,
   weight: null,
   dimensions: { length: null, width: null, height: null },
-  shipping_class_id: "",
   upsell_ids: [],
   cross_sell_ids: [],
   category_ids: [],
-  tag_ids: [],
+  ribbon_ids: [],
   images: [],
   attributes: [],
   default_attributes: [],
@@ -72,16 +70,23 @@ export default function ProductEditor() {
     () => base44.entities["commerce.ProductCategory"].list(undefined, 1000),
     []
   );
-  const { data: tags, refetch: refreshTags } = useAsync(
-    () => base44.entities["commerce.ProductTag"].list(undefined, 1000),
+  const { data: ribbons, refetch: refreshRibbons } = useAsync(
+    () => base44.entities["commerce.ProductRibbon"].list(undefined, 1000),
     []
   );
   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), []);
+  // Tax groups are named per Shipping & Tax Location; the product picks by name.
+  const { data: locations } = useAsync(() => base44.entities["commerce.ShippingTaxLocation"].list("order", 500), []);
+  const taxGroups = useMemo(() => {
+    const names = new Set(["Products"]);
+    for (const loc of locations || []) {
+      for (const g of loc.tax_groups || []) if (g?.name) names.add(g.name);
+    }
+    return [...names];
+  }, [locations]);
 
   const load = useCallback(async () => {
     if (isNew) {
@@ -158,8 +163,8 @@ export default function ProductEditor() {
   }
 
   const refs = {
-    categories, tags, attributes, shippingClasses, taxClasses,
-    refreshCategories, refreshTags, refreshAttributes,
+    categories, ribbons, attributes, taxGroups,
+    refreshCategories, refreshRibbons, refreshAttributes,
   };
 
   return (
@@ -205,14 +210,6 @@ export default function ProductEditor() {
             </CardContent>
           </Card>
 
-          <ProductDataPanel
-            product={product}
-            up={up}
-            refs={refs}
-            variations={variations}
-            setVariations={setVariations}
-          />
-
           <Card>
             <CardHeader className="pb-2">
               <CardTitle className="text-base">Short description</CardTitle>
@@ -226,6 +223,14 @@ export default function ProductEditor() {
               />
             </CardContent>
           </Card>
+
+          <ProductDataPanel
+            product={product}
+            up={up}
+            refs={refs}
+            variations={variations}
+            setVariations={setVariations}
+          />
         </div>
 
         {/* Sidebar */}

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

@@ -17,10 +17,12 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select";
+import { Switch } from "@/components/ui/switch";
 import { Check, MessageSquare, Pencil, ShieldAlert, Star, Trash, Trash2 } from "lucide-react";
 import { toast } from "sonner";
 
 import { base44, call } from "../../lib/api";
+import { useSettings } from "../../context/SettingsContext";
 import usePagedList from "../../hooks/usePagedList";
 import PageHeader from "../../components/PageHeader";
 import DataTable from "../../components/DataTable";
@@ -170,7 +172,11 @@ export default function Reviews() {
 
   return (
     <div className="space-y-4">
-      <PageHeader title="Reviews" description="Moderate customer product reviews" />
+      <PageHeader
+        title="Reviews"
+        description="Moderate customer product reviews"
+        actions={<AutoApproveToggle />}
+      />
 
       <Tabs value={tab} onValueChange={(v) => { setTab(v); setSelected([]); }}>
         <TabsList>
@@ -253,3 +259,33 @@ export default function Reviews() {
     </div>
   );
 }
+
+/**
+ * The one server-enforced review setting: everything else (login-gating,
+ * verified-buyers-only, required ratings) is storefront policy — see
+ * .agents/skills/commerce/references/reviews.md.
+ */
+function AutoApproveToggle() {
+  const settings = useSettings();
+  const [saving, setSaving] = useState(false);
+  const enabled = !!settings?.get("products", "auto_approve_reviews", false);
+
+  const toggle = async (v) => {
+    setSaving(true);
+    try {
+      await settings.saveGroup("products", { ...(settings.settings?.products || {}), auto_approve_reviews: v });
+      toast.success(v ? "New reviews publish immediately" : "New reviews are held for moderation");
+    } catch (e) {
+      toast.error(e.message || "Failed to save");
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  return (
+    <label className="flex items-center gap-2 text-sm">
+      <span className="text-muted-foreground">Auto-approve new reviews</span>
+      <Switch checked={enabled} disabled={saving} onCheckedChange={toggle} />
+    </label>
+  );
+}

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

@@ -1,4 +1,4 @@
-import React, { useMemo, useState } from "react";
+import React from "react";
 import { Card, CardContent, CardHeader } from "@/components/ui/card";
 import { Checkbox } from "@/components/ui/checkbox";
 import { Separator } from "@/components/ui/separator";
@@ -10,21 +10,33 @@ import LinkedTab from "./tabs/LinkedTab";
 import DownloadsTab from "./tabs/DownloadsTab";
 
 /**
- * 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.
+ * The "Product data" panel: every section stacked one below the other — no
+ * side menu. There is no product type, and nothing about a purchasable thing
+ * is split off elsewhere — 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 = [{ 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" });
-    return list;
-  }, [product]);
-
-  const [active, setActive] = useState("price");
-  const activeTab = tabs.some((t) => t.id === active) ? active : tabs[0].id;
+  const sections = [
+    {
+      id: "price",
+      label: "Price & Inventory",
+      body: (
+        <PriceInventoryTab
+          product={product}
+          up={up}
+          refs={refs}
+          variations={variations}
+          setVariations={setVariations}
+        />
+      ),
+    },
+    { id: "modifiers", label: "Modifiers", body: <ModifiersTab product={product} up={up} /> },
+    ...(product.downloadable
+      ? [{ id: "downloads", label: "Downloads", body: <DownloadsTab product={product} up={up} /> }]
+      : []),
+    { id: "linked", label: "Linked products", body: <LinkedTab product={product} up={up} /> },
+  ];
 
   return (
     <Card>
@@ -48,39 +60,13 @@ export default function ProductDataPanel({ product, up, refs, variations, setVar
         </div>
       </CardHeader>
       <CardContent className="p-0">
-        <div className="flex min-h-72 flex-col sm:flex-row">
-          {/* Vertical tab nav */}
-          <nav className="flex shrink-0 flex-row gap-1 overflow-x-auto border-b bg-muted/40 p-2 sm:w-44 sm:flex-col sm:border-b-0 sm:border-r">
-            {tabs.map((t) => (
-              <button
-                key={t.id}
-                type="button"
-                onClick={() => setActive(t.id)}
-                className={`rounded-md px-3 py-2 text-left text-sm transition-colors ${
-                  activeTab === t.id
-                    ? "bg-background font-medium shadow-sm"
-                    : "text-muted-foreground hover:bg-background/60"
-                }`}
-              >
-                {t.label}
-              </button>
-            ))}
-          </nav>
-
-          <div className="min-w-0 flex-1 p-4">
-            {activeTab === "price" && (
-              <PriceInventoryTab
-                product={product}
-                up={up}
-                refs={refs}
-                variations={variations}
-                setVariations={setVariations}
-              />
-            )}
-            {activeTab === "modifiers" && <ModifiersTab product={product} up={up} />}
-            {activeTab === "downloads" && <DownloadsTab product={product} up={up} />}
-            {activeTab === "linked" && <LinkedTab product={product} up={up} />}
-          </div>
+        <div className="divide-y">
+          {sections.map((s) => (
+            <section key={s.id} className="p-4">
+              <h3 className="mb-3 text-sm font-semibold">{s.label}</h3>
+              {s.body}
+            </section>
+          ))}
         </div>
         <Separator />
         <div className="px-4 py-2 text-xs text-muted-foreground">