@base44/app-plugin-commerce 0.7.1 → 0.8.0

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

@@ -6,6 +6,7 @@ import { FolderTree, Loader2, Plus, Trash2 } from "lucide-react";
 import { toast } from "sonner";
 
 import { base44, call } from "../../lib/api";
+import { t } from "../../i18n";
 import useAsync from "../../hooks/useAsync";
 import PageHeader from "../../components/PageHeader";
 import ConfirmDialog from "../../components/ConfirmDialog";
@@ -80,7 +81,7 @@ export default function Categories() {
           parent_id: row.parent_id,
         },
       });
-      toast.success(row.id ? "Category saved" : "Category added");
+      toast.success(row.id ? t("categories.saved") : t("categories.added"));
       refetch();
     } catch {
       /* toast handled by call() */
@@ -93,7 +94,7 @@ export default function Categories() {
     setDeleting(true);
     try {
       await call("admin-products", "delete-term", { taxonomy: "category", id: confirmDelete.id });
-      toast.success("Category deleted");
+      toast.success(t("categories.deleted"));
       setConfirmDelete(null);
       refetch();
     } catch {
@@ -115,7 +116,7 @@ export default function Categories() {
 
   return (
     <div className="space-y-4">
-      <PageHeader title="Categories" description="Organize products into categories" />
+      <PageHeader title={t("routes.categories")} description={t("categories.description")} />
 
       <Card className="max-w-3xl">
         <CardContent className="space-y-2 py-4">
@@ -124,15 +125,15 @@ export default function Categories() {
           {!loading && !rows.length && (
             <div className="flex items-center gap-3 py-6 text-muted-foreground">
               <FolderTree className="h-5 w-5" />
-              <span className="text-sm">No categories yet — add the first one below.</span>
+              <span className="text-sm">{t("categories.empty")}</span>
             </div>
           )}
 
           {rows.length > 0 && (
             <div className="grid grid-cols-[1fr_1fr_5rem_2.25rem] items-center gap-2 px-1 text-xs font-medium uppercase tracking-wide text-muted-foreground">
-              <span>Name</span>
-              <span>Slug</span>
-              <span>Order</span>
+              <span>{t("common.name")}</span>
+              <span>{t("categories.slug")}</span>
+              <span>{t("categories.order")}</span>
               <span />
             </div>
           )}
@@ -141,14 +142,14 @@ export default function Categories() {
             <div key={row.id || `new-${i}`} className="grid grid-cols-[1fr_1fr_5rem_2.25rem] items-center gap-2">
               <Input
                 autoFocus={!row.id && !row.name}
-                placeholder="Category name"
+                placeholder={t("categories.name_placeholder")}
                 value={row.name}
                 onChange={(e) => setField(i, "name", e.target.value)}
                 onBlur={() => commit(i)}
                 onKeyDown={blurOnEnter}
               />
               <Input
-                placeholder="auto from name"
+                placeholder={t("categories.slug_placeholder")}
                 className="font-mono text-xs lowercase"
                 value={row.slug}
                 onChange={(e) => setField(i, "slug", e.target.value)}
@@ -187,7 +188,7 @@ export default function Categories() {
               ])
             }
           >
-            <Plus className="mr-1 h-3 w-3" /> Add category
+            <Plus className="mr-1 h-3 w-3" /> {t("categories.add")}
           </Button>
         </CardContent>
       </Card>
@@ -195,9 +196,9 @@ export default function Categories() {
       <ConfirmDialog
         open={Boolean(confirmDelete)}
         onOpenChange={(o) => !o && setConfirmDelete(null)}
-        title={`Delete "${confirmDelete?.name}"?`}
-        description="Products in this category are not deleted; they simply lose the category. This cannot be undone."
-        confirmLabel="Delete"
+        title={t("categories.confirm_delete_title", { name: confirmDelete?.name })}
+        description={t("categories.confirm_delete_description")}
+        confirmLabel={t("common.delete")}
         onConfirm={doDelete}
         loading={deleting}
       />

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

@@ -6,6 +6,7 @@ import { Skeleton } from "@/components/ui/skeleton";
 import { toast } from "sonner";
 
 import { base44, call } from "../../lib/api";
+import { t } from "../../i18n";
 import useAsync from "../../hooks/useAsync";
 import { useAdminHref } from "../../context/BasePathContext";
 import PageHeader from "../../components/PageHeader";
@@ -107,7 +108,7 @@ export default function ProductEditor() {
   }, [id, isNew]);
 
   useEffect(() => {
-    load().catch((e) => toast.error(e.message || "Failed to load product"));
+    load().catch((e) => toast.error(e.message || t("products.load_failed")));
   }, [load]);
 
   /** Patch the product object. */
@@ -123,7 +124,7 @@ export default function ProductEditor() {
 
   const save = async () => {
     if (!product.name?.trim()) {
-      toast.error("Product name is required");
+      toast.error(t("products.name_required"));
       return;
     }
     setSaving(true);
@@ -131,7 +132,7 @@ export default function ProductEditor() {
       const payload = { product: { ...product, name: product.name.trim() }, variations };
       const data = await call("admin-products", "save", payload);
       const savedId = data?.product?.id || data?.id || id;
-      toast.success(isNew ? "Product created" : "Product saved");
+      toast.success(isNew ? t("products.created") : t("products.saved"));
       if (isNew && savedId) navigate(href(`products/${savedId}`), { replace: true });
       else await load();
     } catch {
@@ -143,7 +144,7 @@ export default function ProductEditor() {
 
   const doDelete = async () => {
     await call("admin-products", "delete", { id });
-    toast.success("Product deleted");
+    toast.success(t("products.deleted"));
     navigate(href("products"));
   };
 
@@ -170,7 +171,7 @@ export default function ProductEditor() {
   return (
     <div className="space-y-4">
       <PageHeader
-        title={isNew ? "Add new product" : "Edit product"}
+        title={isNew ? t("products.add_new_product") : t("routes.products_edit")}
         backHref={href("products")}
       />
 
@@ -179,13 +180,13 @@ export default function ProductEditor() {
         <div className="min-w-0 space-y-4">
           <Input
             className="h-11 text-lg font-medium"
-            placeholder="Product name"
+            placeholder={t("products.name_placeholder")}
             value={product.name}
             onChange={(e) => setName(e.target.value)}
           />
 
           <div className="flex items-center gap-2 text-sm text-muted-foreground">
-            <span>Slug:</span>
+            <span>{t("products.slug_label")}</span>
             <Input
               className="h-7 w-72 text-xs"
               value={product.slug || ""}
@@ -198,12 +199,12 @@ export default function ProductEditor() {
 
           <Card>
             <CardHeader className="pb-2">
-              <CardTitle className="text-base">Description</CardTitle>
+              <CardTitle className="text-base">{t("common.description")}</CardTitle>
             </CardHeader>
             <CardContent>
               <RichTextarea
                 rows={8}
-                placeholder="Full product description (HTML allowed)"
+                placeholder={t("products.description_placeholder")}
                 value={product.description || ""}
                 onChange={(v) => up({ description: v })}
               />
@@ -212,12 +213,12 @@ export default function ProductEditor() {
 
           <Card>
             <CardHeader className="pb-2">
-              <CardTitle className="text-base">Short description</CardTitle>
+              <CardTitle className="text-base">{t("products.short_description")}</CardTitle>
             </CardHeader>
             <CardContent>
               <RichTextarea
                 rows={4}
-                placeholder="Short summary shown in listings"
+                placeholder={t("products.short_description_placeholder")}
                 value={product.short_description || ""}
                 onChange={(v) => up({ short_description: v })}
               />
@@ -246,19 +247,19 @@ export default function ProductEditor() {
 
           <Card>
             <CardHeader className="pb-2">
-              <CardTitle className="text-base">Product image</CardTitle>
+              <CardTitle className="text-base">{t("products.product_image")}</CardTitle>
             </CardHeader>
             <CardContent>
-              <MediaUploader value={primaryImage} onChange={setPrimaryImage} label="Set product image" />
+              <MediaUploader value={primaryImage} onChange={setPrimaryImage} label={t("products.set_product_image")} />
             </CardContent>
           </Card>
 
           <Card>
             <CardHeader className="pb-2">
-              <CardTitle className="text-base">Product gallery</CardTitle>
+              <CardTitle className="text-base">{t("products.product_gallery")}</CardTitle>
             </CardHeader>
             <CardContent>
-              <MediaUploader multiple value={gallery} onChange={setGallery} label="Add gallery images" />
+              <MediaUploader multiple value={gallery} onChange={setGallery} label={t("products.add_gallery_images")} />
             </CardContent>
           </Card>
 

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

@@ -21,6 +21,7 @@ import { Copy, ImageIcon, Package, Pencil, Plus, Star, Trash2, Zap } from "lucid
 import { toast } from "sonner";
 
 import { base44, call } from "../../lib/api";
+import { t } from "../../i18n";
 import usePagedList from "../../hooks/usePagedList";
 import useAsync from "../../hooks/useAsync";
 import useDebounce from "../../hooks/useDebounce";
@@ -59,7 +60,7 @@ function QuickEdit({ product, open, onOpenChange, onSaved }) {
     setSaving(true);
     try {
       await call("admin-products", "save", { product: { id: product.id, ...form } });
-      toast.success("Product updated");
+      toast.success(t("products.updated"));
       onOpenChange(false);
       onSaved();
     } catch {
@@ -74,20 +75,20 @@ function QuickEdit({ product, open, onOpenChange, onSaved }) {
       <DialogContent className="sm:max-w-sm">
         <DialogHeader>
           <DialogTitle className="flex items-center gap-2">
-            <Zap className="h-4 w-4" /> Quick edit
+            <Zap className="h-4 w-4" /> {t("products.quick_edit")}
           </DialogTitle>
         </DialogHeader>
         <div className="space-y-3">
           <div className="space-y-1.5">
-            <Label>Regular price</Label>
+            <Label>{t("products.regular_price")}</Label>
             <MoneyInput value={form.regular_price} onChange={(v) => setForm((f) => ({ ...f, regular_price: v }))} />
           </div>
           <div className="space-y-1.5">
-            <Label>Sale price</Label>
+            <Label>{t("products.sale_price")}</Label>
             <MoneyInput value={form.sale_price} onChange={(v) => setForm((f) => ({ ...f, sale_price: v }))} />
           </div>
           <div className="space-y-1.5">
-            <Label>Stock quantity</Label>
+            <Label>{t("products.stock_quantity")}</Label>
             <Input
               type="number"
               value={form.stock_quantity ?? ""}
@@ -97,7 +98,7 @@ function QuickEdit({ product, open, onOpenChange, onSaved }) {
             />
           </div>
           <div className="space-y-1.5">
-            <Label>Status</Label>
+            <Label>{t("common.status")}</Label>
             <Select value={form.status} onValueChange={(v) => setForm((f) => ({ ...f, status: v }))}>
               <SelectTrigger><SelectValue /></SelectTrigger>
               <SelectContent>
@@ -109,7 +110,7 @@ function QuickEdit({ product, open, onOpenChange, onSaved }) {
           </div>
         </div>
         <DialogFooter>
-          <Button onClick={save} disabled={saving}>Save</Button>
+          <Button onClick={save} disabled={saving}>{t("common.save")}</Button>
         </DialogFooter>
       </DialogContent>
     </Dialog>
@@ -168,7 +169,7 @@ export default function ProductsList() {
   const duplicate = async (row) => {
     const data = await call("admin-products", "duplicate", { id: row.id });
     const newId = data?.product?.id || data?.id;
-    toast.success("Product duplicated");
+    toast.success(t("products.duplicated"));
     if (newId) navigate(href(`products/${newId}`));
     else list.refetch();
   };
@@ -178,11 +179,11 @@ export default function ProductsList() {
     try {
       if (confirmDelete === "bulk") {
         for (const id of selected) await call("admin-products", "delete", { id });
-        toast.success(`${selected.length} product(s) deleted`);
+        toast.success(t("products.n_deleted", { count: selected.length }));
         setSelected([]);
       } else {
         await call("admin-products", "delete", { id: confirmDelete.id });
-        toast.success("Product deleted");
+        toast.success(t("products.deleted"));
       }
       setConfirmDelete(null);
       list.refetch();
@@ -209,7 +210,7 @@ export default function ProductsList() {
     },
     {
       key: "name",
-      label: "Name",
+      label: t("common.name"),
       sortable: true,
       render: (row) => (
         <div>
@@ -218,16 +219,16 @@ export default function ProductsList() {
             className="font-medium hover:underline"
             onClick={() => navigate(href(`products/${row.id}`))}
           >
-            {row.name || "(no title)"}
+            {row.name || t("products.no_title")}
           </button>
-          {row.sku && <div className="text-xs text-muted-foreground">SKU: {row.sku}</div>}
+          {row.sku && <div className="text-xs text-muted-foreground">{t("products.sku_line", { sku: row.sku })}</div>}
         </div>
       ),
     },
-    { key: "sku", label: "SKU", className: "hidden md:table-cell", render: (row) => row.sku || "—" },
+    { key: "sku", label: t("products.sku"), className: "hidden md:table-cell", render: (row) => row.sku || "—" },
     {
       key: "stock_status",
-      label: "Stock",
+      label: t("products.stock"),
       render: (row) => (
         <div className="flex items-center gap-1.5">
           <StatusBadge status={row.stock_status} map={STOCK_STATUSES} />
@@ -239,7 +240,7 @@ export default function ProductsList() {
     },
     {
       key: "price",
-      label: "Price",
+      label: t("products.price"),
       sortable: true,
       render: (row) =>
         row.on_sale && row.sale_price != null ? (
@@ -255,7 +256,7 @@ export default function ProductsList() {
     },
     {
       key: "categories",
-      label: "Categories",
+      label: t("routes.categories"),
       className: "hidden lg:table-cell",
       render: (row) => {
         const names = (row.category_ids || []).map(categoryName).filter(Boolean);
@@ -267,7 +268,7 @@ export default function ProductsList() {
       label: "★",
       className: "w-10",
       render: (row) => (
-        <button type="button" onClick={() => toggleFeatured(row)} title="Toggle featured">
+        <button type="button" onClick={() => toggleFeatured(row)} title={t("products.toggle_featured")}>
           <Star
             className={`h-4 w-4 ${row.featured ? "fill-amber-400 text-amber-400" : "text-muted-foreground/40"}`}
           />
@@ -276,14 +277,14 @@ export default function ProductsList() {
     },
     {
       key: "created_date",
-      label: "Date",
+      label: t("products.date"),
       sortable: true,
       className: "hidden md:table-cell",
       render: (row) => formatDate(row.created_date),
     },
     {
       key: "status",
-      label: "Status",
+      label: t("common.status"),
       render: (row) => <StatusBadge status={row.status} map={PRODUCT_STATUSES} />,
     },
   ];
@@ -291,25 +292,25 @@ export default function ProductsList() {
   return (
     <div className="space-y-4">
       <PageHeader
-        title="Products"
-        description="Manage your catalog"
+        title={t("routes.products")}
+        description={t("products.manage_catalog")}
         actions={
           <Button onClick={() => navigate(href("products/new"))}>
-            <Plus className="mr-2 h-4 w-4" /> Add new
+            <Plus className="mr-2 h-4 w-4" /> {t("products.add_new")}
           </Button>
         }
       />
 
       <div className="flex flex-wrap items-end gap-2">
         <Input
-          placeholder="Search products…"
+          placeholder={t("products.search_placeholder")}
           value={q}
           onChange={(e) => setQ(e.target.value)}
           className="w-64"
         />
         <SearchSelect
           className="w-56"
-          placeholder="All categories"
+          placeholder={t("products.all_categories")}
           value={category}
           onChange={setCategory}
           search={async (query) =>
@@ -322,7 +323,7 @@ export default function ProductsList() {
         <Select value={stock} onValueChange={setStock}>
           <SelectTrigger className="w-40"><SelectValue /></SelectTrigger>
           <SelectContent>
-            <SelectItem value={ALL}>All stock</SelectItem>
+            <SelectItem value={ALL}>{t("products.all_stock")}</SelectItem>
             {STOCK_STATUSES.map((s) => (
               <SelectItem key={s.value} value={s.value}>{s.label}</SelectItem>
             ))}
@@ -330,7 +331,7 @@ export default function ProductsList() {
         </Select>
         {selected.length > 0 && (
           <Button variant="destructive" size="sm" onClick={() => setConfirmDelete("bulk")}>
-            <Trash2 className="mr-2 h-4 w-4" /> Delete ({selected.length})
+            <Trash2 className="mr-2 h-4 w-4" /> {t("products.delete_count", { count: selected.length })}
           </Button>
         )}
       </div>
@@ -346,15 +347,15 @@ export default function ProductsList() {
         onSelectChange={setSelected}
         pagination={{ page: list.page, hasNext: list.hasNext, onNext: list.next, onPrev: list.prev }}
         rowActions={(row) => [
-          { label: "Edit", icon: Pencil, onClick: () => navigate(href(`products/${row.id}`)) },
-          { label: "Quick edit", icon: Zap, onClick: () => setQuickEdit(row) },
-          { label: "Duplicate", icon: Copy, onClick: () => duplicate(row) },
-          { label: "Delete", icon: Trash2, destructive: true, onClick: () => setConfirmDelete(row) },
+          { label: t("common.edit"), icon: Pencil, onClick: () => navigate(href(`products/${row.id}`)) },
+          { label: t("products.quick_edit"), icon: Zap, onClick: () => setQuickEdit(row) },
+          { label: t("products.duplicate"), icon: Copy, onClick: () => duplicate(row) },
+          { label: t("common.delete"), icon: Trash2, destructive: true, onClick: () => setConfirmDelete(row) },
         ]}
         empty={{
           icon: Package,
-          title: "No products found",
-          description: usingSearch ? "Try a different search or filter." : "Create your first product to get started.",
+          title: t("products.empty_title"),
+          description: usingSearch ? t("products.empty_search") : t("products.empty_create"),
         }}
       />
 
@@ -368,9 +369,13 @@ export default function ProductsList() {
       <ConfirmDialog
         open={Boolean(confirmDelete)}
         onOpenChange={(o) => !o && setConfirmDelete(null)}
-        title={confirmDelete === "bulk" ? `Delete ${selected.length} product(s)?` : `Delete "${confirmDelete?.name}"?`}
-        description="This permanently deletes the product and its variations."
-        confirmLabel="Delete"
+        title={
+          confirmDelete === "bulk"
+            ? t("products.confirm_delete_bulk", { count: selected.length })
+            : t("products.confirm_delete_one", { name: confirmDelete?.name })
+        }
+        description={t("products.confirm_delete_description")}
+        confirmLabel={t("common.delete")}
         onConfirm={doDelete}
         loading={deleting}
       />