@medusajs/dashboard 3.0.0-snapshot-20251211173847 → 3.0.0-snapshot-20251211181725

package/src/hooks/api/translations.tsx

@@ -0,0 +1,254 @@
+import { FetchError } from "@medusajs/js-sdk"
+import { HttpTypes } from "@medusajs/types"
+import {
+  QueryKey,
+  useMutation,
+  UseMutationOptions,
+  useQuery,
+  UseQueryOptions,
+  UseQueryResult,
+} from "@tanstack/react-query"
+import { sdk } from "../../lib/client"
+import { queryKeysFactory } from "../../lib/query-key-factory"
+import { queryClient } from "../../lib/query-client"
+import { productsQueryKeys, useProducts } from "./products"
+import { productVariantQueryKeys, useVariants } from "./product-variants"
+import { categoriesQueryKeys, useProductCategories } from "./categories"
+import { collectionsQueryKeys, useCollections } from "./collections"
+import { productTagsQueryKeys, useProductTags } from "./tags"
+import { productTypesQueryKeys, useProductTypes } from "./product-types"
+
+const TRANSLATIONS_QUERY_KEY = "translations" as const
+export const translationsQueryKeys = queryKeysFactory(TRANSLATIONS_QUERY_KEY)
+
+export const useReferenceTranslations = (
+  reference: string,
+  referenceId?: string | string[],
+  options?: Omit<
+    UseQueryOptions<any, FetchError, any, QueryKey>,
+    "queryFn" | "queryKey"
+  >
+) => {
+  const referenceHookMap = new Map<
+    string,
+    () => UseQueryResult<{
+      translations: HttpTypes.AdminTranslation[]
+      references: { id: string; [key: string]: string }[]
+      translatableFields: string[]
+    }>
+  >([
+    [
+      "product",
+      () => {
+        const translatableFields = ["title", "description"]
+        const fields = translatableFields.concat(["translations.*"]).join(",")
+
+        const { products, ...rest } = useProducts(
+          { id: referenceId ?? [], fields },
+          options
+        )
+        return {
+          ...rest,
+          data: {
+            translations:
+              products?.flatMap((product) => product.translations ?? []) ?? [],
+            references: products ?? [],
+            translatableFields,
+          },
+        } as unknown as UseQueryResult<{
+          translations: HttpTypes.AdminTranslation[]
+          references: { id: string; [key: string]: string }[]
+          translatableFields: string[]
+        }>
+      },
+    ],
+    [
+      "product_variant",
+      () => {
+        const translatableFields = ["title"]
+        const fields = translatableFields.concat(["translations.*"]).join(",")
+
+        const { variants, ...rest } = useVariants(
+          { id: referenceId ?? [], fields },
+          options
+        )
+        return {
+          ...rest,
+          data: {
+            translations:
+              variants?.flatMap((variant) => variant.translations ?? []) ?? [],
+            references: variants ?? [],
+            translatableFields,
+          },
+        } as unknown as UseQueryResult<{
+          translations: HttpTypes.AdminTranslation[]
+          references: { id: string; [key: string]: string }[]
+          translatableFields: string[]
+        }>
+      },
+    ],
+    [
+      "product_category",
+      () => {
+        const translatableFields = ["name", "description"]
+        const fields = translatableFields.concat(["translations.*"]).join(",")
+
+        const { product_categories, ...rest } = useProductCategories(
+          { id: referenceId ?? [], fields },
+          options
+        )
+        return {
+          ...rest,
+          data: {
+            translations:
+              product_categories?.flatMap(
+                (category) => category.translations ?? []
+              ) ?? [],
+            references: product_categories ?? [],
+            translatableFields,
+          },
+        } as unknown as UseQueryResult<{
+          translations: HttpTypes.AdminTranslation[]
+          references: { id: string; [key: string]: string }[]
+          translatableFields: string[]
+        }>
+      },
+    ],
+    [
+      "product_collection",
+      () => {
+        const translatableFields = ["title"]
+        const fields = translatableFields.concat(["translations.*"]).join(",")
+
+        const { collections, ...rest } = useCollections(
+          { id: referenceId ?? [], fields },
+          options
+        )
+        return {
+          ...rest,
+          data: {
+            translations:
+              collections?.flatMap(
+                (collection) => collection.translations ?? []
+              ) ?? [],
+            references: collections ?? [],
+            translatableFields,
+          },
+        } as unknown as UseQueryResult<{
+          translations: HttpTypes.AdminTranslation[]
+          references: { id: string; [key: string]: string }[]
+          translatableFields: string[]
+        }>
+      },
+    ],
+    [
+      "product_type",
+      () => {
+        const translatableFields = ["value"]
+        const fields = translatableFields.concat(["translations.*"]).join(",")
+
+        const { product_types, ...rest } = useProductTypes(
+          { id: referenceId ?? [], fields },
+          options
+        )
+        return {
+          ...rest,
+          data: {
+            translations:
+              product_types?.flatMap((type) => type.translations ?? []) ?? [],
+            references: product_types ?? [],
+            translatableFields,
+          },
+        } as unknown as UseQueryResult<{
+          translations: HttpTypes.AdminTranslation[]
+          references: { id: string; [key: string]: string }[]
+          translatableFields: string[]
+        }>
+      },
+    ],
+    [
+      "product_tag",
+      () => {
+        const translatableFields = ["value"]
+        const fields = translatableFields.concat(["translations.*"]).join(",")
+
+        const { product_tags, ...rest } = useProductTags(
+          { id: referenceId ?? [], fields },
+          options
+        )
+        return {
+          ...rest,
+          data: {
+            translations:
+              product_tags?.flatMap((tag) => tag.translations ?? []) ?? [],
+            references: product_tags ?? [],
+            translatableFields,
+          },
+        } as unknown as UseQueryResult<{
+          translations: HttpTypes.AdminTranslation[]
+          references: { id: string; [key: string]: string }[]
+          translatableFields: string[]
+        }>
+      },
+    ],
+    // TODO: product option and option values
+  ])
+  const referenceHook = referenceHookMap.get(reference)
+  if (!referenceHook) {
+    throw new Error(`No hook found for reference type: ${reference}`)
+  }
+  const { data, ...rest } = referenceHook()
+  return { ...data, ...rest }
+}
+
+export const useTranslations = (
+  query?: HttpTypes.AdminTranslationsListParams,
+  options?: Omit<
+    UseQueryOptions<
+      HttpTypes.AdminTranslationsListResponse,
+      FetchError,
+      HttpTypes.AdminTranslationsListResponse,
+      QueryKey
+    >,
+    "queryFn" | "queryKey"
+  >
+) => {
+  const { data, ...rest } = useQuery({
+    queryKey: translationsQueryKeys.list(query),
+    queryFn: () => sdk.admin.translation.list(query),
+    ...options,
+  })
+
+  return { ...data, ...rest }
+}
+
+export const useBatchTranslations = (
+  reference: string,
+  options?: UseMutationOptions<
+    HttpTypes.AdminTranslationsBatchResponse,
+    FetchError,
+    HttpTypes.AdminBatchTranslations
+  >
+) => {
+  const referenceInvalidationKeysMap = new Map<string, QueryKey>([
+    ["product", productsQueryKeys.lists()],
+    ["product_variant", productVariantQueryKeys.lists()],
+    ["product_category", categoriesQueryKeys.lists()],
+    ["product_collection", collectionsQueryKeys.lists()],
+    ["product_type", productTypesQueryKeys.lists()],
+    ["product_tag", productTagsQueryKeys.lists()],
+  ])
+
+  return useMutation({
+    mutationFn: (payload: HttpTypes.AdminBatchTranslations) =>
+      sdk.admin.translation.batch(payload),
+    onSuccess: (data, variables, context) => {
+      queryClient.invalidateQueries({
+        queryKey: referenceInvalidationKeysMap.get(reference),
+      })
+
+      options?.onSuccess?.(data, variables, context)
+    },
+    ...options,
+  })
+}

package/src/i18n/translations/$schema.json

@@ -4049,45 +4049,6 @@
           "required": ["noRecordsMessage"],
           "additionalProperties": false
         },
-        "export": {
-          "type": "object",
-          "properties": {
-            "header": {
-              "type": "string"
-            },
-            "description": {
-              "type": "string"
-            },
-            "success": {
-              "type": "object",
-              "properties": {
-                "title": {
-                  "type": "string"
-                },
-                "description": {
-                  "type": "string"
-                }
-              },
-              "required": ["title", "description"],
-              "additionalProperties": false
-            },
-            "filters": {
-              "type": "object",
-              "properties": {
-                "title": {
-                  "type": "string"
-                },
-                "description": {
-                  "type": "string"
-                }
-              },
-              "required": ["title", "description"],
-              "additionalProperties": false
-            }
-          },
-          "required": ["header", "description", "success", "filters"],
-          "additionalProperties": false
-        },
         "status": {
           "type": "object",
           "properties": {
@@ -5779,7 +5740,6 @@
         "orderCanceled",
         "onDateFromSalesChannel",
         "list",
-        "export",
         "status",
         "summary",
         "transfer",
@@ -9328,6 +9288,42 @@
       ],
       "additionalProperties": false
     },
+    "translations": {
+      "type": "object",
+      "properties": {
+        "domain": {
+          "type": "string"
+        },
+        "subtitle": {
+          "type": "string"
+        },
+        "actions": {
+          "type": "object",
+          "properties": {
+            "manageLocales": {
+              "type": "string"
+            },
+            "manage": {
+                "type": "string"
+            }
+          },
+          "required": ["manageLocales", "manage"]
+        },
+        "bulk": {
+          "type": "object",
+          "properties": {
+            "header": {
+              "type": "string"
+            },
+            "mainColumn": {
+              "type": "string"
+            }
+          },
+          "required": ["header"]
+        }
+      },
+      "required": ["domain", "actions", "subtitle", "bulk"]
+    },
     "store": {
       "type": "object",
       "properties": {

package/src/i18n/translations/en.json

@@ -1080,18 +1080,6 @@
     "list": {
       "noRecordsMessage": "Your orders will show up here."
     },
-    "export": {
-      "header": "Export Order List",
-      "description": "Export the order list to a CSV file.",
-      "success": {
-        "title": "Export started",
-        "description": "You will be notified when the export is ready."
-      },
-      "filters": {
-        "title": "Filters",
-        "description": "The following filters will be applied to the export."
-      }
-    },
     "status": {
       "not_paid": "Not paid",
       "pending": "Pending",
@@ -2504,6 +2492,18 @@
     "deleteUserSuccess": "User {{name}} deleted successfully",
     "invite": "Invite"
   },
+  "translations": {
+    "domain": "Translations",
+    "actions": {
+      "manage": "Manage translations",
+      "manageLocales": "Manage locales"
+    },
+    "subtitle": "Manage translations of your data in Medusa.",
+    "bulk": {
+      "header": "Translations Bulk Editor",
+      "mainColumn": "Locale"
+    }
+  },
   "store": {
     "domain": "Store",
     "manageYourStoresDetails": "Manage your store's details",

package/src/i18n/translations/es.json

@@ -2443,6 +2443,18 @@
     "deleteUserSuccess": "Usuario {{name}} eliminado correctamente",
     "invite": "Invitar"
   },
+  "translations": {
+    "domain": "Traducciones",
+    "actions": {
+      "manage": "Gestionar traducciones",
+      "manageLocales": "Gestionar idiomas"
+    },
+    "subtitle": "Gestiona las traducciones de tus datos en Medusa.",
+    "bulk": {
+      "header": "Editor de Traducciones en Masa",
+      "locale": "Idioma"
+    }
+  },
   "store": {
     "domain": "Tienda",
     "manageYourStoresDetails": "Gestiona los detalles de tu tienda",

package/src/routes/categories/category-detail/components/category-general-section/category-general-section.tsx

@@ -1,10 +1,11 @@
-import { PencilSquare, Trash } from "@medusajs/icons"
+import { GlobeEurope, PencilSquare, Trash } from "@medusajs/icons"
 import { HttpTypes } from "@medusajs/types"
 import { Container, Heading, StatusBadge, Text } from "@medusajs/ui"
 import { useTranslation } from "react-i18next"
 import { ActionMenu } from "../../../../../components/common/action-menu"
 import { useDeleteProductCategoryAction } from "../../../common/hooks/use-delete-product-category-action"
 import { getIsActiveProps, getIsInternalProps } from "../../../common/utils"
+import { useFeatureFlag } from "../../../../../providers/feature-flag-provider"
 
 type CategoryGeneralSectionProps = {
   category: HttpTypes.AdminProductCategory
@@ -14,6 +15,7 @@ export const CategoryGeneralSection = ({
   category,
 }: CategoryGeneralSectionProps) => {
   const { t } = useTranslation()
+  const isTranslationsEnabled = useFeatureFlag("translation")
 
   const activeProps = getIsActiveProps(category.is_active, t)
   const internalProps = getIsInternalProps(category.is_internal, t)
@@ -44,6 +46,19 @@ export const CategoryGeneralSection = ({
                   },
                 ],
               },
+              ...(isTranslationsEnabled
+                ? [
+                    {
+                      actions: [
+                        {
+                          label: t("translations.actions.manage"),
+                          to: `/settings/translations/edit?reference=product_category&reference_id=${category.id}`,
+                          icon: <GlobeEurope />,
+                        },
+                      ],
+                    },
+                  ]
+                : []),
               {
                 actions: [
                   {

package/src/routes/categories/category-list/components/category-list-table/category-list-table.tsx

@@ -1,4 +1,4 @@
-import { PencilSquare, Trash } from "@medusajs/icons"
+import { GlobeEurope, PencilSquare, Trash } from "@medusajs/icons"
 import { AdminProductCategoryResponse } from "@medusajs/types"
 import { Button, Container, Heading, Text } from "@medusajs/ui"
 import { keepPreviousData } from "@tanstack/react-query"
@@ -14,6 +14,7 @@ import { useDataTable } from "../../../../../hooks/use-data-table"
 import { useDeleteProductCategoryAction } from "../../../common/hooks/use-delete-product-category-action"
 import { useCategoryTableColumns } from "./use-category-table-columns"
 import { useCategoryTableQuery } from "./use-category-table-query"
+import { useFeatureFlag } from "../../../../../providers/feature-flag-provider"
 
 const PAGE_SIZE = 20
 
@@ -105,6 +106,7 @@ const CategoryRowActions = ({
   category: AdminProductCategoryResponse["product_category"]
 }) => {
   const { t } = useTranslation()
+  const isTranslationsEnabled = useFeatureFlag("translation")
   const handleDelete = useDeleteProductCategoryAction(category)
 
   return (
@@ -119,6 +121,19 @@ const CategoryRowActions = ({
             },
           ],
         },
+        ...(isTranslationsEnabled
+          ? [
+              {
+                actions: [
+                  {
+                    icon: <GlobeEurope />,
+                    label: t("translations.actions.manage"),
+                    to: `/settings/translations/edit?reference=product_category&reference_id=${category.id}`,
+                  },
+                ],
+              },
+            ]
+          : []),
         {
           actions: [
             {

package/src/routes/collections/collection-detail/components/collection-general-section/collection-general-section.tsx

@@ -1,10 +1,11 @@
-import { PencilSquare, Trash } from "@medusajs/icons"
+import { GlobeEurope, PencilSquare, Trash } from "@medusajs/icons"
 import { HttpTypes } from "@medusajs/types"
 import { Container, Heading, Text, usePrompt } from "@medusajs/ui"
 import { useTranslation } from "react-i18next"
 import { ActionMenu } from "../../../../../components/common/action-menu"
 import { useDeleteCollection } from "../../../../../hooks/api/collections"
 import { useNavigate } from "react-router-dom"
+import { useFeatureFlag } from "../../../../../providers/feature-flag-provider"
 
 type CollectionGeneralSectionProps = {
   collection: HttpTypes.AdminCollection
@@ -16,6 +17,7 @@ export const CollectionGeneralSection = ({
   const { t } = useTranslation()
   const prompt = usePrompt()
   const navigate = useNavigate()
+  const isTranslationsEnabled = useFeatureFlag("translation")
 
   const { mutateAsync } = useDeleteCollection(collection.id!)
 
@@ -52,6 +54,19 @@ export const CollectionGeneralSection = ({
                 },
               ],
             },
+            ...(isTranslationsEnabled
+              ? [
+                  {
+                    actions: [
+                      {
+                        label: t("translations.actions.manage"),
+                        to: `/settings/translations/edit?reference=product_collection&reference_id=${collection.id}`,
+                        icon: <GlobeEurope />,
+                      },
+                    ],
+                  },
+                ]
+              : []),
             {
               actions: [
                 {

package/src/routes/collections/collection-list/components/collection-list-table/collection-row-actions.tsx

@@ -1,10 +1,11 @@
-import { PencilSquare, Trash } from "@medusajs/icons"
+import { GlobeEurope, PencilSquare, Trash } from "@medusajs/icons"
 import { HttpTypes } from "@medusajs/types"
 import { usePrompt } from "@medusajs/ui"
 import { useTranslation } from "react-i18next"
 
 import { ActionMenu } from "../../../../../components/common/action-menu"
 import { useDeleteCollection } from "../../../../../hooks/api/collections"
+import { useFeatureFlag } from "../../../../../providers/feature-flag-provider"
 
 export const CollectionRowActions = ({
   collection,
@@ -13,6 +14,7 @@ export const CollectionRowActions = ({
 }) => {
   const { t } = useTranslation()
   const prompt = usePrompt()
+  const isTranslationsEnabled = useFeatureFlag("translation")
 
   const { mutateAsync } = useDeleteCollection(collection.id!)
 
@@ -47,6 +49,19 @@ export const CollectionRowActions = ({
             },
           ],
         },
+        ...(isTranslationsEnabled
+          ? [
+              {
+                actions: [
+                  {
+                    icon: <GlobeEurope />,
+                    label: t("translations.actions.manage"),
+                    to: `/settings/translations/edit?reference=product_collection&reference_id=${collection.id}`,
+                  },
+                ],
+              },
+            ]
+          : []),
         {
           actions: [
             {

package/src/routes/orders/order-list/components/order-list-table/configurable-order-list-table.tsx

@@ -1,26 +1,16 @@
 import { useTranslation } from "react-i18next"
-import { useLocation } from "react-router-dom"
 import { ConfigurableDataTable } from "../../../../../components/table/configurable-data-table"
 import { useOrderTableAdapter } from "./order-table-adapter"
 
 export const ConfigurableOrderListTable = () => {
   const { t } = useTranslation()
-  const location = useLocation()
   const orderAdapter = useOrderTableAdapter()
 
-  const actions = [
-    {
-      label: t("actions.export"),
-      to: `export${location.search}`,
-    },
-  ]
-
   return (
     <ConfigurableDataTable
       adapter={orderAdapter}
       heading={t("orders.domain")}
       layout="fill"
-      actions={actions}
     />
   )
 }

package/src/routes/orders/order-list/components/order-list-table/order-list-table.tsx

@@ -1,16 +1,15 @@
-import { Button, Container, Heading } from "@medusajs/ui"
+import { Container, Heading } from "@medusajs/ui"
 import { keepPreviousData } from "@tanstack/react-query"
 import { useTranslation } from "react-i18next"
-import { Link, Outlet, useLocation } from "react-router-dom"
 
 import { _DataTable } from "../../../../../components/table/data-table/data-table"
 import { useOrders } from "../../../../../hooks/api/orders"
 import { useOrderTableColumns } from "../../../../../hooks/table/columns/use-order-table-columns"
+import { useOrderTableFilters } from "./use-order-table-filters"
 import { useOrderTableQuery } from "../../../../../hooks/table/query/use-order-table-query"
 import { useDataTable } from "../../../../../hooks/use-data-table"
 import { useFeatureFlag } from "../../../../../providers/feature-flag-provider"
 import { ConfigurableOrderListTable } from "./configurable-order-list-table"
-import { useOrderTableFilters } from "./use-order-table-filters"
 
 import { DEFAULT_FIELDS } from "../../const"
 
@@ -18,7 +17,6 @@ const PAGE_SIZE = 20
 
 export const OrderListTable = () => {
   const { t } = useTranslation()
-  const location = useLocation()
   const isViewConfigEnabled = useFeatureFlag("view_configurations")
 
   // If feature flag is enabled, use the new configurable table
@@ -59,9 +57,6 @@ export const OrderListTable = () => {
     <Container className="divide-y p-0">
       <div className="flex items-center justify-between px-6 py-4">
         <Heading>{t("orders.domain")}</Heading>
-        <Button size="small" variant="secondary" asChild>
-          <Link to={`export${location.search}`}>{t("actions.export")}</Link>
-        </Button>
       </div>
       <_DataTable
         columns={columns}
@@ -83,7 +78,6 @@ export const OrderListTable = () => {
           message: t("orders.list.noRecordsMessage"),
         }}
       />
-      <Outlet />
     </Container>
   )
 }

package/src/routes/product-tags/product-tag-detail/components/product-tag-general-section/product-tag-general-section.tsx

@@ -1,9 +1,10 @@
-import { PencilSquare, Trash } from "@medusajs/icons"
+import { GlobeEurope, PencilSquare, Trash } from "@medusajs/icons"
 import { HttpTypes } from "@medusajs/types"
 import { Container, Heading } from "@medusajs/ui"
 import { useTranslation } from "react-i18next"
 import { ActionMenu } from "../../../../../components/common/action-menu"
 import { useDeleteProductTagAction } from "../../../common/hooks/use-delete-product-tag-action"
+import { useFeatureFlag } from "../../../../../providers/feature-flag-provider"
 
 type ProductTagGeneralSectionProps = {
   productTag: HttpTypes.AdminProductTag
@@ -14,6 +15,7 @@ export const ProductTagGeneralSection = ({
 }: ProductTagGeneralSectionProps) => {
   const { t } = useTranslation()
   const handleDelete = useDeleteProductTagAction({ productTag })
+  const isTranslationsEnabled = useFeatureFlag("translation")
 
   return (
     <Container className="flex items-center justify-between">
@@ -32,6 +34,19 @@ export const ProductTagGeneralSection = ({
               },
             ],
           },
+          ...(isTranslationsEnabled
+            ? [
+                {
+                  actions: [
+                    {
+                      label: t("translations.actions.manage"),
+                      to: `/settings/translations/edit?reference=product_tag&reference_id=${productTag.id}`,
+                      icon: <GlobeEurope />,
+                    },
+                  ],
+                },
+              ]
+            : []),
           {
             actions: [
               {