@medusajs/dashboard 2.12.3-preview-20251217123836 → 2.12.3-snapshot-20251217081413

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@medusajs/dashboard",
-  "version": "2.12.3-preview-20251217123836",
+  "version": "2.12.3-snapshot-20251217081413",
   "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-preview-20251217123836",
-    "@medusajs/icons": "2.12.3-preview-20251217123836",
-    "@medusajs/js-sdk": "2.12.3-preview-20251217123836",
-    "@medusajs/ui": "4.0.31-preview-20251217123836",
+    "@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",
     "@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-preview-20251217123836",
-    "@medusajs/admin-vite-plugin": "2.12.3-preview-20251217123836",
-    "@medusajs/types": "2.12.3-preview-20251217123836",
-    "@medusajs/ui-preset": "2.12.3-preview-20251217123836"
+    "@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"
   },
   "packageManager": "yarn@3.2.1"
 }

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

@@ -1857,10 +1857,6 @@ 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

@@ -2538,7 +2538,7 @@
     "completion": {
       "heading": "Translated fields",
       "translated": "Translated",
-      "toTranslate": "Missing",
+      "toTranslate": "To be translated",
       "footer": "Languages"
     }
   },

package/src/i18n/translations/es.json

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

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

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

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

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

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

@@ -1,5 +1,5 @@
 import { AdminTranslationEntityStatistics, HttpTypes } from "@medusajs/types"
-import { Container, Divider, Heading, Text, Tooltip } from "@medusajs/ui"
+import { Container, Heading, Text, Tooltip } from "@medusajs/ui"
 import { useMemo, useState } from "react"
 import { useTranslation } from "react-i18next"
 
@@ -95,15 +95,14 @@ export const TranslationsCompletionSection = ({
                 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)",
+                  backgroundColor: "var(--bg-interactive)",
                 }}
               />
               <div
                 className="h-full flex-1 rounded-sm"
                 style={{
-                  backgroundColor: "var(--tag-blue-border)",
-                  boxShadow: "inset 0 0 0 0.5px var(--alpha-250)",
+                  backgroundColor: "var(--bg-interactive)",
+                  opacity: 0.3,
                 }}
               />
             </>
@@ -111,8 +110,8 @@ export const TranslationsCompletionSection = ({
             <div
               className="h-full w-full rounded-sm"
               style={{
-                backgroundColor: "var(--tag-blue-border)",
-                boxShadow: "inset 0 0 0 0.5px var(--alpha-250)",
+                backgroundColor: "var(--bg-interactive)",
+                opacity: 0.3,
               }}
             />
           )}
@@ -129,156 +128,116 @@ export const TranslationsCompletionSection = ({
       </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>
+        <div className="border-ui-border-strong flex flex-col gap-y-3 border-t border-dashed 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 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-base"
+                            className="text-ui-fg-subtle"
                           >
-                            {locale.toTranslate}
+                            {t("translations.completion.translated")}
                           </Text>
                         </div>
+                        <Text size="small" weight="plus">
+                          {locale.translated}
+                        </Text>
                       </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 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>
-                  </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"
+                    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)}
                   >
-                    <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
+                      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>
-                ))}
-              </div>
-            )}
-            {localeStatsCount > 9 && (
-              <Text
-                weight="plus"
-                size="xsmall"
-                className="text-ui-fg-subtle text-center"
-              >
-                {t("translations.completion.footer")}
-              </Text>
-            )}
+                </Tooltip>
+              )
+            })}
           </div>
-        </>
+          {localeStatsCount < 9 && (
+            <div className="flex w-full gap-1">
+              {localeStats.map((locale) => (
+                <Text
+                  key={locale.code}
+                  size="xsmall"
+                  weight="plus"
+                  className="text-ui-fg-subtle min-w-2 flex-1 whitespace-normal break-words text-center leading-tight"
+                >
+                  {localeStatsCount < 6 ? locale.name : locale.code}
+                </Text>
+              ))}
+            </div>
+          )}
+          {localeStatsCount > 9 && (
+            <Text
+              weight="plus"
+              size="xsmall"
+              className="text-ui-fg-subtle text-center"
+            >
+              {t("translations.completion.footer")}
+            </Text>
+          )}
+        </div>
       )}
     </Container>
   )

package/dist/add-locales-GGNZCABB.mjs

@@ -1,81 +0,0 @@
-import {
-  AddLocalesForm
-} from "./chunk-IKTGFXWR.mjs";
-import "./chunk-XNIVMZHA.mjs";
-import "./chunk-MSDRGCRR.mjs";
-import "./chunk-P3UUX2T6.mjs";
-import "./chunk-LQTHYS2Z.mjs";
-import "./chunk-DTZXEQXZ.mjs";
-import "./chunk-HQKGZADC.mjs";
-import "./chunk-EMIHDNB7.mjs";
-import "./chunk-ZQJPHZKI.mjs";
-import "./chunk-C76H5USB.mjs";
-import "./chunk-DFFLVEZ5.mjs";
-import "./chunk-IUCDCPJU.mjs";
-import "./chunk-6HTZNHPT.mjs";
-import {
-  RouteFocusModal
-} from "./chunk-D6UW7URG.mjs";
-import {
-  useFeatureFlag
-} from "./chunk-G4BWCU5P.mjs";
-import "./chunk-LPEUYMRK.mjs";
-import "./chunk-OC7BQLYI.mjs";
-import "./chunk-S4DMV3ZT.mjs";
-import "./chunk-535OVBXR.mjs";
-import "./chunk-OBQI23QM.mjs";
-import "./chunk-GLBHPDR4.mjs";
-import "./chunk-I4OBEAOJ.mjs";
-import "./chunk-HI6URQ7H.mjs";
-import "./chunk-6CLQKVAU.mjs";
-import "./chunk-KI7TOXBR.mjs";
-import "./chunk-UJ2TMPV4.mjs";
-import "./chunk-23GTCEOV.mjs";
-import "./chunk-WAXMT4IY.mjs";
-import "./chunk-DYDGGABK.mjs";
-import "./chunk-LGNTHZ5Y.mjs";
-import "./chunk-CN7JXSGW.mjs";
-import "./chunk-5BQQRHQS.mjs";
-import "./chunk-HTCYX4VD.mjs";
-import "./chunk-5AFMB7XQ.mjs";
-import "./chunk-UWY5ZV66.mjs";
-import "./chunk-A63RZVX6.mjs";
-import "./chunk-HBXV7ENS.mjs";
-import "./chunk-CDORR33H.mjs";
-import "./chunk-4JQR6QNW.mjs";
-import "./chunk-FYWHE3W5.mjs";
-import "./chunk-OSHH5GAS.mjs";
-import "./chunk-2XTBDCGE.mjs";
-import "./chunk-3BF5SC66.mjs";
-import {
-  useStore
-} from "./chunk-VCSSQVPD.mjs";
-import "./chunk-HP2JH45P.mjs";
-import "./chunk-SQDIZZDW.mjs";
-import "./chunk-Z6BFNHEO.mjs";
-import "./chunk-HGRIOEAR.mjs";
-import "./chunk-FXYH54JP.mjs";
-import "./chunk-774WSTCC.mjs";
-import "./chunk-NFEK63OE.mjs";
-import "./chunk-QZ7TP4HQ.mjs";
-
-// src/routes/translations/add-locales/add-locales.tsx
-import { useNavigate } from "react-router-dom";
-import { jsx } from "react/jsx-runtime";
-var 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 /* @__PURE__ */ jsx(RouteFocusModal, { children: ready && /* @__PURE__ */ jsx(AddLocalesForm, { store }) });
-};
-export {
-  TranslationsAddLocales as Component
-};

package/dist/store-add-locales-GWCGIXHU.mjs

@@ -1,81 +0,0 @@
-import {
-  AddLocalesForm
-} from "./chunk-IKTGFXWR.mjs";
-import "./chunk-XNIVMZHA.mjs";
-import "./chunk-MSDRGCRR.mjs";
-import "./chunk-P3UUX2T6.mjs";
-import "./chunk-LQTHYS2Z.mjs";
-import "./chunk-DTZXEQXZ.mjs";
-import "./chunk-HQKGZADC.mjs";
-import "./chunk-EMIHDNB7.mjs";
-import "./chunk-ZQJPHZKI.mjs";
-import "./chunk-C76H5USB.mjs";
-import "./chunk-DFFLVEZ5.mjs";
-import "./chunk-IUCDCPJU.mjs";
-import "./chunk-6HTZNHPT.mjs";
-import {
-  RouteFocusModal
-} from "./chunk-D6UW7URG.mjs";
-import {
-  useFeatureFlag
-} from "./chunk-G4BWCU5P.mjs";
-import "./chunk-LPEUYMRK.mjs";
-import "./chunk-OC7BQLYI.mjs";
-import "./chunk-S4DMV3ZT.mjs";
-import "./chunk-535OVBXR.mjs";
-import "./chunk-OBQI23QM.mjs";
-import "./chunk-GLBHPDR4.mjs";
-import "./chunk-I4OBEAOJ.mjs";
-import "./chunk-HI6URQ7H.mjs";
-import "./chunk-6CLQKVAU.mjs";
-import "./chunk-KI7TOXBR.mjs";
-import "./chunk-UJ2TMPV4.mjs";
-import "./chunk-23GTCEOV.mjs";
-import "./chunk-WAXMT4IY.mjs";
-import "./chunk-DYDGGABK.mjs";
-import "./chunk-LGNTHZ5Y.mjs";
-import "./chunk-CN7JXSGW.mjs";
-import "./chunk-5BQQRHQS.mjs";
-import "./chunk-HTCYX4VD.mjs";
-import "./chunk-5AFMB7XQ.mjs";
-import "./chunk-UWY5ZV66.mjs";
-import "./chunk-A63RZVX6.mjs";
-import "./chunk-HBXV7ENS.mjs";
-import "./chunk-CDORR33H.mjs";
-import "./chunk-4JQR6QNW.mjs";
-import "./chunk-FYWHE3W5.mjs";
-import "./chunk-OSHH5GAS.mjs";
-import "./chunk-2XTBDCGE.mjs";
-import "./chunk-3BF5SC66.mjs";
-import {
-  useStore
-} from "./chunk-VCSSQVPD.mjs";
-import "./chunk-HP2JH45P.mjs";
-import "./chunk-SQDIZZDW.mjs";
-import "./chunk-Z6BFNHEO.mjs";
-import "./chunk-HGRIOEAR.mjs";
-import "./chunk-FXYH54JP.mjs";
-import "./chunk-774WSTCC.mjs";
-import "./chunk-NFEK63OE.mjs";
-import "./chunk-QZ7TP4HQ.mjs";
-
-// src/routes/store/store-add-locales/store-add-locales.tsx
-import { useNavigate } from "react-router-dom";
-import { jsx } from "react/jsx-runtime";
-var StoreAddLocales = () => {
-  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 /* @__PURE__ */ jsx(RouteFocusModal, { children: ready && /* @__PURE__ */ jsx(AddLocalesForm, { store }) });
-};
-export {
-  StoreAddLocales as Component
-};

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

@@ -1,29 +0,0 @@
-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

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