@base44/app-plugin-commerce 0.1.6 → 0.1.7

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

@@ -5,7 +5,6 @@ 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,
@@ -13,20 +12,26 @@ import {
   DialogHeader,
   DialogTitle,
 } from "@/components/ui/dialog";
-import { ArrowDown, ArrowUp, Info, Loader2, Plus, Settings2, Trash2 } from "lucide-react";
+import { ArrowDown, ArrowUp, 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: "" });
 
+/** The two seeded options; everything else is operator-added and deletable. */
+const BUILT_IN_SLUGS = new Set(["offline", "card"]);
+
+function slugify(title, taken) {
+  const base = String(title || "").toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/(^-|-$)/g, "") || "payment-method";
+  let slug = base;
+  for (let n = 2; taken.has(slug); n += 1) slug = `${base}-${n}`;
+  return slug;
+}
+
 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 [dialog, setDialog] = useState(null); // { gateway (local copy), isNew }
   const [saving, setSaving] = useState(false);
   const [busy, setBusy] = useState(false);
 
@@ -60,16 +65,54 @@ export default function PaymentsSettings() {
     }
   };
 
+  const remove = async (g) => {
+    if (!window.confirm(`Delete the "${g.title || g.slug}" payment option?`)) return;
+    setBusy(true);
+    try {
+      await base44.entities["commerce.PaymentGateway"].delete(g.id);
+      toast.success("Payment method deleted");
+      gateways.refetch();
+    } catch (err) {
+      toast.error(err.message || "Failed to delete");
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  const openNew = () =>
+    setDialog({
+      isNew: true,
+      gateway: { title: "", description: "", settings: { account_details: [] } },
+    });
+
   const saveGateway = async () => {
+    const g = dialog.gateway;
+    if (!String(g.title || "").trim()) {
+      toast.error("Give the payment method a title");
+      return;
+    }
     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");
+      if (dialog.isNew) {
+        await base44.entities["commerce.PaymentGateway"].create({
+          slug: slugify(g.title, new Set(rows.map((r) => r.slug))),
+          title: g.title,
+          description: g.description || "",
+          enabled: true,
+          order: rows.length,
+          method_title: g.title,
+          method_description: g.description || "",
+          settings: g.settings || {},
+        });
+        toast.success("Payment method added");
+      } else {
+        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) {
@@ -90,118 +133,86 @@ export default function PaymentsSettings() {
   return (
     <div className="max-w-3xl">
       <Card>
-        <CardHeader className="pb-3">
-          <CardTitle>Checkout options</CardTitle>
-          <CardDescription>
-            Which payment options customers can pick at checkout, in this order, and the wording they
-            see. This is the storefront's menu only — switching an option on or off, or renaming it,
-            does not connect, disconnect or configure any payment provider.
-          </CardDescription>
+        <CardHeader className="flex-row items-start justify-between gap-4 space-y-0 pb-3">
+          <div className="space-y-1.5">
+            <CardTitle>Checkout options</CardTitle>
+            <CardDescription>
+              Which payment options customers can pick at checkout, in this order, and the wording
+              they see. Every option except Credit card settles outside the store: the order goes
+              on-hold with the option's description as instructions, and you move it on once paid.
+            </CardDescription>
+          </div>
+          <Button size="sm" onClick={openNew}>
+            <Plus className="mr-2 h-4 w-4" />
+            Add payment method
+          </Button>
         </CardHeader>
         <CardContent className="divide-y border-t p-0">
-          {rows.map((g, i) => {
-            const isOnline = g.slug === provider.gatewaySlug;
-            return (
-              <div key={g.id} className="space-y-3 px-6 py-4">
-                <div className="flex items-start gap-4">
-                  <div className="flex flex-col pt-0.5">
-                    <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>
+          {rows.map((g, i) => (
+            <div key={g.id} className="space-y-2 px-6 py-4">
+              <div className="flex items-start gap-4">
+                <div className="flex flex-col pt-0.5">
+                  <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="text-sm text-muted-foreground">
-                      {g.method_description || g.description}
-                    </div>
+                <div className="min-w-0 flex-1">
+                  <div className="font-medium">{g.method_title || g.title || g.slug}</div>
+                  <div className="text-sm text-muted-foreground">
+                    {g.method_description || g.description}
                   </div>
+                </div>
 
-                  <div className="flex shrink-0 items-center gap-2 pt-0.5">
-                    <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)}
-                    />
-                    {/* Every option's customer-facing wording is editable, the card
-                        one included — and a button on every row keeps the toggles
-                        in one column. */}
+                <div className="flex shrink-0 items-center gap-2 pt-0.5">
+                  <Switch checked={!!g.enabled} disabled={busy} onCheckedChange={(v) => toggle(g, v)} />
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    onClick={() => setDialog({ gateway: { ...g, settings: { ...(g.settings || {}) } } })}
+                  >
+                    <Settings2 className="mr-2 h-4 w-4" />
+                    Edit
+                  </Button>
+                  {!BUILT_IN_SLUGS.has(g.slug) && (
                     <Button
-                      variant="outline"
-                      size="sm"
-                      onClick={() =>
-                        setDialog({
-                          gateway: {
-                            ...g,
-                            settings: {
-                              ...(g.settings || {}),
-                              account_details:
-                                g.slug === "offline"
-                                  ? g.settings?.account_details || []
-                                  : g.settings?.account_details,
-                            },
-                          },
-                        })
-                      }
+                      variant="ghost"
+                      size="icon"
+                      className="h-8 w-8 text-muted-foreground"
+                      disabled={busy}
+                      title="Delete"
+                      onClick={() => remove(g)}
                     >
-                      <Settings2 className="mr-2 h-4 w-4" />
-                      Labels
+                      <Trash2 className="h-3.5 w-3.5" />
                     </Button>
-                  </div>
+                  )}
                 </div>
-
-                {/* Full width, below the row: inside it the tall notice drags the
-                    arrows and the switch down to the vertical middle. */}
-                {isOnline && !provider.loading && (
-                  <Alert>
-                    <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: set{" "}
-                          {provider.providerLabel || "a payment provider"} up 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>
-            );
-          })}
+
+              {/* The "card" option redirects to a provider-hosted payment page.
+                  Wiring a provider means implementing the two payment files —
+                  shared/commerce/card-payment.ts + functions/commerce/payment-webhook,
+                  see .agents/skills/commerce/references/online-payments.md. Until
+                  then, picking it at checkout answers 503 no_card_payment_provider.
+                  Deliberately not shown to the store operator — it's developer
+                  guidance, not store configuration. */}
+            </div>
+          ))}
         </CardContent>
       </Card>
 
@@ -209,7 +220,9 @@ export default function PaymentsSettings() {
         <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>
+              <DialogTitle>
+                {dialog.isNew ? "Add payment method" : dialog.gateway.method_title || dialog.gateway.title}
+              </DialogTitle>
             </DialogHeader>
             <div className="space-y-4">
               <div className="space-y-1.5">
@@ -227,9 +240,14 @@ export default function PaymentsSettings() {
                   value={dialog.gateway.description || ""}
                   onChange={(e) => setDialog({ ...dialog, gateway: { ...dialog.gateway, description: e.target.value } })}
                 />
+                {dialog.gateway.slug !== "card" && (
+                  <p className="text-xs text-muted-foreground">
+                    Also shown as the payment instructions after the order is placed.
+                  </p>
+                )}
               </div>
 
-              {dialog.gateway.slug === "offline" && (
+              {dialog.gateway.slug !== "card" && (
                 <BankAccountsEditor
                   accounts={dialog.gateway.settings?.account_details || []}
                   onChange={(account_details) =>
@@ -242,7 +260,7 @@ export default function PaymentsSettings() {
               <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
+                {dialog.isNew ? "Add" : "Save"}
               </Button>
             </DialogFooter>
           </DialogContent>

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

@@ -5,10 +5,8 @@ import PageHeader from "../../components/PageHeader";
 
 const TABS = [
   { seg: "general", label: "General" },
-  { seg: "products", label: "Products" },
   { seg: "inventory", label: "Inventory" },
-  { seg: "tax", label: "Tax" },
-  { seg: "shipping", label: "Shipping" },
+  { seg: "shipping-tax", label: "Shipping & Tax" },
   { seg: "payments", label: "Payments" },
   { seg: "emails", label: "Emails" },
   { seg: "webhooks", label: "Webhooks" },
@@ -20,7 +18,7 @@ export default function SettingsLayout() {
   const navigate = useNavigate();
   const location = useLocation();
 
-  // Current group segment: ".../settings/<seg>[/...]" (zone editor keeps "shipping" active).
+  // Current group segment: ".../settings/<seg>[/...]" (location editor keeps "shipping-tax" active).
   const afterSettings = location.pathname.split("/settings/")[1] || "general";
   const current = afterSettings.split("/")[0] || "general";
 

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

@@ -0,0 +1,191 @@
+import React, { useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
+import { Label } from "@/components/ui/label";
+import { Switch } from "@/components/ui/switch";
+import { Copy, Globe, MapPin, Pencil, Plus, Trash2 } from "lucide-react";
+import { toast } from "sonner";
+
+import { base44 } from "../../lib/api";
+import useAsync from "../../hooks/useAsync";
+import { useAdminHref } from "../../context/BasePathContext";
+import { useSettings } from "../../context/SettingsContext";
+import DataTable from "../../components/DataTable";
+import ConfirmDialog from "../../components/ConfirmDialog";
+import useMoney from "../../hooks/useMoney";
+import { COUNTRIES, CONTINENTS } from "../../lib/geo-data";
+
+function regionLabel(region) {
+  if (region.type === "continent") return CONTINENTS.find((c) => c.code === region.code)?.name || region.code;
+  if (region.type === "state") return region.code;
+  return COUNTRIES.find((c) => c.code === region.code)?.name || region.code;
+}
+
+/**
+ * Shipping & Tax Locations — the one screen for where the store sells and what
+ * it charges there: each location carries its shipping rates, tax groups and
+ * shipping tax. Rows edit, clone or delete; the editor is its own page.
+ */
+export default function ShippingTaxSettings() {
+  const href = useAdminHref();
+  const navigate = useNavigate();
+  const money = useMoney();
+  const settings = useSettings();
+  const { data: locations, loading, refetch } = useAsync(
+    () => base44.entities["commerce.ShippingTaxLocation"].list("order", 500),
+    []
+  );
+  const [confirmDelete, setConfirmDelete] = useState(null);
+  const [deleting, setDeleting] = useState(false);
+
+  const shippingEnabled = settings?.get("shipping", "enable_shipping", true) !== false;
+  const setShippingEnabled = async (v) => {
+    try {
+      await settings.saveGroup("shipping", { ...(settings.settings?.shipping || {}), enable_shipping: v });
+      toast.success(v ? "Shipping enabled" : "Shipping disabled");
+    } catch (e) {
+      toast.error(e.message || "Failed to save");
+    }
+  };
+
+  const clone = async (row) => {
+    try {
+      const { id: _id, created_date: _cd, updated_date: _ud, created_by: _cb, ...fields } = row;
+      await base44.entities["commerce.ShippingTaxLocation"].create({
+        ...fields,
+        name: `${row.name} (copy)`,
+        // fresh rate ids — carts/orders reference rates by id, so a clone must not share them
+        shipping_rates: (row.shipping_rates || []).map((r) => ({ ...r, id: crypto.randomUUID() })),
+      });
+      toast.success("Location cloned");
+      refetch();
+    } catch (e) {
+      toast.error(e.message || "Failed to clone location");
+    }
+  };
+
+  const doDelete = async () => {
+    setDeleting(true);
+    try {
+      await base44.entities["commerce.ShippingTaxLocation"].delete(confirmDelete.id);
+      toast.success("Location deleted");
+      setConfirmDelete(null);
+      refetch();
+    } catch (e) {
+      toast.error(e.message || "Failed to delete location");
+    } finally {
+      setDeleting(false);
+    }
+  };
+
+  const columns = [
+    {
+      key: "name",
+      label: "Location",
+      render: (row) => (
+        <div className="flex items-center gap-2">
+          {(row.regions || []).length ? (
+            <MapPin className="h-4 w-4 text-muted-foreground" />
+          ) : (
+            <Globe className="h-4 w-4 text-muted-foreground" />
+          )}
+          <span className="font-medium">{row.name}</span>
+        </div>
+      ),
+    },
+    {
+      key: "regions",
+      label: "Regions",
+      className: "hidden md:table-cell text-muted-foreground",
+      render: (row) => {
+        const regions = row.regions || [];
+        if (!regions.length) return "Everywhere else (fallback)";
+        const names = regions.slice(0, 3).map(regionLabel).join(", ");
+        return regions.length > 3 ? `${names} +${regions.length - 3}` : names;
+      },
+    },
+    {
+      key: "shipping",
+      label: "Shipping rates",
+      className: "hidden lg:table-cell text-muted-foreground",
+      render: (row) => {
+        const rates = row.shipping_rates || [];
+        if (!rates.length) return "none — nothing ships here";
+        return rates.map((r) => `${r.name || "Rate"} ${money.format(r.cost || 0)}`).join(" · ");
+      },
+    },
+    {
+      key: "tax",
+      label: "Tax",
+      className: "hidden lg:table-cell text-muted-foreground",
+      render: (row) => {
+        const groups = (row.tax_groups || []).filter((g) => (g.rates || []).some((r) => Number(r.rate) > 0));
+        const parts = groups.map(
+          (g) => `${g.name} ${(g.rates || []).reduce((a, r) => a + (Number(r.rate) || 0), 0)}%`
+        );
+        if (row.shipping_tax?.value > 0) {
+          parts.push(
+            row.shipping_tax.type === "fixed"
+              ? `Shipping ${money.format(row.shipping_tax.value)}`
+              : `Shipping ${row.shipping_tax.value}%`
+          );
+        }
+        return parts.length ? parts.join(" · ") : "no tax";
+      },
+    },
+  ];
+
+  return (
+    <div className="max-w-4xl space-y-4">
+      <Card>
+        <CardContent className="flex items-center justify-between gap-4 py-4">
+          <div>
+            <Label>Charge shipping</Label>
+            <p className="text-xs text-muted-foreground">
+              Off means carts never carry a shipping step — for fully virtual stores.
+            </p>
+          </div>
+          <Switch checked={shippingEnabled} onCheckedChange={setShippingEnabled} />
+        </CardContent>
+      </Card>
+
+      <div className="flex items-center justify-between">
+        <p className="text-sm text-muted-foreground">
+          A location covers the regions it names; the location with no regions catches everyone else.
+          Each carries its own shipping rates and tax.
+        </p>
+        <Button onClick={() => navigate(href("settings/shipping-tax/new"))}>
+          <Plus className="mr-2 h-4 w-4" />
+          Add location
+        </Button>
+      </div>
+
+      <DataTable
+        columns={columns}
+        rows={locations || []}
+        loading={loading}
+        rowActions={(row) => [
+          { label: "Edit", icon: Pencil, onClick: () => navigate(href(`settings/shipping-tax/${row.id}`)) },
+          { label: "Clone", icon: Copy, onClick: () => clone(row) },
+          { label: "Delete", icon: Trash2, destructive: true, onClick: () => setConfirmDelete(row) },
+        ]}
+        empty={{
+          icon: Globe,
+          title: "No locations yet",
+          description: "Add a location to define where you ship and what tax applies.",
+        }}
+      />
+
+      <ConfirmDialog
+        open={Boolean(confirmDelete)}
+        onOpenChange={(o) => !o && setConfirmDelete(null)}
+        title={`Delete "${confirmDelete?.name}"?`}
+        description="Orders already placed keep their charges; carts shipping to this location lose their options."
+        confirmLabel="Delete"
+        onConfirm={doDelete}
+        loading={deleting}
+      />
+    </div>
+  );
+}

package/src/commerce/admin/routes.jsx

@@ -19,11 +19,9 @@ import CustomerEditor from "./pages/customers/CustomerEditor";
 import Reports from "./pages/reports/Reports";
 import SettingsLayout from "./pages/settings/SettingsLayout";
 import GeneralSettings from "./pages/settings/GeneralSettings";
-import ProductsSettings from "./pages/settings/ProductsSettings";
 import InventorySettings from "./pages/settings/InventorySettings";
-import TaxSettings from "./pages/settings/TaxSettings";
-import ShippingSettings from "./pages/settings/ShippingSettings";
-import ShippingZoneEditor from "./pages/settings/ShippingZoneEditor";
+import ShippingTaxSettings from "./pages/settings/ShippingTaxSettings";
+import LocationEditor from "./pages/settings/LocationEditor";
 import PaymentsSettings from "./pages/settings/PaymentsSettings";
 import EmailsSettings from "./pages/settings/EmailsSettings";
 import Webhooks from "./pages/status/Webhooks";
@@ -52,11 +50,9 @@ export const ADMIN_ROUTES = [
   { path: "reports", label: "Reports" },
   { path: "settings", label: "Settings" },
   { path: "settings/general", label: "General" },
-  { path: "settings/products", label: "Products" },
   { path: "settings/inventory", label: "Inventory" },
-  { path: "settings/tax", label: "Tax" },
-  { path: "settings/shipping", label: "Shipping" },
-  { path: "settings/shipping/zones/:zoneId", label: "Shipping zone" },
+  { path: "settings/shipping-tax", label: "Shipping & Tax" },
+  { path: "settings/shipping-tax/:locationId", label: "Location" },
   { path: "settings/payments", label: "Payments" },
   { path: "settings/emails", label: "Emails" },
   { path: "settings/webhooks", label: "Webhooks" },
@@ -124,11 +120,9 @@ export default function AdminRoutes() {
       <Route path="settings" element={<SettingsLayout />}>
         <Route index element={<Navigate to="general" replace />} />
         <Route path="general" element={<GeneralSettings />} />
-        <Route path="products" element={<ProductsSettings />} />
         <Route path="inventory" element={<InventorySettings />} />
-        <Route path="tax" element={<TaxSettings />} />
-        <Route path="shipping" element={<ShippingSettings />} />
-        <Route path="shipping/zones/:zoneId" element={<ShippingZoneEditor />} />
+        <Route path="shipping-tax" element={<ShippingTaxSettings />} />
+        <Route path="shipping-tax/:locationId" element={<LocationEditor />} />
         <Route path="payments" element={<PaymentsSettings />} />
         <Route path="emails" element={<EmailsSettings />} />
         <Route path="webhooks" element={<Webhooks />} />

package/src/commerce/utils/index.js

@@ -10,10 +10,10 @@
  *
  * - `variants.js` — variant selection: map attribute selections (Size, Color)
  *   to a `ProductVariation` and back, per-option availability, variant price
- *   ranges. See `skills/commerce/references/storefront-product-page.md`.
+ *   ranges. See `.agents/skills/commerce/references/storefront-product-page.md`.
  * - `shipping-promos.js` — read the store's real free-shipping configuration so
  *   "Free shipping over €150" copy states a configured rule, not an invented
- *   number. See `skills/commerce/docs/api-storefront.md`.
+ *   number. See `.agents/skills/commerce/docs/api-storefront.md`.
  */
 export * from "./variants.js";
 export * from "./shipping-promos.js";