@base44/app-plugin-commerce 0.7.1 → 0.8.0

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

@@ -16,6 +16,7 @@ import { Loader2, Plus } from "lucide-react";
 import { toast } from "sonner";
 
 import { base44 } from "../../../lib/api";
+import { t } from "../../../i18n";
 import SearchSelect from "../../../components/SearchSelect";
 import { slugify } from "../../../lib/product-utils";
 
@@ -87,14 +88,14 @@ function CategoriesCard({ categories, selected, onChange, refresh }) {
         slug: slugify(name),
         parent_id: parent === NO_PARENT ? "" : parent,
       });
-      toast.success("Category created");
+      toast.success(t("products.category_created"));
       setName("");
       setParent(NO_PARENT);
       setAdding(false);
       await refresh?.();
       if (created?.id) onChange([...selected, created.id]);
     } catch (e) {
-      toast.error(e.message || "Failed to create category");
+      toast.error(e.message || t("products.category_create_failed"));
     } finally {
       setSaving(false);
     }
@@ -103,7 +104,7 @@ function CategoriesCard({ categories, selected, onChange, refresh }) {
   return (
     <Card>
       <CardHeader className="pb-2">
-        <CardTitle className="text-base">Categories</CardTitle>
+        <CardTitle className="text-base">{t("routes.categories")}</CardTitle>
       </CardHeader>
       <CardContent className="space-y-2">
         {tree.length > 0 ? (
@@ -122,21 +123,21 @@ function CategoriesCard({ categories, selected, onChange, refresh }) {
             </div>
           </ScrollArea>
         ) : (
-          <p className="text-sm text-muted-foreground">No categories yet.</p>
+          <p className="text-sm text-muted-foreground">{t("products.no_categories")}</p>
         )}
 
         {adding ? (
           <div className="space-y-2 rounded-md border p-2">
             <div className="space-y-1">
-              <Label className="text-xs">Name</Label>
-              <Input value={name} onChange={(e) => setName(e.target.value)} placeholder="Category name" />
+              <Label className="text-xs">{t("common.name")}</Label>
+              <Input value={name} onChange={(e) => setName(e.target.value)} placeholder={t("products.category_name_placeholder")} />
             </div>
             <div className="space-y-1">
-              <Label className="text-xs">Parent</Label>
+              <Label className="text-xs">{t("products.parent")}</Label>
               <Select value={parent} onValueChange={setParent}>
                 <SelectTrigger><SelectValue /></SelectTrigger>
                 <SelectContent>
-                  <SelectItem value={NO_PARENT}>— None —</SelectItem>
+                  <SelectItem value={NO_PARENT}>{t("products.no_parent")}</SelectItem>
                   {categories.map((c) => (
                     <SelectItem key={c.id} value={c.id}>{c.name}</SelectItem>
                   ))}
@@ -145,16 +146,16 @@ function CategoriesCard({ categories, selected, onChange, refresh }) {
             </div>
             <div className="flex gap-2">
               <Button size="sm" onClick={create} disabled={saving || !name.trim()}>
-                {saving && <Loader2 className="mr-2 h-3 w-3 animate-spin" />}Add
+                {saving && <Loader2 className="mr-2 h-3 w-3 animate-spin" />}{t("common.add")}
               </Button>
               <Button size="sm" variant="ghost" onClick={() => setAdding(false)} disabled={saving}>
-                Cancel
+                {t("common.cancel")}
               </Button>
             </div>
           </div>
         ) : (
           <Button variant="link" size="sm" className="h-auto p-0 text-xs" onClick={() => setAdding(true)}>
-            <Plus className="mr-1 h-3 w-3" /> Add new category
+            <Plus className="mr-1 h-3 w-3" /> {t("products.add_new_category")}
           </Button>
         )}
       </CardContent>
@@ -196,12 +197,12 @@ function RibbonsCard({ ribbons, selected, onChange, refresh }) {
     setSaving(true);
     try {
       const created = await base44.entities["commerce.ProductRibbon"].create({ name: label, count: 0 });
-      toast.success("Ribbon created");
+      toast.success(t("products.ribbon_created"));
       setNewRibbon("");
       await refresh?.();
       if (created?.id) onChange([...selected, created.id]);
     } catch (e) {
-      toast.error(e.message || "Failed to create ribbon");
+      toast.error(e.message || t("products.ribbon_create_failed"));
     } finally {
       setSaving(false);
     }
@@ -210,12 +211,12 @@ function RibbonsCard({ ribbons, selected, onChange, refresh }) {
   return (
     <Card>
       <CardHeader className="pb-2">
-        <CardTitle className="text-base">Ribbons</CardTitle>
+        <CardTitle className="text-base">{t("products.ribbons")}</CardTitle>
       </CardHeader>
       <CardContent className="space-y-2">
         <SearchSelect
           multiple
-          placeholder="Select ribbons"
+          placeholder={t("products.select_ribbons")}
           value={value}
           onChange={(next) => onChange(next.map((o) => o.value))}
           search={search}
@@ -230,11 +231,11 @@ function RibbonsCard({ ribbons, selected, onChange, refresh }) {
                 createRibbon();
               }
             }}
-            placeholder="Add new ribbon"
+            placeholder={t("products.add_new_ribbon")}
             className="h-8 text-sm"
           />
           <Button size="sm" variant="outline" onClick={createRibbon} disabled={saving || !newRibbon.trim()}>
-            {saving ? <Loader2 className="h-3 w-3 animate-spin" /> : "Add"}
+            {saving ? <Loader2 className="h-3 w-3 animate-spin" /> : t("common.add")}
           </Button>
         </div>
       </CardContent>

package/src/commerce/admin/pages/products/components/tabs/DownloadsTab.jsx

@@ -5,6 +5,7 @@ import { Label } from "@/components/ui/label";
 import { Plus, Trash2 } from "lucide-react";
 
 import MediaUploader from "../../../../components/MediaUploader";
+import { t } from "../../../../i18n";
 
 const num = (v, fallback) => (v === "" ? fallback : Number(v));
 
@@ -18,19 +19,19 @@ export default function DownloadsTab({ product, up }) {
   return (
     <div className="max-w-xl space-y-4">
       <div className="space-y-3">
-        <Label>Downloadable files</Label>
+        <Label>{t("products.downloadable_files")}</Label>
         {downloads.map((d, i) => (
           <div key={i} className="grid gap-2 rounded-md border p-3 sm:grid-cols-[1fr_1fr_auto]">
             <div className="space-y-1.5">
-              <Label className="text-xs">Name</Label>
+              <Label className="text-xs">{t("common.name")}</Label>
               <Input
-                placeholder="e.g. User manual"
+                placeholder={t("products.download_name_placeholder")}
                 value={d.name || ""}
                 onChange={(e) => setRow(i, { name: e.target.value })}
               />
             </div>
             <div className="space-y-1.5">
-              <Label className="text-xs">File</Label>
+              <Label className="text-xs">{t("products.file")}</Label>
               {d.file_url ? (
                 <div className="flex items-center gap-2">
                   <Input value={d.file_url} onChange={(e) => setRow(i, { file_url: e.target.value })} />
@@ -38,7 +39,7 @@ export default function DownloadsTab({ product, up }) {
               ) : (
                 <MediaUploader
                   accept="*/*"
-                  label="Upload file"
+                  label={t("products.upload_file")}
                   value={null}
                   onChange={(img) => img && setRow(i, { file_url: img.src, name: d.name || img.name })}
                 />
@@ -62,28 +63,28 @@ export default function DownloadsTab({ product, up }) {
           size="sm"
           onClick={() => up({ downloads: [...downloads, { name: "", file_url: "" }] })}
         >
-          <Plus className="mr-1 h-4 w-4" /> Add file
+          <Plus className="mr-1 h-4 w-4" /> {t("products.add_file")}
         </Button>
       </div>
 
       <div className="grid max-w-md grid-cols-2 gap-2">
         <div className="space-y-1.5">
-          <Label>Download limit</Label>
+          <Label>{t("products.download_limit")}</Label>
           <Input
             type="number"
             value={product.download_limit ?? -1}
             onChange={(e) => up({ download_limit: num(e.target.value, -1) })}
           />
-          <p className="text-xs text-muted-foreground">-1 for unlimited downloads.</p>
+          <p className="text-xs text-muted-foreground">{t("products.download_limit_hint")}</p>
         </div>
         <div className="space-y-1.5">
-          <Label>Download expiry (days)</Label>
+          <Label>{t("products.download_expiry")}</Label>
           <Input
             type="number"
             value={product.download_expiry ?? -1}
             onChange={(e) => up({ download_expiry: num(e.target.value, -1) })}
           />
-          <p className="text-xs text-muted-foreground">-1 for no expiry.</p>
+          <p className="text-xs text-muted-foreground">{t("products.download_expiry_hint")}</p>
         </div>
       </div>
     </div>

package/src/commerce/admin/pages/products/components/tabs/LinkedTab.jsx

@@ -3,6 +3,7 @@ import { Label } from "@/components/ui/label";
 
 import { base44, call } from "../../../../lib/api";
 import SearchSelect from "../../../../components/SearchSelect";
+import { t } from "../../../../i18n";
 
 /** Search products server-side for the pickers. */
 const searchProducts = async (q) => {
@@ -29,8 +30,8 @@ function ProductIdsPicker({ ids, onChange, placeholder }) {
     Promise.all(
       missing.map((id) =>
         base44.entities["commerce.Product"].get(id)
-          .then((p) => ({ value: id, label: p?.name || "(deleted product)" }))
-          .catch(() => ({ value: id, label: "(deleted product)" }))
+          .then((p) => ({ value: id, label: p?.name || t("products.deleted_product") }))
+          .catch(() => ({ value: id, label: t("products.deleted_product") }))
       )
     ).then((resolved) => {
       if (!cancelled) setOptions([...(options || []), ...resolved]);
@@ -64,25 +65,23 @@ export default function LinkedTab({ product, up }) {
   return (
     <div className="max-w-md space-y-4">
       <div className="space-y-1.5">
-        <Label>Upsells</Label>
+        <Label>{t("products.upsells")}</Label>
         <ProductIdsPicker
           ids={product.upsell_ids}
           onChange={(upsell_ids) => up({ upsell_ids })}
-          placeholder="Search for products to upsell…"
+          placeholder={t("products.upsells_placeholder")}
         />
-        <p className="text-xs text-muted-foreground">
-          Recommended instead of this product, e.g. premium alternatives.
-        </p>
+        <p className="text-xs text-muted-foreground">{t("products.upsells_hint")}</p>
       </div>
 
       <div className="space-y-1.5">
-        <Label>Cross-sells</Label>
+        <Label>{t("products.cross_sells")}</Label>
         <ProductIdsPicker
           ids={product.cross_sell_ids}
           onChange={(cross_sell_ids) => up({ cross_sell_ids })}
-          placeholder="Search for products to cross-sell…"
+          placeholder={t("products.cross_sells_placeholder")}
         />
-        <p className="text-xs text-muted-foreground">Promoted in the cart alongside this product.</p>
+        <p className="text-xs text-muted-foreground">{t("products.cross_sells_hint")}</p>
       </div>
     </div>
   );

package/src/commerce/admin/pages/products/components/tabs/ModifiersTab.jsx

@@ -1,6 +1,7 @@
 import React from "react";
 
 import MetaDataEditor from "../../../../components/MetaDataEditor";
+import { t } from "../../../../i18n";
 
 /**
  * Descriptive properties — Material, Care, GTIN. They are `meta_data`, never
@@ -10,16 +11,9 @@ export default function ModifiersTab({ product, up }) {
   const empty = !(product.meta_data || []).length;
   return (
     <div className="max-w-xl space-y-2">
-      <p className="text-xs text-muted-foreground">
-        Descriptive details shown on the product page (e.g. ingredients, allergens, care
-        instructions).
-      </p>
+      <p className="text-xs text-muted-foreground">{t("products.modifiers_hint")}</p>
       <MetaDataEditor value={product.meta_data || []} onChange={(meta_data) => up({ meta_data })} />
-      {empty && (
-        <p className="text-xs text-muted-foreground">
-          Want the product to vary by something? Add it as an option under Price &amp; Inventory.
-        </p>
-      )}
+      {empty && <p className="text-xs text-muted-foreground">{t("products.modifiers_empty_hint")}</p>}
     </div>
   );
 }