@mercurjs/admin 2.0.0-canary.34 → 2.0.0-canary.35

package/dist/chunk-4GVHNYZR.js

@@ -0,0 +1,294 @@
+import {
+  useProductTableColumns
+} from "./chunk-3CKTAFTR.js";
+import {
+  _DataTable,
+  useDataTable
+} from "./chunk-ULJ3OMWU.js";
+import {
+  SingleColumnPage
+} from "./chunk-U2UCL2VG.js";
+import {
+  ActionMenu
+} from "./chunk-BDGZ4EQO.js";
+import {
+  useProductTableFilters
+} from "./chunk-FBUH5OLD.js";
+import {
+  useProductTableQuery
+} from "./chunk-VVWB3GIK.js";
+import {
+  useDeleteProduct,
+  useProducts
+} from "./chunk-K357FGGP.js";
+
+// src/pages/products/product-list/product-list.tsx
+import { Children as Children2 } from "react";
+
+// src/pages/products/product-list/components/product-list-table/product-list-table.tsx
+import { PencilSquare, Trash } from "@medusajs/icons";
+import { Button, Container, Heading, toast, usePrompt } from "@medusajs/ui";
+import { keepPreviousData } from "@tanstack/react-query";
+import { createColumnHelper } from "@tanstack/react-table";
+import { Children, useMemo } from "react";
+import { useTranslation } from "react-i18next";
+import { Link, Outlet, useLoaderData, useLocation } from "react-router-dom";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var PAGE_SIZE = 20;
+var ProductListTitle = () => {
+  const { t } = useTranslation();
+  return /* @__PURE__ */ jsx(Heading, { level: "h2", "data-testid": "products-list-title", children: t("products.domain") });
+};
+var ProductListCreateButton = () => {
+  const { t } = useTranslation();
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      size: "small",
+      variant: "secondary",
+      asChild: true,
+      "data-testid": "products-create-button",
+      children: /* @__PURE__ */ jsx(Link, { to: "create", "data-testid": "products-create-link", children: t("actions.create") })
+    }
+  );
+};
+var ProductListExportButton = () => {
+  const { t } = useTranslation();
+  const location = useLocation();
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      size: "small",
+      variant: "secondary",
+      asChild: true,
+      "data-testid": "products-export-button",
+      children: /* @__PURE__ */ jsx(
+        Link,
+        {
+          to: `export${location.search}`,
+          "data-testid": "products-export-link",
+          children: t("actions.export")
+        }
+      )
+    }
+  );
+};
+var ProductListImportButton = () => {
+  const { t } = useTranslation();
+  const location = useLocation();
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      size: "small",
+      variant: "secondary",
+      asChild: true,
+      "data-testid": "products-import-button",
+      children: /* @__PURE__ */ jsx(
+        Link,
+        {
+          to: `import${location.search}`,
+          "data-testid": "products-import-link",
+          children: t("actions.import")
+        }
+      )
+    }
+  );
+};
+var ProductListActions = ({ children }) => {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: "flex items-center justify-center gap-x-2",
+      "data-testid": "products-list-actions",
+      children: Children.count(children) > 0 ? children : /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(ProductListExportButton, {}),
+        /* @__PURE__ */ jsx(ProductListImportButton, {}),
+        /* @__PURE__ */ jsx(ProductListCreateButton, {})
+      ] })
+    }
+  );
+};
+var ProductListHeader = ({ children }) => {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: "flex items-center justify-between px-6 py-4",
+      "data-testid": "products-list-header",
+      children: Children.count(children) > 0 ? children : /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(ProductListTitle, {}),
+        /* @__PURE__ */ jsx(ProductListActions, {})
+      ] })
+    }
+  );
+};
+var ProductListDataTable = () => {
+  const { t } = useTranslation();
+  const initialData = useLoaderData();
+  const { searchParams, raw } = useProductTableQuery({ pageSize: PAGE_SIZE });
+  const { products, count, isLoading, isError, error } = useProducts(
+    {
+      ...searchParams,
+      is_giftcard: false
+    },
+    {
+      initialData,
+      placeholderData: keepPreviousData
+    }
+  );
+  const filters = useProductTableFilters();
+  const columns = useColumns();
+  const { table } = useDataTable({
+    data: products ?? [],
+    columns,
+    count,
+    enablePagination: true,
+    pageSize: PAGE_SIZE,
+    getRowId: (row) => row.id
+  });
+  if (isError) {
+    throw error;
+  }
+  return /* @__PURE__ */ jsx("div", { "data-testid": "products-data-table", children: /* @__PURE__ */ jsx(
+    _DataTable,
+    {
+      table,
+      columns,
+      count,
+      pageSize: PAGE_SIZE,
+      filters,
+      search: true,
+      pagination: true,
+      isLoading,
+      queryObject: raw,
+      navigateTo: (row) => `${row.original.id}`,
+      orderBy: [
+        { key: "title", label: t("fields.title") },
+        { key: "created_at", label: t("fields.createdAt") },
+        { key: "updated_at", label: t("fields.updatedAt") }
+      ],
+      noRecords: {
+        message: t("products.list.noRecordsMessage")
+      }
+    }
+  ) });
+};
+var ProductListTable = ({ children }) => {
+  return /* @__PURE__ */ jsxs(Container, { className: "divide-y p-0", "data-testid": "products-list-table", children: [
+    Children.count(children) > 0 ? children : /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(ProductListHeader, {}),
+      /* @__PURE__ */ jsx(ProductListDataTable, {})
+    ] }),
+    /* @__PURE__ */ jsx(Outlet, {})
+  ] });
+};
+var ProductActions = ({ product }) => {
+  const { t } = useTranslation();
+  const prompt = usePrompt();
+  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: () => {
+        toast.success(t("products.toasts.delete.success.header"), {
+          description: t("products.toasts.delete.success.description", {
+            title: product.title
+          })
+        });
+      },
+      onError: (e) => {
+        toast.error(t("products.toasts.delete.error.header"), {
+          description: e.message
+        });
+      }
+    });
+  };
+  return /* @__PURE__ */ jsx(
+    ActionMenu,
+    {
+      groups: [
+        {
+          actions: [
+            {
+              icon: /* @__PURE__ */ jsx(PencilSquare, {}),
+              label: t("actions.edit"),
+              to: `/products/${product.id}/edit`
+            }
+          ]
+        },
+        {
+          actions: [
+            {
+              icon: /* @__PURE__ */ jsx(Trash, {}),
+              label: t("actions.delete"),
+              onClick: handleDelete
+            }
+          ]
+        }
+      ],
+      "data-testid": `product-actions-${product.id}`
+    }
+  );
+};
+var columnHelper = createColumnHelper();
+var useColumns = () => {
+  const base = useProductTableColumns();
+  const columns = useMemo(
+    () => [
+      ...base,
+      columnHelper.display({
+        id: "seller",
+        header: "Seller",
+        cell: ({ row }) => {
+          const seller = row.original.seller;
+          return seller?.name || "-";
+        }
+      }),
+      columnHelper.display({
+        id: "actions",
+        header: () => /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "flex h-full w-full items-center",
+            "data-testid": "products-table-header-actions",
+            children: /* @__PURE__ */ jsx("span", { "data-testid": "products-table-header-actions-text" })
+          }
+        ),
+        cell: ({ row }) => {
+          return /* @__PURE__ */ jsx(ProductActions, { product: row.original });
+        }
+      })
+    ],
+    [base]
+  );
+  return columns;
+};
+
+// src/pages/products/product-list/product-list.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+var Root = ({ children }) => {
+  return /* @__PURE__ */ jsx2("div", { "data-testid": "products-page", children: /* @__PURE__ */ jsx2(SingleColumnPage, { children: Children2.count(children) > 0 ? children : /* @__PURE__ */ jsx2(ProductListTable, {}) }) });
+};
+var ProductListPage = Object.assign(Root, {
+  Table: ProductListTable,
+  Header: ProductListHeader,
+  HeaderTitle: ProductListTitle,
+  HeaderActions: ProductListActions,
+  HeaderCreateButton: ProductListCreateButton,
+  HeaderExportButton: ProductListExportButton,
+  HeaderImportButton: ProductListImportButton,
+  DataTable: ProductListDataTable
+});
+
+export {
+  ProductListPage
+};

package/dist/chunk-4WYBW3HK.js

@@ -0,0 +1,209 @@
+import {
+  useCollectionTableColumns
+} from "./chunk-JQV7CXEC.js";
+import {
+  _DataTable,
+  useDataTable
+} from "./chunk-ULJ3OMWU.js";
+import {
+  SingleColumnPage
+} from "./chunk-U2UCL2VG.js";
+import {
+  ActionMenu
+} from "./chunk-BDGZ4EQO.js";
+import {
+  useCollectionTableFilters
+} from "./chunk-YMKZS2HK.js";
+import {
+  useCollectionTableQuery
+} from "./chunk-TKEAOWBZ.js";
+import {
+  useCollections,
+  useDeleteCollection
+} from "./chunk-TQI3DOQ5.js";
+
+// src/pages/collections/collection-list/collection-list.tsx
+import { Children as Children3 } from "react";
+
+// src/pages/collections/collection-list/components/collection-list-table/collection-list-table.tsx
+import { Children as Children2 } from "react";
+import { Container } from "@medusajs/ui";
+
+// src/pages/collections/collection-list/components/collection-list-table/collection-list-header.tsx
+import { Children } from "react";
+import { Button, Heading, Text } from "@medusajs/ui";
+import { useTranslation } from "react-i18next";
+import { Link } from "react-router-dom";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var CollectionListTitle = () => {
+  const { t } = useTranslation();
+  return /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsx(Heading, { children: t("collections.domain") }),
+    /* @__PURE__ */ jsx(Text, { className: "text-ui-fg-subtle", size: "small", children: t("collections.subtitle") })
+  ] });
+};
+var CollectionListActions = ({
+  children
+}) => {
+  const { t } = useTranslation();
+  return /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center gap-x-2", children: Children.count(children) > 0 ? children : /* @__PURE__ */ jsx(Link, { to: "/collections/create", children: /* @__PURE__ */ jsx(Button, { size: "small", variant: "secondary", children: t("actions.create") }) }) });
+};
+var CollectionListHeader = ({
+  children
+}) => {
+  return /* @__PURE__ */ jsx("div", { className: "flex items-center justify-between px-6 py-4", children: Children.count(children) > 0 ? children : /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(CollectionListTitle, {}),
+    /* @__PURE__ */ jsx(CollectionListActions, {})
+  ] }) });
+};
+
+// src/pages/collections/collection-list/components/collection-list-table/collection-list-data-table.tsx
+import { keepPreviousData } from "@tanstack/react-query";
+import { createColumnHelper } from "@tanstack/react-table";
+import { useMemo } from "react";
+import { useTranslation as useTranslation3 } from "react-i18next";
+
+// src/pages/collections/collection-list/components/collection-list-table/collection-row-actions.tsx
+import { PencilSquare, Trash } from "@medusajs/icons";
+import { usePrompt } from "@medusajs/ui";
+import { useTranslation as useTranslation2 } from "react-i18next";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var CollectionRowActions = ({
+  collection
+}) => {
+  const { t } = useTranslation2();
+  const prompt = usePrompt();
+  const { mutateAsync } = useDeleteCollection(collection.id);
+  const handleDeleteCollection = async () => {
+    const res = await prompt({
+      title: t("general.areYouSure"),
+      description: t("collections.deleteWarning", {
+        title: collection.title
+      }),
+      verificationText: collection.title,
+      verificationInstruction: t("general.typeToConfirm"),
+      confirmText: t("actions.delete"),
+      cancelText: t("actions.cancel")
+    });
+    if (!res) {
+      return;
+    }
+    await mutateAsync();
+  };
+  return /* @__PURE__ */ jsx2(
+    ActionMenu,
+    {
+      groups: [
+        {
+          actions: [
+            {
+              label: t("actions.edit"),
+              to: `/collections/${collection.id}/edit`,
+              icon: /* @__PURE__ */ jsx2(PencilSquare, {})
+            }
+          ]
+        },
+        {
+          actions: [
+            {
+              label: t("actions.delete"),
+              onClick: handleDeleteCollection,
+              icon: /* @__PURE__ */ jsx2(Trash, {}),
+              disabled: !collection.id
+            }
+          ]
+        }
+      ]
+    }
+  );
+};
+
+// src/pages/collections/collection-list/components/collection-list-table/collection-list-data-table.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+var PAGE_SIZE = 20;
+var CollectionListDataTable = () => {
+  const { t } = useTranslation3();
+  const { searchParams, raw } = useCollectionTableQuery({ pageSize: PAGE_SIZE });
+  const { collections, count, isError, error, isLoading } = useCollections(
+    {
+      ...searchParams,
+      fields: "+products.id"
+    },
+    {
+      placeholderData: keepPreviousData
+    }
+  );
+  const filters = useCollectionTableFilters();
+  const columns = useColumns();
+  const { table } = useDataTable({
+    data: collections ?? [],
+    columns,
+    count,
+    enablePagination: true,
+    getRowId: (row, index) => row.id ?? `${index}`,
+    pageSize: PAGE_SIZE
+  });
+  if (isError) {
+    throw error;
+  }
+  return /* @__PURE__ */ jsx3(
+    _DataTable,
+    {
+      table,
+      columns,
+      pageSize: PAGE_SIZE,
+      count,
+      filters,
+      orderBy: [
+        { key: "title", label: t("fields.title") },
+        { key: "handle", label: t("fields.handle") },
+        { key: "created_at", label: t("fields.createdAt") },
+        { key: "updated_at", label: t("fields.updatedAt") }
+      ],
+      search: true,
+      navigateTo: (row) => `/collections/${row.original.id}`,
+      queryObject: raw,
+      isLoading
+    }
+  );
+};
+var columnHelper = createColumnHelper();
+var useColumns = () => {
+  const base = useCollectionTableColumns();
+  return useMemo(
+    () => [
+      ...base,
+      columnHelper.display({
+        id: "actions",
+        cell: ({ row }) => /* @__PURE__ */ jsx3(CollectionRowActions, { collection: row.original })
+      })
+    ],
+    [base]
+  );
+};
+
+// src/pages/collections/collection-list/components/collection-list-table/collection-list-table.tsx
+import { Fragment as Fragment2, jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
+var CollectionListTable = ({ children }) => {
+  return /* @__PURE__ */ jsx4(Container, { className: "divide-y p-0", children: Children2.count(children) > 0 ? children : /* @__PURE__ */ jsxs2(Fragment2, { children: [
+    /* @__PURE__ */ jsx4(CollectionListHeader, {}),
+    /* @__PURE__ */ jsx4(CollectionListDataTable, {})
+  ] }) });
+};
+
+// src/pages/collections/collection-list/collection-list.tsx
+import { jsx as jsx5 } from "react/jsx-runtime";
+var Root = ({ children }) => {
+  return /* @__PURE__ */ jsx5(SingleColumnPage, { children: Children3.count(children) > 0 ? children : /* @__PURE__ */ jsx5(CollectionListTable, {}) });
+};
+var CollectionList = Object.assign(Root, {
+  Table: CollectionListTable,
+  Header: CollectionListHeader,
+  HeaderTitle: CollectionListTitle,
+  HeaderActions: CollectionListActions,
+  DataTable: CollectionListDataTable
+});
+
+export {
+  CollectionList
+};