@base44/app-plugin-commerce 0.7.0 → 0.8.0

package/src/commerce/admin/pages/coupons/CouponEditor.jsx

@@ -20,6 +20,7 @@ import {
 import { Loader2, Wand2, X } from "lucide-react";
 
 import { call, base44 } from "../../lib/api";
+import { t } from "../../i18n";
 import { COUPON_TYPES } from "../../lib/constants";
 import useMoney from "../../hooks/useMoney";
 import { useAdminHref } from "../../context/BasePathContext";
@@ -82,7 +83,7 @@ function EmailChips({ value = [], onChange }) {
           }
         }}
         onBlur={add}
-        placeholder="email@example.com or *@example.com — press Enter"
+        placeholder={t("coupons.email_chips_placeholder")}
       />
       {value.length > 0 && (
         <div className="mt-2 flex flex-wrap gap-1">
@@ -104,13 +105,13 @@ function EmailChips({ value = [], onChange }) {
   );
 }
 
-function NumberField({ value, onChange, placeholder = "Unlimited" }) {
+function NumberField({ value, onChange, placeholder }) {
   return (
     <Input
       type="number"
       min="0"
       value={value ?? ""}
-      placeholder={placeholder}
+      placeholder={placeholder ?? t("coupons.unlimited")}
       onChange={(e) => onChange(e.target.value === "" ? null : Number(e.target.value))}
     />
   );
@@ -189,11 +190,11 @@ export default function CouponEditor() {
 
   const save = async () => {
     if (!coupon.code?.trim()) {
-      toast.error("A coupon code is required");
+      toast.error(t("coupons.code_required"));
       return;
     }
     if (coupon.amount === null || coupon.amount === undefined) {
-      toast.error("A discount amount is required");
+      toast.error(t("coupons.amount_required"));
       return;
     }
     setSaving(true);
@@ -207,7 +208,7 @@ export default function CouponEditor() {
           : null,
       };
       const saved = await call("admin-coupons", "save", { coupon: payload });
-      toast.success("Coupon saved");
+      toast.success(t("coupons.saved"));
       if (isNew && saved?.id) navigate(href(`coupons/${saved.id}`), { replace: true });
       else if (saved) setCoupon((c) => ({ ...c, ...saved }));
     } catch {
@@ -221,7 +222,7 @@ export default function CouponEditor() {
     setDeleting(true);
     try {
       await call("admin-coupons", "delete", { id });
-      toast.success("Coupon deleted");
+      toast.success(t("coupons.deleted"));
       navigate(href("coupons"));
     } catch {
       setDeleting(false);
@@ -241,7 +242,7 @@ export default function CouponEditor() {
   return (
     <div>
       <PageHeader
-        title={isNew ? "Add coupon" : `Coupon: ${coupon.code}`}
+        title={isNew ? t("routes.coupons_new") : t("coupons.title_with_code", { code: coupon.code })}
         backHref={href("coupons")}
       />
 
@@ -251,12 +252,12 @@ export default function CouponEditor() {
           <Card>
             <CardContent className="space-y-4 pt-6">
               <div className="grid gap-1.5">
-                <Label>Coupon code</Label>
+                <Label>{t("coupons.coupon_code")}</Label>
                 <div className="flex gap-2">
                   <Input
                     value={coupon.code}
                     onChange={(e) => set("code")(e.target.value)}
-                    placeholder="e.g. welcome10"
+                    placeholder={t("coupons.code_placeholder")}
                     className="font-mono lowercase"
                   />
                   <Button
@@ -264,12 +265,12 @@ export default function CouponEditor() {
                     variant="outline"
                     onClick={() => set("code")(randomCode())}
                   >
-                    <Wand2 className="mr-1 h-4 w-4" /> Generate
+                    <Wand2 className="mr-1 h-4 w-4" /> {t("coupons.generate")}
                   </Button>
                 </div>
               </div>
               <div className="grid gap-1.5">
-                <Label>Description (optional)</Label>
+                <Label>{t("coupons.description_optional")}</Label>
                 <Textarea
                   rows={2}
                   value={coupon.description || ""}
@@ -282,11 +283,11 @@ export default function CouponEditor() {
           {/* Coupon data: stacked cards, like the product editor's sections */}
           <Card>
             <CardHeader className="pb-2">
-              <CardTitle className="text-base">General</CardTitle>
+              <CardTitle className="text-base">{t("coupons.general")}</CardTitle>
             </CardHeader>
             <CardContent className="space-y-4">
               <div className="grid gap-1.5 sm:max-w-sm">
-                <Label>Discount type</Label>
+                <Label>{t("coupons.discount_type")}</Label>
                 <Select value={coupon.discount_type} onValueChange={set("discount_type")}>
                   <SelectTrigger>
                     <SelectValue />
@@ -301,7 +302,7 @@ export default function CouponEditor() {
                 </Select>
               </div>
               <div className="grid gap-1.5 sm:max-w-sm">
-                <Label>Coupon amount {isPercent ? "(%)" : ""}</Label>
+                <Label>{isPercent ? t("coupons.amount_label_percent") : t("coupons.amount_label")}</Label>
                 {isPercent ? (
                   <div className="relative">
                     <Input
@@ -330,14 +331,14 @@ export default function CouponEditor() {
                   className="mt-0.5"
                 />
                 <span>
-                  Allow free shipping
+                  {t("coupons.free_shipping")}
                   <span className="block text-xs text-muted-foreground">
-                    Grants access to free-shipping methods that require a coupon.
+                    {t("coupons.free_shipping_hint")}
                   </span>
                 </span>
               </label>
               <div className="grid gap-1.5 sm:max-w-sm">
-                <Label>Coupon expiry date</Label>
+                <Label>{t("coupons.coupon_expiry_date")}</Label>
                 <Input
                   type="date"
                   value={coupon.date_expires ? coupon.date_expires.slice(0, 10) : ""}
@@ -349,24 +350,24 @@ export default function CouponEditor() {
 
           <Card>
             <CardHeader className="pb-2">
-              <CardTitle className="text-base">Usage restriction</CardTitle>
+              <CardTitle className="text-base">{t("coupons.usage_restriction")}</CardTitle>
             </CardHeader>
             <CardContent className="space-y-4">
               <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
                         <div className="grid gap-1.5">
-                          <Label>Minimum spend ({money.code})</Label>
+                          <Label>{t("coupons.minimum_spend", { code: money.code })}</Label>
                           <MoneyInput
                             value={coupon.minimum_amount}
                             onChange={set("minimum_amount")}
-                            placeholder="No minimum"
+                            placeholder={t("coupons.no_minimum")}
                           />
                         </div>
                         <div className="grid gap-1.5">
-                          <Label>Maximum spend ({money.code})</Label>
+                          <Label>{t("coupons.maximum_spend", { code: money.code })}</Label>
                           <MoneyInput
                             value={coupon.maximum_amount}
                             onChange={set("maximum_amount")}
-                            placeholder="No maximum"
+                            placeholder={t("coupons.no_maximum")}
                           />
                         </div>
                       </div>
@@ -377,9 +378,9 @@ export default function CouponEditor() {
                           className="mt-0.5"
                         />
                         <span>
-                          Individual use only
+                          {t("coupons.individual_use")}
                           <span className="block text-xs text-muted-foreground">
-                            Cannot be used in conjunction with other coupons.
+                            {t("coupons.individual_use_hint")}
                           </span>
                         </span>
                       </label>
@@ -390,21 +391,21 @@ export default function CouponEditor() {
                           className="mt-0.5"
                         />
                         <span>
-                          Exclude sale items
+                          {t("coupons.exclude_sale_items")}
                           <span className="block text-xs text-muted-foreground">
-                            The coupon will not apply to items on sale.
+                            {t("coupons.exclude_sale_items_hint")}
                           </span>
                         </span>
                       </label>
                       <Separator />
                       <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
                         <div className="grid gap-1.5">
-                          <Label>Products</Label>
+                          <Label>{t("routes.products")}</Label>
                           <SearchSelect
                             multiple
                             search={searchProducts}
                             value={productOpts.include}
-                            placeholder="Any product"
+                            placeholder={t("coupons.any_product")}
                             onChange={(opts) => {
                               setProductOpts((o) => ({ ...o, include: opts }));
                               set("product_ids")(opts.map((o) => o.value));
@@ -412,12 +413,12 @@ export default function CouponEditor() {
                           />
                         </div>
                         <div className="grid gap-1.5">
-                          <Label>Exclude products</Label>
+                          <Label>{t("coupons.exclude_products")}</Label>
                           <SearchSelect
                             multiple
                             search={searchProducts}
                             value={productOpts.exclude}
-                            placeholder="No exclusions"
+                            placeholder={t("coupons.no_exclusions")}
                             onChange={(opts) => {
                               setProductOpts((o) => ({ ...o, exclude: opts }));
                               set("excluded_product_ids")(opts.map((o) => o.value));
@@ -425,22 +426,22 @@ export default function CouponEditor() {
                           />
                         </div>
                         <div className="grid gap-1.5">
-                          <Label>Product categories</Label>
+                          <Label>{t("coupons.product_categories")}</Label>
                           <SearchSelect
                             multiple
                             search={searchCategories}
                             value={categoryOpts(coupon.product_category_ids)}
-                            placeholder="Any category"
+                            placeholder={t("coupons.any_category")}
                             onChange={(opts) => set("product_category_ids")(opts.map((o) => o.value))}
                           />
                         </div>
                         <div className="grid gap-1.5">
-                          <Label>Exclude categories</Label>
+                          <Label>{t("coupons.exclude_categories")}</Label>
                           <SearchSelect
                             multiple
                             search={searchCategories}
                             value={categoryOpts(coupon.excluded_product_category_ids)}
-                            placeholder="No exclusions"
+                            placeholder={t("coupons.no_exclusions")}
                             onChange={(opts) =>
                               set("excluded_product_category_ids")(opts.map((o) => o.value))
                             }
@@ -448,14 +449,13 @@ export default function CouponEditor() {
                         </div>
                       </div>
               <div className="grid gap-1.5">
-                <Label>Allowed emails</Label>
+                <Label>{t("coupons.allowed_emails")}</Label>
                 <EmailChips
                   value={coupon.email_restrictions || []}
                   onChange={set("email_restrictions")}
                 />
                 <p className="text-xs text-muted-foreground">
-                  Only these billing emails can use the coupon. Wildcards like{" "}
-                  <code>*@example.com</code> are allowed.
+                  {t("coupons.allowed_emails_hint")}
                 </p>
               </div>
             </CardContent>
@@ -463,36 +463,35 @@ export default function CouponEditor() {
 
           <Card>
             <CardHeader className="pb-2">
-              <CardTitle className="text-base">Usage limits</CardTitle>
+              <CardTitle className="text-base">{t("coupons.usage_limits")}</CardTitle>
             </CardHeader>
             <CardContent className="max-w-sm space-y-4">
               <div className="grid gap-1.5">
-                <Label>Usage limit per coupon</Label>
+                <Label>{t("coupons.usage_limit_per_coupon")}</Label>
                 <NumberField value={coupon.usage_limit} onChange={set("usage_limit")} />
                 <p className="text-xs text-muted-foreground">
-                  How many times the coupon can be used in total.
+                  {t("coupons.usage_limit_per_coupon_hint")}
                 </p>
               </div>
               <div className="grid gap-1.5">
-                <Label>Limit usage to X items</Label>
+                <Label>{t("coupons.limit_usage_items")}</Label>
                 <NumberField
                   value={coupon.limit_usage_to_x_items}
                   onChange={set("limit_usage_to_x_items")}
-                  placeholder="Apply to all qualifying items"
+                  placeholder={t("coupons.apply_all_items")}
                 />
                 <p className="text-xs text-muted-foreground">
-                  Maximum number of individual items the coupon applies to (product
-                  discounts).
+                  {t("coupons.limit_usage_items_hint")}
                 </p>
               </div>
               <div className="grid gap-1.5">
-                <Label>Usage limit per user</Label>
+                <Label>{t("coupons.usage_limit_per_user")}</Label>
                 <NumberField
                   value={coupon.usage_limit_per_user}
                   onChange={set("usage_limit_per_user")}
                 />
                 <p className="text-xs text-muted-foreground">
-                  How many times a single customer (by billing email) can use it.
+                  {t("coupons.usage_limit_per_user_hint")}
                 </p>
               </div>
             </CardContent>
@@ -503,11 +502,11 @@ export default function CouponEditor() {
         <div className="space-y-4">
           <Card>
             <CardHeader className="pb-3">
-              <CardTitle className="text-base">Publish</CardTitle>
+              <CardTitle className="text-base">{t("coupons.publish")}</CardTitle>
             </CardHeader>
             <CardContent className="space-y-3">
               <label className="flex items-center justify-between text-sm font-medium">
-                Enabled
+                {t("coupons.enabled")}
                 <Switch
                   checked={coupon.enabled !== false}
                   onCheckedChange={(v) => set("enabled")(!!v)}
@@ -515,18 +514,17 @@ export default function CouponEditor() {
               </label>
               {coupon.enabled === false && (
                 <p className="text-xs text-muted-foreground">
-                  Disabled — customers can't apply this coupon, and carts holding it drop it.
+                  {t("coupons.disabled_hint")}
                 </p>
               )}
               {!isNew && (
                 <p className="text-sm text-muted-foreground">
-                  Used: <span className="font-medium text-foreground">{coupon.usage_count ?? 0}</span>{" "}
-                  time{(coupon.usage_count ?? 0) === 1 ? "" : "s"}
+                  {t("coupons.used_times", { count: coupon.usage_count ?? 0 })}
                 </p>
               )}
               <Button className="w-full" onClick={save} disabled={saving}>
                 {saving && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
-                {isNew ? "Create coupon" : "Save coupon"}
+                {isNew ? t("coupons.create") : t("coupons.save")}
               </Button>
               {!isNew && (
                 <Button
@@ -534,7 +532,7 @@ export default function CouponEditor() {
                   className="w-full text-destructive hover:text-destructive"
                   onClick={() => setConfirmDelete(true)}
                 >
-                  Delete
+                  {t("common.delete")}
                 </Button>
               )}
             </CardContent>
@@ -545,9 +543,9 @@ export default function CouponEditor() {
       <ConfirmDialog
         open={confirmDelete}
         onOpenChange={setConfirmDelete}
-        title="Delete this coupon?"
-        description="Customers will no longer be able to use it. This cannot be undone."
-        confirmLabel="Delete"
+        title={t("coupons.confirm_delete_one")}
+        description={t("coupons.confirm_delete_description")}
+        confirmLabel={t("common.delete")}
         loading={deleting}
         onConfirm={doDelete}
       />

package/src/commerce/admin/pages/coupons/CouponsList.jsx

@@ -6,6 +6,7 @@ import { Input } from "@/components/ui/input";
 import { Plus, Search, TicketPercent, Trash2, Pencil } from "lucide-react";
 
 import { call, base44 } from "../../lib/api";
+import { t } from "../../i18n";
 import { COUPON_TYPES } from "../../lib/constants";
 import { formatDate, truncate } from "../../lib/format";
 import usePagedList from "../../hooks/usePagedList";
@@ -52,11 +53,11 @@ export default function CouponsList() {
     try {
       if (pendingDelete === "bulk") {
         await call("admin-coupons", "batch", { delete: selected });
-        toast.success(`${selected.length} coupon(s) deleted`);
+        toast.success(t("coupons.n_deleted", { count: selected.length }));
         setSelected([]);
       } else {
         await call("admin-coupons", "delete", { id: pendingDelete.id });
-        toast.success("Coupon deleted");
+        toast.success(t("coupons.deleted"));
       }
       setPendingDelete(null);
       list.refetch();
@@ -70,7 +71,7 @@ export default function CouponsList() {
   const columns = [
     {
       key: "code",
-      label: "Code",
+      label: t("coupons.code"),
       sortable: !debouncedQuery,
       render: (c) => (
         <span className="inline-flex items-center gap-2">
@@ -83,7 +84,7 @@ export default function CouponsList() {
           </Link>
           {c.enabled === false && (
             <span className="rounded border px-1.5 py-0.5 text-[10px] font-medium uppercase tracking-wide text-muted-foreground">
-              Disabled
+              {t("coupons.disabled")}
             </span>
           )}
         </span>
@@ -91,23 +92,23 @@ export default function CouponsList() {
     },
     {
       key: "discount_type",
-      label: "Type",
+      label: t("common.type"),
       render: (c) =>
         COUPON_TYPES.find((t) => t.value === c.discount_type)?.label || c.discount_type,
     },
-    { key: "amount", label: "Amount", render: amountLabel },
+    { key: "amount", label: t("common.amount"), render: amountLabel },
     {
       key: "description",
-      label: "Description",
+      label: t("common.description"),
       className: "max-w-64",
       render: (c) => (
         <span className="text-muted-foreground">{truncate(c.description, 60) || "—"}</span>
       ),
     },
-    { key: "usage", label: "Usage / Limit", render: usageLabel },
+    { key: "usage", label: t("coupons.usage_limit_col"), render: usageLabel },
     {
       key: "date_expires",
-      label: "Expiry date",
+      label: t("coupons.expiry_date"),
       render: (c) => (c.date_expires ? formatDate(c.date_expires) : "—"),
     },
   ];
@@ -115,12 +116,12 @@ export default function CouponsList() {
   return (
     <div>
       <PageHeader
-        title="Coupons"
-        description="Create and manage discount codes."
+        title={t("routes.coupons")}
+        description={t("coupons.subtitle")}
         actions={
           <Button asChild>
             <Link to={href("coupons/new")}>
-              <Plus className="mr-1 h-4 w-4" /> Add coupon
+              <Plus className="mr-1 h-4 w-4" /> {t("routes.coupons_new")}
             </Link>
           </Button>
         }
@@ -131,14 +132,14 @@ export default function CouponsList() {
           <Search className="pointer-events-none absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
           <Input
             className="pl-8"
-            placeholder="Search coupons…"
+            placeholder={t("coupons.search_placeholder")}
             value={query}
             onChange={(e) => setQuery(e.target.value)}
           />
         </div>
         {selected.length > 0 && (
           <Button variant="outline" size="sm" onClick={() => setPendingDelete("bulk")}>
-            <Trash2 className="mr-1 h-4 w-4" /> Delete selected ({selected.length})
+            <Trash2 className="mr-1 h-4 w-4" /> {t("coupons.delete_selected", { count: selected.length })}
           </Button>
         )}
       </div>
@@ -154,23 +155,23 @@ export default function CouponsList() {
         onSelectChange={setSelected}
         onRowClick={(c) => navigate(href(`coupons/${c.id}`))}
         rowActions={(c) => [
-          { label: "Edit", icon: Pencil, onClick: () => navigate(href(`coupons/${c.id}`)) },
-          { label: "Delete", icon: Trash2, destructive: true, onClick: () => setPendingDelete(c) },
+          { label: t("common.edit"), icon: Pencil, onClick: () => navigate(href(`coupons/${c.id}`)) },
+          { label: t("common.delete"), icon: Trash2, destructive: true, onClick: () => setPendingDelete(c) },
         ]}
         pagination={{ page: list.page, hasNext: list.hasNext, onNext: list.next, onPrev: list.prev }}
         empty={{
           icon: TicketPercent,
-          title: "No coupons yet",
-          description: "Coupons let you offer discounts at checkout.",
+          title: t("coupons.empty_title"),
+          description: t("coupons.empty_description"),
         }}
       />
 
       <ConfirmDialog
         open={!!pendingDelete}
         onOpenChange={(o) => !o && setPendingDelete(null)}
-        title={pendingDelete === "bulk" ? `Delete ${selected.length} coupon(s)?` : "Delete this coupon?"}
-        description="Customers will no longer be able to use it. This cannot be undone."
-        confirmLabel="Delete"
+        title={pendingDelete === "bulk" ? t("coupons.confirm_delete_many", { count: selected.length }) : t("coupons.confirm_delete_one")}
+        description={t("coupons.confirm_delete_description")}
+        confirmLabel={t("common.delete")}
         loading={deleting}
         onConfirm={doDelete}
       />