Add translations to page headers

packages/admin-ui/ui/public/locales/en/translation.json

@@ -734,6 +734,7 @@
   "details-delete-discount": "Delete discount",
   "details-back-to-discounts": "Back to Discounts",
   "details-raw-discount": "Raw discount",
+  "discounts-header": "Discounts",
   "discounts-add-discount": "Add Discount",
   "discount-form-add-conditions": "Add Conditions",
   "discount-form-choose-a-condition-type": "Choose a condition type",
@@ -1283,6 +1284,7 @@
   "draft-orders-completed": "Completed",
   "draft-orders-open": "Open",
   "draft-orders-mark-as-paid": "Mark as paid",
+  "draft-orders-header": "Drafts",
   "draft-orders-success": "Success",
   "draft-orders-successfully-mark-as-paid": "Successfully mark as paid",
   "draft-orders-error": "Error",
@@ -1341,6 +1343,7 @@
   "edit-price": "Price",
   "edit-products": "Products",
   "edit-search-product-variants": "Search Product Variants...",
+  "orders-header": "Orders",
   "orders-success": "Success",
   "orders-successfully-initiated-export": "Successfully initiated export",
   "orders-error": "Error",
@@ -1646,9 +1649,11 @@
   "new-used-to-represent-your-product-during-checkout-social-sharing-and-more": "Used to represent your product during checkout, social sharing and more.",
   "new-media": "Media",
   "new-add-images-to-your-product": "Add images to your product.",
+  "overview-products-header": "Products",
   "overview-import-products": "Import Products",
   "overview-export-products": "Export Products",
   "overview-new-product": "New Product",
+  "overview-collections-header": "Collections",
   "overview-new-collection": "New Collection",
   "overview-success": "Success",
   "overview-successfully-created-collection": "Successfully created collection",
@@ -2007,5 +2012,8 @@
   "users-the-team": "The Team",
   "users-manage-users-of-your-medusa-store": "Manage users of your Medusa Store",
   "users-count_one": "{{count}}",
-  "users-count_other": "{{count}}"
+  "users-count_other": "{{count}}",
+  "customers-header": "Customers",
+  "customer-groups-header": "Groups",
+  "pricing-overview-price-lists-header": "Price Lists"
 }

packages/admin-ui/ui/public/locales/es/translation.json

@@ -726,6 +726,7 @@
   "details-delete-discount": "Eliminar Descuento",
   "details-back-to-discounts": "Volver a Descuentos",
   "details-raw-discount": "Fuente del Descuento",
+  "discounts-header": "Descuentos",
   "discounts-add-discount": "Añadir Descuento",
   "discount-form-add-conditions": "Añadir condiciones",
   "discount-form-choose-a-condition-type": "Elige un tipo de condición",
@@ -1275,6 +1276,7 @@
   "draft-orders-completed": "Completados",
   "draft-orders-open": "Abierto",
   "draft-orders-mark-as-paid": "Marcar como pagado",
+  "draft-orders-header": "Borradores",
   "draft-orders-success": "Éxito",
   "draft-orders-successfully-mark-as-paid": "Marcado como pagado exitosamente",
   "draft-orders-error": "Error",
@@ -1333,6 +1335,7 @@
   "edit-price": "Precio",
   "edit-products": "Productos",
   "edit-search-product-variants": "Buscar Variantes de Producto...",
+  "orders-header": "Pedidos",
   "orders-success": "Éxito",
   "orders-successfully-initiated-export": "Reporte iniciado correctamente",
   "orders-error": "Error",
@@ -1559,9 +1562,11 @@
   "new-used-to-represent-your-product-during-checkout-social-sharing-and-more": "Utilizado para representar tu producto durante el pago, redes sociales y más.",
   "new-media": "Medios",
   "new-add-images-to-your-product": "Añade imágenes a tu producto.",
+  "overview-products-header": "Productos",
   "overview-import-products": "Importar Productos",
   "overview-export-products": "Exportar Productos",
   "overview-new-product": "Nuevo Producto",
+  "overview-collections-header": "Colecciones",
   "overview-new-collection": "Nueva Colección",
   "overview-success": "Éxito",
   "overview-successfully-created-collection": "Colección creada correctamente",
@@ -1920,5 +1925,8 @@
   "users-the-team": "El Equipo",
   "users-manage-users-of-your-medusa-store": "Administrar usuarios de tu Tienda Medusa",
   "users-count_one": "{{count}}",
-  "users-count_other": "{{count}}"
+  "users-count_other": "{{count}}",
+  "customers-header": "Clientes",
+  "customer-groups-header": "Grupos",
+  "pricing-overview-price-lists-header": "Lista de precios"
 }

packages/admin-ui/ui/src/components/organisms/custom-table-header/index.tsx

@@ -2,34 +2,48 @@ import clsx from "clsx"
 import { capitalize } from "lodash"
 import React from "react"
 
-type TableViewHeaderProps<T = string> = {
-  views: T[]
-  activeView?: T
-  setActiveView?: (view: T) => void
+type View = {
+  key: string
+  label: string
+}
+
+type TableViewHeaderProps = {
+  views: (string | View)[]
+  activeView?: string
+  setActiveView?: (key: string) => void
 }
 
 const TableViewHeader: React.FC<TableViewHeaderProps> = ({
   views,
-  activeView = views[0],
+  activeView = typeof views[0] == "object" ? views[0].key : views[0],
   setActiveView,
 }) => {
   return (
     <div className="inter-large-semibold gap-x-base text-grey-40 flex">
-      {views.map((k, i) => (
-        <div
-          key={i}
-          className={clsx("cursor-pointer", {
-            ["text-grey-90"]: k === activeView,
-          })}
-          onClick={() => {
-            if (setActiveView) {
-              setActiveView(k)
-            }
-          }}
-        >
-          {capitalize(k)}
-        </div>
-      ))}
+      {views.map((k, i) => {
+        const key = typeof k == "object" && "key" in k ? k.key : k
+
+        const label =
+          typeof k == "object" && "label" in k ? k.label : capitalize(k)
+
+        const isActive = key === activeView
+
+        return (
+          <div
+            key={i}
+            className={clsx("cursor-pointer", {
+              ["text-grey-90"]: isActive,
+            })}
+            onClick={() => {
+              if (setActiveView) {
+                setActiveView(key)
+              }
+            }}
+          >
+            {label}
+          </div>
+        )
+      })}
     </div>
   )
 }

packages/admin-ui/ui/src/domain/customers/header.tsx

@@ -1,5 +1,6 @@
 import { useNavigate } from "react-router-dom"
 import TableViewHeader from "../../components/organisms/custom-table-header"
+import { useTranslation } from "react-i18next"
 
 type P = {
   activeView: "customers" | "groups"
@@ -9,7 +10,15 @@ type P = {
  * Shared header component for "customers" and "customer groups" page
  */
 function CustomersPageTableHeader(props: P) {
+  const { t } = useTranslation()
+
+  const views = [
+    { key: "customers", label: t("customers-header", "Customers") },
+    { key: "groups", label: t("customer-groups-header", "Groups") },
+  ]
+
   const navigate = useNavigate()
+
   return (
     <TableViewHeader
       setActiveView={(v) => {
@@ -19,7 +28,7 @@ function CustomersPageTableHeader(props: P) {
           navigate(`/a/customers/groups`)
         }
       }}
-      views={["customers", "groups"]}
+      views={views}
       activeView={props.activeView}
     />
   )

packages/admin-ui/ui/src/domain/discounts/index.tsx

@@ -30,6 +30,10 @@ const DiscountIndex = () => {
 
   const { getWidgets } = useWidgets()
 
+  const views = [
+    { key: "discounts", label: t("discounts-header", "Discounts") },
+  ]
+
   return (
     <div className="flex h-full flex-col">
       <div className="gap-y-xsmall flex w-full grow flex-col">
@@ -45,7 +49,7 @@ const DiscountIndex = () => {
         })}
         <BodyCard
           actionables={actionables}
-          customHeader={<TableViewHeader views={["discounts"]} />}
+          customHeader={<TableViewHeader views={views} />}
           className="h-fit"
         >
           <DiscountTable />

packages/admin-ui/ui/src/domain/orders/draft-orders/index.tsx

@@ -13,17 +13,21 @@ import NewOrderFormProvider from "../new/form"
 import NewOrder from "../new/new-order"
 import DraftOrderDetails from "./details"
 
-const VIEWS = ["orders", "drafts"]
-
 const DraftOrderIndex = () => {
   const navigate = useNavigate()
   const { t } = useTranslation()
 
-  const view = "drafts"
   const [showNewOrder, setShowNewOrder] = useState(false)
 
   const { getWidgets } = useWidgets()
 
+  const views = [
+    { key: "orders", label: t("orders-header", "Orders") },
+    { key: "drafts", label: t("draft-orders-header", "Drafts") },
+  ]
+
+  const activeView = "drafts"
+
   const actions = useMemo(() => {
     return [
       {
@@ -32,7 +36,7 @@ const DraftOrderIndex = () => {
         icon: <PlusIcon size={20} />,
       },
     ]
-  }, [view])
+  }, [activeView])
 
   return (
     <div className="gap-y-xsmall flex h-full grow flex-col">
@@ -50,13 +54,13 @@ const DraftOrderIndex = () => {
         <BodyCard
           customHeader={
             <TableViewHeader
-              views={VIEWS}
+              views={views}
               setActiveView={(v) => {
                 if (v === "orders") {
                   navigate(`/a/orders`)
                 }
               }}
-              activeView={view}
+              activeView={activeView}
             />
           }
           actionables={actions}

packages/admin-ui/ui/src/domain/orders/index.tsx

@@ -21,11 +21,7 @@ import { getErrorMessage } from "../../utils/error-messages"
 import Details from "./details"
 import { transformFiltersAsExportContext } from "./utils"
 
-const VIEWS = ["orders", "drafts"]
-
 const OrderIndex = () => {
-  const view = "orders"
-
   const { t } = useTranslation()
   const { resetInterval } = usePolling()
   const navigate = useNavigate()
@@ -43,6 +39,13 @@ const OrderIndex = () => {
 
   const { getWidgets } = useWidgets()
 
+  const views = [
+    { key: "orders", label: t("orders-header", "Orders") },
+    { key: "drafts", label: t("draft-orders-header", "Drafts") },
+  ]
+
+  const activeView = "orders"
+
   const actions = useMemo(() => {
     return [
       <Button
@@ -52,10 +55,10 @@ const OrderIndex = () => {
         onClick={() => openExportModal()}
       >
         <ExportIcon size={20} />
-        Export Orders
+        {t("orders-export-orders", "Export Orders")}
       </Button>,
     ]
-  }, [view])
+  }, [activeView])
 
   const handleCreateExport = () => {
     const reqObj = {
@@ -103,13 +106,13 @@ const OrderIndex = () => {
           <BodyCard
             customHeader={
               <TableViewHeader
-                views={VIEWS}
+                views={views}
                 setActiveView={(v) => {
                   if (v === "drafts") {
                     navigate(`/a/draft-orders`)
                   }
                 }}
-                activeView={view}
+                activeView={activeView}
               />
             }
             className="h-fit"

packages/admin-ui/ui/src/domain/pricing/overview/overview.tsx

@@ -50,6 +50,7 @@ import {
 } from "../../../utils/search-param-utils"
 import { PriceListStatus } from "../forms/price-list-details-form"
 import { PriceListNew } from "../new"
+import { useTranslation } from "react-i18next"
 
 const PAGE_SIZE = 10
 const TABLE_HEIGHT = (PAGE_SIZE + 1) * 48
@@ -133,6 +134,8 @@ const PriceListTableFilters = () => {
 }
 
 const PriceListOverview = () => {
+  const { t } = useTranslation()
+
   const { getWidgets } = useWidgets()
 
   const [searchParams] = useSearchParams()
@@ -216,7 +219,9 @@ const PriceListOverview = () => {
         })}
         <Container className="overflow-hidden p-0">
           <div className="flex items-center justify-between px-8 pt-6 pb-4">
-            <Heading>Price Lists</Heading>
+            <Heading>
+              {t("pricing-overview-price-lists-header", "Price Lists")}
+            </Heading>
             <div className="flex items-center gap-x-2">
               <PriceListTableFilters />
               <Input
@@ -242,7 +247,7 @@ const PriceListOverview = () => {
                   return (
                     <Table.Row
                       key={headerGroup.id}
-                      className="[&_th]:w-1/5 [&_th:last-of-type]:w-[1%]"
+                      className="[&_th:last-of-type]:w-[1%] [&_th]:w-1/5"
                     >
                       {headerGroup.headers.map((header) => {
                         return (