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

A starter for Medusa plugins.

import { jsx, jsxs } from "react/jsx-runtime";
import { defineWidgetConfig } from "@medusajs/admin-sdk";
import { createDataTableColumnHelper, useDataTable, Container, DataTable, Heading } from "@medusajs/ui";
import { useQuery } from "@tanstack/react-query";
import { sdk } from "../utils/sdk.js";
import { useState, useMemo, useCallback } from "react";
import { Thumbnail } from "../components/thumbnail/thumbnail.js";
import { ProductHeader } from "../components/product-header/product-header.js";
import { useNavigate } from "react-router-dom";
const VARIANT_PAGE_SIZE = 10;
const variantColumnHelper = createDataTableColumnHelper();
const useVariantColumns = () => {
  return useMemo(
    () => [
      variantColumnHelper.accessor("title", {
        header: () => /* @__PURE__ */ jsx("div", { className: "flex h-full w-full items-center", children: /* @__PURE__ */ 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__ */ jsxs("div", { className: "flex h-full w-full max-w-[250px] items-center gap-x-3 overflow-hidden", children: [
            /* @__PURE__ */ jsx("div", { className: "w-fit flex-shrink-0", children: /* @__PURE__ */ jsx(Thumbnail, { src: (_b = (_a = row == null ? void 0 : row.original) == null ? void 0 : _a.product) == null ? void 0 : _b.thumbnail }) }),
            /* @__PURE__ */ 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__ */ jsx(ProductHeader, {}),
        enableSorting: true,
        sortLabel: "Product Title",
        sortAscLabel: "Ascending (A-Z)",
        sortDescLabel: "Descending (Z-A)",
        cell: ({ row }) => {
          var _a;
          return /* @__PURE__ */ jsx("div", { className: "text-sm text-gray-500", children: (_a = row.original.product) == null ? void 0 : _a.title });
        }
      })
    ],
    []
  );
};
const WishlistWidget = ({ data }) => {
  const [pageIndex, setPageIndex] = useState(0);
  const [sorting, setSorting] = useState({
    id: "title",
    desc: false
  });
  console.log("sorting", sorting);
  console.log("pageIndex", pageIndex);
  const [searchValue, setSearchValue] = useState("");
  const navigate = useNavigate();
  const { data: wishlistData } = useQuery({
    queryFn: () => sdk.client.fetch(`/admin/wishlist/customer/${data.id}`, {}),
    queryKey: ["wishlist", data.id]
  });
  const wishlistVariantIds = 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 } = 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 = 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: useCallback((value) => {
        setSearchValue(value);
        setPageIndex(0);
      }, [])
    }
  });
  return /* @__PURE__ */ jsx(Container, { className: "divide-y p-0", children: /* @__PURE__ */ jsxs(DataTable, { instance: table, children: [
    /* @__PURE__ */ jsxs(DataTable.Toolbar, { className: "flex justify-between items-center", children: [
      /* @__PURE__ */ jsx("div", { className: "flex items-center justify-between", children: /* @__PURE__ */ jsx(Heading, { level: "h2", children: "Wishlist Items" }) }),
      /* @__PURE__ */ jsxs("div", { className: "flex gap-4", children: [
        /* @__PURE__ */ jsx(DataTable.Search, { autoFocus: true, placeholder: "Search" }),
        /* @__PURE__ */ jsx(DataTable.SortingMenu, { tooltip: "Sort" })
      ] })
    ] }),
    /* @__PURE__ */ jsx(
      DataTable.Table,
      {
        emptyState: {
          empty: {
            heading: "No Products",
            description: "There are no products in wishlist"
          },
          filtered: { heading: `No results for "${searchValue}"` }
        }
      }
    ),
    /* @__PURE__ */ jsx(DataTable.Pagination, {})
  ] }) });
};
const config = defineWidgetConfig({
  zone: "customer.details.after"
});
export {
  config,
  WishlistWidget as default
};