@base44/app-plugin-commerce 0.1.3 → 0.1.4

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

@@ -1,208 +0,0 @@
-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/ExternalTab.jsx

@@ -1,41 +0,0 @@
-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

@@ -1,103 +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 {
-  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

@@ -1,93 +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 { 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/ShippingTab.jsx

@@ -1,86 +0,0 @@
-import React from "react";
-import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select";
-
-import { useSettings } from "../../../../context/SettingsContext";
-
-const num = (v) => (v === "" ? null : Number(v));
-const NONE = "__none__";
-
-/** Weight, dimensions and shipping class. Hidden for virtual/external products. */
-export default function ShippingTab({ product, up, refs }) {
-  const settings = useSettings();
-  const weightUnit = settings?.get("products", "weight_unit", "kg");
-  const dimensionUnit = settings?.get("products", "dimension_unit", "cm");
-  const dims = product.dimensions || {};
-  const classes = refs.shippingClasses || [];
-
-  const setDim = (key, value) => up({ dimensions: { ...dims, [key]: num(value) } });
-
-  return (
-    <div className="max-w-md space-y-4">
-      <div className="space-y-1.5">
-        <Label>Weight ({weightUnit})</Label>
-        <Input
-          type="number"
-          step="any"
-          value={product.weight ?? ""}
-          onChange={(e) => up({ weight: num(e.target.value) })}
-        />
-      </div>
-
-      <div className="space-y-1.5">
-        <Label>Dimensions ({dimensionUnit})</Label>
-        <div className="grid grid-cols-3 gap-2">
-          <Input
-            type="number"
-            step="any"
-            placeholder="Length"
-            value={dims.length ?? ""}
-            onChange={(e) => setDim("length", e.target.value)}
-          />
-          <Input
-            type="number"
-            step="any"
-            placeholder="Width"
-            value={dims.width ?? ""}
-            onChange={(e) => setDim("width", e.target.value)}
-          />
-          <Input
-            type="number"
-            step="any"
-            placeholder="Height"
-            value={dims.height ?? ""}
-            onChange={(e) => setDim("height", e.target.value)}
-          />
-        </div>
-      </div>
-
-      <div className="space-y-1.5">
-        <Label>Shipping class</Label>
-        <Select
-          value={product.shipping_class_id || NONE}
-          onValueChange={(v) => up({ shipping_class_id: v === NONE ? "" : v })}
-        >
-          <SelectTrigger><SelectValue /></SelectTrigger>
-          <SelectContent>
-            <SelectItem value={NONE}>No shipping class</SelectItem>
-            {classes.map((c) => (
-              <SelectItem key={c.id} value={c.id}>{c.name}</SelectItem>
-            ))}
-          </SelectContent>
-        </Select>
-        <p className="text-xs text-muted-foreground">
-          Shipping classes are used by some shipping methods to group similar products.
-        </p>
-      </div>
-    </div>
-  );
-}