@medusajs/dashboard 2.12.3-preview-20251217120154 → 2.12.3-preview-20251217123836

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: [
             {

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

@@ -1,4 +1,4 @@
-import { Component, PencilSquare, Trash } from "@medusajs/icons"
+import { Component, GlobeEurope, PencilSquare, Trash } from "@medusajs/icons"
 import { HttpTypes } from "@medusajs/types"
 import { Badge, Container, Heading, usePrompt } from "@medusajs/ui"
 import { useTranslation } from "react-i18next"
@@ -7,6 +7,7 @@ import { useNavigate } from "react-router-dom"
 import { ActionMenu } from "../../../../../components/common/action-menu"
 import { SectionRow } from "../../../../../components/common/section"
 import { useDeleteVariant } from "../../../../../hooks/api/products"
+import { useFeatureFlag } from "../../../../../providers/feature-flag-provider"
 
 type VariantGeneralSectionProps = {
   variant: HttpTypes.AdminProductVariant
@@ -16,6 +17,7 @@ export function VariantGeneralSection({ variant }: VariantGeneralSectionProps) {
   const { t } = useTranslation()
   const prompt = usePrompt()
   const navigate = useNavigate()
+  const isTranslationsEnabled = useFeatureFlag("translation")
 
   const hasInventoryKit = variant.inventory?.length > 1
 
@@ -70,6 +72,19 @@ export function VariantGeneralSection({ variant }: VariantGeneralSectionProps) {
                   },
                 ],
               },
+              ...(isTranslationsEnabled
+                ? [
+                    {
+                      actions: [
+                        {
+                          label: t("translations.actions.manage"),
+                          to: `/settings/translations/edit?reference=product_variant&reference_id=${variant.id}`,
+                          icon: <GlobeEurope />,
+                        },
+                      ],
+                    },
+                  ]
+                : []),
               {
                 actions: [
                   {

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/add-locales/add-locales.tsx

@@ -0,0 +1,29 @@
+import { RouteFocusModal } from "../../../components/modals/route-focus-modal"
+import { useStore } from "../../../hooks/api"
+import { useFeatureFlag } from "../../../providers/feature-flag-provider"
+import { useNavigate } from "react-router-dom"
+import { AddLocalesForm } from "../../store/store-add-locales/components/add-locales-form/add-locales-form"
+
+export const TranslationsAddLocales = () => {
+  const isEnabled = useFeatureFlag("translation")
+  const navigate = useNavigate()
+
+  if (!isEnabled) {
+    navigate(-1)
+    return null
+  }
+
+  const { store, isPending, isError, error } = useStore()
+
+  const ready = !!store && !isPending
+
+  if (isError) {
+    throw error
+  }
+
+  return (
+    <RouteFocusModal>
+      {ready && <AddLocalesForm store={store} />}
+    </RouteFocusModal>
+  )
+}

package/src/routes/translations/add-locales/index.tsx

@@ -0,0 +1 @@
+export { TranslationsAddLocales as Component } from "./add-locales"

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

@@ -0,0 +1,93 @@
+import { PencilSquare, Language } from "@medusajs/icons"
+import {
+  Container,
+  Heading,
+  IconButton,
+  InlineTip,
+  Text,
+  Tooltip,
+} from "@medusajs/ui"
+import { useTranslation } from "react-i18next"
+import { IconAvatar } from "../../../../../components/common/icon-avatar"
+import { HttpTypes } from "@medusajs/types"
+import { useCallback, useState } 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 [isHovered, setIsHovered] = useState(false)
+
+  const handleManageLocales = useCallback(() => {
+    navigate("/settings/translations/add-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 level="h2">{t("translations.activeLocales.heading")}</Heading>
+        <IconButton variant="transparent" onClick={handleManageLocales}>
+          <PencilSquare></PencilSquare>
+        </IconButton>
+      </div>
+      <div className="px-1 pb-1">
+        {hasLocales ? (
+          <Tooltip
+            open={isHovered}
+            content={
+              <div className="flex flex-col gap-y-1 p-1">
+                {locales.map((locale) => (
+                  <Text key={locale.code} size="small" weight="plus">
+                    {locale.name}
+                  </Text>
+                ))}
+              </div>
+            }
+          >
+            <Container
+              className="bg-ui-bg-component border-r-1 flex items-center gap-x-4 px-[19px] py-2"
+              onMouseEnter={() => setIsHovered(true)}
+              onMouseLeave={() => setIsHovered(false)}
+            >
+              <IconAvatar className="border-ui-border-base border">
+                <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>
+          </Tooltip>
+        ) : (
+          <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,48 @@
+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 || !entity.totalCount}
+            >
+              Edit
+            </Button>
+          </Link>
+        </div>
+      ))}
+    </Container>
+  )
+}

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

@@ -0,0 +1,285 @@
+import { AdminTranslationEntityStatistics, HttpTypes } from "@medusajs/types"
+import { Container, Divider, 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]
+  )
+
+  const localeStatsCount = useMemo(() => localeStats.length, [localeStats])
+
+  return (
+    <Container className="p-0">
+      <div className="flex flex-col gap-y-4 px-6 py-4">
+        <div className="flex items-center justify-between">
+          <Heading level="h2">{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(--tag-blue-icon)",
+                  boxShadow: "inset 0 0 0 0.5px var(--alpha-250)",
+                }}
+              />
+              <div
+                className="h-full flex-1 rounded-sm"
+                style={{
+                  backgroundColor: "var(--tag-blue-border)",
+                  boxShadow: "inset 0 0 0 0.5px var(--alpha-250)",
+                }}
+              />
+            </>
+          ) : (
+            <div
+              className="h-full w-full rounded-sm"
+              style={{
+                backgroundColor: "var(--tag-blue-border)",
+                boxShadow: "inset 0 0 0 0.5px var(--alpha-250)",
+              }}
+            />
+          )}
+        </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>
+      </div>
+
+      {localeStats.length > 0 && (
+        <>
+          <Divider variant="dashed" />
+          <div className="flex flex-col gap-y-3 px-6 pb-6 pt-4">
+            <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 min-w-[150px] 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(--tag-blue-icon)",
+                                boxShadow: "inset 0 0 0 0.5px var(--alpha-250)",
+                              }}
+                            />
+                            <Text
+                              size="small"
+                              weight="plus"
+                              className="text-ui-fg-base"
+                            >
+                              {t("translations.completion.translated")}
+                            </Text>
+                          </div>
+                          <Text
+                            size="small"
+                            weight="plus"
+                            className="text-ui-fg-base"
+                          >
+                            {locale.translated}
+                          </Text>
+                        </div>
+                        <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(--tag-blue-border)",
+                                boxShadow: "inset 0 0 0 0.5px var(--alpha-250)",
+                              }}
+                            />
+                            <Text
+                              size="small"
+                              weight="plus"
+                              className="text-ui-fg-base"
+                            >
+                              {t("translations.completion.toTranslate")}
+                            </Text>
+                          </div>
+                          <Text
+                            size="small"
+                            weight="plus"
+                            className="text-ui-fg-base"
+                          >
+                            {locale.toTranslate}
+                          </Text>
+                        </div>
+                      </div>
+                    }
+                  >
+                    <div className="flex h-full flex-1 items-end justify-center">
+                      <div
+                        className="flex w-full min-w-2 max-w-[96px] flex-col justify-end overflow-hidden rounded-t-sm transition-opacity"
+                        style={{ height: `${heightPercent}%` }}
+                        onMouseEnter={() => setHoveredLocale(locale.code)}
+                        onMouseLeave={() => setHoveredLocale(null)}
+                      >
+                        {translatedPercent === 0 ? (
+                          <div
+                            className="w-full rounded-sm"
+                            style={{
+                              height: "100%",
+                              backgroundColor: "var(--tag-neutral-bg)",
+                              boxShadow: "inset 0 0 0 0.5px var(--alpha-250)",
+                            }}
+                          />
+                        ) : (
+                          <>
+                            <div
+                              className="w-full rounded-sm"
+                              style={{
+                                height: `${100 - translatedPercent}%`,
+                                backgroundColor: "var(--tag-blue-border)",
+                                boxShadow: "inset 0 0 0 0.5px var(--alpha-250)",
+                                minHeight: locale.toTranslate > 0 ? "2px" : "0",
+                              }}
+                            />
+                            {translatedPercent > 0 && (
+                              <div
+                                className="mt-0.5 w-full rounded-sm"
+                                style={{
+                                  height: `${translatedPercent}%`,
+                                  backgroundColor: "var(--tag-blue-icon)",
+                                  boxShadow:
+                                    "inset 0 0 0 0.5px var(--alpha-250)",
+                                  minHeight:
+                                    locale.translated > 0 ? "2px" : "0",
+                                }}
+                              />
+                            )}
+                          </>
+                        )}
+                      </div>
+                    </div>
+                  </Tooltip>
+                )
+              })}
+            </div>
+            {localeStatsCount < 9 && (
+              <div className="flex w-full gap-1">
+                {localeStats.map((locale) => (
+                  <div
+                    key={locale.code}
+                    className="flex flex-1 items-center justify-center"
+                  >
+                    <Text
+                      size="xsmall"
+                      weight="plus"
+                      className="text-ui-fg-subtle min-w-2 whitespace-normal break-words text-center leading-tight"
+                    >
+                      {localeStatsCount < 6 ? locale.name : locale.code}
+                    </Text>
+                  </div>
+                ))}
+              </div>
+            )}
+            {localeStatsCount > 9 && (
+              <Text
+                weight="plus"
+                size="xsmall"
+                className="text-ui-fg-subtle text-center"
+              >
+                {t("translations.completion.footer")}
+              </Text>
+            )}
+          </div>
+        </>
+      )}
+    </Container>
+  )
+}