@mercurjs/admin 2.1.6 → 2.2.0-canary.11

package/dist/chunk-W6CW4WHC.js

@@ -0,0 +1,1755 @@
+import {
+  SectionRow
+} from "./chunk-3XPXUIK3.js";
+import {
+  useDataTableDateColumns,
+  useDataTableDateFilters
+} from "./chunk-54RTJBYO.js";
+import {
+  PRODUCT_DETAIL_QUERY
+} from "./chunk-GVEF6UDT.js";
+import {
+  TwoColumnPage
+} from "./chunk-E74OUNA3.js";
+import {
+  Thumbnail
+} from "./chunk-WIYFXWRI.js";
+import {
+  DataTable
+} from "./chunk-LYZT5REU.js";
+import {
+  useQueryParams
+} from "./chunk-THHRRYRS.js";
+import {
+  require_dist
+} from "./chunk-UCYSCKZV.js";
+import {
+  useProductTag
+} from "./chunk-LJDGVBOQ.js";
+import {
+  useProductType
+} from "./chunk-46M463BR.js";
+import {
+  productAttributesQueryKeys,
+  useProductAttribute
+} from "./chunk-533GMKEG.js";
+import {
+  useCollection
+} from "./chunk-Z5T5EPLF.js";
+import {
+  useSeller
+} from "./chunk-LEG67A2R.js";
+import {
+  ActionMenu
+} from "./chunk-BDGZ4EQO.js";
+import {
+  useProductCategory
+} from "./chunk-DN2K5EAH.js";
+import {
+  TwoColumnPageSkeleton
+} from "./chunk-INNFZYX2.js";
+import {
+  useCancelProductChange,
+  useConfirmProduct,
+  useConfirmProductChange,
+  useDeleteProduct,
+  useDeleteVariantLazy,
+  useProduct,
+  useProductChange,
+  useProductVariants,
+  useRejectProduct,
+  useRemoveAttributeFromProduct,
+  useRequestProductChanges,
+  useUpdateProduct,
+  variantsQueryKeys
+} from "./chunk-H3MAUKL7.js";
+import {
+  sdk
+} from "./chunk-ZBWL72TB.js";
+import {
+  __toESM
+} from "./chunk-NBMM2TZK.js";
+
+// src/pages/products/product-detail/product-detail.tsx
+import { Children } from "react";
+import { useLoaderData, useParams } from "react-router-dom";
+
+// src/pages/products/product-detail/components/product-active-edit-section/product-active-edit-section.tsx
+var import_types = __toESM(require_dist(), 1);
+import { Fragment, useMemo, useState as useState2 } from "react";
+import { ExclamationCircleSolid } from "@medusajs/icons";
+import { Button, Container, Heading, Text, toast } from "@medusajs/ui";
+import {
+  describeProductChangeAction,
+  extractReferenceIds,
+  formatFieldValue,
+  humanizeFieldName,
+  isImageList,
+  isReferenceField,
+  partitionProductChangeActions
+} from "@mercurjs/dashboard-shared";
+import { useQueries } from "@tanstack/react-query";
+import { useTranslation as useTranslation2 } from "react-i18next";
+
+// src/components/common/confirm-prompt/confirm-prompt.tsx
+import { Label, Prompt, Textarea } from "@medusajs/ui";
+import { useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { jsx, jsxs } from "react/jsx-runtime";
+var ConfirmPrompt = ({
+  open,
+  onOpenChange,
+  variant = "confirmation",
+  title,
+  description,
+  noteLabel,
+  noteOptional = false,
+  notePlaceholder,
+  defaultNote = "",
+  cancelLabel,
+  confirmLabel,
+  isLoading = false,
+  onConfirm
+}) => {
+  const { t } = useTranslation();
+  const [note, setNote] = useState(defaultNote);
+  useEffect(() => {
+    if (open) {
+      setNote(defaultNote);
+    }
+  }, [open, defaultNote]);
+  const showNoteField = typeof noteLabel === "string";
+  const handleOpenChange = (next) => {
+    if (isLoading) {
+      return;
+    }
+    onOpenChange(next);
+  };
+  const handleConfirm = async () => {
+    const trimmed = note.trim();
+    await onConfirm(showNoteField && trimmed ? trimmed : void 0);
+  };
+  return /* @__PURE__ */ jsx(Prompt, { open, onOpenChange: handleOpenChange, variant, children: /* @__PURE__ */ jsxs(Prompt.Content, { children: [
+    /* @__PURE__ */ jsxs(Prompt.Header, { children: [
+      /* @__PURE__ */ jsx(Prompt.Title, { children: title }),
+      description ? /* @__PURE__ */ jsx(Prompt.Description, { children: description }) : null
+    ] }),
+    showNoteField ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-y-2 px-6 py-4", children: [
+      /* @__PURE__ */ jsxs(Label, { size: "small", weight: "plus", children: [
+        noteLabel,
+        noteOptional ? /* @__PURE__ */ jsxs("span", { className: "text-ui-fg-muted ml-1 font-normal", children: [
+          "(",
+          t("fields.optional"),
+          ")"
+        ] }) : null
+      ] }),
+      /* @__PURE__ */ jsx(
+        Textarea,
+        {
+          placeholder: notePlaceholder,
+          value: note,
+          onChange: (e) => setNote(e.target.value),
+          disabled: isLoading
+        }
+      )
+    ] }) : null,
+    /* @__PURE__ */ jsxs(Prompt.Footer, { children: [
+      /* @__PURE__ */ jsx(Prompt.Cancel, { disabled: isLoading, children: cancelLabel ?? t("actions.cancel") }),
+      /* @__PURE__ */ jsx(
+        Prompt.Action,
+        {
+          onClick: (e) => {
+            e.preventDefault();
+            void handleConfirm();
+          },
+          disabled: isLoading,
+          children: confirmLabel ?? t("actions.confirm")
+        }
+      )
+    ] })
+  ] }) });
+};
+
+// src/pages/products/product-detail/components/product-active-edit-section/product-active-edit-section.tsx
+import { Fragment as Fragment2, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var VARIANT_LOOKUP_FIELDS = "id,title,sku,*images";
+var ImageStrip = ({
+  images,
+  faded
+}) => /* @__PURE__ */ jsx2(
+  "div",
+  {
+    className: faded ? "flex items-center gap-1.5 opacity-50" : "flex items-center gap-1.5",
+    children: images.map((image, idx) => /* @__PURE__ */ jsx2(Thumbnail, { src: image.url, size: "base" }, `${image.url}-${idx}`))
+  }
+);
+var TypeName = ({ id }) => {
+  const { product_type } = useProductType(id);
+  return /* @__PURE__ */ jsx2(Fragment2, { children: product_type?.value ?? id });
+};
+var CollectionName = ({ id }) => {
+  const { collection } = useCollection(id);
+  return /* @__PURE__ */ jsx2(Fragment2, { children: collection?.title ?? id });
+};
+var CategoryName = ({ id }) => {
+  const { product_category } = useProductCategory(id);
+  return /* @__PURE__ */ jsx2(Fragment2, { children: product_category?.name ?? id });
+};
+var TagName = ({ id }) => {
+  const { product_tag } = useProductTag(id);
+  return /* @__PURE__ */ jsx2(Fragment2, { children: product_tag?.value ?? id });
+};
+var ReferenceName = ({
+  field,
+  id
+}) => {
+  switch (field) {
+    case "type_id":
+      return /* @__PURE__ */ jsx2(TypeName, { id });
+    case "collection_id":
+      return /* @__PURE__ */ jsx2(CollectionName, { id });
+    case "categories":
+      return /* @__PURE__ */ jsx2(CategoryName, { id });
+    case "tags":
+      return /* @__PURE__ */ jsx2(TagName, { id });
+  }
+};
+var ReferenceList = ({
+  field,
+  ids
+}) => {
+  if (!ids.length) return /* @__PURE__ */ jsx2(Fragment2, { children: "-" });
+  return /* @__PURE__ */ jsx2(Fragment2, { children: ids.map((id, idx) => /* @__PURE__ */ jsxs2(Fragment, { children: [
+    idx > 0 && ", ",
+    /* @__PURE__ */ jsx2(ReferenceName, { field, id })
+  ] }, `${field}-${id}`)) });
+};
+var FieldRow = ({ diff }) => {
+  const { t } = useTranslation2();
+  const hasPrevious = diff.previous !== void 0 && diff.previous !== null && diff.previous !== "" && !(Array.isArray(diff.previous) && diff.previous.length === 0);
+  const nextIsImages = isImageList(diff.next);
+  const previousIsImages = isImageList(diff.previous);
+  const renderAsImages = nextIsImages || previousIsImages;
+  const renderAsReference = isReferenceField(diff.field);
+  return /* @__PURE__ */ jsxs2("div", { className: "flex items-start gap-4", children: [
+    /* @__PURE__ */ jsx2(
+      Text,
+      {
+        size: "small",
+        weight: "plus",
+        leading: "compact",
+        className: "text-ui-fg-subtle w-[160px] shrink-0",
+        children: t(`fields.${diff.field}`, {
+          defaultValue: humanizeFieldName(diff.field)
+        })
+      }
+    ),
+    renderAsImages ? /* @__PURE__ */ jsxs2("div", { className: "flex flex-1 flex-wrap items-center gap-2", children: [
+      hasPrevious && previousIsImages && /* @__PURE__ */ jsx2(ImageStrip, { images: diff.previous, faded: true }),
+      hasPrevious && /* @__PURE__ */ jsx2(
+        Text,
+        {
+          size: "small",
+          leading: "compact",
+          className: "text-ui-fg-subtle",
+          children: "\u2192"
+        }
+      ),
+      nextIsImages ? /* @__PURE__ */ jsx2(ImageStrip, { images: diff.next }) : /* @__PURE__ */ jsx2(
+        Text,
+        {
+          size: "small",
+          leading: "compact",
+          className: "text-ui-fg-subtle",
+          children: formatFieldValue(diff.next, diff.field)
+        }
+      )
+    ] }) : renderAsReference ? /* @__PURE__ */ jsxs2(
+      Text,
+      {
+        size: "small",
+        leading: "compact",
+        className: "text-ui-fg-subtle flex-1 whitespace-pre-line text-pretty",
+        children: [
+          hasPrevious && /* @__PURE__ */ jsx2("span", { className: "line-through", children: /* @__PURE__ */ jsx2(
+            ReferenceList,
+            {
+              field: diff.field,
+              ids: extractReferenceIds(
+                diff.field,
+                diff.previous
+              )
+            }
+          ) }),
+          hasPrevious && " \u2192 ",
+          /* @__PURE__ */ jsx2(
+            ReferenceList,
+            {
+              field: diff.field,
+              ids: extractReferenceIds(diff.field, diff.next)
+            }
+          )
+        ]
+      }
+    ) : /* @__PURE__ */ jsxs2(
+      Text,
+      {
+        size: "small",
+        leading: "compact",
+        className: "text-ui-fg-subtle flex-1 whitespace-pre-line text-pretty",
+        children: [
+          hasPrevious && /* @__PURE__ */ jsx2("span", { className: "line-through", children: formatFieldValue(diff.previous, diff.field) }),
+          hasPrevious && " \u2192 ",
+          formatFieldValue(diff.next, diff.field)
+        ]
+      }
+    )
+  ] });
+};
+var AttributeActionLine = ({
+  attributeId,
+  valueIds
+}) => {
+  const { product_attribute } = useProductAttribute(attributeId);
+  const name = product_attribute?.name ?? attributeId;
+  const values = product_attribute?.values ?? [];
+  const selectedNames = valueIds && valueIds.length ? valueIds.map((id) => {
+    const match = values.find((v) => v.id === id);
+    return match?.name ?? id;
+  }) : [];
+  return /* @__PURE__ */ jsxs2(Text, { size: "small", leading: "compact", className: "text-ui-fg-subtle", children: [
+    /* @__PURE__ */ jsx2("span", { className: "font-medium text-ui-fg-base", children: name }),
+    selectedNames.length > 0 && `: ${selectedNames.join(", ")}`
+  ] });
+};
+var VariantActionLine = ({
+  title,
+  images
+}) => /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-3", children: [
+  images && images.length > 0 && /* @__PURE__ */ jsx2(ImageStrip, { images }),
+  /* @__PURE__ */ jsx2(Text, { size: "small", leading: "compact", className: "text-ui-fg-subtle", children: /* @__PURE__ */ jsx2("span", { className: "font-medium text-ui-fg-base", children: title }) })
+] });
+var ActionLine = ({
+  action,
+  variantsById
+}) => {
+  const { t } = useTranslation2();
+  const details = action.details ?? {};
+  if (action.action === import_types.ProductChangeActionType.ATTRIBUTE_ADD || action.action === import_types.ProductChangeActionType.ATTRIBUTE_REMOVE) {
+    if (!details.attribute_id) return null;
+    return /* @__PURE__ */ jsx2(
+      AttributeActionLine,
+      {
+        attributeId: details.attribute_id,
+        valueIds: action.action === import_types.ProductChangeActionType.ATTRIBUTE_ADD ? details.attribute_value_ids : void 0
+      }
+    );
+  }
+  const variantFallback = t("fields.variant", { defaultValue: "Variant" });
+  if (action.action === import_types.ProductChangeActionType.VARIANT_ADD) {
+    const title = details.variant?.title || details.variant?.sku || variantFallback;
+    return /* @__PURE__ */ jsx2(VariantActionLine, { title });
+  }
+  if (action.action === import_types.ProductChangeActionType.VARIANT_REMOVE) {
+    const variantId = details.variant_id ?? "";
+    const found = variantId ? variantsById.get(variantId) : void 0;
+    const title = found?.title || found?.sku || variantId || variantFallback;
+    const images = isImageList(found?.images) ? found?.images : void 0;
+    return /* @__PURE__ */ jsx2(VariantActionLine, { title, images });
+  }
+  const label = describeProductChangeAction(action, {
+    variant: variantFallback
+  });
+  return /* @__PURE__ */ jsx2(Text, { size: "small", leading: "compact", className: "text-ui-fg-subtle", children: label });
+};
+var VariantUpdateBlock = ({
+  variantId,
+  diffs,
+  variantsById
+}) => {
+  const { t } = useTranslation2();
+  const found = variantsById.get(variantId);
+  const title = found?.title || found?.sku || variantId || t("fields.variant", { defaultValue: "Variant" });
+  const images = isImageList(found?.images) ? found?.images : void 0;
+  return /* @__PURE__ */ jsxs2(
+    "div",
+    {
+      className: "flex flex-col gap-y-3",
+      "data-testid": `product-active-edit-variant-${variantId}`,
+      children: [
+        /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-3", children: [
+          images && images.length > 0 && /* @__PURE__ */ jsx2(ImageStrip, { images }),
+          /* @__PURE__ */ jsxs2(Text, { size: "small", leading: "compact", className: "text-ui-fg-subtle", children: [
+            /* @__PURE__ */ jsx2("span", { className: "font-medium text-ui-fg-base", children: t("products.edits.panel.variantUpdated", {
+              defaultValue: "Variant updated"
+            }) }),
+            ": ",
+            title
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx2("div", { className: "flex flex-col gap-y-4 pl-1", children: diffs.map((diff, idx) => /* @__PURE__ */ jsx2(FieldRow, { diff }, `${variantId}-${diff.field}-${idx}`)) })
+      ]
+    }
+  );
+};
+var ProductActiveEditSection = ({
+  product
+}) => {
+  const { t } = useTranslation2();
+  const [confirmOpen, setConfirmOpen] = useState2(false);
+  const [rejectOpen, setRejectOpen] = useState2(false);
+  const { product_change, isError } = useProductChange(product.id, {
+    retry: false
+  });
+  const requesterId = product_change?.created_by ?? "";
+  const { seller: requesterSeller } = useSeller(requesterId, void 0, {
+    enabled: !!requesterId
+  });
+  const { mutateAsync: confirmChange, isPending: isConfirming } = useConfirmProductChange(product_change?.id ?? "", product.id);
+  const { mutateAsync: cancelChange, isPending: isRejecting } = useCancelProductChange(product_change?.id ?? "", product.id);
+  const { updated, added, removed, deleteRequested } = useMemo(
+    () => partitionProductChangeActions(product_change?.actions ?? []),
+    [product_change]
+  );
+  const productUpdated = useMemo(
+    () => updated.filter((d) => !d.variant_id),
+    [updated]
+  );
+  const variantsUpdated = useMemo(() => {
+    const groups = /* @__PURE__ */ new Map();
+    for (const diff of updated) {
+      if (!diff.variant_id) continue;
+      const bucket = groups.get(diff.variant_id) ?? [];
+      bucket.push(diff);
+      groups.set(diff.variant_id, bucket);
+    }
+    return groups;
+  }, [updated]);
+  const attributeIds = useMemo(() => {
+    const ids = /* @__PURE__ */ new Set();
+    for (const action of [...added, ...removed]) {
+      if (action.action === import_types.ProductChangeActionType.ATTRIBUTE_ADD || action.action === import_types.ProductChangeActionType.ATTRIBUTE_REMOVE) {
+        const details = action.details ?? {};
+        if (details.attribute_id) ids.add(details.attribute_id);
+      }
+    }
+    return Array.from(ids);
+  }, [added, removed]);
+  const attributeQueries = useQueries({
+    queries: attributeIds.map((id) => ({
+      queryKey: productAttributesQueryKeys.detail(id),
+      queryFn: () => sdk.admin.productAttributes.$id.query({ $id: id })
+    }))
+  });
+  const isLoadingAttributes = attributeQueries.some((q) => q.isPending);
+  const variantIds = useMemo(() => {
+    const ids = /* @__PURE__ */ new Set();
+    for (const action of removed) {
+      if (action.action === import_types.ProductChangeActionType.VARIANT_REMOVE) {
+        const details = action.details ?? {};
+        if (details.variant_id) ids.add(details.variant_id);
+      }
+    }
+    for (const diff of updated) {
+      if (diff.variant_id) ids.add(diff.variant_id);
+    }
+    return Array.from(ids);
+  }, [removed, updated]);
+  const variantQueryInput = { fields: VARIANT_LOOKUP_FIELDS };
+  const variantQueries = useQueries({
+    queries: variantIds.map((variantId) => ({
+      queryKey: variantsQueryKeys.detail(variantId, variantQueryInput),
+      queryFn: () => sdk.admin.products.$id.variants.$variantId.query({
+        $id: product.id,
+        $variantId: variantId,
+        ...variantQueryInput
+      })
+    }))
+  });
+  const isLoadingVariants = variantQueries.some((q) => q.isPending);
+  const variantsById = useMemo(() => {
+    const map = /* @__PURE__ */ new Map();
+    for (const query of variantQueries) {
+      const variant = query.data?.variant;
+      if (variant?.id) map.set(variant.id, variant);
+    }
+    return map;
+  }, [variantQueries]);
+  if (isError || !product_change) {
+    return null;
+  }
+  if (product_change.status !== import_types.ProductChangeStatus.PENDING) {
+    return null;
+  }
+  if (isLoadingAttributes || isLoadingVariants) {
+    return null;
+  }
+  const hasContent = productUpdated.length > 0 || variantsUpdated.size > 0 || added.length > 0 || removed.length > 0 || deleteRequested;
+  const handleConfirm = async (note) => {
+    try {
+      await confirmChange({ internal_note: note });
+      toast.success(t("products.edits.toast.confirmedSuccessfully"));
+      setConfirmOpen(false);
+    } catch (e) {
+      toast.error(e.message);
+    }
+  };
+  const handleReject = async (note) => {
+    try {
+      await cancelChange({ internal_note: note });
+      toast.success(t("products.edits.toast.rejectedSuccessfully"));
+      setRejectOpen(false);
+    } catch (e) {
+      toast.error(e.message);
+    }
+  };
+  return /* @__PURE__ */ jsxs2(
+    Container,
+    {
+      className: "divide-y p-0",
+      "data-testid": "product-active-edit-section",
+      children: [
+        /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-2 px-6 py-4", children: [
+          /* @__PURE__ */ jsx2(ExclamationCircleSolid, { className: "text-ui-fg-interactive" }),
+          /* @__PURE__ */ jsx2(Heading, { level: "h2", "data-testid": "product-active-edit-heading", children: t("products.edits.panel.title") })
+        ] }),
+        /* @__PURE__ */ jsx2("div", { className: "px-6 py-4", children: /* @__PURE__ */ jsx2(Text, { size: "small", leading: "compact", className: "text-ui-fg-subtle", children: t("products.edits.panel.description", {
+          store: requesterSeller?.name ?? t("products.request.fallbackStore")
+        }) }) }),
+        hasContent && /* @__PURE__ */ jsxs2(Fragment2, { children: [
+          productUpdated.length > 0 && /* @__PURE__ */ jsxs2("div", { className: "flex items-start gap-4 px-6 py-4", children: [
+            /* @__PURE__ */ jsx2(
+              Text,
+              {
+                size: "small",
+                weight: "plus",
+                leading: "compact",
+                className: "text-ui-fg-subtle w-[160px] shrink-0",
+                children: t("labels.updated")
+              }
+            ),
+            /* @__PURE__ */ jsx2("div", { className: "flex flex-1 flex-col gap-y-4", children: productUpdated.map((diff, idx) => /* @__PURE__ */ jsx2(FieldRow, { diff }, `${diff.field}-${idx}`)) })
+          ] }),
+          variantsUpdated.size > 0 && /* @__PURE__ */ jsxs2("div", { className: "flex items-start gap-4 px-6 py-4", children: [
+            /* @__PURE__ */ jsx2(
+              Text,
+              {
+                size: "small",
+                weight: "plus",
+                leading: "compact",
+                className: "text-ui-fg-subtle w-[160px] shrink-0",
+                children: t("labels.updated")
+              }
+            ),
+            /* @__PURE__ */ jsx2("div", { className: "flex flex-1 flex-col gap-y-6", children: Array.from(variantsUpdated.entries()).map(
+              ([variantId, diffs]) => /* @__PURE__ */ jsx2(
+                VariantUpdateBlock,
+                {
+                  variantId,
+                  diffs,
+                  variantsById
+                },
+                variantId
+              )
+            ) })
+          ] }),
+          added.length > 0 && /* @__PURE__ */ jsxs2("div", { className: "flex items-start gap-4 px-6 py-4", children: [
+            /* @__PURE__ */ jsx2(
+              Text,
+              {
+                size: "small",
+                weight: "plus",
+                leading: "compact",
+                className: "text-ui-fg-subtle w-[160px] shrink-0",
+                children: t("labels.added")
+              }
+            ),
+            /* @__PURE__ */ jsx2("div", { className: "flex flex-1 flex-col gap-y-2", children: added.map((action) => /* @__PURE__ */ jsx2(
+              ActionLine,
+              {
+                action,
+                variantsById
+              },
+              action.id
+            )) })
+          ] }),
+          removed.length > 0 && /* @__PURE__ */ jsxs2("div", { className: "flex items-start gap-4 px-6 py-4", children: [
+            /* @__PURE__ */ jsx2(
+              Text,
+              {
+                size: "small",
+                weight: "plus",
+                leading: "compact",
+                className: "text-ui-fg-subtle w-[160px] shrink-0",
+                children: t("labels.removed")
+              }
+            ),
+            /* @__PURE__ */ jsx2("div", { className: "flex flex-1 flex-col gap-y-2", children: removed.map((action) => /* @__PURE__ */ jsx2(
+              ActionLine,
+              {
+                action,
+                variantsById
+              },
+              action.id
+            )) })
+          ] }),
+          deleteRequested && /* @__PURE__ */ jsxs2("div", { className: "flex items-start gap-4 px-6 py-4", children: [
+            /* @__PURE__ */ jsx2(
+              Text,
+              {
+                size: "small",
+                weight: "plus",
+                leading: "compact",
+                className: "text-ui-fg-subtle w-[160px] shrink-0",
+                children: t("labels.removed")
+              }
+            ),
+            /* @__PURE__ */ jsx2(
+              Text,
+              {
+                size: "small",
+                leading: "compact",
+                className: "text-ui-fg-subtle flex-1",
+                children: t("products.edits.panel.deleteRequested")
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs2(
+          "div",
+          {
+            className: "bg-ui-bg-subtle flex items-center justify-end gap-x-2 rounded-b-xl px-6 py-4",
+            "data-testid": "product-active-edit-actions",
+            children: [
+              /* @__PURE__ */ jsx2(
+                Button,
+                {
+                  size: "small",
+                  variant: "secondary",
+                  onClick: () => setConfirmOpen(true),
+                  "data-testid": "product-active-edit-confirm-button",
+                  children: t("actions.confirm")
+                }
+              ),
+              /* @__PURE__ */ jsx2(
+                Button,
+                {
+                  size: "small",
+                  variant: "secondary",
+                  onClick: () => setRejectOpen(true),
+                  "data-testid": "product-active-edit-reject-button",
+                  children: t("products.edits.actions.reject")
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx2(
+          ConfirmPrompt,
+          {
+            open: confirmOpen,
+            onOpenChange: setConfirmOpen,
+            title: t("products.edits.confirmPrompt.title"),
+            description: t("products.edits.confirmPrompt.description"),
+            noteLabel: t("products.edits.confirmPrompt.noteLabel"),
+            noteOptional: true,
+            notePlaceholder: t("products.edits.confirmPrompt.notePlaceholder"),
+            isLoading: isConfirming,
+            onConfirm: handleConfirm
+          }
+        ),
+        /* @__PURE__ */ jsx2(
+          ConfirmPrompt,
+          {
+            open: rejectOpen,
+            onOpenChange: setRejectOpen,
+            title: t("products.edits.rejectPrompt.title"),
+            description: t("products.edits.rejectPrompt.description"),
+            noteLabel: t("products.edits.rejectPrompt.noteLabel"),
+            noteOptional: true,
+            notePlaceholder: t("products.edits.rejectPrompt.notePlaceholder"),
+            confirmLabel: t("products.edits.rejectPrompt.confirm"),
+            isLoading: isRejecting,
+            onConfirm: handleReject
+          }
+        )
+      ]
+    }
+  );
+};
+
+// src/pages/products/product-detail/components/product-active-request-section/product-active-request-section.tsx
+var import_types2 = __toESM(require_dist(), 1);
+import { useState as useState3 } from "react";
+import { Button as Button2, Container as Container2, Heading as Heading2, Text as Text2, toast as toast2 } from "@medusajs/ui";
+import { ExclamationCircleSolid as ExclamationCircleSolid2 } from "@medusajs/icons";
+import { useTranslation as useTranslation3 } from "react-i18next";
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+var ProductActiveRequestSection = ({
+  product
+}) => {
+  const { t } = useTranslation3();
+  const [confirmOpen, setConfirmOpen] = useState3(false);
+  const [requestUpdateOpen, setRequestUpdateOpen] = useState3(false);
+  const [rejectOpen, setRejectOpen] = useState3(false);
+  const { mutateAsync: confirmProduct, isPending: isConfirming } = useConfirmProduct(product.id);
+  const { mutateAsync: requestProductChanges, isPending: isRequestingUpdate } = useRequestProductChanges(product.id);
+  const { mutateAsync: rejectProduct, isPending: isRejecting } = useRejectProduct(product.id);
+  if (product.status !== import_types2.ProductStatus.PROPOSED) {
+    return null;
+  }
+  const handleConfirm = async (note) => {
+    try {
+      await confirmProduct({ internal_note: note });
+      toast2.success(t("products.request.toast.publishedSuccessfully"));
+      setConfirmOpen(false);
+    } catch (e) {
+      toast2.error(e.message);
+    }
+  };
+  const handleRequestUpdate = async (note) => {
+    try {
+      await requestProductChanges({ message: note });
+      toast2.success(t("products.request.toast.updateRequestedSuccessfully"));
+      setRequestUpdateOpen(false);
+    } catch (e) {
+      toast2.error(e.message);
+    }
+  };
+  const handleReject = async (note) => {
+    try {
+      await rejectProduct({ message: note });
+      toast2.success(t("products.request.toast.rejectedSuccessfully"));
+      setRejectOpen(false);
+    } catch (e) {
+      toast2.error(e.message);
+    }
+  };
+  return /* @__PURE__ */ jsxs3(
+    Container2,
+    {
+      className: "divide-y p-0",
+      "data-testid": "product-active-request-section",
+      children: [
+        /* @__PURE__ */ jsxs3(
+          "div",
+          {
+            className: "flex items-center gap-2 px-6 py-4",
+            "data-testid": "product-active-request-header",
+            children: [
+              /* @__PURE__ */ jsx3(ExclamationCircleSolid2, { className: "text-ui-fg-interactive" }),
+              /* @__PURE__ */ jsx3(Heading2, { level: "h2", "data-testid": "product-active-request-heading", children: t("products.request.panel.title") })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx3("div", { className: "px-6 py-4", children: /* @__PURE__ */ jsx3(Text2, { size: "small", leading: "compact", className: "text-ui-fg-subtle", children: t("products.request.panel.description", {
+          store: product.sellers?.[0]?.name ?? t("products.request.fallbackStore")
+        }) }) }),
+        /* @__PURE__ */ jsxs3(
+          "div",
+          {
+            className: "bg-ui-bg-subtle flex items-center justify-end gap-x-2 rounded-b-xl px-6 py-4",
+            "data-testid": "product-active-request-actions",
+            children: [
+              /* @__PURE__ */ jsx3(
+                Button2,
+                {
+                  size: "small",
+                  variant: "secondary",
+                  onClick: () => setConfirmOpen(true),
+                  "data-testid": "product-active-request-confirm-button",
+                  children: t("actions.confirm")
+                }
+              ),
+              /* @__PURE__ */ jsx3(
+                Button2,
+                {
+                  size: "small",
+                  variant: "secondary",
+                  onClick: () => setRequestUpdateOpen(true),
+                  "data-testid": "product-active-request-request-update-button",
+                  children: t("products.request.actions.requestUpdate")
+                }
+              ),
+              /* @__PURE__ */ jsx3(
+                Button2,
+                {
+                  size: "small",
+                  variant: "secondary",
+                  onClick: () => setRejectOpen(true),
+                  "data-testid": "product-active-request-reject-button",
+                  children: t("products.request.actions.reject")
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx3(
+          ConfirmPrompt,
+          {
+            open: confirmOpen,
+            onOpenChange: setConfirmOpen,
+            title: t("products.request.confirmPrompt.title"),
+            description: t("products.request.confirmPrompt.description"),
+            noteLabel: t("products.request.confirmPrompt.noteLabel"),
+            noteOptional: true,
+            notePlaceholder: t("products.request.confirmPrompt.notePlaceholder"),
+            isLoading: isConfirming,
+            onConfirm: handleConfirm
+          }
+        ),
+        /* @__PURE__ */ jsx3(
+          ConfirmPrompt,
+          {
+            open: requestUpdateOpen,
+            onOpenChange: setRequestUpdateOpen,
+            title: t("products.request.requestUpdatePrompt.title"),
+            description: t("products.request.requestUpdatePrompt.description"),
+            noteLabel: t("products.request.requestUpdatePrompt.noteLabel"),
+            noteOptional: true,
+            notePlaceholder: t(
+              "products.request.requestUpdatePrompt.notePlaceholder"
+            ),
+            confirmLabel: t("products.request.requestUpdatePrompt.send"),
+            isLoading: isRequestingUpdate,
+            onConfirm: handleRequestUpdate
+          }
+        ),
+        /* @__PURE__ */ jsx3(
+          ConfirmPrompt,
+          {
+            open: rejectOpen,
+            onOpenChange: setRejectOpen,
+            title: t("products.request.rejectPrompt.title"),
+            description: t("products.request.rejectPrompt.description"),
+            noteLabel: t("products.request.rejectPrompt.noteLabel"),
+            noteOptional: true,
+            notePlaceholder: t("products.request.rejectPrompt.notePlaceholder"),
+            confirmLabel: t("products.request.rejectPrompt.confirm"),
+            isLoading: isRejecting,
+            onConfirm: handleReject
+          }
+        )
+      ]
+    }
+  );
+};
+
+// src/pages/products/product-detail/components/product-attribute-section/product-attribute-section.tsx
+import {
+  ListBullet,
+  Plus,
+  Trash,
+  Swatch,
+  DropCap,
+  InformationCircleSolid,
+  PencilSquare
+} from "@medusajs/icons";
+import {
+  Badge,
+  Container as Container3,
+  Heading as Heading3,
+  Text as Text3,
+  toast as toast3,
+  Tooltip,
+  usePrompt
+} from "@medusajs/ui";
+import { useTranslation as useTranslation4 } from "react-i18next";
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+var AttributeActions = ({
+  productId,
+  attribute
+}) => {
+  const { t } = useTranslation4();
+  const prompt = usePrompt();
+  const { mutateAsync } = useRemoveAttributeFromProduct(productId, attribute.id);
+  const handleDelete = async () => {
+    const res = await prompt({
+      title: t("general.areYouSure"),
+      description: t("products.deleteAttributeWarning", {
+        title: attribute.name
+      }),
+      confirmText: t("actions.delete"),
+      cancelText: t("actions.cancel")
+    });
+    if (!res) {
+      return;
+    }
+    await mutateAsync(void 0, {
+      onError: (error) => {
+        toast3.error(error.message);
+      }
+    });
+  };
+  return /* @__PURE__ */ jsx4(
+    ActionMenu,
+    {
+      groups: [
+        {
+          actions: [
+            {
+              label: t("actions.edit"),
+              to: `attributes/${attribute.id}/edit`,
+              icon: /* @__PURE__ */ jsx4(PencilSquare, {})
+            }
+          ]
+        },
+        {
+          actions: [
+            {
+              label: t("actions.delete"),
+              onClick: handleDelete,
+              icon: /* @__PURE__ */ jsx4(Trash, {}),
+              disabled: attribute.is_required,
+              disabledTooltip: attribute.is_required ? t("products.attributeRequiredDeleteDisabledTooltip") : void 0
+            }
+          ]
+        }
+      ]
+    }
+  );
+};
+var AttributeGroup = ({
+  icon,
+  title,
+  description,
+  attributes,
+  productId
+}) => {
+  const { t } = useTranslation4();
+  if (!attributes.length) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs4("div", { className: "flex flex-col gap-y-4 px-3 py-4", children: [
+    /* @__PURE__ */ jsxs4("div", { className: "flex items-center gap-x-3 px-3", children: [
+      /* @__PURE__ */ jsx4("div", { className: "text-ui-fg-muted flex h-8 w-8 items-center justify-center rounded-lg border border-ui-border-base bg-ui-bg-component", children: icon }),
+      /* @__PURE__ */ jsxs4("div", { children: [
+        /* @__PURE__ */ jsx4(Text3, { size: "small", weight: "plus", leading: "compact", children: title }),
+        /* @__PURE__ */ jsx4(Text3, { size: "small", leading: "compact", className: "text-ui-fg-subtle", children: description })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx4("div", { className: "flex flex-col gap-y-0", children: /* @__PURE__ */ jsx4("div", { className: "overflow-hidden rounded-xl border border-ui-border-base", children: attributes.map((attr, index) => {
+      const values = attr.values?.map((v) => v.name) ?? [];
+      return /* @__PURE__ */ jsx4(
+        "div",
+        {
+          className: index < attributes.length - 1 ? "border-b border-ui-border-base" : "",
+          children: /* @__PURE__ */ jsxs4("div", { className: "grid grid-cols-[1fr_1fr_28px] items-center gap-4 px-4 py-3 bg-ui-bg-component", children: [
+            /* @__PURE__ */ jsxs4("div", { className: "flex items-center gap-x-2 text-ui-fg-subtle", children: [
+              /* @__PURE__ */ jsx4(Text3, { size: "small", weight: "plus", leading: "compact", children: attr.name }),
+              attr.description && /* @__PURE__ */ jsx4(Tooltip, { content: attr.description, children: /* @__PURE__ */ jsx4("span", { className: "text-ui-fg-muted flex items-center", children: /* @__PURE__ */ jsx4(InformationCircleSolid, {}) }) }),
+              attr.is_required && /* @__PURE__ */ jsx4(Tooltip, { content: t("products.attributeRequiredByMarketplace"), children: /* @__PURE__ */ jsx4("span", { className: "text-ui-fg-muted flex items-center", children: /* @__PURE__ */ jsx4(InformationCircleSolid, {}) }) })
+            ] }),
+            /* @__PURE__ */ jsx4("div", { className: "flex flex-wrap gap-1", children: ["single_select", "multi_select"].includes(attr.type) ? values.map((val) => /* @__PURE__ */ jsx4(
+              Badge,
+              {
+                size: "2xsmall",
+                className: "flex min-w-[20px] items-center justify-center",
+                children: val
+              },
+              val
+            )) : /* @__PURE__ */ jsx4(
+              Text3,
+              {
+                size: "small",
+                leading: "compact",
+                className: "text-ui-fg-subtle",
+                children: values.join(", ") || "-"
+              }
+            ) }),
+            /* @__PURE__ */ jsx4(AttributeActions, { productId, attribute: attr })
+          ] })
+        },
+        attr.id
+      );
+    }) }) })
+  ] });
+};
+var ProductAttributeSection = ({
+  product
+}) => {
+  const { t } = useTranslation4();
+  const allAttributes = product.attributes ?? [];
+  const variantAttributes = allAttributes.filter((a) => a.is_variant_axis);
+  const infoAttributes = allAttributes.filter((a) => !a.is_variant_axis);
+  const isEmpty = !variantAttributes.length && !infoAttributes.length;
+  return /* @__PURE__ */ jsxs4(Container3, { className: "p-0", children: [
+    /* @__PURE__ */ jsxs4(
+      "div",
+      {
+        className: `flex items-center justify-between px-6 py-4${isEmpty ? "" : " border-b border-ui-border-base"}`,
+        children: [
+          /* @__PURE__ */ jsx4(Heading3, { level: "h2", children: t("products.attributes") }),
+          /* @__PURE__ */ jsx4(
+            ActionMenu,
+            {
+              groups: [
+                {
+                  actions: [
+                    {
+                      label: t("products.create.attributes.addExisting"),
+                      to: "attributes/add",
+                      icon: /* @__PURE__ */ jsx4(ListBullet, {})
+                    },
+                    {
+                      label: t("products.create.attributes.createNew"),
+                      to: "attributes/create",
+                      icon: /* @__PURE__ */ jsx4(Plus, {})
+                    }
+                  ]
+                }
+              ]
+            }
+          )
+        ]
+      }
+    ),
+    variantAttributes.length > 0 && /* @__PURE__ */ jsx4(
+      AttributeGroup,
+      {
+        icon: /* @__PURE__ */ jsx4(Swatch, {}),
+        title: t("products.create.tabs.variants"),
+        description: t("products.attributeVariantsDescription"),
+        attributes: variantAttributes,
+        productId: product.id
+      }
+    ),
+    variantAttributes.length > 0 && infoAttributes.length > 0 && /* @__PURE__ */ jsx4("div", { className: "border-t border-dashed border-ui-border-base" }),
+    infoAttributes.length > 0 && /* @__PURE__ */ jsx4(
+      AttributeGroup,
+      {
+        icon: /* @__PURE__ */ jsx4(DropCap, {}),
+        title: t("products.attributeProductInformation"),
+        description: t("products.attributeProductInformationDescription"),
+        attributes: infoAttributes,
+        productId: product.id
+      }
+    )
+  ] });
+};
+
+// src/pages/products/product-detail/components/product-general-section/product-general-section.tsx
+import { PencilSquare as PencilSquare2, Trash as Trash2 } from "@medusajs/icons";
+import { Container as Container4, Heading as Heading4, StatusBadge, usePrompt as usePrompt2 } from "@medusajs/ui";
+import { useTranslation as useTranslation5 } from "react-i18next";
+import { useNavigate } from "react-router-dom";
+import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+var productStatusColor = (status) => {
+  switch (status) {
+    case "draft":
+      return "grey";
+    case "proposed":
+      return "orange";
+    case "published":
+      return "green";
+    case "rejected":
+      return "red";
+    default:
+      return "grey";
+  }
+};
+var ProductGeneralSection = ({
+  product
+}) => {
+  const { t } = useTranslation5();
+  const prompt = usePrompt2();
+  const navigate = useNavigate();
+  const { mutateAsync } = useDeleteProduct(product.id);
+  const handleDelete = async () => {
+    const res = await prompt({
+      title: t("general.areYouSure"),
+      description: t("products.deleteWarning", {
+        title: product.title
+      }),
+      confirmText: t("actions.delete"),
+      cancelText: t("actions.cancel")
+    });
+    if (!res) {
+      return;
+    }
+    await mutateAsync(void 0, {
+      onSuccess: () => {
+        navigate("..");
+      }
+    });
+  };
+  return /* @__PURE__ */ jsxs5(Container4, { className: "divide-y p-0", "data-testid": "product-general-section", children: [
+    /* @__PURE__ */ jsxs5(
+      "div",
+      {
+        className: "flex items-center justify-between px-6 py-4",
+        "data-testid": "product-general-header",
+        children: [
+          /* @__PURE__ */ jsx5(Heading4, { "data-testid": "product-general-title", children: product.title }),
+          /* @__PURE__ */ jsxs5(
+            "div",
+            {
+              className: "flex items-center gap-x-4",
+              "data-testid": "product-general-actions",
+              children: [
+                /* @__PURE__ */ jsx5(
+                  StatusBadge,
+                  {
+                    color: productStatusColor(product.status),
+                    "data-testid": "product-status-badge",
+                    children: t(`products.productStatus.${product.status}`)
+                  }
+                ),
+                /* @__PURE__ */ jsx5(
+                  ActionMenu,
+                  {
+                    groups: [
+                      {
+                        actions: [
+                          {
+                            label: t("actions.edit"),
+                            to: "edit",
+                            icon: /* @__PURE__ */ jsx5(PencilSquare2, {})
+                          }
+                        ]
+                      },
+                      {
+                        actions: [
+                          {
+                            label: t("actions.delete"),
+                            onClick: handleDelete,
+                            icon: /* @__PURE__ */ jsx5(Trash2, {})
+                          }
+                        ]
+                      }
+                    ],
+                    "data-testid": "product-general-action-menu"
+                  }
+                )
+              ]
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx5(
+      SectionRow,
+      {
+        title: t("fields.description"),
+        value: product.description,
+        "data-testid": "product-description-row"
+      }
+    ),
+    /* @__PURE__ */ jsx5(
+      SectionRow,
+      {
+        title: t("fields.subtitle"),
+        value: product.subtitle,
+        "data-testid": "product-subtitle-row"
+      }
+    ),
+    /* @__PURE__ */ jsx5(
+      SectionRow,
+      {
+        title: t("fields.handle"),
+        value: `/${product.handle}`,
+        "data-testid": "product-handle-row"
+      }
+    ),
+    /* @__PURE__ */ jsx5(
+      SectionRow,
+      {
+        title: t("fields.discountable"),
+        value: product.discountable ? t("fields.true") : t("fields.false"),
+        "data-testid": "product-discountable-row"
+      }
+    )
+  ] });
+};
+
+// src/pages/products/product-detail/components/product-media-section/product-media-section.tsx
+import { PencilSquare as PencilSquare3, ThumbnailBadge } from "@medusajs/icons";
+import {
+  Button as Button3,
+  Checkbox,
+  CommandBar,
+  Container as Container5,
+  Heading as Heading5,
+  Text as Text4,
+  Tooltip as Tooltip2,
+  clx,
+  usePrompt as usePrompt3
+} from "@medusajs/ui";
+import { useState as useState4 } from "react";
+import { useTranslation as useTranslation6 } from "react-i18next";
+import { Link } from "react-router-dom";
+import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
+var ProductMediaSection = ({
+  product
+}) => {
+  const { t } = useTranslation6();
+  const prompt = usePrompt3();
+  const [selection, setSelection] = useState4({});
+  const media = getMedia(product);
+  const handleCheckedChange = (id) => {
+    setSelection((prev) => {
+      if (prev[id]) {
+        const { [id]: _, ...rest } = prev;
+        return rest;
+      } else {
+        return { ...prev, [id]: true };
+      }
+    });
+  };
+  const { mutateAsync } = useUpdateProduct(product.id);
+  const handleDelete = async () => {
+    const ids = Object.keys(selection);
+    const includingThumbnail = ids.some(
+      (id) => media.find((m) => m.id === id)?.isThumbnail
+    );
+    const res = await prompt({
+      title: t("general.areYouSure"),
+      description: includingThumbnail ? t("products.media.deleteWarningWithThumbnail", {
+        count: ids.length
+      }) : t("products.media.deleteWarning", {
+        count: ids.length
+      }),
+      confirmText: t("actions.delete"),
+      cancelText: t("actions.cancel")
+    });
+    if (!res) {
+      return;
+    }
+    const mediaToKeep = product.images?.filter((i) => !ids.includes(i.id)).map((i) => ({ url: i.url }));
+    await mutateAsync(
+      {
+        images: mediaToKeep,
+        thumbnail: includingThumbnail ? "" : void 0
+      },
+      {
+        onSuccess: () => {
+          setSelection({});
+        }
+      }
+    );
+  };
+  return /* @__PURE__ */ jsxs6(Container5, { className: "divide-y p-0", "data-testid": "product-media-section", children: [
+    /* @__PURE__ */ jsxs6("div", { className: "flex items-center justify-between px-6 py-4", "data-testid": "product-media-header", children: [
+      /* @__PURE__ */ jsx6(Heading5, { level: "h2", "data-testid": "product-media-title", children: t("products.media.label") }),
+      /* @__PURE__ */ jsx6(
+        ActionMenu,
+        {
+          groups: [
+            {
+              actions: [
+                {
+                  label: t("actions.edit"),
+                  to: "media?view=edit",
+                  icon: /* @__PURE__ */ jsx6(PencilSquare3, {})
+                }
+              ]
+            }
+          ],
+          "data-testid": "product-media-action-menu"
+        }
+      )
+    ] }),
+    media.length > 0 ? /* @__PURE__ */ jsx6("div", { className: "grid grid-cols-[repeat(auto-fill,minmax(96px,1fr))] gap-4 px-6 py-4", "data-testid": "product-media-grid", children: media.map((i, index) => {
+      const isSelected = selection[i.id];
+      return /* @__PURE__ */ jsxs6(
+        "div",
+        {
+          className: "shadow-elevation-card-rest hover:shadow-elevation-card-hover transition-fg group relative aspect-square size-full cursor-pointer overflow-hidden rounded-[8px]",
+          "data-testid": `product-media-item-${i.id}`,
+          children: [
+            /* @__PURE__ */ jsx6(
+              "div",
+              {
+                className: clx(
+                  "transition-fg invisible absolute right-2 top-2 opacity-0 group-hover:visible group-hover:opacity-100",
+                  {
+                    "visible opacity-100": isSelected
+                  }
+                ),
+                "data-testid": `product-media-checkbox-container-${i.id}`,
+                children: /* @__PURE__ */ jsx6(
+                  Checkbox,
+                  {
+                    checked: selection[i.id] || false,
+                    onCheckedChange: () => handleCheckedChange(i.id),
+                    "data-testid": `product-media-checkbox-${i.id}`
+                  }
+                )
+              }
+            ),
+            i.isThumbnail && /* @__PURE__ */ jsx6("div", { className: "absolute left-2 top-2", "data-testid": `product-media-thumbnail-badge-${i.id}`, children: /* @__PURE__ */ jsx6(Tooltip2, { content: t("fields.thumbnail"), children: /* @__PURE__ */ jsx6(ThumbnailBadge, {}) }) }),
+            /* @__PURE__ */ jsx6(Link, { to: `media`, state: { curr: index }, "data-testid": `product-media-link-${i.id}`, children: /* @__PURE__ */ jsx6(
+              "img",
+              {
+                src: i.url,
+                alt: product.title,
+                className: "size-full object-cover",
+                "data-testid": `product-media-image-${i.id}`
+              }
+            ) })
+          ]
+        },
+        i.id
+      );
+    }) }) : /* @__PURE__ */ jsxs6("div", { className: "flex flex-col items-center gap-y-4 pb-8 pt-6", "data-testid": "product-media-empty-state", children: [
+      /* @__PURE__ */ jsxs6("div", { className: "flex flex-col items-center", children: [
+        /* @__PURE__ */ jsx6(
+          Text4,
+          {
+            size: "small",
+            leading: "compact",
+            weight: "plus",
+            className: "text-ui-fg-subtle",
+            "data-testid": "product-media-empty-state-header",
+            children: t("products.media.emptyState.header")
+          }
+        ),
+        /* @__PURE__ */ jsx6(Text4, { size: "small", className: "text-ui-fg-muted", "data-testid": "product-media-empty-state-description", children: t("products.media.emptyState.description") })
+      ] }),
+      /* @__PURE__ */ jsx6(Button3, { size: "small", variant: "secondary", asChild: true, "data-testid": "product-media-empty-state-button", children: /* @__PURE__ */ jsx6(Link, { to: "media?view=edit", "data-testid": "product-media-empty-state-link", children: t("products.media.emptyState.action") }) })
+    ] }),
+    /* @__PURE__ */ jsx6(CommandBar, { open: !!Object.keys(selection).length, "data-testid": "product-media-command-bar", children: /* @__PURE__ */ jsxs6(CommandBar.Bar, { "data-testid": "product-media-command-bar-bar", children: [
+      /* @__PURE__ */ jsx6(CommandBar.Value, { "data-testid": "product-media-command-bar-value", children: t("general.countSelected", {
+        count: Object.keys(selection).length
+      }) }),
+      /* @__PURE__ */ jsx6(CommandBar.Seperator, { "data-testid": "product-media-command-bar-separator" }),
+      /* @__PURE__ */ jsx6(
+        CommandBar.Command,
+        {
+          action: handleDelete,
+          label: t("actions.delete"),
+          shortcut: "d",
+          "data-testid": "product-media-command-bar-delete"
+        }
+      )
+    ] }) })
+  ] });
+};
+var getMedia = (product) => {
+  const { images = [], thumbnail } = product;
+  const media = images.map((image) => ({
+    id: image.id,
+    url: image.url,
+    isThumbnail: image.url === thumbnail
+  }));
+  if (thumbnail && !media.some((mediaItem) => mediaItem.url === thumbnail)) {
+    media.unshift({
+      id: "img_thumbnail",
+      url: thumbnail,
+      isThumbnail: true
+    });
+  }
+  return media;
+};
+
+// src/pages/products/product-detail/components/product-organization-section/product-organization-section.tsx
+import { PencilSquare as PencilSquare4 } from "@medusajs/icons";
+import { Badge as Badge2, Container as Container6, Heading as Heading6, Tooltip as Tooltip3 } from "@medusajs/ui";
+import { useTranslation as useTranslation7 } from "react-i18next";
+import { Link as Link2 } from "react-router-dom";
+import { jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
+var ProductOrganizationSection = ({
+  product
+}) => {
+  const { t } = useTranslation7();
+  return /* @__PURE__ */ jsxs7(
+    Container6,
+    {
+      className: "divide-y p-0",
+      "data-testid": "product-organization-section",
+      children: [
+        /* @__PURE__ */ jsxs7(
+          "div",
+          {
+            className: "flex items-center justify-between px-6 py-4",
+            "data-testid": "product-organization-header",
+            children: [
+              /* @__PURE__ */ jsx7(Heading6, { level: "h2", "data-testid": "product-organization-title", children: t("products.organization.header") }),
+              /* @__PURE__ */ jsx7(
+                ActionMenu,
+                {
+                  groups: [
+                    {
+                      actions: [
+                        {
+                          label: t("actions.edit"),
+                          to: "organization",
+                          icon: /* @__PURE__ */ jsx7(PencilSquare4, {})
+                        }
+                      ]
+                    }
+                  ],
+                  "data-testid": "product-organization-action-menu"
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx7(
+          SectionRow,
+          {
+            title: t("fields.tags"),
+            value: product.tags?.length ? product.tags.map((tag) => /* @__PURE__ */ jsx7(
+              OrganizationTag,
+              {
+                label: tag.value,
+                to: `/settings/product-tags/${tag.id}`
+              },
+              tag.id
+            )) : void 0,
+            "data-testid": "product-tags-row"
+          }
+        ),
+        /* @__PURE__ */ jsx7(
+          SectionRow,
+          {
+            title: t("fields.type"),
+            value: product.type ? /* @__PURE__ */ jsx7(
+              OrganizationTag,
+              {
+                label: product.type.value,
+                to: `/settings/product-types/${product.type_id}`
+              }
+            ) : void 0,
+            "data-testid": "product-type-row"
+          }
+        ),
+        /* @__PURE__ */ jsx7(
+          SectionRow,
+          {
+            title: t("fields.collection"),
+            value: product.collection ? /* @__PURE__ */ jsx7(
+              OrganizationTag,
+              {
+                label: product.collection.title,
+                to: `/collections/${product.collection.id}`
+              }
+            ) : void 0,
+            "data-testid": "product-collection-row"
+          }
+        ),
+        /* @__PURE__ */ jsx7(
+          SectionRow,
+          {
+            title: t("fields.categories"),
+            value: product.categories?.length ? product.categories.map((pcat) => /* @__PURE__ */ jsx7(
+              OrganizationTag,
+              {
+                label: pcat.name,
+                to: `/categories/${pcat.id}`
+              },
+              pcat.id
+            )) : void 0,
+            "data-testid": "product-categories-row"
+          }
+        )
+      ]
+    }
+  );
+};
+var OrganizationTag = ({ label, to }) => {
+  return /* @__PURE__ */ jsx7(Tooltip3, { content: label, children: /* @__PURE__ */ jsx7(Badge2, { size: "2xsmall", className: "block w-fit truncate", asChild: true, children: /* @__PURE__ */ jsx7(
+    Link2,
+    {
+      to,
+      "data-testid": `organization-tag-${label.toLowerCase().replace(/\s+/g, "-")}`,
+      children: label
+    }
+  ) }) });
+};
+
+// src/pages/products/product-detail/components/product-variant-section/product-variant-section.tsx
+import { useCallback, useMemo as useMemo2 } from "react";
+import { PencilSquare as PencilSquare5, Trash as Trash3 } from "@medusajs/icons";
+import {
+  Badge as Badge3,
+  Button as Button4,
+  Container as Container7,
+  createDataTableColumnHelper,
+  Heading as Heading7,
+  Tooltip as Tooltip4,
+  usePrompt as usePrompt4
+} from "@medusajs/ui";
+import { keepPreviousData } from "@tanstack/react-query";
+import { useTranslation as useTranslation8 } from "react-i18next";
+import { Link as Link3, useNavigate as useNavigate2, useSearchParams } from "react-router-dom";
+import { jsx as jsx8, jsxs as jsxs8 } from "react/jsx-runtime";
+var PAGE_SIZE = 10;
+var PREFIX = "pv";
+var ProductVariantSection = ({
+  product
+}) => {
+  const { t } = useTranslation8();
+  const { q, order, offset, created_at, updated_at } = useQueryParams(
+    ["q", "order", "offset", "created_at", "updated_at"],
+    PREFIX
+  );
+  const columns = useColumns(product);
+  const filters = useFilters();
+  const { variants, count, isPending, isError, error } = useProductVariants(
+    product.id,
+    {
+      q,
+      order: order ? order : "variant_rank",
+      offset: offset ? parseInt(offset) : void 0,
+      limit: PAGE_SIZE,
+      created_at: created_at ? JSON.parse(created_at) : void 0,
+      updated_at: updated_at ? JSON.parse(updated_at) : void 0,
+      fields: "title,sku,created_at,updated_at,*options,*options.option"
+    },
+    {
+      placeholderData: keepPreviousData
+    }
+  );
+  if (isError) {
+    throw error;
+  }
+  return /* @__PURE__ */ jsxs8(Container7, { className: "divide-y p-0", "data-testid": "product-variant-section", children: [
+    /* @__PURE__ */ jsxs8("div", { className: "flex items-center justify-between px-6 py-4", children: [
+      /* @__PURE__ */ jsx8(Heading7, { level: "h2", children: t("products.variants.header") }),
+      /* @__PURE__ */ jsx8(
+        Button4,
+        {
+          size: "small",
+          variant: "secondary",
+          asChild: true,
+          "data-testid": "product-variants-create-button",
+          children: /* @__PURE__ */ jsx8(Link3, { to: "variants/create", children: t("actions.create") })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx8("div", { "data-testid": "product-variants-table-container", children: /* @__PURE__ */ jsx8(
+      DataTable,
+      {
+        data: variants,
+        columns,
+        filters,
+        rowCount: count,
+        getRowId: (row) => row.id,
+        rowHref: (row) => `/products/${product.id}/variants/${row.id}`,
+        pageSize: PAGE_SIZE,
+        isLoading: isPending,
+        compact: true,
+        emptyState: {
+          empty: {
+            heading: t("products.variants.empty.heading"),
+            description: t("products.variants.empty.description")
+          },
+          filtered: {
+            heading: t("products.variants.filtered.heading"),
+            description: t("products.variants.filtered.description")
+          }
+        },
+        prefix: PREFIX
+      }
+    ) })
+  ] });
+};
+var columnHelper = createDataTableColumnHelper();
+var useColumns = (product) => {
+  const { t } = useTranslation8();
+  const navigate = useNavigate2();
+  const { mutateAsync } = useDeleteVariantLazy(product.id);
+  const prompt = usePrompt4();
+  const [searchParams] = useSearchParams();
+  const tableSearchParams = useMemo2(() => {
+    const filtered = new URLSearchParams();
+    for (const [key, value] of searchParams.entries()) {
+      if (key.startsWith(`${PREFIX}_`)) {
+        filtered.append(key, value);
+      }
+    }
+    return filtered;
+  }, [searchParams]);
+  const dateColumns = useDataTableDateColumns();
+  const handleDelete = useCallback(
+    async (id, title) => {
+      const res = await prompt({
+        title: t("general.areYouSure"),
+        description: t("products.deleteVariantWarning", {
+          title
+        }),
+        confirmText: t("actions.delete"),
+        cancelText: t("actions.cancel")
+      });
+      if (!res) {
+        return;
+      }
+      await mutateAsync({ variantId: id });
+    },
+    [mutateAsync, prompt, t]
+  );
+  const attributeColumns = useMemo2(() => {
+    const variantAttributes = product?.attributes?.filter((attr) => attr.is_variant_axis);
+    if (!variantAttributes?.length) {
+      return [];
+    }
+    return variantAttributes.map((attribute) => {
+      return columnHelper.display({
+        id: `attribute-${attribute.id}`,
+        header: attribute.name,
+        cell: ({ row }) => {
+          const variantOpt = row.original.options?.find(
+            (opt) => opt.option?.title === attribute.name
+          );
+          if (!variantOpt?.value) {
+            return /* @__PURE__ */ jsx8("span", { className: "text-ui-fg-muted", children: "-" });
+          }
+          return /* @__PURE__ */ jsx8(
+            "div",
+            {
+              className: "flex flex-wrap items-center gap-1",
+              "data-testid": `product-variant-attribute-${attribute.id}-${row.original.id}`,
+              children: /* @__PURE__ */ jsx8(Tooltip4, { content: variantOpt.value, children: /* @__PURE__ */ jsx8(
+                Badge3,
+                {
+                  size: "2xsmall",
+                  title: variantOpt.value,
+                  className: "inline-flex min-w-[20px] max-w-[140px] items-center justify-center overflow-hidden truncate",
+                  "data-testid": `product-variant-attribute-badge-${attribute.id}-${row.original.id}-${variantOpt.value}`,
+                  children: variantOpt.value
+                }
+              ) })
+            }
+          );
+        }
+      });
+    });
+  }, [product]);
+  const getActions = useCallback(
+    (ctx) => {
+      const variant = ctx.row.original;
+      const mainActions = [
+        {
+          icon: /* @__PURE__ */ jsx8(PencilSquare5, {}),
+          label: t("actions.edit"),
+          onClick: (row) => {
+            navigate(
+              `edit-variant?variant_id=${row.row.original.id}&${tableSearchParams.toString()}`,
+              {
+                state: {
+                  restore_params: tableSearchParams.toString()
+                }
+              }
+            );
+          }
+        }
+      ];
+      const secondaryActions = [
+        {
+          icon: /* @__PURE__ */ jsx8(Trash3, {}),
+          label: t("actions.delete"),
+          onClick: () => handleDelete(variant.id, variant.title)
+        }
+      ];
+      return [mainActions, secondaryActions];
+    },
+    [handleDelete, navigate, t, tableSearchParams]
+  );
+  return useMemo2(() => {
+    return [
+      columnHelper.accessor("title", {
+        header: t("fields.title"),
+        enableSorting: true,
+        sortAscLabel: t("filters.sorting.alphabeticallyAsc"),
+        sortDescLabel: t("filters.sorting.alphabeticallyDesc")
+      }),
+      columnHelper.accessor("sku", {
+        header: t("fields.sku"),
+        cell: ({ getValue }) => {
+          const value = getValue();
+          return value ? value : /* @__PURE__ */ jsx8("span", { className: "text-ui-fg-muted", children: "-" });
+        }
+      }),
+      ...attributeColumns,
+      ...dateColumns,
+      columnHelper.action({
+        actions: getActions
+      })
+    ];
+  }, [t, attributeColumns, dateColumns, getActions]);
+};
+var useFilters = () => {
+  const dateFilters = useDataTableDateFilters();
+  return useMemo2(() => {
+    return [
+      ...dateFilters
+    ];
+  }, [dateFilters]);
+};
+
+// src/pages/products/product-detail/product-detail.tsx
+import { jsx as jsx9, jsxs as jsxs9 } from "react/jsx-runtime";
+var Root = ({ children }) => {
+  const initialData = useLoaderData();
+  const { id } = useParams();
+  const {
+    product: rawProduct,
+    isLoading,
+    isError,
+    error
+  } = useProduct(id, PRODUCT_DETAIL_QUERY, {
+    initialData
+  });
+  const product = rawProduct;
+  if (isLoading || !product) {
+    return /* @__PURE__ */ jsx9(
+      TwoColumnPageSkeleton,
+      {
+        mainSections: 4,
+        sidebarSections: 3,
+        showJSON: true,
+        showMetadata: true
+      }
+    );
+  }
+  if (isError) {
+    throw error;
+  }
+  return Children.count(children) > 0 ? /* @__PURE__ */ jsx9(
+    TwoColumnPage,
+    {
+      data: product,
+      showJSON: true,
+      showMetadata: true,
+      "data-testid": "product-detail-page",
+      children
+    }
+  ) : /* @__PURE__ */ jsxs9(
+    TwoColumnPage,
+    {
+      data: product,
+      showJSON: true,
+      showMetadata: true,
+      "data-testid": "product-detail-page",
+      children: [
+        /* @__PURE__ */ jsxs9(TwoColumnPage.Main, { "data-testid": "product-detail-main", children: [
+          /* @__PURE__ */ jsx9(ProductActiveRequestSection, { product }),
+          /* @__PURE__ */ jsx9(ProductActiveEditSection, { product }),
+          /* @__PURE__ */ jsx9(ProductGeneralSection, { product }),
+          /* @__PURE__ */ jsx9(ProductMediaSection, { product }),
+          /* @__PURE__ */ jsx9(ProductVariantSection, { product })
+        ] }),
+        /* @__PURE__ */ jsxs9(TwoColumnPage.Sidebar, { "data-testid": "product-detail-sidebar", children: [
+          /* @__PURE__ */ jsx9(ProductOrganizationSection, { product }),
+          /* @__PURE__ */ jsx9(ProductAttributeSection, { product })
+        ] })
+      ]
+    }
+  );
+};
+var ProductDetailPage = Object.assign(Root, {
+  Main: TwoColumnPage.Main,
+  Sidebar: TwoColumnPage.Sidebar,
+  MainActiveRequestSection: ProductActiveRequestSection,
+  MainActiveEditSection: ProductActiveEditSection,
+  MainGeneralSection: ProductGeneralSection,
+  MainMediaSection: ProductMediaSection,
+  MainAttributeSection: ProductAttributeSection,
+  MainVariantSection: ProductVariantSection,
+  SidebarOrganizationSection: ProductOrganizationSection
+});
+
+export {
+  ProductDetailPage
+};