@base44/app-plugin-commerce 0.7.0 → 0.8.0

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

@@ -15,11 +15,12 @@ import DataTable from "../../components/DataTable";
 import ConfirmDialog from "../../components/ConfirmDialog";
 import useMoney from "../../hooks/useMoney";
 import { COUNTRIES, CONTINENTS } from "../../lib/geo-data";
+import { t, countryName } from "../../i18n";
 
 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;
+  return countryName(region.code, COUNTRIES.find((c) => c.code === region.code)?.name || region.code);
 }
 
 /**
@@ -43,9 +44,9 @@ export default function ShippingTaxSettings() {
   const setShippingEnabled = async (v) => {
     try {
       await settings.saveGroup("shipping", { ...(settings.settings?.shipping || {}), enable_shipping: v });
-      toast.success(v ? "Shipping enabled" : "Shipping disabled");
+      toast.success(v ? t("settings.shipping.enabled_toast") : t("settings.shipping.disabled_toast"));
     } catch (e) {
-      toast.error(e.message || "Failed to save");
+      toast.error(e.message || t("settings.save_failed"));
     }
   };
 
@@ -54,14 +55,14 @@ export default function ShippingTaxSettings() {
       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)`,
+        name: t("settings.shipping.copy_name", { name: row.name }),
         // 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");
+      toast.success(t("settings.shipping.location_cloned"));
       refetch();
     } catch (e) {
-      toast.error(e.message || "Failed to clone location");
+      toast.error(e.message || t("settings.shipping.clone_failed"));
     }
   };
 
@@ -69,11 +70,11 @@ export default function ShippingTaxSettings() {
     setDeleting(true);
     try {
       await base44.entities["commerce.ShippingTaxLocation"].delete(confirmDelete.id);
-      toast.success("Location deleted");
+      toast.success(t("settings.shipping.location_deleted"));
       setConfirmDelete(null);
       refetch();
     } catch (e) {
-      toast.error(e.message || "Failed to delete location");
+      toast.error(e.message || t("settings.shipping.delete_failed"));
     } finally {
       setDeleting(false);
     }
@@ -82,7 +83,7 @@ export default function ShippingTaxSettings() {
   const columns = [
     {
       key: "name",
-      label: "Location",
+      label: t("settings.shipping.location"),
       render: (row) => (
         <div className="flex items-center gap-2">
           {(row.regions || []).length ? (
@@ -96,28 +97,28 @@ export default function ShippingTaxSettings() {
     },
     {
       key: "regions",
-      label: "Regions",
+      label: t("settings.shipping.regions"),
       className: "hidden md:table-cell text-muted-foreground",
       render: (row) => {
         const regions = row.regions || [];
-        if (!regions.length) return "Everywhere else (fallback)";
+        if (!regions.length) return t("settings.shipping.everywhere_else");
         const names = regions.slice(0, 3).map(regionLabel).join(", ");
         return regions.length > 3 ? `${names} +${regions.length - 3}` : names;
       },
     },
     {
       key: "shipping",
-      label: "Shipping rates",
+      label: t("settings.shipping.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(" · ");
+        if (!rates.length) return t("settings.shipping.no_rates");
+        return rates.map((r) => `${r.name || t("settings.shipping.rate_fallback")} ${money.format(r.cost || 0)}`).join(" · ");
       },
     },
     {
       key: "tax",
-      label: "Tax",
+      label: t("settings.shipping.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));
@@ -127,11 +128,11 @@ export default function ShippingTaxSettings() {
         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}%`
+              ? t("settings.shipping.shipping_amount", { amount: money.format(row.shipping_tax.value) })
+              : t("settings.shipping.shipping_amount", { amount: `${row.shipping_tax.value}%` })
           );
         }
-        return parts.length ? parts.join(" · ") : "no tax";
+        return parts.length ? parts.join(" · ") : t("settings.shipping.no_tax");
       },
     },
   ];
@@ -141,9 +142,9 @@ export default function ShippingTaxSettings() {
       <Card>
         <CardContent className="flex items-center justify-between gap-4 py-4">
           <div>
-            <Label>Charge shipping</Label>
+            <Label>{t("settings.shipping.charge_shipping")}</Label>
             <p className="text-xs text-muted-foreground">
-              Off means carts never carry a shipping step — for fully virtual stores.
+              {t("settings.shipping.charge_shipping_hint")}
             </p>
           </div>
           <Switch checked={shippingEnabled} onCheckedChange={setShippingEnabled} />
@@ -152,12 +153,11 @@ export default function ShippingTaxSettings() {
 
       <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.
+          {t("settings.shipping.locations_intro")}
         </p>
         <Button onClick={() => navigate(href("settings/shipping-tax/new"))}>
           <Plus className="mr-2 h-4 w-4" />
-          Add location
+          {t("settings.shipping.add_location")}
         </Button>
       </div>
 
@@ -166,23 +166,23 @@ export default function ShippingTaxSettings() {
         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) },
+          { label: t("common.edit"), icon: Pencil, onClick: () => navigate(href(`settings/shipping-tax/${row.id}`)) },
+          { label: t("settings.shipping.clone"), icon: Copy, onClick: () => clone(row) },
+          { label: t("common.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.",
+          title: t("settings.shipping.empty_title"),
+          description: t("settings.shipping.empty_description"),
         }}
       />
 
       <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"
+        title={t("settings.shipping.delete_confirm_title", { name: confirmDelete?.name })}
+        description={t("settings.shipping.delete_confirm_description")}
+        confirmLabel={t("common.delete")}
         onConfirm={doDelete}
         loading={deleting}
       />

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

@@ -3,6 +3,7 @@ import { toast } from "sonner";
 import { Button } from "@/components/ui/button";
 import { Loader2 } from "lucide-react";
 import { useSettings } from "../../context/SettingsContext";
+import { t } from "../../i18n";
 
 /**
  * Standard form state for a StoreSettings group page.
@@ -46,10 +47,10 @@ export default function useGroupForm(group, defaults) {
     setSaving(true);
     try {
       await saveGroup(group, override || form);
-      toast.success("Settings saved");
+      toast.success(t("settings.saved"));
       setDirty(false);
     } catch (err) {
-      toast.error(err.message || "Failed to save settings");
+      toast.error(err.message || t("settings.save_settings_failed"));
     } finally {
       setSaving(false);
     }
@@ -65,7 +66,7 @@ export default function useGroupForm(group, defaults) {
       return (
         <Button size="sm" onClick={() => doSave()} disabled={!d || s}>
           {s && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
-          Save changes
+          {t("settings.save_changes")}
         </Button>
       );
     },

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

@@ -21,6 +21,7 @@ import useAsync from "../../hooks/useAsync";
 import { useAdminHref } from "../../context/BasePathContext";
 import { WEBHOOK_STATUSES, WEBHOOK_TOPICS } from "../../lib/constants";
 import { formatDateTime } from "../../lib/format";
+import { t } from "../../i18n";
 
 const blank = {
   name: "",
@@ -56,7 +57,7 @@ export default function WebhookEditor() {
     setLoading(true);
     base44.entities["commerce.Webhook"].get(id)
       .then((w) => !cancelled && w && setForm({ ...blank, ...w }))
-      .catch((err) => toast.error(err.message || "Failed to load webhook"))
+      .catch((err) => toast.error(err.message || t("webhooks.load_failed")))
       .finally(() => !cancelled && setLoading(false));
     return () => {
       cancelled = true;
@@ -67,7 +68,7 @@ export default function WebhookEditor() {
 
   const save = async () => {
     if (!form.name.trim() || !form.delivery_url.trim()) {
-      toast.error("Name and delivery URL are required");
+      toast.error(t("webhooks.name_url_required"));
       return;
     }
     setSaving(true);
@@ -85,14 +86,14 @@ export default function WebhookEditor() {
       };
       if (isNew) {
         const created = await base44.entities["commerce.Webhook"].create(payload);
-        toast.success("Webhook created");
+        toast.success(t("webhooks.created_toast"));
         navigate(href(`settings/webhooks/${created.id}`));
       } else {
         await base44.entities["commerce.Webhook"].update(id, payload);
-        toast.success("Webhook saved");
+        toast.success(t("webhooks.saved"));
       }
     } catch (err) {
-      toast.error(err.message || "Failed to save webhook");
+      toast.error(err.message || t("webhooks.save_failed"));
     } finally {
       setSaving(false);
     }
@@ -102,10 +103,10 @@ export default function WebhookEditor() {
     setDeleting(true);
     try {
       await base44.entities["commerce.Webhook"].delete(id);
-      toast.success("Webhook deleted");
+      toast.success(t("webhooks.deleted"));
       navigate(href("settings/webhooks"));
     } catch (err) {
-      toast.error(err.message || "Failed to delete");
+      toast.error(err.message || t("webhooks.delete_failed"));
       setDeleting(false);
     }
   };
@@ -115,7 +116,7 @@ export default function WebhookEditor() {
     try {
       const res = await call("admin-webhooks", "test", { webhook_id: id });
       const code = res?.response_code ?? res?.delivery?.response_code;
-      toast.success(code ? `Test delivered — HTTP ${code}` : "Test delivered");
+      toast.success(code ? t("webhooks.test_delivered_code", { code }) : t("webhooks.test_delivered"));
     } catch {
       /* call() already toasts */
     } finally {
@@ -134,17 +135,17 @@ export default function WebhookEditor() {
   return (
     <div className="max-w-3xl space-y-4">
       <PageHeader
-        title={isNew ? "Add webhook" : "Edit webhook"}
+        title={isNew ? t("routes.webhooks_new") : t("webhooks.edit_title")}
         backHref={href("settings/webhooks")}
         actions={
           !isNew && (
             <>
               <Button variant="outline" onClick={sendTest} disabled={testing}>
                 {testing ? <Loader2 className="mr-2 h-4 w-4 animate-spin" /> : <Send className="mr-2 h-4 w-4" />}
-                Send test
+                {t("webhooks.send_test")}
               </Button>
               <Button variant="outline" className="text-destructive" onClick={() => setConfirmDelete(true)}>
-                Delete
+                {t("common.delete")}
               </Button>
             </>
           )
@@ -153,15 +154,15 @@ export default function WebhookEditor() {
 
       <Card>
         <CardHeader>
-          <CardTitle>Webhook details</CardTitle>
+          <CardTitle>{t("webhooks.details")}</CardTitle>
         </CardHeader>
         <CardContent className="grid gap-4 sm:grid-cols-2">
           <div className="space-y-1.5 sm:col-span-2">
-            <Label>Name</Label>
+            <Label>{t("common.name")}</Label>
             <Input value={form.name} onChange={(e) => set("name", e.target.value)} />
           </div>
           <div className="space-y-1.5">
-            <Label>Status</Label>
+            <Label>{t("common.status")}</Label>
             <Select value={form.status} onValueChange={(v) => set("status", v)}>
               <SelectTrigger><SelectValue /></SelectTrigger>
               <SelectContent>
@@ -172,29 +173,31 @@ export default function WebhookEditor() {
             </Select>
           </div>
           <div className="space-y-1.5">
-            <Label>Topic</Label>
+            <Label>{t("webhooks.topic")}</Label>
             <Select value={form.topic} onValueChange={(v) => set("topic", v)}>
               <SelectTrigger><SelectValue /></SelectTrigger>
               <SelectContent>
-                {WEBHOOK_TOPICS.map((t) => (
-                  <SelectItem key={t} value={t}>{t}</SelectItem>
+                {WEBHOOK_TOPICS.map((topic) => (
+                  <SelectItem key={topic} value={topic}>{topic}</SelectItem>
                 ))}
               </SelectContent>
             </Select>
           </div>
           <div className="space-y-1.5 sm:col-span-2">
-            <Label>Delivery URL</Label>
+            <Label>{t("webhooks.delivery_url")}</Label>
             <Input placeholder="https://example.com/webhooks/incoming" value={form.delivery_url} onChange={(e) => set("delivery_url", e.target.value)} />
           </div>
           <div className="space-y-1.5 sm:col-span-2">
-            <Label>Secret</Label>
+            <Label>{t("webhooks.secret")}</Label>
             <div className="flex gap-2">
-              <Input value={form.secret} onChange={(e) => set("secret", e.target.value)} placeholder="Used to sign the payload (HMAC-SHA256)" />
-              <Button variant="outline" type="button" onClick={() => set("secret", genSecret())}>Generate</Button>
+              <Input value={form.secret} onChange={(e) => set("secret", e.target.value)} placeholder={t("webhooks.secret_placeholder")} />
+              <Button variant="outline" type="button" onClick={() => set("secret", genSecret())}>
+                {t("webhooks.generate")}
+              </Button>
             </div>
           </div>
           <div className="space-y-1.5">
-            <Label>API version</Label>
+            <Label>{t("webhooks.api_version")}</Label>
             <Input value={form.api_version} disabled />
           </div>
         </CardContent>
@@ -203,7 +206,7 @@ export default function WebhookEditor() {
       <div>
         <Button onClick={save} disabled={saving}>
           {saving && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
-          {isNew ? "Create webhook" : "Save changes"}
+          {isNew ? t("webhooks.create") : t("settings.save_changes")}
         </Button>
       </div>
 
@@ -212,8 +215,8 @@ export default function WebhookEditor() {
       <ConfirmDialog
         open={confirmDelete}
         onOpenChange={setConfirmDelete}
-        title="Delete webhook?"
-        confirmLabel="Delete"
+        title={t("webhooks.delete_confirm")}
+        confirmLabel={t("common.delete")}
         loading={deleting}
         onConfirm={remove}
       />
@@ -233,7 +236,7 @@ function DeliveriesCard({ webhookId }) {
     setRedelivering(deliveryId);
     try {
       await call("admin-webhooks", "redeliver", { delivery_id: deliveryId });
-      toast.success("Redelivered");
+      toast.success(t("webhooks.redelivered"));
       deliveries.refetch();
     } catch {
       /* toasted */
@@ -245,12 +248,12 @@ function DeliveriesCard({ webhookId }) {
   return (
     <Card>
       <CardHeader>
-        <CardTitle>Recent deliveries</CardTitle>
+        <CardTitle>{t("webhooks.recent_deliveries")}</CardTitle>
       </CardHeader>
       <CardContent className="space-y-2">
         {deliveries.loading && <Loader2 className="h-5 w-5 animate-spin text-muted-foreground" />}
         {!deliveries.loading && (deliveries.data || []).length === 0 && (
-          <p className="text-sm text-muted-foreground">No deliveries yet.</p>
+          <p className="text-sm text-muted-foreground">{t("webhooks.no_deliveries")}</p>
         )}
         {(deliveries.data || []).map((d) => {
           const open = expanded === d.id;
@@ -274,16 +277,16 @@ function DeliveriesCard({ webhookId }) {
               {open && (
                 <div className="space-y-2 border-t px-3 py-2 text-xs">
                   <div>
-                    <div className="mb-1 font-medium">Request</div>
+                    <div className="mb-1 font-medium">{t("webhooks.request")}</div>
                     <pre className="max-h-48 overflow-auto rounded bg-muted p-2">{d.request_body || "—"}</pre>
                   </div>
                   <div>
-                    <div className="mb-1 font-medium">Response</div>
+                    <div className="mb-1 font-medium">{t("webhooks.response")}</div>
                     <pre className="max-h-48 overflow-auto rounded bg-muted p-2">{d.response_body || "—"}</pre>
                   </div>
                   <Button size="sm" variant="outline" disabled={redelivering === d.id} onClick={() => redeliver(d.id)}>
                     {redelivering === d.id && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
-                    Redeliver
+                    {t("webhooks.redeliver")}
                   </Button>
                 </div>
               )}

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

@@ -10,6 +10,7 @@ import useAsync from "../../hooks/useAsync";
 import { useAdminHref } from "../../context/BasePathContext";
 import { WEBHOOK_STATUSES } from "../../lib/constants";
 import { formatDate } from "../../lib/format";
+import { t } from "../../i18n";
 
 export default function Webhooks() {
   const navigate = useNavigate();
@@ -17,27 +18,27 @@ export default function Webhooks() {
   const hooks = useAsync(() => base44.entities["commerce.Webhook"].list("-created_date", 200), []);
 
   const columns = [
-    { key: "name", label: "Name", render: (w) => <span className="font-medium">{w.name}</span> },
-    { key: "status", label: "Status", render: (w) => <StatusBadge status={w.status} map={WEBHOOK_STATUSES} /> },
-    { key: "topic", label: "Topic", render: (w) => <code className="text-xs">{w.topic}</code> },
+    { key: "name", label: t("common.name"), render: (w) => <span className="font-medium">{w.name}</span> },
+    { key: "status", label: t("common.status"), render: (w) => <StatusBadge status={w.status} map={WEBHOOK_STATUSES} /> },
+    { key: "topic", label: t("webhooks.topic"), render: (w) => <code className="text-xs">{w.topic}</code> },
     {
       key: "delivery_url",
-      label: "Delivery URL",
+      label: t("webhooks.delivery_url"),
       render: (w) => <span className="block max-w-xs truncate text-sm text-muted-foreground">{w.delivery_url}</span>,
     },
-    { key: "failure_count", label: "Failures", render: (w) => w.failure_count ?? 0 },
-    { key: "created_date", label: "Created", render: (w) => formatDate(w.created_date) },
+    { key: "failure_count", label: t("webhooks.failures"), render: (w) => w.failure_count ?? 0 },
+    { key: "created_date", label: t("webhooks.created"), render: (w) => formatDate(w.created_date) },
   ];
 
   return (
     <div className="space-y-4">
       <PageHeader
-        title="Webhooks"
-        description="Notify external services when store events occur."
+        title={t("routes.settings_webhooks")}
+        description={t("webhooks.description")}
         actions={
           <Button onClick={() => navigate(href("settings/webhooks/new"))}>
             <Plus className="mr-2 h-4 w-4" />
-            Add webhook
+            {t("routes.webhooks_new")}
           </Button>
         }
       />
@@ -46,7 +47,7 @@ export default function Webhooks() {
         rows={hooks.data || []}
         loading={hooks.loading}
         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." }}
+        empty={{ icon: WebhookIcon, title: t("webhooks.empty_title"), description: t("webhooks.empty_description") }}
       />
     </div>
   );

package/src/commerce/admin/routes.jsx

@@ -4,6 +4,7 @@ import { PackageX } from "lucide-react";
 
 import { useAdminHref } from "./context/BasePathContext";
 import { isMountPatternPath } from "./lib/paths";
+import { t } from "./i18n";
 
 import Dashboard from "./pages/Dashboard";
 import OrdersList from "./pages/orders/OrdersList";
@@ -32,32 +33,32 @@ import WebhookEditor from "./pages/status/WebhookEditor";
  * Used by the router below and by Topbar breadcrumbs.
  */
 export const ADMIN_ROUTES = [
-  { path: "", label: "Dashboard" },
-  { path: "orders", label: "Orders" },
-  { path: "orders/new", label: "Add order" },
-  { path: "orders/:id", label: "Order" },
-  { path: "products", label: "Products" },
-  { path: "products/new", label: "Add product" },
-  { path: "products/categories", label: "Categories" },
-  { path: "products/reviews", label: "Reviews" },
-  { path: "products/:id", label: "Edit product" },
-  { path: "coupons", label: "Coupons" },
-  { path: "coupons/new", label: "Add coupon" },
-  { path: "coupons/:id", label: "Edit coupon" },
-  { path: "customers", label: "Customers" },
-  { path: "customers/new", label: "Add customer" },
-  { path: "customers/:id", label: "Customer" },
-  { path: "reports", label: "Reports" },
-  { path: "settings", label: "Settings" },
-  { path: "settings/general", label: "General" },
-  { path: "settings/inventory", label: "Inventory" },
-  { 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" },
-  { path: "settings/webhooks/new", label: "Add webhook" },
-  { path: "settings/webhooks/:id", label: "Webhook" },
+  { path: "", label: t("routes.dashboard") },
+  { path: "orders", label: t("routes.orders") },
+  { path: "orders/new", label: t("routes.orders_new") },
+  { path: "orders/:id", label: t("routes.order") },
+  { path: "products", label: t("routes.products") },
+  { path: "products/new", label: t("routes.products_new") },
+  { path: "products/categories", label: t("routes.categories") },
+  { path: "products/reviews", label: t("routes.reviews") },
+  { path: "products/:id", label: t("routes.products_edit") },
+  { path: "coupons", label: t("routes.coupons") },
+  { path: "coupons/new", label: t("routes.coupons_new") },
+  { path: "coupons/:id", label: t("routes.coupons_edit") },
+  { path: "customers", label: t("routes.customers") },
+  { path: "customers/new", label: t("routes.customers_new") },
+  { path: "customers/:id", label: t("routes.customer") },
+  { path: "reports", label: t("routes.reports") },
+  { path: "settings", label: t("routes.settings") },
+  { path: "settings/general", label: t("routes.settings_general") },
+  { path: "settings/inventory", label: t("routes.settings_inventory") },
+  { path: "settings/shipping-tax", label: t("routes.settings_shipping_tax") },
+  { path: "settings/shipping-tax/:locationId", label: t("routes.settings_location") },
+  { path: "settings/payments", label: t("routes.settings_payments") },
+  { path: "settings/emails", label: t("routes.settings_emails") },
+  { path: "settings/webhooks", label: t("routes.settings_webhooks") },
+  { path: "settings/webhooks/new", label: t("routes.webhooks_new") },
+  { path: "settings/webhooks/:id", label: t("routes.webhook") },
 ];
 
 function NotFound() {
@@ -66,12 +67,12 @@ function NotFound() {
   return (
     <div className="flex flex-col items-center justify-center py-24 text-center">
       <PackageX className="mb-3 h-10 w-10 text-muted-foreground/50" />
-      <h2 className="text-lg font-semibold">Page not found</h2>
+      <h2 className="text-lg font-semibold">{t("notfound.title")}</h2>
       <p className="text-sm text-muted-foreground">
-        <span className="font-mono">{pathname}</span> is not an admin page.
+        <span className="font-mono">{pathname}</span> — {t("notfound.description")}
       </p>
       <Link to={href()} className="mt-4 text-sm font-medium underline">
-        Back to the dashboard
+        {t("notfound.back")}
       </Link>
     </div>
   );
@@ -91,20 +92,7 @@ function UnmatchedRoute() {
   return isMountPatternPath(params["*"]) ? <Navigate to={href()} replace /> : <NotFound />;
 }
 
-/**
- * Every admin route, matched relative to the mount point.
- *
- * The app's `src/App.jsx` declares the handful of screens the builder's page
- * picker should list — the picker only sees literal `<Route>` JSX in that file —
- * and sends the rest here on a splat: `<Route path="*" element={<AdminRoutes />} />`.
- * A descendant `<Routes>` needs exactly that trailing splat to resolve against.
- * The overlap is deliberate: a path declared in App.jsx wins there, and the same
- * entry here keeps this table complete for anything App.jsx does not name —
- * `orders/:id` and the settings tabs among them.
- *
- * With no splat and no children at all — an install predating the move into
- * App.jsx — `index.jsx` renders this component directly instead.
- */
+/** All admin routes. Rendered inside AdminLayout; mount AdminApp at `/store-admin/*`. */
 export default function AdminRoutes() {
   return (
     <Routes>

package/src/commerce/storefront/pickers.jsx

@@ -50,12 +50,20 @@ function resolveCheckout(name, prop, ctx) {
  *   chosen         the chosen/auto-selected entry, or null
  *   selected       alias of `chosen` (the name the payment picker uses)
  *   choose         (id) => Promise
- *   mustChoose     status === "choice_required" → render methods as a picker
+ *   mustChoose     more than one method → render methods as a picker
  *   single         exactly one method offered — already chosen
+ *   choosing       a pick is in flight — `selected` already reflects it
  *   syncing        an address edit is being repriced
  *   hint           { code, severity, serverMessage } | null (see above)
  *   addressError   { code, message } | null — the server's own words
  *
+ * `mustChoose` stays true after a choice is made — with several methods the
+ * radios keep rendering, the chosen one checked, so the customer can change
+ * their mind; collapsing a made choice to static text strands it. A pick
+ * reflects in `selected` from the click (optimistically, while the priced view
+ * catches up), so never disable the options while `choosing`/`syncing` — the
+ * hint line is the affordance for that, not a locked control.
+ *
  * `single` and `mustChoose` are never both true, and `single` guarantees
  * `chosen` — a single option still *shows* what it is (title + `costLabel`),
  * never a picker of one. Never render `cart.chosen_shipping_method` directly:
@@ -70,6 +78,7 @@ export function ShippingMethodPicker({ checkout: checkoutProp, children }) {
     chosenShippingMethod: chosen,
     singleShippingMethod: single,
     chooseShippingMethod: choose,
+    shippingChoicePending: choosing,
     shippingSyncing: syncing,
     addressError,
   } = checkout;
@@ -96,8 +105,11 @@ export function ShippingMethodPicker({ checkout: checkoutProp, children }) {
     chosen: decoratedChosen,
     selected: decoratedChosen,
     choose,
-    mustChoose: status === "choice_required",
+    // True whenever there is a real choice — including after one is made, so a
+    // made choice stays changeable instead of collapsing to static text.
+    mustChoose: status === "choice_required" || methods.length > 1,
     single: single ?? (methods.length === 1), // fallback: a hand-built checkout object
+    choosing: choosing ?? false,
     syncing,
     hint,
     addressError,
@@ -119,9 +131,11 @@ export function ShippingMethodPicker({ checkout: checkoutProp, children }) {
  *
  * `single` guarantees `value` and `selected` — never render the one-gateway
  * branch as "nothing selected yet" — and both re-resolve when store info
- * changes. A default-seeded store offers `offline` only, so never hardcode a
- * card option. Titles and descriptions are the admin's copy: render them, don't
- * invent your own.
+ * changes. A pick is plain local state: it reflects the instant it is clicked,
+ * with no server round trip — so never disable these options while the cart is
+ * repricing elsewhere. A default-seeded store offers `offline` only, so never
+ * hardcode a card option. Titles and descriptions are the admin's copy: render
+ * them, don't invent your own.
  */
 export function PaymentMethodPicker({ checkout: checkoutProp, children }) {
   const checkout = resolveCheckout("PaymentMethodPicker", checkoutProp, useCheckoutContextOptional());