@base44/app-plugin-commerce 0.1.0

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

@@ -0,0 +1,208 @@
+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 { Badge } from "@/components/ui/badge";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Card } from "@/components/ui/card";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Globe, Plus, Trash2 } from "lucide-react";
+
+import { base44 } from "../../../../lib/api";
+import SearchSelect from "../../../../components/SearchSelect";
+import { isVariable } from "../../../../lib/product-utils";
+
+const CUSTOM = "__custom__";
+
+/**
+ * Assign global attributes (with term multi-select) or ad-hoc custom
+ * attributes ("Red | Blue | Green"). `variation: true` rows drive the
+ * Variations tab for variable products.
+ */
+export default function AttributesTab({ product, up, refs }) {
+  const globalAttributes = refs.attributes || [];
+  const attributes = product.attributes || [];
+  const [addValue, setAddValue] = useState("");
+  const [termsCache, setTermsCache] = useState({}); // attribute_id -> [{id, name}]
+
+  // Load terms for every global attribute in use.
+  useEffect(() => {
+    const wanted = attributes.map((a) => a.attribute_id).filter(Boolean);
+    const missing = wanted.filter((id) => !termsCache[id]);
+    if (!missing.length) return;
+    let cancelled = false;
+    Promise.all(
+      missing.map((id) =>
+        base44.entities["commerce.ProductAttributeTerm"].filter({ attribute_id: id }, "menu_order", 500)
+          .then((terms) => [id, terms || []])
+          .catch(() => [id, []])
+      )
+    ).then((entries) => {
+      if (!cancelled) setTermsCache((c) => ({ ...c, ...Object.fromEntries(entries) }));
+    });
+    return () => {
+      cancelled = true;
+    };
+    // eslint-disable-next-line -- deps intentionally partial
+  }, [JSON.stringify(attributes.map((a) => a.attribute_id))]);
+
+  const setRow = (index, patch) => {
+    const next = attributes.map((a, i) => (i === index ? { ...a, ...patch } : a));
+    up({ attributes: next });
+  };
+
+  const removeRow = (index) => {
+    up({ attributes: attributes.filter((_, i) => i !== index) });
+  };
+
+  const addAttribute = () => {
+    if (!addValue) return;
+    if (addValue === CUSTOM) {
+      up({
+        attributes: [
+          ...attributes,
+          { attribute_id: "", name: "", position: attributes.length, visible: true, variation: false, options: [] },
+        ],
+      });
+    } else {
+      const attr = globalAttributes.find((a) => a.id === addValue);
+      if (!attr || attributes.some((a) => a.attribute_id === attr.id)) return;
+      up({
+        attributes: [
+          ...attributes,
+          {
+            attribute_id: attr.id,
+            name: attr.name,
+            position: attributes.length,
+            visible: true,
+            variation: false,
+            options: [],
+          },
+        ],
+      });
+    }
+    setAddValue("");
+  };
+
+  return (
+    <div className="space-y-4">
+      <div className="flex items-end gap-2">
+        <div className="space-y-1.5">
+          <Label>Add attribute</Label>
+          <Select value={addValue} onValueChange={setAddValue}>
+            <SelectTrigger className="w-64">
+              <SelectValue placeholder="Select an attribute…" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value={CUSTOM}>Custom product attribute</SelectItem>
+              {globalAttributes
+                .filter((a) => !attributes.some((row) => row.attribute_id === a.id))
+                .map((a) => (
+                  <SelectItem key={a.id} value={a.id}>{a.name}</SelectItem>
+                ))}
+            </SelectContent>
+          </Select>
+        </div>
+        <Button type="button" variant="outline" onClick={addAttribute} disabled={!addValue}>
+          <Plus className="mr-1 h-4 w-4" /> Add
+        </Button>
+      </div>
+
+      {attributes.length === 0 && (
+        <p className="text-sm text-muted-foreground">
+          No attributes yet. Attributes describe the product (e.g. Color, Size) and can power variations.
+        </p>
+      )}
+
+      <div className="space-y-3">
+        {attributes.map((row, i) => {
+          const isGlobal = Boolean(row.attribute_id);
+          const terms = termsCache[row.attribute_id] || [];
+          return (
+            <Card key={`${row.attribute_id || "custom"}-${i}`} className="p-3">
+              <div className="flex items-start justify-between gap-2">
+                <div className="min-w-0 flex-1 space-y-3">
+                  <div className="flex items-center gap-2">
+                    {isGlobal ? (
+                      <>
+                        <span className="font-medium">{row.name}</span>
+                        <Badge variant="secondary" className="gap-1">
+                          <Globe className="h-3 w-3" /> Global
+                        </Badge>
+                      </>
+                    ) : (
+                      <Input
+                        className="h-8 w-56"
+                        placeholder="Attribute name (e.g. Material)"
+                        value={row.name}
+                        onChange={(e) => setRow(i, { name: e.target.value })}
+                      />
+                    )}
+                  </div>
+
+                  {isGlobal ? (
+                    <SearchSelect
+                      multiple
+                      placeholder="Select terms…"
+                      value={(row.options || []).map((o) => ({ value: o, label: o }))}
+                      onChange={(next) => setRow(i, { options: next.map((o) => o.value) })}
+                      search={async (q) =>
+                        terms
+                          .filter((t) => !q || t.name.toLowerCase().includes(q.toLowerCase()))
+                          .map((t) => ({ value: t.name, label: t.name }))
+                      }
+                    />
+                  ) : (
+                    <div className="space-y-1">
+                      <Input
+                        placeholder="Values separated by | (e.g. Cotton | Wool | Silk)"
+                        value={(row.options || []).join(" | ")}
+                        onChange={(e) =>
+                          setRow(i, {
+                            options: e.target.value
+                              .split("|")
+                              .map((s) => s.trim())
+                              .filter(Boolean),
+                          })
+                        }
+                      />
+                      <p className="text-xs text-muted-foreground">Separate values with “|”.</p>
+                    </div>
+                  )}
+
+                  <div className="flex items-center gap-4 text-sm">
+                    <label className="flex items-center gap-1.5">
+                      <Checkbox
+                        checked={row.visible !== false}
+                        onCheckedChange={(v) => setRow(i, { visible: Boolean(v) })}
+                      />
+                      Visible on the product page
+                    </label>
+                    {isVariable(product) && (
+                      <label className="flex items-center gap-1.5">
+                        <Checkbox
+                          checked={Boolean(row.variation)}
+                          onCheckedChange={(v) => setRow(i, { variation: Boolean(v) })}
+                        />
+                        Used for variations
+                      </label>
+                    )}
+                  </div>
+                </div>
+                <Button type="button" variant="ghost" size="icon" onClick={() => removeRow(i)}>
+                  <Trash2 className="h-4 w-4 text-muted-foreground" />
+                </Button>
+              </div>
+            </Card>
+          );
+        })}
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,91 @@
+import React from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Plus, Trash2 } from "lucide-react";
+
+import MediaUploader from "../../../../components/MediaUploader";
+
+const num = (v, fallback) => (v === "" ? fallback : Number(v));
+
+/** Downloadable files, download limit and expiry. */
+export default function DownloadsTab({ product, up }) {
+  const downloads = product.downloads || [];
+
+  const setRow = (i, patch) =>
+    up({ downloads: downloads.map((d, j) => (j === i ? { ...d, ...patch } : d)) });
+
+  return (
+    <div className="max-w-xl space-y-4">
+      <div className="space-y-3">
+        <Label>Downloadable files</Label>
+        {downloads.map((d, i) => (
+          <div key={i} className="grid gap-2 rounded-md border p-3 sm:grid-cols-[1fr_1fr_auto]">
+            <div className="space-y-1.5">
+              <Label className="text-xs">Name</Label>
+              <Input
+                placeholder="e.g. User manual"
+                value={d.name || ""}
+                onChange={(e) => setRow(i, { name: e.target.value })}
+              />
+            </div>
+            <div className="space-y-1.5">
+              <Label className="text-xs">File</Label>
+              {d.file_url ? (
+                <div className="flex items-center gap-2">
+                  <Input value={d.file_url} onChange={(e) => setRow(i, { file_url: e.target.value })} />
+                </div>
+              ) : (
+                <MediaUploader
+                  accept="*/*"
+                  label="Upload file"
+                  value={null}
+                  onChange={(img) => img && setRow(i, { file_url: img.src, name: d.name || img.name })}
+                />
+              )}
+            </div>
+            <div className="flex items-end">
+              <Button
+                type="button"
+                variant="ghost"
+                size="icon"
+                onClick={() => up({ downloads: downloads.filter((_, j) => j !== i) })}
+              >
+                <Trash2 className="h-4 w-4 text-muted-foreground" />
+              </Button>
+            </div>
+          </div>
+        ))}
+        <Button
+          type="button"
+          variant="outline"
+          size="sm"
+          onClick={() => up({ downloads: [...downloads, { name: "", file_url: "" }] })}
+        >
+          <Plus className="mr-1 h-4 w-4" /> Add file
+        </Button>
+      </div>
+
+      <div className="grid max-w-md grid-cols-2 gap-2">
+        <div className="space-y-1.5">
+          <Label>Download limit</Label>
+          <Input
+            type="number"
+            value={product.download_limit ?? -1}
+            onChange={(e) => up({ download_limit: num(e.target.value, -1) })}
+          />
+          <p className="text-xs text-muted-foreground">-1 for unlimited downloads.</p>
+        </div>
+        <div className="space-y-1.5">
+          <Label>Download expiry (days)</Label>
+          <Input
+            type="number"
+            value={product.download_expiry ?? -1}
+            onChange={(e) => up({ download_expiry: num(e.target.value, -1) })}
+          />
+          <p className="text-xs text-muted-foreground">-1 for no expiry.</p>
+        </div>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,41 @@
+import React from "react";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+
+import MoneyInput from "../../../../components/MoneyInput";
+
+/** External/affiliate product: outbound URL + button text + pricing. */
+export default function ExternalTab({ product, up }) {
+  return (
+    <div className="max-w-md space-y-4">
+      <div className="space-y-1.5">
+        <Label>Product URL</Label>
+        <Input
+          type="url"
+          placeholder="https://example.com/product"
+          value={product.external_url || ""}
+          onChange={(e) => up({ external_url: e.target.value })}
+        />
+        <p className="text-xs text-muted-foreground">Where customers are sent to buy this product.</p>
+      </div>
+      <div className="space-y-1.5">
+        <Label>Button text</Label>
+        <Input
+          placeholder="Buy product"
+          value={product.button_text || ""}
+          onChange={(e) => up({ button_text: e.target.value })}
+        />
+      </div>
+      <div className="grid grid-cols-2 gap-2">
+        <div className="space-y-1.5">
+          <Label>Regular price</Label>
+          <MoneyInput value={product.regular_price} onChange={(v) => up({ regular_price: v })} />
+        </div>
+        <div className="space-y-1.5">
+          <Label>Sale price</Label>
+          <MoneyInput value={product.sale_price} onChange={(v) => up({ sale_price: v })} />
+        </div>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,103 @@
+import React from "react";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Switch } from "@/components/ui/switch";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+
+import MoneyInput from "../../../../components/MoneyInput";
+import { TAX_STATUSES } from "../../../../lib/constants";
+import { isVariable } from "../../../../lib/product-utils";
+
+/** Convert an ISO datetime to the value a date input expects (yyyy-mm-dd). */
+const toDateInput = (iso) => (iso ? String(iso).slice(0, 10) : "");
+const fromDateInput = (v) => (v ? new Date(`${v}T00:00:00Z`).toISOString() : null);
+
+/** Pricing + tax. For variable products only tax fields apply (prices per variation). */
+export default function GeneralTab({ product, up, refs }) {
+  const scheduled = Boolean(product.date_on_sale_from || product.date_on_sale_to);
+  const taxClasses = refs.taxClasses || [];
+
+  return (
+    <div className="max-w-md space-y-4">
+      {isVariable(product) ? (
+        <p className="text-sm text-muted-foreground">
+          Prices for variable products are set per variation on the Variations tab.
+        </p>
+      ) : (
+        <>
+          <div className="space-y-1.5">
+            <Label>Regular price</Label>
+            <MoneyInput
+              value={product.regular_price}
+              onChange={(v) => up({ regular_price: v })}
+            />
+          </div>
+          <div className="space-y-1.5">
+            <Label>Sale price</Label>
+            <MoneyInput value={product.sale_price} onChange={(v) => up({ sale_price: v })} />
+          </div>
+          <div className="flex items-center gap-2">
+            <Switch
+              checked={scheduled}
+              onCheckedChange={(v) =>
+                up(v ? { date_on_sale_from: new Date().toISOString() } : { date_on_sale_from: null, date_on_sale_to: null })
+              }
+            />
+            <Label>Schedule sale</Label>
+          </div>
+          {scheduled && (
+            <div className="grid grid-cols-2 gap-2">
+              <div className="space-y-1.5">
+                <Label className="text-xs">Sale start</Label>
+                <Input
+                  type="date"
+                  value={toDateInput(product.date_on_sale_from)}
+                  onChange={(e) => up({ date_on_sale_from: fromDateInput(e.target.value) })}
+                />
+              </div>
+              <div className="space-y-1.5">
+                <Label className="text-xs">Sale end</Label>
+                <Input
+                  type="date"
+                  value={toDateInput(product.date_on_sale_to)}
+                  onChange={(e) => up({ date_on_sale_to: fromDateInput(e.target.value) })}
+                />
+              </div>
+            </div>
+          )}
+        </>
+      )}
+
+      <div className="grid grid-cols-2 gap-2">
+        <div className="space-y-1.5">
+          <Label>Tax status</Label>
+          <Select value={product.tax_status} onValueChange={(v) => up({ tax_status: v })}>
+            <SelectTrigger><SelectValue /></SelectTrigger>
+            <SelectContent>
+              {TAX_STATUSES.map((t) => (
+                <SelectItem key={t.value} value={t.value}>{t.label}</SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </div>
+        <div className="space-y-1.5">
+          <Label>Tax class</Label>
+          <Select value={product.tax_class || "standard"} onValueChange={(v) => up({ tax_class: v })}>
+            <SelectTrigger><SelectValue /></SelectTrigger>
+            <SelectContent>
+              {(taxClasses.length ? taxClasses : [{ slug: "standard", name: "Standard" }]).map((c) => (
+                <SelectItem key={c.slug} value={c.slug}>{c.name}</SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </div>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,93 @@
+import React from "react";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Switch } from "@/components/ui/switch";
+import { Checkbox } from "@/components/ui/checkbox";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+
+import { BACKORDER_OPTIONS, STOCK_STATUSES } from "../../../../lib/constants";
+
+const num = (v) => (v === "" ? null : Number(v));
+
+/** SKU + stock management. */
+export default function InventoryTab({ product, up }) {
+  return (
+    <div className="max-w-md space-y-4">
+      <div className="space-y-1.5">
+        <Label>SKU</Label>
+        <Input
+          placeholder="Unique stock keeping unit"
+          value={product.sku || ""}
+          onChange={(e) => up({ sku: e.target.value })}
+        />
+      </div>
+
+      <div className="flex items-center gap-2">
+        <Switch
+          checked={product.manage_stock}
+          onCheckedChange={(v) => up({ manage_stock: Boolean(v) })}
+        />
+        <Label>Track stock quantity for this product</Label>
+      </div>
+
+      {product.manage_stock ? (
+        <>
+          <div className="space-y-1.5">
+            <Label>Stock quantity</Label>
+            <Input
+              type="number"
+              value={product.stock_quantity ?? ""}
+              onChange={(e) => up({ stock_quantity: num(e.target.value) })}
+            />
+          </div>
+          <div className="space-y-1.5">
+            <Label>Allow backorders?</Label>
+            <Select value={product.backorders || "no"} onValueChange={(v) => up({ backorders: v })}>
+              <SelectTrigger><SelectValue /></SelectTrigger>
+              <SelectContent>
+                {BACKORDER_OPTIONS.map((o) => (
+                  <SelectItem key={o.value} value={o.value}>{o.label}</SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+          <div className="space-y-1.5">
+            <Label>Low stock threshold</Label>
+            <Input
+              type="number"
+              placeholder="Store default"
+              value={product.low_stock_amount ?? ""}
+              onChange={(e) => up({ low_stock_amount: num(e.target.value) })}
+            />
+          </div>
+        </>
+      ) : (
+        <div className="space-y-1.5">
+          <Label>Stock status</Label>
+          <Select value={product.stock_status || "instock"} onValueChange={(v) => up({ stock_status: v })}>
+            <SelectTrigger><SelectValue /></SelectTrigger>
+            <SelectContent>
+              {STOCK_STATUSES.map((s) => (
+                <SelectItem key={s.value} value={s.value}>{s.label}</SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </div>
+      )}
+
+      <label className="flex items-center gap-2 text-sm">
+        <Checkbox
+          checked={product.sold_individually}
+          onCheckedChange={(v) => up({ sold_individually: Boolean(v) })}
+        />
+        Limit purchases to 1 item per order
+      </label>
+    </div>
+  );
+}

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

@@ -0,0 +1,102 @@
+import React, { useEffect, useState } from "react";
+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) => {
+  const data = await call("admin-products", "search", { q: q || undefined, limit: 10 }, { silent: true });
+  const rows = data?.rows || data || [];
+  return rows.map((p) => ({ value: p.id, label: p.name, meta: p.sku || undefined }));
+};
+
+/**
+ * Multi product picker bound to an array of product ids.
+ * Resolves labels for pre-existing ids on mount.
+ */
+function ProductIdsPicker({ ids, onChange, placeholder }) {
+  const [options, setOptions] = useState(null); // [{value,label}]
+
+  useEffect(() => {
+    let cancelled = false;
+    const known = new Map((options || []).map((o) => [o.value, o]));
+    const missing = (ids || []).filter((id) => !known.has(id));
+    if (!missing.length) {
+      if (options === null) setOptions([]);
+      return;
+    }
+    Promise.all(
+      missing.map((id) =>
+        base44.entities["commerce.Product"].get(id)
+          .then((p) => ({ value: id, label: p?.name || "(deleted product)" }))
+          .catch(() => ({ value: id, label: "(deleted product)" }))
+      )
+    ).then((resolved) => {
+      if (!cancelled) setOptions([...(options || []), ...resolved]);
+    });
+    return () => {
+      cancelled = true;
+    };
+    // eslint-disable-next-line -- deps intentionally partial
+  }, [JSON.stringify(ids)]);
+
+  const value = (ids || []).map(
+    (id) => (options || []).find((o) => o.value === id) || { value: id, label: "…" }
+  );
+
+  return (
+    <SearchSelect
+      multiple
+      placeholder={placeholder}
+      search={searchProducts}
+      value={value}
+      onChange={(next) => {
+        setOptions(next);
+        onChange(next.map((o) => o.value));
+      }}
+    />
+  );
+}
+
+/** Upsells, cross-sells and (for grouped products) child products. */
+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
+          ids={product.upsell_ids}
+          onChange={(upsell_ids) => up({ upsell_ids })}
+          placeholder="Search for products to upsell…"
+        />
+        <p className="text-xs text-muted-foreground">
+          Recommended instead of this product, e.g. premium alternatives.
+        </p>
+      </div>
+
+      <div className="space-y-1.5">
+        <Label>Cross-sells</Label>
+        <ProductIdsPicker
+          ids={product.cross_sell_ids}
+          onChange={(cross_sell_ids) => up({ cross_sell_ids })}
+          placeholder="Search for products to cross-sell…"
+        />
+        <p className="text-xs text-muted-foreground">Promoted in the cart alongside this product.</p>
+      </div>
+    </div>
+  );
+}