@medusajs/loyalty-plugin 0.0.1

package/.medusa/server/src/admin/routes/gift-card-products/_id_/components/product-media-section.js

@@ -0,0 +1,162 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { PencilSquare, ThumbnailBadge } from "@medusajs/icons";
+import { usePrompt, Container, Heading, clx, Checkbox, Tooltip, Text, Button, CommandBar } from "@medusajs/ui";
+import { useState } from "react";
+import { Link } from "react-router-dom";
+import { ActionMenu } from "../../../../components/action-menu.js";
+import { useUpdateProduct } from "../../../../hooks/api/products.js";
+const ProductMediaSection = ({ product }) => {
+  const prompt = usePrompt();
+  const [selection, setSelection] = useState({});
+  const media = getMedia(product);
+  const handleCheckedChange = (id) => {
+    setSelection((prev) => {
+      if (prev[id]) {
+        const { [id]: _, ...rest } = prev;
+        return rest;
+      } else {
+        return { ...prev, [id]: true };
+      }
+    });
+  };
+  const { mutateAsync } = useUpdateProduct(product.id);
+  const handleDelete = async () => {
+    const ids = Object.keys(selection);
+    const includingThumbnail = ids.some(
+      (id) => {
+        var _a;
+        return (_a = media.find((m) => m.id === id)) == null ? void 0 : _a.isThumbnail;
+      }
+    );
+    const res = await prompt({
+      title: "Are you sure?",
+      description: includingThumbnail ? `Deleting ${ids.length} image(s) including the thumbnail. This will remove the thumbnail from the product.` : `Deleting ${ids.length} image(s).`,
+      confirmText: "Delete",
+      cancelText: "Cancel"
+    });
+    if (!res) {
+      return;
+    }
+    const mediaToKeep = ((product == null ? void 0 : product.images) || []).filter((i) => !ids.includes(i.id)).map((i) => ({ url: i.url }));
+    await mutateAsync(
+      {
+        images: mediaToKeep,
+        thumbnail: includingThumbnail ? "" : void 0
+      },
+      {
+        onSuccess: () => {
+          setSelection({});
+        }
+      }
+    );
+  };
+  return /* @__PURE__ */ jsxs(Container, { className: "divide-y p-0", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-6 py-4", children: [
+      /* @__PURE__ */ jsx(Heading, { level: "h2", children: "Media" }),
+      /* @__PURE__ */ jsx(
+        ActionMenu,
+        {
+          groups: [
+            {
+              actions: [
+                {
+                  label: "Edit",
+                  to: "media?view=edit",
+                  icon: /* @__PURE__ */ jsx(PencilSquare, {})
+                }
+              ]
+            }
+          ]
+        }
+      )
+    ] }),
+    media.length > 0 ? /* @__PURE__ */ jsx("div", { className: "grid grid-cols-[repeat(auto-fill,minmax(96px,1fr))] gap-4 px-6 py-4", children: media.map((i, index) => {
+      const isSelected = selection[i.id];
+      return /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: "shadow-elevation-card-rest hover:shadow-elevation-card-hover transition-fg group relative aspect-square size-full cursor-pointer overflow-hidden rounded-[8px]",
+          children: [
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: clx(
+                  "transition-fg invisible absolute right-2 top-2 opacity-0 group-hover:visible group-hover:opacity-100",
+                  {
+                    "visible opacity-100": isSelected
+                  }
+                ),
+                children: /* @__PURE__ */ jsx(
+                  Checkbox,
+                  {
+                    checked: selection[i.id] || false,
+                    onCheckedChange: () => handleCheckedChange(i.id)
+                  }
+                )
+              }
+            ),
+            i.isThumbnail && /* @__PURE__ */ jsx("div", { className: "absolute left-2 top-2", children: /* @__PURE__ */ jsx(Tooltip, { content: "Thumbnail", children: /* @__PURE__ */ jsx(ThumbnailBadge, {}) }) }),
+            /* @__PURE__ */ jsx(Link, { to: `media`, state: { curr: index }, children: /* @__PURE__ */ jsx(
+              "img",
+              {
+                src: i.url,
+                alt: `${product.title} image`,
+                className: "size-full object-cover"
+              }
+            ) })
+          ]
+        },
+        i.id
+      );
+    }) }) : /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-y-4 pb-8 pt-6", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center", children: [
+        /* @__PURE__ */ jsx(
+          Text,
+          {
+            size: "small",
+            leading: "compact",
+            weight: "plus",
+            className: "text-ui-fg-subtle",
+            children: "No media yet"
+          }
+        ),
+        /* @__PURE__ */ jsx(Text, { size: "small", className: "text-ui-fg-muted", children: "Add images to your product" })
+      ] }),
+      /* @__PURE__ */ jsx(Button, { size: "small", variant: "secondary", asChild: true, children: /* @__PURE__ */ jsx(Link, { to: "media?view=edit", children: "Add images" }) })
+    ] }),
+    /* @__PURE__ */ jsx(CommandBar, { open: !!Object.keys(selection).length, children: /* @__PURE__ */ jsxs(CommandBar.Bar, { children: [
+      /* @__PURE__ */ jsxs(CommandBar.Value, { children: [
+        Object.keys(selection).length,
+        " selected"
+      ] }),
+      /* @__PURE__ */ jsx(CommandBar.Seperator, {}),
+      /* @__PURE__ */ jsx(
+        CommandBar.Command,
+        {
+          action: handleDelete,
+          label: "Delete",
+          shortcut: "d"
+        }
+      )
+    ] }) })
+  ] });
+};
+const getMedia = (product) => {
+  const { images = [], thumbnail } = product;
+  const media = (images || []).map((image) => ({
+    id: image.id,
+    url: image.url,
+    isThumbnail: image.url === thumbnail
+  }));
+  if (thumbnail && !media.some((mediaItem) => mediaItem.url === thumbnail)) {
+    media.unshift({
+      id: "img_thumbnail",
+      url: thumbnail,
+      isThumbnail: true
+    });
+  }
+  return media;
+};
+export {
+  ProductMediaSection
+};

package/.medusa/server/src/admin/routes/gift-card-products/_id_/components/product-sales-channel-section.js

@@ -0,0 +1,89 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { PencilSquare, Channels } from "@medusajs/icons";
+import { Container, Heading, Text, Tooltip } from "@medusajs/ui";
+import { Trans } from "/Users/oliverjuhl/Desktop/medusa/loyalty-plugin/node_modules/react-i18next/dist/es/index.js";
+import { ActionMenu } from "../../../../components/action-menu.js";
+import { useSalesChannels } from "../../../../hooks/api/sales-channels.js";
+const ProductSalesChannelSection = ({
+  product
+}) => {
+  var _a;
+  const { count } = useSalesChannels();
+  const availableInSalesChannels = ((_a = product.sales_channels) == null ? void 0 : _a.map((sc) => ({
+    id: sc.id,
+    name: sc.name
+  }))) ?? [];
+  const firstChannels = availableInSalesChannels.slice(0, 3);
+  const restChannels = availableInSalesChannels.slice(3);
+  return /* @__PURE__ */ jsxs(Container, { className: "flex flex-col gap-y-4 px-6 py-4", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+      /* @__PURE__ */ jsx(Heading, { level: "h2", children: "Sales Channels" }),
+      /* @__PURE__ */ jsx(
+        ActionMenu,
+        {
+          groups: [
+            {
+              actions: [
+                {
+                  label: "Edit",
+                  to: "sales-channels",
+                  icon: /* @__PURE__ */ jsx(PencilSquare, {})
+                }
+              ]
+            }
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-[28px_1fr] items-center gap-x-3", children: [
+      /* @__PURE__ */ jsx("div", { className: "bg-ui-bg-base shadow-borders-base flex size-7 items-center justify-center rounded-md", children: /* @__PURE__ */ jsx("div", { className: "bg-ui-bg-component flex size-6 items-center justify-center rounded-[4px]", children: /* @__PURE__ */ jsx(Channels, { className: "text-ui-fg-subtle" }) }) }),
+      availableInSalesChannels.length > 0 ? /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-x-1", children: [
+        /* @__PURE__ */ jsx(Text, { size: "small", leading: "compact", children: firstChannels.map((sc) => sc.name).join(", ") }),
+        restChannels.length > 0 && /* @__PURE__ */ jsx(
+          Tooltip,
+          {
+            content: /* @__PURE__ */ jsx("ul", { children: restChannels.map((sc) => /* @__PURE__ */ jsx("li", { children: sc.name }, sc.id)) }),
+            children: /* @__PURE__ */ jsx(
+              Text,
+              {
+                size: "small",
+                leading: "compact",
+                className: "text-ui-fg-subtle",
+                children: `+${restChannels.length}`
+              }
+            )
+          }
+        )
+      ] }) : /* @__PURE__ */ jsx(Text, { size: "small", leading: "compact", className: "text-ui-fg-subtle", children: "No sales channels" })
+    ] }),
+    /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(Text, { className: "text-ui-fg-subtle", size: "small", leading: "compact", children: /* @__PURE__ */ jsx(
+      Trans,
+      {
+        i18nKey: "sales_channels.availableIn",
+        values: {
+          x: availableInSalesChannels.length,
+          y: count ?? 0
+        },
+        components: [
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: "text-ui-fg-base txt-compact-medium-plus"
+            },
+            "x"
+          ),
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: "text-ui-fg-base txt-compact-medium-plus"
+            },
+            "y"
+          )
+        ]
+      }
+    ) }) })
+  ] });
+};
+export {
+  ProductSalesChannelSection
+};

package/.medusa/server/src/admin/routes/gift-card-products/_id_/components/product-variant-section.js

@@ -0,0 +1,199 @@
+import { jsx } from "react/jsx-runtime";
+import { PencilSquare, Trash } from "@medusajs/icons";
+import { createDataTableColumnHelper, Container, usePrompt, Tooltip, Badge } from "@medusajs/ui";
+import { keepPreviousData } from "@tanstack/react-query";
+import { useMemo, useCallback } from "react";
+import { useNavigate, useSearchParams } from "react-router-dom";
+import { DataTable } from "../../../../components/data-table.js";
+import { useDataTableDateColumns } from "../../../../components/data-table/helpers/general/use-data-table-date-columns.js";
+import { useProductVariants, useDeleteVariantLazy } from "../../../../hooks/api/products.js";
+import { useDataTableDateFilters } from "../../../../hooks/common/use-data-table-date-filters.js";
+import { useQueryParams } from "../../../../hooks/common/use-query-params.js";
+const PAGE_SIZE = 10;
+const PREFIX = "pv";
+const ProductVariantSection = ({
+  product
+}) => {
+  const {
+    q,
+    order,
+    offset,
+    allow_backorder,
+    manage_inventory,
+    created_at,
+    updated_at
+  } = useQueryParams(
+    [
+      "q",
+      "order",
+      "offset",
+      "manage_inventory",
+      "allow_backorder",
+      "created_at",
+      "updated_at"
+    ],
+    PREFIX
+  );
+  const columns = useColumns(product);
+  const filters = useFilters();
+  const { variants, count, isPending, isError, error } = useProductVariants(
+    product.id,
+    {
+      q,
+      order: order ? order : "variant_rank",
+      offset: offset ? parseInt(offset) : void 0,
+      limit: PAGE_SIZE,
+      allow_backorder: allow_backorder ? JSON.parse(allow_backorder) : void 0,
+      manage_inventory: manage_inventory ? JSON.parse(manage_inventory) : void 0,
+      created_at: created_at ? JSON.parse(created_at) : void 0,
+      updated_at: updated_at ? JSON.parse(updated_at) : void 0,
+      fields: "title,sku,*options,created_at,updated_at"
+    },
+    {
+      placeholderData: keepPreviousData
+    }
+  );
+  if (isError) {
+    throw error;
+  }
+  return /* @__PURE__ */ jsx(Container, { className: "divide-y p-0", children: /* @__PURE__ */ jsx(
+    DataTable,
+    {
+      data: variants,
+      columns,
+      filters,
+      rowCount: count,
+      getRowId: (row) => row.id,
+      pageSize: PAGE_SIZE,
+      isLoading: isPending,
+      heading: "Denominations",
+      emptyState: {
+        empty: {
+          heading: "No denominations",
+          description: "Add a denomination to get started"
+        }
+      },
+      action: {
+        label: "Edit denomination",
+        to: `denominations`
+      },
+      actionMenu: {
+        groups: [
+          {
+            actions: [
+              {
+                label: "Edit prices",
+                to: `prices`,
+                icon: /* @__PURE__ */ jsx(PencilSquare, {})
+              }
+            ]
+          }
+        ]
+      },
+      prefix: PREFIX
+    }
+  ) });
+};
+const columnHelper = createDataTableColumnHelper();
+const useColumns = (product) => {
+  const navigate = useNavigate();
+  const { mutateAsync } = useDeleteVariantLazy(product.id);
+  const prompt = usePrompt();
+  const [searchParams] = useSearchParams();
+  const tableSearchParams = useMemo(() => {
+    const filtered = new URLSearchParams();
+    for (const [key, value] of searchParams.entries()) {
+      if (key.startsWith(`${PREFIX}_`)) {
+        filtered.append(key, value);
+      }
+    }
+    return filtered;
+  }, [searchParams]);
+  const dateColumns = useDataTableDateColumns();
+  const handleDelete = useCallback(
+    async (id, title) => {
+      const res = await prompt({
+        title: "Are you sure?",
+        description: `Are you sure you want to delete denomination ${title}?`,
+        confirmText: "Delete",
+        cancelText: "Cancel"
+      });
+      if (!res) {
+        return;
+      }
+      await mutateAsync({ variantId: id });
+    },
+    [mutateAsync, prompt]
+  );
+  const optionColumns = useMemo(() => {
+    if (!(product == null ? void 0 : product.options)) {
+      return [];
+    }
+    return product.options.map((option) => {
+      return columnHelper.display({
+        id: option.id,
+        header: option.title,
+        cell: ({ row }) => {
+          var _a;
+          const variantOpt = (_a = row.original.options) == null ? void 0 : _a.find(
+            (opt) => opt.option_id === option.id
+          );
+          if (!variantOpt) {
+            return /* @__PURE__ */ jsx("span", { className: "text-ui-fg-muted", children: "-" });
+          }
+          return /* @__PURE__ */ jsx("div", { className: "flex items-center", children: /* @__PURE__ */ jsx(Tooltip, { content: variantOpt.value, children: /* @__PURE__ */ jsx(
+            Badge,
+            {
+              size: "2xsmall",
+              title: variantOpt.value,
+              className: "inline-flex min-w-[20px] max-w-[140px] items-center justify-center overflow-hidden truncate",
+              children: variantOpt.value
+            }
+          ) }) });
+        }
+      });
+    });
+  }, [product]);
+  const getActions = useCallback(
+    (ctx) => {
+      const variant = ctx.row.original;
+      const mainActions = [
+        {
+          icon: /* @__PURE__ */ jsx(Trash, {}),
+          label: "Delete",
+          onClick: () => handleDelete(variant.id, variant.title)
+        }
+      ];
+      return [mainActions];
+    },
+    [handleDelete, navigate, tableSearchParams]
+  );
+  return useMemo(() => {
+    return [
+      columnHelper.accessor("title", {
+        header: "Title",
+        enableSorting: true,
+        sortAscLabel: "Asc",
+        sortDescLabel: "Desc"
+      }),
+      columnHelper.accessor("sku", {
+        header: "SKU",
+        enableSorting: true,
+        sortAscLabel: "Asc",
+        sortDescLabel: "Desc"
+      }),
+      columnHelper.action({
+        actions: getActions
+      })
+    ];
+  }, [optionColumns, dateColumns, getActions]);
+};
+const useFilters = () => {
+  const dateFilters = useDataTableDateFilters();
+  return useMemo(() => {
+    return [...dateFilters];
+  }, [dateFilters]);
+};
+export {
+  ProductVariantSection
+};