@medusajs/dashboard 3.0.0-snapshot-20251214110905 → 3.0.0-snapshot-20251215162333

package/src/hooks/api/translations.tsx

@@ -2,76 +2,91 @@ import { FetchError } from "@medusajs/js-sdk"
 import { HttpTypes } from "@medusajs/types"
 import {
   QueryKey,
+  UseInfiniteQueryOptions,
+  UseInfiniteQueryResult,
   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"
+import { productsQueryKeys, useInfiniteProducts } from "./products"
+import {
+  productVariantQueryKeys,
+  useInfiniteVariants,
+} from "./product-variants"
+import { categoriesQueryKeys, useInfiniteCategories } from "./categories"
+import { collectionsQueryKeys, useInfiniteCollections } from "./collections"
+import { productTagsQueryKeys, useInfiniteProductTags } from "./tags"
+import { productTypesQueryKeys, useInfiniteProductTypes } from "./product-types"
 
 const TRANSLATIONS_QUERY_KEY = "translations" as const
 export const translationsQueryKeys = queryKeysFactory(TRANSLATIONS_QUERY_KEY)
 
+const TRANSLATION_SETTINGS_QUERY_KEY = "translation_settings" as const
+export const translationSettingsQueryKeys = queryKeysFactory(
+  TRANSLATION_SETTINGS_QUERY_KEY
+)
+
+const TRANSLATION_STATISTICS_QUERY_KEY = "translation_statistics" as const
+export const translationStatisticsQueryKeys = queryKeysFactory(
+  TRANSLATION_STATISTICS_QUERY_KEY
+)
+
 export const useReferenceTranslations = (
   reference: string,
+  translatableFields: string[],
   referenceId?: string | string[],
   options?: Omit<
-    UseQueryOptions<any, FetchError, any, QueryKey>,
-    "queryFn" | "queryKey"
+    UseInfiniteQueryOptions<any, FetchError, any, any, QueryKey, number>,
+    "queryFn" | "queryKey" | "initialPageParam" | "getNextPageParam"
   >
 ) => {
   const referenceHookMap = new Map<
     string,
-    () => UseQueryResult<{
-      translations: HttpTypes.AdminTranslation[]
-      references: { id: string; [key: string]: string }[]
-      translatableFields: string[]
-    }>
+    () => Omit<UseInfiniteQueryResult<any, FetchError>, "data"> & {
+      data: {
+        translations: HttpTypes.AdminTranslation[]
+        references: (Record<string, any> & { id: string })[]
+        count: number
+      }
+    }
   >([
     [
       "product",
       () => {
-        const translatableFields = ["title", "description"]
         const fields = translatableFields.concat(["translations.*"]).join(",")
 
-        const { products, ...rest } = useProducts(
-          { id: referenceId ?? [], fields },
+        const { data, ...rest } = useInfiniteProducts(
+          { fields, id: referenceId ?? [] },
           options
         )
+        const products = data?.pages.flatMap((page) => page.products) ?? []
+
         return {
           ...rest,
           data: {
             translations:
               products?.flatMap((product) => product.translations ?? []) ?? [],
             references: products ?? [],
-            translatableFields,
+            count: data?.pages[0]?.count ?? 0,
           },
-        } 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(
+        const { data, ...rest } = useInfiniteVariants(
           { id: referenceId ?? [], fields },
           options
         )
+        const variants = data?.pages.flatMap((page) => page.variants) ?? []
+
         return {
           ...rest,
           data: {
@@ -79,51 +94,48 @@ export const useReferenceTranslations = (
               variants?.flatMap((variant) => variant.translations ?? []) ?? [],
             references: variants ?? [],
             translatableFields,
+            count: data?.pages[0]?.count ?? 0,
           },
-        } 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(
+        const { data, ...rest } = useInfiniteCategories(
           { id: referenceId ?? [], fields },
           options
         )
+        const categories =
+          data?.pages.flatMap((page) => page.product_categories) ?? []
+
         return {
           ...rest,
           data: {
             translations:
-              product_categories?.flatMap(
-                (category) => category.translations ?? []
-              ) ?? [],
-            references: product_categories ?? [],
+              categories?.flatMap((category) => category.translations ?? []) ??
+              [],
+            references: categories ?? [],
             translatableFields,
+            count: data?.pages[0]?.count ?? 0,
           },
-        } 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(
+        const { data, ...rest } = useInfiniteCollections(
           { id: referenceId ?? [], fields },
           options
         )
+        const collections =
+          data?.pages.flatMap((page) => page.collections) ?? []
+
         return {
           ...rest,
           data: {
@@ -133,49 +145,47 @@ export const useReferenceTranslations = (
               ) ?? [],
             references: collections ?? [],
             translatableFields,
+            count: data?.pages[0]?.count ?? 0,
           },
-        } 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(
+        const { data, ...rest } = useInfiniteProductTypes(
           { id: referenceId ?? [], fields },
           options
         )
+        const product_types =
+          data?.pages.flatMap((page) => page.product_types) ?? []
+
         return {
           ...rest,
           data: {
             translations:
               product_types?.flatMap((type) => type.translations ?? []) ?? [],
             references: product_types ?? [],
+            count: data?.pages[0]?.count ?? 0,
             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(
+        const { data, ...rest } = useInfiniteProductTags(
           { id: referenceId ?? [], fields },
           options
         )
+        const product_tags =
+          data?.pages.flatMap((page) => page.product_tags) ?? []
+
         return {
           ...rest,
           data: {
@@ -183,12 +193,9 @@ export const useReferenceTranslations = (
               product_tags?.flatMap((tag) => tag.translations ?? []) ?? [],
             references: product_tags ?? [],
             translatableFields,
+            count: data?.pages[0]?.count ?? 0,
           },
-        } as unknown as UseQueryResult<{
-          translations: HttpTypes.AdminTranslation[]
-          references: { id: string; [key: string]: string }[]
-          translatableFields: string[]
-        }>
+        }
       },
     ],
     // TODO: product option and option values
@@ -246,9 +253,54 @@ export const useBatchTranslations = (
       queryClient.invalidateQueries({
         queryKey: referenceInvalidationKeysMap.get(reference),
       })
+      queryClient.invalidateQueries({
+        queryKey: translationStatisticsQueryKeys.lists(),
+      })
 
       options?.onSuccess?.(data, variables, context)
     },
     ...options,
   })
 }
+
+export const useTranslationSettings = (
+  query?: HttpTypes.AdminTranslationSettingsParams,
+  options?: Omit<
+    UseQueryOptions<
+      HttpTypes.AdminTranslationSettingsResponse,
+      FetchError,
+      HttpTypes.AdminTranslationSettingsResponse,
+      QueryKey
+    >,
+    "queryFn" | "queryKey"
+  >
+) => {
+  const { data, ...rest } = useQuery({
+    queryKey: translationSettingsQueryKeys.list(query),
+    queryFn: () => sdk.admin.translation.settings(query),
+    ...options,
+  })
+
+  return { ...data, ...rest }
+}
+
+export const useTranslationStatistics = (
+  query?: HttpTypes.AdminTranslationStatisticsParams,
+  options?: Omit<
+    UseQueryOptions<
+      HttpTypes.AdminTranslationStatisticsResponse,
+      FetchError,
+      HttpTypes.AdminTranslationStatisticsResponse,
+      QueryKey
+    >,
+    "queryFn" | "queryKey"
+  >
+) => {
+  const { data, ...rest } = useQuery({
+    queryKey: translationStatisticsQueryKeys.list(query),
+    queryFn: () => sdk.admin.translation.statistics(query),
+    ...options,
+  })
+
+  return { ...data, ...rest }
+}

package/src/hooks/use-infinite-list.tsx

@@ -0,0 +1,92 @@
+import { FetchError } from "@medusajs/js-sdk"
+import { PaginatedResponse } from "@medusajs/types"
+import {
+  QueryKey,
+  UseInfiniteQueryOptions,
+  InfiniteData,
+  useInfiniteQuery,
+} from "@tanstack/react-query"
+
+/**
+ * Generic hook for infinite queries with pagination support.
+ *
+ * @template TResponse - The response type that must include count, offset, and limit
+ * @template TParams - The query parameters type (offset and limit will be handled internally)
+ * @template TError - The error type (defaults to FetchError)
+ * @template TQueryKey - The query key type (defaults to QueryKey)
+ *
+ * @param config - Configuration object
+ * @param config.queryKey - Function or array that generates the query key
+ * @param config.queryFn - Function that fetches data with offset and limit
+ * @param config.query - Query parameters (offset is ignored, limit is optional)
+ * @param config.options - Additional options for useInfiniteQuery
+ *
+ * @example
+ * ```ts
+ * const { data, fetchNextPage, hasNextPage } = useInfiniteList({
+ *   queryKey: (params) => productVariantQueryKeys.list(params),
+ *   queryFn: async (params) => sdk.admin.productVariant.list(params),
+ *   query: { status: "published" },
+ * })
+ * ```
+ */
+export const useInfiniteList = <
+  TResponse extends PaginatedResponse<unknown>,
+  TParams extends { offset?: number; limit?: number } = {
+    offset?: number
+    limit?: number
+  },
+  TError = FetchError,
+  TQueryKey extends QueryKey = QueryKey
+>({
+  queryKey,
+  queryFn,
+  query,
+  options,
+}: {
+  queryKey: ((params: Omit<TParams, "limit">) => TQueryKey) | TQueryKey
+  queryFn: (params: TParams) => Promise<TResponse>
+  query?: TParams
+  options?: Omit<
+    UseInfiniteQueryOptions<
+      TResponse,
+      TError,
+      InfiniteData<TResponse, number>,
+      TResponse,
+      TQueryKey,
+      number
+    >,
+    "queryKey" | "queryFn" | "initialPageParam" | "getNextPageParam"
+  >
+}) => {
+  const { limit = 50, offset: _, ..._query } = query ?? {}
+  const resolvedQueryKey =
+    typeof queryKey === "function"
+      ? queryKey(_query as Omit<TParams, "limit">)
+      : queryKey
+  const infiniteQueryKey =
+    resolvedQueryKey[resolvedQueryKey.length - 1] === "__infinite"
+      ? resolvedQueryKey
+      : ([...resolvedQueryKey, "__infinite"] as unknown as TQueryKey)
+
+  return useInfiniteQuery<
+    TResponse,
+    TError,
+    InfiniteData<TResponse, number>,
+    TQueryKey,
+    number
+  >({
+    // Infinite queries must not share the exact same queryKey as non-infinite queries,
+    // since the cached data shape differs (InfiniteData<T> vs T).
+    queryKey: infiniteQueryKey,
+    queryFn: ({ pageParam = 0 }) => {
+      return queryFn({ ..._query, limit, offset: pageParam } as TParams)
+    },
+    initialPageParam: 0,
+    getNextPageParam: (lastPage) => {
+      const moreItemsExist = lastPage.count > lastPage.offset + lastPage.limit
+      return moreItemsExist ? lastPage.offset + lastPage.limit : undefined
+    },
+    ...options,
+  })
+}

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

@@ -38,6 +38,9 @@
         "search": {
           "type": "string"
         },
+        "original": {
+            "type": "string"
+        },
         "of": {
           "type": "string"
         },
@@ -194,6 +197,7 @@
         "apply",
         "range",
         "search",
+        "original",
         "of",
         "results",
         "pages",

package/src/i18n/translations/en.json

@@ -11,6 +11,7 @@
     "apply": "Apply",
     "range": "Range",
     "search": "Search",
+    "original": "Original",
     "of": "of",
     "results": "results",
     "pages": "pages",

package/src/i18n/translations/es.json

@@ -11,6 +11,7 @@
     "apply": "Aplicar",
     "range": "Rango",
     "search": "Buscar",
+    "original": "Original",
     "of": "de",
     "results": "resultados",
     "pages": "páginas",

package/src/routes/store/store-add-locales/components/add-locales-form/add-locales-form.tsx

@@ -100,19 +100,10 @@ export const AddLocalesForm = ({ store }: AddLocalesFormProps) => {
       new Set([...data.locales, ...preSelectedRows])
     ) as string[]
 
-    let defaultLocale = store.supported_locales?.find(
-      (l) => l.is_default
-    )?.locale_code
-
-    if (!locales.includes(defaultLocale ?? "")) {
-      defaultLocale = locales?.[0]
-    }
-
     await mutateAsync(
       {
         supported_locales: locales.map((l) => ({
           locale_code: l,
-          is_default: l === defaultLocale,
         })),
       },
       {

package/src/routes/store/store-detail/components/store-general-section/store-general-section.tsx

@@ -7,7 +7,6 @@ import { Link } from "react-router-dom"
 import { ActionMenu } from "../../../../../components/common/action-menu"
 import { useSalesChannel, useStockLocation } from "../../../../../hooks/api"
 import { useRegion } from "../../../../../hooks/api/regions"
-import { useFeatureFlag } from "../../../../../providers/feature-flag-provider"
 
 type StoreGeneralSectionProps = {
   store: AdminStore
@@ -15,14 +14,12 @@ type StoreGeneralSectionProps = {
 
 export const StoreGeneralSection = ({ store }: StoreGeneralSectionProps) => {
   const { t } = useTranslation()
-  const isTranslationsEnabled = useFeatureFlag("translation")
 
   const { region } = useRegion(store.default_region_id!, undefined, {
     enabled: !!store.default_region_id,
   })
 
   const defaultCurrency = store.supported_currencies?.find((c) => c.is_default)
-  const defaultLocale = store.supported_locales?.find((l) => l.is_default)
 
   const { sales_channel } = useSalesChannel(store.default_sales_channel_id!, {
     enabled: !!store.default_sales_channel_id,
@@ -88,27 +85,6 @@ export const StoreGeneralSection = ({ store }: StoreGeneralSectionProps) => {
           </Text>
         )}
       </div>
-      {isTranslationsEnabled && (
-        <div className="text-ui-fg-subtle grid grid-cols-2 px-6 py-4">
-          <Text size="small" leading="compact" weight="plus">
-            {t("store.defaultLocale")}
-          </Text>
-          {defaultLocale ? (
-            <div className="flex items-center gap-x-2">
-              <Badge size="2xsmall">
-                {defaultLocale.locale_code?.toUpperCase()}
-              </Badge>
-              <Text size="small" leading="compact">
-                {defaultLocale.locale?.name}
-              </Text>
-            </div>
-          ) : (
-            <Text size="small" leading="compact">
-              -
-            </Text>
-          )}
-        </div>
-      )}
       <div className="text-ui-fg-subtle grid grid-cols-2 px-6 py-4">
         <Text size="small" leading="compact" weight="plus">
           {t("store.defaultRegion")}

package/src/routes/store/store-detail/components/store-locale-section/store-locale-section.tsx

@@ -60,8 +60,6 @@ export const StoreLocaleSection = ({ store }: StoreLocaleSectionProps) => {
     meta: {
       storeId: store.id,
       supportedLocales: store.supported_locales,
-      defaultLocaleCode: store.supported_locales?.find((l) => l.is_default)
-        ?.locale_code,
     },
   })
 
@@ -165,12 +163,10 @@ const LocaleActions = ({
   storeId,
   locale,
   supportedLocales,
-  defaultLocaleCode,
 }: {
   storeId: string
   locale: HttpTypes.AdminLocale
   supportedLocales: HttpTypes.AdminStoreLocale[]
-  defaultLocaleCode: string
 }) => {
   const { mutateAsync } = useUpdateStore(storeId)
   const { t } = useTranslation()
@@ -218,7 +214,6 @@ const LocaleActions = ({
               icon: <Trash />,
               label: t("actions.remove"),
               onClick: handleRemove,
-              disabled: locale.code === defaultLocaleCode,
             },
           ],
         },
@@ -267,9 +262,7 @@ const useColumns = () => {
       columnHelper.display({
         id: "actions",
         cell: ({ row, table }) => {
-          const { supportedLocales, storeId, defaultLocaleCode } = table.options
-            .meta as {
-            defaultLocaleCode: string
+          const { supportedLocales, storeId } = table.options.meta as {
             supportedLocales: HttpTypes.AdminStoreLocale[]
             storeId: string
           }
@@ -279,7 +272,6 @@ const useColumns = () => {
               storeId={storeId}
               locale={row.original}
               supportedLocales={supportedLocales}
-              defaultLocaleCode={defaultLocaleCode}
             />
           )
         },

package/src/routes/store/store-edit/components/edit-store-form/edit-store-form.tsx

@@ -13,7 +13,6 @@ import { useUpdateStore } from "../../../../../hooks/api/store"
 import { useComboboxData } from "../../../../../hooks/use-combobox-data"
 import { sdk } from "../../../../../lib/client"
 import { useDocumentDirection } from "../../../../../hooks/use-document-direction"
-import { useFeatureFlag } from "../../../../../providers/feature-flag-provider"
 
 type EditStoreFormProps = {
   store: HttpTypes.AdminStore
@@ -22,7 +21,6 @@ type EditStoreFormProps = {
 const EditStoreSchema = z.object({
   name: z.string().min(1),
   default_currency_code: z.string().optional(),
-  default_locale_code: z.string().optional(),
   default_region_id: z.string().optional(),
   default_sales_channel_id: z.string().optional(),
   default_location_id: z.string().optional(),
@@ -30,16 +28,12 @@ const EditStoreSchema = z.object({
 
 export const EditStoreForm = ({ store }: EditStoreFormProps) => {
   const { t } = useTranslation()
-  const isTranslationsEnabled = useFeatureFlag("translation")
   const { handleSuccess } = useRouteModal()
   const direction = useDocumentDirection()
   const form = useForm<z.infer<typeof EditStoreSchema>>({
     defaultValues: {
       name: store.name,
       default_region_id: store.default_region_id || undefined,
-      default_locale_code:
-        store.supported_locales?.find((l) => l.is_default)?.locale_code ||
-        undefined,
       default_currency_code:
         store.supported_currencies?.find((c) => c.is_default)?.currency_code ||
         undefined,
@@ -79,14 +73,10 @@ export const EditStoreForm = ({ store }: EditStoreFormProps) => {
   })
 
   const handleSubmit = form.handleSubmit(async (values) => {
-    const { default_currency_code, default_locale_code, ...rest } = values
+    const { default_currency_code, ...rest } = values
 
     const normalizedMutation: HttpTypes.AdminUpdateStore = {
       ...rest,
-      supported_locales: store.supported_locales?.map((l) => ({
-        ...l,
-        is_default: l.locale_code === default_locale_code,
-      })),
       supported_currencies: store.supported_currencies?.map((c) => ({
         ...c,
         is_default: c.currency_code === default_currency_code,
@@ -156,40 +146,6 @@ export const EditStoreForm = ({ store }: EditStoreFormProps) => {
                 )
               }}
             />
-            {isTranslationsEnabled && (
-              <Form.Field
-                control={form.control}
-                name="default_locale_code"
-                render={({ field: { onChange, ...field } }) => {
-                  return (
-                    <Form.Item>
-                      <Form.Label>{t("store.defaultLocale")}</Form.Label>
-                      <Form.Control>
-                        <Select
-                          dir={direction}
-                          {...field}
-                          onValueChange={onChange}
-                        >
-                          <Select.Trigger ref={field.ref}>
-                            <Select.Value />
-                          </Select.Trigger>
-                          <Select.Content>
-                            {store.supported_locales?.map((locale) => (
-                              <Select.Item
-                                key={locale.locale_code}
-                                value={locale.locale_code}
-                              >
-                                {locale.locale_code}
-                              </Select.Item>
-                            ))}
-                          </Select.Content>
-                        </Select>
-                      </Form.Control>
-                    </Form.Item>
-                  )
-                }}
-              />
-            )}
             <Form.Field
               control={form.control}
               name="default_region_id"

package/src/routes/translations/translation-list/components/active-locales-section/active-locales-section.tsx

@@ -1,4 +1,4 @@
-import { PencilSquare, Text as TextIcon } from "@medusajs/icons"
+import { PencilSquare, Language } from "@medusajs/icons"
 import { Container, Heading, IconButton, InlineTip, Text } from "@medusajs/ui"
 import { useTranslation } from "react-i18next"
 import { IconAvatar } from "../../../../../components/common/icon-avatar"
@@ -46,7 +46,7 @@ export const ActiveLocalesSection = ({
         {hasLocales ? (
           <Container className="bg-ui-bg-component flex items-center gap-x-4 px-6 py-2">
             <IconAvatar>
-              <TextIcon />
+              <Language />
             </IconAvatar>
             <div className="flex flex-col">
               <Text size="small" weight="plus">

package/src/routes/translations/translation-list/components/translation-list-section/translation-list-section.tsx

@@ -1,13 +1,6 @@
 import { Button, Container, Text } from "@medusajs/ui"
 import { Link } from "react-router-dom"
-
-type TranslatableEntity = {
-  icon: React.ReactNode
-  label: string
-  reference: string
-  translatedCount?: number
-  totalCount?: number
-}
+import { TranslatableEntity } from "../../translation-list"
 
 type TranslationListSectionProps = {
   entities: TranslatableEntity[]