@base44/app-plugin-commerce 0.7.1 → 0.8.0

package/src/commerce/admin/pages/products/Reviews.jsx

@@ -22,6 +22,7 @@ import { Check, MessageSquare, Pencil, ShieldAlert, Star, Trash, Trash2 } from "
 import { toast } from "sonner";
 
 import { base44, call } from "../../lib/api";
+import { t } from "../../i18n";
 import { useSettings } from "../../context/SettingsContext";
 import usePagedList from "../../hooks/usePagedList";
 import PageHeader from "../../components/PageHeader";
@@ -32,11 +33,11 @@ import { REVIEW_STATUSES } from "../../lib/constants";
 import { formatDate } from "../../lib/format";
 
 const TABS = [
-  { value: "all", label: "All" },
-  { value: "approved", label: "Approved" },
-  { value: "hold", label: "Pending" },
-  { value: "spam", label: "Spam" },
-  { value: "trash", label: "Trash" },
+  { value: "all", label: t("reviews.tab_all") },
+  { value: "approved", label: t("status.review.approved") },
+  { value: "hold", label: t("status.review.hold") },
+  { value: "spam", label: t("status.review.spam") },
+  { value: "trash", label: t("status.review.trash") },
 ];
 
 function Stars({ rating = 0 }) {
@@ -78,8 +79,8 @@ export default function Reviews() {
     Promise.all(
       ids.map((id) =>
         base44.entities["commerce.Product"].get(id)
-          .then((p) => [id, p?.name || "(deleted product)"])
-          .catch(() => [id, "(deleted product)"])
+          .then((p) => [id, p?.name || t("reviews.deleted_product")])
+          .catch(() => [id, t("reviews.deleted_product")])
       )
     ).then((pairs) => {
       if (!cancelled) setProductNames((prev) => ({ ...prev, ...Object.fromEntries(pairs) }));
@@ -91,14 +92,14 @@ export default function Reviews() {
 
   const setStatus = async (ids, status) => {
     for (const id of ids) await call("admin-reviews", "set-status", { id, status });
-    toast.success(`Review${ids.length > 1 ? "s" : ""} updated`);
+    toast.success(ids.length > 1 ? t("reviews.updated_plural") : t("reviews.updated"));
     setSelected([]);
     list.refetch();
   };
 
   const saveEdit = async () => {
     await call("admin-reviews", "update", { id: editing.id, rating: editing.rating, review: editing.review });
-    toast.success("Review updated");
+    toast.success(t("reviews.updated"));
     setEditing(null);
     list.refetch();
   };
@@ -108,7 +109,7 @@ export default function Reviews() {
     try {
       const ids = confirmDelete === "bulk" ? selected : [confirmDelete.id];
       for (const id of ids) await call("admin-reviews", "delete", { id });
-      toast.success(`Review${ids.length > 1 ? "s" : ""} deleted`);
+      toast.success(ids.length > 1 ? t("reviews.deleted_plural") : t("reviews.deleted"));
       setSelected([]);
       setConfirmDelete(null);
       list.refetch();
@@ -123,58 +124,61 @@ export default function Reviews() {
     () => [
       {
         key: "reviewer",
-        label: "Author",
+        label: t("reviews.author"),
         render: (row) => (
           <div>
-            <div className="font-medium">{row.reviewer || "Anonymous"}</div>
+            <div className="font-medium">{row.reviewer || t("reviews.anonymous")}</div>
             {row.reviewer_email && <div className="text-xs text-muted-foreground">{row.reviewer_email}</div>}
           </div>
         ),
       },
-      { key: "rating", label: "Rating", render: (row) => <Stars rating={row.rating || 0} /> },
+      { key: "rating", label: t("reviews.rating"), render: (row) => <Stars rating={row.rating || 0} /> },
       {
         key: "review",
-        label: "Review",
+        label: t("reviews.review"),
         render: (row) => (
           <div className="max-w-md">
-            <p className="line-clamp-2 text-sm">{row.review}</p>
-            {row.verified && <span className="text-xs text-green-700">✓ Verified owner</span>}
+            {/* A rating-only review is valid — say so, or the row reads as blank. */}
+            {row.review
+              ? <p className="line-clamp-2 text-sm">{row.review}</p>
+              : <p className="text-sm italic text-muted-foreground">{t("reviews.rating_only")}</p>}
+            {row.verified && <span className="text-xs text-green-700">{t("reviews.verified_owner")}</span>}
           </div>
         ),
       },
       {
         key: "product_id",
-        label: "Product",
+        label: t("reviews.product"),
         className: "hidden md:table-cell",
         render: (row) => productNames[row.product_id] || "…",
       },
       {
         key: "created_date",
-        label: "Date",
+        label: t("reviews.date"),
         className: "hidden lg:table-cell",
         render: (row) => formatDate(row.created_date),
       },
-      { key: "status", label: "Status", render: (row) => <StatusBadge status={row.status} map={REVIEW_STATUSES} /> },
+      { key: "status", label: t("common.status"), render: (row) => <StatusBadge status={row.status} map={REVIEW_STATUSES} /> },
     ],
     [productNames]
   );
 
   const rowActions = (row) => {
     const actions = [];
-    if (row.status !== "approved") actions.push({ label: "Approve", icon: Check, onClick: () => setStatus([row.id], "approved") });
-    if (row.status !== "hold") actions.push({ label: "Hold", icon: MessageSquare, onClick: () => setStatus([row.id], "hold") });
-    if (row.status !== "spam") actions.push({ label: "Spam", icon: ShieldAlert, onClick: () => setStatus([row.id], "spam") });
-    if (row.status !== "trash") actions.push({ label: "Trash", icon: Trash, onClick: () => setStatus([row.id], "trash") });
-    actions.push({ label: "Edit", icon: Pencil, onClick: () => setEditing({ id: row.id, rating: row.rating || 5, review: row.review || "" }) });
-    actions.push({ label: "Delete permanently", icon: Trash2, destructive: true, onClick: () => setConfirmDelete(row) });
+    if (row.status !== "approved") actions.push({ label: t("reviews.approve"), icon: Check, onClick: () => setStatus([row.id], "approved") });
+    if (row.status !== "hold") actions.push({ label: t("reviews.hold"), icon: MessageSquare, onClick: () => setStatus([row.id], "hold") });
+    if (row.status !== "spam") actions.push({ label: t("status.review.spam"), icon: ShieldAlert, onClick: () => setStatus([row.id], "spam") });
+    if (row.status !== "trash") actions.push({ label: t("status.review.trash"), icon: Trash, onClick: () => setStatus([row.id], "trash") });
+    actions.push({ label: t("common.edit"), icon: Pencil, onClick: () => setEditing({ id: row.id, rating: row.rating || 5, review: row.review || "" }) });
+    actions.push({ label: t("reviews.delete_permanently"), icon: Trash2, destructive: true, onClick: () => setConfirmDelete(row) });
     return actions;
   };
 
   return (
     <div className="space-y-4">
       <PageHeader
-        title="Reviews"
-        description="Moderate customer product reviews"
+        title={t("routes.reviews")}
+        description={t("reviews.page_description")}
         actions={<AutoApproveToggle />}
       />
 
@@ -188,12 +192,12 @@ export default function Reviews() {
 
       {selected.length > 0 && (
         <div className="flex flex-wrap items-center gap-2 rounded-md border bg-muted/40 px-3 py-2">
-          <span className="text-sm text-muted-foreground">{selected.length} selected</span>
-          <Button size="sm" variant="outline" onClick={() => setStatus(selected, "approved")}>Approve</Button>
-          <Button size="sm" variant="outline" onClick={() => setStatus(selected, "hold")}>Hold</Button>
-          <Button size="sm" variant="outline" onClick={() => setStatus(selected, "spam")}>Spam</Button>
-          <Button size="sm" variant="outline" onClick={() => setStatus(selected, "trash")}>Trash</Button>
-          <Button size="sm" variant="destructive" onClick={() => setConfirmDelete("bulk")}>Delete</Button>
+          <span className="text-sm text-muted-foreground">{t("common.selected_count", { count: selected.length })}</span>
+          <Button size="sm" variant="outline" onClick={() => setStatus(selected, "approved")}>{t("reviews.approve")}</Button>
+          <Button size="sm" variant="outline" onClick={() => setStatus(selected, "hold")}>{t("reviews.hold")}</Button>
+          <Button size="sm" variant="outline" onClick={() => setStatus(selected, "spam")}>{t("status.review.spam")}</Button>
+          <Button size="sm" variant="outline" onClick={() => setStatus(selected, "trash")}>{t("status.review.trash")}</Button>
+          <Button size="sm" variant="destructive" onClick={() => setConfirmDelete("bulk")}>{t("common.delete")}</Button>
         </div>
       )}
 
@@ -206,18 +210,18 @@ export default function Reviews() {
         onSelectChange={setSelected}
         pagination={{ page: list.page, hasNext: list.hasNext, onNext: list.next, onPrev: list.prev }}
         rowActions={rowActions}
-        empty={{ icon: MessageSquare, title: "No reviews", description: "Reviews submitted by customers appear here." }}
+        empty={{ icon: MessageSquare, title: t("reviews.empty_title"), description: t("reviews.empty_description") }}
       />
 
       <Dialog open={Boolean(editing)} onOpenChange={(o) => !o && setEditing(null)}>
         <DialogContent>
           <DialogHeader>
-            <DialogTitle>Edit review</DialogTitle>
+            <DialogTitle>{t("reviews.edit_review")}</DialogTitle>
           </DialogHeader>
           {editing && (
             <div className="space-y-3">
               <div className="space-y-1.5">
-                <Label>Rating</Label>
+                <Label>{t("reviews.rating")}</Label>
                 <Select
                   value={String(editing.rating)}
                   onValueChange={(v) => setEditing((e) => ({ ...e, rating: Number(v) }))}
@@ -225,13 +229,13 @@ export default function Reviews() {
                   <SelectTrigger className="w-32"><SelectValue /></SelectTrigger>
                   <SelectContent>
                     {[1, 2, 3, 4, 5].map((n) => (
-                      <SelectItem key={n} value={String(n)}>{n} star{n > 1 ? "s" : ""}</SelectItem>
+                      <SelectItem key={n} value={String(n)}>{t(n > 1 ? "reviews.n_stars" : "reviews.n_star", { count: n })}</SelectItem>
                     ))}
                   </SelectContent>
                 </Select>
               </div>
               <div className="space-y-1.5">
-                <Label>Review</Label>
+                <Label>{t("reviews.review")}</Label>
                 <Textarea
                   rows={5}
                   value={editing.review}
@@ -241,8 +245,8 @@ export default function Reviews() {
             </div>
           )}
           <DialogFooter>
-            <Button variant="ghost" onClick={() => setEditing(null)}>Cancel</Button>
-            <Button onClick={saveEdit}>Save</Button>
+            <Button variant="ghost" onClick={() => setEditing(null)}>{t("common.cancel")}</Button>
+            <Button onClick={saveEdit}>{t("common.save")}</Button>
           </DialogFooter>
         </DialogContent>
       </Dialog>
@@ -250,9 +254,13 @@ export default function Reviews() {
       <ConfirmDialog
         open={Boolean(confirmDelete)}
         onOpenChange={(o) => !o && setConfirmDelete(null)}
-        title={confirmDelete === "bulk" ? `Delete ${selected.length} review(s)?` : "Delete this review?"}
-        description="This permanently removes the review."
-        confirmLabel="Delete"
+        title={
+          confirmDelete === "bulk"
+            ? t("reviews.confirm_delete_bulk", { count: selected.length })
+            : t("reviews.confirm_delete_one")
+        }
+        description={t("reviews.confirm_delete_description")}
+        confirmLabel={t("common.delete")}
         onConfirm={doDelete}
         loading={deleting}
       />
@@ -274,9 +282,9 @@ function AutoApproveToggle() {
     setSaving(true);
     try {
       await settings.saveGroup("products", { ...(settings.settings?.products || {}), auto_approve_reviews: v });
-      toast.success(v ? "New reviews publish immediately" : "New reviews are held for moderation");
+      toast.success(v ? t("reviews.auto_approve_on") : t("reviews.auto_approve_off"));
     } catch (e) {
-      toast.error(e.message || "Failed to save");
+      toast.error(e.message || t("reviews.save_failed"));
     } finally {
       setSaving(false);
     }
@@ -284,7 +292,7 @@ function AutoApproveToggle() {
 
   return (
     <label className="flex items-center gap-2 text-sm">
-      <span className="text-muted-foreground">Auto-approve new reviews</span>
+      <span className="text-muted-foreground">{t("reviews.auto_approve_label")}</span>
       <Switch checked={enabled} disabled={saving} onCheckedChange={toggle} />
     </label>
   );

package/src/commerce/admin/pages/products/components/AttributesSection.jsx

@@ -13,13 +13,13 @@ import {
 import { ChevronDown, ChevronRight, ChevronUp, Loader2, Plus, Settings2, Trash2 } from "lucide-react";
 
 import { base44, call } from "../../../lib/api";
+import { t } from "../../../i18n";
 import SearchSelect from "../../../components/SearchSelect";
 import ConfirmDialog from "../../../components/ConfirmDialog";
 import { slugify } from "../../../lib/product-utils";
 
-/** Sentinel option value for "create the thing I just typed". */
+/** Sentinel option value for "create the thing I just typed"; the typed name rides on `name`. */
 const CREATE = "__create__";
-const createdName = (label) => label.replace(/^Create "/, "").replace(/"$/, "");
 
 const fetchValues = (attributeId) =>
   base44.entities["commerce.ProductAttributeTerm"]
@@ -141,16 +141,16 @@ export default function AttributesSection({ product, up, refs, variations = [] }
     <div className="space-y-3">
       <div className="flex items-start justify-between gap-4">
         <div>
-          <h3 className="text-sm font-semibold">Options</h3>
+          <h3 className="text-sm font-semibold">{t("products.options")}</h3>
           <p className="text-xs text-muted-foreground">
-            What this product comes in — each combination of values becomes a variant below.
+            {t("products.options_hint")}
           </p>
         </div>
         <Button
           type="button"
           variant="ghost"
           size="icon"
-          title="Manage option catalog (affects all products)"
+          title={t("products.manage_option_catalog")}
           onClick={() => setManageOpen(true)}
         >
           <Settings2 className="h-4 w-4 text-muted-foreground" />
@@ -159,7 +159,7 @@ export default function AttributesSection({ product, up, refs, variations = [] }
 
       {attributes.length === 0 && (
         <p className="text-sm text-muted-foreground">
-          No options yet. Add one (Size, Color, Pack…) and pick the values this product comes in.
+          {t("products.options_empty")}
         </p>
       )}
 
@@ -175,7 +175,7 @@ export default function AttributesSection({ product, up, refs, variations = [] }
                   className="text-muted-foreground disabled:opacity-30"
                   disabled={i === 0}
                   onClick={() => moveRow(i, -1)}
-                  title="Move up"
+                  title={t("products.move_up")}
                 >
                   <ChevronUp className="h-4 w-4" />
                 </button>
@@ -184,7 +184,7 @@ export default function AttributesSection({ product, up, refs, variations = [] }
                   className="text-muted-foreground disabled:opacity-30"
                   disabled={i === attributes.length - 1}
                   onClick={() => moveRow(i, 1)}
-                  title="Move down"
+                  title={t("products.move_down")}
                 >
                   <ChevronDown className="h-4 w-4" />
                 </button>
@@ -199,19 +199,19 @@ export default function AttributesSection({ product, up, refs, variations = [] }
                     ? setPendingRemoveRow(i)
                     : removeRow(i)
                 }
-                title="Remove from this product"
+                title={t("products.remove_from_product")}
               >
                 <Trash2 className="h-4 w-4 text-muted-foreground" />
               </Button>
             </div>
             <SearchSelect
               multiple
-              placeholder="Values this product comes in…"
+              placeholder={t("products.values_placeholder")}
               value={selected.map((o) => ({ value: o, label: o }))}
               onChange={(next) => {
                 const created = next.find((o) => o.value === CREATE);
                 if (created) {
-                  createAndSelectValue(row, i, createdName(created.label));
+                  createAndSelectValue(row, i, created.name);
                   return;
                 }
                 const options = next.map((o) => o.value);
@@ -229,7 +229,7 @@ export default function AttributesSection({ product, up, refs, variations = [] }
                   .filter((v) => !term || v.name.toLowerCase().includes(term.toLowerCase()))
                   .map((v) => ({ value: v.name, label: v.name }));
                 const exact = values.some((v) => v.name.toLowerCase() === term.toLowerCase());
-                if (term && !exact) opts.push({ value: CREATE, label: `Create "${term}"` });
+                if (term && !exact) opts.push({ value: CREATE, label: t("products.create_named", { name: term }), name: term });
                 return opts;
               }}
             />
@@ -240,11 +240,11 @@ export default function AttributesSection({ product, up, refs, variations = [] }
       <div className="flex items-center gap-2">
         <SearchSelect
           className="w-72"
-          placeholder="Add option…"
+          placeholder={t("products.add_option_placeholder")}
           value={null}
           onChange={(opt) => {
             if (!opt) return;
-            if (opt.value === CREATE) createAndAttach(createdName(opt.label));
+            if (opt.value === CREATE) createAndAttach(opt.name);
             else attach(globalAttributes.find((a) => a.id === opt.value));
           }}
           search={async (q) => {
@@ -254,7 +254,7 @@ export default function AttributesSection({ product, up, refs, variations = [] }
               .filter((a) => !term || a.name.toLowerCase().includes(term.toLowerCase()))
               .map((a) => ({ value: a.id, label: a.name, meta: a.code || undefined }));
             const exact = globalAttributes.some((a) => a.name.toLowerCase() === term.toLowerCase());
-            if (term && !exact) opts.push({ value: CREATE, label: `Create "${term}"` });
+            if (term && !exact) opts.push({ value: CREATE, label: t("products.create_named", { name: term }), name: term });
             return opts;
           }}
         />
@@ -275,11 +275,18 @@ export default function AttributesSection({ product, up, refs, variations = [] }
         <ConfirmDialog
           open
           onOpenChange={(o) => !o && setPendingValues(null)}
-          title={`Remove ${pendingValues.removed.map((r) => `“${r}”`).join(", ")}?`}
-          description={`This deletes ${pendingValues.affected.length} variant(s)${
-            pendingValues.stock ? ` and their ${pendingValues.stock} units of stock` : ""
-          }. Their prices, stock and SKUs will be lost when you save.`}
-          confirmLabel="Delete variants"
+          title={t("products.confirm_remove_values", {
+            values: pendingValues.removed.map((r) => `“${r}”`).join(", "),
+          })}
+          description={
+            pendingValues.stock
+              ? t("products.confirm_remove_values_description_stock", {
+                  count: pendingValues.affected.length,
+                  stock: pendingValues.stock,
+                })
+              : t("products.confirm_remove_values_description", { count: pendingValues.affected.length })
+          }
+          confirmLabel={t("products.delete_variants")}
           onConfirm={() => {
             setRow(pendingValues.index, { options: pendingValues.options });
             setPendingValues(null);
@@ -291,13 +298,13 @@ export default function AttributesSection({ product, up, refs, variations = [] }
         <ConfirmDialog
           open
           onOpenChange={(o) => !o && setPendingRemoveRow(null)}
-          title={`Remove the “${attributes[pendingRemoveRow]?.name}” option?`}
+          title={t("products.confirm_remove_option", { name: attributes[pendingRemoveRow]?.name })}
           description={
             attributes.length === 1
-              ? `This deletes all ${variations.length} variant(s) with their prices, stock and SKUs.`
-              : `The variant list is rebuilt without it — prices, stock and SKUs of the current ${variations.length} variant(s) may be lost.`
+              ? t("products.confirm_remove_option_all", { count: variations.length })
+              : t("products.confirm_remove_option_rebuild", { count: variations.length })
           }
-          confirmLabel="Remove option"
+          confirmLabel={t("products.remove_option")}
           onConfirm={() => {
             removeRow(pendingRemoveRow);
             setPendingRemoveRow(null);
@@ -378,7 +385,7 @@ function ManageAttributesDialog({ attributes, valuesByAttr, loadValues, onClose,
     try {
       await call("admin-products", "save-term", {
         taxonomy: "attribute-term",
-        term: { attribute_id: attributeId, name: `Value ${order + 1}`, order },
+        term: { attribute_id: attributeId, name: t("products.default_value_name", { number: order + 1 }), order },
       });
       await loadValues(attributeId);
     } catch {
@@ -398,18 +405,17 @@ function ManageAttributesDialog({ attributes, valuesByAttr, loadValues, onClose,
     <Dialog open onOpenChange={(o) => !o && onClose()}>
       <DialogContent className="max-h-[85vh] overflow-y-auto sm:max-w-2xl">
         <DialogHeader>
-          <DialogTitle>Option catalog</DialogTitle>
+          <DialogTitle>{t("products.option_catalog")}</DialogTitle>
         </DialogHeader>
         <p className="-mt-2 text-xs text-muted-foreground">
-          Shared across every product — changes save immediately. To delete an option or a value,
-          remove it from the entity data.
+          {t("products.option_catalog_hint")}
         </p>
 
         <div className="space-y-2">
           <div className="grid grid-cols-[1fr_140px_72px_32px] gap-2 text-xs text-muted-foreground">
-            <span>Name</span>
-            <span>Code</span>
-            <span>Order</span>
+            <span>{t("common.name")}</span>
+            <span>{t("products.code")}</span>
+            <span>{t("products.order")}</span>
             <span />
           </div>
           {attributes.map((attr) => (
@@ -431,7 +437,7 @@ function ManageAttributesDialog({ attributes, valuesByAttr, loadValues, onClose,
                   className="h-8"
                   onBlur={(e) => saveAttribute(attr, { order: Number(e.target.value) || 0 })}
                 />
-                <button type="button" className="text-muted-foreground" onClick={() => toggle(attr.id)} title="Values">
+                <button type="button" className="text-muted-foreground" onClick={() => toggle(attr.id)} title={t("products.values")}>
                   {expanded === attr.id ? (
                     <ChevronDown className="h-4 w-4" />
                   ) : (
@@ -458,36 +464,36 @@ function ManageAttributesDialog({ attributes, valuesByAttr, loadValues, onClose,
                     </div>
                   ))}
                   {!(valuesByAttr[attr.id] || []).length && (
-                    <p className="text-xs text-muted-foreground">No values yet.</p>
+                    <p className="text-xs text-muted-foreground">{t("products.no_values")}</p>
                   )}
                   <Button type="button" variant="outline" size="sm" onClick={() => addValue(attr.id)}>
-                    <Plus className="mr-1 h-4 w-4" /> Add value
+                    <Plus className="mr-1 h-4 w-4" /> {t("products.add_value")}
                   </Button>
                 </div>
               )}
             </div>
           ))}
-          {!attributes.length && <p className="text-sm text-muted-foreground">No options yet.</p>}
+          {!attributes.length && <p className="text-sm text-muted-foreground">{t("products.no_options")}</p>}
         </div>
 
         <div className="flex items-end gap-2 border-t pt-3">
           <div className="flex-1 space-y-1.5">
-            <Label>New option</Label>
+            <Label>{t("products.new_option")}</Label>
             <Input
-              placeholder="e.g. Fabric"
+              placeholder={t("products.new_option_placeholder")}
               value={newName}
               onChange={(e) => setNewName(e.target.value)}
               onKeyDown={(e) => e.key === "Enter" && addAttribute()}
             />
           </div>
           <Button type="button" variant="outline" onClick={addAttribute} disabled={!newName.trim() || saving}>
-            <Plus className="mr-1 h-4 w-4" /> Add
+            <Plus className="mr-1 h-4 w-4" /> {t("common.add")}
           </Button>
         </div>
 
         <DialogFooter>
           {saving && <Loader2 className="mr-auto h-4 w-4 animate-spin text-muted-foreground" />}
-          <Button onClick={onClose}>Done</Button>
+          <Button onClick={onClose}>{t("products.done")}</Button>
         </DialogFooter>
       </DialogContent>
     </Dialog>

package/src/commerce/admin/pages/products/components/ProductDataPanel.jsx

@@ -2,6 +2,7 @@ import React from "react";
 import { Card, CardContent, CardHeader } from "@/components/ui/card";
 import { Checkbox } from "@/components/ui/checkbox";
 
+import { t } from "../../../i18n";
 import PriceInventoryTab from "./tabs/PriceInventoryTab";
 import ModifiersTab from "./tabs/ModifiersTab";
 import LinkedTab from "./tabs/LinkedTab";
@@ -18,7 +19,7 @@ export default function ProductDataPanel({ product, up, refs, variations, setVar
   const sections = [
     {
       id: "price",
-      label: "Price & Inventory",
+      label: t("products.price_inventory"),
       body: (
         <PriceInventoryTab
           product={product}
@@ -29,31 +30,31 @@ export default function ProductDataPanel({ product, up, refs, variations, setVar
         />
       ),
     },
-    { id: "modifiers", label: "Specifications", body: <ModifiersTab product={product} up={up} /> },
+    { id: "modifiers", label: t("products.specifications"), body: <ModifiersTab product={product} up={up} /> },
     ...(product.downloadable
-      ? [{ id: "downloads", label: "Downloads", body: <DownloadsTab product={product} up={up} /> }]
+      ? [{ id: "downloads", label: t("products.downloads"), body: <DownloadsTab product={product} up={up} /> }]
       : []),
-    { id: "linked", label: "Linked products", body: <LinkedTab product={product} up={up} /> },
+    { id: "linked", label: t("products.linked_products"), body: <LinkedTab product={product} up={up} /> },
   ];
 
   return (
     <Card>
       <CardHeader className="flex-row items-center gap-4 space-y-0 border-b py-3">
-        <span className="text-base font-semibold">Product data</span>
+        <span className="text-base font-semibold">{t("products.product_data")}</span>
         <div className="flex items-center gap-4 text-sm">
           <label className="flex items-center gap-1.5">
             <Checkbox
               checked={product.virtual}
               onCheckedChange={(v) => up({ virtual: Boolean(v) })}
             />
-            Virtual
+            {t("products.virtual")}
           </label>
           <label className="flex items-center gap-1.5">
             <Checkbox
               checked={product.downloadable}
               onCheckedChange={(v) => up({ downloadable: Boolean(v) })}
             />
-            Downloadable
+            {t("products.downloadable")}
           </label>
         </div>
       </CardHeader>

package/src/commerce/admin/pages/products/components/PublishBox.jsx

@@ -7,6 +7,7 @@ import { Switch } from "@/components/ui/switch";
 import { Loader2, Save, Trash2 } from "lucide-react";
 
 import ConfirmDialog from "../../../components/ConfirmDialog";
+import { t } from "../../../i18n";
 
 /**
  * Product editor "Publish" sidebar box. One Visible toggle drives `status`
@@ -32,14 +33,14 @@ export default function PublishBox({ product, up, onSave, onDelete, saving, dirt
   return (
     <Card>
       <CardHeader className="pb-2">
-        <CardTitle className="text-base">Publish</CardTitle>
+        <CardTitle className="text-base">{t("products.publish")}</CardTitle>
       </CardHeader>
       <CardContent className="space-y-3">
         <div className="flex items-start justify-between gap-4">
           <div>
-            <Label>Visible</Label>
+            <Label>{t("products.visible")}</Label>
             <p className="text-xs text-muted-foreground">
-              {visible ? "Shown in the store" : "Hidden — saved as a draft"}
+              {visible ? t("products.visible_on") : t("products.visible_off")}
             </p>
           </div>
           <Switch checked={visible} onCheckedChange={(v) => up({ status: v ? "publish" : "draft" })} />
@@ -50,16 +51,16 @@ export default function PublishBox({ product, up, onSave, onDelete, saving, dirt
             checked={Boolean(product.featured)}
             onCheckedChange={(c) => up({ featured: Boolean(c) })}
           />
-          Featured product
+          {t("products.featured_product")}
         </label>
 
         <div className="flex items-center gap-2 pt-1">
           <Button onClick={onSave} disabled={saving || !dirty} className="flex-1">
             {saving ? <Loader2 className="mr-2 h-4 w-4 animate-spin" /> : <Save className="mr-2 h-4 w-4" />}
-            Save
+            {t("common.save")}
           </Button>
           {onDelete && (
-            <Button variant="outline" size="icon" onClick={() => setConfirm(true)} title="Delete product">
+            <Button variant="outline" size="icon" onClick={() => setConfirm(true)} title={t("products.delete_product")}>
               <Trash2 className="h-4 w-4 text-destructive" />
             </Button>
           )}
@@ -69,9 +70,9 @@ export default function PublishBox({ product, up, onSave, onDelete, saving, dirt
       <ConfirmDialog
         open={confirm}
         onOpenChange={(o) => !o && setConfirm(false)}
-        title="Delete this product?"
-        description="This permanently deletes the product and its variations."
-        confirmLabel="Delete"
+        title={t("products.confirm_delete_this")}
+        description={t("products.confirm_delete_description")}
+        confirmLabel={t("common.delete")}
         onConfirm={doDelete}
         loading={deleting}
       />