@tsc_tech/medusa-plugin-wishlist
Version:
A starter for Medusa plugins.
192 lines (191 loc) • 6.71 kB
JavaScript
import { jsx, jsxs } from "react/jsx-runtime";
import { defineWidgetConfig } from "@medusajs/admin-sdk";
import { clx, createDataTableColumnHelper, useDataTable, Container, DataTable, Heading } from "@medusajs/ui";
import { useQuery } from "@tanstack/react-query";
import Medusa from "@medusajs/js-sdk";
import { useState, useMemo, useCallback } from "react";
import { Photo } from "@medusajs/icons";
import { useNavigate } from "react-router-dom";
const sdk = new Medusa({
baseUrl: "/",
debug: false,
auth: {
type: "session"
}
});
const Thumbnail = ({ src, alt, size = "base" }) => {
return /* @__PURE__ */ jsx(
"div",
{
className: 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__ */ jsx(
"img",
{
src,
alt,
className: "h-full w-full object-cover object-center"
}
) : /* @__PURE__ */ jsx(Photo, { className: "text-ui-fg-subtle" })
}
);
};
const ProductHeader = () => {
return /* @__PURE__ */ jsx("div", { className: "flex h-full w-full items-center", children: /* @__PURE__ */ jsx("span", { children: "Products" }) });
};
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, {})
] }) });
};
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
};
export {
plugin as default
};