@base44/app-plugin-commerce 0.7.1 → 0.8.0

package/src/commerce/admin/pages/reports/Reports.jsx

@@ -18,6 +18,7 @@ import {
 } from "recharts";
 
 import { call } from "../../lib/api";
+import { t } from "../../i18n";
 import useAsync from "../../hooks/useAsync";
 import useRealtime from "../../hooks/useRealtime";
 import useMoney from "../../hooks/useMoney";
@@ -105,13 +106,13 @@ function SalesTab({ range, setRange }) {
   );
 
   const stats = [
-    { label: "Gross sales", value: money.format(num(totals.gross_sales, totals.gross)) },
-    { label: "Net sales", value: money.format(num(totals.net_sales, totals.net)) },
-    { label: "Orders", value: num(totals.orders, totals.orders_count) },
-    { label: "Items sold", value: num(totals.items, totals.items_sold) },
-    { label: "Refunded", value: money.format(num(totals.refunds, totals.refunded)) },
-    { label: "Discounted", value: money.format(num(totals.discount, totals.discounted)) },
-    { label: "Shipping", value: money.format(num(totals.shipping, totals.shipping_total)) },
+    { label: t("reports.gross_sales"), value: money.format(num(totals.gross_sales, totals.gross)) },
+    { label: t("reports.net_sales"), value: money.format(num(totals.net_sales, totals.net)) },
+    { label: t("routes.orders"), value: num(totals.orders, totals.orders_count) },
+    { label: t("reports.items_sold"), value: num(totals.items, totals.items_sold) },
+    { label: t("status.order.refunded"), value: money.format(num(totals.refunds, totals.refunded)) },
+    { label: t("reports.discounted"), value: money.format(num(totals.discount, totals.discounted)) },
+    { label: t("reports.shipping"), value: money.format(num(totals.shipping, totals.shipping_total)) },
   ];
 
   return (
@@ -127,7 +128,7 @@ function SalesTab({ range, setRange }) {
       <Card>
         <CardHeader className="pb-2">
           <CardTitle className="text-base">
-            Sales by {interval}
+            {t(`reports.sales_by_${interval}`)}
           </CardTitle>
         </CardHeader>
         <CardContent>
@@ -135,7 +136,7 @@ function SalesTab({ range, setRange }) {
             <Skeleton className="h-72 w-full" />
           ) : series.length === 0 ? (
             <p className="py-16 text-center text-sm text-muted-foreground">
-              No sales in this period.
+              {t("reports.no_sales_in_period")}
             </p>
           ) : (
             <ResponsiveContainer width="100%" height={300}>
@@ -151,7 +152,7 @@ function SalesTab({ range, setRange }) {
                 <YAxis yAxisId="count" orientation="right" tick={{ fontSize: 12 }} allowDecimals={false} />
                 <Tooltip
                   formatter={(value, name) =>
-                    name === "Orders" ? [value, name] : [money.format(value), name]
+                    name === t("routes.orders") ? [value, name] : [money.format(value), name]
                   }
                 />
                 <Legend />
@@ -159,7 +160,7 @@ function SalesTab({ range, setRange }) {
                   yAxisId="money"
                   type="monotone"
                   dataKey="net"
-                  name="Net sales"
+                  name={t("reports.net_sales")}
                   stroke="#6366f1"
                   strokeWidth={2}
                   dot={false}
@@ -168,7 +169,7 @@ function SalesTab({ range, setRange }) {
                   yAxisId="count"
                   type="monotone"
                   dataKey="orders"
-                  name="Orders"
+                  name={t("routes.orders")}
                   stroke="#22c55e"
                   strokeWidth={2}
                   dot={false}
@@ -219,14 +220,14 @@ function TopSellersTab({ range, setRange }) {
 
       <Card>
         <CardHeader className="pb-2">
-          <CardTitle className="text-base">Top sellers by quantity</CardTitle>
+          <CardTitle className="text-base">{t("reports.top_sellers_by_quantity")}</CardTitle>
         </CardHeader>
         <CardContent>
           {loading ? (
             <Skeleton className="h-64 w-full" />
           ) : rows.length === 0 ? (
             <p className="py-16 text-center text-sm text-muted-foreground">
-              No sales in this period.
+              {t("reports.no_sales_in_period")}
             </p>
           ) : (
             <ResponsiveContainer width="100%" height={Math.max(220, rows.length * 36)}>
@@ -239,8 +240,8 @@ function TopSellersTab({ range, setRange }) {
                   width={180}
                   tick={{ fontSize: 12 }}
                 />
-                <Tooltip formatter={(v, name) => (name === "Quantity" ? [v, name] : [money.format(v), name])} />
-                <Bar dataKey="quantity" name="Quantity" fill="#6366f1" radius={[0, 4, 4, 0]} />
+                <Tooltip formatter={(v, name) => (name === t("reports.quantity") ? [v, name] : [money.format(v), name])} />
+                <Bar dataKey="quantity" name={t("reports.quantity")} fill="#6366f1" radius={[0, 4, 4, 0]} />
               </BarChart>
             </ResponsiveContainer>
           )}
@@ -251,7 +252,7 @@ function TopSellersTab({ range, setRange }) {
         columns={[
           {
             key: "name",
-            label: "Product",
+            label: t("reports.product"),
             render: (r) =>
               r.product_id ? (
                 <Link to={href(`products/${r.product_id}`)} className="font-medium hover:underline">
@@ -261,12 +262,12 @@ function TopSellersTab({ range, setRange }) {
                 r.name
               ),
           },
-          { key: "quantity", label: "Quantity sold" },
-          { key: "total", label: "Net revenue", render: (r) => money.format(r.total) },
+          { key: "quantity", label: t("reports.quantity_sold") },
+          { key: "total", label: t("reports.net_revenue"), render: (r) => money.format(r.total) },
         ]}
         rows={rows}
         loading={loading}
-        empty={{ icon: BarChart3, title: "No sales in this period" }}
+        empty={{ icon: BarChart3, title: t("reports.empty_no_sales") }}
       />
     </div>
   );
@@ -359,30 +360,30 @@ function TotalsTab() {
   return (
     <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-4">
       <TotalsCard
-        title="Orders by status"
+        title={t("reports.orders_by_status")}
         loading={loading}
         rows={normalizeTotals(d["orders-totals"])}
         renderLabel={(r) => <StatusBadge status={r.key} className="text-[10px]" />}
       />
       <TotalsCard
-        title="Products by status"
+        title={t("reports.products_by_status")}
         loading={loading}
         rows={normalizeTotals(d["products-totals"], PRODUCT_STATUSES)}
       />
-      <TotalsCard title="Customers" loading={loading} rows={normalizeTotals(d["customers-totals"])} />
+      <TotalsCard title={t("routes.customers")} loading={loading} rows={normalizeTotals(d["customers-totals"])} />
       <TotalsCard
-        title="Coupons by type"
+        title={t("reports.coupons_by_type")}
         loading={loading}
         rows={normalizeTotals(d["coupons-totals"], COUPON_TYPES)}
       />
       <TotalsCard
-        title="Reviews by status"
+        title={t("reports.reviews_by_status")}
         loading={loading}
         rows={normalizeTotals(d["reviews-totals"], REVIEW_STATUSES)}
       />
-      <TotalsCard title="Categories" loading={loading} rows={normalizeTotals(d["categories-totals"])} />
-      <TotalsCard title="Ribbons" loading={loading} rows={normalizeTotals(d["ribbons-totals"])} />
-      <TotalsCard title="Attributes" loading={loading} rows={normalizeTotals(d["attributes-totals"])} />
+      <TotalsCard title={t("routes.categories")} loading={loading} rows={normalizeTotals(d["categories-totals"])} />
+      <TotalsCard title={t("reports.ribbons")} loading={loading} rows={normalizeTotals(d["ribbons-totals"])} />
+      <TotalsCard title={t("reports.attributes")} loading={loading} rows={normalizeTotals(d["attributes-totals"])} />
     </div>
   );
 }
@@ -394,12 +395,12 @@ export default function Reports() {
 
   return (
     <div>
-      <PageHeader title="Reports" description="Sales performance and store totals." />
+      <PageHeader title={t("routes.reports")} description={t("reports.subtitle")} />
       <Tabs defaultValue="sales">
         <TabsList className="mb-4">
-          <TabsTrigger value="sales">Sales</TabsTrigger>
-          <TabsTrigger value="top-sellers">Top sellers</TabsTrigger>
-          <TabsTrigger value="totals">Totals</TabsTrigger>
+          <TabsTrigger value="sales">{t("reports.tab_sales")}</TabsTrigger>
+          <TabsTrigger value="top-sellers">{t("reports.tab_top_sellers")}</TabsTrigger>
+          <TabsTrigger value="totals">{t("reports.tab_totals")}</TabsTrigger>
         </TabsList>
         <TabsContent value="sales">
           <SalesTab range={range} setRange={setRange} />

package/src/commerce/admin/pages/settings/EmailsSettings.jsx

@@ -24,6 +24,7 @@ import {
 import { Settings2 } from "lucide-react";
 import { EMAIL_TYPES } from "../../lib/constants";
 import { call } from "../../lib/api";
+import { t } from "../../i18n";
 import useGroupForm from "./useGroupForm";
 
 const DEFAULTS = {
@@ -69,13 +70,13 @@ export default function EmailsSettings() {
     typeCfg(e.id).recipient ||
     recipientsText ||
     effective?.recipients.join(", ") ||
-    "Admin";
+    t("settings.emails.admin");
 
   // One list for every email; a delimiter row splits the admin-targeted
   // emails from the ones the customer receives.
   const GROUPS = [
-    { label: "Sent to the store admin", types: EMAIL_TYPES.filter((e) => e.recipient === "admin") },
-    { label: "Sent to the customer", types: EMAIL_TYPES.filter((e) => e.recipient === "customer") },
+    { label: t("settings.emails.sent_to_admin"), types: EMAIL_TYPES.filter((e) => e.recipient === "admin") },
+    { label: t("settings.emails.sent_to_customer"), types: EMAIL_TYPES.filter((e) => e.recipient === "customer") },
   ];
 
   const active = activeId ? EMAIL_TYPES.find((e) => e.id === activeId) : null;
@@ -85,42 +86,39 @@ export default function EmailsSettings() {
       <Card>
         <CardHeader className="flex-row items-start justify-between gap-4 space-y-0">
           <div className="space-y-1.5">
-              <CardTitle>Sender options</CardTitle>
+              <CardTitle>{t("settings.emails.sender_options")}</CardTitle>
               <CardDescription>
-                How transactional emails are named, and who gets the admin copies. The sending
-                address is controlled by your Base44 email configuration, not here.
+                {t("settings.emails.sender_options_description")}
               </CardDescription>
           </div>
           <SaveButton />
         </CardHeader>
         <CardContent className="grid gap-4 sm:grid-cols-2">
           <div className="space-y-1.5 sm:col-span-2">
-            <Label>Store name</Label>
+            <Label>{t("setup.store_name")}</Label>
             <Input
               value={form.store_name || ""}
-              placeholder="Your store's name"
+              placeholder={t("setup.store_name_placeholder")}
               onChange={(e) => setField("store_name", e.target.value)}
             />
             <p className="text-xs text-muted-foreground">
-              Used in the subject line and as the “From” name — e.g.{" "}
-              “[{storeName || "Your store"}]: New order #1002”, sent from {storeName || "Your store"}.
-              Leave it blank to send as your app's name.
+              {t("settings.emails.store_name_hint", { name: storeName || t("settings.emails.your_store") })}
             </p>
           </div>
           <div className="space-y-1.5 sm:col-span-2">
-            <Label>Admin notification recipients</Label>
+            <Label>{t("settings.emails.admin_recipients")}</Label>
             <Input
               value={recipientsText}
-              placeholder={adminUsers || "admin@example.com, ops@example.com"}
+              placeholder={adminUsers || t("settings.emails.recipients_placeholder")}
               onChange={(e) => setRecipients(e.target.value)}
             />
             <p className="text-xs text-muted-foreground">
-              Comma-separated; receives new/cancelled/failed order emails. Leave blank to use{" "}
-              {adminUsers ? <strong>{adminUsers}</strong> : "your app's admin users"} — the app's
-              users with the admin role.
+              {t("settings.emails.recipients_hint", {
+                users: adminUsers || t("settings.emails.admin_users_fallback"),
+              })}
               {effective && !adminUsers && (
                 <span className="block">
-                  No app user has the admin role, so leaving this blank sends these emails nowhere.
+                  {t("settings.emails.no_admin_warning")}
                 </span>
               )}
             </p>
@@ -131,10 +129,9 @@ export default function EmailsSettings() {
       <Card>
         <CardHeader className="flex-row items-start justify-between gap-4 space-y-0">
           <div className="space-y-1.5">
-              <CardTitle>Email notifications</CardTitle>
+              <CardTitle>{t("settings.emails.notifications")}</CardTitle>
               <CardDescription>
-                Enable, disable and customize each transactional email, including the
-                low-stock and out-of-stock alerts.
+                {t("settings.emails.notifications_description")}
               </CardDescription>
           </div>
           <SaveButton />
@@ -143,9 +140,9 @@ export default function EmailsSettings() {
           <Table>
             <TableHeader>
               <TableRow>
-                <TableHead>Email</TableHead>
-                <TableHead>Recipient</TableHead>
-                <TableHead className="w-24">Enabled</TableHead>
+                <TableHead>{t("common.email")}</TableHead>
+                <TableHead>{t("settings.emails.recipient")}</TableHead>
+                <TableHead className="w-24">{t("settings.emails.enabled")}</TableHead>
                 <TableHead className="w-24" />
               </TableRow>
             </TableHeader>
@@ -167,10 +164,10 @@ export default function EmailsSettings() {
                         <TableCell>
                           <div className="flex items-center gap-2">
                             <span className="font-medium">{e.label}</span>
-                            {e.manual && <Badge variant="outline" className="font-normal">Manual</Badge>}
+                            {e.manual && <Badge variant="outline" className="font-normal">{t("settings.emails.manual")}</Badge>}
                             {managed && (
                               <Badge variant="secondary" className="font-normal text-muted-foreground">
-                                Handled by Base44 auth
+                                {t("settings.emails.managed_by_auth")}
                               </Badge>
                             )}
                           </div>
@@ -180,7 +177,7 @@ export default function EmailsSettings() {
                             ? "—"
                             : e.recipient === "admin"
                             ? adminRecipient(e)
-                            : "Customer"}
+                            : t("routes.customer")}
                         </TableCell>
                         <TableCell>
                           {managed ? (
@@ -193,7 +190,7 @@ export default function EmailsSettings() {
                           {!managed && (
                             <Button variant="ghost" size="sm" onClick={() => setActiveId(e.id)}>
                               <Settings2 className="mr-2 h-4 w-4" />
-                              Manage
+                              {t("settings.emails.manage")}
                             </Button>
                           )}
                         </TableCell>
@@ -211,57 +208,57 @@ export default function EmailsSettings() {
         <Dialog open onOpenChange={(o) => !o && setActiveId(null)}>
           <DialogContent>
             <DialogHeader>
-              <DialogTitle>{active.label} email</DialogTitle>
+              <DialogTitle>{t("settings.emails.type_email_title", { type: active.label })}</DialogTitle>
             </DialogHeader>
             <div className="space-y-4">
               {active.recipient === "admin" && (
                 <div className="space-y-1.5">
-                  <Label>Recipient(s)</Label>
+                  <Label>{t("settings.emails.recipients_label")}</Label>
                   <Input
-                    placeholder="Leave blank to use the default admin recipients"
+                    placeholder={t("settings.emails.recipient_placeholder")}
                     value={typeCfg(active.id).recipient || ""}
                     onChange={(e) => setTypeField(active.id, "recipient", e.target.value)}
                   />
                   <p className="text-xs text-muted-foreground">
-                    Comma-separated. Overrides the admin recipients above for this email only.
+                    {t("settings.emails.recipient_override_hint")}
                   </p>
                 </div>
               )}
               {!active.stock && (
                 <>
                   <div className="space-y-1.5">
-                    <Label>Subject</Label>
+                    <Label>{t("settings.emails.subject")}</Label>
                     <Input
-                      placeholder="Leave blank for the default"
+                      placeholder={t("settings.emails.default_placeholder")}
                       value={typeCfg(active.id).subject || ""}
                       onChange={(e) => setTypeField(active.id, "subject", e.target.value)}
                     />
                   </div>
                   <div className="space-y-1.5">
-                    <Label>Email heading</Label>
+                    <Label>{t("settings.emails.heading")}</Label>
                     <Input
-                      placeholder="Leave blank for the default"
+                      placeholder={t("settings.emails.default_placeholder")}
                       value={typeCfg(active.id).heading || ""}
                       onChange={(e) => setTypeField(active.id, "heading", e.target.value)}
                     />
                   </div>
                   <div className="space-y-1.5">
-                    <Label>Additional content</Label>
+                    <Label>{t("settings.emails.additional_content")}</Label>
                     <Textarea
                       rows={3}
-                      placeholder="Text appended below the email body."
+                      placeholder={t("settings.emails.additional_content_placeholder")}
                       value={typeCfg(active.id).additional_content || ""}
                       onChange={(e) => setTypeField(active.id, "additional_content", e.target.value)}
                     />
                   </div>
                   <p className="text-xs text-muted-foreground">
-                    Placeholders: {"{order_number}"}, {"{customer_name}"}, {"{store_name}"}, {"{order_total}"}.
+                    {t("settings.emails.placeholders_hint")}
                   </p>
                 </>
               )}
             </div>
             <DialogFooter>
-              <Button onClick={() => setActiveId(null)}>Done</Button>
+              <Button onClick={() => setActiveId(null)}>{t("settings.emails.done")}</Button>
             </DialogFooter>
           </DialogContent>
         </Dialog>

package/src/commerce/admin/pages/settings/GeneralSettings.jsx

@@ -10,6 +10,7 @@ import {
   SelectValue,
 } from "@/components/ui/select";
 import { CURRENCIES, WEIGHT_UNITS, DIMENSION_UNITS } from "../../lib/constants";
+import { t, currencyName } from "../../i18n";
 import useGroupForm from "./useGroupForm";
 
 const DEFAULTS = {
@@ -27,22 +28,21 @@ export default function GeneralSettings() {
       <Card>
         <CardHeader className="flex-row items-start justify-between gap-4 space-y-0">
           <div className="space-y-1.5">
-            <CardTitle>Checkout</CardTitle>
-            <CardDescription>Where customers land once they come back from paying.</CardDescription>
+            <CardTitle>{t("settings.general.checkout")}</CardTitle>
+            <CardDescription>{t("settings.general.checkout_description")}</CardDescription>
           </div>
           <SaveButton />
         </CardHeader>
         <CardContent>
           <div className="space-y-1.5">
-            <Label>Payment return path</Label>
+            <Label>{t("settings.general.payment_return_path")}</Label>
             <Input
               placeholder="/order-received"
               value={form.order_received_path || ""}
               onChange={(e) => setField("order_received_path", e.target.value)}
             />
             <p className="text-xs text-muted-foreground">
-              The storefront route customers come back to after paying, on your storefront's own
-              address. It must match the page you built — a wrong path sends paying customers to a 404.
+              {t("settings.general.payment_return_path_hint")}
             </p>
           </div>
         </CardContent>
@@ -51,17 +51,16 @@ export default function GeneralSettings() {
       <Card>
         <CardHeader className="flex-row items-start justify-between gap-4 space-y-0">
           <div className="space-y-1.5">
-            <CardTitle>Currency</CardTitle>
+            <CardTitle>{t("settings.general.currency")}</CardTitle>
             <CardDescription>
-              The store's currency. Prices are formatted per the viewer's locale
-              (Intl) — there is nothing else to configure.
+              {t("settings.general.currency_description")}
             </CardDescription>
           </div>
           <SaveButton />
         </CardHeader>
         <CardContent>
           <div className="max-w-xs space-y-1.5">
-            <Label>Currency</Label>
+            <Label>{t("settings.general.currency")}</Label>
             <Select value={form.currency} onValueChange={(v) => setField("currency", v)}>
               <SelectTrigger>
                 <SelectValue />
@@ -69,7 +68,7 @@ export default function GeneralSettings() {
               <SelectContent>
                 {CURRENCIES.map((c) => (
                   <SelectItem key={c.code} value={c.code}>
-                    {c.name} ({c.symbol})
+                    {currencyName(c.code, c.name)} ({c.symbol})
                   </SelectItem>
                 ))}
               </SelectContent>
@@ -81,14 +80,14 @@ export default function GeneralSettings() {
       <Card>
         <CardHeader className="flex-row items-start justify-between gap-4 space-y-0">
           <div className="space-y-1.5">
-            <CardTitle>Measurements</CardTitle>
-            <CardDescription>Units used for product weight and dimensions.</CardDescription>
+            <CardTitle>{t("settings.general.measurements")}</CardTitle>
+            <CardDescription>{t("settings.general.measurements_description")}</CardDescription>
           </div>
           <SaveButton />
         </CardHeader>
         <CardContent className="grid gap-4 sm:grid-cols-2">
           <div className="space-y-1.5">
-            <Label>Weight unit</Label>
+            <Label>{t("settings.general.weight_unit")}</Label>
             <Select value={form.weight_unit} onValueChange={(v) => setField("weight_unit", v)}>
               <SelectTrigger>
                 <SelectValue />
@@ -103,7 +102,7 @@ export default function GeneralSettings() {
             </Select>
           </div>
           <div className="space-y-1.5">
-            <Label>Dimensions unit</Label>
+            <Label>{t("settings.general.dimension_unit")}</Label>
             <Select value={form.dimension_unit} onValueChange={(v) => setField("dimension_unit", v)}>
               <SelectTrigger>
                 <SelectValue />

package/src/commerce/admin/pages/settings/InventorySettings.jsx

@@ -3,6 +3,7 @@ import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/com
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { Switch } from "@/components/ui/switch";
+import { t } from "../../i18n";
 import useGroupForm from "./useGroupForm";
 
 const DEFAULTS = {
@@ -25,22 +26,22 @@ export default function InventorySettings() {
       <Card>
         <CardHeader className="flex-row items-start justify-between gap-4 space-y-0">
           <div className="space-y-1.5">
-            <CardTitle>Inventory</CardTitle>
-            <CardDescription>Stock management defaults for products that track inventory.</CardDescription>
+            <CardTitle>{t("routes.settings_inventory")}</CardTitle>
+            <CardDescription>{t("settings.inventory.description")}</CardDescription>
           </div>
           <SaveButton />
         </CardHeader>
         <CardContent className="space-y-4">
           <div className="flex items-start justify-between gap-4">
             <div>
-              <Label>Manage stock</Label>
-              <p className="text-xs text-muted-foreground">Enable stock management store-wide.</p>
+              <Label>{t("settings.inventory.manage_stock")}</Label>
+              <p className="text-xs text-muted-foreground">{t("settings.inventory.manage_stock_hint")}</p>
             </div>
             <Switch checked={!!form.manage_stock} onCheckedChange={(v) => setField("manage_stock", v)} />
           </div>
 
           <div className="space-y-1.5">
-            <Label className={off ? "opacity-50" : ""}>Hold stock (minutes)</Label>
+            <Label className={off ? "opacity-50" : ""}>{t("settings.inventory.hold_stock")}</Label>
             <Input
               type="number"
               min={0}
@@ -49,15 +50,13 @@ export default function InventorySettings() {
               onChange={num("hold_stock_minutes", 60)}
             />
             <p className="text-xs text-muted-foreground">
-              Hold stock for unpaid orders for this many minutes. When the limit is reached, the
-              pending order is cancelled and its stock released. Release runs opportunistically —
-              see the commerce skill's references/operations.md.
+              {t("settings.inventory.hold_stock_hint")}
             </p>
           </div>
 
           <div className="grid gap-4 sm:grid-cols-2">
             <div className="space-y-1.5">
-              <Label className={off ? "opacity-50" : ""}>Low stock threshold</Label>
+              <Label className={off ? "opacity-50" : ""}>{t("settings.inventory.low_stock_threshold")}</Label>
               <Input
                 type="number"
                 min={0}
@@ -67,7 +66,7 @@ export default function InventorySettings() {
               />
             </div>
             <div className="space-y-1.5">
-              <Label className={off ? "opacity-50" : ""}>Out of stock threshold</Label>
+              <Label className={off ? "opacity-50" : ""}>{t("settings.inventory.out_of_stock_threshold")}</Label>
               <Input
                 type="number"
                 disabled={off}
@@ -82,16 +81,16 @@ export default function InventorySettings() {
       <Card>
         <CardHeader className="flex-row items-start justify-between gap-4 space-y-0">
           <div className="space-y-1.5">
-            <CardTitle>Visibility</CardTitle>
+            <CardTitle>{t("settings.inventory.visibility")}</CardTitle>
           </div>
           <SaveButton />
         </CardHeader>
         <CardContent>
           <div className="flex items-start justify-between gap-4">
             <div>
-              <Label>Hide out of stock items from the catalog</Label>
+              <Label>{t("settings.inventory.hide_out_of_stock")}</Label>
               <p className="text-xs text-muted-foreground">
-                Storefront APIs will exclude out-of-stock products from listings.
+                {t("settings.inventory.hide_out_of_stock_hint")}
               </p>
             </div>
             <Switch