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

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

@@ -2,96 +2,92 @@ import { Container, Heading, Text } from "@medusajs/ui"
 import { TwoColumnPage } from "../../../components/layout/pages"
 import { useTranslation } from "react-i18next"
 import { Buildings } from "@medusajs/icons"
-import { useStore } from "../../../hooks/api"
+import {
+  useStore,
+  useTranslationSettings,
+  useTranslationStatistics,
+} from "../../../hooks/api"
 import { ActiveLocalesSection } from "./components/active-locales-section/active-locales-section"
 import { TranslationListSection } from "./components/translation-list-section/translation-list-section"
 import { TranslationsCompletionSection } from "./components/translations-completion-section/translations-completion-section"
 import { TwoColumnPageSkeleton } from "../../../components/common/skeleton"
+import { useMemo } from "react"
 
 export type TranslatableEntity = {
-  icon: React.ReactNode
   label: string
   reference: string
+  translatableFields: string[]
   translatedCount?: number
   totalCount?: number
 }
 
-const TRANSLATABLE_ENTITIES: TranslatableEntity[] = [
-  {
-    icon: <Buildings />,
-    label: "Product",
-    reference: "product",
-    translatedCount: 4,
-    totalCount: 96,
-  },
-  {
-    icon: <Buildings />,
-    label: "Product Variants",
-    reference: "product_variant",
-    translatedCount: 4,
-    totalCount: 200000,
-  },
-  {
-    icon: <Buildings />,
-    label: "Product Categories",
-    reference: "product_category",
-    translatedCount: 96,
-    totalCount: 96,
-  },
-  {
-    icon: <Buildings />,
-    label: "Product Collections",
-    reference: "product_collection",
-    translatedCount: 4,
-    totalCount: 96,
-  },
-  {
-    icon: <Buildings />,
-    label: "Product Types",
-    reference: "product_type",
-    translatedCount: 4,
-    totalCount: 96,
-  },
-  {
-    icon: <Buildings />,
-    label: "Product Tags",
-    reference: "product_tag",
-    translatedCount: 96,
-    totalCount: 96,
-  },
-  {
-    icon: <Buildings />,
-    label: "Product Options",
-    reference: "product_option",
-    translatedCount: 96,
-    totalCount: 96,
-  },
-  {
-    icon: <Buildings />,
-    label: "Product Option Values",
-    reference: "product_option_value",
-    translatedCount: 96,
-    totalCount: 96,
-  },
-]
-
 export const TranslationList = () => {
   const { t } = useTranslation()
 
   const { store, isPending, isError, error } = useStore()
+  const {
+    translatable_fields,
+    isPending: isTranslationSettingsPending,
+    isError: isTranslationSettingsError,
+    error: translationSettingsError,
+  } = useTranslationSettings()
+  const {
+    statistics,
+    isPending: isTranslationStatisticsPending,
+    isError: isTranslationStatisticsError,
+    error: translationStatisticsError,
+  } = useTranslationStatistics(
+    {
+      locales:
+        store?.supported_locales?.map(
+          (suportedLocale) => suportedLocale.locale_code
+        ) ?? [],
+      entity_types: Object.keys(translatable_fields ?? {}),
+    },
+    {
+      enabled: !!translatable_fields && !!store,
+    }
+  )
 
-  if (isError) {
-    throw error
+  if (isError || isTranslationSettingsError || isTranslationStatisticsError) {
+    throw error || translationSettingsError || translationStatisticsError
   }
 
-  const isReady = !!store && !isPending
+  const hasLocales = (store?.supported_locales ?? []).length > 0
+
+  const translatableEntities: TranslatableEntity[] = useMemo(() => {
+    if (!translatable_fields || !statistics) {
+      return []
+    }
+
+    return Object.entries(translatable_fields).map(([entity, fields]) => {
+      const entityStatistics = statistics[entity]
+
+      return {
+        label: entity
+          .split("_")
+          .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+          .join(" "),
+        reference: entity,
+        translatableFields: fields,
+        translatedCount: entityStatistics.translated,
+        totalCount: entityStatistics.expected,
+      }
+    })
+  }, [translatable_fields, statistics])
+
+  const isReady =
+    !!store &&
+    !isPending &&
+    !isTranslationSettingsPending &&
+    !isTranslationStatisticsPending &&
+    !!translatable_fields &&
+    !!statistics
 
   if (!isReady) {
     return <TwoColumnPageSkeleton sidebarSections={2} />
   }
 
-  const hasLocales = (store?.supported_locales ?? []).length > 0
-
   return (
     <TwoColumnPage
       widgets={{
@@ -109,7 +105,7 @@ export const TranslationList = () => {
           </Text>
         </Container>
         <TranslationListSection
-          entities={TRANSLATABLE_ENTITIES}
+          entities={translatableEntities}
           hasLocales={hasLocales}
         />
       </TwoColumnPage.Main>
@@ -121,7 +117,9 @@ export const TranslationList = () => {
             ) ?? []
           }
         ></ActiveLocalesSection>
-        <TranslationsCompletionSection />
+        {statistics && (
+          <TranslationsCompletionSection statistics={statistics} />
+        )}
       </TwoColumnPage.Sidebar>
     </TwoColumnPage>
   )

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

@@ -18,7 +18,6 @@ import {
 import { KeyboundForm } from "../../../../../components/utilities/keybound-form"
 import { useBatchTranslations } from "../../../../../hooks/api/translations"
 import { useDocumentDirection } from "../../../../../hooks/use-document-direction"
-import { REFERENCE_LABEL_MAP } from "../../utils"
 
 /**
  * Schema for a single locale translation.
@@ -441,7 +440,10 @@ export const TranslationsEditForm = ({
             <div className="-my-2 w-full border-l">
               <ProgressTabs.List className="justify-start-start flex w-full items-center">
                 <ProgressTabs.Trigger value={entityType}>
-                  {REFERENCE_LABEL_MAP[entityType]}
+                  {entityType
+                    .split("_")
+                    .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+                    .join(" ")}
                 </ProgressTabs.Trigger>
               </ProgressTabs.List>
             </div>

package/src/routes/translations/translations-edit/translations-edit.tsx

@@ -1,5 +1,9 @@
 import { useNavigate, useSearchParams } from "react-router-dom"
-import { useReferenceTranslations, useStore } from "../../../hooks/api"
+import {
+  useReferenceTranslations,
+  useStore,
+  useTranslationSettings,
+} from "../../../hooks/api"
 import { TranslationsEditForm } from "./components/translations-edit-form"
 import { useEffect } from "react"
 import { RouteFocusModal } from "../../../components/modals"
@@ -20,10 +24,16 @@ export const TranslationsEdit = () => {
     }
   }, [reference, navigate, isTranslationsEnabled])
 
+  const {
+    translatable_fields,
+    isPending: isTranslationSettingsPending,
+    isError: isTranslationSettingsError,
+    error: translationSettingsError,
+  } = useTranslationSettings({ entity_type: reference! })
+
   const {
     translations,
     references,
-    translatableFields,
     fetchNextPage,
     count,
     isFetchingNextPage,
@@ -31,10 +41,15 @@ export const TranslationsEdit = () => {
     isPending,
     isError,
     error,
-  } = useReferenceTranslations(reference!, referenceIdParam, {
-    placeholderData: keepPreviousData,
-  })
-
+  } = useReferenceTranslations(
+    reference!,
+    translatable_fields?.[reference!] ?? [],
+    referenceIdParam,
+    {
+      enabled: !!translatable_fields && !!reference,
+      placeholderData: keepPreviousData,
+    }
+  )
   const {
     store,
     isPending: isStorePending,
@@ -45,13 +60,14 @@ export const TranslationsEdit = () => {
   const ready =
     !isPending &&
     !!translations &&
-    !!translatableFields &&
+    !!translatable_fields &&
+    !isTranslationSettingsPending &&
     !!references &&
     !isStorePending &&
     !!store
 
-  if (isError || isStoreError) {
-    throw error || storeError
+  if (isError || isStoreError || isTranslationSettingsError) {
+    throw error || storeError || translationSettingsError
   }
 
   return (
@@ -62,9 +78,8 @@ export const TranslationsEdit = () => {
           references={references}
           entityType={reference!}
           availableLocales={store?.supported_locales ?? []}
-          // TODO: change this to get it from the entity translation config when we have it
-          translatableFields={translatableFields}
-          modalFields={translatableFields}
+          translatableFields={translatable_fields[reference!]}
+          modalFields={translatable_fields[reference!]}
           fetchNextPage={fetchNextPage}
           hasNextPage={hasNextPage}
           isFetchingNextPage={isFetchingNextPage}

package/src/routes/translations/translations-edit/utils/index.ts

@@ -1 +0,0 @@
-export * from "./reference-label-map"

package/src/routes/translations/translations-edit/utils/reference-label-map.ts

@@ -1,10 +0,0 @@
-export const REFERENCE_LABEL_MAP: Record<string, string> = {
-  product: "Products",
-  product_variant: "Product Variants",
-  product_category: "Product Categories",
-  product_collection: "Product Collections",
-  product_type: "Product Types",
-  product_tag: "Product Tags",
-  product_option: "Product Options",
-  product_option_value: "Product Option Values",
-}