@medusajs/dashboard 3.0.0-snapshot-20251212142124 → 3.0.0-snapshot-20251214110905

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

@@ -0,0 +1,128 @@
+import { Container, Heading, Text } from "@medusajs/ui"
+import { TwoColumnPage } from "../../../components/layout/pages"
+import { useTranslation } from "react-i18next"
+import { Buildings } from "@medusajs/icons"
+import { useStore } from "../../../hooks/api"
+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"
+
+export type TranslatableEntity = {
+  icon: React.ReactNode
+  label: string
+  reference: string
+  translatedCount?: number
+  totalCount?: number
+}
+
+const TRANSLATABLE_ENTITIES: TranslatableEntity[] = [
+  {
+    icon: <Buildings />,
+    label: "Product",
+    reference: "product",
+    translatedCount: 4,
+    totalCount: 96,
+  },
+  {
+    icon: <Buildings />,
+    label: "Product Variants",
+    reference: "product_variant",
+    translatedCount: 4,
+    totalCount: 200000,
+  },
+  {
+    icon: <Buildings />,
+    label: "Product Categories",
+    reference: "product_category",
+    translatedCount: 96,
+    totalCount: 96,
+  },
+  {
+    icon: <Buildings />,
+    label: "Product Collections",
+    reference: "product_collection",
+    translatedCount: 4,
+    totalCount: 96,
+  },
+  {
+    icon: <Buildings />,
+    label: "Product Types",
+    reference: "product_type",
+    translatedCount: 4,
+    totalCount: 96,
+  },
+  {
+    icon: <Buildings />,
+    label: "Product Tags",
+    reference: "product_tag",
+    translatedCount: 96,
+    totalCount: 96,
+  },
+  {
+    icon: <Buildings />,
+    label: "Product Options",
+    reference: "product_option",
+    translatedCount: 96,
+    totalCount: 96,
+  },
+  {
+    icon: <Buildings />,
+    label: "Product Option Values",
+    reference: "product_option_value",
+    translatedCount: 96,
+    totalCount: 96,
+  },
+]
+
+export const TranslationList = () => {
+  const { t } = useTranslation()
+
+  const { store, isPending, isError, error } = useStore()
+
+  if (isError) {
+    throw error
+  }
+
+  const isReady = !!store && !isPending
+
+  if (!isReady) {
+    return <TwoColumnPageSkeleton sidebarSections={2} />
+  }
+
+  const hasLocales = (store?.supported_locales ?? []).length > 0
+
+  return (
+    <TwoColumnPage
+      widgets={{
+        before: [],
+        after: [],
+        sideBefore: [],
+        sideAfter: [],
+      }}
+    >
+      <TwoColumnPage.Main>
+        <Container className="flex flex-col px-6 py-4">
+          <Heading>Manage {t("translations.domain")}</Heading>
+          <Text className="text-ui-fg-subtle" size="small">
+            {t("translations.subtitle")}
+          </Text>
+        </Container>
+        <TranslationListSection
+          entities={TRANSLATABLE_ENTITIES}
+          hasLocales={hasLocales}
+        />
+      </TwoColumnPage.Main>
+      <TwoColumnPage.Sidebar>
+        <ActiveLocalesSection
+          locales={
+            store?.supported_locales?.map(
+              (suportedLocale) => suportedLocale.locale
+            ) ?? []
+          }
+        ></ActiveLocalesSection>
+        <TranslationsCompletionSection />
+      </TwoColumnPage.Sidebar>
+    </TwoColumnPage>
+  )
+}

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

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

package/src/routes/translations/translations-edit/components/translations-edit-form/translations-edit-form.tsx

@@ -0,0 +1,423 @@
+import { zodResolver } from "@hookform/resolvers/zod"
+import { AdminStoreLocale, HttpTypes } from "@medusajs/types"
+import { Button, ProgressTabs, toast } from "@medusajs/ui"
+import { ColumnDef } from "@tanstack/react-table"
+import { useMemo, useRef } from "react"
+import { useForm } from "react-hook-form"
+import { useTranslation } from "react-i18next"
+import { z } from "zod"
+
+import {
+  createDataGridHelper,
+  DataGrid,
+} from "../../../../../components/data-grid"
+import {
+  RouteFocusModal,
+  useRouteModal,
+} from "../../../../../components/modals"
+import { KeyboundForm } from "../../../../../components/utilities/keybound-form"
+import { useBatchTranslations } from "../../../../../hooks/api/translations"
+import { useDocumentDirection } from "../../../../../hooks/use-document-direction"
+import { REFERENCE_LABEL_MAP } from "../../utils"
+
+/**
+ * Schema for a single locale translation (subrow in DataGrid).
+ */
+const LocaleTranslationSchema = z.object({
+  id: z.string().nullish(),
+  locale_code: z.string(),
+  fields: z.record(z.string().optional()),
+})
+export type LocaleTranslationSchema = z.infer<typeof LocaleTranslationSchema>
+
+/**
+ * Schema for an entity's translations (parent row in DataGrid).
+ * Contains all locale translations for that entity.
+ */
+const EntityTranslationsSchema = z.object({
+  locales: z.record(LocaleTranslationSchema),
+})
+export type EntityTranslationsSchema = z.infer<typeof EntityTranslationsSchema>
+
+/**
+ * Form schema
+ * Maps each reference_id to their corresponding translations for each locale
+ */
+export const TranslationsFormSchema = z.object({
+  entities: z.record(EntityTranslationsSchema),
+})
+export type TranslationsFormSchema = z.infer<typeof TranslationsFormSchema>
+
+/**
+ * Row types for the DataGrid.
+ * Parent rows are entities, subrows are locale translations.
+ */
+export type TranslationRow = EntityRow | LocaleRow
+
+export type EntityRow = {
+  _type: "entity"
+  reference_id: string
+  subRows: LocaleRow[]
+}
+
+export type LocaleRow = {
+  _type: "locale"
+  reference_id: string
+  locale_code: string
+  locale_name: string
+  id?: string
+}
+
+export function isEntityRow(row: TranslationRow): row is EntityRow {
+  return row._type === "entity"
+}
+
+export function isLocaleRow(row: TranslationRow): row is LocaleRow {
+  return row._type === "locale"
+}
+
+function initTranslationsFormState(
+  translations: HttpTypes.AdminTranslation[],
+  references: { id: string; [key: string]: string }[],
+  availableLocales: AdminStoreLocale[],
+  translatableFields: string[]
+): TranslationsFormSchema {
+  const existingMap = new Map<string, HttpTypes.AdminTranslation>()
+  for (const t of translations) {
+    existingMap.set(`${t.reference_id}:${t.locale_code}`, t)
+  }
+
+  const entitiesTranslationState: Record<string, EntityTranslationsSchema> = {}
+
+  for (const reference of references) {
+    const locales: Record<string, LocaleTranslationSchema> = {}
+
+    for (const locale of availableLocales) {
+      const key = `${reference.id}:${locale.locale_code}`
+      const existing = existingMap.get(key)
+      const isDefaultLocale = locale.is_default
+
+      const fields: Record<string, string> = {}
+      for (const fieldName of translatableFields) {
+        const fieldValue = isDefaultLocale
+          ? (existing?.translations?.[fieldName] as string) ??
+            reference[fieldName]
+          : (existing?.translations?.[fieldName] as string) ?? ""
+        fields[fieldName] = fieldValue
+      }
+
+      locales[locale.locale_code] = {
+        id: existing?.id ?? null,
+        locale_code: locale.locale_code,
+        fields,
+      }
+    }
+
+    entitiesTranslationState[reference.id] = { locales }
+  }
+
+  return {
+    entities: entitiesTranslationState,
+  }
+}
+
+function buildTranslationRows(
+  references: { id: string; [key: string]: string }[],
+  availableLocales: AdminStoreLocale[],
+  translations: HttpTypes.AdminTranslation[]
+): TranslationRow[] {
+  // Index existing translations by reference_id:locale_code
+  const existingMap = new Map<string, HttpTypes.AdminTranslation>()
+  for (const t of translations) {
+    existingMap.set(`${t.reference_id}:${t.locale_code}`, t)
+  }
+
+  return references.map((reference) => ({
+    _type: "entity" as const,
+    reference_id: reference.id,
+    subRows: availableLocales.map((locale) => {
+      const key = `${reference.id}:${locale.locale_code}`
+      const existing = existingMap.get(key)
+      return {
+        _type: "locale" as const,
+        reference_id: reference.id,
+        locale_code: locale.locale_code,
+        locale_name: locale.locale.name,
+        id: existing?.id,
+      }
+    }),
+  }))
+}
+
+function transformToBatchPayload(
+  currentState: TranslationsFormSchema,
+  initialState: TranslationsFormSchema,
+  entityType: string
+): Required<HttpTypes.AdminBatchTranslations> {
+  const payload: Required<HttpTypes.AdminBatchTranslations> = {
+    create: [],
+    update: [],
+    delete: [],
+  }
+
+  for (const [entityId, entityData] of Object.entries(currentState.entities)) {
+    for (const [localeCode, localeTranslations] of Object.entries(
+      entityData.locales
+    )) {
+      const initial = initialState.entities[entityId]?.locales[localeCode]
+      const hasContent = Object.values(localeTranslations.fields).some(
+        (v) => v !== undefined && v.trim() !== ""
+      )
+      const hadContent =
+        initial &&
+        Object.values(initial.fields).some(
+          (v) => v !== undefined && v.trim() !== ""
+        )
+
+      if (!localeTranslations.id && hasContent) {
+        payload.create.push({
+          reference_id: entityId,
+          reference: entityType,
+          locale_code: localeTranslations.locale_code,
+          translations: localeTranslations.fields,
+        })
+      } else if (localeTranslations.id && hasContent) {
+        // UPDATE: Has ID and has content - check if changed
+        const hasChanged =
+          !initial ||
+          JSON.stringify(localeTranslations.fields) !==
+            JSON.stringify(initial.fields)
+
+        if (hasChanged) {
+          payload.update.push({
+            id: localeTranslations.id,
+            translations: localeTranslations.fields,
+          })
+        }
+      } else if (localeTranslations.id && !hasContent && hadContent) {
+        payload.delete.push(localeTranslations.id)
+      }
+    }
+  }
+
+  return payload
+}
+
+const columnHelper = createDataGridHelper<
+  TranslationRow,
+  TranslationsFormSchema
+>()
+
+function useTranslationsGridColumns({
+  translatableFields,
+  modalFields = [],
+}: {
+  translatableFields: string[]
+  modalFields?: string[]
+}) {
+  const { t } = useTranslation()
+
+  const columns: ColumnDef<TranslationRow>[] = useMemo(() => {
+    return [
+      columnHelper.column({
+        id: "locale",
+        header: t("translations.bulk.mainColumn"),
+        cell: (context) => {
+          const row = context.row.original
+
+          if (isEntityRow(row)) {
+            return (
+              <DataGrid.ReadonlyCell context={context}></DataGrid.ReadonlyCell>
+            )
+          }
+
+          return (
+            <DataGrid.ReadonlyCell context={context} color="normal">
+              <div className="flex h-full w-full items-center gap-x-2 overflow-hidden">
+                <span className="truncate">{row.locale_name}</span>
+              </div>
+            </DataGrid.ReadonlyCell>
+          )
+        },
+        disableHiding: true,
+      }),
+      ...translatableFields.map((fieldName) => {
+        const useModal = modalFields.includes(fieldName)
+
+        return columnHelper.column({
+          id: fieldName,
+          header: t(`fields.${fieldName}`, { defaultValue: fieldName }),
+          cell: (context) => {
+            const row = context.row.original
+
+            if (isEntityRow(row)) {
+              return (
+                <DataGrid.ReadonlyCell context={context}>
+                  <span className="text-ui-fg-muted">—</span>
+                </DataGrid.ReadonlyCell>
+              )
+            }
+
+            if (useModal) {
+              return (
+                <DataGrid.ExpandableTextCell
+                  context={context}
+                  fieldLabel={fieldName}
+                />
+              )
+            }
+
+            return <DataGrid.TextCell context={context} />
+          },
+          field: (context) => {
+            const row = context.row.original
+
+            if (isEntityRow(row)) {
+              return null
+            }
+
+            return `entities.${row.reference_id}.locales.${row.locale_code}.fields.${fieldName}`
+          },
+          type: "text",
+        })
+      }),
+    ]
+  }, [t, translatableFields, modalFields])
+
+  return columns
+}
+
+type TranslationsEditFormProps = {
+  translations: HttpTypes.AdminTranslation[]
+  references: { id: string; [key: string]: string }[]
+  entityType: string
+  availableLocales: AdminStoreLocale[]
+  translatableFields: string[]
+  modalFields?: string[]
+}
+
+export const TranslationsEditForm = ({
+  translations,
+  references,
+  entityType,
+  availableLocales,
+  translatableFields,
+  modalFields = [],
+}: TranslationsEditFormProps) => {
+  const { t } = useTranslation()
+  const { handleSuccess, setCloseOnEscape } = useRouteModal()
+  const direction = useDocumentDirection()
+
+  const entities = useMemo(() => references, [references])
+
+  const initialState = useRef(
+    initTranslationsFormState(
+      translations,
+      entities,
+      availableLocales,
+      translatableFields
+    )
+  )
+
+  const form = useForm<TranslationsFormSchema>({
+    resolver: zodResolver(TranslationsFormSchema),
+    defaultValues: initialState.current,
+  })
+
+  const rows = useMemo(
+    () => buildTranslationRows(entities, availableLocales, translations),
+    [entities, availableLocales, translations]
+  )
+
+  const { mutateAsync, isPending } = useBatchTranslations(entityType)
+
+  const handleSubmit = form.handleSubmit(async (values) => {
+    const payload = transformToBatchPayload(
+      values,
+      initialState.current,
+      entityType
+    )
+
+    if (
+      payload.create.length === 0 &&
+      payload.update.length === 0 &&
+      payload.delete.length === 0
+    ) {
+      toast.info(
+        t("translations.noChanges", { defaultValue: "No changes to save" })
+      )
+      return
+    }
+
+    await mutateAsync(payload, {
+      onSuccess: () => {
+        toast.success(
+          t("translations.edit.successToast", {
+            defaultValue: "Translations updated successfully",
+          })
+        )
+        handleSuccess()
+      },
+      onError: (error) => {
+        toast.error(error.message)
+      },
+    })
+  })
+
+  const columns = useTranslationsGridColumns({
+    translatableFields,
+    modalFields,
+  })
+
+  return (
+    <RouteFocusModal.Form form={form}>
+      <KeyboundForm onSubmit={handleSubmit} className="flex h-full flex-col">
+        <ProgressTabs
+          dir={direction}
+          defaultValue={entityType}
+          className="flex h-full flex-col overflow-hidden"
+        >
+          <RouteFocusModal.Header>
+            <div className="-my-2 w-full border-l">
+              <ProgressTabs.List className="justify-start-start flex w-full items-center">
+                <ProgressTabs.Trigger value={entityType}>
+                  {REFERENCE_LABEL_MAP[entityType]}
+                </ProgressTabs.Trigger>
+              </ProgressTabs.List>
+            </div>
+          </RouteFocusModal.Header>
+          <RouteFocusModal.Body className="size-full overflow-hidden">
+            <ProgressTabs.Content
+              value={entityType}
+              className="size-full overflow-y-auto"
+            >
+              <DataGrid
+                columns={columns}
+                data={rows}
+                getSubRows={(row) => {
+                  if (isEntityRow(row)) {
+                    return row.subRows
+                  }
+                }}
+                state={form}
+                onEditingChange={(editing) => setCloseOnEscape(!editing)}
+              />
+            </ProgressTabs.Content>
+          </RouteFocusModal.Body>
+          <RouteFocusModal.Footer>
+            <div className="flex items-center justify-end gap-x-2">
+              <RouteFocusModal.Close asChild>
+                <Button size="small" variant="secondary">
+                  {t("actions.cancel")}
+                </Button>
+              </RouteFocusModal.Close>
+              <Button size="small" type="submit" isLoading={isPending}>
+                {t("actions.save")}
+              </Button>
+            </div>
+          </RouteFocusModal.Footer>
+        </ProgressTabs>
+      </KeyboundForm>
+    </RouteFocusModal.Form>
+  )
+}

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

@@ -0,0 +1 @@
+export { TranslationsEdit as Component } from "./translations-edit"

package/src/routes/translations/translations-edit/translations-edit.tsx

@@ -0,0 +1,67 @@
+import { useNavigate, useSearchParams } from "react-router-dom"
+import { useReferenceTranslations, useStore } from "../../../hooks/api"
+import { TranslationsEditForm } from "./components/translations-edit-form"
+import { useEffect } from "react"
+import { RouteFocusModal } from "../../../components/modals"
+import { useFeatureFlag } from "../../../providers/feature-flag-provider"
+
+export const TranslationsEdit = () => {
+  const isTranslationsEnabled = useFeatureFlag("translation")
+  const navigate = useNavigate()
+  const [searchParams] = useSearchParams()
+  const reference = searchParams.get("reference")
+  const referenceIdParam = searchParams.getAll("reference_id")
+
+  useEffect(() => {
+    if (!reference || !isTranslationsEnabled) {
+      navigate(-1)
+      return
+    }
+  }, [reference, navigate, isTranslationsEnabled])
+
+  const {
+    translations,
+    references,
+    translatableFields,
+    isPending,
+    isError,
+    error,
+  } = useReferenceTranslations(reference!, referenceIdParam, {
+    enabled: !!reference,
+  })
+
+  const {
+    store,
+    isPending: isStorePending,
+    isError: isStoreError,
+    error: storeError,
+  } = useStore()
+
+  const ready =
+    !isPending &&
+    !!translations &&
+    !!translatableFields &&
+    !!references &&
+    !isStorePending &&
+    !!store
+
+  if (isError || isStoreError) {
+    throw error || storeError
+  }
+
+  return (
+    <RouteFocusModal prev={referenceIdParam.length ? -1 : ".."}>
+      {ready && (
+        <TranslationsEditForm
+          translations={translations}
+          references={references}
+          entityType={reference!}
+          availableLocales={store?.supported_locales ?? []}
+          // TODO: change this to get it from the entity translation config when we have it
+          translatableFields={translatableFields}
+          modalFields={translatableFields}
+        />
+      )}
+    </RouteFocusModal>
+  )
+}

package/src/routes/translations/translations-edit/utils/index.ts

@@ -0,0 +1 @@
+export * from "./reference-label-map"

package/src/routes/translations/translations-edit/utils/reference-label-map.ts

@@ -0,0 +1,10 @@
+export const REFERENCE_LABEL_MAP: Record<string, string> = {
+  product: "Products",
+  product_variant: "Product Variants",
+  product_category: "Product Categories",
+  product_collection: "Product Collections",
+  product_type: "Product Types",
+  product_tag: "Product Tags",
+  product_option: "Product Options",
+  product_option_value: "Product Option Values",
+}

package/dist/{customer-list-ZXCGIXJC.mjs → customer-list-TG4D4QOT.mjs}

@@ -11,12 +11,12 @@ import {
 } from "./chunk-YTN73JYH.mjs";
 import "./chunk-HQKGZADC.mjs";
 import "./chunk-EMIHDNB7.mjs";
-import {
-  useCustomerTableQuery
-} from "./chunk-WRSGHGAT.mjs";
 import {
   useCustomerTableFilters
 } from "./chunk-6OU4CHZI.mjs";
+import {
+  useCustomerTableQuery
+} from "./chunk-WRSGHGAT.mjs";
 import "./chunk-GU5PJRPM.mjs";
 import {
   SingleColumnPage

package/dist/{region-list-XQRIBDMF.mjs → region-list-JAQXIBYD.mjs}

@@ -11,12 +11,12 @@ import {
 } from "./chunk-YTN73JYH.mjs";
 import "./chunk-HQKGZADC.mjs";
 import "./chunk-EMIHDNB7.mjs";
-import {
-  useRegionTableQuery
-} from "./chunk-XR4GEMGR.mjs";
 import {
   useRegionTableFilters
 } from "./chunk-LT4MVCA7.mjs";
+import {
+  useRegionTableQuery
+} from "./chunk-XR4GEMGR.mjs";
 import "./chunk-GU5PJRPM.mjs";
 import {
   SingleColumnPage