@mercurjs/admin 2.2.0-canary.15 → 2.2.0-canary.17

package/dist/offer-detail-page-2DG3W7VG.js

@@ -0,0 +1,572 @@
+import "./chunk-4FHHNYIV.js";
+import {
+  OFFER_PRODUCT_DETAIL_FIELDS
+} from "./chunk-S6A4FVM2.js";
+import {
+  useBulkDeleteOffers
+} from "./chunk-UIVWOKWT.js";
+import "./chunk-PXYDR7WQ.js";
+import "./chunk-PHOCVOZ5.js";
+import "./chunk-FQERBIVS.js";
+import "./chunk-NQEXDLYH.js";
+import "./chunk-YN3FGNJM.js";
+import "./chunk-KAZ5BYTQ.js";
+import "./chunk-634XVU3D.js";
+import "./chunk-IQPN4PZJ.js";
+import {
+  ProductMediaSection
+} from "./chunk-AWLDIHXR.js";
+import "./chunk-FI474ADU.js";
+import {
+  SectionRow
+} from "./chunk-3XPXUIK3.js";
+import {
+  useDataTableDateFilters
+} from "./chunk-DGCPYCHU.js";
+import {
+  TwoColumnPage
+} from "./chunk-E74OUNA3.js";
+import {
+  Thumbnail
+} from "./chunk-WIYFXWRI.js";
+import "./chunk-H6MYB7GB.js";
+import {
+  useDate
+} from "./chunk-UZWFZMOX.js";
+import "./chunk-XQNVC4Q7.js";
+import {
+  DataTable
+} from "./chunk-C4XKPQ6T.js";
+import {
+  useQueryParams
+} from "./chunk-THHRRYRS.js";
+import {
+  ActionMenu
+} from "./chunk-BDGZ4EQO.js";
+import "./chunk-LAVHRER2.js";
+import "./chunk-Y7QKP6QU.js";
+import {
+  TwoColumnPageSkeleton
+} from "./chunk-INNFZYX2.js";
+import {
+  useProduct
+} from "./chunk-M2E3PKA4.js";
+import "./chunk-RHKRREUU.js";
+import "./chunk-ZA2KFUFR.js";
+import "./chunk-ZBWL72TB.js";
+import "./chunk-NBMM2TZK.js";
+
+// src/pages/offers/[id]/offer-detail-page.tsx
+import { Children } from "react";
+import { useLoaderData, useParams } from "react-router-dom";
+
+// src/pages/offers/[id]/_components/offer-detail-general-section.tsx
+import { Trash } from "@medusajs/icons";
+import { Container, Heading, StatusBadge, toast, usePrompt } from "@medusajs/ui";
+import { useTranslation } from "react-i18next";
+import { useNavigate } from "react-router-dom";
+import { jsx, jsxs } from "react/jsx-runtime";
+var productStatusColor = (status) => {
+  switch (status) {
+    case "published":
+      return "green";
+    case "rejected":
+      return "red";
+    case "proposed":
+      return "orange";
+    default:
+      return "grey";
+  }
+};
+var OfferDetailGeneralSection = ({
+  product
+}) => {
+  const { t } = useTranslation();
+  const prompt = usePrompt();
+  const navigate = useNavigate();
+  const { mutateAsync: bulkDelete } = useBulkDeleteOffers();
+  const offerIds = (product.variants ?? []).flatMap(
+    (v) => (v.offers ?? []).map((o) => o.id)
+  );
+  const handleDelete = async () => {
+    if (!offerIds.length) {
+      return;
+    }
+    const confirmed = await prompt({
+      title: t("general.areYouSure"),
+      description: t("offers.bulkDelete.description", { count: offerIds.length }),
+      confirmText: t("actions.delete"),
+      cancelText: t("actions.cancel"),
+      variant: "danger"
+    });
+    if (!confirmed) {
+      return;
+    }
+    const result = await bulkDelete(offerIds);
+    if (result.failed.length === 0) {
+      toast.success(
+        t("offers.bulkDelete.successToast", { count: result.succeeded.length })
+      );
+      navigate("/offers");
+    } else {
+      toast.warning(
+        t("offers.bulkDelete.errorToast", {
+          message: `${result.succeeded.length}/${offerIds.length} succeeded`
+        })
+      );
+    }
+  };
+  return /* @__PURE__ */ jsxs(Container, { className: "divide-y p-0", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-6 py-4", children: [
+      /* @__PURE__ */ jsx(Heading, { children: product.title }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-x-4", children: [
+        product.status && /* @__PURE__ */ jsx(StatusBadge, { color: productStatusColor(product.status), children: t(`products.productStatus.${product.status}`) }),
+        /* @__PURE__ */ jsx(
+          ActionMenu,
+          {
+            groups: [
+              {
+                actions: [
+                  {
+                    label: t("actions.delete"),
+                    onClick: handleDelete,
+                    icon: /* @__PURE__ */ jsx(Trash, {}),
+                    disabled: offerIds.length === 0
+                  }
+                ]
+              }
+            ]
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(
+      SectionRow,
+      {
+        title: t("fields.description"),
+        value: product.description || "-"
+      }
+    ),
+    /* @__PURE__ */ jsx(SectionRow, { title: t("fields.subtitle"), value: product.subtitle || "-" }),
+    /* @__PURE__ */ jsx(
+      SectionRow,
+      {
+        title: t("fields.handle"),
+        value: product.handle ? `/${product.handle}` : "-"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      SectionRow,
+      {
+        title: t("fields.discountable"),
+        value: product.discountable ? t("fields.true") : t("fields.false")
+      }
+    )
+  ] });
+};
+
+// src/pages/offers/[id]/_components/offer-variants-section.tsx
+import { Component, Trash as Trash2 } from "@medusajs/icons";
+import {
+  Badge,
+  clx,
+  Container as Container2,
+  createDataTableColumnHelper,
+  Heading as Heading2,
+  toast as toast2,
+  Tooltip,
+  usePrompt as usePrompt2
+} from "@medusajs/ui";
+import { useCallback, useMemo } from "react";
+import { useTranslation as useTranslation2 } from "react-i18next";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var PAGE_SIZE = 10;
+var PREFIX = "ov";
+var skuOf = (row) => row.offer.sku ?? row.variant.sku ?? "";
+var inventoryOf = (offer) => {
+  const links = offer.inventory_item_link ?? [];
+  let available = 0;
+  const locations = /* @__PURE__ */ new Set();
+  for (const link of links) {
+    for (const level of link.inventory_item?.location_levels ?? []) {
+      available += level.stocked_quantity ?? 0;
+      if (level.location_id) {
+        locations.add(level.location_id);
+      }
+    }
+  }
+  return {
+    hasItems: links.length > 0,
+    // More than one backing inventory item ⇒ the offer is an inventory kit.
+    isKit: links.length > 1,
+    available,
+    locationCount: locations.size
+  };
+};
+var matchesDateFilter = (value, filter) => {
+  if (!value) {
+    return false;
+  }
+  const time = new Date(value).getTime();
+  if (Number.isNaN(time)) {
+    return false;
+  }
+  if (filter.$gte && time < new Date(filter.$gte).getTime()) {
+    return false;
+  }
+  if (filter.$lte && time > new Date(filter.$lte).getTime()) {
+    return false;
+  }
+  return true;
+};
+var columnHelper = createDataTableColumnHelper();
+var useColumns = ({
+  optionTitles,
+  thumbnail,
+  getActions
+}) => {
+  const { t } = useTranslation2();
+  const { getFullDate } = useDate();
+  return useMemo(
+    () => [
+      columnHelper.display({
+        id: "thumbnail",
+        header: "",
+        // Variant-level images aren't carried by the `withOffers` wrap, so
+        // every row falls back to the product thumbnail.
+        cell: () => /* @__PURE__ */ jsx2("div", { className: "flex items-center", children: /* @__PURE__ */ jsx2(Thumbnail, { src: thumbnail ?? null }) })
+      }),
+      // Admin-only Store column — rows can span sellers on the platform-wide
+      // offer surface, so the store disambiguates them.
+      columnHelper.accessor((row) => row.offer.seller?.name ?? "", {
+        id: "store",
+        header: t("offers.fields.store"),
+        enableSorting: true,
+        sortAscLabel: t("filters.sorting.alphabeticallyAsc"),
+        sortDescLabel: t("filters.sorting.alphabeticallyDesc"),
+        cell: ({ getValue }) => getValue() || /* @__PURE__ */ jsx2("span", { className: "text-ui-fg-muted", children: "-" })
+      }),
+      columnHelper.accessor((row) => row.variant.title ?? "", {
+        id: "title",
+        header: t("fields.title"),
+        enableSorting: true,
+        sortAscLabel: t("filters.sorting.alphabeticallyAsc"),
+        sortDescLabel: t("filters.sorting.alphabeticallyDesc"),
+        cell: ({ getValue }) => getValue() || /* @__PURE__ */ jsx2("span", { className: "text-ui-fg-muted", children: "-" })
+      }),
+      columnHelper.accessor((row) => skuOf(row), {
+        id: "sku",
+        header: t("fields.sku"),
+        enableSorting: true,
+        sortAscLabel: t("filters.sorting.alphabeticallyAsc"),
+        sortDescLabel: t("filters.sorting.alphabeticallyDesc"),
+        cell: ({ getValue }) => getValue() || /* @__PURE__ */ jsx2("span", { className: "text-ui-fg-muted", children: "-" })
+      }),
+      ...optionTitles.map(
+        (title) => columnHelper.display({
+          id: `option-${title}`,
+          header: title,
+          cell: ({ row }) => {
+            const opt = row.original.variant.options?.find(
+              (o) => o.option?.title === title
+            );
+            return opt?.value ? /* @__PURE__ */ jsx2(Badge, { size: "2xsmall", children: opt.value }) : /* @__PURE__ */ jsx2("span", { className: "text-ui-fg-muted", children: "-" });
+          }
+        })
+      ),
+      columnHelper.display({
+        id: "inventory",
+        header: t("fields.inventory"),
+        cell: ({ row }) => {
+          const { hasItems, isKit, available, locationCount } = inventoryOf(
+            row.original.offer
+          );
+          if (!hasItems) {
+            return /* @__PURE__ */ jsx2("span", { className: "text-ui-fg-muted", children: "-" });
+          }
+          const text = t("products.variant.tableItem", {
+            availableCount: available,
+            locationCount,
+            count: locationCount
+          });
+          return /* @__PURE__ */ jsx2(Tooltip, { content: text, children: /* @__PURE__ */ jsxs2("div", { className: "flex h-full w-full items-center gap-2 overflow-hidden", children: [
+            isKit && /* @__PURE__ */ jsx2(Component, { className: "text-ui-fg-subtle" }),
+            /* @__PURE__ */ jsx2(
+              "span",
+              {
+                className: clx("truncate", {
+                  "text-ui-fg-error": available === 0
+                }),
+                children: text
+              }
+            )
+          ] }) });
+        }
+      }),
+      columnHelper.accessor((row) => row.offer.created_at, {
+        id: "created_at",
+        header: t("fields.createdAt"),
+        enableSorting: true,
+        sortAscLabel: t("filters.sorting.dateAsc"),
+        sortDescLabel: t("filters.sorting.dateDesc"),
+        cell: ({ getValue }) => {
+          const date = getValue();
+          if (!date) {
+            return /* @__PURE__ */ jsx2("span", { className: "text-ui-fg-muted", children: "-" });
+          }
+          return /* @__PURE__ */ jsx2(Tooltip, { content: getFullDate({ date, includeTime: true }), children: /* @__PURE__ */ jsx2("span", { children: getFullDate({ date }) }) });
+        }
+      }),
+      columnHelper.accessor((row) => row.offer.updated_at, {
+        id: "updated_at",
+        header: t("fields.updatedAt"),
+        enableSorting: true,
+        sortAscLabel: t("filters.sorting.dateAsc"),
+        sortDescLabel: t("filters.sorting.dateDesc"),
+        cell: ({ getValue }) => {
+          const date = getValue();
+          if (!date) {
+            return /* @__PURE__ */ jsx2("span", { className: "text-ui-fg-muted", children: "-" });
+          }
+          return /* @__PURE__ */ jsx2(Tooltip, { content: getFullDate({ date, includeTime: true }), children: /* @__PURE__ */ jsx2("span", { children: getFullDate({ date }) }) });
+        }
+      }),
+      columnHelper.action({ actions: getActions })
+    ],
+    [t, optionTitles, thumbnail, getActions, getFullDate]
+  );
+};
+var OfferVariantsSection = ({
+  variants,
+  thumbnail
+}) => {
+  const { t } = useTranslation2();
+  const prompt = usePrompt2();
+  const { mutateAsync: bulkDelete } = useBulkDeleteOffers();
+  const { q, order, offset, created_at, updated_at } = useQueryParams(
+    ["q", "order", "offset", "created_at", "updated_at"],
+    PREFIX
+  );
+  const allRows = useMemo(
+    () => (variants ?? []).flatMap(
+      (variant) => (variant.offers ?? []).map((offer) => ({
+        id: offer.id,
+        variant,
+        offer
+      }))
+    ),
+    [variants]
+  );
+  const optionTitles = useMemo(() => {
+    const set = /* @__PURE__ */ new Set();
+    for (const variant of variants ?? []) {
+      for (const opt of variant.options ?? []) {
+        if (opt.option?.title) {
+          set.add(opt.option.title);
+        }
+      }
+    }
+    return Array.from(set);
+  }, [variants]);
+  const filteredRows = useMemo(() => {
+    let rows = allRows;
+    const search = q?.trim().toLowerCase();
+    if (search) {
+      rows = rows.filter((row) => {
+        const title = (row.variant.title ?? "").toLowerCase();
+        const store = (row.offer.seller?.name ?? "").toLowerCase();
+        return title.includes(search) || store.includes(search) || skuOf(row).toLowerCase().includes(search);
+      });
+    }
+    const createdFilter = created_at ? JSON.parse(created_at) : null;
+    if (createdFilter) {
+      rows = rows.filter(
+        (row) => matchesDateFilter(row.offer.created_at, createdFilter)
+      );
+    }
+    const updatedFilter = updated_at ? JSON.parse(updated_at) : null;
+    if (updatedFilter) {
+      rows = rows.filter(
+        (row) => matchesDateFilter(row.offer.updated_at, updatedFilter)
+      );
+    }
+    return rows;
+  }, [allRows, q, created_at, updated_at]);
+  const sortedRows = useMemo(() => {
+    if (!order) {
+      return filteredRows;
+    }
+    const desc = order.startsWith("-");
+    const key = desc ? order.slice(1) : order;
+    const valueOf = (row) => {
+      switch (key) {
+        case "store":
+          return row.offer.seller?.name ?? "";
+        case "title":
+          return row.variant.title ?? "";
+        case "sku":
+          return skuOf(row);
+        case "created_at":
+          return row.offer.created_at ? new Date(row.offer.created_at).toISOString() : "";
+        case "updated_at":
+          return row.offer.updated_at ? new Date(row.offer.updated_at).toISOString() : "";
+        default:
+          return "";
+      }
+    };
+    const sorted = [...filteredRows].sort(
+      (a, b) => valueOf(a).localeCompare(valueOf(b))
+    );
+    return desc ? sorted.reverse() : sorted;
+  }, [filteredRows, order]);
+  const pageIndex = offset ? Math.floor(parseInt(offset) / PAGE_SIZE) : 0;
+  const pageRows = useMemo(
+    () => sortedRows.slice(pageIndex * PAGE_SIZE, (pageIndex + 1) * PAGE_SIZE),
+    [sortedRows, pageIndex]
+  );
+  const handleDelete = useCallback(
+    async (offerId, sku) => {
+      const confirmed = await prompt({
+        title: t("general.areYouSure"),
+        description: t("offers.delete.description", { sku: sku || "-" }),
+        confirmText: t("actions.delete"),
+        cancelText: t("actions.cancel"),
+        variant: "danger"
+      });
+      if (!confirmed) {
+        return;
+      }
+      const result = await bulkDelete([offerId]);
+      if (result.failed.length === 0) {
+        toast2.success(t("offers.delete.successToast"));
+      } else {
+        toast2.error(result.failed[0]?.error.message);
+      }
+    },
+    [prompt, bulkDelete, t]
+  );
+  const getActions = useCallback(
+    (ctx) => {
+      const row = ctx.row.original;
+      return [
+        [
+          {
+            icon: /* @__PURE__ */ jsx2(Trash2, {}),
+            label: t("actions.delete"),
+            onClick: () => handleDelete(row.offer.id, skuOf(row))
+          }
+        ]
+      ];
+    },
+    [handleDelete, t]
+  );
+  const columns = useColumns({ optionTitles, thumbnail, getActions });
+  const filters = useDataTableDateFilters();
+  return /* @__PURE__ */ jsxs2(Container2, { className: "divide-y p-0", "data-testid": "offer-variants-section", children: [
+    /* @__PURE__ */ jsx2("div", { className: "flex items-center justify-between px-6 py-4", children: /* @__PURE__ */ jsx2(Heading2, { level: "h2", children: t("offers.fields.variants") }) }),
+    /* @__PURE__ */ jsx2(
+      DataTable,
+      {
+        data: pageRows,
+        columns,
+        filters,
+        getRowId: (row) => row.id,
+        rowHref: (row) => `variants/${row.id}`,
+        rowCount: sortedRows.length,
+        pageSize: PAGE_SIZE,
+        prefix: PREFIX,
+        compact: true,
+        emptyState: {
+          empty: {
+            heading: t("offers.empty.heading"),
+            description: t("offers.empty.description")
+          },
+          filtered: {
+            heading: t("offers.filtered.heading"),
+            description: t("offers.filtered.description")
+          }
+        }
+      }
+    )
+  ] });
+};
+
+// src/pages/offers/[id]/_components/offer-associated-product-section.tsx
+import { TriangleRightMini } from "@medusajs/icons";
+import { Container as Container3, Heading as Heading3 } from "@medusajs/ui";
+import { useTranslation as useTranslation3 } from "react-i18next";
+import { Link } from "react-router-dom";
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+var OfferAssociatedProductSection = ({
+  product
+}) => {
+  const { t } = useTranslation3();
+  return /* @__PURE__ */ jsxs3(Container3, { className: "p-0", "data-testid": "offer-associated-product-section", children: [
+    /* @__PURE__ */ jsx3("div", { className: "flex items-center justify-between px-6 py-4", children: /* @__PURE__ */ jsx3(Heading3, { level: "h2", children: t("offers.detail.associatedProduct") }) }),
+    /* @__PURE__ */ jsx3("div", { className: "txt-small flex flex-col gap-2 px-2 pb-2", children: /* @__PURE__ */ jsx3(
+      Link,
+      {
+        to: `/products/${product.id}`,
+        className: "outline-none focus-within:shadow-borders-interactive-with-focus rounded-md [&:hover>div]:bg-ui-bg-component-hover",
+        "data-testid": "offer-associated-product-link",
+        children: /* @__PURE__ */ jsx3("div", { className: "shadow-elevation-card-rest bg-ui-bg-component rounded-md px-4 py-2 transition-colors", children: /* @__PURE__ */ jsxs3("div", { className: "flex items-center gap-3", children: [
+          /* @__PURE__ */ jsx3("div", { className: "shadow-elevation-card-rest rounded-md", children: /* @__PURE__ */ jsx3(Thumbnail, { src: product.thumbnail ?? null }) }),
+          /* @__PURE__ */ jsxs3("div", { className: "flex flex-1 flex-col overflow-hidden", children: [
+            /* @__PURE__ */ jsx3("span", { className: "text-ui-fg-base truncate font-medium", children: product.title }),
+            product.handle && /* @__PURE__ */ jsxs3("span", { className: "text-ui-fg-subtle truncate", children: [
+              "/",
+              product.handle
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx3("div", { className: "size-7 flex items-center justify-center", children: /* @__PURE__ */ jsx3(TriangleRightMini, { className: "text-ui-fg-muted rtl:rotate-180" }) })
+        ] }) })
+      }
+    ) })
+  ] });
+};
+
+// src/pages/offers/[id]/offer-detail-page.tsx
+import { Fragment, jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+var Root = ({ children }) => {
+  const { id } = useParams();
+  const initialData = useLoaderData();
+  const { product, isLoading, isError, error } = useProduct(
+    id,
+    { fields: OFFER_PRODUCT_DETAIL_FIELDS },
+    { initialData }
+  );
+  if (isError) {
+    throw error;
+  }
+  if (isLoading || !product) {
+    return /* @__PURE__ */ jsx4(TwoColumnPageSkeleton, { mainSections: 3, sidebarSections: 1 });
+  }
+  const typed = product;
+  return /* @__PURE__ */ jsx4(Fragment, { children: Children.count(children) > 0 ? children : /* @__PURE__ */ jsxs4(TwoColumnPage, { data: typed, hasOutlet: true, children: [
+    /* @__PURE__ */ jsxs4(TwoColumnPage.Main, { children: [
+      /* @__PURE__ */ jsx4(OfferDetailGeneralSection, { product: typed }),
+      /* @__PURE__ */ jsx4(ProductMediaSection, { product: typed, readOnly: true }),
+      /* @__PURE__ */ jsx4(
+        OfferVariantsSection,
+        {
+          variants: typed.variants,
+          thumbnail: typed.thumbnail
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx4(TwoColumnPage.Sidebar, { children: /* @__PURE__ */ jsx4(OfferAssociatedProductSection, { product: typed }) })
+  ] }) });
+};
+var OfferDetailPage = Object.assign(Root, {
+  Main: TwoColumnPage.Main,
+  Sidebar: TwoColumnPage.Sidebar,
+  General: OfferDetailGeneralSection,
+  Media: ProductMediaSection,
+  Variants: OfferVariantsSection,
+  AssociatedProduct: OfferAssociatedProductSection
+});
+var Component2 = Root;
+export {
+  Component2 as Component,
+  OfferDetailPage
+};