@zaamx/netme-bundle 0.0.5 → 0.0.8

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

@@ -105,9 +105,50 @@ const ProductSearchSelect = ({
     ] })
   ] });
 };
+const VariantPicker = ({
+  productId,
+  selectedIds,
+  onChange
+}) => {
+  const [variants, setVariants] = react.useState([]);
+  const [loading, setLoading] = react.useState(false);
+  react.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__ */ jsxRuntime.jsx(ui.Text, { className: "text-sm text-gray-400", children: "Loading variants…" });
+  if (!loading && variants.length === 0)
+    return /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-sm text-gray-400", children: "No variants found." });
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-2 max-h-52 overflow-y-auto pr-1", children: variants.map((v) => /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "flex items-center gap-2 cursor-pointer select-none", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "input",
+      {
+        type: "checkbox",
+        checked: selectedIds.includes(v.id),
+        onChange: () => toggle(v.id),
+        className: "h-4 w-4 rounded border-gray-300"
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm", children: v.title }),
+    v.sku && /* @__PURE__ */ jsxRuntime.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,
@@ -115,47 +156,42 @@ const emptyBundleItem = () => ({
   separate_shipping: false,
   individual_price: false
 });
-const resetModal = {
-  isEditing: false,
-  selectedProductId: void 0,
-  selectedProductTitle: "",
-  bundleItems: [],
-  bundleMeta: []
-};
-const limit = 15;
+const LIMIT = 15;
 const BundledProductsPage = () => {
   const [page, setPage] = react.useState(0);
-  const [openCreateModal, setOpenCreateModal] = react.useState(false);
+  const [openModal, setOpenModal] = react.useState(false);
   const [isEditing, setIsEditing] = react.useState(false);
   const [selectedProductId, setSelectedProductId] = react.useState();
   const [selectedProductTitle, setSelectedProductTitle] = react.useState("");
   const [bundleItems, setBundleItems] = react.useState([]);
   const [bundleMeta, setBundleMeta] = react.useState([]);
   const queryClient = reactQuery.useQueryClient();
-  const offset = page * limit;
+  const offset = page * LIMIT;
   const closeModal = () => {
-    setOpenCreateModal(false);
-    setIsEditing(resetModal.isEditing);
-    setSelectedProductId(resetModal.selectedProductId);
-    setSelectedProductTitle(resetModal.selectedProductTitle);
-    setBundleItems(resetModal.bundleItems);
-    setBundleMeta(resetModal.bundleMeta);
+    setOpenModal(false);
+    setIsEditing(false);
+    setSelectedProductId(void 0);
+    setSelectedProductTitle("");
+    setBundleItems([]);
+    setBundleMeta([]);
   };
   const { data, isLoading } = reactQuery.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 }
     })
   });
   const { mutateAsync: saveBundle, isPending: isSaving } = reactQuery.useMutation({
-    mutationFn: async (payload) => {
+    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: {
-          child_product_ids: payload.child_product_ids.map((item) => ({
+          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,
@@ -163,72 +199,70 @@ const BundledProductsPage = () => {
             separate_shipping: item.separate_shipping,
             individual_price: item.individual_price
           })),
-          bundle_meta: payload.bundle_meta,
-          is_bundle: payload.is_bundle
+          bundle_meta: bundleMeta,
+          is_bundle: true
         }
       });
     }
   });
   const { mutateAsync: deleteBundle } = reactQuery.useMutation({
-    mutationFn: async (productId) => {
-      await sdk.client.fetch(`/admin/products/${productId}/bundle`, { method: "DELETE" });
-    }
+    mutationFn: (productId) => sdk.client.fetch(`/admin/products/${productId}/bundle`, { method: "DELETE" })
   });
-  const handleDeleteBundle = async (productId) => {
-    try {
-      await deleteBundle(productId);
-      ui.toast.success("Bundle deleted successfully");
-      queryClient.invalidateQueries({ queryKey: ["bundled-products"] });
-    } catch {
-      ui.toast.error("Failed to delete bundle");
-    }
-  };
   const handleEditBundle = (bundle) => {
     setIsEditing(true);
     setSelectedProductId(bundle.product.id);
     setSelectedProductTitle(bundle.title);
     setBundleItems(
-      bundle.items.map((item) => ({
-        product_id: item.product.id,
-        product_title: item.product.title,
-        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.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
+        };
+      })
     );
     setBundleMeta(bundle.bundle_meta || []);
-    setOpenCreateModal(true);
+    setOpenModal(true);
   };
-  const handleSaveBundle = async () => {
+  const handleDeleteBundle = async (productId) => {
+    try {
+      await deleteBundle(productId);
+      ui.toast.success("Bundle deleted");
+      queryClient.invalidateQueries({ queryKey: ["bundled-products"] });
+    } catch {
+      ui.toast.error("Failed to delete bundle");
+    }
+  };
+  const handleSave = async () => {
     if (!selectedProductId) {
       ui.toast.error("Please select a product");
       return;
     }
-    const validItems = bundleItems.filter((item) => item.product_id);
-    if (validItems.length === 0) {
+    if (!bundleItems.some((i) => i.product_id)) {
       ui.toast.error("Please add at least one product to the bundle");
       return;
     }
     try {
-      await saveBundle({ child_product_ids: validItems, bundle_meta: bundleMeta, is_bundle: true });
-      ui.toast.success(isEditing ? "Bundle updated successfully" : "Bundle created successfully");
+      await saveBundle();
+      ui.toast.success(isEditing ? "Bundle updated" : "Bundle created");
       queryClient.invalidateQueries({ queryKey: ["bundled-products"] });
       closeModal();
     } catch {
       ui.toast.error(isEditing ? "Failed to update bundle" : "Failed to create bundle");
     }
   };
-  const updateBundleItem = (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);
+  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__ */ jsxRuntime.jsxs(ui.Container, { className: "divide-y p-0", children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start justify-between gap-2 md:flex-row md:items-center p-6", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between p-6", children: [
       /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { children: "Bundled Products" }),
       /* @__PURE__ */ jsxRuntime.jsx(
         ui.Button,
@@ -236,7 +270,7 @@ const BundledProductsPage = () => {
           variant: "primary",
           onClick: () => {
             closeModal();
-            setOpenCreateModal(true);
+            setOpenModal(true);
           },
           children: "Create Bundle"
         }
@@ -251,110 +285,60 @@ const BundledProductsPage = () => {
           /* @__PURE__ */ jsxRuntime.jsx("th", { className: "border border-gray-200 px-4 py-2 text-left", children: "Actions" })
         ] }) }),
         /* @__PURE__ */ jsxRuntime.jsxs("tbody", { children: [
-          ((data == null ? void 0 : data.bundled_products.length) ?? 0) === 0 && /* @__PURE__ */ jsxRuntime.jsx("tr", { children: /* @__PURE__ */ jsxRuntime.jsx(
-            "td",
-            {
-              colSpan: 4,
-              className: "border border-gray-200 px-4 py-6 text-center text-gray-500",
-              children: "No bundled products found."
-            }
-          ) }),
+          ((data == null ? void 0 : data.bundled_products.length) ?? 0) === 0 && /* @__PURE__ */ jsxRuntime.jsx("tr", { children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("tr", { className: "hover:bg-gray-50", children: [
             /* @__PURE__ */ jsxRuntime.jsxs("td", { className: "border border-gray-200 px-4 py-3", children: [
-              /* @__PURE__ */ jsxRuntime.jsx(
-                reactRouterDom.Link,
-                {
-                  to: `/products/${bundle.product.id}`,
-                  className: "font-medium text-blue-600 hover:underline",
-                  children: bundle.title
-                }
-              ),
+              /* @__PURE__ */ jsxRuntime.jsx(reactRouterDom.Link, { to: `/products/${bundle.product.id}`, className: "font-medium text-blue-600 hover:underline", children: bundle.title }),
               /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs text-gray-400 mt-0.5", children: bundle.id })
             ] }),
-            /* @__PURE__ */ jsxRuntime.jsx("td", { className: "border border-gray-200 px-4 py-3", children: /* @__PURE__ */ jsxRuntime.jsx(
-              ui.Badge,
-              {
-                className: bundle.status === "published" ? "bg-green-100 text-green-700" : "bg-gray-100 text-gray-600",
-                children: bundle.status ?? "—"
-              }
-            ) }),
-            /* @__PURE__ */ jsxRuntime.jsx("td", { className: "border border-gray-200 px-4 py-3", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-0.5", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("td", { className: "border border-gray-200 px-4 py-3", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Badge, { className: bundle.status === "published" ? "bg-green-100 text-green-700" : "bg-gray-100 text-gray-600", children: bundle.status ?? "—" }) }),
+            /* @__PURE__ */ jsxRuntime.jsx("td", { className: "border border-gray-200 px-4 py-3", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1", children: [
               bundle.items.length === 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-gray-400", children: "No items" }),
-              bundle.items.map((item) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-sm flex items-center gap-1", children: [
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  reactRouterDom.Link,
-                  {
-                    to: `/products/${item.product.id}`,
-                    className: "text-blue-600 hover:underline",
-                    children: item.product.title
-                  }
-                ),
-                /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-gray-400", children: [
-                  "× ",
-                  item.default_quantity
-                ] }),
-                item.optional && /* @__PURE__ */ jsxRuntime.jsx(ui.Badge, { className: "bg-gray-100 text-gray-500 text-xs", children: "Optional" })
-              ] }, item.id))
+              bundle.items.map((item) => {
+                var _a;
+                return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-sm", children: [
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(reactRouterDom.Link, { to: `/products/${item.product.id}`, className: "text-blue-600 hover:underline", children: item.product.title }),
+                    /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-gray-400", children: [
+                      "× ",
+                      item.default_quantity
+                    ] }),
+                    item.optional && /* @__PURE__ */ jsxRuntime.jsx(ui.Badge, { className: "bg-gray-100 text-gray-500 text-xs", children: "Optional" })
+                  ] }),
+                  ((_a = item.variant_ids) == null ? void 0 : _a.length) > 0 && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("td", { className: "border border-gray-200 px-4 py-3", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
-              /* @__PURE__ */ jsxRuntime.jsx(
-                ui.Button,
-                {
-                  variant: "secondary",
-                  size: "small",
-                  onClick: () => handleEditBundle(bundle),
-                  children: "Edit"
-                }
-              ),
-              /* @__PURE__ */ jsxRuntime.jsx(
-                ui.Button,
-                {
-                  variant: "secondary",
-                  size: "small",
-                  onClick: () => handleDeleteBundle(bundle.id),
-                  className: "text-red-600 hover:text-red-700",
-                  children: "Delete"
-                }
-              )
+              /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { variant: "secondary", size: "small", onClick: () => handleEditBundle(bundle), children: "Edit" }),
+              /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { variant: "secondary", size: "small", onClick: () => handleDeleteBundle(bundle.id), className: "text-red-600 hover:text-red-700", children: "Delete" })
             ] }) })
           ] }, bundle.id))
         ] })
       ] }) }),
       totalPages > 1 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-center gap-2 mt-6", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          ui.Button,
-          {
-            variant: "secondary",
-            onClick: () => setPage(Math.max(0, page - 1)),
-            disabled: page === 0,
-            children: "Previous"
-          }
-        ),
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { variant: "secondary", onClick: () => setPage(Math.max(0, page - 1)), disabled: page === 0, children: "Previous" }),
         /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex items-center px-4", children: [
           "Page ",
           page + 1,
           " of ",
           totalPages
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          ui.Button,
-          {
-            variant: "secondary",
-            onClick: () => setPage(Math.min(totalPages - 1, page + 1)),
-            disabled: page === totalPages - 1,
-            children: "Next"
-          }
-        )
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { variant: "secondary", onClick: () => setPage(Math.min(totalPages - 1, page + 1)), disabled: page === totalPages - 1, children: "Next" })
       ] })
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsx(ui.FocusModal, { open: openCreateModal, onOpenChange: (open) => {
+    /* @__PURE__ */ jsxRuntime.jsx(ui.FocusModal, { open: openModal, onOpenChange: (open) => {
       if (!open) closeModal();
     }, children: /* @__PURE__ */ jsxRuntime.jsxs(ui.FocusModal.Content, { children: [
       /* @__PURE__ */ jsxRuntime.jsx(ui.FocusModal.Header, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { level: "h1", children: isEditing ? "Edit Bundle" : "Create Bundle" }) }),
       /* @__PURE__ */ jsxRuntime.jsx(ui.FocusModal.Body, { children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-1 flex-col items-center h-[80vh] overflow-y-auto px-2 py-8", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full max-w-3xl flex flex-col gap-y-8", children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
           /* @__PURE__ */ jsxRuntime.jsx(ui.Label, { children: "Bundle Product" }),
-          /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-sm text-gray-500 mb-2", children: isEditing ? "The product this bundle is attached to" : "Choose the product that will become a bundle" }),
+          /* @__PURE__ */ jsxRuntime.jsx(ui.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__ */ jsxRuntime.jsx(
             ProductSearchSelect,
             {
@@ -378,80 +362,28 @@ const BundledProductsPage = () => {
               {
                 item,
                 index,
-                onUpdate: (field, value) => updateBundleItem(index, field, value),
+                onUpdate: (field, value) => updateItem(index, field, value),
                 onRemove: () => setBundleItems((prev) => prev.filter((_, i) => i !== index))
               },
               index
             )),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              ui.Button,
-              {
-                variant: "secondary",
-                onClick: () => setBundleItems((prev) => [...prev, emptyBundleItem()]),
-                className: "mt-4",
-                children: "Add Item"
-              }
-            )
+            /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { variant: "secondary", onClick: () => setBundleItems((prev) => [...prev, emptyBundleItem()]), className: "mt-2", children: "Add Item" })
           ] }),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
             /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { level: "h2", children: "Bundle Metadata" }),
-            /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-sm text-gray-500 mb-4", children: "Custom key-value pairs for this bundle" }),
+            /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-sm text-gray-500 mb-4", children: "Custom key-value pairs" }),
             bundleMeta.map((meta, index) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-2 mb-2", children: [
-              /* @__PURE__ */ jsxRuntime.jsx(
-                ui.Input,
-                {
-                  placeholder: "Key",
-                  value: meta.key,
-                  onChange: (e) => setBundleMeta(
-                    (prev) => prev.map((m, i) => i === index ? { ...m, key: e.target.value } : m)
-                  )
-                }
-              ),
-              /* @__PURE__ */ jsxRuntime.jsx(
-                ui.Input,
-                {
-                  placeholder: "Value",
-                  value: meta.value,
-                  onChange: (e) => setBundleMeta(
-                    (prev) => prev.map(
-                      (m, i) => i === index ? { ...m, value: e.target.value } : m
-                    )
-                  )
-                }
-              ),
-              /* @__PURE__ */ jsxRuntime.jsx(
-                ui.Button,
-                {
-                  variant: "secondary",
-                  onClick: () => setBundleMeta((prev) => prev.filter((_, i) => i !== index)),
-                  children: "Remove"
-                }
-              )
+              /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { placeholder: "Key", value: meta.key, onChange: (e) => setBundleMeta((prev) => prev.map((m, i) => i === index ? { ...m, key: e.target.value } : m)) }),
+              /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { placeholder: "Value", value: meta.value, onChange: (e) => setBundleMeta((prev) => prev.map((m, i) => i === index ? { ...m, value: e.target.value } : m)) }),
+              /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { variant: "secondary", onClick: () => setBundleMeta((prev) => prev.filter((_, i) => i !== index)), children: "Remove" })
             ] }, index)),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              ui.Button,
-              {
-                variant: "secondary",
-                onClick: () => setBundleMeta((prev) => [...prev, { key: "", value: "" }]),
-                className: "mt-4",
-                children: "Add Metadata"
-              }
-            )
+            /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { variant: "secondary", onClick: () => setBundleMeta((prev) => [...prev, { key: "", value: "" }]), className: "mt-2", children: "Add Metadata" })
           ] })
         ] })
       ] }) }) }),
       /* @__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.Button, { variant: "secondary", onClick: closeModal, children: "Cancel" }),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          ui.Button,
-          {
-            variant: "primary",
-            onClick: handleSaveBundle,
-            isLoading: isSaving,
-            disabled: !selectedProductId,
-            children: isEditing ? "Update Bundle" : "Create Bundle"
-          }
-        )
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { variant: "primary", onClick: handleSave, isLoading: isSaving, disabled: !selectedProductId, children: isEditing ? "Update Bundle" : "Create Bundle" })
       ] }) })
     ] }) })
   ] });
@@ -474,78 +406,87 @@ const BundleItemForm = ({ item, index, onUpdate, onRemove }) => /* @__PURE__ */
         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…"
       }
     )
   ] }),
-  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-3 gap-4", children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(ui.Label, { children: "Min Quantity" }),
+  item.product_id && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-3", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(ui.Label, { children: "Applies to" }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-6", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "flex items-center gap-2 text-sm cursor-pointer select-none", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "input",
+          {
+            type: "radio",
+            name: `variant-mode-${index}`,
+            checked: item.variant_mode === "all",
+            onChange: () => {
+              onUpdate("variant_mode", "all");
+              onUpdate("variant_ids", []);
+            }
+          }
+        ),
+        "All variations"
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "flex items-center gap-2 text-sm cursor-pointer select-none", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "input",
+          {
+            type: "radio",
+            name: `variant-mode-${index}`,
+            checked: item.variant_mode === "specific",
+            onChange: () => onUpdate("variant_mode", "specific")
+          }
+        ),
+        "Specific variations"
+      ] })
+    ] }),
+    item.variant_mode === "specific" && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "border border-gray-200 rounded-md p-3 bg-gray-50", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(ui.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__ */ jsxRuntime.jsx(
-        ui.Input,
+        VariantPicker,
         {
-          type: "number",
-          min: 0,
-          value: item.min_quantity,
-          onChange: (e) => onUpdate("min_quantity", parseInt(e.target.value) || 0)
+          productId: item.product_id,
+          selectedIds: item.variant_ids,
+          onChange: (ids) => onUpdate("variant_ids", ids)
         }
-      )
+      ),
+      item.variant_ids.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(ui.Text, { className: "text-xs text-gray-400 mt-2", children: [
+        item.variant_ids.length,
+        " variation",
+        item.variant_ids.length > 1 ? "s" : "",
+        " selected"
+      ] })
+    ] })
+  ] }),
+  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-3 gap-4", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(ui.Label, { children: "Min Quantity" }),
+      /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { type: "number", min: 0, value: item.min_quantity, onChange: (e) => onUpdate("min_quantity", parseInt(e.target.value) || 0) })
     ] }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
       /* @__PURE__ */ jsxRuntime.jsx(ui.Label, { children: "Max Quantity" }),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        ui.Input,
-        {
-          type: "number",
-          min: 0,
-          value: item.max_quantity,
-          onChange: (e) => onUpdate("max_quantity", parseInt(e.target.value) || 0)
-        }
-      )
+      /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { type: "number", min: 0, value: item.max_quantity, onChange: (e) => onUpdate("max_quantity", parseInt(e.target.value) || 0) })
     ] }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
       /* @__PURE__ */ jsxRuntime.jsx(ui.Label, { children: "Default Quantity" }),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        ui.Input,
-        {
-          type: "number",
-          min: 0,
-          value: item.default_quantity,
-          onChange: (e) => onUpdate("default_quantity", parseInt(e.target.value) || 0)
-        }
-      )
+      /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { type: "number", min: 0, value: item.default_quantity, onChange: (e) => onUpdate("default_quantity", parseInt(e.target.value) || 0) })
     ] })
   ] }),
   /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(
-        ui.Switch,
-        {
-          checked: item.optional,
-          onCheckedChange: (checked) => onUpdate("optional", checked)
-        }
-      ),
+      /* @__PURE__ */ jsxRuntime.jsx(ui.Switch, { checked: item.optional, onCheckedChange: (v) => onUpdate("optional", v) }),
       /* @__PURE__ */ jsxRuntime.jsx(ui.Label, { children: "Optional" })
     ] }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(
-        ui.Switch,
-        {
-          checked: item.separate_shipping,
-          onCheckedChange: (checked) => onUpdate("separate_shipping", checked)
-        }
-      ),
+      /* @__PURE__ */ jsxRuntime.jsx(ui.Switch, { checked: item.separate_shipping, onCheckedChange: (v) => onUpdate("separate_shipping", v) }),
       /* @__PURE__ */ jsxRuntime.jsx(ui.Label, { children: "Separate Shipping" })
     ] }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(
-        ui.Switch,
-        {
-          checked: item.individual_price,
-          onCheckedChange: (checked) => onUpdate("individual_price", checked)
-        }
-      ),
+      /* @__PURE__ */ jsxRuntime.jsx(ui.Switch, { checked: item.individual_price, onCheckedChange: (v) => onUpdate("individual_price", v) }),
       /* @__PURE__ */ jsxRuntime.jsx(ui.Label, { children: "Individual Price" })
     ] })
   ] })