@base44/app-plugin-commerce 0.1.3 → 0.1.4

package/src/commerce/utils/shipping-promos.js

@@ -8,18 +8,21 @@
  * exactly when `min_amount`/coupon conditions hold, so anything the UI promises
  * outside these rules is a promise the checkout will not keep.
  *
- * `commerce.ShippingZone` and `commerce.ShippingZoneMethod` are public-read, so
- * the storefront can load them directly:
+ * **Zones are admin-only data.** `commerce.ShippingZone` and
+ * `commerce.ShippingZoneMethod` are `read: {role: "admin"}` like every entity, so
+ * a visitor cannot list them — these helpers run where the records are already in
+ * hand: a backend function, an admin screen, or a storefront action you add that
+ * projects the rules itself.
  *
  * ```js
- * const [zones, methods] = await Promise.all([
- *   base44.entities["commerce.ShippingZone"].list("order", 100),
- *   base44.entities["commerce.ShippingZoneMethod"].list(undefined, 200),
- * ]);
  * const rules = freeShippingRules(zones, methods);
  * // no rules → do not advertise free shipping anywhere.
  * ```
  *
+ * For the *live* answer on a real cart, use the cart view's
+ * `available_shipping_methods` after `set-shipping-address` — that is computed by
+ * the same engine and needs no extra exposure.
+ *
  * Framework-free and dependency-free. See
  * `skills/commerce/docs/api-storefront.md` for the surrounding rules.
  */

package/src/commerce/utils/variants.js

@@ -1,12 +1,12 @@
 /**
  * Variant selection helpers for the storefront product page.
  *
- * A variable product is defined on two levels: the parent's `attributes[]`
- * entries with `variation: true` are the *axes* (Size, Color), and each record
- * in `variations[]` is one combination of options on those axes. The product
- * page must therefore present **one control per axis** — never a flat list of
- * `Red-S`, `Red-M`, `Blue-S`, ... — and map the customer's selection onto a
- * variation itself: the cart API does no attribute matching, it takes a
+ * A product with variants is defined on two levels: the parent's `attributes[]`
+ * entries are the *axes* (Size, Color) — every attribute is one — and each
+ * record in `variations[]` is one combination of options on those axes. The
+ * product page must therefore present **one control per axis** — never a flat
+ * list of `Red-S`, `Red-M`, `Blue-S`, ... — and map the customer's selection
+ * onto a variation itself: the cart API does no attribute matching, it takes a
  * `variation_id`. These helpers own that mapping in both directions.
  *
  * Framework-free, dependency-free, no I/O — feed them the `{ product,
@@ -28,8 +28,9 @@ const PURCHASABLE_STOCK = new Set(["instock", "onbackorder"]);
 /**
  * Stable key for an attribute or a variation-attribute entry.
  *
- * Global attributes carry an `attribute_id`; custom (product-local) ones have
- * it empty, so an id-only key would collide across them — fall back to `name`.
+ * Attributes carry an `attribute_id`, but variation and `default_attributes`
+ * entries are written with a possibly-empty one, so fall back to `name` rather
+ * than keying every such entry to "".
  *
  * @param {{attribute_id?: string, name?: string}} attribute
  * @returns {string}
@@ -39,16 +40,15 @@ export function attributeKey(attribute) {
 }
 
 /**
- * The product's variation axes: `attributes` with `variation: true`, ordered by
- * `position`. These — and only these — become selectors on the product page;
- * `visible: true` non-variation attributes belong in a spec table.
+ * The product's variation axes: every `attributes` entry, ordered by `position`.
+ * These become the selectors on the product page. Descriptive properties are not
+ * attributes — they are `meta_data` entries and belong in a spec table.
  *
  * @param {object} product
- * @returns {Array<object>} the matching `product.attributes` entries
+ * @returns {Array<object>} the `product.attributes` entries
  */
 export function variationAxes(product) {
   return (product?.attributes ?? [])
-    .filter((a) => a?.variation)
     .slice()
     .sort((a, b) => (a.position ?? 0) - (b.position ?? 0));
 }
@@ -246,9 +246,8 @@ export function defaultSelection(product, variations) {
 
 /**
  * Price range across the variations still reachable from `selection` (all of
- * them by default). Use this for a variable product's headline price: the
- * backend rolls stock up to the parent but **not** price, so `product.price`
- * is not a variable product's price.
+ * them by default). Use this for the headline price: the parent's `price` is
+ * rolled up from the *cheapest* variant, so it is a from-price, not the range.
  *
  * @returns {{min: number, max: number, on_sale: boolean, count: number}|null} `null` when nothing is priced
  */
@@ -317,10 +316,11 @@ export function displayFields(product, variation) {
  * // on a click: selection = selectOption(product, variations, selection, axisKey, option)
  * ```
  *
- * Branches on `product.type`, not on `variations` (pass `[]` for a simple
- * product). A `variable` product never falls back to the parent, so one with no
- * usable variations yields empty `axes[].options`, `purchasable: false` and
- * `addToCart: null` — render it unavailable and guard the "select a …" label.
+ * Branches on whether the product has attributes, not on `variations` (pass `[]`
+ * for a product without them). A product with axes never falls back to the
+ * parent, so one with no usable variations yields empty `axes[].options`,
+ * `purchasable: false` and `addToCart: null` — render it unavailable and guard
+ * the "select a …" label.
  *
  * @returns {{
  *   isVariable: boolean, axes: Array<object>, selection: Record<string, string>,
@@ -332,7 +332,7 @@ export function displayFields(product, variation) {
  * }}
  */
 export function resolveSelection(product, variations, selection = {}) {
-  const isVariable = (product?.type ?? "simple") === "variable";
+  const isVariable = variationAxes(product).length > 0;
   if (!isVariable) {
     const display = displayFields(product, null);
     return {

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

@@ -1,180 +0,0 @@
-import React, { useEffect, useState } from "react";
-import { useParams } from "react-router-dom";
-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 { List, Loader2, Pencil, Trash2 } from "lucide-react";
-import { toast } from "sonner";
-
-import { base44 } from "../../lib/api";
-import useAsync from "../../hooks/useAsync";
-import { useAdminHref } from "../../context/BasePathContext";
-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: "", menu_order: 0 });
-
-export default function AttributeTerms() {
-  const { id } = useParams();
-  const href = useAdminHref();
-
-  const { data: attribute } = useAsync(() => base44.entities["commerce.ProductAttribute"].get(id), [id]);
-  const { data: terms, loading, refetch } = useAsync(
-    () => base44.entities["commerce.ProductAttributeTerm"].filter({ attribute_id: id }, "menu_order", 1000),
-    [id]
-  );
-
-  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);
-
-  useEffect(() => {
-    setForm(blank());
-    setSlugTouched(false);
-  }, [id]);
-
-  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 || "",
-      menu_order: t.menu_order || 0,
-    });
-    setSlugTouched(true);
-  };
-
-  const save = async () => {
-    if (!form.name.trim()) {
-      toast.error("Name is required");
-      return;
-    }
-    setSaving(true);
-    try {
-      const payload = {
-        attribute_id: id,
-        name: form.name.trim(),
-        slug: form.slug || slugify(form.name),
-        description: form.description,
-        menu_order: Number(form.menu_order) || 0,
-      };
-      if (form.id) await base44.entities["commerce.ProductAttributeTerm"].update(form.id, payload);
-      else await base44.entities["commerce.ProductAttributeTerm"].create(payload);
-      toast.success(form.id ? "Term updated" : "Term created");
-      reset();
-      refetch();
-    } catch (e) {
-      toast.error(e.message || "Failed to save term");
-    } finally {
-      setSaving(false);
-    }
-  };
-
-  const doDelete = async () => {
-    setDeleting(true);
-    try {
-      await base44.entities["commerce.ProductAttributeTerm"].delete(confirmDelete.id);
-      toast.success("Term deleted");
-      if (form.id === confirmDelete.id) reset();
-      setConfirmDelete(null);
-      refetch();
-    } catch (e) {
-      toast.error(e.message || "Failed to delete term");
-    } 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: "menu_order", label: "Order", className: "hidden md:table-cell w-20" },
-  ];
-
-  return (
-    <div className="space-y-4">
-      <PageHeader
-        title={attribute ? `${attribute.name} — terms` : "Terms"}
-        description="Values for this attribute (e.g. Red, Blue, Green)"
-        backHref={href("products/attributes")}
-      />
-      <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 term" : "Add new term"}</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={2}
-                value={form.description}
-                onChange={(e) => setForm((f) => ({ ...f, description: e.target.value }))}
-              />
-            </div>
-            <div className="space-y-1.5">
-              <Label>Menu order</Label>
-              <Input
-                type="number"
-                value={form.menu_order}
-                onChange={(e) => setForm((f) => ({ ...f, menu_order: 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 term"}
-              </Button>
-              {form.id && <Button variant="ghost" onClick={reset} disabled={saving}>Cancel</Button>}
-            </div>
-          </CardContent>
-        </Card>
-
-        <DataTable
-          columns={columns}
-          rows={terms || []}
-          loading={loading}
-          rowActions={(row) => [
-            { label: "Edit", icon: Pencil, onClick: () => edit(row) },
-            { label: "Delete", icon: Trash2, destructive: true, onClick: () => setConfirmDelete(row) },
-          ]}
-          empty={{ icon: List, title: "No terms yet", description: "Add the first value for this attribute." }}
-        />
-      </div>
-
-      <ConfirmDialog
-        open={Boolean(confirmDelete)}
-        onOpenChange={(o) => !o && setConfirmDelete(null)}
-        title={`Delete "${confirmDelete?.name}"?`}
-        confirmLabel="Delete"
-        onConfirm={doDelete}
-        loading={deleting}
-      />
-    </div>
-  );
-}

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

@@ -1,183 +0,0 @@
-import React, { useState } from "react";
-import { useNavigate } from "react-router-dom";
-import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select";
-import { Layers, Loader2, Pencil, Settings2, Trash2 } from "lucide-react";
-import { toast } from "sonner";
-
-import { base44 } from "../../lib/api";
-import useAsync from "../../hooks/useAsync";
-import { useAdminHref } from "../../context/BasePathContext";
-import PageHeader from "../../components/PageHeader";
-import DataTable from "../../components/DataTable";
-import ConfirmDialog from "../../components/ConfirmDialog";
-import { slugify } from "../../lib/product-utils";
-
-const ORDER_BY = [
-  { value: "menu_order", label: "Custom ordering" },
-  { value: "name", label: "Name" },
-  { value: "name_num", label: "Name (numeric)" },
-  { value: "id", label: "Term ID" },
-];
-const BLANK = { id: null, name: "", slug: "", order_by: "menu_order" };
-
-export default function Attributes() {
-  const navigate = useNavigate();
-  const href = useAdminHref();
-  const { data: attributes, loading, refetch } = useAsync(
-    () => base44.entities["commerce.ProductAttribute"].list("name", 500),
-    []
-  );
-  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 = (a) => {
-    setForm({ id: a.id, name: a.name || "", slug: a.slug || "", order_by: a.order_by || "menu_order" });
-    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),
-        order_by: form.order_by,
-        type: "select",
-      };
-      if (form.id) await base44.entities["commerce.ProductAttribute"].update(form.id, payload);
-      else await base44.entities["commerce.ProductAttribute"].create(payload);
-      toast.success(form.id ? "Attribute updated" : "Attribute created");
-      reset();
-      refetch();
-    } catch (e) {
-      toast.error(e.message || "Failed to save attribute");
-    } finally {
-      setSaving(false);
-    }
-  };
-
-  const doDelete = async () => {
-    setDeleting(true);
-    try {
-      await base44.entities["commerce.ProductAttribute"].delete(confirmDelete.id);
-      toast.success("Attribute deleted");
-      if (form.id === confirmDelete.id) reset();
-      setConfirmDelete(null);
-      refetch();
-    } catch (e) {
-      toast.error(e.message || "Failed to delete attribute");
-    } 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: "terms",
-      label: "Terms",
-      render: (row) => (
-        <Button
-          variant="link"
-          size="sm"
-          className="h-auto p-0"
-          onClick={() => navigate(href(`products/attributes/${row.id}/terms`))}
-        >
-          <Settings2 className="mr-1 h-3.5 w-3.5" /> Configure terms
-        </Button>
-      ),
-    },
-  ];
-
-  return (
-    <div className="space-y-4">
-      <PageHeader title="Attributes" description="Reusable options such as Color or Size" />
-      <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 attribute" : "Add new attribute"}</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>Default sort order</Label>
-              <Select value={form.order_by} onValueChange={(v) => setForm((f) => ({ ...f, order_by: v }))}>
-                <SelectTrigger><SelectValue /></SelectTrigger>
-                <SelectContent>
-                  {ORDER_BY.map((o) => (
-                    <SelectItem key={o.value} value={o.value}>{o.label}</SelectItem>
-                  ))}
-                </SelectContent>
-              </Select>
-            </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 attribute"}
-              </Button>
-              {form.id && <Button variant="ghost" onClick={reset} disabled={saving}>Cancel</Button>}
-            </div>
-          </CardContent>
-        </Card>
-
-        <DataTable
-          columns={columns}
-          rows={attributes || []}
-          loading={loading}
-          rowActions={(row) => [
-            { label: "Edit", icon: Pencil, onClick: () => edit(row) },
-            { label: "Configure terms", icon: Settings2, onClick: () => navigate(href(`products/attributes/${row.id}/terms`)) },
-            { label: "Delete", icon: Trash2, destructive: true, onClick: () => setConfirmDelete(row) },
-          ]}
-          empty={{ icon: Layers, title: "No attributes yet", description: "Create an attribute like Color or Size." }}
-        />
-      </div>
-
-      <ConfirmDialog
-        open={Boolean(confirmDelete)}
-        onOpenChange={(o) => !o && setConfirmDelete(null)}
-        title={`Delete "${confirmDelete?.name}"?`}
-        description="This deletes the attribute and its terms. Products keep any custom attribute values already saved."
-        confirmLabel="Delete"
-        onConfirm={doDelete}
-        loading={deleting}
-      />
-    </div>
-  );
-}

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

@@ -1,150 +0,0 @@
-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/tabs/AdvancedTab.jsx

@@ -1,48 +0,0 @@
-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>
-  );
-}