@base44/app-plugin-commerce 0.1.3 → 0.1.4

package/src/commerce/admin/context/SettingsContext.jsx

@@ -155,8 +155,8 @@ function SetupScreen({ onDone }) {
               onChange={(e) => setStoreName(e.target.value)}
             />
             <p className="text-xs text-muted-foreground">
-              Shown to customers and used as the sender name on every transactional email.
-              Editable later in Settings → General.
+              Used in the subject and as the sender name on every transactional email.
+              Editable later in Settings → Emails.
             </p>
           </div>
           {hasProducts === false && (
@@ -171,8 +171,8 @@ function SetupScreen({ onDone }) {
                   Include sample data
                 </Label>
                 <p className="text-xs text-muted-foreground">
-                  Adds demo categories, products (simple, variable, downloadable,
-                  external, grouped) and coupons so you can explore the admin.
+                  Adds demo categories, 10 products (three with size/colour variants, one
+                  downloadable) and coupons so you can explore the admin.
                 </p>
               </div>
             </div>

package/src/commerce/admin/index.jsx

@@ -10,15 +10,15 @@ import { BasePathProvider } from "./context/BasePathContext";
  * The store admin application.
  *
  * Mount inside your app's router:
- *   <Route path="/admin/*" element={<AdminApp />} />
+ *   <Route path="/store-admin/*" element={<AdminApp />} />
  *
- * If mounted somewhere other than /admin, pass the prefix:
+ * If mounted somewhere other than /store-admin, pass the prefix:
  *   <Route path="/backoffice/*" element={<AdminApp basePath="/backoffice" />} />
  *
  * Requires an authenticated user with role "admin" (enforced by AuthGuard,
  * and independently by entity RLS + requireAdmin() in backend functions).
  */
-export default function AdminApp({ basePath = "/admin" }) {
+export default function AdminApp({ basePath = "/store-admin" }) {
   return (
     <BasePathProvider value={basePath}>
       <Toaster richColors position="top-right" />

package/src/commerce/admin/layout/Sidebar.jsx

@@ -10,7 +10,6 @@ import {
   ShoppingCart,
   Sparkles,
   Users,
-  Webhook,
 } from "lucide-react";
 import { call } from "../lib/api";
 import { useAdminHref } from "../context/BasePathContext";
@@ -30,8 +29,6 @@ const NAV = [
     items: [
       { label: "All Products", path: "products", end: true },
       { label: "Categories", path: "products/categories" },
-      { label: "Tags", path: "products/tags" },
-      { label: "Attributes", path: "products/attributes" },
       { label: "Reviews", path: "products/reviews" },
     ],
   },
@@ -43,11 +40,6 @@ const NAV = [
   {
     items: [{ label: "Settings", path: "settings", icon: Settings }],
   },
-  {
-    title: "Status",
-    icon: Webhook,
-    items: [{ label: "Webhooks", path: "webhooks" }],
-  },
 ];
 
 /** Left navigation. `onNavigate` closes the mobile sheet; `onOpenBot` opens the StoreAdmin bot panel. */
@@ -78,7 +70,7 @@ export default function Sidebar({ onNavigate, onOpenBot }) {
     <div className="flex h-full flex-col">
       <div className="flex h-14 items-center gap-2 border-b px-4">
         <Package className="h-5 w-5 text-primary" />
-        <span className="font-semibold">Store Admin</span>
+        <span className="font-semibold">Store Management</span>
       </div>
       <nav className="flex-1 space-y-4 overflow-y-auto p-3">
         {NAV.map((group, gi) => (

package/src/commerce/admin/lib/constants.js

@@ -17,13 +17,6 @@ export const PRODUCT_STATUSES = [
   { value: "publish", label: "Published", color: "bg-green-100 text-green-800 border-green-200" },
 ];
 
-export const PRODUCT_TYPES = [
-  { value: "simple", label: "Simple product" },
-  { value: "grouped", label: "Grouped product" },
-  { value: "external", label: "External/Affiliate product" },
-  { value: "variable", label: "Variable product" },
-];
-
 export const CATALOG_VISIBILITIES = [
   { value: "visible", label: "Shop and search results" },
   { value: "catalog", label: "Shop only" },

package/src/commerce/admin/lib/paths.js

@@ -1,16 +1,16 @@
 /**
  * Mount-path handling for the admin app.
  *
- * The admin is mounted with a splat route — `<Route path="/admin/*">` — and both
+ * The admin is mounted with a splat route — `<Route path="/store-admin/*">` — and both
  * halves of that pattern leak into places they shouldn't: the `basePath` prop
- * gets the pattern pasted in verbatim, and the literal URL `/admin/*` gets
+ * gets the pattern pasted in verbatim, and the literal URL `/store-admin/*` gets
  * opened (pattern copied into the address bar, or a nav link built from the
  * route table). Neither is a real page, so both are normalized here rather than
  * dead-ending the admin.
  */
 
-/** Strip a trailing route splat and slashes: "/admin/*" → "/admin". */
-export function normalizeBasePath(value, fallback = "/admin") {
+/** Strip a trailing route splat and slashes: "/store-admin/*" → "/store-admin". */
+export function normalizeBasePath(value, fallback = "/store-admin") {
   const clean = String(value ?? "")
     .replace(/\/+\*+$/, "")
     .replace(/\/+$/, "");
@@ -21,8 +21,8 @@ export function normalizeBasePath(value, fallback = "/admin") {
  * Is this leftover path (the `*` param of the catch-all route) nothing but
  * route-*pattern* segments — `*`, its percent-encoded form, or `:param`?
  *
- * `/admin/*` → true (send them to the dashboard)
- * `/admin/ordrs` → false (a genuine 404)
+ * `/store-admin/*` → true (send them to the dashboard)
+ * `/store-admin/ordrs` → false (a genuine 404)
  */
 export function isMountPatternPath(rest) {
   const segments = String(rest ?? "")

package/src/commerce/admin/lib/product-utils.js

@@ -9,20 +9,20 @@ export function slugify(name) {
     .replace(/^-+|-+$/g, "");
 }
 
-export const isSimple = (p) => p?.type === "simple";
-export const isGrouped = (p) => p?.type === "grouped";
-export const isExternal = (p) => p?.type === "external";
-export const isVariable = (p) => p?.type === "variable";
+/**
+ * A product sells variants because it carries attributes — every entry in
+ * `attributes[]` is a variant axis, so attaching one is the whole declaration.
+ * Descriptive properties are `meta_data` (modifiers), not attributes.
+ */
+export const isVariable = (p) => (p?.attributes ?? []).length > 0;
 
 /**
- * Cartesian product of all attributes flagged `variation: true`.
+ * Cartesian product of every attribute that has options.
  * Returns [{attributes: [{attribute_id, name, option}]}] — one entry per combo.
- * Returns [] when no variation attributes with options exist.
+ * Returns [] when no attribute has options yet.
  */
 export function generateVariationCombos(attributes) {
-  const varAttrs = (attributes || []).filter(
-    (a) => a.variation && (a.options || []).length > 0
-  );
+  const varAttrs = (attributes || []).filter((a) => (a.options || []).length > 0);
   if (!varAttrs.length) return [];
   const combos = varAttrs.reduce(
     (acc, attr) =>
@@ -44,12 +44,15 @@ export function variationLabel(variation) {
     .join(" / ") || "Any";
 }
 
+/** Order-independent identity of a variation's attribute combination. */
+export function comboKey(variation) {
+  return (variation?.attributes || [])
+    .map((x) => `${(x.name || "").toLowerCase()}=${(x.option || "").toLowerCase()}`)
+    .sort()
+    .join("|");
+}
+
 /** True when two variations have the same attribute combo. */
 export function sameCombo(a, b) {
-  const key = (v) =>
-    (v?.attributes || [])
-      .map((x) => `${(x.name || "").toLowerCase()}=${(x.option || "").toLowerCase()}`)
-      .sort()
-      .join("|");
-  return key(a) === key(b);
+  return comboKey(a) === comboKey(b);
 }

package/src/commerce/admin/pages/orders/components/AddProductDialog.jsx

@@ -20,11 +20,11 @@ import { Loader2 } from "lucide-react";
 
 import { call, base44 } from "../../../lib/api";
 import SearchSelect from "../../../components/SearchSelect";
-import { variationLabel } from "../../../lib/product-utils";
+import { isVariable, variationLabel } from "../../../lib/product-utils";
 
 /**
  * Two-step product picker for the order editor:
- * product search → (variable only) variation select → quantity.
+ * product search → (products with variants only) variant select → quantity.
  *
  * Props: { open, onOpenChange, onAdd({product, variation|null, quantity}) }
  */
@@ -50,7 +50,7 @@ export default function AddProductDialog({ open, onOpenChange, onAdd }) {
     return rows.map((p) => ({
       value: p.id,
       label: p.name,
-      meta: [p.sku && `SKU: ${p.sku}`, p.type].filter(Boolean).join(" · "),
+      meta: p.sku ? `SKU: ${p.sku}` : undefined,
       product: p,
     }));
   };
@@ -59,7 +59,7 @@ export default function AddProductDialog({ open, onOpenChange, onAdd }) {
     setPicked(opt);
     setVariations(null);
     setVariationId("");
-    if (opt?.product?.type === "variable") {
+    if (isVariable(opt?.product)) {
       setLoadingVariations(true);
       try {
         const rows = await base44.entities["commerce.ProductVariation"].filter({ product_id: opt.value }, "menu_order", 200);
@@ -70,11 +70,11 @@ export default function AddProductDialog({ open, onOpenChange, onAdd }) {
     }
   };
 
-  const isVariable = picked?.product?.type === "variable";
-  const canAdd = picked && quantity > 0 && (!isVariable || variationId);
+  const hasVariants = isVariable(picked?.product);
+  const canAdd = picked && quantity > 0 && (!hasVariants || variationId);
 
   const submit = () => {
-    const variation = isVariable ? (variations || []).find((v) => v.id === variationId) : null;
+    const variation = hasVariants ? (variations || []).find((v) => v.id === variationId) : null;
     onAdd({ product: picked.product, variation, quantity });
     onOpenChange(false);
   };
@@ -97,7 +97,7 @@ export default function AddProductDialog({ open, onOpenChange, onAdd }) {
             />
           </div>
 
-          {isVariable && (
+          {hasVariants && (
             <div className="grid gap-1.5">
               <Label>Variation</Label>
               {loadingVariations ? (

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

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

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

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