@base44/app-plugin-commerce 0.1.3 → 0.1.5

package/src/commerce/admin/pages/reports/Reports.jsx

@@ -28,7 +28,7 @@ import DataTable from "../../components/DataTable";
 import StatusBadge from "../../components/StatusBadge";
 import {
   COUPON_TYPES,
-  PRODUCT_TYPES,
+  PRODUCT_STATUSES,
   REVIEW_STATUSES,
 } from "../../lib/constants";
 
@@ -365,9 +365,9 @@ function TotalsTab() {
         renderLabel={(r) => <StatusBadge status={r.key} className="text-[10px]" />}
       />
       <TotalsCard
-        title="Products by type"
+        title="Products by status"
         loading={loading}
-        rows={normalizeTotals(d["products-totals"], PRODUCT_TYPES)}
+        rows={normalizeTotals(d["products-totals"], PRODUCT_STATUSES)}
       />
       <TotalsCard title="Customers" loading={loading} rows={normalizeTotals(d["customers-totals"])} />
       <TotalsCard

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

@@ -24,18 +24,16 @@ import {
 import { Settings2 } from "lucide-react";
 import { EMAIL_TYPES } from "../../lib/constants";
 import { call } from "../../lib/api";
-import { useSettings } from "../../context/SettingsContext";
 import useGroupForm from "./useGroupForm";
 
 const DEFAULTS = {
-  from_name: "",   // blank: the backend inherits general.store_name
+  store_name: "",
   admin_recipients: [],
 };
 
 export default function EmailsSettings() {
   const { form, setField, SaveButton } = useGroupForm("emails", DEFAULTS);
-  const { get } = useSettings();
-  const storeName = get("general", "store_name", "");
+  const storeName = form.store_name || "";
   const [activeId, setActiveId] = useState(null);
   // Resolved by the backend — listing admin users needs service role.
   const [effective, setEffective] = useState(null);
@@ -46,8 +44,7 @@ export default function EmailsSettings() {
       .catch(() => setEffective(null));
   }, []);
 
-  // Same shape as the "From" name field: the fallback is the placeholder, and the
-  // hint bolds the value actually in use.
+  // The fallback is the placeholder, and the hint bolds the value actually in use.
   const adminUsers = (effective?.admin_users ?? []).join(", ");
 
   // Per-type config lives at the top level of the `emails` group, keyed by type
@@ -75,23 +72,24 @@ export default function EmailsSettings() {
           <div className="space-y-1.5">
               <CardTitle>Sender options</CardTitle>
               <CardDescription>
-                The name transactional emails are sent from. The sending address is controlled by your Base44
-                email configuration, not here.
+                How transactional emails are named, and who gets the admin copies. The sending
+                address is controlled by your Base44 email configuration, not here.
               </CardDescription>
           </div>
           <SaveButton />
         </CardHeader>
         <CardContent className="grid gap-4 sm:grid-cols-2">
           <div className="space-y-1.5 sm:col-span-2">
-            <Label>“From” name</Label>
+            <Label>Store name</Label>
             <Input
-              value={form.from_name || ""}
-              placeholder={storeName || "Your store name"}
-              onChange={(e) => setField("from_name", e.target.value)}
+              value={form.store_name || ""}
+              placeholder="Your store's name"
+              onChange={(e) => setField("store_name", e.target.value)}
             />
             <p className="text-xs text-muted-foreground">
-              Leave blank to send as {storeName ? <strong>{storeName}</strong> : "your store name"} —
-              the store name from Settings → General.
+              Used in the subject line and as the “From” name — e.g.{" "}
+              “[{storeName || "Your store"}]: New order #1002”, sent from {storeName || "Your store"}.
+              Leave it blank to send as your app's name.
             </p>
           </div>
           <div className="space-y-1.5 sm:col-span-2">

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

@@ -2,7 +2,6 @@ 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,
@@ -10,19 +9,11 @@ import {
   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: ",",
@@ -32,41 +23,19 @@ const DEFAULTS = {
 
 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>
+            <CardTitle>Checkout</CardTitle>
+            <CardDescription>Where customers land once they come back from paying.</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">
+        <CardContent>
+          <div className="space-y-1.5">
             <Label>Payment return path</Label>
             <Input
               placeholder="/order-received"
@@ -74,89 +43,10 @@ export default function GeneralSettings() {
               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.
+              The storefront route customers come back to after paying, on your storefront's own
+              address. 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>
 

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

@@ -1,5 +1,5 @@
 import React, { useState } from "react";
-import { Card, CardContent } from "@/components/ui/card";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
@@ -88,25 +88,92 @@ export default function PaymentsSettings() {
   }
 
   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>
+    <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>
+        <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>
+
+                  <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. */}
+                    <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,
+                            },
+                          },
+                        })
+                      }
+                    >
+                      <Settings2 className="mr-2 h-4 w-4" />
+                      Labels
+                    </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 className="mt-3">
+                  <Alert>
                     <Info className="h-4 w-4" />
                     {provider.connected ? (
                       <>
@@ -121,11 +188,11 @@ export default function PaymentsSettings() {
                       <>
                         <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{" "}
+                          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>
                       </>
@@ -133,42 +200,10 @@ export default function PaymentsSettings() {
                   </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>
-        );
-      })}
+            );
+          })}
+        </CardContent>
+      </Card>
 
       {dialog && (
         <Dialog open onOpenChange={(o) => !o && setDialog(null)}>
@@ -194,7 +229,7 @@ export default function PaymentsSettings() {
                 />
               </div>
 
-              {dialog.gateway.slug === "bacs" && (
+              {dialog.gateway.slug === "offline" && (
                 <BankAccountsEditor
                   accounts={dialog.gateway.settings?.account_details || []}
                   onChange={(account_details) =>
@@ -225,7 +260,11 @@ function BankAccountsEditor({ accounts, onChange }) {
   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.length === 0 && (
+        <p className="text-xs text-muted-foreground">
+          None yet — fine for cash on delivery; add one for bank transfer.
+        </p>
+      )}
       {accounts.map((a, i) => (
         <div key={i} className="space-y-2 rounded-md border p-3">
           <div className="flex items-center justify-between">

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

@@ -1,6 +1,5 @@
 import React from "react";
 import { Outlet, useLocation, useNavigate } from "react-router-dom";
-import { useSettings } from "../../context/SettingsContext";
 import { useAdminHref } from "../../context/BasePathContext";
 import PageHeader from "../../components/PageHeader";
 
@@ -12,11 +11,11 @@ const TABS = [
   { seg: "shipping", label: "Shipping" },
   { seg: "payments", label: "Payments" },
   { seg: "emails", label: "Emails" },
+  { seg: "webhooks", label: "Webhooks" },
 ];
 
 /** Layout route for /settings/*: horizontal group tabs + nested page via <Outlet/>. */
 export default function SettingsLayout() {
-  const { get } = useSettings();
   const href = useAdminHref();
   const navigate = useNavigate();
   const location = useLocation();
@@ -25,14 +24,11 @@ export default function SettingsLayout() {
   const afterSettings = location.pathname.split("/settings/")[1] || "general";
   const current = afterSettings.split("/")[0] || "general";
 
-  const enableTaxes = get("general", "enable_taxes", true);
-  const tabs = TABS.filter((t) => t.seg !== "tax" || enableTaxes);
-
   return (
     <div className="space-y-4">
       <PageHeader title="Settings" description="Configure how your store works." />
       <div className="flex flex-wrap gap-1 border-b">
-        {tabs.map((t) => (
+        {TABS.map((t) => (
           <button
             key={t.seg}
             type="button"

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

@@ -75,7 +75,6 @@ function TaxOptions({ classes }) {
               <SelectContent>
                 <SelectItem value="shipping">Customer shipping address</SelectItem>
                 <SelectItem value="billing">Customer billing address</SelectItem>
-                <SelectItem value="base">Shop base address</SelectItem>
               </SelectContent>
             </Select>
           </div>

package/src/commerce/admin/pages/status/WebhookEditor.jsx

@@ -86,7 +86,7 @@ export default function WebhookEditor() {
       if (isNew) {
         const created = await base44.entities["commerce.Webhook"].create(payload);
         toast.success("Webhook created");
-        navigate(href(`webhooks/${created.id}`));
+        navigate(href(`settings/webhooks/${created.id}`));
       } else {
         await base44.entities["commerce.Webhook"].update(id, payload);
         toast.success("Webhook saved");
@@ -103,7 +103,7 @@ export default function WebhookEditor() {
     try {
       await base44.entities["commerce.Webhook"].delete(id);
       toast.success("Webhook deleted");
-      navigate(href("webhooks"));
+      navigate(href("settings/webhooks"));
     } catch (err) {
       toast.error(err.message || "Failed to delete");
       setDeleting(false);
@@ -135,7 +135,7 @@ export default function WebhookEditor() {
     <div className="max-w-3xl space-y-4">
       <PageHeader
         title={isNew ? "Add webhook" : "Edit webhook"}
-        backHref={href("webhooks")}
+        backHref={href("settings/webhooks")}
         actions={
           !isNew && (
             <>

package/src/commerce/admin/pages/status/Webhooks.jsx

@@ -35,7 +35,7 @@ export default function Webhooks() {
         title="Webhooks"
         description="Notify external services when store events occur."
         actions={
-          <Button onClick={() => navigate(href("webhooks/new"))}>
+          <Button onClick={() => navigate(href("settings/webhooks/new"))}>
             <Plus className="mr-2 h-4 w-4" />
             Add webhook
           </Button>
@@ -45,7 +45,7 @@ export default function Webhooks() {
         columns={columns}
         rows={hooks.data || []}
         loading={hooks.loading}
-        onRowClick={(w) => navigate(href(`webhooks/${w.id}`))}
+        onRowClick={(w) => navigate(href(`settings/webhooks/${w.id}`))}
         empty={{ icon: WebhookIcon, title: "No webhooks", description: "Create a webhook to POST event payloads to an external URL." }}
       />
     </div>

package/src/commerce/admin/routes.jsx

@@ -11,9 +11,6 @@ import OrderEditor from "./pages/orders/OrderEditor";
 import ProductsList from "./pages/products/ProductsList";
 import ProductEditor from "./pages/products/ProductEditor";
 import Categories from "./pages/products/Categories";
-import Tags from "./pages/products/Tags";
-import Attributes from "./pages/products/Attributes";
-import AttributeTerms from "./pages/products/AttributeTerms";
 import Reviews from "./pages/products/Reviews";
 import CouponsList from "./pages/coupons/CouponsList";
 import CouponEditor from "./pages/coupons/CouponEditor";
@@ -44,9 +41,6 @@ export const ADMIN_ROUTES = [
   { path: "products", label: "Products" },
   { path: "products/new", label: "Add product" },
   { path: "products/categories", label: "Categories" },
-  { path: "products/tags", label: "Tags" },
-  { path: "products/attributes", label: "Attributes" },
-  { path: "products/attributes/:id/terms", label: "Terms" },
   { path: "products/reviews", label: "Reviews" },
   { path: "products/:id", label: "Edit product" },
   { path: "coupons", label: "Coupons" },
@@ -65,9 +59,9 @@ export const ADMIN_ROUTES = [
   { path: "settings/shipping/zones/:zoneId", label: "Shipping zone" },
   { path: "settings/payments", label: "Payments" },
   { path: "settings/emails", label: "Emails" },
-  { path: "webhooks", label: "Webhooks" },
-  { path: "webhooks/new", label: "Add webhook" },
-  { path: "webhooks/:id", label: "Webhook" },
+  { path: "settings/webhooks", label: "Webhooks" },
+  { path: "settings/webhooks/new", label: "Add webhook" },
+  { path: "settings/webhooks/:id", label: "Webhook" },
 ];
 
 function NotFound() {
@@ -89,8 +83,9 @@ function NotFound() {
 
 /**
  * Catch-all. A URL that still contains the *mount pattern* rather than a real
- * path — `/admin/*` (the `<Route path="/admin/*">` pattern pasted into the
- * address bar or copied into a nav link), or a leftover `/admin/:id` — is a
+ * path — `/store-admin/*` (the `<Route path="/store-admin/*">` pattern pasted
+ * into the address bar or copied into a nav link), or a leftover
+ * `/store-admin/:id` — is a
  * wiring artifact, not a page the admin asked for: land on the dashboard
  * instead of showing a dead end. Anything else is a genuine 404.
  */
@@ -100,7 +95,7 @@ function UnmatchedRoute() {
   return isMountPatternPath(params["*"]) ? <Navigate to={href()} replace /> : <NotFound />;
 }
 
-/** All admin routes. Rendered inside AdminLayout; mount AdminApp at `/admin/*`. */
+/** All admin routes. Rendered inside AdminLayout; mount AdminApp at `/store-admin/*`. */
 export default function AdminRoutes() {
   return (
     <Routes>
@@ -113,9 +108,6 @@ export default function AdminRoutes() {
       <Route path="products" element={<ProductsList />} />
       <Route path="products/new" element={<ProductEditor />} />
       <Route path="products/categories" element={<Categories />} />
-      <Route path="products/tags" element={<Tags />} />
-      <Route path="products/attributes" element={<Attributes />} />
-      <Route path="products/attributes/:id/terms" element={<AttributeTerms />} />
       <Route path="products/reviews" element={<Reviews />} />
       <Route path="products/:id" element={<ProductEditor />} />
 
@@ -139,12 +131,11 @@ export default function AdminRoutes() {
         <Route path="shipping/zones/:zoneId" element={<ShippingZoneEditor />} />
         <Route path="payments" element={<PaymentsSettings />} />
         <Route path="emails" element={<EmailsSettings />} />
+        <Route path="webhooks" element={<Webhooks />} />
+        <Route path="webhooks/new" element={<WebhookEditor />} />
+        <Route path="webhooks/:id" element={<WebhookEditor />} />
       </Route>
 
-      <Route path="webhooks" element={<Webhooks />} />
-      <Route path="webhooks/new" element={<WebhookEditor />} />
-      <Route path="webhooks/:id" element={<WebhookEditor />} />
-
       <Route path="*" element={<UnmatchedRoute />} />
     </Routes>
   );

package/src/commerce/utils/index.js

@@ -9,8 +9,8 @@
  *   import { resolveSelection, defaultSelection, selectOption } from "@/commerce/utils";
  *
  * - `variants.js` — variant selection: map attribute selections (Size, Color)
- *   to a `ProductVariation` and back, per-option availability, variable-product
- *   price ranges. See `skills/commerce/references/storefront-product-page.md`.
+ *   to a `ProductVariation` and back, per-option availability, variant price
+ *   ranges. See `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`.