@base44/app-plugin-commerce 0.1.0

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

@@ -0,0 +1,208 @@
+import React from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Badge } from "@/components/ui/badge";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import { Package, X } from "lucide-react";
+
+import useMoney from "../../../hooks/useMoney";
+import { round2 } from "../../../lib/order-utils";
+
+/**
+ * Order line items table: product lines, fee lines, shipping lines, coupon chips.
+ *
+ * Props:
+ * - order: the (draft) order object being displayed/edited
+ * - editable: whether qty/price edits & removals are allowed (pending/on-hold)
+ * - onChange(patch): merge a partial {line_items|fee_lines|shipping_lines} into the draft
+ * - onRemoveCoupon(code): server-side removal (disabled while dirty upstream)
+ * - removingCoupon: code currently being removed
+ */
+export default function LineItemsTable({ order, editable, onChange, onRemoveCoupon, removingCoupon }) {
+  const { format } = useMoney();
+  const lines = order.line_items || [];
+  const fees = order.fee_lines || [];
+  const shipping = order.shipping_lines || [];
+  const coupons = order.coupon_lines || [];
+
+  const updateLine = (lineId, patch) => {
+    onChange({
+      line_items: lines.map((l) => {
+        if (l.line_id !== lineId) return l;
+        const next = { ...l, ...patch };
+        // Keep display totals in sync locally; the server recalculates
+        // authoritative totals (incl. tax) on save.
+        next.subtotal = round2((next.price || 0) * (next.quantity || 0));
+        next.total = next.subtotal;
+        return next;
+      }),
+    });
+  };
+
+  const removeLine = (lineId) => onChange({ line_items: lines.filter((l) => l.line_id !== lineId) });
+  const removeFee = (lineId) => onChange({ fee_lines: fees.filter((f) => f.line_id !== lineId) });
+  const removeShipping = (lineId) =>
+    onChange({ shipping_lines: shipping.filter((s) => s.line_id !== lineId) });
+
+  return (
+    <div>
+      <Table>
+        <TableHeader>
+          <TableRow>
+            <TableHead>Item</TableHead>
+            <TableHead className="w-28 text-right">Cost</TableHead>
+            <TableHead className="w-20 text-right">Qty</TableHead>
+            <TableHead className="w-28 text-right">Total</TableHead>
+            <TableHead className="w-24 text-right">Tax</TableHead>
+            {editable && <TableHead className="w-10" />}
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          {lines.length === 0 && fees.length === 0 && shipping.length === 0 && (
+            <TableRow>
+              <TableCell colSpan={editable ? 6 : 5} className="py-8 text-center text-sm text-muted-foreground">
+                No items. {editable ? "Use “Add product(s)” below." : ""}
+              </TableCell>
+            </TableRow>
+          )}
+
+          {lines.map((line) => (
+            <TableRow key={line.line_id}>
+              <TableCell>
+                <div className="flex items-center gap-3">
+                  {line.image ? (
+                    <img src={line.image} alt="" className="h-9 w-9 rounded object-cover" />
+                  ) : (
+                    <div className="flex h-9 w-9 items-center justify-center rounded bg-muted">
+                      <Package className="h-4 w-4 text-muted-foreground" />
+                    </div>
+                  )}
+                  <div className="min-w-0">
+                    <p className="truncate text-sm font-medium">{line.name}</p>
+                    <p className="text-xs text-muted-foreground">
+                      {line.sku && <span>SKU: {line.sku}</span>}
+                      {(line.attributes || []).length > 0 && (
+                        <span>
+                          {line.sku ? " · " : ""}
+                          {line.attributes.map((a) => `${a.name}: ${a.option}`).join(", ")}
+                        </span>
+                      )}
+                    </p>
+                  </div>
+                </div>
+              </TableCell>
+              <TableCell className="text-right">
+                {editable ? (
+                  <Input
+                    type="number"
+                    step="any"
+                    className="ml-auto h-8 w-24 text-right"
+                    value={line.price ?? 0}
+                    onChange={(e) => updateLine(line.line_id, { price: Number(e.target.value) || 0 })}
+                  />
+                ) : (
+                  format(line.price || 0)
+                )}
+              </TableCell>
+              <TableCell className="text-right">
+                {editable ? (
+                  <Input
+                    type="number"
+                    min="1"
+                    className="ml-auto h-8 w-16 text-right"
+                    value={line.quantity ?? 1}
+                    onChange={(e) =>
+                      updateLine(line.line_id, { quantity: Math.max(1, parseInt(e.target.value, 10) || 1) })
+                    }
+                  />
+                ) : (
+                  `× ${line.quantity}`
+                )}
+              </TableCell>
+              <TableCell className="text-right">{format(line.total || 0)}</TableCell>
+              <TableCell className="text-right text-muted-foreground">{format(line.total_tax || 0)}</TableCell>
+              {editable && (
+                <TableCell className="text-right">
+                  <Button variant="ghost" size="icon" className="h-7 w-7" onClick={() => removeLine(line.line_id)}>
+                    <X className="h-4 w-4" />
+                  </Button>
+                </TableCell>
+              )}
+            </TableRow>
+          ))}
+
+          {fees.map((fee) => (
+            <TableRow key={fee.line_id} className="bg-muted/30">
+              <TableCell>
+                <span className="text-sm">
+                  <Badge variant="outline" className="mr-2">Fee</Badge>
+                  {fee.name}
+                </span>
+              </TableCell>
+              <TableCell />
+              <TableCell />
+              <TableCell className="text-right">{format(fee.total || 0)}</TableCell>
+              <TableCell className="text-right text-muted-foreground">{format(fee.total_tax || 0)}</TableCell>
+              {editable && (
+                <TableCell className="text-right">
+                  <Button variant="ghost" size="icon" className="h-7 w-7" onClick={() => removeFee(fee.line_id)}>
+                    <X className="h-4 w-4" />
+                  </Button>
+                </TableCell>
+              )}
+            </TableRow>
+          ))}
+
+          {shipping.map((line) => (
+            <TableRow key={line.line_id} className="bg-muted/30">
+              <TableCell>
+                <span className="text-sm">
+                  <Badge variant="outline" className="mr-2">Shipping</Badge>
+                  {line.method_title || line.method_id}
+                </span>
+              </TableCell>
+              <TableCell />
+              <TableCell />
+              <TableCell className="text-right">{format(line.total || 0)}</TableCell>
+              <TableCell className="text-right text-muted-foreground">{format(line.total_tax || 0)}</TableCell>
+              {editable && (
+                <TableCell className="text-right">
+                  <Button variant="ghost" size="icon" className="h-7 w-7" onClick={() => removeShipping(line.line_id)}>
+                    <X className="h-4 w-4" />
+                  </Button>
+                </TableCell>
+              )}
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+
+      {coupons.length > 0 && (
+        <div className="flex flex-wrap items-center gap-2 border-t px-3 py-2">
+          <span className="text-xs text-muted-foreground">Coupons:</span>
+          {coupons.map((c) => (
+            <Badge key={c.code} variant="secondary" className="gap-1 pr-1">
+              {c.code} (−{format(c.discount || 0)})
+              <button
+                type="button"
+                className="rounded-full p-0.5 hover:bg-muted-foreground/20 disabled:opacity-50"
+                disabled={removingCoupon === c.code}
+                onClick={() => onRemoveCoupon(c.code)}
+                title="Remove coupon"
+              >
+                <X className="h-3 w-3" />
+              </button>
+            </Badge>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,123 @@
+import React, { useState } from "react";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { Textarea } from "@/components/ui/textarea";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Loader2, X } from "lucide-react";
+import { toast } from "sonner";
+
+import { call } from "../../../lib/api";
+import { formatDateTime } from "../../../lib/format";
+
+/** Note tone: system = gray, private = amber, note-to-customer = blue. */
+function noteClasses(note) {
+  if (note.is_customer_note) return "border-blue-200 bg-blue-50";
+  if (note.added_by === "system") return "border-gray-200 bg-gray-50";
+  return "border-amber-200 bg-amber-50";
+}
+
+/**
+ * Order notes feed + add-note form.
+ * Props: { orderId, notes, loading, onChanged() }
+ */
+export default function OrderNotesPanel({ orderId, notes, loading, onChanged }) {
+  const [text, setText] = useState("");
+  const [kind, setKind] = useState("private");
+  const [busy, setBusy] = useState(false);
+
+  const addNote = async () => {
+    if (!text.trim()) return;
+    setBusy(true);
+    try {
+      await call("admin-orders", "add-note", {
+        order_id: orderId,
+        note: text.trim(),
+        is_customer_note: kind === "customer",
+      });
+      toast.success(kind === "customer" ? "Note sent to customer" : "Note added");
+      setText("");
+      onChanged();
+    } catch {
+      /* toast handled by call() */
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  const deleteNote = async (noteId) => {
+    try {
+      await call("admin-orders", "delete-note", { note_id: noteId });
+      onChanged();
+    } catch {
+      /* toast handled by call() */
+    }
+  };
+
+  return (
+    <Card>
+      <CardHeader className="pb-3">
+        <CardTitle className="text-base">Order notes</CardTitle>
+      </CardHeader>
+      <CardContent className="space-y-3">
+        {loading ? (
+          <div className="flex justify-center py-4">
+            <Loader2 className="h-4 w-4 animate-spin text-muted-foreground" />
+          </div>
+        ) : (notes || []).length === 0 ? (
+          <p className="text-sm text-muted-foreground">No notes yet.</p>
+        ) : (
+          <ul className="max-h-96 space-y-2 overflow-y-auto pr-1">
+            {notes.map((n) => (
+              <li key={n.id} className={`group relative rounded-md border p-2.5 text-sm ${noteClasses(n)}`}>
+                <p className="whitespace-pre-wrap">{n.note}</p>
+                <p className="mt-1.5 text-xs text-muted-foreground">
+                  {formatDateTime(n.created_date)}
+                  {n.added_by && n.added_by !== "system" ? ` · ${n.added_by}` : n.added_by === "system" ? " · system" : ""}
+                  {n.is_customer_note ? " · sent to customer" : ""}
+                </p>
+                <button
+                  type="button"
+                  onClick={() => deleteNote(n.id)}
+                  className="absolute right-1.5 top-1.5 hidden rounded p-0.5 hover:bg-black/5 group-hover:block"
+                  title="Delete note"
+                >
+                  <X className="h-3.5 w-3.5 text-muted-foreground" />
+                </button>
+              </li>
+            ))}
+          </ul>
+        )}
+
+        <div className="space-y-2 border-t pt-3">
+          <Textarea
+            rows={3}
+            placeholder="Add a note…"
+            value={text}
+            onChange={(e) => setText(e.target.value)}
+          />
+          <div className="flex items-center gap-2">
+            <Select value={kind} onValueChange={setKind}>
+              <SelectTrigger className="h-8 flex-1">
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="private">Private note</SelectItem>
+                <SelectItem value="customer">Note to customer</SelectItem>
+              </SelectContent>
+            </Select>
+            <Button size="sm" onClick={addNote} disabled={busy || !text.trim()}>
+              {busy && <Loader2 className="mr-1 h-3.5 w-3.5 animate-spin" />}
+              Add
+            </Button>
+          </div>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}

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

@@ -0,0 +1,199 @@
+import React, { useState } from "react";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import { Input } from "@/components/ui/input";
+import { Check, Copy, CreditCard, ExternalLink, Loader2, RotateCw } from "lucide-react";
+import { toast } from "sonner";
+
+import { call } from "../../../lib/api";
+import useMoney from "../../../hooks/useMoney";
+import usePaymentProvider from "../../../hooks/usePaymentProvider";
+import { formatDateTime } from "../../../lib/format";
+
+/**
+ * Payment state for an order, plus the two things an operator wants when an
+ * order is unpaid: a **payment link** to send the customer, and a way to
+ * **re-check** whether the money arrived.
+ *
+ * Both come from `commerce/payments`, which is provider-neutral — this panel
+ * never names a payment provider. When none is connected the actions are
+ * disabled with a "No payment provider connected" tooltip rather than being
+ * hidden, so the operator can see the capability exists and what unlocks it.
+ *
+ * Props: { order, onChanged }
+ */
+export default function PaymentPanel({ order, onChanged }) {
+  const { format } = useMoney();
+  const provider = usePaymentProvider();
+  const [working, setWorking] = useState(""); // link | verify
+  const [link, setLink] = useState("");
+  const [copied, setCopied] = useState(false);
+
+  const paid = Boolean(order.date_paid) || ["processing", "completed", "refunded"].includes(order.status);
+  const known = !provider.loading && Boolean(provider.gatewaySlug);
+  const isOnline = known && order.payment_method === provider.gatewaySlug;
+  // With a provider connected, an unpaid order can always be collected online —
+  // whatever its current method is. An admin order starts with no method at all,
+  // and "just send them a card link" is a normal thing to want for a manual one;
+  // the backend records the switch on the order.
+  const canAct = provider.connected && !paid;
+  const willSwitchMethod = canAct && known && !isOnline;
+  const disabledReason = !provider.connected ? "No payment provider connected" : undefined;
+
+  const createLink = async () => {
+    setWorking("link");
+    try {
+      // No return_url — the admin doesn't know the storefront's routes; the
+      // backend builds it from the store's settings.
+      const data = await call("payments", "create-link", { order_id: order.id });
+      setLink(data?.url || "");
+      setCopied(false);
+      if (data?.url) {
+        toast.success("Payment link created");
+        if (willSwitchMethod) onChanged?.();   // the order's method changed
+      }
+    } catch {
+      /* toast handled by call() */
+    } finally {
+      setWorking("");
+    }
+  };
+
+  const checkPayment = async () => {
+    setWorking("verify");
+    try {
+      const data = await call("payments", "verify", { order_id: order.id });
+      if (data?.paid) {
+        toast.success("Payment confirmed");
+        onChanged?.();
+      } else {
+        toast.info("No payment received yet");
+      }
+    } catch {
+      /* toast handled by call() */
+    } finally {
+      setWorking("");
+    }
+  };
+
+  const copy = async () => {
+    try {
+      await navigator.clipboard.writeText(link);
+      setCopied(true);
+      toast.success("Link copied");
+    } catch {
+      toast.error("Could not copy — select the link and copy it manually");
+    }
+  };
+
+  return (
+    <Card>
+      <CardHeader className="flex-row items-center justify-between space-y-0 pb-3">
+        <CardTitle className="text-base">Payment</CardTitle>
+        {paid ? (
+          <Badge variant="secondary" className="font-normal">Paid</Badge>
+        ) : (
+          <Badge variant="outline" className="font-normal">Awaiting payment</Badge>
+        )}
+      </CardHeader>
+      <CardContent className="space-y-3">
+        <dl className="grid grid-cols-[auto_1fr] gap-x-3 gap-y-1 text-sm">
+          <dt className="text-muted-foreground">Method</dt>
+          <dd>{order.payment_method_title || order.payment_method || "—"}</dd>
+          <dt className="text-muted-foreground">Total</dt>
+          <dd>{format(order.total || 0)}</dd>
+          {order.date_paid && (
+            <>
+              <dt className="text-muted-foreground">Paid</dt>
+              <dd>{formatDateTime(order.date_paid)}</dd>
+            </>
+          )}
+          {order.transaction_id && (
+            <>
+              <dt className="text-muted-foreground">Reference</dt>
+              <dd className="truncate font-mono text-xs">{order.transaction_id}</dd>
+            </>
+          )}
+        </dl>
+
+        {known && !isOnline && !paid && !provider.connected && (
+          <p className="text-xs text-muted-foreground">
+            {order.payment_method
+              ? `This order is set to be paid outside the store (${order.payment_method_title || order.payment_method}), so mark it paid by moving it to Processing once the money arrives.`
+              : "No payment method is set on this order. Take payment outside the store and move it to Processing, or connect a payment provider to send the customer a payment link."}
+          </p>
+        )}
+
+        {!paid && (provider.connected || isOnline) && (
+          <>
+            <div className="flex flex-wrap gap-2">
+              <Button
+                variant="outline"
+                size="sm"
+                disabled={!canAct || Boolean(working) || provider.loading}
+                title={disabledReason}
+                onClick={createLink}
+              >
+                {working === "link" ? (
+                  <Loader2 className="mr-1.5 h-3.5 w-3.5 animate-spin" />
+                ) : (
+                  <CreditCard className="mr-1.5 h-3.5 w-3.5" />
+                )}
+                {link ? "New payment link" : "Create payment link"}
+              </Button>
+              <Button
+                variant="outline"
+                size="sm"
+                disabled={!canAct || Boolean(working) || provider.loading}
+                title={disabledReason}
+                onClick={checkPayment}
+              >
+                {working === "verify" ? (
+                  <Loader2 className="mr-1.5 h-3.5 w-3.5 animate-spin" />
+                ) : (
+                  <RotateCw className="mr-1.5 h-3.5 w-3.5" />
+                )}
+                Check payment
+              </Button>
+            </div>
+
+            {!provider.connected && !provider.loading && (
+              <p className="text-xs text-muted-foreground">
+                No payment provider is connected, so this order can't be paid online yet.
+              </p>
+            )}
+
+            {willSwitchMethod && !link && (
+              <p className="text-xs text-muted-foreground">
+                {order.payment_method
+                  ? `Sending a payment link switches this order from ${order.payment_method_title || order.payment_method} to card payment.`
+                  : "Sending a payment link sets this order to card payment."}
+              </p>
+            )}
+
+            {link && (
+              <div className="space-y-1.5">
+                <p className="text-xs text-muted-foreground">
+                  Send this to the customer — it opens the provider's secure payment page. The order
+                  updates itself once they pay.
+                </p>
+                <div className="flex gap-1.5">
+                  <Input readOnly value={link} className="h-8 font-mono text-xs" onFocus={(e) => e.target.select()} />
+                  <Button variant="outline" size="icon" className="h-8 w-8 shrink-0" onClick={copy} title="Copy link">
+                    {copied ? <Check className="h-3.5 w-3.5" /> : <Copy className="h-3.5 w-3.5" />}
+                  </Button>
+                  <Button variant="outline" size="icon" className="h-8 w-8 shrink-0" asChild title="Open">
+                    <a href={link} target="_blank" rel="noreferrer">
+                      <ExternalLink className="h-3.5 w-3.5" />
+                    </a>
+                  </Button>
+                </div>
+              </div>
+            )}
+          </>
+        )}
+      </CardContent>
+    </Card>
+  );
+}