@base44/app-plugin-commerce 0.1.3 → 0.1.5

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

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

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

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

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

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

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

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