@emreunes/medusa-category-images 0.0.1

package/.medusa/server/src/admin/index.js

@@ -0,0 +1,545 @@
+"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");
+require("@medusajs/admin-shared");
+const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
+const Medusa__default = /* @__PURE__ */ _interopDefault(Medusa);
+const sdk = new Medusa__default.default({
+  baseUrl: typeof window !== "undefined" ? window.location.origin : "http://localhost:9000",
+  auth: {
+    type: "session"
+  }
+});
+const CategoryImageItem = ({
+  id,
+  url,
+  alt,
+  isThumbnail,
+  isSelected,
+  onToggleSelect
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: "shadow-elevation-card-rest hover:shadow-elevation-card-hover focus-visible:shadow-borders-focus bg-ui-bg-subtle-hover group relative aspect-square h-auto max-w-full overflow-hidden rounded-lg outline-none",
+      children: [
+        isThumbnail && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute left-2 top-2", children: /* @__PURE__ */ jsxRuntime.jsx(icons.ThumbnailBadge, {}) }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: ui.clx(
+          "transition-fg absolute right-2 top-2 opacity-0 group-focus-within:opacity-100 group-hover:opacity-100 group-focus:opacity-100",
+          isSelected && "opacity-100"
+        ), children: /* @__PURE__ */ jsxRuntime.jsx(
+          ui.Checkbox,
+          {
+            checked: isSelected,
+            onCheckedChange: onToggleSelect
+          }
+        ) }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "img",
+          {
+            src: url,
+            alt,
+            className: "size-full object-cover object-center"
+          }
+        )
+      ]
+    },
+    id
+  );
+};
+const CategoryImageGallery = ({
+  existingImages,
+  uploadedFiles,
+  imagesToDelete,
+  currentThumbnailId,
+  selectedImageIds,
+  onToggleSelect
+}) => {
+  const visibleExistingImages = existingImages.filter(
+    (image) => image.id && !imagesToDelete.has(image.id)
+  );
+  const hasNoImages = visibleExistingImages.length === 0 && uploadedFiles.length === 0;
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-ui-bg-subtle size-full overflow-auto", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid h-fit auto-rows-auto grid-cols-4 gap-6 p-6", children: [
+    visibleExistingImages.map((image) => {
+      if (!image.id) return null;
+      const imageId = image.id;
+      const isThumbnail = currentThumbnailId === imageId;
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        CategoryImageItem,
+        {
+          id: imageId,
+          url: image.url,
+          alt: `Category ${image.type}`,
+          isThumbnail,
+          isSelected: selectedImageIds.has(imageId),
+          onToggleSelect: () => onToggleSelect(imageId)
+        },
+        imageId
+      );
+    }),
+    uploadedFiles.map((file) => {
+      const uploadedId = `uploaded:${file.id}`;
+      const isThumbnail = currentThumbnailId === uploadedId;
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        CategoryImageItem,
+        {
+          id: file.id,
+          url: file.url,
+          alt: "Uploaded",
+          isThumbnail,
+          isSelected: selectedImageIds.has(uploadedId),
+          onToggleSelect: () => onToggleSelect(file.id, true)
+        },
+        file.id
+      );
+    }),
+    hasNoImages && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "col-span-4 flex items-center justify-center p-8", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-ui-fg-subtle text-center", children: "No images yet. Upload images to get started." }) })
+  ] }) });
+};
+const CategoryImageUpload = ({
+  fileInputRef,
+  isUploading,
+  onFileSelect
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-ui-bg-base overflow-auto border-b px-6 py-4 lg:border-b-0 lg:border-l", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col space-y-2", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-y-2", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-y-1", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-x-1", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("label", { className: "font-sans txt-compact-small font-medium", children: "Media" }),
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "font-normal font-sans txt-compact-small text-ui-fg-muted", children: "(Optional)" })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "txt-small text-ui-fg-subtle", children: "Add media to the product to showcase it in your storefront." })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "input",
+        {
+          ref: fileInputRef,
+          type: "file",
+          multiple: true,
+          accept: "image/jpeg,image/png,image/gif,image/webp,image/heic,image/svg+xml",
+          onChange: (e) => onFileSelect(e.target.files),
+          hidden: true
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        "button",
+        {
+          type: "button",
+          onClick: () => {
+            var _a;
+            return (_a = fileInputRef.current) == null ? void 0 : _a.click();
+          },
+          disabled: isUploading,
+          className: "bg-ui-bg-component border-ui-border-strong transition-fg group flex w-full flex-col items-center gap-y-2 rounded-lg border border-dashed p-8 hover:border-ui-border-interactive focus:border-ui-border-interactive focus:shadow-borders-focus outline-none focus:border-solid disabled:opacity-50 disabled:cursor-not-allowed",
+          onDragOver: (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+          },
+          onDrop: (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            if (!isUploading) {
+              onFileSelect(e.dataTransfer.files);
+            }
+          },
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-ui-fg-subtle group-disabled:text-ui-fg-disabled flex items-center gap-x-2", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(icons.ArrowDownTray, {}),
+              /* @__PURE__ */ jsxRuntime.jsx("p", { className: "font-normal font-sans txt-medium", children: isUploading ? "Uploading..." : "Upload images" })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "font-normal font-sans txt-compact-small text-ui-fg-muted group-disabled:text-ui-fg-disabled", children: "Drag and drop images here or click to upload." })
+          ]
+        }
+      )
+    ] })
+  ] }) }) });
+};
+const useCategoryImageMutations = ({
+  categoryId,
+  onCreateSuccess,
+  onUpdateSuccess,
+  onDeleteSuccess
+}) => {
+  const queryClient = reactQuery.useQueryClient();
+  const uploadFilesMutation = reactQuery.useMutation({
+    mutationFn: async (files) => {
+      const response = await sdk.admin.upload.create({ files });
+      return response;
+    },
+    onError: (error) => {
+      console.error("Failed to upload files:", error);
+    }
+  });
+  const createImagesMutation = reactQuery.useMutation({
+    mutationFn: async (images) => {
+      const response = await sdk.client.fetch(
+        `/admin/categories/${categoryId}/images`,
+        {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json"
+          },
+          body: {
+            images
+          }
+        }
+      );
+      return response;
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["category-images", categoryId] });
+      onCreateSuccess == null ? void 0 : onCreateSuccess();
+    }
+  });
+  const updateImagesMutation = reactQuery.useMutation({
+    mutationFn: async (updates) => {
+      const response = await sdk.client.fetch(
+        `/admin/categories/${categoryId}/images/batch`,
+        {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json"
+          },
+          body: {
+            updates
+          }
+        }
+      );
+      return response;
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["category-images", categoryId] });
+      onUpdateSuccess == null ? void 0 : onUpdateSuccess();
+    }
+  });
+  const deleteImagesMutation = reactQuery.useMutation({
+    mutationFn: async (ids) => {
+      const response = await sdk.client.fetch(
+        `/admin/categories/${categoryId}/images/batch`,
+        {
+          method: "DELETE",
+          headers: {
+            "Content-Type": "application/json"
+          },
+          body: {
+            ids
+          }
+        }
+      );
+      return response;
+    },
+    onSuccess: (_data, deletedIds) => {
+      queryClient.invalidateQueries({ queryKey: ["category-images", categoryId] });
+      onDeleteSuccess == null ? void 0 : onDeleteSuccess(deletedIds);
+    }
+  });
+  return {
+    uploadFilesMutation,
+    createImagesMutation,
+    updateImagesMutation,
+    deleteImagesMutation
+  };
+};
+const CategoryMediaModal = ({
+  categoryId,
+  existingImages
+}) => {
+  const [open, setOpen] = react.useState(false);
+  const [uploadedFiles, setUploadedFiles] = react.useState([]);
+  const [selectedImageIds, setSelectedImageIds] = react.useState(/* @__PURE__ */ new Set());
+  const [currentThumbnailId, setCurrentThumbnailId] = react.useState(null);
+  const [imagesToDelete, setImagesToDelete] = react.useState(/* @__PURE__ */ new Set());
+  const fileInputRef = react.useRef(null);
+  const queryClient = reactQuery.useQueryClient();
+  const {
+    uploadFilesMutation,
+    createImagesMutation,
+    updateImagesMutation,
+    deleteImagesMutation
+  } = useCategoryImageMutations({
+    categoryId,
+    onCreateSuccess: () => {
+      setOpen(false);
+      resetModalState();
+    },
+    onUpdateSuccess: () => {
+      setSelectedImageIds(/* @__PURE__ */ new Set());
+    },
+    onDeleteSuccess: (deletedIds) => {
+      setSelectedImageIds(/* @__PURE__ */ new Set());
+      if (currentThumbnailId && deletedIds.includes(currentThumbnailId)) {
+        setCurrentThumbnailId(null);
+      }
+    }
+  });
+  const isSaving = createImagesMutation.isPending || updateImagesMutation.isPending || deleteImagesMutation.isPending;
+  const resetModalState = () => {
+    setUploadedFiles([]);
+    setSelectedImageIds(/* @__PURE__ */ new Set());
+    setCurrentThumbnailId(null);
+    setImagesToDelete(/* @__PURE__ */ new Set());
+  };
+  const initializeThumbnail = () => {
+    const thumbnailImage = existingImages.find((img) => img.type === "thumbnail");
+    if (thumbnailImage == null ? void 0 : thumbnailImage.id) {
+      setCurrentThumbnailId(thumbnailImage.id);
+    }
+  };
+  const handleOpenChange = (isOpen) => {
+    setOpen(isOpen);
+    if (isOpen) {
+      initializeThumbnail();
+    } else {
+      resetModalState();
+    }
+  };
+  const handleUploadFile = (files) => {
+    if (!files || files.length === 0) return;
+    const filesArray = Array.from(files);
+    uploadFilesMutation.mutate(filesArray, {
+      onSuccess: (data) => {
+        setUploadedFiles((prev) => [...prev, ...data.files]);
+      }
+    });
+    if (fileInputRef.current) {
+      fileInputRef.current.value = "";
+    }
+  };
+  const handleImageSelection = (id, isUploaded = false) => {
+    const itemId = isUploaded ? `uploaded:${id}` : id;
+    const newSelected = new Set(selectedImageIds);
+    if (newSelected.has(itemId)) {
+      newSelected.delete(itemId);
+    } else {
+      newSelected.add(itemId);
+    }
+    setSelectedImageIds(newSelected);
+  };
+  const handleSetAsThumbnail = () => {
+    if (selectedImageIds.size !== 1) return;
+    const selectedId = Array.from(selectedImageIds)[0];
+    setCurrentThumbnailId(selectedId);
+    if (selectedId.startsWith("uploaded:")) {
+      const uploadedFileId = selectedId.replace("uploaded:", "");
+      setUploadedFiles(
+        (prev) => prev.map((file) => file.id === uploadedFileId ? { ...file, type: "thumbnail" } : file)
+      );
+    }
+    setSelectedImageIds(/* @__PURE__ */ new Set());
+  };
+  const handleDelete = () => {
+    if (selectedImageIds.size === 0) return;
+    const uploadedFileIds = [];
+    const savedImageIds = [];
+    selectedImageIds.forEach((id) => {
+      if (id.startsWith("uploaded:")) {
+        uploadedFileIds.push(id.replace("uploaded:", ""));
+      } else {
+        savedImageIds.push(id);
+      }
+    });
+    if (uploadedFileIds.length > 0) {
+      setUploadedFiles(
+        (prev) => prev.filter((file) => !uploadedFileIds.includes(file.id))
+      );
+      if (currentThumbnailId == null ? void 0 : currentThumbnailId.startsWith("uploaded:")) {
+        const thumbnailFileId = currentThumbnailId.replace("uploaded:", "");
+        if (uploadedFileIds.includes(thumbnailFileId)) {
+          setCurrentThumbnailId(null);
+        }
+      }
+    }
+    if (savedImageIds.length > 0) {
+      setImagesToDelete((prev) => {
+        const newSet = new Set(prev);
+        savedImageIds.forEach((id) => newSet.add(id));
+        return newSet;
+      });
+      if (currentThumbnailId && savedImageIds.includes(currentThumbnailId)) {
+        setCurrentThumbnailId(null);
+      }
+    }
+    setSelectedImageIds(/* @__PURE__ */ new Set());
+  };
+  const handleSave = async () => {
+    const hasNewImages = uploadedFiles.length > 0;
+    const hasImagesToDelete = imagesToDelete.size > 0;
+    const initialThumbnail = existingImages.find((img) => img.type === "thumbnail");
+    const thumbnailChanged = currentThumbnailId && !currentThumbnailId.startsWith("uploaded:") && currentThumbnailId !== (initialThumbnail == null ? void 0 : initialThumbnail.id);
+    if (!hasNewImages && !hasImagesToDelete && !thumbnailChanged) {
+      setOpen(false);
+      return;
+    }
+    try {
+      const operations = [];
+      if (hasNewImages) {
+        const imagesToCreate = uploadedFiles.map((file) => ({
+          url: file.url,
+          file_id: file.id,
+          type: file.type || (currentThumbnailId === `uploaded:${file.id}` ? "thumbnail" : "image")
+        }));
+        operations.push(createImagesMutation.mutateAsync(imagesToCreate));
+      }
+      if (thumbnailChanged) {
+        const updates = [
+          {
+            id: currentThumbnailId,
+            type: "thumbnail"
+          }
+        ];
+        operations.push(updateImagesMutation.mutateAsync(updates));
+      }
+      if (hasImagesToDelete) {
+        const idsToDelete = Array.from(imagesToDelete);
+        operations.push(deleteImagesMutation.mutateAsync(idsToDelete));
+      }
+      await Promise.all(operations);
+      queryClient.invalidateQueries({ queryKey: ["category-images", categoryId] });
+      setOpen(false);
+      resetModalState();
+      ui.toast.success("Category media saved successfully");
+    } catch (error) {
+      ui.toast.error("Failed to save changes");
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(ui.FocusModal, { open, onOpenChange: handleOpenChange, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(ui.FocusModal.Trigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", variant: "secondary", children: "Edit" }) }),
+    /* @__PURE__ */ jsxRuntime.jsxs(ui.FocusModal.Content, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(ui.FocusModal.Header, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Edit Media" }) }),
+      /* @__PURE__ */ jsxRuntime.jsxs(ui.FocusModal.Body, { className: "flex h-full overflow-hidden", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full h-full flex-col-reverse lg:grid lg:grid-cols-[1fr_560px]", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            CategoryImageGallery,
+            {
+              existingImages,
+              uploadedFiles,
+              imagesToDelete,
+              currentThumbnailId,
+              selectedImageIds,
+              onToggleSelect: handleImageSelection
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            CategoryImageUpload,
+            {
+              fileInputRef,
+              isUploading: uploadFilesMutation.isPending,
+              onFileSelect: handleUploadFile
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(ui.CommandBar, { open: selectedImageIds.size > 0, children: /* @__PURE__ */ jsxRuntime.jsxs(ui.CommandBar.Bar, { children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(ui.CommandBar.Value, { children: [
+            selectedImageIds.size,
+            " selected"
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(ui.CommandBar.Seperator, {}),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            ui.CommandBar.Command,
+            {
+              action: handleSetAsThumbnail,
+              label: "Set as thumbnail",
+              shortcut: "t",
+              disabled: selectedImageIds.size !== 1
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(ui.CommandBar.Seperator, {}),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            ui.CommandBar.Command,
+            {
+              action: handleDelete,
+              label: "Delete",
+              shortcut: "d"
+            }
+          )
+        ] }) })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(ui.FocusModal.Footer, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-end gap-x-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(ui.FocusModal.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", variant: "secondary", children: "Cancel" }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          ui.Button,
+          {
+            size: "small",
+            onClick: handleSave,
+            isLoading: isSaving,
+            children: "Save"
+          }
+        )
+      ] }) })
+    ] })
+  ] });
+};
+const CategoryMediaWidget = ({ data }) => {
+  const { data: response, isLoading } = reactQuery.useQuery({
+    queryKey: ["category-images", data.id],
+    queryFn: async () => {
+      const result = await sdk.client.fetch(
+        `/admin/categories/${data.id}/images`
+      );
+      return result;
+    }
+  });
+  const images = (response == null ? void 0 : response.category_images) || [];
+  return /* @__PURE__ */ jsxRuntime.jsxs(ui.Container, { className: "divide-y p-0", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between px-6 py-4", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { level: "h2", children: "Media" }),
+      /* @__PURE__ */ jsxRuntime.jsx(CategoryMediaModal, { categoryId: data.id, existingImages: images })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-6 py-4", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-[repeat(auto-fill,96px)] gap-4", children: [
+      isLoading && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "col-span-full", children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-ui-fg-subtle text-sm", children: "Loading..." }) }),
+      !isLoading && images.length === 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "col-span-full", children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-ui-fg-subtle text-sm", children: "No images added yet" }) }),
+      images.map((image) => /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          className: "relative aspect-square overflow-hidden rounded-lg border border-ui-border-base bg-ui-bg-subtle",
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "img",
+              {
+                src: image.url,
+                alt: `Category ${image.type}`,
+                className: "h-full w-full object-cover"
+              }
+            ),
+            image.type === "thumbnail" && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute top-2 left-2", children: /* @__PURE__ */ jsxRuntime.jsx(icons.ThumbnailBadge, {}) })
+          ]
+        },
+        image.id
+      ))
+    ] }) })
+  ] });
+};
+adminSdk.defineWidgetConfig({
+  zone: "product_category.details.after"
+});
+const widgetModule = { widgets: [
+  {
+    Component: CategoryMediaWidget,
+    zone: ["product_category.details.after"]
+  }
+] };
+const routeModule = {
+  routes: []
+};
+const menuItemModule = {
+  menuItems: []
+};
+const formModule = { customFields: {} };
+const displayModule = {
+  displays: {}
+};
+const i18nModule = { resources: {} };
+const plugin = {
+  widgetModule,
+  routeModule,
+  menuItemModule,
+  formModule,
+  displayModule,
+  i18nModule
+};
+module.exports = plugin;