@medusajs/dashboard 2.12.3-preview-20251217120154 → 2.12.3-snapshot-20251216185234

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

@@ -1,4 +1,4 @@
-import { PencilSquare, Trash } from "@medusajs/icons"
+import { GlobeEurope, PencilSquare, Trash } from "@medusajs/icons"
 import { HttpTypes } from "@medusajs/types"
 import { Container, Heading, StatusBadge, toast, usePrompt } from "@medusajs/ui"
 import { useTranslation } from "react-i18next"
@@ -8,6 +8,7 @@ import { ActionMenu } from "../../../../../components/common/action-menu"
 import { SectionRow } from "../../../../../components/common/section"
 import { useDeleteProduct } from "../../../../../hooks/api/products"
 import { useExtension } from "../../../../../providers/extension-provider"
+import { useFeatureFlag } from "../../../../../providers/feature-flag-provider"
 
 const productStatusColor = (status: string) => {
   switch (status) {
@@ -35,6 +36,7 @@ export const ProductGeneralSection = ({
   const prompt = usePrompt()
   const navigate = useNavigate()
   const { getDisplays } = useExtension()
+  const isTranslationsEnabled = useFeatureFlag("translation")
 
   const displays = getDisplays("product", "general")
 
@@ -85,6 +87,19 @@ export const ProductGeneralSection = ({
                   },
                 ],
               },
+              ...(isTranslationsEnabled
+                ? [
+                    {
+                      actions: [
+                        {
+                          label: t("translations.actions.manage"),
+                          to: `/settings/translations/edit?reference=product&reference_id=${product.id}`,
+                          icon: <GlobeEurope />,
+                        },
+                      ],
+                    },
+                  ]
+                : []),
               {
                 actions: [
                   {

package/src/routes/products/product-detail/components/product-variant-section/product-variant-section.tsx

@@ -1,4 +1,10 @@
-import { Buildings, Component, PencilSquare, Trash } from "@medusajs/icons"
+import {
+  Buildings,
+  Component,
+  GlobeEurope,
+  PencilSquare,
+  Trash,
+} from "@medusajs/icons"
 import { HttpTypes } from "@medusajs/types"
 import {
   Badge,
@@ -26,6 +32,7 @@ import {
 import { useQueryParams } from "../../../../../hooks/use-query-params"
 import { PRODUCT_VARIANT_IDS_KEY } from "../../../common/constants"
 import { Thumbnail } from "../../../../../components/common/thumbnail"
+import { useFeatureFlag } from "../../../../../providers/feature-flag-provider"
 
 type ProductVariantSectionProps = {
   product: HttpTypes.AdminProduct
@@ -38,6 +45,7 @@ export const ProductVariantSection = ({
   product,
 }: ProductVariantSectionProps) => {
   const { t } = useTranslation()
+  const isTranslationsEnabled = useFeatureFlag("translation")
 
   const { q, order, offset, allow_backorder, manage_inventory } =
     useQueryParams(
@@ -70,6 +78,11 @@ export const ProductVariantSection = ({
     }
   )
 
+  const translationParams = new URLSearchParams()
+  variants?.forEach((variant) => {
+    translationParams.append("reference_id", variant.id)
+  })
+
   if (isError) {
     throw error
   }
@@ -115,6 +128,15 @@ export const ProductVariantSection = ({
                   to: `stock`,
                   icon: <Buildings />,
                 },
+                ...(isTranslationsEnabled
+                  ? [
+                      {
+                        icon: <GlobeEurope />,
+                        label: t("translations.actions.manage"),
+                        to: `/settings/translations/edit?reference=product_variant&${translationParams.toString()}`,
+                      },
+                    ]
+                  : []),
               ],
             },
           ],
@@ -225,6 +247,15 @@ const useColumns = (product: HttpTypes.AdminProduct) => {
             )
           },
         },
+        {
+          icon: <GlobeEurope />,
+          label: t("translations.actions.manage"),
+          onClick: () => {
+            navigate(
+              `/settings/translations/edit?reference=product_variant&reference_id=${variant.id}`
+            )
+          },
+        },
       ]
 
       const secondaryActions: DataTableAction<HttpTypes.AdminProductVariant>[] =

package/src/routes/products/product-list/components/product-list-table/product-list-table.tsx

@@ -1,4 +1,4 @@
-import { PencilSquare, Trash } from "@medusajs/icons"
+import { GlobeEurope, PencilSquare, Trash } from "@medusajs/icons"
 import { Button, Container, Heading, toast, usePrompt } from "@medusajs/ui"
 import { keepPreviousData } from "@tanstack/react-query"
 import { createColumnHelper } from "@tanstack/react-table"
@@ -110,6 +110,7 @@ const ProductActions = ({ product }: { product: HttpTypes.AdminProduct }) => {
   const { t } = useTranslation()
   const prompt = usePrompt()
   const { mutateAsync } = useDeleteProduct(product.id)
+  const isTranslationsEnabled = useFeatureFlag("translation")
 
   const handleDelete = async () => {
     const res = await prompt({
@@ -153,6 +154,19 @@ const ProductActions = ({ product }: { product: HttpTypes.AdminProduct }) => {
             },
           ],
         },
+        ...(isTranslationsEnabled
+          ? [
+              {
+                actions: [
+                  {
+                    icon: <GlobeEurope />,
+                    label: t("translations.actions.manage"),
+                    to: `/settings/translations/edit?reference=product&reference_id=${product.id}`,
+                  },
+                ],
+              },
+            ]
+          : []),
         {
           actions: [
             {

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

@@ -0,0 +1,68 @@
+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"
+import { HttpTypes } from "@medusajs/types"
+import { useCallback } from "react"
+import { useNavigate } from "react-router-dom"
+
+type ActiveLocalesSectionProps = {
+  locales: HttpTypes.AdminLocale[]
+}
+
+export const ActiveLocalesSection = ({
+  locales,
+}: ActiveLocalesSectionProps) => {
+  const { t } = useTranslation()
+  const navigate = useNavigate()
+
+  const handleManageLocales = useCallback(() => {
+    navigate("/settings/store/locales")
+  }, [navigate])
+
+  const renderLocales = useCallback(() => {
+    const maxLocalesToDetail = 2
+    if (locales.length <= maxLocalesToDetail) {
+      return locales.map((locale) => locale.name).join(", ")
+    }
+
+    return `${locales
+      .slice(0, maxLocalesToDetail)
+      .map((locale) => locale.name)
+      .join(", ")} + ${locales.length - maxLocalesToDetail}`
+  }, [locales])
+
+  const hasLocales = locales.length > 0
+
+  return (
+    <Container className="flex flex-col p-0">
+      <div className="flex items-center justify-between px-6 py-4">
+        <Heading>{t("translations.activeLocales.heading")}</Heading>
+        <IconButton variant="transparent" onClick={handleManageLocales}>
+          <PencilSquare></PencilSquare>
+        </IconButton>
+      </div>
+      <div className="px-1 pb-1">
+        {hasLocales ? (
+          <Container className="bg-ui-bg-component flex items-center gap-x-4 px-6 py-2">
+            <IconAvatar>
+              <Language />
+            </IconAvatar>
+            <div className="flex flex-col">
+              <Text size="small" weight="plus">
+                {t("translations.activeLocales.subtitle")}
+              </Text>
+              <Text className="text-ui-fg-subtle" size="small">
+                {renderLocales()}
+              </Text>
+            </div>
+          </Container>
+        ) : (
+          <InlineTip label="Tip">
+            {t("translations.activeLocales.noLocalesTip")}
+          </InlineTip>
+        )}
+      </div>
+    </Container>
+  )
+}

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

@@ -0,0 +1,44 @@
+import { Button, Container, Text } from "@medusajs/ui"
+import { Link } from "react-router-dom"
+import { TranslatableEntity } from "../../translation-list"
+import { useTranslation } from "react-i18next"
+
+type TranslationListSectionProps = {
+  entities: TranslatableEntity[]
+  hasLocales: boolean
+}
+
+export const TranslationListSection = ({
+  entities,
+  hasLocales = false,
+}: TranslationListSectionProps) => {
+  const { t } = useTranslation()
+
+  return (
+    <Container className="divide-y p-0">
+      {entities.map((entity) => (
+        <div
+          key={entity.reference}
+          className="grid grid-cols-[250px_1fr_auto] items-center gap-x-4 px-6 py-4"
+        >
+          <Text size="small" weight="plus">
+            {entity.label}
+          </Text>
+          <Text size="small" className="text-ui-fg-subtle">
+            {t("translations.list.metrics", {
+              translated: (entity.translatedCount ?? 0).toLocaleString(),
+              total: (entity.totalCount ?? 0).toLocaleString(),
+            })}
+          </Text>
+          <Link
+            to={`/settings/translations/edit?reference=${entity.reference}`}
+          >
+            <Button variant="secondary" size="small" disabled={!hasLocales}>
+              Edit
+            </Button>
+          </Link>
+        </div>
+      ))}
+    </Container>
+  )
+}

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

@@ -0,0 +1,224 @@
+import { AdminTranslationEntityStatistics, HttpTypes } from "@medusajs/types"
+import { Container, Heading, Text, Tooltip } from "@medusajs/ui"
+import { useMemo, useState } from "react"
+import { useTranslation } from "react-i18next"
+
+type TranslationsCompletionSectionProps = {
+  statistics: Record<string, AdminTranslationEntityStatistics>
+  locales: HttpTypes.AdminLocale[]
+}
+
+type LocaleStats = {
+  code: string
+  name: string
+  translated: number
+  toTranslate: number
+  total: number
+}
+
+export const TranslationsCompletionSection = ({
+  statistics,
+  locales,
+}: TranslationsCompletionSectionProps) => {
+  const { t } = useTranslation()
+  const [hoveredLocale, setHoveredLocale] = useState<string | null>(null)
+
+  const { translatedCount, totalCount } = Object.values(statistics).reduce(
+    (acc, curr) => ({
+      translatedCount: acc.translatedCount + curr.translated,
+      totalCount: acc.totalCount + curr.expected,
+    }),
+    { totalCount: 0, translatedCount: 0 }
+  )
+
+  const percentage = totalCount > 0 ? (translatedCount / totalCount) * 100 : 0
+  const remaining = Math.max(0, totalCount - translatedCount)
+
+  const localeStats = useMemo((): LocaleStats[] => {
+    const localeMap = new Map<
+      string,
+      { translated: number; expected: number }
+    >()
+
+    locales.forEach((locale) => {
+      localeMap.set(locale.code, { translated: 0, expected: 0 })
+    })
+
+    Object.values(statistics).forEach((entityStats) => {
+      if (entityStats.by_locale) {
+        Object.entries(entityStats.by_locale).forEach(
+          ([localeCode, localeData]) => {
+            const existing = localeMap.get(localeCode)
+            if (existing) {
+              existing.translated += localeData.translated
+              existing.expected += localeData.expected
+            }
+          }
+        )
+      }
+    })
+
+    return locales.map((locale) => {
+      const stats = localeMap.get(locale.code) || { translated: 0, expected: 0 }
+      return {
+        code: locale.code,
+        name: locale.name,
+        translated: stats.translated,
+        toTranslate: Math.max(0, stats.expected - stats.translated),
+        total: stats.expected,
+      }
+    })
+  }, [statistics, locales])
+
+  const maxTotal = useMemo(
+    () => Math.max(...localeStats.map((s) => s.total), 1),
+    [localeStats]
+  )
+
+  return (
+    <Container className="flex flex-col gap-y-3 px-6 py-4">
+      <div className="flex items-center justify-between">
+        <Heading>{t("translations.completion.heading")}</Heading>
+        <Text size="small" weight="plus" className="text-ui-fg-subtle">
+          {translatedCount.toLocaleString()} {t("general.of")}{" "}
+          {totalCount.toLocaleString()}
+        </Text>
+      </div>
+
+      <div className="flex h-3 w-full overflow-hidden">
+        {percentage > 0 ? (
+          <>
+            <div
+              className="mr-0.5 h-full rounded-sm transition-all"
+              style={{
+                width: `${percentage}%`,
+                backgroundColor: "var(--bg-interactive)",
+              }}
+            />
+            <div
+              className="h-full flex-1 rounded-sm"
+              style={{
+                backgroundColor: "var(--bg-interactive)",
+                opacity: 0.3,
+              }}
+            />
+          </>
+        ) : (
+          <div
+            className="h-full w-full rounded-full"
+            style={{
+              backgroundColor: "var(--bg-interactive)",
+              opacity: 0.3,
+            }}
+          />
+        )}
+      </div>
+
+      <div className="flex items-center justify-between">
+        <Text size="small" weight="plus" className="text-ui-fg-subtle">
+          {percentage.toFixed(1)}%
+        </Text>
+        <Text size="small" weight="plus" className="text-ui-fg-subtle">
+          {remaining.toLocaleString()} {t("general.remaining").toLowerCase()}
+        </Text>
+      </div>
+
+      {localeStats.length > 0 && (
+        <div className="mt-4 flex flex-col gap-y-2">
+          <div className="flex h-32 w-full items-end gap-1">
+            {localeStats.map((locale) => {
+              const heightPercent = (locale.total / maxTotal) * 100
+              const translatedPercent =
+                locale.total > 0 ? (locale.translated / locale.total) * 100 : 0
+
+              return (
+                <Tooltip
+                  key={locale.code}
+                  open={hoveredLocale === locale.code}
+                  content={
+                    <div className="flex flex-col gap-y-1 p-1">
+                      <Text size="small" weight="plus">
+                        {locale.name}
+                      </Text>
+                      <div className="flex items-center justify-between">
+                        <div className="flex items-center gap-x-2">
+                          <div
+                            className="h-2 w-2 rounded-full"
+                            style={{ backgroundColor: "var(--bg-interactive)" }}
+                          />
+                          <Text
+                            size="small"
+                            weight="plus"
+                            className="text-ui-fg-subtle"
+                          >
+                            {t("translations.completion.translated")}
+                          </Text>
+                        </div>
+                        <Text size="small" weight="plus">
+                          {locale.translated}
+                        </Text>
+                      </div>
+                      <div className="flex items-center gap-x-2">
+                        <div
+                          className="h-2 w-2 rounded-full"
+                          style={{
+                            backgroundColor: "var(--bg-interactive)",
+                            opacity: 0.3,
+                          }}
+                        />
+                        <Text
+                          size="small"
+                          weight="plus"
+                          className="text-ui-fg-subtle"
+                        >
+                          {t("translations.completion.toTranslate")}
+                        </Text>
+                        <Text size="small" weight="plus">
+                          {locale.toTranslate}
+                        </Text>
+                      </div>
+                    </div>
+                  }
+                >
+                  <div
+                    className="flex min-w-2 flex-1 cursor-pointer flex-col justify-end overflow-hidden rounded-t-sm transition-opacity"
+                    style={{ height: `${heightPercent}%` }}
+                    onMouseEnter={() => setHoveredLocale(locale.code)}
+                    onMouseLeave={() => setHoveredLocale(null)}
+                  >
+                    <div
+                      className="w-full rounded-t-sm"
+                      style={{
+                        height: `${100 - translatedPercent}%`,
+                        backgroundColor: "var(--bg-interactive)",
+                        opacity: 0.3,
+                        minHeight: locale.toTranslate > 0 ? "2px" : "0",
+                      }}
+                    />
+                    {translatedPercent > 0 && (
+                      <div
+                        className="mt-0.5 w-full rounded-sm"
+                        style={{
+                          height: `${translatedPercent}%`,
+                          backgroundColor: "var(--bg-interactive)",
+                          minHeight: locale.translated > 0 ? "2px" : "0",
+                        }}
+                      />
+                    )}
+                  </div>
+                </Tooltip>
+              )
+            })}
+          </div>
+          <Text
+            size="small"
+            weight="plus"
+            className="text-ui-fg-muted text-center"
+          >
+            {t("translations.completion.footer")}
+          </Text>
+        </div>
+      )}
+    </Container>
+  )
+}

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

@@ -0,0 +1 @@
+export { TranslationList as Component } from "./translation-list"

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

@@ -0,0 +1,138 @@
+import { Container, Heading, Text } from "@medusajs/ui"
+import { TwoColumnPage } from "../../../components/layout/pages"
+import { useTranslation } from "react-i18next"
+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 = {
+  label: string
+  reference: string
+  translatableFields: string[]
+  translatedCount?: number
+  totalCount?: number
+}
+
+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 && store.supported_locales?.length > 0,
+    }
+  )
+
+  if (isError || isTranslationSettingsError || isTranslationStatisticsError) {
+    throw error || translationSettingsError || translationStatisticsError
+  }
+
+  const hasLocales = (store?.supported_locales ?? []).length > 0
+
+  const translatableEntities: TranslatableEntity[] = useMemo(() => {
+    if (!translatable_fields) {
+      return []
+    }
+
+    return Object.entries(translatable_fields)
+      .filter(
+        ([entity]) =>
+          !["product_option", "product_option_value"].includes(entity)
+      )
+      .map(([entity, fields]) => {
+        const entityStatistics = statistics?.[entity] ?? {
+          translated: 0,
+          expected: 0,
+        }
+
+        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 &&
+    !!translatable_fields &&
+    ((!!statistics && !isTranslationStatisticsPending) || !hasLocales)
+
+  if (!isReady) {
+    return <TwoColumnPageSkeleton sidebarSections={2} />
+  }
+
+  return (
+    <TwoColumnPage
+      widgets={{
+        before: [],
+        after: [],
+        sideBefore: [],
+        sideAfter: [],
+      }}
+    >
+      <TwoColumnPage.Main>
+        <Container className="flex flex-col px-6 py-4">
+          <Heading>Manage {t("translations.domain")}</Heading>
+          <Text className="text-ui-fg-subtle" size="small">
+            {t("translations.subtitle")}
+          </Text>
+        </Container>
+        <TranslationListSection
+          entities={translatableEntities}
+          hasLocales={hasLocales}
+        />
+      </TwoColumnPage.Main>
+      <TwoColumnPage.Sidebar>
+        <ActiveLocalesSection
+          locales={
+            store?.supported_locales?.map(
+              (suportedLocale) => suportedLocale.locale
+            ) ?? []
+          }
+        ></ActiveLocalesSection>
+        <TranslationsCompletionSection
+          statistics={statistics ?? {}}
+          locales={
+            store?.supported_locales?.map(
+              (supportedLocale) => supportedLocale.locale
+            ) ?? []
+          }
+        />
+      </TwoColumnPage.Sidebar>
+    </TwoColumnPage>
+  )
+}

package/src/routes/translations/translations-edit/components/translations-edit-form/index.ts

@@ -0,0 +1 @@
+export * from "./translations-edit-form"