@tsc_tech/medusa-plugin-wishlist/.medusa/server/src/admin/index.js

A starter for Medusa plugins.

"use strict";
const jsxRuntime = require("react/jsx-runtime");
const adminSdk = require("@medusajs/admin-sdk");
const ui = require("@medusajs/ui");
const reactQuery = require("@tanstack/react-query");
const Medusa = require("@medusajs/js-sdk");
const react = require("react");
const icons = require("@medusajs/icons");
const reactRouterDom = require("react-router-dom");
const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
const Medusa__default = /* @__PURE__ */ _interopDefault(Medusa);
const sdk = new Medusa__default.default({
  baseUrl: "/",
  debug: false,
  auth: {
    type: "session"
  }
});
const Thumbnail = ({ src, alt, size = "base" }) => {
  return /* @__PURE__ */ jsxRuntime.jsx(
    "div",
    {
      className: ui.clx(
        "bg-ui-bg-component border-ui-border-base flex items-center justify-center overflow-hidden rounded border",
        {
          "h-8 w-6": size === "base",
          "h-5 w-4": size === "small"
        }
      ),
      children: src ? /* @__PURE__ */ jsxRuntime.jsx(
        "img",
        {
          src,
          alt,
          className: "h-full w-full object-cover object-center"
        }
      ) : /* @__PURE__ */ jsxRuntime.jsx(icons.Photo, { className: "text-ui-fg-subtle" })
    }
  );
};
const ProductHeader = () => {
  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-full w-full items-center", children: /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Products" }) });
};
const VARIANT_PAGE_SIZE = 10;
const variantColumnHelper = ui.createDataTableColumnHelper();
const useVariantColumns = () => {
  return react.useMemo(
    () => [
      variantColumnHelper.accessor("title", {
        header: () => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-full w-full items-center", children: /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Variant" }) }),
        enableSorting: true,
        sortLabel: "Variant Title",
        sortAscLabel: "Ascending (A-Z)",
        sortDescLabel: "Descending (Z-A)",
        cell: ({ row }) => {
          var _a, _b, _c, _d;
          return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-full w-full max-w-[250px] items-center gap-x-3 overflow-hidden", children: [
            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-fit flex-shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx(Thumbnail, { src: (_b = (_a = row == null ? void 0 : row.original) == null ? void 0 : _a.product) == null ? void 0 : _b.thumbnail }) }),
            /* @__PURE__ */ jsxRuntime.jsx("span", { title: ((_c = row.original) == null ? void 0 : _c.title) || "", className: "truncate", children: (_d = row.original) == null ? void 0 : _d.title })
          ] });
        }
      }),
      variantColumnHelper.accessor("product", {
        header: () => /* @__PURE__ */ jsxRuntime.jsx(ProductHeader, {}),
        enableSorting: true,
        sortLabel: "Product Title",
        sortAscLabel: "Ascending (A-Z)",
        sortDescLabel: "Descending (Z-A)",
        cell: ({ row }) => {
          var _a;
          return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm text-gray-500", children: (_a = row.original.product) == null ? void 0 : _a.title });
        }
      })
    ],
    []
  );
};
const WishlistWidget = ({ data }) => {
  const [pageIndex, setPageIndex] = react.useState(0);
  const [sorting, setSorting] = react.useState({
    id: "title",
    desc: false
  });
  console.log("sorting", sorting);
  console.log("pageIndex", pageIndex);
  const [searchValue, setSearchValue] = react.useState("");
  const navigate = reactRouterDom.useNavigate();
  const { data: wishlistData } = reactQuery.useQuery({
    queryFn: () => sdk.client.fetch(`/admin/wishlist/customer/${data.id}`, {}),
    queryKey: ["wishlist", data.id]
  });
  const wishlistVariantIds = react.useMemo(
    () => {
      var _a;
      return ((_a = wishlistData == null ? void 0 : wishlistData.variants) == null ? void 0 : _a.map((x) => x.id)) || [];
    },
    [wishlistData == null ? void 0 : wishlistData.variants]
  );
  const { data: variantList } = reactQuery.useQuery({
    queryFn: () => sdk.admin.productVariant.list({
      id: wishlistVariantIds,
      q: searchValue,
      order: (sorting == null ? void 0 : sorting.desc) ? `-${sorting.id}` : sorting == null ? void 0 : sorting.id
    }),
    queryKey: ["variants", wishlistVariantIds, sorting, searchValue],
    enabled: wishlistVariantIds.length > 0
  });
  const columns = useVariantColumns();
  const table = ui.useDataTable({
    columns,
    data: (variantList == null ? void 0 : variantList.variants) ?? [],
    getRowId: (original) => original.id,
    rowCount: (variantList == null ? void 0 : variantList.count) ?? 0,
    isLoading: false,
    pagination: {
      state: {
        pageIndex,
        pageSize: VARIANT_PAGE_SIZE
      },
      onPaginationChange: ({ pageIndex: pageIndex2 }) => {
        setPageIndex(pageIndex2);
      }
    },
    sorting: {
      state: sorting,
      onSortingChange: setSorting
    },
    onRowClick: (event, row) => {
      var _a, _b;
      const productId = (_b = (_a = row == null ? void 0 : row.original) == null ? void 0 : _a.product) == null ? void 0 : _b.id;
      const variantId = row.id;
      navigate(`/products/${productId}/variants/${variantId}`);
    },
    search: {
      debounce: 1e3,
      state: searchValue,
      onSearchChange: react.useCallback((value) => {
        setSearchValue(value);
        setPageIndex(0);
      }, [])
    }
  });
  return /* @__PURE__ */ jsxRuntime.jsx(ui.Container, { className: "divide-y p-0", children: /* @__PURE__ */ jsxRuntime.jsxs(ui.DataTable, { instance: table, children: [
    /* @__PURE__ */ jsxRuntime.jsxs(ui.DataTable.Toolbar, { className: "flex justify-between items-center", children: [
      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-between", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { level: "h2", children: "Wishlist Items" }) }),
      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-4", children: [
        /* @__PURE__ */ jsxRuntime.jsx(ui.DataTable.Search, { autoFocus: true, placeholder: "Search" }),
        /* @__PURE__ */ jsxRuntime.jsx(ui.DataTable.SortingMenu, { tooltip: "Sort" })
      ] })
    ] }),
    /* @__PURE__ */ jsxRuntime.jsx(
      ui.DataTable.Table,
      {
        emptyState: {
          empty: {
            heading: "No Products",
            description: "There are no products in wishlist"
          },
          filtered: { heading: `No results for "${searchValue}"` }
        }
      }
    ),
    /* @__PURE__ */ jsxRuntime.jsx(ui.DataTable.Pagination, {})
  ] }) });
};
adminSdk.defineWidgetConfig({
  zone: "customer.details.after"
});
const widgetModule = { widgets: [
  {
    Component: WishlistWidget,
    zone: ["customer.details.after"]
  }
] };
const routeModule = {
  routes: []
};
const menuItemModule = {
  menuItems: []
};
const formModule = { customFields: {} };
const displayModule = {
  displays: {}
};
const plugin = {
  widgetModule,
  routeModule,
  menuItemModule,
  formModule,
  displayModule
};
module.exports = plugin;