@medusajs/dashboard 2.12.3-snapshot-20251217081413 → 2.12.3

package/dist/{translation-list-KSM4QA3K.mjs → translation-list-FK7XYLHX.mjs}

@@ -51,9 +51,16 @@ import { useTranslation as useTranslation4 } from "react-i18next";
 
 // src/routes/translations/translation-list/components/active-locales-section/active-locales-section.tsx
 import { PencilSquare, Language } from "@medusajs/icons";
-import { Container, Heading, IconButton, InlineTip, Text } from "@medusajs/ui";
+import {
+  Container,
+  Heading,
+  IconButton,
+  InlineTip,
+  Text,
+  Tooltip
+} from "@medusajs/ui";
 import { useTranslation } from "react-i18next";
-import { useCallback } from "react";
+import { useCallback, useState } from "react";
 import { useNavigate } from "react-router-dom";
 import { jsx, jsxs } from "react/jsx-runtime";
 var ActiveLocalesSection = ({
@@ -61,8 +68,9 @@ var ActiveLocalesSection = ({
 }) => {
   const { t } = useTranslation();
   const navigate = useNavigate();
+  const [isHovered, setIsHovered] = useState(false);
   const handleManageLocales = useCallback(() => {
-    navigate("/settings/store/locales");
+    navigate("/settings/translations/add-locales");
   }, [navigate]);
   const renderLocales = useCallback(() => {
     const maxLocalesToDetail = 2;
@@ -77,13 +85,28 @@ var ActiveLocalesSection = ({
       /* @__PURE__ */ jsx(Heading, { level: "h2", children: t("translations.activeLocales.heading") }),
       /* @__PURE__ */ jsx(IconButton, { variant: "transparent", onClick: handleManageLocales, children: /* @__PURE__ */ jsx(PencilSquare, {}) })
     ] }),
-    /* @__PURE__ */ jsx("div", { className: "px-1 pb-1", children: hasLocales ? /* @__PURE__ */ jsxs(Container, { className: "bg-ui-bg-component flex items-center gap-x-4 px-6 py-2", children: [
-      /* @__PURE__ */ jsx(IconAvatar, { children: /* @__PURE__ */ jsx(Language, {}) }),
-      /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
-        /* @__PURE__ */ jsx(Text, { size: "small", weight: "plus", children: t("translations.activeLocales.subtitle") }),
-        /* @__PURE__ */ jsx(Text, { className: "text-ui-fg-subtle", size: "small", children: renderLocales() })
-      ] })
-    ] }) : /* @__PURE__ */ jsx(InlineTip, { label: "Tip", children: t("translations.activeLocales.noLocalesTip") }) })
+    /* @__PURE__ */ jsx("div", { className: "px-1 pb-1", children: hasLocales ? /* @__PURE__ */ jsx(
+      Tooltip,
+      {
+        open: isHovered,
+        content: /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-y-1 p-1", children: locales.map((locale) => /* @__PURE__ */ jsx(Text, { size: "small", weight: "plus", children: locale.name }, locale.code)) }),
+        children: /* @__PURE__ */ jsxs(
+          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),
+            children: [
+              /* @__PURE__ */ jsx(IconAvatar, { className: "border-ui-border-base border", children: /* @__PURE__ */ jsx(Language, {}) }),
+              /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
+                /* @__PURE__ */ jsx(Text, { size: "small", weight: "plus", children: t("translations.activeLocales.subtitle") }),
+                /* @__PURE__ */ jsx(Text, { className: "text-ui-fg-subtle", size: "small", children: renderLocales() })
+              ] })
+            ]
+          }
+        )
+      }
+    ) : /* @__PURE__ */ jsx(InlineTip, { label: "Tip", children: t("translations.activeLocales.noLocalesTip") }) })
   ] });
 };
 
@@ -111,7 +134,15 @@ var TranslationListSection = ({
           Link,
           {
             to: `/settings/translations/edit?reference=${entity.reference}`,
-            children: /* @__PURE__ */ jsx2(Button, { variant: "secondary", size: "small", disabled: !hasLocales, children: "Edit" })
+            children: /* @__PURE__ */ jsx2(
+              Button,
+              {
+                variant: "secondary",
+                size: "small",
+                disabled: !hasLocales || !entity.totalCount,
+                children: "Edit"
+              }
+            )
           }
         )
       ]
@@ -121,8 +152,8 @@ var TranslationListSection = ({
 };
 
 // src/routes/translations/translation-list/components/translations-completion-section/translations-completion-section.tsx
-import { Container as Container3, Heading as Heading2, Text as Text3, Tooltip } from "@medusajs/ui";
-import { useMemo, useState } from "react";
+import { Container as Container3, Divider, Heading as Heading2, Text as Text3, Tooltip as Tooltip2 } from "@medusajs/ui";
+import { useMemo, useState as useState2 } from "react";
 import { useTranslation as useTranslation3 } from "react-i18next";
 import { Fragment, jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
 var TranslationsCompletionSection = ({
@@ -130,7 +161,7 @@ var TranslationsCompletionSection = ({
   locales
 }) => {
   const { t } = useTranslation3();
-  const [hoveredLocale, setHoveredLocale] = useState(null);
+  const [hoveredLocale, setHoveredLocale] = useState2(null);
   const { translatedCount, totalCount } = Object.values(statistics).reduce(
     (acc, curr) => ({
       translatedCount: acc.translatedCount + curr.translated,
@@ -193,7 +224,8 @@ var TranslationsCompletionSection = ({
             className: "mr-0.5 h-full rounded-sm transition-all",
             style: {
               width: `${percentage}%`,
-              backgroundColor: "var(--bg-interactive)"
+              backgroundColor: "var(--tag-blue-icon)",
+              boxShadow: "inset 0 0 0 0.5px var(--alpha-250)"
             }
           }
         ),
@@ -202,8 +234,8 @@ var TranslationsCompletionSection = ({
           {
             className: "h-full flex-1 rounded-sm",
             style: {
-              backgroundColor: "var(--bg-interactive)",
-              opacity: 0.3
+              backgroundColor: "var(--tag-blue-border)",
+              boxShadow: "inset 0 0 0 0.5px var(--alpha-250)"
             }
           }
         )
@@ -212,8 +244,8 @@ var TranslationsCompletionSection = ({
         {
           className: "h-full w-full rounded-sm",
           style: {
-            backgroundColor: "var(--bg-interactive)",
-            opacity: 0.3
+            backgroundColor: "var(--tag-blue-border)",
+            boxShadow: "inset 0 0 0 0.5px var(--alpha-250)"
           }
         }
       ) }),
@@ -229,117 +261,158 @@ var TranslationsCompletionSection = ({
         ] })
       ] })
     ] }),
-    localeStats.length > 0 && /* @__PURE__ */ jsxs3("div", { className: "border-ui-border-strong flex flex-col gap-y-3 border-t border-dashed px-6 pb-6 pt-4", children: [
-      /* @__PURE__ */ jsx3("div", { className: "flex h-32 w-full items-end gap-1", children: localeStats.map((locale) => {
-        const heightPercent = locale.total / maxTotal * 100;
-        const translatedPercent = locale.total > 0 ? locale.translated / locale.total * 100 : 0;
-        return /* @__PURE__ */ jsx3(
-          Tooltip,
-          {
-            open: hoveredLocale === locale.code,
-            content: /* @__PURE__ */ jsxs3("div", { className: "flex flex-col gap-y-1 p-1", children: [
-              /* @__PURE__ */ jsx3(Text3, { size: "small", weight: "plus", children: locale.name }),
-              /* @__PURE__ */ jsxs3("div", { className: "flex items-center justify-between", children: [
-                /* @__PURE__ */ jsxs3("div", { className: "flex items-center gap-x-2", children: [
+    localeStats.length > 0 && /* @__PURE__ */ jsxs3(Fragment, { children: [
+      /* @__PURE__ */ jsx3(Divider, { variant: "dashed" }),
+      /* @__PURE__ */ jsxs3("div", { className: "flex flex-col gap-y-3 px-6 pb-6 pt-4", children: [
+        /* @__PURE__ */ jsx3("div", { className: "flex h-32 w-full items-end gap-1", children: localeStats.map((locale) => {
+          const heightPercent = locale.total / maxTotal * 100;
+          const translatedPercent = locale.total > 0 ? locale.translated / locale.total * 100 : 0;
+          return /* @__PURE__ */ jsx3(
+            Tooltip2,
+            {
+              open: hoveredLocale === locale.code,
+              content: /* @__PURE__ */ jsxs3("div", { className: "flex min-w-[150px] flex-col gap-y-1 p-1", children: [
+                /* @__PURE__ */ jsx3(Text3, { size: "small", weight: "plus", children: locale.name }),
+                /* @__PURE__ */ jsxs3("div", { className: "flex items-center justify-between", children: [
+                  /* @__PURE__ */ jsxs3("div", { className: "flex items-center gap-x-2", children: [
+                    /* @__PURE__ */ jsx3(
+                      "div",
+                      {
+                        className: "h-2 w-2 rounded-full",
+                        style: {
+                          backgroundColor: "var(--tag-blue-icon)",
+                          boxShadow: "inset 0 0 0 0.5px var(--alpha-250)"
+                        }
+                      }
+                    ),
+                    /* @__PURE__ */ jsx3(
+                      Text3,
+                      {
+                        size: "small",
+                        weight: "plus",
+                        className: "text-ui-fg-base",
+                        children: t("translations.completion.translated")
+                      }
+                    )
+                  ] }),
                   /* @__PURE__ */ jsx3(
-                    "div",
+                    Text3,
                     {
-                      className: "h-2 w-2 rounded-full",
-                      style: { backgroundColor: "var(--bg-interactive)" }
+                      size: "small",
+                      weight: "plus",
+                      className: "text-ui-fg-base",
+                      children: locale.translated
                     }
-                  ),
+                  )
+                ] }),
+                /* @__PURE__ */ jsxs3("div", { className: "flex items-center justify-between", children: [
+                  /* @__PURE__ */ jsxs3("div", { className: "flex items-center gap-x-2", children: [
+                    /* @__PURE__ */ jsx3(
+                      "div",
+                      {
+                        className: "h-2 w-2 rounded-full",
+                        style: {
+                          backgroundColor: "var(--tag-blue-border)",
+                          boxShadow: "inset 0 0 0 0.5px var(--alpha-250)"
+                        }
+                      }
+                    ),
+                    /* @__PURE__ */ jsx3(
+                      Text3,
+                      {
+                        size: "small",
+                        weight: "plus",
+                        className: "text-ui-fg-base",
+                        children: t("translations.completion.toTranslate")
+                      }
+                    )
+                  ] }),
                   /* @__PURE__ */ jsx3(
                     Text3,
                     {
                       size: "small",
                       weight: "plus",
-                      className: "text-ui-fg-subtle",
-                      children: t("translations.completion.translated")
+                      className: "text-ui-fg-base",
+                      children: locale.toTranslate
                     }
                   )
-                ] }),
-                /* @__PURE__ */ jsx3(Text3, { size: "small", weight: "plus", children: locale.translated })
+                ] })
               ] }),
-              /* @__PURE__ */ jsxs3("div", { className: "flex items-center gap-x-2", children: [
-                /* @__PURE__ */ jsx3(
-                  "div",
-                  {
-                    className: "h-2 w-2 rounded-full",
-                    style: {
-                      backgroundColor: "var(--bg-interactive)",
-                      opacity: 0.3
-                    }
-                  }
-                ),
-                /* @__PURE__ */ jsx3(
-                  Text3,
-                  {
-                    size: "small",
-                    weight: "plus",
-                    className: "text-ui-fg-subtle",
-                    children: t("translations.completion.toTranslate")
-                  }
-                ),
-                /* @__PURE__ */ jsx3(Text3, { size: "small", weight: "plus", children: locale.toTranslate })
-              ] })
-            ] }),
-            children: /* @__PURE__ */ jsxs3(
-              "div",
-              {
-                className: "flex min-w-2 flex-1 flex-col justify-end overflow-hidden rounded-t-sm transition-opacity",
-                style: { height: `${heightPercent}%` },
-                onMouseEnter: () => setHoveredLocale(locale.code),
-                onMouseLeave: () => setHoveredLocale(null),
-                children: [
-                  /* @__PURE__ */ jsx3(
+              children: /* @__PURE__ */ jsx3("div", { className: "flex h-full flex-1 items-end justify-center", children: /* @__PURE__ */ jsx3(
+                "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),
+                  children: translatedPercent === 0 ? /* @__PURE__ */ jsx3(
                     "div",
                     {
-                      className: "w-full rounded-t-sm",
+                      className: "w-full rounded-sm",
                       style: {
-                        height: `${100 - translatedPercent}%`,
-                        backgroundColor: "var(--bg-interactive)",
-                        opacity: 0.3,
-                        minHeight: locale.toTranslate > 0 ? "2px" : "0"
+                        height: "100%",
+                        backgroundColor: "var(--tag-neutral-bg)",
+                        boxShadow: "inset 0 0 0 0.5px var(--alpha-250)"
                       }
                     }
-                  ),
-                  translatedPercent > 0 && /* @__PURE__ */ jsx3(
-                    "div",
-                    {
-                      className: "mt-0.5 w-full rounded-sm",
-                      style: {
-                        height: `${translatedPercent}%`,
-                        backgroundColor: "var(--bg-interactive)",
-                        minHeight: locale.translated > 0 ? "2px" : "0"
+                  ) : /* @__PURE__ */ jsxs3(Fragment, { children: [
+                    /* @__PURE__ */ jsx3(
+                      "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 && /* @__PURE__ */ jsx3(
+                      "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"
+                        }
+                      }
+                    )
+                  ] })
+                }
+              ) })
+            },
+            locale.code
+          );
+        }) }),
+        localeStatsCount < 9 && /* @__PURE__ */ jsx3("div", { className: "flex w-full gap-1", children: localeStats.map((locale) => /* @__PURE__ */ jsx3(
+          "div",
+          {
+            className: "flex flex-1 items-center justify-center",
+            children: /* @__PURE__ */ jsx3(
+              Text3,
+              {
+                size: "xsmall",
+                weight: "plus",
+                className: "text-ui-fg-subtle min-w-2 whitespace-normal break-words text-center leading-tight",
+                children: localeStatsCount < 6 ? locale.name : locale.code
               }
             )
           },
           locale.code
-        );
-      }) }),
-      localeStatsCount < 9 && /* @__PURE__ */ jsx3("div", { className: "flex w-full gap-1", children: localeStats.map((locale) => /* @__PURE__ */ jsx3(
-        Text3,
-        {
-          size: "xsmall",
-          weight: "plus",
-          className: "text-ui-fg-subtle min-w-2 flex-1 whitespace-normal break-words text-center leading-tight",
-          children: localeStatsCount < 6 ? locale.name : locale.code
-        },
-        locale.code
-      )) }),
-      localeStatsCount > 9 && /* @__PURE__ */ jsx3(
-        Text3,
-        {
-          weight: "plus",
-          size: "xsmall",
-          className: "text-ui-fg-subtle text-center",
-          children: t("translations.completion.footer")
-        }
-      )
+        )) }),
+        localeStatsCount > 9 && /* @__PURE__ */ jsx3(
+          Text3,
+          {
+            weight: "plus",
+            size: "xsmall",
+            className: "text-ui-fg-subtle text-center",
+            children: t("translations.completion.footer")
+          }
+        )
+      ] })
     ] })
   ] });
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@medusajs/dashboard",
-  "version": "2.12.3-snapshot-20251217081413",
+  "version": "2.12.3",
   "scripts": {
     "generate:static": "node ./scripts/generate-currencies.js && prettier --write ./src/lib/currencies.ts",
     "dev": "../../../node_modules/.bin/vite",
@@ -46,10 +46,10 @@
     "@dnd-kit/utilities": "^3.2.2",
     "@hookform/error-message": "^2.0.1",
     "@hookform/resolvers": "3.4.2",
-    "@medusajs/admin-shared": "2.12.3-snapshot-20251217081413",
-    "@medusajs/icons": "2.12.3-snapshot-20251217081413",
-    "@medusajs/js-sdk": "2.12.3-snapshot-20251217081413",
-    "@medusajs/ui": "4.0.31-snapshot-20251217081413",
+    "@medusajs/admin-shared": "2.12.3",
+    "@medusajs/icons": "2.12.3",
+    "@medusajs/js-sdk": "2.12.3",
+    "@medusajs/ui": "4.0.31",
     "@radix-ui/react-dialog": "1.1.4",
     "@radix-ui/react-dismissable-layer": "1.1.4",
     "@tanstack/react-query": "5.64.2",
@@ -80,10 +80,10 @@
     "zod": "3.25.76"
   },
   "devDependencies": {
-    "@medusajs/admin-shared": "2.12.3-snapshot-20251217081413",
-    "@medusajs/admin-vite-plugin": "2.12.3-snapshot-20251217081413",
-    "@medusajs/types": "2.12.3-snapshot-20251217081413",
-    "@medusajs/ui-preset": "2.12.3-snapshot-20251217081413"
+    "@medusajs/admin-shared": "2.12.3",
+    "@medusajs/admin-vite-plugin": "2.12.3",
+    "@medusajs/types": "2.12.3",
+    "@medusajs/ui-preset": "2.12.3"
   },
   "packageManager": "yarn@3.2.1"
 }

package/src/dashboard-app/routes/get-route.map.tsx

@@ -1857,6 +1857,10 @@ export function getRouteMap({
                   lazy: () =>
                     import("../../routes/translations/translations-edit"),
                 },
+                {
+                  path: "add-locales",
+                  lazy: () => import("../../routes/translations/add-locales"),
+                },
               ],
             },
             ...(settingsRoutes?.[0]?.children || []),

package/src/i18n/translations/en.json

@@ -2514,7 +2514,6 @@
       "manage": "Manage translations",
       "manageLocales": "Manage locales"
     },
-    "title": "Translation domains",
     "subtitle": "Manage translations of your data in Medusa",
     "list": {
       "metrics": "{{translated}} of {{total}} fields translated"
@@ -2538,7 +2537,7 @@
     "completion": {
       "heading": "Translated fields",
       "translated": "Translated",
-      "toTranslate": "To be translated",
+      "toTranslate": "Missing",
       "footer": "Languages"
     }
   },

package/src/i18n/translations/es.json

@@ -2477,7 +2477,7 @@
     "completion": {
       "heading": "Textos traducidos",
       "translated": "Traducidos",
-      "toTranslate": "Por traducir",
+      "toTranslate": "Faltantes",
       "footer": "Idiomas"
     }
   },

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

@@ -1,9 +1,16 @@
 import { PencilSquare, Language } from "@medusajs/icons"
-import { Container, Heading, IconButton, InlineTip, Text } from "@medusajs/ui"
+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 } from "react"
+import { useCallback, useState } from "react"
 import { useNavigate } from "react-router-dom"
 
 type ActiveLocalesSectionProps = {
@@ -15,9 +22,10 @@ export const ActiveLocalesSection = ({
 }: ActiveLocalesSectionProps) => {
   const { t } = useTranslation()
   const navigate = useNavigate()
+  const [isHovered, setIsHovered] = useState(false)
 
   const handleManageLocales = useCallback(() => {
-    navigate("/settings/store/locales")
+    navigate("/settings/translations/add-locales")
   }, [navigate])
 
   const renderLocales = useCallback(() => {
@@ -44,19 +52,36 @@ export const ActiveLocalesSection = ({
       </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>
+          <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")}

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

@@ -33,7 +33,11 @@ export const TranslationListSection = ({
           <Link
             to={`/settings/translations/edit?reference=${entity.reference}`}
           >
-            <Button variant="secondary" size="small" disabled={!hasLocales}>
+            <Button
+              variant="secondary"
+              size="small"
+              disabled={!hasLocales || !entity.totalCount}
+            >
               Edit
             </Button>
           </Link>