@base44/app-plugin-commerce 0.1.0

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

@@ -0,0 +1,150 @@
+import React, { 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 { Loader2, Pencil, Tag as TagIcon, Trash2 } from "lucide-react";
+import { toast } from "sonner";
+
+import { base44 } from "../../lib/api";
+import useAsync from "../../hooks/useAsync";
+import PageHeader from "../../components/PageHeader";
+import DataTable from "../../components/DataTable";
+import ConfirmDialog from "../../components/ConfirmDialog";
+import { slugify } from "../../lib/product-utils";
+
+const BLANK = { id: null, name: "", slug: "", description: "" };
+
+export default function Tags() {
+  const { data: tags, loading, refetch } = useAsync(
+    () => base44.entities["commerce.ProductTag"].list("name", 1000),
+    []
+  );
+  const [form, setForm] = useState({ ...BLANK });
+  const [slugTouched, setSlugTouched] = useState(false);
+  const [saving, setSaving] = useState(false);
+  const [confirmDelete, setConfirmDelete] = useState(null);
+  const [deleting, setDeleting] = useState(false);
+
+  const setName = (name) => setForm((f) => ({ ...f, name, slug: slugTouched ? f.slug : slugify(name) }));
+  const reset = () => {
+    setForm({ ...BLANK });
+    setSlugTouched(false);
+  };
+  const edit = (t) => {
+    setForm({ id: t.id, name: t.name || "", slug: t.slug || "", description: t.description || "" });
+    setSlugTouched(true);
+  };
+
+  const save = async () => {
+    if (!form.name.trim()) {
+      toast.error("Name is required");
+      return;
+    }
+    setSaving(true);
+    try {
+      const payload = { name: form.name.trim(), slug: form.slug || slugify(form.name), description: form.description };
+      if (form.id) await base44.entities["commerce.ProductTag"].update(form.id, payload);
+      else await base44.entities["commerce.ProductTag"].create(payload);
+      toast.success(form.id ? "Tag updated" : "Tag created");
+      reset();
+      refetch();
+    } catch (e) {
+      toast.error(e.message || "Failed to save tag");
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const doDelete = async () => {
+    setDeleting(true);
+    try {
+      await base44.entities["commerce.ProductTag"].delete(confirmDelete.id);
+      toast.success("Tag deleted");
+      if (form.id === confirmDelete.id) reset();
+      setConfirmDelete(null);
+      refetch();
+    } catch (e) {
+      toast.error(e.message || "Failed to delete tag");
+    } finally {
+      setDeleting(false);
+    }
+  };
+
+  const columns = [
+    { key: "name", label: "Name", render: (row) => <span className="font-medium">{row.name}</span> },
+    { key: "slug", label: "Slug", className: "hidden md:table-cell text-muted-foreground" },
+    {
+      key: "description",
+      label: "Description",
+      className: "hidden lg:table-cell text-muted-foreground",
+      render: (row) => row.description || "—",
+    },
+  ];
+
+  return (
+    <div className="space-y-4">
+      <PageHeader title="Tags" description="Freeform labels for products" />
+      <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 tag" : "Add new tag"}</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)} />
+            </div>
+            <div className="space-y-1.5">
+              <Label>Slug</Label>
+              <Input
+                value={form.slug}
+                onChange={(e) => {
+                  setSlugTouched(true);
+                  setForm((f) => ({ ...f, slug: e.target.value }));
+                }}
+              />
+            </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 }))}
+              />
+            </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 tag"}
+              </Button>
+              {form.id && <Button variant="ghost" onClick={reset} disabled={saving}>Cancel</Button>}
+            </div>
+          </CardContent>
+        </Card>
+
+        <DataTable
+          columns={columns}
+          rows={tags || []}
+          loading={loading}
+          rowActions={(row) => [
+            { label: "Edit", icon: Pencil, onClick: () => edit(row) },
+            { label: "Delete", icon: Trash2, destructive: true, onClick: () => setConfirmDelete(row) },
+          ]}
+          empty={{ icon: TagIcon, title: "No tags yet", description: "Create your first tag." }}
+        />
+      </div>
+
+      <ConfirmDialog
+        open={Boolean(confirmDelete)}
+        onOpenChange={(o) => !o && setConfirmDelete(null)}
+        title={`Delete "${confirmDelete?.name}"?`}
+        description="Products with this tag are not deleted; they simply lose the tag."
+        confirmLabel="Delete"
+        onConfirm={doDelete}
+        loading={deleting}
+      />
+    </div>
+  );
+}

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

@@ -0,0 +1,132 @@
+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 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.
+ */
+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" });
+    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 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>
+        )}
+      </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 === "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
+                product={product}
+                up={up}
+                refs={refs}
+                variations={variations}
+                setVariations={setVariations}
+              />
+            )}
+            {activeTab === "downloads" && <DownloadsTab product={product} up={up} />}
+            {activeTab === "advanced" && <AdvancedTab 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}
+          {product.virtual ? " · Virtual" : ""}
+          {product.downloadable ? " · Downloadable" : ""}
+        </div>
+      </CardContent>
+    </Card>
+  );
+}

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

@@ -0,0 +1,101 @@
+import React, { useState } from "react";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { Label } from "@/components/ui/label";
+import { Checkbox } from "@/components/ui/checkbox";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Loader2, Save, Trash2 } from "lucide-react";
+
+import ConfirmDialog from "../../../components/ConfirmDialog";
+import { PRODUCT_STATUSES, CATALOG_VISIBILITIES } from "../../../lib/constants";
+
+/**
+ * Product editor "Publish" sidebar box.
+ * Props: { product, up, onSave, onDelete (null hides delete), saving, dirty }
+ */
+export default function PublishBox({ product, up, onSave, onDelete, saving, dirty }) {
+  const [confirm, setConfirm] = useState(false);
+  const [deleting, setDeleting] = useState(false);
+
+  const doDelete = async () => {
+    setDeleting(true);
+    try {
+      await onDelete();
+      setConfirm(false);
+    } finally {
+      setDeleting(false);
+    }
+  };
+
+  return (
+    <Card>
+      <CardHeader className="pb-2">
+        <CardTitle className="text-base">Publish</CardTitle>
+      </CardHeader>
+      <CardContent className="space-y-3">
+        <div className="space-y-1.5">
+          <Label>Status</Label>
+          <Select value={product.status || "draft"} onValueChange={(v) => up({ status: v })}>
+            <SelectTrigger><SelectValue /></SelectTrigger>
+            <SelectContent>
+              {PRODUCT_STATUSES.map((s) => (
+                <SelectItem key={s.value} value={s.value}>{s.label}</SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </div>
+
+        <div className="space-y-1.5">
+          <Label>Catalog visibility</Label>
+          <Select
+            value={product.catalog_visibility || "visible"}
+            onValueChange={(v) => up({ catalog_visibility: v })}
+          >
+            <SelectTrigger><SelectValue /></SelectTrigger>
+            <SelectContent>
+              {CATALOG_VISIBILITIES.map((v) => (
+                <SelectItem key={v.value} value={v.value}>{v.label}</SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </div>
+
+        <label className="flex cursor-pointer items-center gap-2 text-sm">
+          <Checkbox
+            checked={Boolean(product.featured)}
+            onCheckedChange={(c) => up({ featured: Boolean(c) })}
+          />
+          Featured product
+        </label>
+
+        <div className="flex items-center gap-2 pt-1">
+          <Button onClick={onSave} disabled={saving || !dirty} className="flex-1">
+            {saving ? <Loader2 className="mr-2 h-4 w-4 animate-spin" /> : <Save className="mr-2 h-4 w-4" />}
+            Save
+          </Button>
+          {onDelete && (
+            <Button variant="outline" size="icon" onClick={() => setConfirm(true)} title="Delete product">
+              <Trash2 className="h-4 w-4 text-destructive" />
+            </Button>
+          )}
+        </div>
+      </CardContent>
+
+      <ConfirmDialog
+        open={confirm}
+        onOpenChange={(o) => !o && setConfirm(false)}
+        title="Delete this product?"
+        description="This permanently deletes the product and its variations."
+        confirmLabel="Delete"
+        onConfirm={doDelete}
+        loading={deleting}
+      />
+    </Card>
+  );
+}

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

@@ -0,0 +1,243 @@
+import React, { useMemo, useState } from "react";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Input } from "@/components/ui/input";
+import { Button } from "@/components/ui/button";
+import { Label } from "@/components/ui/label";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Loader2, Plus } from "lucide-react";
+import { toast } from "sonner";
+
+import { base44 } from "../../../lib/api";
+import SearchSelect from "../../../components/SearchSelect";
+import { slugify } from "../../../lib/product-utils";
+
+const NO_PARENT = "__none__";
+
+/**
+ * Product editor sidebar panel: categories (hierarchical checkboxes + quick-add)
+ * and tags (multi-select + create-on-enter).
+ *
+ * Props: { product, up, refs } where refs = { categories, tags, refreshCategories, refreshTags }
+ */
+export default function TaxonomyPanel({ product, up, refs }) {
+  const categories = refs?.categories || [];
+  const tags = refs?.tags || [];
+
+  return (
+    <>
+      <CategoriesCard
+        categories={categories}
+        selected={product.category_ids || []}
+        onChange={(ids) => up({ category_ids: ids })}
+        refresh={refs?.refreshCategories}
+      />
+      <TagsCard
+        tags={tags}
+        selected={product.tag_ids || []}
+        onChange={(ids) => up({ tag_ids: ids })}
+        refresh={refs?.refreshTags}
+      />
+    </>
+  );
+}
+
+function CategoriesCard({ categories, selected, onChange, refresh }) {
+  const [adding, setAdding] = useState(false);
+  const [name, setName] = useState("");
+  const [parent, setParent] = useState(NO_PARENT);
+  const [saving, setSaving] = useState(false);
+
+  // Build a parent → children tree for indented rendering.
+  const tree = useMemo(() => {
+    const byParent = new Map();
+    for (const c of categories) {
+      const key = c.parent_id || "";
+      if (!byParent.has(key)) byParent.set(key, []);
+      byParent.get(key).push(c);
+    }
+    for (const list of byParent.values()) list.sort((a, b) => (a.name || "").localeCompare(b.name || ""));
+    const rows = [];
+    const walk = (parentId, depth) => {
+      for (const c of byParent.get(parentId) || []) {
+        rows.push({ ...c, depth });
+        walk(c.id, depth + 1);
+      }
+    };
+    walk("", 0);
+    return rows;
+  }, [categories]);
+
+  const toggle = (id) =>
+    onChange(selected.includes(id) ? selected.filter((x) => x !== id) : [...selected, id]);
+
+  const create = async () => {
+    if (!name.trim()) return;
+    setSaving(true);
+    try {
+      const created = await base44.entities["commerce.ProductCategory"].create({
+        name: name.trim(),
+        slug: slugify(name),
+        parent_id: parent === NO_PARENT ? "" : parent,
+      });
+      toast.success("Category created");
+      setName("");
+      setParent(NO_PARENT);
+      setAdding(false);
+      await refresh?.();
+      if (created?.id) onChange([...selected, created.id]);
+    } catch (e) {
+      toast.error(e.message || "Failed to create category");
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  return (
+    <Card>
+      <CardHeader className="pb-2">
+        <CardTitle className="text-base">Categories</CardTitle>
+      </CardHeader>
+      <CardContent className="space-y-2">
+        {tree.length > 0 ? (
+          <ScrollArea className="h-48 rounded-md border p-2">
+            <div className="space-y-1">
+              {tree.map((c) => (
+                <label
+                  key={c.id}
+                  className="flex cursor-pointer items-center gap-2 text-sm"
+                  style={{ paddingLeft: `${c.depth * 16}px` }}
+                >
+                  <Checkbox checked={selected.includes(c.id)} onCheckedChange={() => toggle(c.id)} />
+                  <span className="truncate">{c.name}</span>
+                </label>
+              ))}
+            </div>
+          </ScrollArea>
+        ) : (
+          <p className="text-sm text-muted-foreground">No categories yet.</p>
+        )}
+
+        {adding ? (
+          <div className="space-y-2 rounded-md border p-2">
+            <div className="space-y-1">
+              <Label className="text-xs">Name</Label>
+              <Input value={name} onChange={(e) => setName(e.target.value)} placeholder="Category name" />
+            </div>
+            <div className="space-y-1">
+              <Label className="text-xs">Parent</Label>
+              <Select value={parent} onValueChange={setParent}>
+                <SelectTrigger><SelectValue /></SelectTrigger>
+                <SelectContent>
+                  <SelectItem value={NO_PARENT}>— None —</SelectItem>
+                  {categories.map((c) => (
+                    <SelectItem key={c.id} value={c.id}>{c.name}</SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+            <div className="flex gap-2">
+              <Button size="sm" onClick={create} disabled={saving || !name.trim()}>
+                {saving && <Loader2 className="mr-2 h-3 w-3 animate-spin" />}Add
+              </Button>
+              <Button size="sm" variant="ghost" onClick={() => setAdding(false)} disabled={saving}>
+                Cancel
+              </Button>
+            </div>
+          </div>
+        ) : (
+          <Button variant="link" size="sm" className="h-auto p-0 text-xs" onClick={() => setAdding(true)}>
+            <Plus className="mr-1 h-3 w-3" /> Add new category
+          </Button>
+        )}
+      </CardContent>
+    </Card>
+  );
+}
+
+function TagsCard({ tags, selected, onChange, refresh }) {
+  const [newTag, setNewTag] = useState("");
+  const [saving, setSaving] = useState(false);
+
+  const value = useMemo(
+    () =>
+      selected
+        .map((id) => {
+          const t = tags.find((x) => x.id === id);
+          return t ? { value: t.id, label: t.name } : null;
+        })
+        .filter(Boolean),
+    [selected, tags]
+  );
+
+  const search = async (q) =>
+    tags
+      .filter((t) => !q || (t.name || "").toLowerCase().includes(q.toLowerCase()))
+      .slice(0, 30)
+      .map((t) => ({ value: t.id, label: t.name }));
+
+  const createTag = async () => {
+    const label = newTag.trim();
+    if (!label) return;
+    // Reuse an existing tag with the same name if present.
+    const existing = tags.find((t) => (t.name || "").toLowerCase() === label.toLowerCase());
+    if (existing) {
+      if (!selected.includes(existing.id)) onChange([...selected, existing.id]);
+      setNewTag("");
+      return;
+    }
+    setSaving(true);
+    try {
+      const created = await base44.entities["commerce.ProductTag"].create({ name: label, slug: slugify(label) });
+      toast.success("Tag created");
+      setNewTag("");
+      await refresh?.();
+      if (created?.id) onChange([...selected, created.id]);
+    } catch (e) {
+      toast.error(e.message || "Failed to create tag");
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  return (
+    <Card>
+      <CardHeader className="pb-2">
+        <CardTitle className="text-base">Tags</CardTitle>
+      </CardHeader>
+      <CardContent className="space-y-2">
+        <SearchSelect
+          multiple
+          placeholder="Select tags"
+          value={value}
+          onChange={(next) => onChange(next.map((o) => o.value))}
+          search={search}
+        />
+        <div className="flex gap-2">
+          <Input
+            value={newTag}
+            onChange={(e) => setNewTag(e.target.value)}
+            onKeyDown={(e) => {
+              if (e.key === "Enter") {
+                e.preventDefault();
+                createTag();
+              }
+            }}
+            placeholder="Add new tag"
+            className="h-8 text-sm"
+          />
+          <Button size="sm" variant="outline" onClick={createTag} disabled={saving || !newTag.trim()}>
+            {saving ? <Loader2 className="h-3 w-3 animate-spin" /> : "Add"}
+          </Button>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}

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

@@ -0,0 +1,48 @@
+import React from "react";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Switch } from "@/components/ui/switch";
+import { Textarea } from "@/components/ui/textarea";
+
+import MetaDataEditor from "../../../../components/MetaDataEditor";
+
+/** Purchase note, menu order, reviews toggle and custom meta data. */
+export default function AdvancedTab({ product, up }) {
+  return (
+    <div className="max-w-xl space-y-4">
+      <div className="space-y-1.5">
+        <Label>Purchase note</Label>
+        <Textarea
+          rows={3}
+          placeholder="Optional note sent to the customer after purchase"
+          value={product.purchase_note || ""}
+          onChange={(e) => up({ purchase_note: e.target.value })}
+        />
+      </div>
+
+      <div className="space-y-1.5">
+        <Label>Menu order</Label>
+        <Input
+          type="number"
+          className="w-32"
+          value={product.menu_order ?? 0}
+          onChange={(e) => up({ menu_order: e.target.value === "" ? 0 : Number(e.target.value) })}
+        />
+        <p className="text-xs text-muted-foreground">Custom ordering position (lower shows first).</p>
+      </div>
+
+      <div className="flex items-center gap-2">
+        <Switch
+          checked={product.reviews_allowed !== false}
+          onCheckedChange={(v) => up({ reviews_allowed: Boolean(v) })}
+        />
+        <Label>Enable reviews</Label>
+      </div>
+
+      <div className="space-y-1.5">
+        <Label>Custom fields</Label>
+        <MetaDataEditor value={product.meta_data || []} onChange={(meta_data) => up({ meta_data })} />
+      </div>
+    </div>
+  );
+}