@base44/app-plugin-commerce 0.7.1 → 0.8.0

package/src/commerce/admin/pages/customers/CustomerEditor.jsx

@@ -10,6 +10,7 @@ import { Separator } from "@/components/ui/separator";
 import { Copy, Loader2, RefreshCw } from "lucide-react";
 
 import { call, base44 } from "../../lib/api";
+import { t } from "../../i18n";
 import { formatDate } from "../../lib/format";
 import { round2 } from "../../lib/order-utils";
 import useMoney from "../../hooks/useMoney";
@@ -71,17 +72,17 @@ export default function CustomerEditor() {
 
   const save = async () => {
     if (!customer.email?.trim()) {
-      toast.error("An email address is required");
+      toast.error(t("customers.email_required"));
       return;
     }
     setSaving(true);
     try {
       const saved = await call("admin-customers", "save", { customer });
-      toast.success("Customer saved");
+      toast.success(t("customers.saved"));
       if (isNew && sendInvite && saved?.email) {
         try {
           await call("admin-customers", "invite", { email: saved.email });
-          toast.success("Invite sent");
+          toast.success(t("customers.invite_sent"));
         } catch {
           /* toast shown by call() */
         }
@@ -99,7 +100,7 @@ export default function CustomerEditor() {
     setRecalculating(true);
     try {
       const updated = await call("admin-customers", "recalculate-stats", { id });
-      toast.success("Stats recalculated");
+      toast.success(t("customers.stats_recalculated"));
       if (updated) setCustomer((c) => ({ ...c, ...updated }));
     } catch {
       /* toast shown by call() */
@@ -112,7 +113,7 @@ export default function CustomerEditor() {
     setDeleting(true);
     try {
       await call("admin-customers", "delete", { id, reassign_orders_to_guest: true });
-      toast.success("Customer deleted");
+      toast.success(t("customers.deleted"));
       navigate(href("customers"));
     } catch {
       setDeleting(false);
@@ -134,7 +135,7 @@ export default function CustomerEditor() {
   return (
     <div>
       <PageHeader
-        title={isNew ? "Add customer" : name || customer.email}
+        title={isNew ? t("routes.customers_new") : name || customer.email}
         backHref={href("customers")}
         actions={
           <>
@@ -144,12 +145,12 @@ export default function CustomerEditor() {
                 className="text-destructive hover:text-destructive"
                 onClick={() => setConfirmDelete(true)}
               >
-                Delete
+                {t("common.delete")}
               </Button>
             )}
             <Button onClick={save} disabled={saving}>
               {saving && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
-              {isNew ? "Create customer" : "Save customer"}
+              {isNew ? t("customers.create") : t("customers.save")}
             </Button>
           </>
         }
@@ -160,29 +161,29 @@ export default function CustomerEditor() {
         <div className="space-y-4">
           <Card>
             <CardHeader className="pb-3">
-              <CardTitle className="text-base">Account</CardTitle>
+              <CardTitle className="text-base">{t("customers.account")}</CardTitle>
             </CardHeader>
             <CardContent className="grid grid-cols-1 gap-3 sm:grid-cols-2">
               <div className="grid gap-1.5 sm:col-span-2">
-                <Label>Email address *</Label>
+                <Label>{t("customers.email_address_required")}</Label>
                 <Input type="email" value={customer.email} onChange={setInput("email")} />
               </div>
               <div className="grid gap-1.5">
-                <Label>First name</Label>
+                <Label>{t("address.first_name")}</Label>
                 <Input value={customer.first_name || ""} onChange={setInput("first_name")} />
               </div>
               <div className="grid gap-1.5">
-                <Label>Last name</Label>
+                <Label>{t("address.last_name")}</Label>
                 <Input value={customer.last_name || ""} onChange={setInput("last_name")} />
               </div>
               <div className="grid gap-1.5 sm:col-span-2">
-                <Label>Username</Label>
+                <Label>{t("customers.username")}</Label>
                 <Input value={customer.username || ""} onChange={setInput("username")} />
               </div>
               {isNew && (
                 <label className="flex items-center gap-2 text-sm sm:col-span-2">
                   <Checkbox checked={sendInvite} onCheckedChange={(v) => setSendInvite(!!v)} />
-                  Send the new user an account invite
+                  {t("customers.send_invite")}
                 </label>
               )}
             </CardContent>
@@ -190,7 +191,7 @@ export default function CustomerEditor() {
 
           <Card>
             <CardHeader className="pb-3">
-              <CardTitle className="text-base">Billing address</CardTitle>
+              <CardTitle className="text-base">{t("customers.billing_address")}</CardTitle>
             </CardHeader>
             <CardContent>
               <AddressForm
@@ -204,7 +205,7 @@ export default function CustomerEditor() {
 
           <Card>
             <CardHeader className="flex-row items-center justify-between space-y-0 pb-3">
-              <CardTitle className="text-base">Shipping address</CardTitle>
+              <CardTitle className="text-base">{t("customers.shipping_address")}</CardTitle>
               <Button
                 type="button"
                 variant="outline"
@@ -212,10 +213,10 @@ export default function CustomerEditor() {
                 onClick={() => {
                   const { email: _email, ...rest } = customer.billing || {};
                   set("shipping")(rest);
-                  toast.success("Copied from billing");
+                  toast.success(t("customers.copied_from_billing"));
                 }}
               >
-                <Copy className="mr-1 h-4 w-4" /> Copy from billing
+                <Copy className="mr-1 h-4 w-4" /> {t("customers.copy_from_billing")}
               </Button>
             </CardHeader>
             <CardContent>
@@ -230,7 +231,7 @@ export default function CustomerEditor() {
 
           <Card>
             <CardHeader className="pb-3">
-              <CardTitle className="text-base">Custom fields</CardTitle>
+              <CardTitle className="text-base">{t("customers.custom_fields")}</CardTitle>
             </CardHeader>
             <CardContent>
               <MetaDataEditor value={customer.meta_data || []} onChange={set("meta_data")} />
@@ -243,7 +244,7 @@ export default function CustomerEditor() {
           <div className="space-y-4">
             <Card>
               <CardHeader className="flex-row items-center justify-between space-y-0 pb-3">
-                <CardTitle className="text-base">Stats</CardTitle>
+                <CardTitle className="text-base">{t("customers.stats")}</CardTitle>
                 <Button
                   variant="ghost"
                   size="sm"
@@ -252,35 +253,35 @@ export default function CustomerEditor() {
                   disabled={recalculating}
                 >
                   <RefreshCw className={`mr-1 h-3.5 w-3.5 ${recalculating ? "animate-spin" : ""}`} />
-                  Recalculate
+                  {t("customers.recalculate")}
                 </Button>
               </CardHeader>
               <CardContent className="space-y-2 text-sm">
                 <div className="flex justify-between">
-                  <span className="text-muted-foreground">Total spend</span>
+                  <span className="text-muted-foreground">{t("customers.total_spend")}</span>
                   <span className="font-medium">{money.format(customer.total_spent ?? 0)}</span>
                 </div>
                 <div className="flex justify-between">
-                  <span className="text-muted-foreground">Orders</span>
+                  <span className="text-muted-foreground">{t("routes.orders")}</span>
                   <span className="font-medium">{customer.orders_count ?? 0}</span>
                 </div>
                 <div className="flex justify-between">
-                  <span className="text-muted-foreground">Average order value</span>
+                  <span className="text-muted-foreground">{t("customers.average_order_value")}</span>
                   <span className="font-medium">{money.format(aov)}</span>
                 </div>
                 {customer.is_paying_customer && (
-                  <p className="pt-1 text-xs text-muted-foreground">Paying customer ✓</p>
+                  <p className="pt-1 text-xs text-muted-foreground">{t("customers.paying_customer")}</p>
                 )}
               </CardContent>
             </Card>
 
             <Card>
               <CardHeader className="pb-3">
-                <CardTitle className="text-base">Recent orders</CardTitle>
+                <CardTitle className="text-base">{t("customers.recent_orders")}</CardTitle>
               </CardHeader>
               <CardContent className="space-y-1">
                 {recentOrders.length === 0 && (
-                  <p className="text-sm text-muted-foreground">No orders yet.</p>
+                  <p className="text-sm text-muted-foreground">{t("customers.no_orders_yet")}</p>
                 )}
                 {recentOrders.map((o) => (
                   <div key={o.id}>
@@ -307,9 +308,9 @@ export default function CustomerEditor() {
       <ConfirmDialog
         open={confirmDelete}
         onOpenChange={setConfirmDelete}
-        title="Delete this customer?"
-        description="Their orders are kept and reassigned to Guest. This cannot be undone."
-        confirmLabel="Delete"
+        title={t("customers.confirm_delete_title")}
+        description={t("customers.confirm_delete_description")}
+        confirmLabel={t("common.delete")}
         loading={deleting}
         onConfirm={doDelete}
       />

package/src/commerce/admin/pages/customers/CustomersList.jsx

@@ -6,6 +6,7 @@ import { Input } from "@/components/ui/input";
 import { Plus, Search, Users, Trash2, Pencil } from "lucide-react";
 
 import { call, base44 } from "../../lib/api";
+import { t } from "../../i18n";
 import { countryName } from "../../lib/geo-data";
 import usePagedList from "../../hooks/usePagedList";
 import useDebounce from "../../hooks/useDebounce";
@@ -46,7 +47,7 @@ export default function CustomersList() {
         id: pendingDelete.id,
         reassign_orders_to_guest: true,
       });
-      toast.success("Customer deleted");
+      toast.success(t("customers.deleted"));
       setPendingDelete(null);
       list.refetch();
     } catch {
@@ -59,7 +60,7 @@ export default function CustomersList() {
   const columns = [
     {
       key: "name",
-      label: "Name",
+      label: t("common.name"),
       render: (c) => {
         const name = [c.first_name, c.last_name].filter(Boolean).join(" ");
         return (
@@ -71,7 +72,7 @@ export default function CustomersList() {
             {name || c.email}
             {c.is_guest && (
               <span className="ml-2 rounded bg-muted px-1.5 py-0.5 text-[10px] uppercase text-muted-foreground">
-                guest
+                {t("customers.guest_badge")}
               </span>
             )}
           </Link>
@@ -80,7 +81,7 @@ export default function CustomersList() {
     },
     {
       key: "email",
-      label: "Email / Username",
+      label: t("customers.email_username"),
       render: (c) => (
         <div className="min-w-0">
           <div className="truncate">{c.email}</div>
@@ -90,7 +91,7 @@ export default function CustomersList() {
     },
     {
       key: "location",
-      label: "Location",
+      label: t("customers.location"),
       render: (c) => {
         const b = c.billing || {};
         return [b.city, countryName(b.country)].filter(Boolean).join(", ") || "—";
@@ -98,13 +99,13 @@ export default function CustomersList() {
     },
     {
       key: "orders_count",
-      label: "Orders",
+      label: t("routes.orders"),
       sortable: !debouncedQuery,
       render: (c) => c.orders_count ?? 0,
     },
     {
       key: "total_spent",
-      label: "Total spend",
+      label: t("customers.total_spend"),
       sortable: !debouncedQuery,
       render: (c) => money.format(c.total_spent ?? 0),
     },
@@ -113,12 +114,12 @@ export default function CustomersList() {
   return (
     <div>
       <PageHeader
-        title="Customers"
-        description="Registered customers and checkout guests."
+        title={t("routes.customers")}
+        description={t("customers.subtitle")}
         actions={
           <Button asChild>
             <Link to={href("customers/new")}>
-              <Plus className="mr-1 h-4 w-4" /> Add customer
+              <Plus className="mr-1 h-4 w-4" /> {t("routes.customers_new")}
             </Link>
           </Button>
         }
@@ -129,7 +130,7 @@ export default function CustomersList() {
           <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 by name, email or username…"
+            placeholder={t("customers.search_placeholder")}
             value={query}
             onChange={(e) => setQuery(e.target.value)}
           />
@@ -144,23 +145,23 @@ export default function CustomersList() {
         onSort={debouncedQuery ? undefined : list.setSort}
         onRowClick={(c) => navigate(href(`customers/${c.id}`))}
         rowActions={(c) => [
-          { label: "Edit", icon: Pencil, onClick: () => navigate(href(`customers/${c.id}`)) },
-          { label: "Delete", icon: Trash2, destructive: true, onClick: () => setPendingDelete(c) },
+          { label: t("common.edit"), icon: Pencil, onClick: () => navigate(href(`customers/${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: Users,
-          title: "No customers yet",
-          description: "Customers appear here after checkout or when you add them manually.",
+          title: t("customers.empty_title"),
+          description: t("customers.empty_description"),
         }}
       />
 
       <ConfirmDialog
         open={!!pendingDelete}
         onOpenChange={(o) => !o && setPendingDelete(null)}
-        title="Delete this customer?"
-        description="Their orders are kept and reassigned to Guest. This cannot be undone."
-        confirmLabel="Delete"
+        title={t("customers.confirm_delete_title")}
+        description={t("customers.confirm_delete_description")}
+        confirmLabel={t("common.delete")}
         loading={deleting}
         onConfirm={doDelete}
       />