@zaamx/netme-bundle 0.0.4 → 0.0.6

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

@@ -1,9 +1,9 @@
 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 { Container, Heading, Button, Text, Badge, FocusModal, Label, Input, toast, Switch } from "@medusajs/ui";
 import { useQueryClient, useQuery, useMutation } from "@tanstack/react-query";
-import { useState, useMemo, useRef, useCallback } from "react";
+import { useState, useRef, useEffect } from "react";
 import Medusa from "@medusajs/js-sdk";
 import { Link } from "react-router-dom";
 const sdk = new Medusa({
@@ -13,514 +13,481 @@ const sdk = new Medusa({
     type: "session"
   }
 });
-const limit = 15;
+const ProductSearchSelect = ({
+  value,
+  valueLabel,
+  onChange,
+  disabled,
+  placeholder = "Search products…"
+}) => {
+  const [search, setSearch] = useState("");
+  const [open, setOpen] = useState(false);
+  const [results, setResults] = useState([]);
+  const [loading, setLoading] = useState(false);
+  const containerRef = useRef(null);
+  useEffect(() => {
+    const handler = (e) => {
+      if (containerRef.current && !containerRef.current.contains(e.target)) {
+        setOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", handler);
+    return () => document.removeEventListener("mousedown", handler);
+  }, []);
+  useEffect(() => {
+    if (!open) return;
+    const delay = search.trim() ? 300 : 0;
+    const timer = setTimeout(async () => {
+      setLoading(true);
+      try {
+        const { products } = await sdk.admin.product.list({
+          q: search.trim() || void 0,
+          limit: 15
+        });
+        setResults(products.map((p) => ({ id: p.id, title: p.title ?? "" })));
+      } catch {
+        setResults([]);
+      } finally {
+        setLoading(false);
+      }
+    }, delay);
+    return () => clearTimeout(timer);
+  }, [search, open]);
+  if (disabled) {
+    return /* @__PURE__ */ jsx("div", { className: "border border-gray-200 rounded-md px-3 py-2 bg-gray-50 text-sm text-gray-700 min-h-[38px]", children: valueLabel || value || /* @__PURE__ */ jsx("span", { className: "text-gray-400", children: "—" }) });
+  }
+  return /* @__PURE__ */ jsxs("div", { ref: containerRef, className: "relative", children: [
+    value && valueLabel && /* @__PURE__ */ jsxs("div", { className: "mb-1 flex items-center gap-2", children: [
+      /* @__PURE__ */ jsx(Badge, { className: "bg-blue-50 text-blue-700 text-xs", children: valueLabel }),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: "text-xs text-gray-400 hover:text-gray-600",
+          onClick: () => onChange("", ""),
+          children: "✕ clear"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx(
+      Input,
+      {
+        placeholder: value ? "Search to change…" : placeholder,
+        value: search,
+        onChange: (e) => {
+          setSearch(e.target.value);
+          setOpen(true);
+        },
+        onFocus: () => setOpen(true)
+      }
+    ),
+    open && /* @__PURE__ */ jsxs("div", { className: "absolute z-50 w-full mt-1 bg-white border border-gray-200 rounded-md shadow-lg max-h-60 overflow-y-auto", children: [
+      loading && /* @__PURE__ */ jsx("div", { className: "px-3 py-2 text-sm text-gray-400", children: "Searching…" }),
+      !loading && results.length === 0 && search.trim() && /* @__PURE__ */ jsx("div", { className: "px-3 py-2 text-sm text-gray-400", children: "No products found." }),
+      results.map((product) => /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: "w-full text-left px-3 py-2 hover:bg-gray-50 text-sm border-b border-gray-100 last:border-0",
+          onMouseDown: (e) => {
+            e.preventDefault();
+            onChange(product.id, product.title);
+            setSearch("");
+            setOpen(false);
+          },
+          children: product.title
+        },
+        product.id
+      ))
+    ] })
+  ] });
+};
+const VariantPicker = ({
+  productId,
+  selectedIds,
+  onChange
+}) => {
+  const [variants, setVariants] = useState([]);
+  const [loading, setLoading] = useState(false);
+  useEffect(() => {
+    if (!productId) {
+      setVariants([]);
+      return;
+    }
+    setLoading(true);
+    sdk.admin.product.retrieve(productId).then(
+      ({ product }) => setVariants(
+        (product.variants || []).map((v) => ({ id: v.id, title: v.title ?? v.id, sku: v.sku ?? void 0 }))
+      )
+    ).catch(() => setVariants([])).finally(() => setLoading(false));
+  }, [productId]);
+  const toggle = (id) => onChange(
+    selectedIds.includes(id) ? selectedIds.filter((s) => s !== id) : [...selectedIds, id]
+  );
+  if (loading) return /* @__PURE__ */ jsx(Text, { className: "text-sm text-gray-400", children: "Loading variants…" });
+  if (!loading && variants.length === 0)
+    return /* @__PURE__ */ jsx(Text, { className: "text-sm text-gray-400", children: "No variants found." });
+  return /* @__PURE__ */ jsx("div", { className: "space-y-2 max-h-52 overflow-y-auto pr-1", children: variants.map((v) => /* @__PURE__ */ jsxs("label", { className: "flex items-center gap-2 cursor-pointer select-none", children: [
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        type: "checkbox",
+        checked: selectedIds.includes(v.id),
+        onChange: () => toggle(v.id),
+        className: "h-4 w-4 rounded border-gray-300"
+      }
+    ),
+    /* @__PURE__ */ jsx("span", { className: "text-sm", children: v.title }),
+    v.sku && /* @__PURE__ */ jsx("span", { className: "text-xs text-gray-400 font-mono", children: v.sku })
+  ] }, v.id)) });
+};
+const emptyBundleItem = () => ({
+  product_id: void 0,
+  product_title: "",
+  variant_mode: "all",
+  variant_ids: [],
+  min_quantity: 1,
+  max_quantity: 1,
+  default_quantity: 1,
+  optional: false,
+  separate_shipping: false,
+  individual_price: false
+});
+const LIMIT = 15;
 const BundledProductsPage = () => {
   const [page, setPage] = useState(0);
-  const [openCreateModal, setOpenCreateModal] = useState(false);
+  const [openModal, setOpenModal] = useState(false);
   const [isEditing, setIsEditing] = useState(false);
   const [selectedProductId, setSelectedProductId] = useState();
+  const [selectedProductTitle, setSelectedProductTitle] = 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 offset = page * LIMIT;
+  const closeModal = () => {
+    setOpenModal(false);
+    setIsEditing(false);
+    setSelectedProductId(void 0);
+    setSelectedProductTitle("");
+    setBundleItems([]);
+    setBundleMeta([]);
+  };
   const { data, isLoading } = useQuery({
-    queryKey: ["bundled-products", offset, limit],
+    queryKey: ["bundled-products", offset, LIMIT],
     queryFn: () => sdk.client.fetch("/admin/bundled-products", {
       method: "GET",
-      query: {
-        limit,
-        offset
-      }
+      query: { limit: 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) => {
+  const { mutateAsync: saveBundle, isPending: isSaving } = useMutation({
+    mutationFn: async () => {
       if (!selectedProductId) throw new Error("No product selected");
+      const validItems = bundleItems.filter((i) => i.product_id);
       await sdk.client.fetch(`/admin/products/${selectedProductId}/bundle`, {
         method: "POST",
-        body: data2
+        body: {
+          child_product_ids: validItems.map((item) => ({
+            id: item.product_id,
+            variant_ids: item.variant_mode === "specific" ? item.variant_ids : [],
+            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
+        }
       });
     }
   });
-  const { mutateAsync: deleteBundle, isPending: isDeleting } = useMutation({
-    mutationFn: async (productId) => {
-      await sdk.client.fetch(`/admin/products/${productId}/bundle`, {
-        method: "DELETE"
-      });
-    }
+  const { mutateAsync: deleteBundle } = useMutation({
+    mutationFn: (productId) => 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,
+    setSelectedProductTitle(bundle.title);
+    setBundleItems(
+      bundle.items.map((item) => {
+        var _a;
+        return {
+          product_id: item.product.id,
+          product_title: item.product.title,
+          variant_mode: ((_a = item.variant_ids) == null ? void 0 : _a.length) ? "specific" : "all",
+          variant_ids: item.variant_ids ?? [],
           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: "" }]);
+        };
+      })
+    );
+    setBundleMeta(bundle.bundle_meta || []);
+    setOpenModal(true);
   };
-  const removeBundleMeta = (index) => {
-    setBundleMeta(bundleMeta.filter((_, i) => i !== index));
+  const handleDeleteBundle = async (productId) => {
+    try {
+      await deleteBundle(productId);
+      toast.success("Bundle deleted");
+      queryClient.invalidateQueries({ queryKey: ["bundled-products"] });
+    } catch {
+      toast.error("Failed to delete bundle");
+    }
   };
-  const updateBundleMeta = (index, field, value) => {
-    setBundleMeta(bundleMeta.map(
-      (item, i) => i === index ? { ...item, [field]: value } : item
-    ));
+  const handleSave = async () => {
+    if (!selectedProductId) {
+      toast.error("Please select a product");
+      return;
+    }
+    if (!bundleItems.some((i) => i.product_id)) {
+      toast.error("Please add at least one product to the bundle");
+      return;
+    }
+    try {
+      await saveBundle();
+      toast.success(isEditing ? "Bundle updated" : "Bundle created");
+      queryClient.invalidateQueries({ queryKey: ["bundled-products"] });
+      closeModal();
+    } catch {
+      toast.error(isEditing ? "Failed to update bundle" : "Failed to create bundle");
+    }
   };
-  const totalPages = Math.ceil(((data == null ? void 0 : data.count) || 0) / limit);
+  const updateItem = (index, field, value) => setBundleItems((prev) => prev.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__ */ jsxs("div", { className: "flex items-center justify-between p-6", children: [
       /* @__PURE__ */ jsx(Heading, { children: "Bundled Products" }),
-      /* @__PURE__ */ jsx(Button, { variant: "primary", onClick: () => setOpenCreateModal(true), children: "Create Bundle" })
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "primary",
+          onClick: () => {
+            closeModal();
+            setOpenModal(true);
+          },
+          children: "Create Bundle"
+        }
+      )
     ] }),
-    isLoading ? /* @__PURE__ */ jsx("div", { className: "p-6", children: /* @__PURE__ */ jsx(Text, { children: "Loading..." }) }) : /* @__PURE__ */ jsxs("div", { className: "p-6", children: [
+    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("th", { className: "border border-gray-200 px-4 py-2 text-left", children: "Status" }),
+          /* @__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: "Actions" })
         ] }) }),
-        /* @__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
+        /* @__PURE__ */ jsxs("tbody", { children: [
+          ((data == null ? void 0 : data.bundled_products.length) ?? 0) === 0 && /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("td", { colSpan: 4, className: "border border-gray-200 px-4 py-6 text-center text-gray-400", children: "No bundled products found." }) }),
+          data == null ? void 0 : data.bundled_products.map((bundle) => /* @__PURE__ */ jsxs("tr", { className: "hover:bg-gray-50", children: [
+            /* @__PURE__ */ jsxs("td", { className: "border border-gray-200 px-4 py-3", children: [
+              /* @__PURE__ */ jsx(Link, { to: `/products/${bundle.product.id}`, className: "font-medium text-blue-600 hover:underline", children: bundle.title }),
+              /* @__PURE__ */ jsx("div", { className: "text-xs text-gray-400 mt-0.5", children: bundle.id })
             ] }),
-            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)) })
+            /* @__PURE__ */ jsx("td", { className: "border border-gray-200 px-4 py-3", children: /* @__PURE__ */ jsx(Badge, { className: bundle.status === "published" ? "bg-green-100 text-green-700" : "bg-gray-100 text-gray-600", children: bundle.status ?? "—" }) }),
+            /* @__PURE__ */ jsx("td", { className: "border border-gray-200 px-4 py-3", children: /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+              bundle.items.length === 0 && /* @__PURE__ */ jsx("span", { className: "text-sm text-gray-400", children: "No items" }),
+              bundle.items.map((item) => {
+                var _a;
+                return /* @__PURE__ */ jsxs("div", { className: "text-sm", children: [
+                  /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", 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-400", children: [
+                      "× ",
+                      item.default_quantity
+                    ] }),
+                    item.optional && /* @__PURE__ */ jsx(Badge, { className: "bg-gray-100 text-gray-500 text-xs", children: "Optional" })
+                  ] }),
+                  ((_a = item.variant_ids) == null ? void 0 : _a.length) > 0 && /* @__PURE__ */ jsxs("div", { className: "text-xs text-gray-400 ml-1", children: [
+                    item.variant_ids.length,
+                    " specific variant",
+                    item.variant_ids.length > 1 ? "s" : ""
+                  ] })
+                ] }, item.id);
+              })
+            ] }) }),
+            /* @__PURE__ */ jsx("td", { className: "border border-gray-200 px-4 py-3", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+              /* @__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__ */ 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(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, { open: openModal, onOpenChange: (open) => {
+      if (!open) closeModal();
+    }, 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,
+          /* @__PURE__ */ jsx(Label, { children: "Bundle Product" }),
+          /* @__PURE__ */ jsx(Text, { className: "text-sm text-gray-500 mb-2", children: isEditing ? "The product this bundle is attached to" : "Choose the product that becomes the bundle" }),
+          /* @__PURE__ */ jsx(
+            ProductSearchSelect,
             {
               value: selectedProductId,
-              onValueChange: setSelectedProductId,
+              valueLabel: selectedProductTitle,
+              onChange: (id, title) => {
+                setSelectedProductId(id || void 0);
+                setSelectedProductTitle(title);
+              },
               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
-                )) })
-              ]
+              placeholder: "Search for a product to bundle…"
             }
           )
         ] }),
         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" }),
+            /* @__PURE__ */ jsx(Text, { className: "text-sm text-gray-500 mb-4", children: "Products included 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
+                onUpdate: (field, value) => updateItem(index, field, value),
+                onRemove: () => setBundleItems((prev) => prev.filter((_, i) => i !== index))
               },
               index
             )),
-            /* @__PURE__ */ jsx(
-              Button,
-              {
-                variant: "secondary",
-                onClick: addBundleItem,
-                className: "mt-4",
-                children: "Add Item"
-              }
-            )
+            /* @__PURE__ */ jsx(Button, { variant: "secondary", onClick: () => setBundleItems((prev) => [...prev, emptyBundleItem()]), className: "mt-2", 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" }),
+            /* @__PURE__ */ jsx(Text, { className: "text-sm text-gray-500 mb-4", children: "Custom key-value pairs" }),
             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"
-                }
-              )
+              /* @__PURE__ */ jsx(Input, { placeholder: "Key", value: meta.key, onChange: (e) => setBundleMeta((prev) => prev.map((m, i) => i === index ? { ...m, key: e.target.value } : m)) }),
+              /* @__PURE__ */ jsx(Input, { placeholder: "Value", value: meta.value, onChange: (e) => setBundleMeta((prev) => prev.map((m, i) => i === index ? { ...m, value: e.target.value } : m)) }),
+              /* @__PURE__ */ jsx(Button, { variant: "secondary", onClick: () => setBundleMeta((prev) => prev.filter((_, i) => i !== index)), children: "Remove" })
             ] }, index)),
-            /* @__PURE__ */ jsx(
-              Button,
-              {
-                variant: "secondary",
-                onClick: addBundleMeta,
-                className: "mt-4",
-                children: "Add Metadata"
-              }
-            )
+            /* @__PURE__ */ jsx(Button, { variant: "secondary", onClick: () => setBundleMeta((prev) => [...prev, { key: "", value: "" }]), className: "mt-2", 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"
-          }
-        )
+        /* @__PURE__ */ jsx(Button, { variant: "secondary", onClick: closeModal, children: "Cancel" }),
+        /* @__PURE__ */ jsx(Button, { variant: "primary", onClick: handleSave, isLoading: isSaving, 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)
-          }
-        )
-      ] })
+const BundleItemForm = ({ item, index, onUpdate, onRemove }) => /* @__PURE__ */ jsxs("div", { className: "border rounded-lg p-4 space-y-4 mb-4", children: [
+  /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+    /* @__PURE__ */ jsxs(Heading, { level: "h3", children: [
+      "Item ",
+      index + 1
     ] }),
-    /* @__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(Button, { variant: "secondary", onClick: onRemove, children: "Remove" })
+  ] }),
+  /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsx(Label, { children: "Product" }),
+    /* @__PURE__ */ jsx(
+      ProductSearchSelect,
+      {
+        value: item.product_id,
+        valueLabel: item.product_title,
+        onChange: (id, title) => {
+          onUpdate("product_id", id || void 0);
+          onUpdate("product_title", title);
+          onUpdate("variant_mode", "all");
+          onUpdate("variant_ids", []);
+        },
+        placeholder: "Search for a product…"
+      }
+    )
+  ] }),
+  item.product_id && /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+    /* @__PURE__ */ jsx(Label, { children: "Applies to" }),
+    /* @__PURE__ */ jsxs("div", { className: "flex gap-6", children: [
+      /* @__PURE__ */ jsxs("label", { className: "flex items-center gap-2 text-sm cursor-pointer select-none", children: [
         /* @__PURE__ */ jsx(
-          Switch,
+          "input",
           {
-            checked: item.separate_shipping,
-            onCheckedChange: (checked) => onUpdate("separate_shipping", checked)
+            type: "radio",
+            name: `variant-mode-${index}`,
+            checked: item.variant_mode === "all",
+            onChange: () => {
+              onUpdate("variant_mode", "all");
+              onUpdate("variant_ids", []);
+            }
           }
         ),
-        /* @__PURE__ */ jsx(Label, { children: "Separate Shipping" })
+        "All variations"
       ] }),
-      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsxs("label", { className: "flex items-center gap-2 text-sm cursor-pointer select-none", children: [
         /* @__PURE__ */ jsx(
-          Switch,
+          "input",
           {
-            checked: item.individual_price,
-            onCheckedChange: (checked) => onUpdate("individual_price", checked)
+            type: "radio",
+            name: `variant-mode-${index}`,
+            checked: item.variant_mode === "specific",
+            onChange: () => onUpdate("variant_mode", "specific")
           }
         ),
-        /* @__PURE__ */ jsx(Label, { children: "Individual Price" })
+        "Specific variations"
+      ] })
+    ] }),
+    item.variant_mode === "specific" && /* @__PURE__ */ jsxs("div", { className: "border border-gray-200 rounded-md p-3 bg-gray-50", children: [
+      /* @__PURE__ */ jsx(Text, { className: "text-xs text-gray-500 mb-3", children: 'Check each variation that qualifies for this bundle item. Switching back to "All variations" will clear this selection.' }),
+      /* @__PURE__ */ jsx(
+        VariantPicker,
+        {
+          productId: item.product_id,
+          selectedIds: item.variant_ids,
+          onChange: (ids) => onUpdate("variant_ids", ids)
+        }
+      ),
+      item.variant_ids.length > 0 && /* @__PURE__ */ jsxs(Text, { className: "text-xs text-gray-400 mt-2", children: [
+        item.variant_ids.length,
+        " variation",
+        item.variant_ids.length > 1 ? "s" : "",
+        " selected"
       ] })
     ] })
-  ] });
-};
+  ] }),
+  /* @__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: (v) => onUpdate("optional", v) }),
+      /* @__PURE__ */ jsx(Label, { children: "Optional" })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsx(Switch, { checked: item.separate_shipping, onCheckedChange: (v) => onUpdate("separate_shipping", v) }),
+      /* @__PURE__ */ jsx(Label, { children: "Separate Shipping" })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsx(Switch, { checked: item.individual_price, onCheckedChange: (v) => onUpdate("individual_price", v) }),
+      /* @__PURE__ */ jsx(Label, { children: "Individual Price" })
+    ] })
+  ] })
+] });
 const config = defineRouteConfig({
   label: "Bundled Products",
   icon: CubeSolid