@base44/app-plugin-commerce 0.7.1 → 0.8.0

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

@@ -21,6 +21,7 @@ import CountrySelect from "../../components/CountrySelect";
 import MoneyInput from "../../components/MoneyInput";
 import useMoney from "../../hooks/useMoney";
 import { CONTINENTS } from "../../lib/geo-data";
+import { t } from "../../i18n";
 
 const NEW_LOCATION = {
   name: "",
@@ -62,14 +63,14 @@ export default function LocationEditor() {
   }, [locationId, isNew]);
 
   useEffect(() => {
-    load().catch((e) => toast.error(e.message || "Failed to load location"));
+    load().catch((e) => toast.error(e.message || t("settings.location.load_failed")));
   }, [load]);
 
   const up = (patch) => setLocation((l) => ({ ...l, ...patch }));
 
   const save = async () => {
     if (!location.name?.trim()) {
-      toast.error("Location name is required");
+      toast.error(t("settings.location.name_required"));
       return;
     }
     setSaving(true);
@@ -85,10 +86,10 @@ export default function LocationEditor() {
       };
       if (isNew) await base44.entities["commerce.ShippingTaxLocation"].create(payload);
       else await base44.entities["commerce.ShippingTaxLocation"].update(locationId, payload);
-      toast.success(isNew ? "Location created" : "Location saved");
+      toast.success(isNew ? t("settings.location.created") : t("settings.location.saved"));
       navigate(href("settings/shipping-tax"));
     } catch (e) {
-      toast.error(e.message || "Failed to save location");
+      toast.error(e.message || t("settings.location.save_failed"));
     } finally {
       setSaving(false);
     }
@@ -108,23 +109,22 @@ export default function LocationEditor() {
   return (
     <div className="max-w-3xl space-y-4">
       <PageHeader
-        title={isNew ? "Add location" : location.name || "Edit location"}
-        description="Manage where you sell, and the shipping and tax charged there."
+        title={isNew ? t("settings.shipping.add_location") : location.name || t("settings.location.edit_location")}
+        description={t("settings.location.header_description")}
         backHref={href("settings/shipping-tax")}
         actions={
           <Button onClick={save} disabled={saving}>
             {saving ? <Loader2 className="mr-2 h-4 w-4 animate-spin" /> : <Save className="mr-2 h-4 w-4" />}
-            Save
+            {t("common.save")}
           </Button>
         }
       />
 
       <Card>
         <CardHeader className="pb-2">
-          <CardTitle className="text-base">Location</CardTitle>
+          <CardTitle className="text-base">{t("settings.shipping.location")}</CardTitle>
           <CardDescription>
-            Leave the regions empty to make this the fallback that catches every address no other
-            location covers.
+            {t("settings.location.regions_hint")}
           </CardDescription>
         </CardHeader>
         <CardContent className="space-y-3">
@@ -132,31 +132,31 @@ export default function LocationEditor() {
               [1fr | 130px | 130px | 40px icon] — so inputs align across cards. */}
           <div className="grid grid-cols-[1fr_130px_130px_40px] items-center gap-2">
             <div className="col-span-2 space-y-1.5">
-              <Label>Name</Label>
-              <Input value={location.name} onChange={(e) => up({ name: e.target.value })} placeholder="e.g. Israel" />
+              <Label>{t("common.name")}</Label>
+              <Input value={location.name} onChange={(e) => up({ name: e.target.value })} placeholder={t("settings.location.name_placeholder")} />
             </div>
             <div className="space-y-1.5">
-              <Label>Match order</Label>
+              <Label>{t("settings.location.match_order")}</Label>
               <Input type="number" value={location.order ?? 0} onChange={(e) => up({ order: Number(e.target.value) || 0 })} />
             </div>
             <div />
           </div>
 
           <div className="space-y-2">
-            <Label className="block">Regions</Label>
+            <Label className="block">{t("settings.shipping.regions")}</Label>
             {regions.map((region, i) => (
               <div key={i} className="grid grid-cols-[130px_1fr_40px] items-center gap-2">
                 <Select value={region.type || "country"} onValueChange={(v) => setRegion(i, { type: v, code: "" })}>
                   <SelectTrigger><SelectValue /></SelectTrigger>
                   <SelectContent>
-                    <SelectItem value="country">Country</SelectItem>
-                    <SelectItem value="continent">Continent</SelectItem>
-                    <SelectItem value="state">State</SelectItem>
+                    <SelectItem value="country">{t("address.country")}</SelectItem>
+                    <SelectItem value="continent">{t("settings.location.continent")}</SelectItem>
+                    <SelectItem value="state">{t("settings.location.state")}</SelectItem>
                   </SelectContent>
                 </Select>
                 {region.type === "continent" ? (
                   <Select value={region.code || ""} onValueChange={(v) => setRegion(i, { code: v })}>
-                    <SelectTrigger><SelectValue placeholder="Select continent…" /></SelectTrigger>
+                    <SelectTrigger><SelectValue placeholder={t("settings.location.select_continent")} /></SelectTrigger>
                     <SelectContent>
                       {CONTINENTS.map((c) => (
                         <SelectItem key={c.code} value={c.code}>{c.name}</SelectItem>
@@ -165,7 +165,7 @@ export default function LocationEditor() {
                   </Select>
                 ) : region.type === "state" ? (
                   <Input
-                    placeholder="COUNTRY:STATE — e.g. US:CA"
+                    placeholder={t("settings.location.state_placeholder")}
                     value={region.code || ""}
                     onChange={(e) => setRegion(i, { code: e.target.value.toUpperCase() })}
                   />
@@ -179,7 +179,7 @@ export default function LocationEditor() {
             ))}
             <Button type="button" variant="outline" size="sm" onClick={() => up({ regions: [...regions, { type: "country", code: "" }] })}>
               <Plus className="mr-2 h-4 w-4" />
-              Add region
+              {t("settings.location.add_region")}
             </Button>
           </div>
         </CardContent>
@@ -187,34 +187,33 @@ export default function LocationEditor() {
 
       <Card>
         <CardHeader className="pb-2">
-          <CardTitle className="text-base">Shipping rates</CardTitle>
+          <CardTitle className="text-base">{t("settings.shipping.shipping_rates")}</CardTitle>
           <CardDescription>
-            Every rate is a delivery option at checkout. A "Free over" amount makes the rate free once
-            the (discounted) items subtotal reaches it. No rates means nothing ships here.
+            {t("settings.location.rates_hint")}
           </CardDescription>
         </CardHeader>
         <CardContent className="space-y-2">
           {rates.length > 0 && (
             <div className="grid grid-cols-[1fr_130px_130px_40px] items-center gap-2 px-1 text-xs font-medium uppercase tracking-wide text-muted-foreground">
-              <span>Delivery option</span>
-              <span>Cost</span>
-              <span>Free over</span>
+              <span>{t("settings.location.delivery_option")}</span>
+              <span>{t("settings.location.cost")}</span>
+              <span>{t("settings.location.free_over")}</span>
               <span />
             </div>
           )}
           {rates.map((rate, i) => (
             <div key={rate.id || i} className="grid grid-cols-[1fr_130px_130px_40px] items-center gap-2">
               <Input
-                placeholder="e.g. Standard delivery"
+                placeholder={t("settings.location.rate_name_placeholder")}
                 value={rate.name || ""}
                 onChange={(e) => setRate(i, { name: e.target.value })}
               />
-              <MoneyInput value={rate.cost} onChange={(v) => setRate(i, { cost: v ?? 0 })} placeholder="Cost" />
+              <MoneyInput value={rate.cost} onChange={(v) => setRate(i, { cost: v ?? 0 })} placeholder={t("settings.location.cost")} />
               <Input
                 type="number"
                 min={0}
-                placeholder="Never"
-                title="Items subtotal (after discounts) at which this rate becomes free"
+                placeholder={t("settings.location.never")}
+                title={t("settings.location.free_over_title")}
                 value={rate.free_over ?? ""}
                 onChange={(e) => setRate(i, { free_over: num(e.target.value) })}
               />
@@ -230,18 +229,16 @@ export default function LocationEditor() {
             onClick={() => up({ shipping_rates: [...rates, { id: crypto.randomUUID(), name: "", cost: 0, free_over: null }] })}
           >
             <Plus className="mr-2 h-4 w-4" />
-            Add rate
+            {t("settings.location.add_rate")}
           </Button>
         </CardContent>
       </Card>
 
       <Card>
         <CardHeader className="pb-2">
-          <CardTitle className="text-base">Tax</CardTitle>
+          <CardTitle className="text-base">{t("settings.shipping.tax")}</CardTitle>
           <CardDescription>
-            Tax groups bundle percentage rates — a group's tax is the sum of its rates. Products
-            charge the <strong>Products</strong> group unless their own Tax group names another;
-            add groups for goods taxed differently. Tax on shipping is set separately below.
+            {t("settings.location.tax_hint", { group: "Products" })}
           </CardDescription>
         </CardHeader>
         <CardContent className="space-y-4">
@@ -255,12 +252,12 @@ export default function LocationEditor() {
                     <Input
                       className="h-8 max-w-xs bg-background font-medium"
                       value={group.name}
-                      placeholder="Group name"
+                      placeholder={t("settings.location.group_name_placeholder")}
                       disabled={isDefault}
                       onChange={(e) => setGroup(i, { name: e.target.value })}
                     />
                     <span className="text-xs text-muted-foreground">
-                      {isDefault ? "Default group — products without a Tax group charge this" : "Tax group"}
+                      {isDefault ? t("settings.location.default_group_hint") : t("settings.location.tax_group")}
                     </span>
                   </div>
                   {!isDefault && (
@@ -272,13 +269,17 @@ export default function LocationEditor() {
                 <div className="space-y-2 p-3">
                   {!groupRates.length && (
                     <p className="text-xs text-muted-foreground">
-                      No rates — {isDefault ? "products" : `${group.name.trim() || "these"} items`} are not taxed at this location.
+                      {isDefault
+                        ? t("settings.location.no_tax_rates_default")
+                        : group.name.trim()
+                        ? t("settings.location.no_tax_rates", { name: group.name.trim() })
+                        : t("settings.location.no_tax_rates_unnamed")}
                     </p>
                   )}
                   {groupRates.map((r, j) => (
                     <div key={j} className="grid grid-cols-[1fr_130px_40px] items-center gap-2">
                       <Input
-                        placeholder="Rate name — e.g. Sales tax, VAT"
+                        placeholder={t("settings.location.rate_placeholder")}
                         value={r.name || ""}
                         onChange={(e) => setGroup(i, { rates: groupRates.map((x, k) => (k === j ? { ...x, name: e.target.value } : x)) })}
                       />
@@ -309,7 +310,7 @@ export default function LocationEditor() {
                     onClick={() => setGroup(i, { rates: [...groupRates, { name: "", rate: 0 }] })}
                   >
                     <Plus className="mr-2 h-4 w-4" />
-                    Add rate
+                    {t("settings.location.add_rate")}
                   </Button>
                 </div>
               </div>
@@ -323,16 +324,16 @@ export default function LocationEditor() {
             onClick={() => up({ tax_groups: [...groups, { name: "", rates: [{ name: "", rate: 0 }] }] })}
           >
             <Plus className="mr-2 h-4 w-4" />
-            Add tax group
+            {t("settings.location.add_tax_group")}
           </Button>
 
           <div className="rounded-lg border">
             <div className="border-b bg-muted/40 px-3 py-2">
-              <p className="text-sm font-medium">Tax on shipping</p>
+              <p className="text-sm font-medium">{t("settings.location.tax_on_shipping")}</p>
             </div>
             <div className="grid grid-cols-[1fr_130px_130px_40px] items-center gap-2 p-3">
               <p className="text-xs text-muted-foreground">
-                Applied to the shipping cost at this location — separate from the product groups above.
+                {t("settings.location.tax_on_shipping_hint")}
               </p>
               <Select
                 value={shippingTax?.type || "none"}
@@ -340,9 +341,9 @@ export default function LocationEditor() {
               >
                 <SelectTrigger><SelectValue /></SelectTrigger>
                 <SelectContent>
-                  <SelectItem value="none">Not taxed</SelectItem>
-                  <SelectItem value="percent">Rate %</SelectItem>
-                  <SelectItem value="fixed">Exact amount</SelectItem>
+                  <SelectItem value="none">{t("settings.location.not_taxed")}</SelectItem>
+                  <SelectItem value="percent">{t("settings.location.rate_percent")}</SelectItem>
+                  <SelectItem value="fixed">{t("settings.location.exact_amount")}</SelectItem>
                 </SelectContent>
               </Select>
               {shippingTax ? (
@@ -368,7 +369,7 @@ export default function LocationEditor() {
           </div>
 
           <p className="text-xs text-muted-foreground">
-            Example: {money.format(100)} in the Products group at 18% charges {money.format(18)} tax.
+            {t("settings.location.tax_example", { base: money.format(100), tax: money.format(18) })}
           </p>
         </CardContent>
       </Card>

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

@@ -16,6 +16,7 @@ import { ArrowDown, ArrowUp, Loader2, Plus, Settings2, Trash2 } from "lucide-rea
 import { toast } from "sonner";
 import { base44 } from "../../lib/api";
 import useAsync from "../../hooks/useAsync";
+import { t } from "../../i18n";
 
 const emptyBank = () => ({ account_name: "", account_number: "", bank_name: "", sort_code: "", iban: "", bic: "" });
 
@@ -42,7 +43,7 @@ export default function PaymentsSettings() {
       await base44.entities["commerce.PaymentGateway"].update(g.id, { enabled });
       gateways.refetch();
     } catch (err) {
-      toast.error(err.message || "Failed to update gateway");
+      toast.error(err.message || t("settings.payments.update_failed"));
     }
   };
 
@@ -59,21 +60,21 @@ export default function PaymentsSettings() {
       ]);
       gateways.refetch();
     } catch (err) {
-      toast.error(err.message || "Failed to reorder");
+      toast.error(err.message || t("settings.payments.reorder_failed"));
     } finally {
       setBusy(false);
     }
   };
 
   const remove = async (g) => {
-    if (!window.confirm(`Delete the "${g.title || g.slug}" payment option?`)) return;
+    if (!window.confirm(t("settings.payments.delete_confirm", { title: g.title || g.slug }))) return;
     setBusy(true);
     try {
       await base44.entities["commerce.PaymentGateway"].delete(g.id);
-      toast.success("Payment method deleted");
+      toast.success(t("settings.payments.deleted"));
       gateways.refetch();
     } catch (err) {
-      toast.error(err.message || "Failed to delete");
+      toast.error(err.message || t("settings.payments.delete_failed"));
     } finally {
       setBusy(false);
     }
@@ -88,7 +89,7 @@ export default function PaymentsSettings() {
   const saveGateway = async () => {
     const g = dialog.gateway;
     if (!String(g.title || "").trim()) {
-      toast.error("Give the payment method a title");
+      toast.error(t("settings.payments.title_required"));
       return;
     }
     setSaving(true);
@@ -104,19 +105,19 @@ export default function PaymentsSettings() {
           method_description: g.description || "",
           settings: g.settings || {},
         });
-        toast.success("Payment method added");
+        toast.success(t("settings.payments.added"));
       } else {
         await base44.entities["commerce.PaymentGateway"].update(g.id, {
           title: g.title,
           description: g.description,
           settings: g.settings || {},
         });
-        toast.success("Payment method saved");
+        toast.success(t("settings.payments.saved"));
       }
       setDialog(null);
       gateways.refetch();
     } catch (err) {
-      toast.error(err.message || "Failed to save");
+      toast.error(err.message || t("settings.save_failed"));
     } finally {
       setSaving(false);
     }
@@ -135,16 +136,14 @@ export default function PaymentsSettings() {
       <Card>
         <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>
+            <CardTitle>{t("settings.payments.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.
+              {t("settings.payments.checkout_options_description")}
             </CardDescription>
           </div>
           <Button size="sm" onClick={openNew}>
             <Plus className="mr-2 h-4 w-4" />
-            Add payment method
+            {t("settings.payments.add_method")}
           </Button>
         </CardHeader>
         <CardContent className="divide-y border-t p-0">
@@ -187,7 +186,7 @@ export default function PaymentsSettings() {
                     onClick={() => setDialog({ gateway: { ...g, settings: { ...(g.settings || {}) } } })}
                   >
                     <Settings2 className="mr-2 h-4 w-4" />
-                    Edit
+                    {t("common.edit")}
                   </Button>
                   {!BUILT_IN_SLUGS.has(g.slug) && (
                     <Button
@@ -195,7 +194,7 @@ export default function PaymentsSettings() {
                       size="icon"
                       className="h-8 w-8 text-muted-foreground"
                       disabled={busy}
-                      title="Delete"
+                      title={t("common.delete")}
                       onClick={() => remove(g)}
                     >
                       <Trash2 className="h-3.5 w-3.5" />
@@ -224,20 +223,20 @@ export default function PaymentsSettings() {
           <DialogContent className="max-h-[85vh] overflow-y-auto">
             <DialogHeader>
               <DialogTitle>
-                {dialog.isNew ? "Add payment method" : dialog.gateway.method_title || dialog.gateway.title}
+                {dialog.isNew ? t("settings.payments.add_method") : dialog.gateway.method_title || dialog.gateway.title}
               </DialogTitle>
             </DialogHeader>
             <div className="space-y-4">
               <div className="space-y-1.5">
-                <Label>Title</Label>
+                <Label>{t("settings.payments.title_label")}</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>
+                <p className="text-xs text-muted-foreground">{t("settings.payments.title_hint")}</p>
               </div>
               <div className="space-y-1.5">
-                <Label>Description</Label>
+                <Label>{t("common.description")}</Label>
                 <Textarea
                   rows={2}
                   value={dialog.gateway.description || ""}
@@ -245,7 +244,7 @@ export default function PaymentsSettings() {
                 />
                 {dialog.gateway.slug !== "card" && (
                   <p className="text-xs text-muted-foreground">
-                    Also shown as the payment instructions after the order is placed.
+                    {t("settings.payments.description_hint")}
                   </p>
                 )}
               </div>
@@ -260,10 +259,10 @@ export default function PaymentsSettings() {
               )}
             </div>
             <DialogFooter>
-              <Button variant="outline" onClick={() => setDialog(null)}>Cancel</Button>
+              <Button variant="outline" onClick={() => setDialog(null)}>{t("common.cancel")}</Button>
               <Button onClick={saveGateway} disabled={saving}>
                 {saving && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
-                {dialog.isNew ? "Add" : "Save"}
+                {dialog.isNew ? t("common.add") : t("common.save")}
               </Button>
             </DialogFooter>
           </DialogContent>
@@ -280,28 +279,28 @@ function BankAccountsEditor({ accounts, onChange }) {
 
   return (
     <div className="space-y-3">
-      <Label>Bank account details</Label>
+      <Label>{t("settings.payments.bank_details")}</Label>
       {accounts.length === 0 && (
         <p className="text-xs text-muted-foreground">
-          None yet — fine for cash on delivery; add one for bank transfer.
+          {t("settings.payments.bank_none")}
         </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>
+            <span className="text-sm font-medium">{t("settings.payments.account_n", { n: 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"],
+              ["account_name", t("settings.payments.account_name")],
+              ["account_number", t("settings.payments.account_number")],
+              ["bank_name", t("settings.payments.bank_name")],
+              ["sort_code", t("settings.payments.sort_code")],
+              ["iban", t("settings.payments.iban")],
+              ["bic", t("settings.payments.bic")],
             ].map(([key, label]) => (
               <div key={key} className="space-y-1">
                 <Label className="text-xs">{label}</Label>
@@ -313,7 +312,7 @@ function BankAccountsEditor({ accounts, onChange }) {
       ))}
       <Button variant="outline" size="sm" onClick={add}>
         <Plus className="mr-2 h-4 w-4" />
-        Add account
+        {t("settings.payments.add_account")}
       </Button>
     </div>
   );

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

@@ -2,14 +2,15 @@ import React from "react";
 import { Outlet, useLocation, useNavigate } from "react-router-dom";
 import { useAdminHref } from "../../context/BasePathContext";
 import PageHeader from "../../components/PageHeader";
+import { t } from "../../i18n";
 
 const TABS = [
-  { seg: "general", label: "General" },
-  { seg: "inventory", label: "Inventory" },
-  { seg: "shipping-tax", label: "Shipping & Tax" },
-  { seg: "payments", label: "Payments" },
-  { seg: "emails", label: "Emails" },
-  { seg: "webhooks", label: "Webhooks" },
+  { seg: "general", label: "routes.settings_general" },
+  { seg: "inventory", label: "routes.settings_inventory" },
+  { seg: "shipping-tax", label: "routes.settings_shipping_tax" },
+  { seg: "payments", label: "routes.settings_payments" },
+  { seg: "emails", label: "routes.settings_emails" },
+  { seg: "webhooks", label: "routes.settings_webhooks" },
 ];
 
 /** Layout route for /settings/*: horizontal group tabs + nested page via <Outlet/>. */
@@ -24,20 +25,20 @@ export default function SettingsLayout() {
 
   return (
     <div className="space-y-4">
-      <PageHeader title="Settings" description="Configure how your store works." />
+      <PageHeader title={t("routes.settings")} description={t("settings.description")} />
       <div className="flex flex-wrap gap-1 border-b">
-        {TABS.map((t) => (
+        {TABS.map((tab) => (
           <button
-            key={t.seg}
+            key={tab.seg}
             type="button"
-            onClick={() => navigate(href(`settings/${t.seg}`))}
+            onClick={() => navigate(href(`settings/${tab.seg}`))}
             className={`-mb-px border-b-2 px-3 py-2 text-sm font-medium transition-colors ${
-              current === t.seg
+              current === tab.seg
                 ? "border-primary text-foreground"
                 : "border-transparent text-muted-foreground hover:text-foreground"
             }`}
           >
-            {t.label}
+            {t(tab.label)}
           </button>
         ))}
       </div>