@medusajs/dashboard 2.12.2-snapshot-20251209162938 → 2.12.2-snapshot-20251209184934

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/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,131 @@
+import { Button, Container, Heading, Text } from "@medusajs/ui"
+import { SingleColumnPage } from "../../../components/layout/pages"
+import { useTranslation } from "react-i18next"
+import { Link, useNavigate } from "react-router-dom"
+import { Buildings, Pencil } from "@medusajs/icons"
+import { IconAvatar } from "../../../components/common/icon-avatar/icon-avatar"
+import { ActionMenu } from "../../../components/common/action-menu"
+import { LinkButton } from "../../../components/common/link-button/link-button"
+
+type TranslatableEntity = {
+  icon: React.ReactNode
+  label: string
+  reference: string
+}
+
+const TRANSLATABLE_ENTITIES: TranslatableEntity[] = [
+  {
+    icon: <Buildings />,
+    label: "Product",
+    reference: "product",
+  },
+  {
+    icon: <Buildings />,
+    label: "Product Variants",
+    reference: "product_variant",
+  },
+  {
+    icon: <Buildings />,
+    label: "Product Categories",
+    reference: "product_category",
+  },
+  {
+    icon: <Buildings />,
+    label: "Product Collections",
+    reference: "product_collection",
+  },
+  {
+    icon: <Buildings />,
+    label: "Product Types",
+    reference: "product_type",
+  },
+  {
+    icon: <Buildings />,
+    label: "Product Tags",
+    reference: "product_tag",
+  },
+  {
+    icon: <Buildings />,
+    label: "Product Options",
+    reference: "product_option",
+  },
+  {
+    icon: <Buildings />,
+    label: "Product Option Values",
+    reference: "product_option_value",
+  },
+]
+
+export const TranslationList = () => {
+  const { t } = useTranslation()
+  const navigate = useNavigate()
+
+  const handleManageLocales = () => {
+    navigate("/settings/store/locales")
+  }
+
+  return (
+    <SingleColumnPage
+      widgets={{
+        before: [],
+        after: [],
+      }}
+    >
+      <Container className="p-0">
+        <div className="flex items-center justify-between px-6 py-4">
+          <div>
+            <Heading>Manage {t("translations.domain")}</Heading>
+            <Text className="text-ui-fg-subtle" size="small">
+              {t("translations.subtitle")}
+            </Text>
+          </div>
+          <Button
+            variant="secondary"
+            size="small"
+            onClick={handleManageLocales}
+          >
+            {t("translations.actions.manageLocales")}
+          </Button>
+        </div>
+      </Container>
+      {TRANSLATABLE_ENTITIES.map((entity) => (
+        <Container key={entity.label} className="p-0">
+          <div className="flex items-center justify-between px-6 py-3">
+            <Link
+              to={`/settings/translations/edit?reference=${entity.reference}`}
+              className="transition-fg hover:bg-ui-bg-base-hover active:bg-ui-bg-base-pressed focus-visible:shadow-borders-interactive-with-active -mx-2 flex flex-1 items-center gap-x-2 rounded-md px-2 py-1.5 outline-none"
+            >
+              <IconAvatar variant="squared">{entity.icon}</IconAvatar>
+              <Text size="small">{entity.label}</Text>
+            </Link>
+            <div className="flex items-center gap-x-2">
+              <ActionMenu
+                groups={[
+                  {
+                    actions: [
+                      {
+                        icon: <Pencil />,
+                        label: t("actions.edit"),
+                        onClick: () => {
+                          navigate(
+                            `/settings/translations/edit?reference=${entity.label.toLowerCase()}`
+                          )
+                        },
+                      },
+                    ],
+                  },
+                ]}
+              ></ActionMenu>
+              <Text>|</Text>
+              <LinkButton
+                to={`/settings/translations/${entity.label.toLowerCase()}`}
+              >
+                {t("actions.viewDetails")}
+              </LinkButton>
+            </div>
+          </div>
+        </Container>
+      ))}
+    </SingleColumnPage>
+  )
+}

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

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