@zaamx/netme-bundle 0.0.2

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

@@ -0,0 +1,565 @@
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { defineRouteConfig } from "@medusajs/admin-sdk";
+import { CubeSolid } from "@medusajs/icons";
+import { Container, Heading, Button, Text, Badge, FocusModal, Label, Select, Input, toast, Switch } from "@medusajs/ui";
+import { useQueryClient, useQuery, useMutation } from "@tanstack/react-query";
+import { useState, useMemo, useRef, useCallback } from "react";
+import Medusa from "@medusajs/js-sdk";
+import { Link } from "react-router-dom";
+const sdk = new Medusa({
+  baseUrl: "/",
+  debug: false,
+  auth: {
+    type: "session"
+  }
+});
+const limit = 15;
+const BundledProductsPage = () => {
+  const [page, setPage] = useState(0);
+  const [openCreateModal, setOpenCreateModal] = useState(false);
+  const [isEditing, setIsEditing] = useState(false);
+  const [selectedProductId, setSelectedProductId] = useState();
+  const [bundleItems, setBundleItems] = useState([]);
+  const [bundleMeta, setBundleMeta] = useState([]);
+  const [products, setProducts] = useState([]);
+  const productsLimit = 15;
+  const [currentProductPage, setCurrentProductPage] = useState(0);
+  const [productsCount, setProductsCount] = useState(0);
+  const hasNextPage = useMemo(
+    () => productsCount ? productsCount > productsLimit : true,
+    [productsCount, productsLimit]
+  );
+  const queryClient = useQueryClient();
+  const offset = page * limit;
+  const { data, isLoading } = useQuery({
+    queryKey: ["bundled-products", offset, limit],
+    queryFn: () => sdk.client.fetch("/admin/bundled-products", {
+      method: "GET",
+      query: {
+        limit,
+        offset
+      }
+    })
+  });
+  useQuery({
+    queryKey: ["products"],
+    queryFn: async () => {
+      const { products: products2, count } = await sdk.admin.product.list({
+        limit: productsLimit,
+        offset: currentProductPage * productsLimit
+      });
+      setProductsCount(count);
+      setProducts((prev) => [...prev, ...products2]);
+      return products2;
+    },
+    enabled: hasNextPage
+  });
+  const fetchMoreProducts = () => {
+    if (!hasNextPage) {
+      return;
+    }
+    setCurrentProductPage(currentProductPage + 1);
+  };
+  const { mutateAsync: createBundle, isPending: isCreating } = useMutation({
+    mutationFn: async (data2) => {
+      if (!selectedProductId) throw new Error("No product selected");
+      await sdk.client.fetch(`/admin/products/${selectedProductId}/bundle`, {
+        method: "POST",
+        body: data2
+      });
+    }
+  });
+  const { mutateAsync: deleteBundle, isPending: isDeleting } = useMutation({
+    mutationFn: async (productId) => {
+      await sdk.client.fetch(`/admin/products/${productId}/bundle`, {
+        method: "DELETE"
+      });
+    }
+  });
+  const handleDeleteBundle = async (productId) => {
+    try {
+      await deleteBundle(productId);
+      toast.success("Bundle deleted successfully");
+      queryClient.invalidateQueries({
+        queryKey: ["bundled-products"]
+      });
+    } catch (error) {
+      console.error("Error deleting bundle:", error);
+      toast.error("Failed to delete bundle");
+    }
+  };
+  const handleEditBundle = (bundle) => {
+    setIsEditing(true);
+    setSelectedProductId(bundle.product.id);
+    setBundleItems(bundle.items.map((item) => ({
+      product_id: item.product.id,
+      min_quantity: item.min_quantity || 1,
+      max_quantity: item.max_quantity || 1,
+      default_quantity: item.quantity,
+      optional: item.optional || false,
+      separate_shipping: item.separate_shipping || false,
+      individual_price: item.individual_price || false
+    })));
+    setBundleMeta(bundle.bundle_meta || []);
+    setOpenCreateModal(true);
+  };
+  const handleCreateBundle = async () => {
+    try {
+      if (!selectedProductId) {
+        toast.error("Please select a product");
+        return;
+      }
+      const validItems = bundleItems.filter((item) => item.product_id);
+      if (validItems.length === 0) {
+        toast.error("Please add at least one product to the bundle");
+        return;
+      }
+      await createBundle({
+        child_product_ids: validItems.map((item) => ({
+          id: item.product_id,
+          min_quantity: item.min_quantity,
+          max_quantity: item.max_quantity,
+          default_quantity: item.default_quantity,
+          optional: item.optional,
+          separate_shipping: item.separate_shipping,
+          individual_price: item.individual_price
+        })),
+        bundle_meta: bundleMeta,
+        is_bundle: true
+      });
+      setOpenCreateModal(false);
+      toast.success(isEditing ? "Bundle updated successfully" : "Bundle created successfully");
+      queryClient.invalidateQueries({
+        queryKey: ["bundled-products"]
+      });
+      setIsEditing(false);
+      setSelectedProductId(void 0);
+      setBundleItems([]);
+      setBundleMeta([]);
+    } catch (error) {
+      console.error("Error creating bundle:", error);
+      toast.error("Failed to create bundle");
+    }
+  };
+  const addBundleItem = () => {
+    setBundleItems([
+      ...bundleItems,
+      {
+        product_id: void 0,
+        min_quantity: 1,
+        max_quantity: 1,
+        default_quantity: 1,
+        optional: false,
+        separate_shipping: false,
+        individual_price: false
+      }
+    ]);
+  };
+  const removeBundleItem = (index) => {
+    setBundleItems(bundleItems.filter((_, i) => i !== index));
+  };
+  const updateBundleItem = (index, field, value) => {
+    setBundleItems(bundleItems.map(
+      (item, i) => i === index ? { ...item, [field]: value } : item
+    ));
+  };
+  const addBundleMeta = () => {
+    setBundleMeta([...bundleMeta, { key: "", value: "" }]);
+  };
+  const removeBundleMeta = (index) => {
+    setBundleMeta(bundleMeta.filter((_, i) => i !== index));
+  };
+  const updateBundleMeta = (index, field, value) => {
+    setBundleMeta(bundleMeta.map(
+      (item, i) => i === index ? { ...item, [field]: value } : item
+    ));
+  };
+  const totalPages = Math.ceil(((data == null ? void 0 : data.count) || 0) / limit);
+  return /* @__PURE__ */ jsxs(Container, { className: "divide-y p-0", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-2 md:flex-row md:items-center p-6", children: [
+      /* @__PURE__ */ jsx(Heading, { children: "Bundled Products" }),
+      /* @__PURE__ */ jsx(Button, { variant: "primary", onClick: () => setOpenCreateModal(true), children: "Create Bundle" })
+    ] }),
+    isLoading ? /* @__PURE__ */ jsx("div", { className: "p-6", children: /* @__PURE__ */ jsx(Text, { children: "Loading..." }) }) : /* @__PURE__ */ jsxs("div", { className: "p-6", children: [
+      /* @__PURE__ */ jsx("div", { className: "overflow-x-auto", children: /* @__PURE__ */ jsxs("table", { className: "w-full border-collapse border border-gray-200", children: [
+        /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { className: "bg-gray-50", children: [
+          /* @__PURE__ */ jsx("th", { className: "border border-gray-200 px-4 py-2 text-left", children: "ID" }),
+          /* @__PURE__ */ jsx("th", { className: "border border-gray-200 px-4 py-2 text-left", children: "Title" }),
+          /* @__PURE__ */ jsx("th", { className: "border border-gray-200 px-4 py-2 text-left", children: "Items" }),
+          /* @__PURE__ */ jsx("th", { className: "border border-gray-200 px-4 py-2 text-left", children: "Product" }),
+          /* @__PURE__ */ jsx("th", { className: "border border-gray-200 px-4 py-2 text-left", children: "Status" })
+        ] }) }),
+        /* @__PURE__ */ jsx("tbody", { children: data == null ? void 0 : data.bundled_products.map((bundle) => /* @__PURE__ */ jsxs("tr", { className: "hover:bg-gray-50", children: [
+          /* @__PURE__ */ jsx("td", { className: "border border-gray-200 px-4 py-2", children: /* @__PURE__ */ jsx("code", { className: "text-sm", children: bundle.id }) }),
+          /* @__PURE__ */ jsx("td", { className: "border border-gray-200 px-4 py-2", children: bundle.title }),
+          /* @__PURE__ */ jsx("td", { className: "border border-gray-200 px-4 py-2", children: /* @__PURE__ */ jsx("div", { className: "space-y-1", children: bundle.items.map((item) => /* @__PURE__ */ jsxs("div", { className: "text-sm", children: [
+            /* @__PURE__ */ jsx(
+              Link,
+              {
+                to: `/products/${item.product.id}`,
+                className: "text-blue-600 hover:underline",
+                children: item.product.title
+              }
+            ),
+            /* @__PURE__ */ jsxs("span", { className: "text-gray-500", children: [
+              " x ",
+              item.quantity
+            ] }),
+            item.optional && /* @__PURE__ */ jsx(Badge, { className: "ml-2 bg-gray-100 text-gray-700", children: "Optional" })
+          ] }, item.id)) }) }),
+          /* @__PURE__ */ jsx("td", { className: "border border-gray-200 px-4 py-2", children: /* @__PURE__ */ jsx(
+            Link,
+            {
+              to: `/products/${bundle.product.id}`,
+              className: "text-blue-600 hover:underline",
+              children: "View Product"
+            }
+          ) }),
+          /* @__PURE__ */ jsx("td", { className: "border border-gray-200 px-4 py-2", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx(Badge, { className: bundle.is_bundle ? "bg-green-100 text-green-700" : "bg-gray-100 text-gray-700", children: bundle.is_bundle ? "Active" : "Inactive" }),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                variant: "secondary",
+                size: "small",
+                onClick: () => handleEditBundle(bundle),
+                children: "Edit"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                variant: "secondary",
+                size: "small",
+                onClick: () => handleDeleteBundle(bundle.id),
+                className: "text-red-600 hover:text-red-700",
+                children: "Delete"
+              }
+            )
+          ] }) })
+        ] }, bundle.id)) })
+      ] }) }),
+      totalPages > 1 && /* @__PURE__ */ jsxs("div", { className: "flex justify-center gap-2 mt-6", children: [
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "secondary",
+            onClick: () => setPage(Math.max(0, page - 1)),
+            disabled: page === 0,
+            children: "Previous"
+          }
+        ),
+        /* @__PURE__ */ jsxs("span", { className: "flex items-center px-4", children: [
+          "Page ",
+          page + 1,
+          " of ",
+          totalPages
+        ] }),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "secondary",
+            onClick: () => setPage(Math.min(totalPages - 1, page + 1)),
+            disabled: page === totalPages - 1,
+            children: "Next"
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(FocusModal, { open: openCreateModal, onOpenChange: setOpenCreateModal, children: /* @__PURE__ */ jsxs(FocusModal.Content, { children: [
+      /* @__PURE__ */ jsx(FocusModal.Header, { children: /* @__PURE__ */ jsx(Heading, { level: "h1", children: isEditing ? "Edit Bundle" : "Create Bundle" }) }),
+      /* @__PURE__ */ jsx(FocusModal.Body, { children: /* @__PURE__ */ jsx("div", { className: "flex flex-1 flex-col items-center h-[80vh] overflow-y-auto px-2 py-8", children: /* @__PURE__ */ jsxs("div", { className: "w-full max-w-3xl flex flex-col gap-y-8", children: [
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx(Label, { children: "Select Product to Bundle" }),
+          /* @__PURE__ */ jsx(Text, { className: "text-sm text-gray-600 mb-4", children: "Choose a product that will become a bundle" }),
+          /* @__PURE__ */ jsxs(
+            Select,
+            {
+              value: selectedProductId,
+              onValueChange: setSelectedProductId,
+              disabled: isEditing,
+              children: [
+                /* @__PURE__ */ jsx(Select.Trigger, { children: /* @__PURE__ */ jsx(Select.Value, { placeholder: "Select a product to bundle" }) }),
+                /* @__PURE__ */ jsx(Select.Content, { children: products == null ? void 0 : products.map((product) => /* @__PURE__ */ jsx(
+                  Select.Item,
+                  {
+                    value: product.id,
+                    children: product.title
+                  },
+                  product.id
+                )) })
+              ]
+            }
+          )
+        ] }),
+        selectedProductId && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx(Heading, { level: "h2", children: "Bundle Items" }),
+            /* @__PURE__ */ jsx(Text, { className: "text-sm text-gray-600 mb-4", children: "Select products to include in this bundle" }),
+            bundleItems.map((item, index) => /* @__PURE__ */ jsx(
+              BundleItemForm,
+              {
+                item,
+                index,
+                products,
+                onUpdate: (field, value) => updateBundleItem(index, field, value),
+                onRemove: () => removeBundleItem(index),
+                fetchMoreProducts,
+                hasNextPage
+              },
+              index
+            )),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                variant: "secondary",
+                onClick: addBundleItem,
+                className: "mt-4",
+                children: "Add Item"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx(Heading, { level: "h2", children: "Bundle Metadata" }),
+            /* @__PURE__ */ jsx(Text, { className: "text-sm text-gray-600 mb-4", children: "Add custom metadata for this bundle" }),
+            bundleMeta.map((meta, index) => /* @__PURE__ */ jsxs("div", { className: "flex gap-2 mb-2", children: [
+              /* @__PURE__ */ jsx(
+                Input,
+                {
+                  placeholder: "Key",
+                  value: meta.key,
+                  onChange: (e) => updateBundleMeta(index, "key", e.target.value)
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Input,
+                {
+                  placeholder: "Value",
+                  value: meta.value,
+                  onChange: (e) => updateBundleMeta(index, "value", e.target.value)
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Button,
+                {
+                  variant: "secondary",
+                  onClick: () => removeBundleMeta(index),
+                  children: "Remove"
+                }
+              )
+            ] }, index)),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                variant: "secondary",
+                onClick: addBundleMeta,
+                className: "mt-4",
+                children: "Add Metadata"
+              }
+            )
+          ] })
+        ] })
+      ] }) }) }),
+      /* @__PURE__ */ jsx(FocusModal.Footer, { children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-end gap-x-2", children: [
+        /* @__PURE__ */ jsx(Button, { variant: "secondary", onClick: () => {
+          setOpenCreateModal(false);
+          setIsEditing(false);
+          setSelectedProductId(void 0);
+          setBundleItems([]);
+          setBundleMeta([]);
+        }, children: "Cancel" }),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "primary",
+            onClick: handleCreateBundle,
+            isLoading: isCreating,
+            disabled: !selectedProductId,
+            children: isEditing ? "Update Bundle" : "Create Bundle"
+          }
+        )
+      ] }) })
+    ] }) })
+  ] });
+};
+const BundleItemForm = ({
+  item,
+  index,
+  products,
+  onUpdate,
+  onRemove,
+  fetchMoreProducts,
+  hasNextPage
+}) => {
+  const observer = useRef(
+    new IntersectionObserver(
+      (entries) => {
+        if (!hasNextPage) {
+          return;
+        }
+        const first = entries[0];
+        if (first.isIntersecting) {
+          fetchMoreProducts();
+        }
+      },
+      { threshold: 1 }
+    )
+  );
+  const lastOptionRef = useCallback(
+    (node) => {
+      if (!hasNextPage) {
+        return;
+      }
+      if (observer.current) {
+        observer.current.disconnect();
+      }
+      if (node) {
+        observer.current.observe(node);
+      }
+    },
+    [hasNextPage]
+  );
+  return /* @__PURE__ */ jsxs("div", { className: "border rounded-lg p-4 space-y-4", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+      /* @__PURE__ */ jsxs(Heading, { level: "h3", children: [
+        "Item ",
+        index + 1
+      ] }),
+      /* @__PURE__ */ jsx(Button, { variant: "secondary", onClick: onRemove, children: "Remove" })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx(Label, { children: "Product" }),
+      /* @__PURE__ */ jsxs(
+        Select,
+        {
+          value: item.product_id,
+          onValueChange: (value) => onUpdate("product_id", value),
+          children: [
+            /* @__PURE__ */ jsx(Select.Trigger, { children: /* @__PURE__ */ jsx(Select.Value, { placeholder: "Select Product" }) }),
+            /* @__PURE__ */ jsx(Select.Content, { children: products == null ? void 0 : products.map((product, productIndex) => /* @__PURE__ */ jsx(
+              Select.Item,
+              {
+                value: product.id,
+                ref: productIndex === products.length - 1 ? lastOptionRef : null,
+                children: product.title
+              },
+              product.id
+            )) })
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-3 gap-4", children: [
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx(Label, { children: "Min Quantity" }),
+        /* @__PURE__ */ jsx(
+          Input,
+          {
+            type: "number",
+            min: 0,
+            value: item.min_quantity,
+            onChange: (e) => onUpdate("min_quantity", parseInt(e.target.value) || 0)
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx(Label, { children: "Max Quantity" }),
+        /* @__PURE__ */ jsx(
+          Input,
+          {
+            type: "number",
+            min: 0,
+            value: item.max_quantity,
+            onChange: (e) => onUpdate("max_quantity", parseInt(e.target.value) || 0)
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx(Label, { children: "Default Quantity" }),
+        /* @__PURE__ */ jsx(
+          Input,
+          {
+            type: "number",
+            min: 0,
+            value: item.default_quantity,
+            onChange: (e) => onUpdate("default_quantity", parseInt(e.target.value) || 0)
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx(
+          Switch,
+          {
+            checked: item.optional,
+            onCheckedChange: (checked) => onUpdate("optional", checked)
+          }
+        ),
+        /* @__PURE__ */ jsx(Label, { children: "Optional" })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx(
+          Switch,
+          {
+            checked: item.separate_shipping,
+            onCheckedChange: (checked) => onUpdate("separate_shipping", checked)
+          }
+        ),
+        /* @__PURE__ */ jsx(Label, { children: "Separate Shipping" })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx(
+          Switch,
+          {
+            checked: item.individual_price,
+            onCheckedChange: (checked) => onUpdate("individual_price", checked)
+          }
+        ),
+        /* @__PURE__ */ jsx(Label, { children: "Individual Price" })
+      ] })
+    ] })
+  ] });
+};
+const config = defineRouteConfig({
+  label: "Bundled Products",
+  icon: CubeSolid
+});
+const i18nTranslations0 = {};
+const widgetModule = { widgets: [] };
+const routeModule = {
+  routes: [
+    {
+      Component: BundledProductsPage,
+      path: "/bundled-products"
+    }
+  ]
+};
+const menuItemModule = {
+  menuItems: [
+    {
+      label: config.label,
+      icon: config.icon,
+      path: "/bundled-products",
+      nested: void 0,
+      rank: void 0,
+      translationNs: void 0
+    }
+  ]
+};
+const formModule = { customFields: {} };
+const displayModule = {
+  displays: {}
+};
+const i18nModule = { resources: i18nTranslations0 };
+const plugin = {
+  widgetModule,
+  routeModule,
+  menuItemModule,
+  formModule,
+  displayModule,
+  i18nModule
+};
+export {
+  plugin as default
+};