@base44/app-plugin-commerce 0.7.1 → 0.8.1

package/src/commerce/admin/pages/orders/components/AddProductDialog.jsx

@@ -18,6 +18,7 @@ import {
 } from "@/components/ui/select";
 import { Loader2 } from "lucide-react";
 
+import { t } from "../../../i18n";
 import { call, base44 } from "../../../lib/api";
 import SearchSelect from "../../../components/SearchSelect";
 import { isVariable, variationLabel } from "../../../lib/product-utils";
@@ -50,7 +51,7 @@ export default function AddProductDialog({ open, onOpenChange, onAdd }) {
     return rows.map((p) => ({
       value: p.id,
       label: p.name,
-      meta: p.sku ? `SKU: ${p.sku}` : undefined,
+      meta: p.sku ? t("orders.sku", { sku: p.sku }) : undefined,
       product: p,
     }));
   };
@@ -83,33 +84,33 @@ export default function AddProductDialog({ open, onOpenChange, onAdd }) {
     <Dialog open={open} onOpenChange={onOpenChange}>
       <DialogContent className="sm:max-w-md">
         <DialogHeader>
-          <DialogTitle>Add product</DialogTitle>
+          <DialogTitle>{t("routes.products_new")}</DialogTitle>
         </DialogHeader>
 
         <div className="space-y-4">
           <div className="grid gap-1.5">
-            <Label>Product</Label>
+            <Label>{t("orders.product")}</Label>
             <SearchSelect
               search={searchProducts}
               value={picked}
               onChange={handlePick}
-              placeholder="Search products…"
+              placeholder={t("orders.search_products")}
             />
           </div>
 
           {hasVariants && (
             <div className="grid gap-1.5">
-              <Label>Variation</Label>
+              <Label>{t("orders.variation")}</Label>
               {loadingVariations ? (
                 <div className="flex items-center gap-2 text-sm text-muted-foreground">
-                  <Loader2 className="h-4 w-4 animate-spin" /> Loading variations…
+                  <Loader2 className="h-4 w-4 animate-spin" /> {t("orders.loading_variations")}
                 </div>
               ) : (variations || []).length === 0 ? (
-                <p className="text-sm text-muted-foreground">This product has no variations yet.</p>
+                <p className="text-sm text-muted-foreground">{t("orders.no_variations")}</p>
               ) : (
                 <Select value={variationId} onValueChange={setVariationId}>
                   <SelectTrigger>
-                    <SelectValue placeholder="Choose a variation…" />
+                    <SelectValue placeholder={t("orders.choose_variation")} />
                   </SelectTrigger>
                   <SelectContent>
                     {(variations || []).map((v) => (
@@ -124,7 +125,7 @@ export default function AddProductDialog({ open, onOpenChange, onAdd }) {
           )}
 
           <div className="grid gap-1.5">
-            <Label>Quantity</Label>
+            <Label>{t("orders.quantity")}</Label>
             <Input
               type="number"
               min="1"
@@ -137,10 +138,10 @@ export default function AddProductDialog({ open, onOpenChange, onAdd }) {
 
         <DialogFooter>
           <Button variant="outline" onClick={() => onOpenChange(false)}>
-            Cancel
+            {t("common.cancel")}
           </Button>
           <Button onClick={submit} disabled={!canAdd}>
-            Add to order
+            {t("orders.add_to_order")}
           </Button>
         </DialogFooter>
       </DialogContent>

package/src/commerce/admin/pages/orders/components/DownloadPermissionsPanel.jsx

@@ -12,6 +12,7 @@ import {
 import { Loader2, X } from "lucide-react";
 import { toast } from "sonner";
 
+import { t } from "../../../i18n";
 import { call } from "../../../lib/api";
 import SearchSelect from "../../../components/SearchSelect";
 import { formatDate } from "../../../lib/format";
@@ -29,7 +30,7 @@ export default function DownloadPermissionsPanel({ orderId, permissions, loading
     const rows = data?.rows || data || [];
     return rows
       .filter((p) => p.downloadable)
-      .map((p) => ({ value: p.id, label: p.name, meta: p.sku ? `SKU: ${p.sku}` : undefined }));
+      .map((p) => ({ value: p.id, label: p.name, meta: p.sku ? t("orders.sku", { sku: p.sku }) : undefined }));
   };
 
   const grant = async () => {
@@ -37,7 +38,7 @@ export default function DownloadPermissionsPanel({ orderId, permissions, loading
     setBusy(true);
     try {
       await call("admin-orders", "grant-download", { order_id: orderId, product_id: picked.value });
-      toast.success("Download access granted");
+      toast.success(t("orders.download_granted"));
       setPicked(null);
       onChanged();
     } catch {
@@ -50,7 +51,7 @@ export default function DownloadPermissionsPanel({ orderId, permissions, loading
   const revoke = async (permissionId) => {
     try {
       await call("admin-orders", "revoke-download", { order_id: orderId, permission_id: permissionId });
-      toast.success("Download access revoked");
+      toast.success(t("orders.download_revoked"));
       onChanged();
     } catch {
       /* toast handled by call() */
@@ -60,7 +61,7 @@ export default function DownloadPermissionsPanel({ orderId, permissions, loading
   return (
     <Card>
       <CardHeader className="pb-3">
-        <CardTitle className="text-base">Downloadable product permissions</CardTitle>
+        <CardTitle className="text-base">{t("orders.download_permissions")}</CardTitle>
       </CardHeader>
       <CardContent className="space-y-3">
         {loading ? (
@@ -68,14 +69,14 @@ export default function DownloadPermissionsPanel({ orderId, permissions, loading
             <Loader2 className="h-4 w-4 animate-spin text-muted-foreground" />
           </div>
         ) : (permissions || []).length === 0 ? (
-          <p className="text-sm text-muted-foreground">No download permissions on this order.</p>
+          <p className="text-sm text-muted-foreground">{t("orders.no_download_permissions")}</p>
         ) : (
           <Table>
             <TableHeader>
               <TableRow>
-                <TableHead>File</TableHead>
-                <TableHead className="w-32 text-right">Remaining</TableHead>
-                <TableHead className="w-32">Expires</TableHead>
+                <TableHead>{t("orders.file")}</TableHead>
+                <TableHead className="w-32 text-right">{t("orders.remaining")}</TableHead>
+                <TableHead className="w-32">{t("orders.expires")}</TableHead>
                 <TableHead className="w-10" />
               </TableRow>
             </TableHeader>
@@ -85,11 +86,11 @@ export default function DownloadPermissionsPanel({ orderId, permissions, loading
                   <TableCell className="text-sm">{p.download_name || p.file_url || p.product_id}</TableCell>
                   <TableCell className="text-right text-sm">
                     {p.downloads_remaining === -1 ? "∞" : p.downloads_remaining}
-                    <span className="text-xs text-muted-foreground"> (used {p.download_count || 0})</span>
+                    <span className="text-xs text-muted-foreground"> {t("orders.used_count", { count: p.download_count || 0 })}</span>
                   </TableCell>
-                  <TableCell className="text-sm">{p.access_expires ? formatDate(p.access_expires) : "Never"}</TableCell>
+                  <TableCell className="text-sm">{p.access_expires ? formatDate(p.access_expires) : t("orders.never")}</TableCell>
                   <TableCell>
-                    <Button variant="ghost" size="icon" className="h-7 w-7" onClick={() => revoke(p.id)} title="Revoke">
+                    <Button variant="ghost" size="icon" className="h-7 w-7" onClick={() => revoke(p.id)} title={t("orders.revoke")}>
                       <X className="h-4 w-4" />
                     </Button>
                   </TableCell>
@@ -105,12 +106,12 @@ export default function DownloadPermissionsPanel({ orderId, permissions, loading
               search={searchDownloadable}
               value={picked}
               onChange={setPicked}
-              placeholder="Search downloadable products…"
+              placeholder={t("orders.search_downloadable")}
             />
           </div>
           <Button size="sm" onClick={grant} disabled={!picked || busy}>
             {busy && <Loader2 className="mr-1 h-3.5 w-3.5 animate-spin" />}
-            Grant access
+            {t("orders.grant_access")}
           </Button>
         </div>
       </CardContent>

package/src/commerce/admin/pages/orders/components/LineItemsTable.jsx

@@ -12,6 +12,7 @@ import {
 } from "@/components/ui/table";
 import { Package, X } from "lucide-react";
 
+import { t } from "../../../i18n";
 import useMoney from "../../../hooks/useMoney";
 import { round2 } from "../../../lib/order-utils";
 
@@ -56,11 +57,11 @@ export default function LineItemsTable({ order, editable, onChange, onRemoveCoup
       <Table>
         <TableHeader>
           <TableRow>
-            <TableHead>Item</TableHead>
-            <TableHead className="w-28 text-right">Cost</TableHead>
-            <TableHead className="w-20 text-right">Qty</TableHead>
-            <TableHead className="w-28 text-right">Total</TableHead>
-            <TableHead className="w-24 text-right">Tax</TableHead>
+            <TableHead>{t("orders.item")}</TableHead>
+            <TableHead className="w-28 text-right">{t("orders.cost")}</TableHead>
+            <TableHead className="w-20 text-right">{t("orders.qty")}</TableHead>
+            <TableHead className="w-28 text-right">{t("orders.total")}</TableHead>
+            <TableHead className="w-24 text-right">{t("orders.tax")}</TableHead>
             {editable && <TableHead className="w-10" />}
           </TableRow>
         </TableHeader>
@@ -68,7 +69,7 @@ export default function LineItemsTable({ order, editable, onChange, onRemoveCoup
           {lines.length === 0 && fees.length === 0 && shipping.length === 0 && (
             <TableRow>
               <TableCell colSpan={editable ? 6 : 5} className="py-8 text-center text-sm text-muted-foreground">
-                No items. {editable ? "Use “Add product(s)” below." : ""}
+                {t("orders.no_items")} {editable ? t("orders.no_items_hint") : ""}
               </TableCell>
             </TableRow>
           )}
@@ -87,7 +88,7 @@ export default function LineItemsTable({ order, editable, onChange, onRemoveCoup
                   <div className="min-w-0">
                     <p className="truncate text-sm font-medium">{line.name}</p>
                     <p className="text-xs text-muted-foreground">
-                      {line.sku && <span>SKU: {line.sku}</span>}
+                      {line.sku && <span>{t("orders.sku", { sku: line.sku })}</span>}
                       {(line.attributes || []).length > 0 && (
                         <span>
                           {line.sku ? " · " : ""}
@@ -142,7 +143,7 @@ export default function LineItemsTable({ order, editable, onChange, onRemoveCoup
             <TableRow key={fee.line_id} className="bg-muted/30">
               <TableCell>
                 <span className="text-sm">
-                  <Badge variant="outline" className="mr-2">Fee</Badge>
+                  <Badge variant="outline" className="mr-2">{t("orders.fee")}</Badge>
                   {fee.name}
                 </span>
               </TableCell>
@@ -164,7 +165,7 @@ export default function LineItemsTable({ order, editable, onChange, onRemoveCoup
             <TableRow key={line.line_id} className="bg-muted/30">
               <TableCell>
                 <span className="text-sm">
-                  <Badge variant="outline" className="mr-2">Shipping</Badge>
+                  <Badge variant="outline" className="mr-2">{t("orders.shipping")}</Badge>
                   {line.method_title || line.method_id}
                 </span>
               </TableCell>
@@ -186,7 +187,7 @@ export default function LineItemsTable({ order, editable, onChange, onRemoveCoup
 
       {coupons.length > 0 && (
         <div className="flex flex-wrap items-center gap-2 border-t px-3 py-2">
-          <span className="text-xs text-muted-foreground">Coupons:</span>
+          <span className="text-xs text-muted-foreground">{t("orders.coupons_label")}</span>
           {coupons.map((c) => (
             <Badge key={c.code} variant="secondary" className="gap-1 pr-1">
               {c.code} (−{format(c.discount || 0)})
@@ -195,7 +196,7 @@ export default function LineItemsTable({ order, editable, onChange, onRemoveCoup
                 className="rounded-full p-0.5 hover:bg-muted-foreground/20 disabled:opacity-50"
                 disabled={removingCoupon === c.code}
                 onClick={() => onRemoveCoupon(c.code)}
-                title="Remove coupon"
+                title={t("orders.remove_coupon")}
               >
                 <X className="h-3 w-3" />
               </button>

package/src/commerce/admin/pages/orders/components/OrderNotesPanel.jsx

@@ -12,6 +12,7 @@ import {
 import { Loader2, X } from "lucide-react";
 import { toast } from "sonner";
 
+import { t } from "../../../i18n";
 import { call } from "../../../lib/api";
 import { formatDateTime } from "../../../lib/format";
 
@@ -40,7 +41,7 @@ export default function OrderNotesPanel({ orderId, notes, loading, onChanged })
         note: text.trim(),
         is_customer_note: kind === "customer",
       });
-      toast.success(kind === "customer" ? "Note sent to customer" : "Note added");
+      toast.success(kind === "customer" ? t("orders.note_sent") : t("orders.note_added"));
       setText("");
       onChanged();
     } catch {
@@ -62,7 +63,7 @@ export default function OrderNotesPanel({ orderId, notes, loading, onChanged })
   return (
     <Card>
       <CardHeader className="pb-3">
-        <CardTitle className="text-base">Order notes</CardTitle>
+        <CardTitle className="text-base">{t("orders.order_notes")}</CardTitle>
       </CardHeader>
       <CardContent className="space-y-3">
         {loading ? (
@@ -70,7 +71,7 @@ export default function OrderNotesPanel({ orderId, notes, loading, onChanged })
             <Loader2 className="h-4 w-4 animate-spin text-muted-foreground" />
           </div>
         ) : (notes || []).length === 0 ? (
-          <p className="text-sm text-muted-foreground">No notes yet.</p>
+          <p className="text-sm text-muted-foreground">{t("orders.no_notes")}</p>
         ) : (
           <ul className="max-h-96 space-y-2 overflow-y-auto pr-1">
             {notes.map((n) => (
@@ -78,14 +79,14 @@ export default function OrderNotesPanel({ orderId, notes, loading, onChanged })
                 <p className="whitespace-pre-wrap">{n.note}</p>
                 <p className="mt-1.5 text-xs text-muted-foreground">
                   {formatDateTime(n.created_date)}
-                  {n.added_by && n.added_by !== "system" ? ` · ${n.added_by}` : n.added_by === "system" ? " · system" : ""}
-                  {n.is_customer_note ? " · sent to customer" : ""}
+                  {n.added_by && n.added_by !== "system" ? ` · ${n.added_by}` : n.added_by === "system" ? ` · ${t("orders.system")}` : ""}
+                  {n.is_customer_note ? ` · ${t("orders.sent_to_customer")}` : ""}
                 </p>
                 <button
                   type="button"
                   onClick={() => deleteNote(n.id)}
                   className="absolute right-1.5 top-1.5 hidden rounded p-0.5 hover:bg-black/5 group-hover:block"
-                  title="Delete note"
+                  title={t("orders.delete_note")}
                 >
                   <X className="h-3.5 w-3.5 text-muted-foreground" />
                 </button>
@@ -97,7 +98,7 @@ export default function OrderNotesPanel({ orderId, notes, loading, onChanged })
         <div className="space-y-2 border-t pt-3">
           <Textarea
             rows={3}
-            placeholder="Add a note…"
+            placeholder={t("orders.add_note_placeholder")}
             value={text}
             onChange={(e) => setText(e.target.value)}
           />
@@ -107,13 +108,13 @@ export default function OrderNotesPanel({ orderId, notes, loading, onChanged })
                 <SelectValue />
               </SelectTrigger>
               <SelectContent>
-                <SelectItem value="private">Private note</SelectItem>
-                <SelectItem value="customer">Note to customer</SelectItem>
+                <SelectItem value="private">{t("orders.private_note")}</SelectItem>
+                <SelectItem value="customer">{t("orders.note_to_customer")}</SelectItem>
               </SelectContent>
             </Select>
             <Button size="sm" onClick={addNote} disabled={busy || !text.trim()}>
               {busy && <Loader2 className="mr-1 h-3.5 w-3.5 animate-spin" />}
-              Add
+              {t("common.add")}
             </Button>
           </div>
         </div>

package/src/commerce/admin/pages/orders/components/PaymentPanel.jsx

@@ -6,6 +6,7 @@ import { Input } from "@/components/ui/input";
 import { Check, Copy, CreditCard, ExternalLink, Loader2, RotateCw } from "lucide-react";
 import { toast } from "sonner";
 
+import { t } from "../../../i18n";
 import { call } from "../../../lib/api";
 import useMoney from "../../../hooks/useMoney";
 import { formatDateTime } from "../../../lib/format";
@@ -47,7 +48,7 @@ export default function PaymentPanel({ order, onChanged }) {
       setLink(data?.url || "");
       setCopied(false);
       if (data?.url) {
-        toast.success("Payment link created");
+        toast.success(t("orders.payment_link_created"));
         if (willSwitchMethod) onChanged?.();   // the order's method changed
       }
     } catch {
@@ -62,10 +63,10 @@ export default function PaymentPanel({ order, onChanged }) {
     try {
       const data = await call("payments", "verify", { order_id: order.id });
       if (data?.paid) {
-        toast.success("Payment confirmed");
+        toast.success(t("orders.payment_confirmed"));
         onChanged?.();
       } else {
-        toast.info("No payment received yet");
+        toast.info(t("orders.no_payment_yet"));
       }
     } catch {
       /* toast handled by call() */
@@ -78,37 +79,37 @@ export default function PaymentPanel({ order, onChanged }) {
     try {
       await navigator.clipboard.writeText(link);
       setCopied(true);
-      toast.success("Link copied");
+      toast.success(t("orders.link_copied"));
     } catch {
-      toast.error("Could not copy — select the link and copy it manually");
+      toast.error(t("orders.copy_failed"));
     }
   };
 
   return (
     <Card>
       <CardHeader className="flex-row items-center justify-between space-y-0 pb-3">
-        <CardTitle className="text-base">Payment</CardTitle>
+        <CardTitle className="text-base">{t("orders.payment")}</CardTitle>
         {paid ? (
-          <Badge variant="secondary" className="font-normal">Paid</Badge>
+          <Badge variant="secondary" className="font-normal">{t("orders.paid")}</Badge>
         ) : (
-          <Badge variant="outline" className="font-normal">Awaiting payment</Badge>
+          <Badge variant="outline" className="font-normal">{t("orders.awaiting_payment")}</Badge>
         )}
       </CardHeader>
       <CardContent className="space-y-3">
         <dl className="grid grid-cols-[auto_1fr] gap-x-3 gap-y-1 text-sm">
-          <dt className="text-muted-foreground">Method</dt>
+          <dt className="text-muted-foreground">{t("orders.method")}</dt>
           <dd>{order.payment_method_title || order.payment_method || "—"}</dd>
-          <dt className="text-muted-foreground">Total</dt>
+          <dt className="text-muted-foreground">{t("orders.total")}</dt>
           <dd>{format(order.total || 0)}</dd>
           {order.date_paid && (
             <>
-              <dt className="text-muted-foreground">Paid</dt>
+              <dt className="text-muted-foreground">{t("orders.paid")}</dt>
               <dd>{formatDateTime(order.date_paid)}</dd>
             </>
           )}
           {order.transaction_id && (
             <>
-              <dt className="text-muted-foreground">Reference</dt>
+              <dt className="text-muted-foreground">{t("orders.reference")}</dt>
               <dd className="truncate font-mono text-xs">{order.transaction_id}</dd>
             </>
           )}
@@ -117,8 +118,8 @@ export default function PaymentPanel({ order, onChanged }) {
         {!paid && !isCard && (
           <p className="text-xs text-muted-foreground">
             {order.payment_method
-              ? `This order is set to be paid outside the store (${order.payment_method_title || order.payment_method}), so mark it paid by moving it to Processing once the money arrives.`
-              : "No payment method is set on this order. Take payment outside the store and move it to Processing, or send the customer a payment link."}
+              ? t("orders.pay_outside_hint", { method: order.payment_method_title || order.payment_method })
+              : t("orders.no_payment_method_hint")}
           </p>
         )}
 
@@ -136,7 +137,7 @@ export default function PaymentPanel({ order, onChanged }) {
                 ) : (
                   <CreditCard className="mr-1.5 h-3.5 w-3.5" />
                 )}
-                {link ? "New payment link" : "Create payment link"}
+                {link ? t("orders.new_payment_link") : t("orders.create_payment_link")}
               </Button>
               <Button
                 variant="outline"
@@ -149,30 +150,29 @@ export default function PaymentPanel({ order, onChanged }) {
                 ) : (
                   <RotateCw className="mr-1.5 h-3.5 w-3.5" />
                 )}
-                Check payment
+                {t("orders.check_payment")}
               </Button>
             </div>
 
             {willSwitchMethod && !link && (
               <p className="text-xs text-muted-foreground">
                 {order.payment_method
-                  ? `Sending a payment link switches this order from ${order.payment_method_title || order.payment_method} to card payment.`
-                  : "Sending a payment link sets this order to card payment."}
+                  ? t("orders.link_switches_method", { method: order.payment_method_title || order.payment_method })
+                  : t("orders.link_sets_method")}
               </p>
             )}
 
             {link && (
               <div className="space-y-1.5">
                 <p className="text-xs text-muted-foreground">
-                  Send this to the customer — it opens the provider's secure payment page. The order
-                  updates itself once they pay.
+                  {t("orders.payment_link_hint")}
                 </p>
                 <div className="flex gap-1.5">
                   <Input readOnly value={link} className="h-8 font-mono text-xs" onFocus={(e) => e.target.select()} />
-                  <Button variant="outline" size="icon" className="h-8 w-8 shrink-0" onClick={copy} title="Copy link">
+                  <Button variant="outline" size="icon" className="h-8 w-8 shrink-0" onClick={copy} title={t("orders.copy_link")}>
                     {copied ? <Check className="h-3.5 w-3.5" /> : <Copy className="h-3.5 w-3.5" />}
                   </Button>
-                  <Button variant="outline" size="icon" className="h-8 w-8 shrink-0" asChild title="Open">
+                  <Button variant="outline" size="icon" className="h-8 w-8 shrink-0" asChild title={t("orders.open")}>
                     <a href={link} target="_blank" rel="noreferrer">
                       <ExternalLink className="h-3.5 w-3.5" />
                     </a>

package/src/commerce/admin/pages/orders/components/RefundPanel.jsx

@@ -14,6 +14,7 @@ import {
 import { Loader2 } from "lucide-react";
 import { toast } from "sonner";
 
+import { t } from "../../../i18n";
 import { call } from "../../../lib/api";
 import useMoney from "../../../hooks/useMoney";
 import { formatDate } from "../../../lib/format";
@@ -90,8 +91,8 @@ export default function RefundPanel({ order, refunds, onDone }) {
       });
       toast.success(
         data?.gateway_refund
-          ? `Refunded ${format(total)} through the payment provider`
-          : `Refunded ${format(total)}`,
+          ? t("orders.refunded_via_provider", { amount: format(total) })
+          : t("orders.refunded_amount", { amount: format(total) }),
       );
       setRows({});
       setShippingAmount(0);
@@ -106,15 +107,15 @@ export default function RefundPanel({ order, refunds, onDone }) {
 
   return (
     <div className="space-y-4 rounded-lg border bg-muted/20 p-4">
-      <h3 className="text-sm font-semibold">Refund</h3>
+      <h3 className="text-sm font-semibold">{t("orders.refund")}</h3>
 
       <Table>
         <TableHeader>
           <TableRow>
-            <TableHead>Item</TableHead>
-            <TableHead className="w-24 text-right">Refunded</TableHead>
-            <TableHead className="w-24 text-right">Qty</TableHead>
-            <TableHead className="w-32 text-right">Amount</TableHead>
+            <TableHead>{t("orders.item")}</TableHead>
+            <TableHead className="w-24 text-right">{t("orders.refunded")}</TableHead>
+            <TableHead className="w-24 text-right">{t("orders.qty")}</TableHead>
+            <TableHead className="w-32 text-right">{t("common.amount")}</TableHead>
           </TableRow>
         </TableHeader>
         <TableBody>
@@ -158,7 +159,7 @@ export default function RefundPanel({ order, refunds, onDone }) {
 
       <div className="grid grid-cols-1 gap-3 sm:grid-cols-3">
         <div className="grid gap-1.5">
-          <Label className="text-xs">Refund shipping</Label>
+          <Label className="text-xs">{t("orders.refund_shipping")}</Label>
           <Input
             type="number"
             step="any"
@@ -168,7 +169,7 @@ export default function RefundPanel({ order, refunds, onDone }) {
           />
         </div>
         <div className="grid gap-1.5 sm:col-span-2">
-          <Label className="text-xs">Reason for refund (optional)</Label>
+          <Label className="text-xs">{t("orders.refund_reason")}</Label>
           <Input value={reason} onChange={(e) => setReason(e.target.value)} />
         </div>
       </div>
@@ -176,7 +177,7 @@ export default function RefundPanel({ order, refunds, onDone }) {
       <div className="flex flex-wrap items-center gap-4">
         <label className="flex items-center gap-2 text-sm">
           <Checkbox checked={restock} onCheckedChange={(v) => setRestock(Boolean(v))} />
-          Restock refunded items
+          {t("orders.restock_items")}
         </label>
         {order.payment_method === "card" && (
           <label
@@ -184,7 +185,7 @@ export default function RefundPanel({ order, refunds, onDone }) {
             title={
               canRefundOnline
                 ? undefined
-                : "This order has no card payment on record to refund"
+                : t("orders.no_card_payment_tip")
             }
           >
             <Checkbox
@@ -192,7 +193,7 @@ export default function RefundPanel({ order, refunds, onDone }) {
               disabled={!canRefundOnline}
               onCheckedChange={(v) => setViaGateway(Boolean(v))}
             />
-            Send the money back through the payment provider
+            {t("orders.refund_via_provider")}
           </label>
         )}
       </div>
@@ -200,27 +201,27 @@ export default function RefundPanel({ order, refunds, onDone }) {
 
       <div className="flex items-center justify-between">
         <p className="text-sm text-muted-foreground">
-          Total available to refund: <span className="font-medium text-foreground">{format(maxRefund)}</span>
+          {t("orders.available_to_refund")} <span className="font-medium text-foreground">{format(maxRefund)}</span>
         </p>
         <Button onClick={submit} disabled={busy || total <= 0 || overMax} variant="destructive">
           {busy && <Loader2 className="mr-1.5 h-4 w-4 animate-spin" />}
-          Refund {format(total)}
+          {t("orders.refund_amount", { amount: format(total) })}
         </Button>
       </div>
       {overMax && (
-        <p className="text-right text-xs text-destructive">Amount exceeds the refundable total.</p>
+        <p className="text-right text-xs text-destructive">{t("orders.refund_over_max")}</p>
       )}
 
       {(refunds || []).length > 0 && (
         <div className="border-t pt-3">
-          <h4 className="mb-2 text-xs font-medium text-muted-foreground">Previous refunds</h4>
+          <h4 className="mb-2 text-xs font-medium text-muted-foreground">{t("orders.previous_refunds")}</h4>
           <ul className="space-y-1 text-sm">
             {refunds.map((r) => (
               <li key={r.id} className="flex justify-between">
                 <span>
                   {formatDate(r.created_date)}
                   {r.reason ? ` — ${r.reason}` : ""}
-                  {r.refunded_by ? <span className="text-muted-foreground"> by {r.refunded_by}</span> : null}
+                  {r.refunded_by ? <span className="text-muted-foreground"> {t("orders.refunded_by", { name: r.refunded_by })}</span> : null}
                 </span>
                 <span className="text-destructive">− {format(r.amount || 0)}</span>
               </li>

package/src/commerce/admin/pages/orders/components/TotalsBox.jsx

@@ -1,13 +1,14 @@
 import React from "react";
 import { Separator } from "@/components/ui/separator";
+import { t } from "../../../i18n";
 import useMoney from "../../../hooks/useMoney";
 import { orderTotals } from "../../../lib/order-utils";
 
 /** Order totals summary. Props: { order } */
 export default function TotalsBox({ order }) {
   const { format } = useMoney();
-  const t = orderTotals(order);
-  if (!t) return null;
+  const totals = orderTotals(order);
+  if (!totals) return null;
 
   const row = (label, value, className = "") => (
     <div className={`flex items-center justify-between py-1 text-sm ${className}`}>
@@ -20,30 +21,30 @@ export default function TotalsBox({ order }) {
 
   return (
     <div className="ml-auto w-full max-w-sm">
-      {row("Items subtotal", format(t.itemsSubtotal))}
-      {t.discount > 0 &&
-        row(couponCodes ? `Coupon(s): ${couponCodes}` : "Discount", `− ${format(t.discount)}`)}
-      {t.fees !== 0 && row("Fees", format(t.fees))}
-      {row("Shipping", format(t.shipping))}
-      {(t.taxLines || []).length > 0
-        ? t.taxLines.map((tl, i) => (
+      {row(t("orders.items_subtotal"), format(totals.itemsSubtotal))}
+      {totals.discount > 0 &&
+        row(couponCodes ? t("orders.coupons_codes", { codes: couponCodes }) : t("orders.discount"), `− ${format(totals.discount)}`)}
+      {totals.fees !== 0 && row(t("orders.fees"), format(totals.fees))}
+      {row(t("orders.shipping"), format(totals.shipping))}
+      {(totals.taxLines || []).length > 0
+        ? totals.taxLines.map((tl, i) => (
             <div key={tl.rate_id || i} className="flex items-center justify-between py-1 text-sm">
-              <span className="text-muted-foreground">{tl.label || "Tax"}</span>
+              <span className="text-muted-foreground">{tl.label || t("orders.tax")}</span>
               <span>{format((tl.tax_total || 0) + (tl.shipping_tax_total || 0))}</span>
             </div>
           ))
-        : row("Tax", format(t.taxTotal))}
+        : row(t("orders.tax"), format(totals.taxTotal))}
       <Separator className="my-1.5" />
       <div className="flex items-center justify-between py-1 font-semibold">
-        <span>Order total</span>
-        <span>{format(t.total)}</span>
+        <span>{t("orders.order_total")}</span>
+        <span>{format(totals.total)}</span>
       </div>
-      {t.refunded > 0 && (
+      {totals.refunded > 0 && (
         <>
-          {row("Refunded", `− ${format(t.refunded)}`, "text-destructive")}
+          {row(t("orders.refunded"), `− ${format(totals.refunded)}`, "text-destructive")}
           <div className="flex items-center justify-between py-1 text-sm font-medium">
-            <span>Net payment</span>
-            <span>{format(t.net)}</span>
+            <span>{t("orders.net_payment")}</span>
+            <span>{format(totals.net)}</span>
           </div>
         </>
       )}