@base44/app-plugin-commerce 0.1.0

package/src/commerce/admin/pages/settings/GeneralSettings.jsx

@@ -0,0 +1,232 @@
+import React from "react";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Checkbox } from "@/components/ui/checkbox";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import CountrySelect from "../../components/CountrySelect";
+import { statesFor } from "../../lib/geo-data";
+import { CURRENCIES, CURRENCY_POSITIONS } from "../../lib/constants";
+import useGroupForm from "./useGroupForm";
+
+const DEFAULTS = {
+  store_name: "",
+  store_url: "",
+  order_received_path: "/order-received",
+  address: { address_1: "", address_2: "", city: "", state: "", postcode: "", country: "US" },
+  enable_taxes: true,
+  enable_coupons: true,
+  calc_discounts_sequentially: false,
+  currency: "USD",
+  currency_position: "left",
+  thousand_sep: ",",
+  decimal_sep: ".",
+  num_decimals: 2,
+};
+
+export default function GeneralSettings() {
+  const { form, setField, SaveButton } = useGroupForm("general", DEFAULTS);
+  const address = form.address || DEFAULTS.address;
+  const states = statesFor(address.country);
+
+  const setAddress = (key, value) => setField("address", { ...address, [key]: value });
+
+  return (
+    <div className="max-w-3xl space-y-4">
+      <Card>
+        <CardHeader className="flex-row items-start justify-between gap-4 space-y-0">
+          <div className="space-y-1.5">
+            <CardTitle>Store details</CardTitle>
+            <CardDescription>This is where your business is located. Tax rates and shipping rates use this address.</CardDescription>
+          </div>
+          <SaveButton />
+        </CardHeader>
+        <CardContent className="grid gap-4 sm:grid-cols-2">
+          <div className="space-y-1.5 sm:col-span-2">
+            <Label>Store name</Label>
+            <Input value={form.store_name || ""} onChange={(e) => setField("store_name", e.target.value)} />
+          </div>
+          <div className="space-y-1.5 sm:col-span-2">
+            <Label>Storefront URL</Label>
+            <Input
+              type="url"
+              inputMode="url"
+              placeholder="https://shop.example.com"
+              value={form.store_url || ""}
+              onChange={(e) => setField("store_url", e.target.value)}
+            />
+            <p className="text-xs text-muted-foreground">
+              Where customers shop. Used to build the page a customer returns to after paying — leave it
+              empty and the app's own address is used.
+            </p>
+          </div>
+          <div className="space-y-1.5 sm:col-span-2">
+            <Label>Payment return path</Label>
+            <Input
+              placeholder="/order-received"
+              value={form.order_received_path || ""}
+              onChange={(e) => setField("order_received_path", e.target.value)}
+            />
+            <p className="text-xs text-muted-foreground">
+              The storefront route customers come back to after paying. It must match the page you built —
+              a wrong path sends paying customers to a 404.
+            </p>
+          </div>
+          <div className="space-y-1.5">
+            <Label>Address line 1</Label>
+            <Input value={address.address_1 || ""} onChange={(e) => setAddress("address_1", e.target.value)} />
+          </div>
+          <div className="space-y-1.5">
+            <Label>Address line 2</Label>
+            <Input value={address.address_2 || ""} onChange={(e) => setAddress("address_2", e.target.value)} />
+          </div>
+          <div className="space-y-1.5">
+            <Label>City</Label>
+            <Input value={address.city || ""} onChange={(e) => setAddress("city", e.target.value)} />
+          </div>
+          <div className="space-y-1.5">
+            <Label>Postcode / ZIP</Label>
+            <Input value={address.postcode || ""} onChange={(e) => setAddress("postcode", e.target.value)} />
+          </div>
+          <div className="space-y-1.5">
+            <Label>Country</Label>
+            <CountrySelect
+              value={address.country}
+              onChange={(code) => setField("address", { ...address, country: code, state: "" })}
+            />
+          </div>
+          <div className="space-y-1.5">
+            <Label>State / Province</Label>
+            {states ? (
+              <Select value={address.state || ""} onValueChange={(v) => setAddress("state", v)}>
+                <SelectTrigger>
+                  <SelectValue placeholder="Select state…" />
+                </SelectTrigger>
+                <SelectContent>
+                  {states.map((st) => (
+                    <SelectItem key={st.code} value={st.code}>
+                      {st.name}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            ) : (
+              <Input value={address.state || ""} onChange={(e) => setAddress("state", e.target.value)} />
+            )}
+          </div>
+        </CardContent>
+      </Card>
+
+      <Card>
+        <CardHeader className="flex-row items-start justify-between gap-4 space-y-0">
+          <div className="space-y-1.5">
+            <CardTitle>Store options</CardTitle>
+            <CardDescription>
+              Where you ship is controlled by your shipping zones — see Settings → Shipping.
+            </CardDescription>
+          </div>
+          <SaveButton />
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <div className="space-y-2">
+            <label className="flex items-center gap-2 text-sm">
+              <Checkbox
+                checked={!!form.enable_taxes}
+                onCheckedChange={(v) => setField("enable_taxes", !!v)}
+              />
+              Enable tax rates and calculations
+            </label>
+            <label className="flex items-center gap-2 text-sm">
+              <Checkbox
+                checked={!!form.enable_coupons}
+                onCheckedChange={(v) => setField("enable_coupons", !!v)}
+              />
+              Enable the use of coupon codes
+            </label>
+            <label className="flex items-center gap-2 text-sm">
+              <Checkbox
+                checked={!!form.calc_discounts_sequentially}
+                onCheckedChange={(v) => setField("calc_discounts_sequentially", !!v)}
+              />
+              Calculate coupon discounts sequentially
+            </label>
+          </div>
+        </CardContent>
+      </Card>
+
+      <Card>
+        <CardHeader className="flex-row items-start justify-between gap-4 space-y-0">
+          <div className="space-y-1.5">
+            <CardTitle>Currency options</CardTitle>
+            <CardDescription>Affects how prices are displayed in the admin and by storefront APIs.</CardDescription>
+          </div>
+          <SaveButton />
+        </CardHeader>
+        <CardContent className="grid gap-4 sm:grid-cols-2">
+          <div className="space-y-1.5">
+            <Label>Currency</Label>
+            <Select value={form.currency} onValueChange={(v) => setField("currency", v)}>
+              <SelectTrigger>
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                {CURRENCIES.map((c) => (
+                  <SelectItem key={c.code} value={c.code}>
+                    {c.name} ({c.symbol})
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+          <div className="space-y-1.5">
+            <Label>Currency position</Label>
+            <Select value={form.currency_position} onValueChange={(v) => setField("currency_position", v)}>
+              <SelectTrigger>
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                {CURRENCY_POSITIONS.map((p) => (
+                  <SelectItem key={p.value} value={p.value}>
+                    {p.label}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+          <div className="space-y-1.5">
+            <Label>Thousand separator</Label>
+            <Input
+              value={form.thousand_sep ?? ","}
+              maxLength={1}
+              onChange={(e) => setField("thousand_sep", e.target.value)}
+            />
+          </div>
+          <div className="space-y-1.5">
+            <Label>Decimal separator</Label>
+            <Input
+              value={form.decimal_sep ?? "."}
+              maxLength={1}
+              onChange={(e) => setField("decimal_sep", e.target.value)}
+            />
+          </div>
+          <div className="space-y-1.5">
+            <Label>Number of decimals</Label>
+            <Input
+              type="number"
+              min={0}
+              max={4}
+              value={form.num_decimals ?? 2}
+              onChange={(e) => setField("num_decimals", e.target.value === "" ? 2 : Number(e.target.value))}
+            />
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}

package/src/commerce/admin/pages/settings/InventorySettings.jsx

@@ -0,0 +1,146 @@
+import React from "react";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Switch } from "@/components/ui/switch";
+import useGroupForm from "./useGroupForm";
+
+const DEFAULTS = {
+  manage_stock: true,
+  hold_stock_minutes: 60,
+  low_stock_threshold: 2,
+  out_of_stock_threshold: 0,
+  notify_low_stock: true,
+  notify_out_of_stock: true,
+  notification_recipient: "",
+  hide_out_of_stock: false,
+};
+
+export default function InventorySettings() {
+  const { form, setField, SaveButton } = useGroupForm("inventory", DEFAULTS);
+  const off = !form.manage_stock;
+
+  const num = (key, fallback = 0) => (e) =>
+    setField(key, e.target.value === "" ? fallback : Number(e.target.value));
+
+  return (
+    <div className="max-w-3xl space-y-4">
+      <Card>
+        <CardHeader className="flex-row items-start justify-between gap-4 space-y-0">
+          <div className="space-y-1.5">
+            <CardTitle>Inventory</CardTitle>
+            <CardDescription>Stock management defaults for products that track inventory.</CardDescription>
+          </div>
+          <SaveButton />
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <div className="flex items-start justify-between gap-4">
+            <div>
+              <Label>Manage stock</Label>
+              <p className="text-xs text-muted-foreground">Enable stock management store-wide.</p>
+            </div>
+            <Switch checked={!!form.manage_stock} onCheckedChange={(v) => setField("manage_stock", v)} />
+          </div>
+
+          <div className="space-y-1.5">
+            <Label className={off ? "opacity-50" : ""}>Hold stock (minutes)</Label>
+            <Input
+              type="number"
+              min={0}
+              disabled={off}
+              value={form.hold_stock_minutes ?? 60}
+              onChange={num("hold_stock_minutes", 60)}
+            />
+            <p className="text-xs text-muted-foreground">
+              Hold stock for unpaid orders for this many minutes. When the limit is reached, the
+              pending order is cancelled and its stock released. Release runs opportunistically —
+              see skills/commerce/references/scheduled-work.md.
+            </p>
+          </div>
+
+          <div className="grid gap-4 sm:grid-cols-2">
+            <div className="space-y-1.5">
+              <Label className={off ? "opacity-50" : ""}>Low stock threshold</Label>
+              <Input
+                type="number"
+                min={0}
+                disabled={off}
+                value={form.low_stock_threshold ?? 2}
+                onChange={num("low_stock_threshold", 2)}
+              />
+            </div>
+            <div className="space-y-1.5">
+              <Label className={off ? "opacity-50" : ""}>Out of stock threshold</Label>
+              <Input
+                type="number"
+                disabled={off}
+                value={form.out_of_stock_threshold ?? 0}
+                onChange={num("out_of_stock_threshold", 0)}
+              />
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+
+      <Card>
+        <CardHeader className="flex-row items-start justify-between gap-4 space-y-0">
+          <div className="space-y-1.5">
+            <CardTitle>Notifications</CardTitle>
+          </div>
+          <SaveButton />
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <div className="flex items-start justify-between gap-4">
+            <Label className={off ? "opacity-50" : ""}>Enable low stock notifications</Label>
+            <Switch
+              disabled={off}
+              checked={!!form.notify_low_stock}
+              onCheckedChange={(v) => setField("notify_low_stock", v)}
+            />
+          </div>
+          <div className="flex items-start justify-between gap-4">
+            <Label className={off ? "opacity-50" : ""}>Enable out of stock notifications</Label>
+            <Switch
+              disabled={off}
+              checked={!!form.notify_out_of_stock}
+              onCheckedChange={(v) => setField("notify_out_of_stock", v)}
+            />
+          </div>
+          <div className="space-y-1.5">
+            <Label className={off ? "opacity-50" : ""}>Notification recipient</Label>
+            <Input
+              type="email"
+              placeholder="Defaults to the admin recipients in Emails settings"
+              disabled={off}
+              value={form.notification_recipient || ""}
+              onChange={(e) => setField("notification_recipient", e.target.value)}
+            />
+          </div>
+        </CardContent>
+      </Card>
+
+      <Card>
+        <CardHeader className="flex-row items-start justify-between gap-4 space-y-0">
+          <div className="space-y-1.5">
+            <CardTitle>Visibility</CardTitle>
+          </div>
+          <SaveButton />
+        </CardHeader>
+        <CardContent>
+          <div className="flex items-start justify-between gap-4">
+            <div>
+              <Label>Hide out of stock items from the catalog</Label>
+              <p className="text-xs text-muted-foreground">
+                Storefront APIs will exclude out-of-stock products from listings.
+              </p>
+            </div>
+            <Switch
+              checked={!!form.hide_out_of_stock}
+              onCheckedChange={(v) => setField("hide_out_of_stock", v)}
+            />
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}

package/src/commerce/admin/pages/settings/PaymentsSettings.jsx

@@ -0,0 +1,260 @@
+import React, { useState } from "react";
+import { Card, CardContent } from "@/components/ui/card";
+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 { Switch } from "@/components/ui/switch";
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
+import {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { ArrowDown, ArrowUp, Info, Loader2, Plus, Settings2, Trash2 } from "lucide-react";
+import { toast } from "sonner";
+import { base44 } from "../../lib/api";
+import useAsync from "../../hooks/useAsync";
+import usePaymentProvider from "../../hooks/usePaymentProvider";
+
+const emptyBank = () => ({ account_name: "", account_number: "", bank_name: "", sort_code: "", iban: "", bic: "" });
+
+export default function PaymentsSettings() {
+  const gateways = useAsync(() => base44.entities["commerce.PaymentGateway"].list("order", 100), []);
+  // Whether the store can take card payments is a live fact about the connected
+  // payment provider, not a constant — the notice below follows it.
+  const provider = usePaymentProvider();
+  const [dialog, setDialog] = useState(null); // { gateway (local copy) }
+  const [saving, setSaving] = useState(false);
+  const [busy, setBusy] = useState(false);
+
+  const rows = gateways.data || [];
+
+  const toggle = async (g, enabled) => {
+    try {
+      await base44.entities["commerce.PaymentGateway"].update(g.id, { enabled });
+      gateways.refetch();
+    } catch (err) {
+      toast.error(err.message || "Failed to update gateway");
+    }
+  };
+
+  const move = async (index, dir) => {
+    const target = index + dir;
+    if (target < 0 || target >= rows.length) return;
+    const a = rows[index];
+    const b = rows[target];
+    setBusy(true);
+    try {
+      await Promise.all([
+        base44.entities["commerce.PaymentGateway"].update(a.id, { order: b.order ?? target }),
+        base44.entities["commerce.PaymentGateway"].update(b.id, { order: a.order ?? index }),
+      ]);
+      gateways.refetch();
+    } catch (err) {
+      toast.error(err.message || "Failed to reorder");
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  const saveGateway = async () => {
+    setSaving(true);
+    try {
+      const g = dialog.gateway;
+      await base44.entities["commerce.PaymentGateway"].update(g.id, {
+        title: g.title,
+        description: g.description,
+        settings: g.settings || {},
+      });
+      toast.success("Payment method saved");
+      setDialog(null);
+      gateways.refetch();
+    } catch (err) {
+      toast.error(err.message || "Failed to save");
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  if (gateways.loading) {
+    return (
+      <div className="flex justify-center py-12">
+        <Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
+      </div>
+    );
+  }
+
+  return (
+    <div className="max-w-3xl space-y-3">
+      {rows.map((g, i) => {
+        const isOnline = g.slug === provider.gatewaySlug;
+        return (
+          <Card key={g.id}>
+            <CardContent className="flex items-center gap-4 py-4">
+              <div className="flex flex-col">
+                <Button variant="ghost" size="icon" className="h-6 w-6" disabled={i === 0 || busy} onClick={() => move(i, -1)}>
+                  <ArrowUp className="h-3.5 w-3.5" />
+                </Button>
+                <Button variant="ghost" size="icon" className="h-6 w-6" disabled={i === rows.length - 1 || busy} onClick={() => move(i, 1)}>
+                  <ArrowDown className="h-3.5 w-3.5" />
+                </Button>
+              </div>
+              <div className="min-w-0 flex-1">
+                <div className="font-medium">{g.method_title || g.title || g.slug}</div>
+                <div className="truncate text-sm text-muted-foreground">{g.method_description || g.description}</div>
+                {isOnline && !provider.loading && (
+                  <Alert className="mt-3">
+                    <Info className="h-4 w-4" />
+                    {provider.connected ? (
+                      <>
+                        <AlertTitle>Payment provider connected</AlertTitle>
+                        <AlertDescription>
+                          Card payments are live: customers see this option at checkout, orders are
+                          confirmed automatically once paid, and refunds can be sent back through the
+                          provider{provider.providerLabel ? ` (${provider.providerLabel})` : ""}.
+                        </AlertDescription>
+                      </>
+                    ) : (
+                      <>
+                        <AlertTitle>No payment provider connected</AlertTitle>
+                        <AlertDescription>
+                          Card payments are ready to go but need a provider: connect the{" "}
+                          {provider.providerLabel || "payment"} connector in this app's integrations, and
+                          this option starts appearing at checkout — no code to write. Until then it stays
+                          hidden from customers, so nobody can pick it and pay nothing. Prefer a different
+                          provider? See{" "}
+                          <code className="text-xs">skills/commerce/references/online-payments.md</code>.
+                        </AlertDescription>
+                      </>
+                    )}
+                  </Alert>
+                )}
+              </div>
+              <div className="flex items-center gap-2">
+                <Switch
+                  checked={!!g.enabled}
+                  disabled={busy}
+                  title={
+                    isOnline && !provider.connected
+                      ? "Stays hidden from customers until a payment provider is connected"
+                      : undefined
+                  }
+                  onCheckedChange={(v) => toggle(g, v)}
+                />
+                {!isOnline && (
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    onClick={() =>
+                      setDialog({
+                        gateway: {
+                          ...g,
+                          settings: {
+                            ...(g.settings || {}),
+                            account_details: g.slug === "bacs" ? (g.settings?.account_details || []) : g.settings?.account_details,
+                          },
+                        },
+                      })
+                    }
+                  >
+                    <Settings2 className="mr-2 h-4 w-4" />
+                    Manage
+                  </Button>
+                )}
+              </div>
+            </CardContent>
+          </Card>
+        );
+      })}
+
+      {dialog && (
+        <Dialog open onOpenChange={(o) => !o && setDialog(null)}>
+          <DialogContent className="max-h-[85vh] overflow-y-auto">
+            <DialogHeader>
+              <DialogTitle>{dialog.gateway.method_title || dialog.gateway.title}</DialogTitle>
+            </DialogHeader>
+            <div className="space-y-4">
+              <div className="space-y-1.5">
+                <Label>Title</Label>
+                <Input
+                  value={dialog.gateway.title || ""}
+                  onChange={(e) => setDialog({ ...dialog, gateway: { ...dialog.gateway, title: e.target.value } })}
+                />
+                <p className="text-xs text-muted-foreground">Shown to customers during checkout.</p>
+              </div>
+              <div className="space-y-1.5">
+                <Label>Description</Label>
+                <Textarea
+                  rows={2}
+                  value={dialog.gateway.description || ""}
+                  onChange={(e) => setDialog({ ...dialog, gateway: { ...dialog.gateway, description: e.target.value } })}
+                />
+              </div>
+
+              {dialog.gateway.slug === "bacs" && (
+                <BankAccountsEditor
+                  accounts={dialog.gateway.settings?.account_details || []}
+                  onChange={(account_details) =>
+                    setDialog({ ...dialog, gateway: { ...dialog.gateway, settings: { ...dialog.gateway.settings, account_details } } })
+                  }
+                />
+              )}
+            </div>
+            <DialogFooter>
+              <Button variant="outline" onClick={() => setDialog(null)}>Cancel</Button>
+              <Button onClick={saveGateway} disabled={saving}>
+                {saving && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
+                Save
+              </Button>
+            </DialogFooter>
+          </DialogContent>
+        </Dialog>
+      )}
+    </div>
+  );
+}
+
+function BankAccountsEditor({ accounts, onChange }) {
+  const update = (i, key, val) => onChange(accounts.map((a, idx) => (idx === i ? { ...a, [key]: val } : a)));
+  const remove = (i) => onChange(accounts.filter((_, idx) => idx !== i));
+  const add = () => onChange([...accounts, emptyBank()]);
+
+  return (
+    <div className="space-y-3">
+      <Label>Bank account details</Label>
+      {accounts.length === 0 && <p className="text-xs text-muted-foreground">No accounts yet.</p>}
+      {accounts.map((a, i) => (
+        <div key={i} className="space-y-2 rounded-md border p-3">
+          <div className="flex items-center justify-between">
+            <span className="text-sm font-medium">Account {i + 1}</span>
+            <Button variant="ghost" size="icon" className="h-7 w-7" onClick={() => remove(i)}>
+              <Trash2 className="h-3.5 w-3.5" />
+            </Button>
+          </div>
+          <div className="grid gap-2 sm:grid-cols-2">
+            {[
+              ["account_name", "Account name"],
+              ["account_number", "Account number"],
+              ["bank_name", "Bank name"],
+              ["sort_code", "Sort code"],
+              ["iban", "IBAN"],
+              ["bic", "BIC / Swift"],
+            ].map(([key, label]) => (
+              <div key={key} className="space-y-1">
+                <Label className="text-xs">{label}</Label>
+                <Input value={a[key] || ""} onChange={(e) => update(i, key, e.target.value)} />
+              </div>
+            ))}
+          </div>
+        </div>
+      ))}
+      <Button variant="outline" size="sm" onClick={add}>
+        <Plus className="mr-2 h-4 w-4" />
+        Add account
+      </Button>
+    </div>
+  );
+}