@medusajs/dashboard 3.0.0-snapshot-20251208164410 → 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-6CPMXY5N.mjs

@@ -1,18 +0,0 @@
-// src/lib/common.ts
-function pick(obj, keys) {
-  const ret = {};
-  keys.forEach((k) => {
-    if (k in obj) {
-      ret[k] = obj[k];
-    }
-  });
-  return ret;
-}
-function toCamelCase(str) {
-  return /^([a-zA-Z]+)(([A-Z]([a-z]+))+)$/.test(str) ? str : str.toLowerCase().replace(/[^a-zA-Z0-9]+(.)/g, (_, chr) => chr.toUpperCase());
-}
-
-export {
-  pick,
-  toCamelCase
-};

package/dist/chunk-BWU3ZE4W.mjs

@@ -1,13 +0,0 @@
-import {
-  getLinkedFields
-} from "./chunk-AGBHQZZT.mjs";
-
-// src/routes/products/product-detail/constants.ts
-var PRODUCT_DETAIL_FIELDS = getLinkedFields(
-  "product",
-  "*categories,*shipping_profile,-variants"
-);
-
-export {
-  PRODUCT_DETAIL_FIELDS
-};

package/dist/chunk-ZHH3W7CN.mjs

@@ -1,171 +0,0 @@
-// src/components/common/sortable-list/sortable-list.tsx
-import {
-  DndContext,
-  DragOverlay,
-  KeyboardSensor,
-  PointerSensor,
-  defaultDropAnimationSideEffects,
-  useSensor,
-  useSensors
-} from "@dnd-kit/core";
-import {
-  SortableContext,
-  arrayMove,
-  sortableKeyboardCoordinates,
-  useSortable
-} from "@dnd-kit/sortable";
-import { CSS } from "@dnd-kit/utilities";
-import { DotsSix } from "@medusajs/icons";
-import { IconButton, clx } from "@medusajs/ui";
-import {
-  Fragment,
-  createContext,
-  useContext,
-  useMemo,
-  useState
-} from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-var List = ({
-  items,
-  onChange,
-  renderItem
-}) => {
-  const [active, setActive] = useState(null);
-  const [activeItem, activeIndex] = useMemo(() => {
-    if (active === null) {
-      return [null, null];
-    }
-    const index = items.findIndex(({ id }) => id === active.id);
-    return [items[index], index];
-  }, [active, items]);
-  const sensors = useSensors(
-    useSensor(PointerSensor),
-    useSensor(KeyboardSensor, {
-      coordinateGetter: sortableKeyboardCoordinates
-    })
-  );
-  const handleDragStart = ({ active: active2 }) => {
-    setActive(active2);
-  };
-  const handleDragEnd = ({ active: active2, over }) => {
-    if (over && active2.id !== over.id) {
-      const activeIndex2 = items.findIndex(({ id }) => id === active2.id);
-      const overIndex = items.findIndex(({ id }) => id === over.id);
-      onChange(arrayMove(items, activeIndex2, overIndex));
-    }
-    setActive(null);
-  };
-  const handleDragCancel = () => {
-    setActive(null);
-  };
-  return /* @__PURE__ */ jsxs(
-    DndContext,
-    {
-      sensors,
-      onDragStart: handleDragStart,
-      onDragEnd: handleDragEnd,
-      onDragCancel: handleDragCancel,
-      children: [
-        /* @__PURE__ */ jsx(Overlay, { children: activeItem && activeIndex !== null ? renderItem(activeItem, activeIndex) : null }),
-        /* @__PURE__ */ jsx(SortableContext, { items, children: /* @__PURE__ */ jsx(
-          "ul",
-          {
-            role: "application",
-            className: "flex list-inside list-none list-image-none flex-col p-0",
-            children: items.map((item, index) => /* @__PURE__ */ jsx(Fragment, { children: renderItem(item, index) }, item.id))
-          }
-        ) })
-      ]
-    }
-  );
-};
-var dropAnimationConfig = {
-  sideEffects: defaultDropAnimationSideEffects({
-    styles: {
-      active: {
-        opacity: "0.4"
-      }
-    }
-  })
-};
-var Overlay = ({ children }) => {
-  return /* @__PURE__ */ jsx(
-    DragOverlay,
-    {
-      className: "shadow-elevation-card-hover overflow-hidden rounded-md [&>li]:border-b-0",
-      dropAnimation: dropAnimationConfig,
-      children
-    }
-  );
-};
-var SortableItemContext = createContext(null);
-var useSortableItemContext = () => {
-  const context = useContext(SortableItemContext);
-  if (!context) {
-    throw new Error(
-      "useSortableItemContext must be used within a SortableItemContext"
-    );
-  }
-  return context;
-};
-var Item = ({
-  id,
-  className,
-  children
-}) => {
-  const {
-    attributes,
-    isDragging,
-    listeners,
-    setNodeRef,
-    setActivatorNodeRef,
-    transform,
-    transition
-  } = useSortable({ id });
-  const context = useMemo(
-    () => ({
-      attributes,
-      listeners,
-      ref: setActivatorNodeRef,
-      isDragging
-    }),
-    [attributes, listeners, setActivatorNodeRef, isDragging]
-  );
-  const style = {
-    opacity: isDragging ? 0.4 : void 0,
-    transform: CSS.Translate.toString(transform),
-    transition
-  };
-  return /* @__PURE__ */ jsx(SortableItemContext.Provider, { value: context, children: /* @__PURE__ */ jsx(
-    "li",
-    {
-      className: clx("transition-fg flex flex-1 list-none", className),
-      ref: setNodeRef,
-      style,
-      children
-    }
-  ) });
-};
-var DragHandle = () => {
-  const { attributes, listeners, ref } = useSortableItemContext();
-  return /* @__PURE__ */ jsx(
-    IconButton,
-    {
-      variant: "transparent",
-      size: "small",
-      ...attributes,
-      ...listeners,
-      ref,
-      className: "cursor-grab touch-none active:cursor-grabbing",
-      children: /* @__PURE__ */ jsx(DotsSix, { className: "text-ui-fg-muted" })
-    }
-  );
-};
-var SortableList = Object.assign(List, {
-  Item,
-  DragHandle
-});
-
-export {
-  SortableList
-};