@medusajs/dashboard 3.0.0-snapshot-20251211173847 → 3.0.0-snapshot-20251211180009

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/chunk-35LSPN2U.mjs

@@ -1,66 +0,0 @@
-import {
-  useSalesChannels
-} from "./chunk-N3FCYZV6.mjs";
-import {
-  useRegions
-} from "./chunk-HP2JH45P.mjs";
-
-// src/routes/orders/order-list/components/order-list-table/use-order-table-filters.tsx
-import { useMemo } from "react";
-import { useTranslation } from "react-i18next";
-var useOrderTableFilters = () => {
-  const { t } = useTranslation();
-  const { regions } = useRegions({
-    limit: 1e3,
-    fields: "id,name"
-  });
-  const { sales_channels } = useSalesChannels({
-    limit: 1e3,
-    fields: "id,name"
-  });
-  return useMemo(() => {
-    const filters = [
-      {
-        key: "created_at",
-        label: t("fields.createdAt"),
-        type: "date"
-      },
-      {
-        key: "updated_at",
-        label: t("fields.updatedAt"),
-        type: "date"
-      }
-    ];
-    if (regions?.length) {
-      filters.push({
-        key: "region_id",
-        label: t("fields.region"),
-        type: "select",
-        multiple: true,
-        searchable: true,
-        options: regions.map((r) => ({
-          label: r.name,
-          value: r.id
-        }))
-      });
-    }
-    if (sales_channels?.length) {
-      filters.push({
-        key: "sales_channel_id",
-        label: t("fields.salesChannel"),
-        type: "select",
-        multiple: true,
-        searchable: true,
-        options: sales_channels.map((s) => ({
-          label: s.name,
-          value: s.id
-        }))
-      });
-    }
-    return filters;
-  }, [regions, sales_channels, t]);
-};
-
-export {
-  useOrderTableFilters
-};

package/dist/order-export-LPAWHHSK.mjs

@@ -1,121 +0,0 @@
-import {
-  useOrderTableFilters
-} from "./chunk-35LSPN2U.mjs";
-import "./chunk-MFALVTRQ.mjs";
-import "./chunk-RIV7FKGN.mjs";
-import "./chunk-TDK3JDOB.mjs";
-import "./chunk-FHSC5X62.mjs";
-import "./chunk-XR4GEMGR.mjs";
-import "./chunk-WRSGHGAT.mjs";
-import "./chunk-MOSRJHJ3.mjs";
-import "./chunk-OMC5JCQH.mjs";
-import {
-  useOrderTableQuery
-} from "./chunk-IW4TACOD.mjs";
-import "./chunk-R65S6ZZV.mjs";
-import {
-  DataTableFilter
-} from "./chunk-GU5PJRPM.mjs";
-import "./chunk-C76H5USB.mjs";
-import "./chunk-DZWH2RV6.mjs";
-import {
-  RouteDrawer
-} from "./chunk-XXBP2Z5M.mjs";
-import {
-  useRouteModal
-} from "./chunk-42OOM4DJ.mjs";
-import "./chunk-SUYYSKCB.mjs";
-import "./chunk-OBQI23QM.mjs";
-import "./chunk-QPKW37WR.mjs";
-import "./chunk-I4OBEAOJ.mjs";
-import "./chunk-HI6URQ7H.mjs";
-import "./chunk-6CLQKVAU.mjs";
-import "./chunk-KI7TOXBR.mjs";
-import "./chunk-HKIF5HVL.mjs";
-import "./chunk-XIVBRONM.mjs";
-import "./chunk-WAXMT4IY.mjs";
-import "./chunk-DYDGGABK.mjs";
-import "./chunk-LGNTHZ5Y.mjs";
-import "./chunk-CN7JXSGW.mjs";
-import "./chunk-5BQQRHQS.mjs";
-import "./chunk-Y5UO73CH.mjs";
-import "./chunk-5AFMB7XQ.mjs";
-import "./chunk-NHDFPGQ3.mjs";
-import "./chunk-A63RZVX6.mjs";
-import "./chunk-HBXV7ENS.mjs";
-import "./chunk-CDORR33H.mjs";
-import {
-  useExportOrders
-} from "./chunk-RU4ZS47V.mjs";
-import "./chunk-N4O5FAUC.mjs";
-import "./chunk-7AX6R6G6.mjs";
-import "./chunk-N3FCYZV6.mjs";
-import "./chunk-3BF5SC66.mjs";
-import "./chunk-VCSSQVPD.mjs";
-import "./chunk-HP2JH45P.mjs";
-import "./chunk-SQDIZZDW.mjs";
-import "./chunk-LEJUZW3P.mjs";
-import "./chunk-FXYH54JP.mjs";
-import "./chunk-774WSTCC.mjs";
-import "./chunk-NFEK63OE.mjs";
-import "./chunk-QZ7TP4HQ.mjs";
-
-// src/routes/orders/order-export/order-export.tsx
-import { Button, Heading as Heading2, toast } from "@medusajs/ui";
-import { useTranslation as useTranslation2 } from "react-i18next";
-
-// src/routes/orders/order-export/components/export-filters.tsx
-import { Heading, Text } from "@medusajs/ui";
-import { useTranslation } from "react-i18next";
-import { jsx, jsxs } from "react/jsx-runtime";
-var ExportFilters = () => {
-  const { t } = useTranslation();
-  const filters = useOrderTableFilters();
-  return /* @__PURE__ */ jsxs("div", { children: [
-    /* @__PURE__ */ jsx(Heading, { level: "h2", children: t("orders.export.filters.title") }),
-    /* @__PURE__ */ jsx(Text, { size: "small", className: "text-ui-fg-subtle", children: t("orders.export.filters.description") }),
-    /* @__PURE__ */ jsx("div", { className: "mt-4", children: /* @__PURE__ */ jsx(DataTableFilter, { filters, readonly: true }) })
-  ] });
-};
-
-// src/routes/orders/order-export/order-export.tsx
-import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
-var OrderExport = () => {
-  const { t } = useTranslation2();
-  return /* @__PURE__ */ jsxs2(RouteDrawer, { children: [
-    /* @__PURE__ */ jsxs2(RouteDrawer.Header, { children: [
-      /* @__PURE__ */ jsx2(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsx2(Heading2, { children: t("orders.export.header") }) }),
-      /* @__PURE__ */ jsx2(RouteDrawer.Description, { className: "sr-only", children: t("orders.export.description") })
-    ] }),
-    /* @__PURE__ */ jsx2(OrderExportContent, {})
-  ] });
-};
-var OrderExportContent = () => {
-  const { t } = useTranslation2();
-  const { searchParams } = useOrderTableQuery({});
-  const { mutateAsync } = useExportOrders(searchParams);
-  const { handleSuccess } = useRouteModal();
-  const handleExportRequest = async () => {
-    await mutateAsync(searchParams, {
-      onSuccess: () => {
-        toast.info(t("orders.export.success.title"), {
-          description: t("orders.export.success.description")
-        });
-        handleSuccess();
-      },
-      onError: (err) => {
-        toast.error(err.message);
-      }
-    });
-  };
-  return /* @__PURE__ */ jsxs2(Fragment, { children: [
-    /* @__PURE__ */ jsx2(RouteDrawer.Body, { children: /* @__PURE__ */ jsx2(ExportFilters, {}) }),
-    /* @__PURE__ */ jsx2(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-x-2", children: [
-      /* @__PURE__ */ jsx2(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsx2(Button, { size: "small", variant: "secondary", children: t("actions.cancel") }) }),
-      /* @__PURE__ */ jsx2(Button, { onClick: handleExportRequest, size: "small", children: t("actions.export") })
-    ] }) })
-  ] });
-};
-export {
-  OrderExport as Component
-};