@base44/app-plugin-commerce 0.7.1 → 0.8.1

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

@@ -16,6 +16,7 @@ import { ChevronDown, ChevronRight, Copy, Trash2, TriangleAlert } from "lucide-r
 import { toast } from "sonner";
 
 import MoneyInput from "../../../../components/MoneyInput";
+import { t } from "../../../../i18n";
 import MediaUploader from "../../../../components/MediaUploader";
 import ConfirmDialog from "../../../../components/ConfirmDialog";
 import useMoney from "../../../../hooks/useMoney";
@@ -36,11 +37,11 @@ const fromDateInput = (v) => (v ? new Date(`${v}T00:00:00Z`).toISOString() : nul
  * and the attribute combination are what makes a variant itself, so they stay.
  */
 const COPY_GROUPS = [
-  { key: "price", label: "Price", fields: ["regular_price", "sale_price", "date_on_sale_from", "date_on_sale_to"] },
-  { key: "inventory", label: "Inventory", fields: ["manage_stock", "stock_quantity", "backorders", "stock_status"] },
+  { key: "price", label: t("products.section_price"), fields: ["regular_price", "sale_price", "date_on_sale_from", "date_on_sale_to"] },
+  { key: "inventory", label: t("products.section_inventory"), fields: ["manage_stock", "stock_quantity", "backorders", "stock_status"] },
   {
     key: "shipping",
-    label: "Shipping",
+    label: t("products.section_shipping"),
     fields: ["weight", "dimensions", "virtual", "downloadable"],
   },
 ];
@@ -77,12 +78,12 @@ function PriceFields({ values, set, hideRegular = false }) {
     <>
       {!hideRegular && (
         <div className="space-y-1.5">
-          <Label className="text-xs">Regular price</Label>
+          <Label className="text-xs">{t("products.regular_price")}</Label>
           <MoneyInput value={values.regular_price} onChange={(v) => set({ regular_price: v })} />
         </div>
       )}
       <div className="space-y-1.5">
-        <Label className="text-xs">Sale price</Label>
+        <Label className="text-xs">{t("products.sale_price")}</Label>
         <MoneyInput value={values.sale_price} onChange={(v) => set({ sale_price: v })} />
       </div>
       <div className="sm:col-span-2">
@@ -97,13 +98,13 @@ function PriceFields({ values, set, hideRegular = false }) {
               )
             }
           />
-          Schedule sale
+          {t("products.schedule_sale")}
         </label>
       </div>
       {scheduled && (
         <>
           <div className="space-y-1.5">
-            <Label className="text-xs">Sale start</Label>
+            <Label className="text-xs">{t("products.sale_start")}</Label>
             <Input
               type="date"
               value={toDateInput(values.date_on_sale_from)}
@@ -111,7 +112,7 @@ function PriceFields({ values, set, hideRegular = false }) {
             />
           </div>
           <div className="space-y-1.5">
-            <Label className="text-xs">Sale end</Label>
+            <Label className="text-xs">{t("products.sale_end")}</Label>
             <Input
               type="date"
               value={toDateInput(values.date_on_sale_to)}
@@ -140,7 +141,7 @@ function ShippingFields({ values, set, units }) {
   return (
     <>
       <div className="space-y-1.5">
-        <Label className="text-xs">Weight ({units.weightUnit})</Label>
+        <Label className="text-xs">{t("products.weight_with_unit", { unit: units.weightUnit })}</Label>
         <Input
           type="number"
           step="any"
@@ -149,7 +150,7 @@ function ShippingFields({ values, set, units }) {
         />
       </div>
       <div className="space-y-1.5">
-        <Label className="text-xs">Dimensions L×W×H ({units.dimensionUnit})</Label>
+        <Label className="text-xs">{t("products.dimensions_with_unit", { unit: units.dimensionUnit })}</Label>
         <div className="grid grid-cols-3 gap-1">
           {["length", "width", "height"].map((k) => (
             <Input
@@ -176,7 +177,7 @@ function DownloadsFields({ values, set }) {
         <div key={i} className="flex items-center gap-2">
           <Input
             className="w-48"
-            placeholder="Name"
+            placeholder={t("common.name")}
             value={d.name || ""}
             onChange={(e) =>
               set({ downloads: downloads.map((x, j) => (j === i ? { ...x, name: e.target.value } : x)) })
@@ -184,7 +185,7 @@ function DownloadsFields({ values, set }) {
           />
           <Input
             className="flex-1"
-            placeholder="File URL"
+            placeholder={t("products.file_url")}
             value={d.file_url || ""}
             onChange={(e) =>
               set({ downloads: downloads.map((x, j) => (j === i ? { ...x, file_url: e.target.value } : x)) })
@@ -219,15 +220,15 @@ function DownloadsFields({ values, set }) {
 function SingleProductFields({ product, up, units }) {
   return (
     <div className="grid max-w-2xl gap-4 sm:grid-cols-2">
-      <Section label="Price">
+      <Section label={t("products.section_price")}>
         <PriceFields values={product} set={up} />
       </Section>
 
-      <Section label="Inventory">
+      <Section label={t("products.section_inventory")}>
         <div className="space-y-1.5">
-          <Label className="text-xs">SKU</Label>
+          <Label className="text-xs">{t("products.sku")}</Label>
           <Input
-            placeholder="Unique stock keeping unit"
+            placeholder={t("products.sku_placeholder")}
             value={product.sku || ""}
             onChange={(e) => up({ sku: e.target.value })}
           />
@@ -239,13 +240,13 @@ function SingleProductFields({ product, up, units }) {
               checked={product.manage_stock}
               onCheckedChange={(v) => up({ manage_stock: Boolean(v) })}
             />
-            Track stock quantity
+            {t("products.track_stock_quantity")}
           </label>
         </div>
         {product.manage_stock ? (
           <>
             <div className="space-y-1.5">
-              <Label className="text-xs">Stock quantity</Label>
+              <Label className="text-xs">{t("products.stock_quantity")}</Label>
               <Input
                 type="number"
                 value={product.stock_quantity ?? ""}
@@ -253,7 +254,7 @@ function SingleProductFields({ product, up, units }) {
               />
             </div>
             <div className="space-y-1.5">
-              <Label className="text-xs">Backorders</Label>
+              <Label className="text-xs">{t("products.backorders")}</Label>
               <Select value={product.backorders || "no"} onValueChange={(v) => up({ backorders: v })}>
                 <SelectTrigger><SelectValue /></SelectTrigger>
                 <SelectContent>
@@ -264,10 +265,10 @@ function SingleProductFields({ product, up, units }) {
               </Select>
             </div>
             <div className="space-y-1.5">
-              <Label className="text-xs">Low stock threshold</Label>
+              <Label className="text-xs">{t("products.low_stock_threshold")}</Label>
               <Input
                 type="number"
-                placeholder="Store default"
+                placeholder={t("products.store_default")}
                 value={product.low_stock_amount ?? ""}
                 onChange={(e) => up({ low_stock_amount: num(e.target.value) })}
               />
@@ -275,7 +276,7 @@ function SingleProductFields({ product, up, units }) {
           </>
         ) : (
           <div className="space-y-1.5">
-            <Label className="text-xs">Stock status</Label>
+            <Label className="text-xs">{t("products.stock_status")}</Label>
             <Select value={product.stock_status || "instock"} onValueChange={(v) => up({ stock_status: v })}>
               <SelectTrigger><SelectValue /></SelectTrigger>
               <SelectContent>
@@ -289,7 +290,7 @@ function SingleProductFields({ product, up, units }) {
       </Section>
 
       {!product.virtual && (
-        <Section label="Shipping">
+        <Section label={t("products.section_shipping")}>
           <ShippingFields values={product} set={up} units={units} />
         </Section>
       )}
@@ -301,28 +302,28 @@ function SingleProductFields({ product, up, units }) {
 function VariantDetails({ variation, set, units, virtual }) {
   return (
     <div className="grid gap-4 sm:grid-cols-[140px_1fr]">
-      <MediaUploader value={variation.image || null} onChange={(image) => set({ image })} label="Image" />
+      <MediaUploader value={variation.image || null} onChange={(image) => set({ image })} label={t("products.image")} />
 
       <div className="grid gap-3 sm:grid-cols-2">
-        <Section label="Sale">
+        <Section label={t("products.section_sale")}>
           <PriceFields values={variation} set={set} hideRegular />
         </Section>
 
-        <Section label="Inventory">
+        <Section label={t("products.section_inventory")}>
           <div className="space-y-1.5">
-            <Label className="text-xs">Stock management</Label>
+            <Label className="text-xs">{t("products.stock_management")}</Label>
             <Select value={variation.manage_stock || "parent"} onValueChange={(v) => set({ manage_stock: v })}>
               <SelectTrigger><SelectValue /></SelectTrigger>
               <SelectContent>
-                <SelectItem value="parent">Same as product</SelectItem>
-                <SelectItem value="yes">Track quantity</SelectItem>
-                <SelectItem value="no">Don't track</SelectItem>
+                <SelectItem value="parent">{t("products.stock_same_as_product")}</SelectItem>
+                <SelectItem value="yes">{t("products.stock_track_quantity")}</SelectItem>
+                <SelectItem value="no">{t("products.stock_dont_track")}</SelectItem>
               </SelectContent>
             </Select>
           </div>
           {variation.manage_stock === "yes" && (
             <div className="space-y-1.5">
-              <Label className="text-xs">Backorders</Label>
+              <Label className="text-xs">{t("products.backorders")}</Label>
               <Select value={variation.backorders || "no"} onValueChange={(v) => set({ backorders: v })}>
                 <SelectTrigger><SelectValue /></SelectTrigger>
                 <SelectContent>
@@ -336,29 +337,29 @@ function VariantDetails({ variation, set, units, virtual }) {
         </Section>
 
         {!virtual && (
-          <Section label="Shipping">
+          <Section label={t("products.section_shipping")}>
             <ShippingFields values={variation} set={set} units={units} />
           </Section>
         )}
 
-        <Section label="Type">
+        <Section label={t("products.section_type")}>
           <div className="flex items-end gap-4 text-sm">
             <label className="flex items-center gap-1.5">
               <Checkbox checked={variation.virtual} onCheckedChange={(v) => set({ virtual: Boolean(v) })} />
-              Virtual
+              {t("products.virtual")}
             </label>
             <label className="flex items-center gap-1.5">
               <Checkbox
                 checked={variation.downloadable}
                 onCheckedChange={(v) => set({ downloadable: Boolean(v) })}
               />
-              Downloadable
+              {t("products.downloadable")}
             </label>
           </div>
         </Section>
 
         {variation.downloadable && (
-          <Section label="Files">
+          <Section label={t("products.section_files")}>
             <DownloadsFields values={variation} set={set} />
           </Section>
         )}
@@ -379,18 +380,18 @@ function TaxRules({ product, up, taxGroups }) {
         onClick={() => setOpen((o) => !o)}
       >
         {open ? <ChevronDown className="h-4 w-4" /> : <ChevronRight className="h-4 w-4" />}
-        Tax &amp; purchase rules
+        {t("products.tax_purchase_rules")}
         {!open && (
           <span className="font-normal text-xs">
             · {taxLabel} · {product.tax_group || "Products"}
-            {product.sold_individually ? " · max 1 per order" : ""}
+            {product.sold_individually ? ` · ${t("products.max_one_per_order")}` : ""}
           </span>
         )}
       </button>
       {open && (
         <div className="mt-3 grid max-w-md gap-3 sm:grid-cols-2">
           <div className="space-y-1.5">
-            <Label>Tax status</Label>
+            <Label>{t("products.tax_status")}</Label>
             <Select value={product.tax_status} onValueChange={(v) => up({ tax_status: v })}>
               <SelectTrigger><SelectValue /></SelectTrigger>
               <SelectContent>
@@ -401,7 +402,7 @@ function TaxRules({ product, up, taxGroups }) {
             </Select>
           </div>
           <div className="space-y-1.5">
-            <Label>Tax group</Label>
+            <Label>{t("products.tax_group")}</Label>
             <Select value={product.tax_group || "Products"} onValueChange={(v) => up({ tax_group: v })}>
               <SelectTrigger><SelectValue /></SelectTrigger>
               <SelectContent>
@@ -416,7 +417,7 @@ function TaxRules({ product, up, taxGroups }) {
               checked={product.sold_individually}
               onCheckedChange={(v) => up({ sold_individually: Boolean(v) })}
             />
-            Limit purchases to 1 item per order
+            {t("products.sold_individually")}
           </label>
         </div>
       )}
@@ -555,7 +556,7 @@ export default function PriceInventoryTab({ product, up, refs, variations, setVa
 
   const applyBulkPrice = () => {
     setVariations(variations.map((v, i) => (selected.includes(i) ? { ...v, regular_price: bulkPrice } : v)));
-    toast.success(`Price set on ${selected.length} variant(s).`);
+    toast.success(t("products.bulk_price_set", { count: selected.length }));
   };
   const applyBulkStock = () => {
     const qty = Number(bulkStock);
@@ -564,7 +565,7 @@ export default function PriceInventoryTab({ product, up, refs, variations, setVa
         selected.includes(i) ? { ...v, manage_stock: "yes", stock_quantity: qty } : v
       )
     );
-    toast.success(`Stock set on ${selected.length} variant(s).`);
+    toast.success(t("products.bulk_stock_set", { count: selected.length }));
   };
   /** Push one variant's price, inventory and shipping onto the selected rows. */
   const applyCopy = () => {
@@ -579,7 +580,7 @@ export default function PriceInventoryTab({ product, up, refs, variations, setVa
         return { ...v, ...patch };
       })
     );
-    toast.success(`Copied to ${selected.filter((i) => i !== Number(copyFrom)).length} variant(s).`);
+    toast.success(t("products.bulk_copied", { count: selected.filter((i) => i !== Number(copyFrom)).length }));
   };
 
   const switchToSingle = () => {
@@ -601,16 +602,16 @@ export default function PriceInventoryTab({ product, up, refs, variations, setVa
       <div>
         <div className="inline-flex rounded-lg border bg-muted/60 p-0.5">
           <button type="button" className={modeBtn(mode === "single")} onClick={switchToSingle}>
-            Single product
+            {t("products.single_product")}
           </button>
           <button type="button" className={modeBtn(mode === "variants")} onClick={() => setMode("variants")}>
-            Has variants
+            {t("products.has_variants")}
           </button>
         </div>
         <p className="mt-1.5 text-xs text-muted-foreground">
           {mode === "single"
-            ? "One price, one stock count. Switch if it comes in sizes, packs or colors."
-            : "Each combination of option values becomes a variant with its own price, stock and SKU."}
+            ? t("products.single_hint")
+            : t("products.variants_hint")}
         </p>
       </div>
 
@@ -624,33 +625,33 @@ export default function PriceInventoryTab({ product, up, refs, variations, setVa
             <div className="space-y-2 border-t pt-4">
               <div className="flex flex-wrap items-center justify-between gap-2">
                 <span className="text-sm font-semibold">
-                  {variations.length} variant{variations.length === 1 ? "" : "s"}
+                  {t("products.variant_count", { count: variations.length })}
                 </span>
                 <span className="text-xs text-muted-foreground">
-                  Store price:{" "}
+                  {t("products.store_price")}{" "}
                   <span className="font-semibold text-foreground">
-                    {fromPrice != null ? `from ${money.format(fromPrice)}` : "—"}
+                    {fromPrice != null ? t("products.from_price", { price: money.format(fromPrice) }) : "—"}
                   </span>{" "}
-                  (lowest enabled variant)
+                  {t("products.lowest_enabled_variant")}
                 </span>
               </div>
 
               {selected.length > 0 && (
                 <div className="flex flex-wrap items-center gap-2 rounded-md border bg-muted/40 p-2 text-sm">
-                  <span className="font-medium">{selected.length} selected</span>
+                  <span className="font-medium">{t("common.selected_count", { count: selected.length })}</span>
                   <MoneyInput className="w-32" value={bulkPrice} onChange={setBulkPrice} />
                   <Button type="button" variant="outline" size="sm" disabled={bulkPrice == null} onClick={applyBulkPrice}>
-                    Set price
+                    {t("products.set_price")}
                   </Button>
                   <Input
                     type="number"
                     className="h-9 w-24"
-                    placeholder="Qty"
+                    placeholder={t("products.qty")}
                     value={bulkStock}
                     onChange={(e) => setBulkStock(e.target.value)}
                   />
                   <Button type="button" variant="outline" size="sm" disabled={bulkStock === ""} onClick={applyBulkStock}>
-                    Set stock
+                    {t("products.set_stock")}
                   </Button>
                   <div className="flex items-center gap-1.5">
                     <Copy className="h-4 w-4 shrink-0 text-muted-foreground" />
@@ -665,11 +666,11 @@ export default function PriceInventoryTab({ product, up, refs, variations, setVa
                       </SelectContent>
                     </Select>
                     <Button type="button" variant="outline" size="sm" onClick={applyCopy}>
-                      Copy to selected
+                      {t("products.copy_to_selected")}
                     </Button>
                   </div>
                   <Button type="button" variant="ghost" size="sm" className="ml-auto" onClick={() => setSelected([])}>
-                    Clear
+                    {t("products.clear")}
                   </Button>
                 </div>
               )}
@@ -677,11 +678,8 @@ export default function PriceInventoryTab({ product, up, refs, variations, setVa
               {variations.length === 0 ? (
                 <Alert>
                   <TriangleAlert className="h-4 w-4" />
-                  <AlertTitle>No variants yet — customers can't buy this product</AlertTitle>
-                  <AlertDescription>
-                    Pick the values this product comes in for the option above and its variants
-                    appear here automatically.
-                  </AlertDescription>
+                  <AlertTitle>{t("products.no_variants_title")}</AlertTitle>
+                  <AlertDescription>{t("products.no_variants_description")}</AlertDescription>
                 </Alert>
               ) : (
                 <div className="overflow-x-auto rounded-md border">
@@ -692,15 +690,15 @@ export default function PriceInventoryTab({ product, up, refs, variations, setVa
                           <Checkbox
                             checked={allSelected}
                             onCheckedChange={(v) => setSelected(v ? variations.map((_, i) => i) : [])}
-                            aria-label="Select all variants"
+                            aria-label={t("products.select_all_variants")}
                           />
                         </th>
-                        <th className="p-2 font-semibold">Variant</th>
-                        <th className="w-36 p-2 font-semibold">Price</th>
-                        <th className="w-24 p-2 font-semibold">Stock</th>
-                        <th className="w-48 p-2 font-semibold">SKU</th>
-                        <th className="w-16 p-2 text-center font-semibold">Default</th>
-                        <th className="w-20 p-2 text-center font-semibold">Enabled</th>
+                        <th className="p-2 font-semibold">{t("products.variant")}</th>
+                        <th className="w-36 p-2 font-semibold">{t("products.price")}</th>
+                        <th className="w-24 p-2 font-semibold">{t("products.stock")}</th>
+                        <th className="w-48 p-2 font-semibold">{t("products.sku")}</th>
+                        <th className="w-16 p-2 text-center font-semibold">{t("products.default")}</th>
+                        <th className="w-20 p-2 text-center font-semibold">{t("products.enabled")}</th>
                       </tr>
                     </thead>
                     <tbody>
@@ -711,7 +709,7 @@ export default function PriceInventoryTab({ product, up, refs, variations, setVa
                               <Checkbox
                                 checked={selected.includes(i)}
                                 onCheckedChange={(on) => toggleSelect(i, Boolean(on))}
-                                aria-label={`Select ${variationLabel(v)}`}
+                                aria-label={t("products.select_variant", { name: variationLabel(v) })}
                               />
                             </td>
                             <td className="p-2">
@@ -719,7 +717,7 @@ export default function PriceInventoryTab({ product, up, refs, variations, setVa
                                 type="button"
                                 className="flex items-center gap-1.5 text-left font-medium"
                                 onClick={() => setExpanded(expanded === i ? null : i)}
-                                title="More fields (image, sale, shipping)"
+                                title={t("products.more_fields")}
                               >
                                 {expanded === i ? (
                                   <ChevronDown className="h-4 w-4 shrink-0 text-muted-foreground" />
@@ -739,7 +737,7 @@ export default function PriceInventoryTab({ product, up, refs, variations, setVa
                               <Input
                                 type="number"
                                 placeholder="—"
-                                title={v.manage_stock === "yes" ? "Tracked quantity" : "Not tracked — type a quantity to track"}
+                                title={v.manage_stock === "yes" ? t("products.tracked_quantity") : t("products.not_tracked")}
                                 value={v.manage_stock === "yes" ? v.stock_quantity ?? "" : ""}
                                 onChange={(e) =>
                                   setVariation(
@@ -764,7 +762,7 @@ export default function PriceInventoryTab({ product, up, refs, variations, setVa
                                 className="h-4 w-4 accent-foreground"
                                 checked={isDefault(v)}
                                 onChange={() => makeDefault(v)}
-                                aria-label={`Make ${variationLabel(v)} the default`}
+                                aria-label={t("products.make_default", { name: variationLabel(v) })}
                               />
                             </td>
                             <td className="p-2 text-center">
@@ -773,7 +771,7 @@ export default function PriceInventoryTab({ product, up, refs, variations, setVa
                                 onCheckedChange={(on) =>
                                   setVariation(i, { ...v, status: on ? "publish" : "private" })
                                 }
-                                aria-label={`Enable ${variationLabel(v)}`}
+                                aria-label={t("products.enable_variant", { name: variationLabel(v) })}
                               />
                             </td>
                           </tr>
@@ -806,9 +804,9 @@ export default function PriceInventoryTab({ product, up, refs, variations, setVa
       <ConfirmDialog
         open={confirmSingle}
         onOpenChange={setConfirmSingle}
-        title="Switch to a single product?"
-        description={`This removes ${variations.length} variant(s) and their stock and prices. The product keeps one price and one stock count.`}
-        confirmLabel="Remove variants"
+        title={t("products.switch_single_title")}
+        description={t("products.switch_single_description", { count: variations.length })}
+        confirmLabel={t("products.remove_variants")}
         onConfirm={() => {
           up({ attributes: [], default_attributes: [] });
           setVariations([]);