@medusajs/dashboard 2.12.2-snapshot-20251209162938 → 2.12.2-snapshot-20251209184934

package/src/hooks/api/product-variants.tsx

@@ -2,6 +2,7 @@ import { QueryKey, useQuery, UseQueryOptions } from "@tanstack/react-query"
 import { sdk } from "../../lib/client"
 import { queryKeysFactory } from "../../lib/query-key-factory"
 import { FetchError } from "@medusajs/js-sdk"
+import { HttpTypes } from "@medusajs/types"
 
 const PRODUCT_VARIANT_QUERY_KEY = "product_variant" as const
 export const productVariantQueryKeys = queryKeysFactory(
@@ -11,7 +12,12 @@ export const productVariantQueryKeys = queryKeysFactory(
 export const useVariants = (
   query?: Record<string, any>,
   options?: Omit<
-    UseQueryOptions<any, FetchError, any, QueryKey>,
+    UseQueryOptions<
+      HttpTypes.AdminProductVariantListResponse,
+      FetchError,
+      HttpTypes.AdminProductVariantListResponse,
+      QueryKey
+    >,
     "queryFn" | "queryKey"
   >
 ) => {

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

@@ -9288,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

@@ -2492,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/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: [
               {

package/src/routes/product-tags/product-tag-list/components/product-tag-list-table/product-tag-list-table.tsx

@@ -1,4 +1,4 @@
-import { PencilSquare, Trash } from "@medusajs/icons"
+import { GlobeEurope, PencilSquare, Trash } from "@medusajs/icons"
 import { HttpTypes } from "@medusajs/types"
 import { Button, Container, Heading } from "@medusajs/ui"
 import { keepPreviousData } from "@tanstack/react-query"
@@ -16,6 +16,7 @@ import { useProductTagTableQuery } from "../../../../../hooks/table/query"
 import { useDataTable } from "../../../../../hooks/use-data-table"
 import { useDeleteProductTagAction } from "../../../common/hooks/use-delete-product-tag-action"
 import { productTagListLoader } from "../../loader"
+import { useFeatureFlag } from "../../../../../providers/feature-flag-provider"
 
 const PAGE_SIZE = 20
 
@@ -88,6 +89,7 @@ const ProductTagRowActions = ({
 }) => {
   const { t } = useTranslation()
   const handleDelete = useDeleteProductTagAction({ productTag })
+  const isTranslationsEnabled = useFeatureFlag("translation")
 
   return (
     <ActionMenu
@@ -101,6 +103,19 @@ const ProductTagRowActions = ({
             },
           ],
         },
+        ...(isTranslationsEnabled
+          ? [
+              {
+                actions: [
+                  {
+                    icon: <GlobeEurope />,
+                    label: t("translations.actions.manage"),
+                    to: `/settings/translations/edit?reference=product_tag&reference_id=${productTag.id}`,
+                  },
+                ],
+              },
+            ]
+          : []),
         {
           actions: [
             {

package/src/routes/product-types/product-type-detail/components/product-type-general-section/product-type-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 { useDeleteProductTypeAction } from "../../../common/hooks/use-delete-product-type-action"
+import { useFeatureFlag } from "../../../../../providers/feature-flag-provider"
 
 type ProductTypeGeneralSectionProps = {
   productType: HttpTypes.AdminProductType
@@ -17,6 +18,7 @@ export const ProductTypeGeneralSection = ({
     productType.id,
     productType.value
   )
+  const isTranslationsEnabled = useFeatureFlag("translation")
 
   return (
     <Container className="flex items-center justify-between">
@@ -32,6 +34,19 @@ export const ProductTypeGeneralSection = ({
               },
             ],
           },
+          ...(isTranslationsEnabled
+            ? [
+                {
+                  actions: [
+                    {
+                      label: t("translations.actions.manage"),
+                      to: `/settings/translations/edit?reference=product_type&reference_id=${productType.id}`,
+                      icon: <GlobeEurope />,
+                    },
+                  ],
+                },
+              ]
+            : []),
           {
             actions: [
               {

package/src/routes/product-types/product-type-list/components/product-type-list-table/product-table-row-actions.tsx

@@ -1,8 +1,9 @@
-import { PencilSquare, Trash } from "@medusajs/icons"
+import { GlobeEurope, PencilSquare, Trash } from "@medusajs/icons"
 import { HttpTypes } from "@medusajs/types"
 import { useTranslation } from "react-i18next"
 import { ActionMenu } from "../../../../../components/common/action-menu"
 import { useDeleteProductTypeAction } from "../../../common/hooks/use-delete-product-type-action"
+import { useFeatureFlag } from "../../../../../providers/feature-flag-provider"
 
 type ProductTypeRowActionsProps = {
   productType: HttpTypes.AdminProductType
@@ -16,6 +17,7 @@ export const ProductTypeRowActions = ({
     productType.id,
     productType.value
   )
+  const isTranslationsEnabled = useFeatureFlag("translation")
 
   return (
     <ActionMenu
@@ -29,6 +31,19 @@ export const ProductTypeRowActions = ({
             },
           ],
         },
+        ...(isTranslationsEnabled
+          ? [
+              {
+                actions: [
+                  {
+                    icon: <GlobeEurope />,
+                    label: t("translations.actions.manage"),
+                    to: `/settings/translations/edit?reference=product_type&reference_id=${productType.id}`,
+                  },
+                ],
+              },
+            ]
+          : []),
         {
           actions: [
             {