@base44/app-plugin-commerce 0.1.0

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

@@ -0,0 +1,239 @@
+import React, { useMemo, useState } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Checkbox } from "@/components/ui/checkbox";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import { Loader2 } from "lucide-react";
+import { toast } from "sonner";
+
+import { call } from "../../../lib/api";
+import useMoney from "../../../hooks/useMoney";
+import usePaymentProvider from "../../../hooks/usePaymentProvider";
+import { formatDate } from "../../../lib/format";
+import { refundableQty, refundableAmount, round2 } from "../../../lib/order-utils";
+
+/**
+ * Refund flow: per-line quantities/amounts, shipping amount, restock flag.
+ *
+ * Props: { order, refunds, onDone() }  — onDone refetches order + refunds.
+ */
+export default function RefundPanel({ order, refunds, onDone }) {
+  const { format } = useMoney();
+  const [rows, setRows] = useState({}); // line_id → {quantity, amount}
+  const [shippingAmount, setShippingAmount] = useState(0);
+  const [reason, setReason] = useState("");
+  const [restock, setRestock] = useState(true);
+  const [viaGateway, setViaGateway] = useState(false);
+  const [busy, setBusy] = useState(false);
+  const provider = usePaymentProvider();
+
+  const maxRefund = refundableAmount(order);
+  // Refunding through the provider is only possible when the order was actually
+  // paid online and a provider is connected — otherwise the money was taken
+  // outside the store and has to go back the same way.
+  const canRefundOnline = Boolean(
+    provider.connected && order.payment_method === provider.gatewaySlug && order.transaction_id,
+  );
+
+  const unitNet = (line) => (line.quantity ? (line.total || 0) / line.quantity : 0);
+
+  const setQty = (line, qty) => {
+    const capped = Math.max(0, Math.min(qty, refundableQty(order, refunds, line.line_id)));
+    setRows((r) => ({
+      ...r,
+      [line.line_id]: { quantity: capped, amount: round2(capped * unitNet(line)) },
+    }));
+  };
+
+  const setAmount = (line, amount) => {
+    setRows((r) => ({
+      ...r,
+      [line.line_id]: { quantity: r[line.line_id]?.quantity || 0, amount: Math.max(0, amount) },
+    }));
+  };
+
+  const lineItems = useMemo(
+    () =>
+      Object.entries(rows)
+        .filter(([, v]) => (v.quantity || 0) > 0 || (v.amount || 0) > 0)
+        .map(([line_id, v]) => {
+          const line = (order.line_items || []).find((l) => l.line_id === line_id);
+          return {
+            line_id,
+            product_id: line?.product_id,
+            variation_id: line?.variation_id,
+            quantity: v.quantity || 0,
+            refund_total: round2(v.amount || 0),
+          };
+        }),
+    [rows, order.line_items]
+  );
+
+  const total = round2(lineItems.reduce((s, l) => s + l.refund_total, 0) + (shippingAmount || 0));
+  const overMax = total > maxRefund;
+
+  const submit = async () => {
+    setBusy(true);
+    try {
+      const data = await call("admin-refunds", "create", {
+        order_id: order.id,
+        amount: total,
+        reason,
+        line_items: lineItems,
+        shipping_amount: shippingAmount || 0,
+        restock_items: restock,
+        refund_payment: canRefundOnline && viaGateway,
+      });
+      toast.success(
+        data?.gateway_refund
+          ? `Refunded ${format(total)} through the payment provider`
+          : `Refunded ${format(total)}`,
+      );
+      setRows({});
+      setShippingAmount(0);
+      setReason("");
+      onDone();
+    } catch {
+      /* toast handled by call() */
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  return (
+    <div className="space-y-4 rounded-lg border bg-muted/20 p-4">
+      <h3 className="text-sm font-semibold">Refund</h3>
+
+      <Table>
+        <TableHeader>
+          <TableRow>
+            <TableHead>Item</TableHead>
+            <TableHead className="w-24 text-right">Refunded</TableHead>
+            <TableHead className="w-24 text-right">Qty</TableHead>
+            <TableHead className="w-32 text-right">Amount</TableHead>
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          {(order.line_items || []).map((line) => {
+            const remaining = refundableQty(order, refunds, line.line_id);
+            const row = rows[line.line_id] || { quantity: 0, amount: 0 };
+            return (
+              <TableRow key={line.line_id}>
+                <TableCell className="text-sm">
+                  {line.name} <span className="text-muted-foreground">× {line.quantity}</span>
+                </TableCell>
+                <TableCell className="text-right text-xs text-muted-foreground">
+                  {line.quantity - remaining} / {line.quantity}
+                </TableCell>
+                <TableCell className="text-right">
+                  <Input
+                    type="number"
+                    min="0"
+                    max={remaining}
+                    disabled={remaining === 0}
+                    className="ml-auto h-8 w-16 text-right"
+                    value={row.quantity}
+                    onChange={(e) => setQty(line, parseInt(e.target.value, 10) || 0)}
+                  />
+                </TableCell>
+                <TableCell className="text-right">
+                  <Input
+                    type="number"
+                    step="any"
+                    min="0"
+                    className="ml-auto h-8 w-24 text-right"
+                    value={row.amount}
+                    onChange={(e) => setAmount(line, Number(e.target.value) || 0)}
+                  />
+                </TableCell>
+              </TableRow>
+            );
+          })}
+        </TableBody>
+      </Table>
+
+      <div className="grid grid-cols-1 gap-3 sm:grid-cols-3">
+        <div className="grid gap-1.5">
+          <Label className="text-xs">Refund shipping</Label>
+          <Input
+            type="number"
+            step="any"
+            min="0"
+            value={shippingAmount}
+            onChange={(e) => setShippingAmount(Number(e.target.value) || 0)}
+          />
+        </div>
+        <div className="grid gap-1.5 sm:col-span-2">
+          <Label className="text-xs">Reason for refund (optional)</Label>
+          <Input value={reason} onChange={(e) => setReason(e.target.value)} />
+        </div>
+      </div>
+
+      <div className="flex flex-wrap items-center gap-4">
+        <label className="flex items-center gap-2 text-sm">
+          <Checkbox checked={restock} onCheckedChange={(v) => setRestock(Boolean(v))} />
+          Restock refunded items
+        </label>
+        {order.payment_method === provider.gatewaySlug && (
+          <label
+            className={`flex items-center gap-2 text-sm ${canRefundOnline ? "" : "text-muted-foreground"}`}
+            title={
+              canRefundOnline
+                ? undefined
+                : provider.connected
+                  ? "This order has no online payment on record to refund"
+                  : "No payment provider connected"
+            }
+          >
+            <Checkbox
+              checked={canRefundOnline && viaGateway}
+              disabled={!canRefundOnline}
+              onCheckedChange={(v) => setViaGateway(Boolean(v))}
+            />
+            Send the money back through the payment provider
+          </label>
+        )}
+      </div>
+
+
+      <div className="flex items-center justify-between">
+        <p className="text-sm text-muted-foreground">
+          Total available to refund: <span className="font-medium text-foreground">{format(maxRefund)}</span>
+        </p>
+        <Button onClick={submit} disabled={busy || total <= 0 || overMax} variant="destructive">
+          {busy && <Loader2 className="mr-1.5 h-4 w-4 animate-spin" />}
+          Refund {format(total)}
+        </Button>
+      </div>
+      {overMax && (
+        <p className="text-right text-xs text-destructive">Amount exceeds the refundable total.</p>
+      )}
+
+      {(refunds || []).length > 0 && (
+        <div className="border-t pt-3">
+          <h4 className="mb-2 text-xs font-medium text-muted-foreground">Previous refunds</h4>
+          <ul className="space-y-1 text-sm">
+            {refunds.map((r) => (
+              <li key={r.id} className="flex justify-between">
+                <span>
+                  {formatDate(r.created_date)}
+                  {r.reason ? ` — ${r.reason}` : ""}
+                  {r.refunded_by ? <span className="text-muted-foreground"> by {r.refunded_by}</span> : null}
+                </span>
+                <span className="text-destructive">− {format(r.amount || 0)}</span>
+              </li>
+            ))}
+          </ul>
+        </div>
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,52 @@
+import React from "react";
+import { Separator } from "@/components/ui/separator";
+import useMoney from "../../../hooks/useMoney";
+import { orderTotals } from "../../../lib/order-utils";
+
+/** Order totals summary. Props: { order } */
+export default function TotalsBox({ order }) {
+  const { format } = useMoney();
+  const t = orderTotals(order);
+  if (!t) return null;
+
+  const row = (label, value, className = "") => (
+    <div className={`flex items-center justify-between py-1 text-sm ${className}`}>
+      <span className="text-muted-foreground">{label}</span>
+      <span>{value}</span>
+    </div>
+  );
+
+  const couponCodes = (order.coupon_lines || []).map((c) => c.code).join(", ");
+
+  return (
+    <div className="ml-auto w-full max-w-sm">
+      {row("Items subtotal", format(t.itemsSubtotal))}
+      {t.discount > 0 &&
+        row(couponCodes ? `Coupon(s): ${couponCodes}` : "Discount", `− ${format(t.discount)}`)}
+      {t.fees !== 0 && row("Fees", format(t.fees))}
+      {row("Shipping", format(t.shipping))}
+      {(t.taxLines || []).length > 0
+        ? t.taxLines.map((tl, i) => (
+            <div key={tl.rate_id || i} className="flex items-center justify-between py-1 text-sm">
+              <span className="text-muted-foreground">{tl.label || "Tax"}</span>
+              <span>{format((tl.tax_total || 0) + (tl.shipping_tax_total || 0))}</span>
+            </div>
+          ))
+        : row("Tax", format(t.taxTotal))}
+      <Separator className="my-1.5" />
+      <div className="flex items-center justify-between py-1 font-semibold">
+        <span>Order total</span>
+        <span>{format(t.total)}</span>
+      </div>
+      {t.refunded > 0 && (
+        <>
+          {row("Refunded", `− ${format(t.refunded)}`, "text-destructive")}
+          <div className="flex items-center justify-between py-1 text-sm font-medium">
+            <span>Net payment</span>
+            <span>{format(t.net)}</span>
+          </div>
+        </>
+      )}
+    </div>
+  );
+}

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

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

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