@proveanything/smartlinks-utils-ui 1.14.1 → 1.14.3

package/dist/{chunk-JNCRSL2H.js → chunk-WJTD5HT7.js}

@@ -1,8 +1,9 @@
 import { useFacets } from './chunk-DH5HG5DW.js';
 import { cn } from './chunk-L7FQ52F5.js';
 import { useState, useCallback, useRef, useMemo, useEffect } from 'react';
-import { GitBranch, Plus, Filter, ChevronRight, X, RefreshCw, Trash2, ChevronDown, Layers, ToggleLeft, Package, MapPin, Tag, Monitor, Calendar, User, Hash, Globe, Tags } from 'lucide-react';
+import { GitBranch, Plus, Filter, ChevronRight, X, RefreshCw, Trash2, ChevronDown, Layers, ToggleLeft, Package, MapPin, Tag, Monitor, Calendar, User, Hash, Globe, Tags, Search, Loader2 } from 'lucide-react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import * as SL from '@proveanything/smartlinks';
 
 var CONDITION_TYPES = [
   { value: "version", title: "Version", description: "Match specific versions", icon: "tags", color: "#7c3aed", helpText: "Limit by specific versions of your application or product." },
@@ -14,7 +15,7 @@ var CONDITION_TYPES = [
   { value: "tag", title: "Label", description: "Match by tags or labels", icon: "tag", color: "#db2777", helpText: "Limit by assigned labels or tags." },
   { value: "facet", title: "Facet", description: "Match product facet values", icon: "layers", color: "#9333ea", helpText: "Limit by one or more facet values assigned to products in the collection." },
   { value: "geofence", title: "Geofence", description: "Geographic boundary", icon: "map-pin", color: "#0d9488", helpText: "Limit by geographic boundaries (rectangular area)." },
-  { value: "product", title: "Product ID", description: "Match specific items", icon: "package", color: "#d97706", helpText: "Limit by specific product IDs." },
+  { value: "product", title: "Product", description: "Match specific products", icon: "package", color: "#d97706", helpText: "Limit by one or more products in the collection. Search by name, SKU, or ID." },
   { value: "itemStatus", title: "Item Status", description: "Filter by item state", icon: "toggle-left", color: "#ea580c", helpText: "Limit by item status such as proof, claimable, owner, or virtual." },
   { value: "condition", title: "Condition", description: "Reference another condition", icon: "git-branch", color: "#4f46e5", helpText: "Reference another saved condition and check if it passes or fails." }
 ];
@@ -109,7 +110,10 @@ function getConditionSummary(cond, options) {
     case "product":
       if (cond.productIds?.length) {
         const verb = cond.contains ? "is" : "is not";
-        summary += ` ${verb} ${cond.productIds.length} item(s)`;
+        const names = cond.productIds.map((id) => cond.productNames?.[id] || id);
+        const preview = names.slice(0, 2).join(", ");
+        const rest = names.length > 2 ? ` +${names.length - 2}` : "";
+        summary += ` ${verb} ${preview}${rest}`;
       }
       break;
     case "condition":
@@ -603,6 +607,253 @@ var CountryPicker = ({
     }) })
   ] });
 };
+function toHit(p) {
+  return {
+    id: p?.id ?? p?.productId ?? "",
+    name: p?.name ?? p?.id ?? "Untitled",
+    sku: p?.sku ?? null
+  };
+}
+async function queryProducts(collectionId, search) {
+  const body = {
+    page: { limit: 25 },
+    sort: [{ field: "name", direction: "asc" }]
+  };
+  if (search.trim()) body.query = { search: search.trim() };
+  const products = SL?.products ?? SL?.product;
+  if (!products) return [];
+  try {
+    if (products.query) {
+      const res = await products.query(collectionId, body, true);
+      return (res?.items ?? []).map(toHit);
+    }
+    if (products.list) {
+      const list = await products.list(collectionId, true);
+      const term = search.trim().toLowerCase();
+      const filtered = term ? list.filter((p) => `${p?.name ?? ""} ${p?.sku ?? ""} ${p?.id ?? ""}`.toLowerCase().includes(term)) : list;
+      return filtered.slice(0, 25).map(toHit);
+    }
+  } catch (err) {
+    console.warn("[ConditionsEditor] product search failed", err);
+  }
+  return [];
+}
+var ProductPicker = ({
+  collectionId,
+  selectedIds,
+  names,
+  onChange,
+  disabled
+}) => {
+  const [search, setSearch] = useState("");
+  const [results, setResults] = useState([]);
+  const [loading, setLoading] = useState(false);
+  const [open, setOpen] = useState(false);
+  const containerRef = useRef(null);
+  const cachedNames = useMemo(() => names ?? {}, [names]);
+  const refreshedRef = useRef("");
+  useEffect(() => {
+    if (!collectionId || selectedIds.length === 0) return;
+    const key = selectedIds.slice().sort().join("|");
+    if (refreshedRef.current === key) return;
+    refreshedRef.current = key;
+    const products = SL?.products ?? SL?.product;
+    if (!products?.get) return;
+    let cancelled = false;
+    (async () => {
+      const updates = {};
+      await Promise.all(selectedIds.map(async (id) => {
+        try {
+          const p = await products.get(collectionId, id, true);
+          const name = p?.name;
+          if (name && name !== cachedNames[id]) updates[id] = name;
+        } catch {
+        }
+      }));
+      if (cancelled || Object.keys(updates).length === 0) return;
+      onChange(selectedIds, { ...cachedNames, ...updates });
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, [collectionId, selectedIds.join("|")]);
+  useEffect(() => {
+    if (!open) return;
+    let cancelled = false;
+    setLoading(true);
+    const t = window.setTimeout(async () => {
+      const hits = await queryProducts(collectionId, search);
+      if (!cancelled) {
+        setResults(hits);
+        setLoading(false);
+      }
+    }, 200);
+    return () => {
+      cancelled = true;
+      window.clearTimeout(t);
+    };
+  }, [search, open, collectionId]);
+  useEffect(() => {
+    if (!open) return;
+    const onDoc = (e) => {
+      if (!containerRef.current?.contains(e.target)) setOpen(false);
+    };
+    document.addEventListener("mousedown", onDoc);
+    return () => document.removeEventListener("mousedown", onDoc);
+  }, [open]);
+  const addProduct = (hit) => {
+    if (selectedIds.includes(hit.id)) return;
+    const nextNames = { ...cachedNames, [hit.id]: hit.name };
+    onChange([...selectedIds, hit.id], nextNames);
+  };
+  const removeProduct = (id) => {
+    const nextNames = { ...cachedNames };
+    delete nextNames[id];
+    onChange(selectedIds.filter((i) => i !== id), nextNames);
+  };
+  return /* @__PURE__ */ jsxs("div", { ref: containerRef, style: { display: "flex", flexDirection: "column", gap: 8 }, children: [
+    selectedIds.length > 0 && /* @__PURE__ */ jsx("div", { style: { display: "flex", flexWrap: "wrap", gap: 6 }, children: selectedIds.map((id) => {
+      const name = cachedNames[id];
+      return /* @__PURE__ */ jsxs(
+        "span",
+        {
+          title: id,
+          style: {
+            display: "inline-flex",
+            alignItems: "center",
+            gap: 6,
+            padding: "4px 4px 4px 10px",
+            fontSize: 12,
+            borderRadius: 9999,
+            border: "1px solid #93c5fd",
+            backgroundColor: "#dbeafe",
+            color: "#1d4ed8"
+          },
+          children: [
+            /* @__PURE__ */ jsx("span", { style: { fontWeight: 500 }, children: name || id }),
+            name && /* @__PURE__ */ jsxs("span", { style: { opacity: 0.6, fontSize: 10, fontFamily: "ui-monospace, monospace" }, children: [
+              "(",
+              id.length > 12 ? `${id.slice(0, 6)}\u2026${id.slice(-4)}` : id,
+              ")"
+            ] }),
+            !disabled && /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: () => removeProduct(id),
+                style: {
+                  display: "inline-flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  width: 18,
+                  height: 18,
+                  borderRadius: 9999,
+                  border: "none",
+                  backgroundColor: "rgba(29,78,216,0.15)",
+                  cursor: "pointer",
+                  color: "#1d4ed8"
+                },
+                "aria-label": `Remove ${name || id}`,
+                children: /* @__PURE__ */ jsx(X, { size: 11 })
+              }
+            )
+          ]
+        },
+        id
+      );
+    }) }),
+    !disabled && /* @__PURE__ */ jsxs("div", { style: { position: "relative" }, children: [
+      /* @__PURE__ */ jsxs("div", { style: {
+        display: "flex",
+        alignItems: "center",
+        gap: 6,
+        padding: "6px 10px",
+        fontSize: 14,
+        borderRadius: 6,
+        border: "1px solid #d1d5db",
+        backgroundColor: "transparent"
+      }, children: [
+        /* @__PURE__ */ jsx(Search, { size: 14, style: { opacity: 0.5 } }),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "text",
+            value: search,
+            onChange: (e) => {
+              setSearch(e.target.value);
+              setOpen(true);
+            },
+            onFocus: () => setOpen(true),
+            placeholder: "Search products by name, SKU, or ID\u2026",
+            style: {
+              flex: 1,
+              border: "none",
+              outline: "none",
+              backgroundColor: "transparent",
+              fontSize: 14
+            }
+          }
+        ),
+        loading && /* @__PURE__ */ jsx(Loader2, { size: 14, className: "animate-spin", style: { opacity: 0.5 } })
+      ] }),
+      open && /* @__PURE__ */ jsxs("div", { style: {
+        position: "absolute",
+        top: "calc(100% + 4px)",
+        left: 0,
+        right: 0,
+        zIndex: 20,
+        maxHeight: 280,
+        overflowY: "auto",
+        backgroundColor: "#ffffff",
+        border: "1px solid #e5e7eb",
+        borderRadius: 8,
+        boxShadow: "0 8px 20px rgba(0,0,0,0.08)"
+      }, children: [
+        results.length === 0 && !loading && /* @__PURE__ */ jsx("div", { style: { padding: 12, fontSize: 12, color: "#9ca3af", textAlign: "center" }, children: search ? "No products found" : "Start typing to search products" }),
+        results.map((hit) => {
+          const isSelected = selectedIds.includes(hit.id);
+          return /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              disabled: isSelected,
+              onClick: () => {
+                addProduct(hit);
+                setSearch("");
+              },
+              style: {
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "space-between",
+                width: "100%",
+                padding: "8px 12px",
+                border: "none",
+                borderBottom: "1px solid #f3f4f6",
+                backgroundColor: isSelected ? "#f9fafb" : "transparent",
+                cursor: isSelected ? "default" : "pointer",
+                textAlign: "left",
+                color: "#111827",
+                fontSize: 13,
+                opacity: isSelected ? 0.5 : 1
+              },
+              children: [
+                /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 2, minWidth: 0 }, children: [
+                  /* @__PURE__ */ jsx("span", { style: { fontWeight: 500, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: hit.name }),
+                  /* @__PURE__ */ jsxs("span", { style: { fontSize: 10, color: "#9ca3af", fontFamily: "ui-monospace, monospace" }, children: [
+                    hit.sku ? `${hit.sku} \xB7 ` : "",
+                    hit.id
+                  ] })
+                ] }),
+                isSelected && /* @__PURE__ */ jsx("span", { style: { fontSize: 10, color: "#9ca3af", marginLeft: 8 }, children: "Added" })
+              ]
+            },
+            hit.id
+          );
+        })
+      ] })
+    ] })
+  ] });
+};
 var ContainsToggle = ({ value = true, onChange, trueLabel = "Is One Of", falseLabel = "Is Not One Of", disabled }) => /* @__PURE__ */ jsx("div", { style: { display: "flex", gap: 4, backgroundColor: "#f3f4f6", borderRadius: 6, padding: 4, width: "fit-content" }, children: [{ v: true, label: trueLabel }, { v: false, label: falseLabel }].map((opt) => /* @__PURE__ */ jsx(
   "button",
   {
@@ -950,7 +1201,16 @@ var ConditionConfig = ({
     case "product":
       return /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 12 }, children: [
         /* @__PURE__ */ jsx(ContainsToggle, { value: cond.contains, onChange: (v) => update({ contains: v }), disabled: readOnly }),
-        editorProps.products?.length ? /* @__PURE__ */ jsx(
+        editorProps.collectionId ? /* @__PURE__ */ jsx(
+          ProductPicker,
+          {
+            collectionId: editorProps.collectionId,
+            selectedIds: cond.productIds || [],
+            names: cond.productNames,
+            onChange: (ids, names) => update({ productIds: ids, productNames: names }),
+            disabled: readOnly
+          }
+        ) : editorProps.products?.length ? /* @__PURE__ */ jsx(
           ChipSelect,
           {
             options: editorProps.products,
@@ -1159,7 +1419,7 @@ var ConditionsEditorContent = ({
   className
 }) => {
   const resolvedFacets = useFacets(collectionId, facets, getFacets);
-  const editorProps = { versions, tags, products, savedConditions, userGroups, facets: resolvedFacets };
+  const editorProps = { versions, tags, products, savedConditions, userGroups, facets: resolvedFacets, collectionId };
   const updateCondition = useCallback((index, updated) => {
     const next = { ...value, conditions: [...value.conditions] };
     next.conditions[index] = updated;
@@ -1314,5 +1574,5 @@ var ConditionsEditor = (props) => {
 };
 
 export { ConditionsEditor };
-//# sourceMappingURL=chunk-JNCRSL2H.js.map
-//# sourceMappingURL=chunk-JNCRSL2H.js.map
+//# sourceMappingURL=chunk-WJTD5HT7.js.map
+//# sourceMappingURL=chunk-WJTD5HT7.js.map