@medusajs/loyalty-plugin 0.0.1

package/.medusa/server/src/admin/components/data-table/data-table.js

@@ -0,0 +1,271 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useDataTable, DataTable as DataTable$1, clx, Heading, Text, Button } from "@medusajs/ui";
+import { useMemo, useCallback } from "react";
+import { useSearchParams, useNavigate, Link } from "react-router-dom";
+import { useQueryParams } from "../../hooks/common/use-query-params.js";
+import { ActionMenu } from "../action-menu.js";
+const DataTable = ({
+  data = [],
+  columns,
+  filters,
+  commands,
+  action,
+  actionMenu,
+  getRowId,
+  rowCount = 0,
+  enablePagination = true,
+  enableSearch = true,
+  autoFocusSearch = false,
+  rowHref,
+  heading,
+  subHeading,
+  prefix,
+  pageSize = 10,
+  emptyState,
+  rowSelection,
+  isLoading = false,
+  layout = "auto"
+}) => {
+  const enableFiltering = filters && filters.length > 0;
+  const enableCommands = commands && commands.length > 0;
+  const enableSorting = columns.some((column) => column.enableSorting);
+  const filterIds = useMemo(() => (filters == null ? void 0 : filters.map((f) => f.id)) ?? [], [filters]);
+  const prefixedFilterIds = filterIds.map((id) => getQueryParamKey(id, prefix));
+  const { offset, order, q, ...filterParams } = useQueryParams(
+    [
+      ...filterIds,
+      ...enableSorting ? ["order"] : [],
+      ...enableSearch ? ["q"] : [],
+      ...enablePagination ? ["offset"] : []
+    ],
+    prefix
+  );
+  const [_, setSearchParams] = useSearchParams();
+  const search = useMemo(() => {
+    return q ?? "";
+  }, [q]);
+  const handleSearchChange = (value) => {
+    setSearchParams((prev) => {
+      if (value) {
+        prev.set(getQueryParamKey("q", prefix), value);
+      } else {
+        prev.delete(getQueryParamKey("q", prefix));
+      }
+      return prev;
+    });
+  };
+  const pagination = useMemo(() => {
+    return offset ? parsePaginationState(offset, pageSize) : { pageIndex: 0, pageSize };
+  }, [offset, pageSize]);
+  const handlePaginationChange = (value) => {
+    setSearchParams((prev) => {
+      if (value.pageIndex === 0) {
+        prev.delete(getQueryParamKey("offset", prefix));
+      } else {
+        prev.set(
+          getQueryParamKey("offset", prefix),
+          transformPaginationState(value).toString()
+        );
+      }
+      return prev;
+    });
+  };
+  const filtering = useMemo(
+    () => parseFilterState(filterIds, filterParams),
+    [filterIds, filterParams]
+  );
+  const handleFilteringChange = (value) => {
+    setSearchParams((prev) => {
+      Array.from(prev.keys()).forEach((key) => {
+        if (prefixedFilterIds.includes(key) && !(key in value)) {
+          prev.delete(key);
+        }
+      });
+      Object.entries(value).forEach(([key, filter]) => {
+        if (prefixedFilterIds.includes(getQueryParamKey(key, prefix)) && filter) {
+          prev.set(getQueryParamKey(key, prefix), JSON.stringify(filter));
+        }
+      });
+      return prev;
+    });
+  };
+  const sorting = useMemo(() => {
+    return order ? parseSortingState(order) : null;
+  }, [order]);
+  const handleSortingChange = (value) => {
+    setSearchParams((prev) => {
+      if (value) {
+        const valueToStore = transformSortingState(value);
+        prev.set(getQueryParamKey("order", prefix), valueToStore);
+      } else {
+        prev.delete(getQueryParamKey("order", prefix));
+      }
+      return prev;
+    });
+  };
+  const { pagination: paginationTranslations, toolbar: toolbarTranslations } = useDataTableTranslations();
+  const navigate = useNavigate();
+  const onRowClick = useCallback(
+    (event, row) => {
+      if (!rowHref) {
+        return;
+      }
+      const href = rowHref(row);
+      if (event.metaKey || event.ctrlKey || event.button === 1) {
+        window.open(href, "_blank", "noreferrer");
+        return;
+      }
+      if (event.shiftKey) {
+        window.open(href, void 0, "noreferrer");
+        return;
+      }
+      navigate(href);
+    },
+    [navigate, rowHref]
+  );
+  const instance = useDataTable({
+    data,
+    columns,
+    filters,
+    commands,
+    rowCount,
+    getRowId,
+    onRowClick: rowHref ? onRowClick : void 0,
+    pagination: enablePagination ? {
+      state: pagination,
+      onPaginationChange: handlePaginationChange
+    } : void 0,
+    filtering: enableFiltering ? {
+      state: filtering,
+      onFilteringChange: handleFilteringChange
+    } : void 0,
+    sorting: enableSorting ? {
+      state: sorting,
+      onSortingChange: handleSortingChange
+    } : void 0,
+    search: enableSearch ? {
+      state: search,
+      onSearchChange: handleSearchChange
+    } : void 0,
+    rowSelection,
+    isLoading
+  });
+  const shouldRenderHeading = heading || subHeading;
+  return /* @__PURE__ */ jsxs(
+    DataTable$1,
+    {
+      instance,
+      className: clx({
+        "h-full [&_tr]:last-of-type:!border-b": layout === "fill"
+      }),
+      children: [
+        /* @__PURE__ */ jsxs(
+          DataTable$1.Toolbar,
+          {
+            className: "flex flex-col items-start justify-between gap-2 md:flex-row md:items-center",
+            translations: toolbarTranslations,
+            children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex w-full items-center justify-between gap-2", children: [
+                shouldRenderHeading && /* @__PURE__ */ jsxs("div", { children: [
+                  heading && /* @__PURE__ */ jsx(Heading, { children: heading }),
+                  subHeading && /* @__PURE__ */ jsx(Text, { size: "small", className: "text-ui-fg-subtle", children: subHeading })
+                ] }),
+                /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-end gap-x-2 md:hidden", children: [
+                  enableFiltering && /* @__PURE__ */ jsx(DataTable$1.FilterMenu, { tooltip: "Filter" }),
+                  /* @__PURE__ */ jsx(DataTable$1.SortingMenu, { tooltip: "Sort" }),
+                  actionMenu && /* @__PURE__ */ jsx(ActionMenu, { ...actionMenu }),
+                  action && /* @__PURE__ */ jsx(DataTableAction, { ...action })
+                ] })
+              ] }),
+              /* @__PURE__ */ jsxs("div", { className: "flex w-full items-center gap-2 md:justify-end", children: [
+                enableSearch && /* @__PURE__ */ jsx("div", { className: "w-full md:w-auto", children: /* @__PURE__ */ jsx(
+                  DataTable$1.Search,
+                  {
+                    placeholder: "Search",
+                    autoFocus: autoFocusSearch
+                  }
+                ) }),
+                /* @__PURE__ */ jsxs("div", { className: "hidden items-center gap-x-2 md:flex", children: [
+                  enableFiltering && /* @__PURE__ */ jsx(DataTable$1.FilterMenu, { tooltip: "Filter" }),
+                  /* @__PURE__ */ jsx(DataTable$1.SortingMenu, { tooltip: "Sort" }),
+                  actionMenu && /* @__PURE__ */ jsx(ActionMenu, { ...actionMenu }),
+                  action && /* @__PURE__ */ jsx(DataTableAction, { ...action })
+                ] })
+              ] })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(DataTable$1.Table, { emptyState }),
+        enablePagination && /* @__PURE__ */ jsx(DataTable$1.Pagination, { translations: paginationTranslations }),
+        enableCommands && /* @__PURE__ */ jsx(DataTable$1.CommandBar, { selectedLabel: (count) => `${count} selected` })
+      ]
+    }
+  );
+};
+function transformSortingState(value) {
+  return value.desc ? `-${value.id}` : value.id;
+}
+function parseSortingState(value) {
+  return value.startsWith("-") ? { id: value.slice(1), desc: true } : { id: value, desc: false };
+}
+function transformPaginationState(value) {
+  return value.pageIndex * value.pageSize;
+}
+function parsePaginationState(value, pageSize) {
+  const offset = parseInt(value);
+  return {
+    pageIndex: Math.floor(offset / pageSize),
+    pageSize
+  };
+}
+function parseFilterState(filterIds, value) {
+  if (!value) {
+    return {};
+  }
+  const filters = {};
+  for (const id of filterIds) {
+    const filterValue = value[id];
+    if (filterValue) {
+      filters[id] = JSON.parse(filterValue);
+    }
+  }
+  return filters;
+}
+function getQueryParamKey(key, prefix) {
+  return prefix ? `${prefix}_${key}` : key;
+}
+const useDataTableTranslations = () => {
+  const paginationTranslations = {
+    of: "Of",
+    results: "Results",
+    pages: "Pages",
+    prev: "Prev",
+    next: "Next"
+  };
+  const toolbarTranslations = {
+    clearAll: "Clear All"
+  };
+  return {
+    pagination: paginationTranslations,
+    toolbar: toolbarTranslations
+  };
+};
+const DataTableAction = ({
+  label,
+  disabled,
+  ...props
+}) => {
+  const buttonProps = {
+    size: "small",
+    disabled: disabled ?? false,
+    type: "button",
+    variant: "secondary"
+  };
+  if ("to" in props) {
+    return /* @__PURE__ */ jsx(Button, { ...buttonProps, asChild: true, children: /* @__PURE__ */ jsx(Link, { to: props.to, children: label }) });
+  }
+  return /* @__PURE__ */ jsx(Button, { ...buttonProps, onClick: props.onClick, children: label });
+};
+export {
+  DataTable
+};

package/.medusa/server/src/admin/components/data-table/helpers/general/use-data-table-date-columns.js

@@ -0,0 +1,51 @@
+import { jsx } from "react/jsx-runtime";
+import { createDataTableColumnHelper, Tooltip } from "@medusajs/ui";
+import { useMemo } from "react";
+import { useDate } from "../../../../hooks/common/use-date.js";
+const columnHelper = createDataTableColumnHelper();
+const useDataTableDateColumns = () => {
+  const { getFullDate } = useDate();
+  return useMemo(() => {
+    return [
+      columnHelper.accessor("created_at", {
+        header: "Created at",
+        cell: ({ row }) => {
+          return /* @__PURE__ */ jsx(
+            Tooltip,
+            {
+              content: getFullDate({
+                date: row.original.created_at,
+                includeTime: true
+              }),
+              children: /* @__PURE__ */ jsx("span", { children: getFullDate({ date: row.original.created_at }) })
+            }
+          );
+        },
+        enableSorting: true,
+        sortAscLabel: "Asc",
+        sortDescLabel: "Desc"
+      }),
+      columnHelper.accessor("updated_at", {
+        header: "Updated at",
+        cell: ({ row }) => {
+          return /* @__PURE__ */ jsx(
+            Tooltip,
+            {
+              content: getFullDate({
+                date: row.original.updated_at,
+                includeTime: true
+              }),
+              children: /* @__PURE__ */ jsx("span", { children: getFullDate({ date: row.original.updated_at }) })
+            }
+          );
+        },
+        enableSorting: true,
+        sortAscLabel: "Asc",
+        sortDescLabel: "Desc"
+      })
+    ];
+  }, [getFullDate]);
+};
+export {
+  useDataTableDateColumns
+};

package/.medusa/server/src/admin/components/data-table/helpers/general/use-data-table-date-filters.js

@@ -0,0 +1,90 @@
+import { createDataTableFilterHelper } from "@medusajs/ui";
+import { subDays, subMonths } from "date-fns";
+import { useMemo } from "react";
+import { useDate } from "../../../../hooks/common/use-date.js";
+const filterHelper = createDataTableFilterHelper();
+const useDateFilterOptions = () => {
+  const today = useMemo(() => {
+    const date = /* @__PURE__ */ new Date();
+    date.setHours(0, 0, 0, 0);
+    return date;
+  }, []);
+  return useMemo(() => {
+    return [
+      {
+        label: "Today",
+        value: {
+          $gte: today.toISOString()
+        }
+      },
+      {
+        label: "Last 7 Days",
+        value: {
+          $gte: subDays(today, 7).toISOString()
+          // 7 days ago
+        }
+      },
+      {
+        label: "Last 30 Days",
+        value: {
+          $gte: subDays(today, 30).toISOString()
+          // 30 days ago
+        }
+      },
+      {
+        label: "Last 90 Days",
+        value: {
+          $gte: subDays(today, 90).toISOString()
+          // 90 days ago
+        }
+      },
+      {
+        label: "Last 12 Months",
+        value: {
+          $gte: subMonths(today, 12).toISOString()
+          // 12 months ago
+        }
+      }
+    ];
+  }, [today]);
+};
+const useDataTableDateFilters = (disableRangeOption) => {
+  const { getFullDate } = useDate();
+  const dateFilterOptions = useDateFilterOptions();
+  const rangeOptions = useMemo(() => {
+    if (disableRangeOption) {
+      return {
+        disableRangeOption: true
+      };
+    }
+    return {
+      rangeOptionStartLabel: "Starting",
+      rangeOptionEndLabel: "Ending",
+      rangeOptionLabel: "Custom",
+      options: dateFilterOptions
+    };
+  }, [disableRangeOption, dateFilterOptions]);
+  return useMemo(() => {
+    return [
+      filterHelper.accessor("created_at", {
+        type: "date",
+        label: "Created At",
+        format: "date",
+        formatDateValue: (date) => getFullDate({ date }),
+        options: dateFilterOptions,
+        ...rangeOptions
+      }),
+      filterHelper.accessor("updated_at", {
+        type: "date",
+        label: "Updated At",
+        format: "date",
+        formatDateValue: (date) => getFullDate({ date }),
+        options: dateFilterOptions,
+        ...rangeOptions
+      })
+    ];
+  }, [dateFilterOptions, getFullDate, rangeOptions]);
+};
+export {
+  useDataTableDateFilters
+};

package/.medusa/server/src/admin/components/data-table/helpers/sales-channels/index.js

@@ -0,0 +1,10 @@
+import { useSalesChannelTableColumns } from "./use-sales-channel-table-columns.js";
+import { useSalesChannelTableEmptyState } from "./use-sales-channel-table-empty-state.js";
+import { useSalesChannelTableFilters } from "./use-sales-channel-table-filters.js";
+import { useSalesChannelTableQuery } from "./use-sales-channel-table-query.js";
+export {
+  useSalesChannelTableColumns,
+  useSalesChannelTableEmptyState,
+  useSalesChannelTableFilters,
+  useSalesChannelTableQuery
+};

package/.medusa/server/src/admin/components/data-table/helpers/sales-channels/use-sales-channel-table-columns.js

@@ -0,0 +1,48 @@
+import { jsx } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { createDataTableColumnHelper, Tooltip } from "@medusajs/ui";
+import { DataTableStatusCell } from "../../components/data-table-status-cell/data-table-status-cell.js";
+import { useDataTableDateColumns } from "../general/use-data-table-date-columns.js";
+const columnHelper = createDataTableColumnHelper();
+const useSalesChannelTableColumns = () => {
+  const dateColumns = useDataTableDateColumns();
+  return useMemo(
+    () => [
+      columnHelper.accessor("name", {
+        header: () => "Name",
+        enableSorting: true,
+        sortLabel: "Name",
+        sortAscLabel: "Asc",
+        sortDescLabel: "Desc"
+      }),
+      columnHelper.accessor("description", {
+        header: () => "Description",
+        cell: ({ getValue }) => {
+          return /* @__PURE__ */ jsx(Tooltip, { content: getValue(), children: /* @__PURE__ */ jsx("div", { className: "flex h-full w-full items-center overflow-hidden", children: /* @__PURE__ */ jsx("span", { className: "truncate", children: getValue() }) }) });
+        },
+        enableSorting: true,
+        sortLabel: "Description",
+        sortAscLabel: "Asc",
+        sortDescLabel: "Desc",
+        maxSize: 250,
+        minSize: 100
+      }),
+      columnHelper.accessor("is_disabled", {
+        header: () => "Status",
+        enableSorting: true,
+        sortLabel: "Status",
+        sortAscLabel: "Asc",
+        sortDescLabel: "Desc",
+        cell: ({ getValue }) => {
+          const value = getValue();
+          return /* @__PURE__ */ jsx(DataTableStatusCell, { color: value ? "grey" : "green", children: value ? "Disabled" : "Enabled" });
+        }
+      }),
+      ...dateColumns
+    ],
+    [dateColumns]
+  );
+};
+export {
+  useSalesChannelTableColumns
+};

package/.medusa/server/src/admin/components/data-table/helpers/sales-channels/use-sales-channel-table-empty-state.js

@@ -0,0 +1,19 @@
+import { useMemo } from "react";
+const useSalesChannelTableEmptyState = () => {
+  return useMemo(() => {
+    const content = {
+      empty: {
+        heading: "No sales channels found",
+        description: "Create a new sales channel to get started"
+      },
+      filtered: {
+        heading: "No results",
+        description: "No sales channels match the current filter criteria."
+      }
+    };
+    return content;
+  }, []);
+};
+export {
+  useSalesChannelTableEmptyState
+};

package/.medusa/server/src/admin/components/data-table/helpers/sales-channels/use-sales-channel-table-filters.js

@@ -0,0 +1,30 @@
+import { createDataTableFilterHelper } from "@medusajs/ui";
+import { useMemo } from "react";
+import { useDataTableDateFilters } from "../general/use-data-table-date-filters.js";
+const filterHelper = createDataTableFilterHelper();
+const useSalesChannelTableFilters = () => {
+  const dateFilters = useDataTableDateFilters();
+  return useMemo(
+    () => [
+      filterHelper.accessor("is_disabled", {
+        label: "Status",
+        type: "radio",
+        options: [
+          {
+            label: "Enabled",
+            value: "false"
+          },
+          {
+            label: "Disabled",
+            value: "true"
+          }
+        ]
+      }),
+      ...dateFilters
+    ],
+    [dateFilters]
+  );
+};
+export {
+  useSalesChannelTableFilters
+};

package/.medusa/server/src/admin/components/data-table/helpers/sales-channels/use-sales-channel-table-query.js

@@ -0,0 +1,23 @@
+import { useQueryParams } from "../../../../hooks/common/use-query-params.js";
+const useSalesChannelTableQuery = ({
+  prefix,
+  pageSize = 20
+}) => {
+  const queryObject = useQueryParams(
+    ["offset", "q", "order", "created_at", "updated_at", "is_disabled"],
+    prefix
+  );
+  const { offset, created_at, updated_at, is_disabled, ...rest } = queryObject;
+  const searchParams = {
+    limit: pageSize,
+    offset: offset ? Number(offset) : 0,
+    created_at: created_at ? JSON.parse(created_at) : void 0,
+    updated_at: updated_at ? JSON.parse(updated_at) : void 0,
+    is_disabled: is_disabled ? JSON.parse(is_disabled) : void 0,
+    ...rest
+  };
+  return searchParams;
+};
+export {
+  useSalesChannelTableQuery
+};

package/.medusa/server/src/admin/components/data-table/index.js

@@ -0,0 +1,4 @@
+import { DataTable } from "./data-table.js";
+export {
+  DataTable
+};