diff --git a/.changeset/many-balloons-rest.md b/.changeset/many-balloons-rest.md new file mode 100644 index 0000000000..6838e986aa --- /dev/null +++ b/.changeset/many-balloons-rest.md @@ -0,0 +1,6 @@ +--- +"@medusajs/dashboard": patch +"@medusajs/ui": patch +--- + +feat(translation): Improve translation alert in empty languages state diff --git a/packages/admin/dashboard/src/i18n/translations/$schema.json b/packages/admin/dashboard/src/i18n/translations/$schema.json index 982d97a20f..64f353041e 100644 --- a/packages/admin/dashboard/src/i18n/translations/$schema.json +++ b/packages/admin/dashboard/src/i18n/translations/$schema.json @@ -9444,9 +9444,17 @@ }, "noLocalesTip": { "type": "string" + }, + "noLocalesTipConfigureAction": { + "type": "string" } }, - "required": ["heading", "subtitle", "noLocalesTip"] + "required": [ + "heading", + "subtitle", + "noLocalesTip", + "noLocalesTipConfigureAction" + ] }, "completion": { "type": "object", diff --git a/packages/admin/dashboard/src/i18n/translations/en.json b/packages/admin/dashboard/src/i18n/translations/en.json index 2914d32195..5bcaef684b 100644 --- a/packages/admin/dashboard/src/i18n/translations/en.json +++ b/packages/admin/dashboard/src/i18n/translations/en.json @@ -2540,7 +2540,8 @@ "activeLocales": { "heading": "Languages", "subtitle": "Activated translations", - "noLocalesTip": "Configure at least one locale to start translating your data" + "noLocalesTip": "Configure at least one language to start translating your data", + "noLocalesTipConfigureAction": "Configure" }, "completion": { "heading": "Translated fields", diff --git a/packages/admin/dashboard/src/i18n/translations/es.json b/packages/admin/dashboard/src/i18n/translations/es.json index 0921d76e74..75e90bc2a5 100644 --- a/packages/admin/dashboard/src/i18n/translations/es.json +++ b/packages/admin/dashboard/src/i18n/translations/es.json @@ -2480,7 +2480,8 @@ "activeLocales": { "heading": "Idiomas", "subtitle": "Traducciones activas", - "noLocalesTip": "Configura al menos un idioma para empezar a traducir tu información" + "noLocalesTip": "Configura al menos un lenguaje para empezar a traducir tu información", + "noLocalesTipConfigureAction": "Configurar" }, "completion": { "heading": "Textos traducidos", diff --git a/packages/admin/dashboard/src/routes/translations/translation-list/components/active-locales-section/active-locales-section.tsx b/packages/admin/dashboard/src/routes/translations/translation-list/components/active-locales-section/active-locales-section.tsx index 2adf044e4e..10eafd7b5f 100644 --- a/packages/admin/dashboard/src/routes/translations/translation-list/components/active-locales-section/active-locales-section.tsx +++ b/packages/admin/dashboard/src/routes/translations/translation-list/components/active-locales-section/active-locales-section.tsx @@ -1,17 +1,10 @@ -import { PencilSquare, Language } from "@medusajs/icons" -import { - Container, - Heading, - IconButton, - InlineTip, - Text, - Tooltip, -} from "@medusajs/ui" +import { Language } from "@medusajs/icons" +import { HttpTypes } from "@medusajs/types" +import { Container, Heading, Text, Tooltip } from "@medusajs/ui" +import { useCallback, useState } from "react" 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" +import { LinkButton } from "../../../../../components/common/link-button" type ActiveLocalesSectionProps = { locales: HttpTypes.AdminLocale[] @@ -21,13 +14,8 @@ 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) { @@ -46,18 +34,26 @@ export const ActiveLocalesSection = ({ {t("translations.activeLocales.heading")} - - - + + {t("translations.activeLocales.noLocalesTipConfigureAction")} + - - {hasLocales ? ( + {hasLocales && ( + {locales.map((locale) => ( - + {locale.name} ))} @@ -82,12 +78,8 @@ export const ActiveLocalesSection = ({ - ) : ( - - {t("translations.activeLocales.noLocalesTip")} - - )} - + + )} ) } diff --git a/packages/admin/dashboard/src/routes/translations/translation-list/translation-list.tsx b/packages/admin/dashboard/src/routes/translations/translation-list/translation-list.tsx index 25f4df9edf..f6fee3c46f 100644 --- a/packages/admin/dashboard/src/routes/translations/translation-list/translation-list.tsx +++ b/packages/admin/dashboard/src/routes/translations/translation-list/translation-list.tsx @@ -1,6 +1,9 @@ -import { Container, Heading, Text } from "@medusajs/ui" -import { TwoColumnPage } from "../../../components/layout/pages" +import { Alert, Button, Container, Heading, Text } from "@medusajs/ui" +import { useCallback, useMemo } from "react" import { useTranslation } from "react-i18next" +import { useNavigate } from "react-router-dom" +import { TwoColumnPageSkeleton } from "../../../components/common/skeleton" +import { TwoColumnPage } from "../../../components/layout/pages" import { useStore, useTranslationSettings, @@ -9,8 +12,6 @@ import { 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 @@ -22,6 +23,7 @@ export type TranslatableEntity = { export const TranslationList = () => { const { t } = useTranslation() + const navigate = useNavigate() const { store, isPending, isError, error } = useStore() const { @@ -88,6 +90,10 @@ export const TranslationList = () => { ) }, [translatable_fields, statistics]) + const handleManageLocales = useCallback(() => { + navigate("/settings/translations/add-locales") + }, [navigate]) + const isReady = !!store && !isPending && @@ -115,6 +121,25 @@ export const TranslationList = () => { {t("translations.subtitle")} + + {!hasLocales && ( + + + {t("translations.activeLocales.noLocalesTip")}. + + {t("translations.activeLocales.noLocalesTipConfigureAction")} + + + + )} + ( ( "text-ui-tag-neutral-icon": variant === "info", })} /> - {children} + {children} {dismissible && (
{t("translations.activeLocales.noLocalesTip")}.