@pagehub/sdk 0.1.4 → 0.1.6

package/dist/chunks/ConditionsInput-B_5Nge8o.js

@@ -0,0 +1,474 @@
+import { jsxs as d, Fragment as k, jsx as a } from "react/jsx-runtime";
+import { useNode as D } from "@craftjs/core";
+import { useState as L, useRef as T, useEffect as q, Suspense as w, lazy as F } from "react";
+import { e4 as U, e5 as B, dr as N, e6 as K, e7 as V, ce as $, e8 as Y, aD as j, aI as G, C as f, aB as H, aO as m, u as z } from "./index-C66dAl3Q.js";
+import { T as M } from "./ToolbarDashedButton-DbUxGmDg.js";
+import { u as W } from "./usePopoverPosition-83Vti7Aw.js";
+import { P as J, p as Q } from "./popoverOpenRequestAtom-hBS_siXv.js";
+const P = ["exists", "not-exists"], O = {
+  "url-param": ["equals", "not-equals", "contains", "not-contains", "exists", "not-exists"],
+  "form-field": ["equals", "not-equals", "contains", "not-contains", "exists", "not-exists"],
+  connector: ["exists", "not-exists", "greater-than", "less-than", "equals"],
+  company: ["exists", "not-exists", "equals", "not-equals"],
+  device: ["equals"],
+  auth: ["equals", "not-equals", "exists", "not-exists", "greater-than", "less-than"],
+  item: ["exists", "not-exists", "equals", "not-equals", "contains", "greater-than", "less-than"],
+  localStorage: ["exists", "not-exists", "equals", "not-equals"],
+  state: ["equals", "not-equals", "exists", "not-exists", "contains"]
+}, X = {
+  equals: "Equals",
+  "not-equals": "Not equals",
+  contains: "Contains",
+  "not-contains": "Doesn't contain",
+  exists: "Exists",
+  "not-exists": "Doesn't exist",
+  "greater-than": "Greater than",
+  "less-than": "Less than"
+}, Z = F(() => import("./ConditionEditorPanel-DLbqYaSF.js")), ee = 340, te = {
+  "url-param": G,
+  "form-field": j,
+  connector: Y,
+  company: $,
+  device: V,
+  auth: K,
+  item: N,
+  localStorage: B,
+  state: U
+}, ae = {
+  "url-param": "URL Parameter",
+  "form-field": "Form Field",
+  connector: "Connector",
+  company: "Company",
+  device: "Device",
+  auth: "Auth",
+  item: "Item",
+  localStorage: "Local Storage",
+  state: "State"
+}, le = {
+  equals: "=",
+  "not-equals": "≠",
+  contains: "∋",
+  "not-contains": "∌",
+  exists: "exists",
+  "not-exists": "missing",
+  "greater-than": ">",
+  "less-than": "<"
+};
+function ne(t) {
+  return ae[t.type] ?? t.type;
+}
+function oe(t) {
+  if (t.type === "device") return t.value || "";
+  if (!t.key) return "";
+  const l = le[t.operator] ?? t.operator;
+  return P.includes(t.operator) ? `${t.key} ${l}` : t.value ? `${t.key} ${l} ${t.value}` : t.key;
+}
+function se({
+  cond: t,
+  onChange: l,
+  onRemove: o,
+  autoOpen: v,
+  onAutoOpenConsumed: s
+}) {
+  const [n, e] = L(!1), { triggerRef: h, initialPos: x, setInitialPos: c, computePosition: i } = W(ee), p = te[t.type] || N, b = ne(t), C = oe(t) || "Add…", g = () => {
+    c(i()), e(!0);
+  }, r = T(!1);
+  return q(() => {
+    !v || r.current || (r.current = !0, requestAnimationFrame(() => {
+      c(i()), e(!0), s == null || s();
+    }));
+  }, [v]), /* @__PURE__ */ d(k, { children: [
+    /* @__PURE__ */ a(
+      f,
+      {
+        mode: "popover",
+        ref: h,
+        label: b,
+        open: n,
+        onTriggerClick: () => n ? e(!1) : g(),
+        onClear: () => {
+          n && e(!1), o();
+        },
+        triggerAriaLabel: "Edit condition",
+        clearAriaLabel: "Remove condition",
+        leading: /* @__PURE__ */ a(p, { className: "size-3.5", "aria-hidden": !0 }),
+        summary: C
+      }
+    ),
+    n && /* @__PURE__ */ a(w, { fallback: null, children: /* @__PURE__ */ a(
+      Z,
+      {
+        cond: t,
+        onChange: l,
+        initialPosition: x,
+        onClose: () => e(!1)
+      }
+    ) })
+  ] });
+}
+const _ = [
+  { value: "url-param", label: "URL Parameter" },
+  { value: "form-field", label: "Form Field" },
+  { value: "connector", label: "Connector" },
+  { value: "company", label: "Company Variable" },
+  { value: "device", label: "Device / Viewport" },
+  { value: "auth", label: "Auth Status" },
+  { value: "localStorage", label: "Local Storage" },
+  { value: "state", label: "State" }
+], E = _, re = [
+  { value: "status", label: "Login status" },
+  { value: "customer.hasSubscription", label: "Has subscription" },
+  { value: "customer.orderCount", label: "Order count" },
+  { value: "customer.totalSpent", label: "Total spent" }
+], ie = [
+  { value: "logged-in", label: "Logged in" },
+  { value: "logged-out", label: "Logged out" }
+], ue = [
+  { value: "true", label: "Yes" },
+  { value: "false", label: "No" }
+], ce = [
+  { value: "mobile", label: "Mobile" },
+  { value: "desktop", label: "Desktop" }
+], pe = [
+  { value: "name", label: "Company name" },
+  { value: "email", label: "Company email" },
+  { value: "phone", label: "Company phone" },
+  { value: "tagline", label: "Tagline" },
+  { value: "location", label: "Location" },
+  { value: "address", label: "Address" },
+  { value: "website", label: "Website" }
+];
+function S(t) {
+  switch (t) {
+    case "device":
+      return { type: "device", key: "viewport", operator: "equals", value: "mobile" };
+    case "auth":
+      return { type: "auth", key: "status", operator: "equals", value: "logged-in" };
+    case "connector":
+      return { type: "connector", key: "", operator: "exists", value: "" };
+    case "company":
+      return { type: "company", key: "name", operator: "exists", value: "" };
+    case "localStorage":
+      return { type: "localStorage", key: "", operator: "not-exists", value: "" };
+    case "state":
+      return { type: "state", key: "", operator: "equals", value: "" };
+    default:
+      return { type: t, key: "", operator: "equals", value: "" };
+  }
+}
+function R({
+  cond: t,
+  onChange: l,
+  formElements: o,
+  connectorOptions: v
+}) {
+  var n;
+  const s = O[t.type] || O["url-param"];
+  return /* @__PURE__ */ d(k, { children: [
+    /* @__PURE__ */ a(
+      m,
+      {
+        value: t.type,
+        onChange: (e) => {
+          const h = e;
+          l({ ...S(h), type: h });
+        },
+        propKey: "condType",
+        children: E.map((e) => /* @__PURE__ */ a("option", { value: e.value, children: e.label }, e.value))
+      }
+    ),
+    t.type === "device" && /* @__PURE__ */ a(
+      m,
+      {
+        value: t.value || "mobile",
+        onChange: (e) => l({ value: e }),
+        propKey: "condDevice",
+        children: ce.map((e) => /* @__PURE__ */ a("option", { value: e.value, children: e.label }, e.value))
+      }
+    ),
+    t.type === "auth" && /* @__PURE__ */ a(
+      m,
+      {
+        value: t.key || "status",
+        onChange: (e) => {
+          l({ key: e, ...{
+            status: { operator: "equals", value: "logged-in" },
+            "customer.hasSubscription": { operator: "equals", value: "true" },
+            "customer.orderCount": { operator: "greater-than", value: "0" },
+            "customer.totalSpent": { operator: "greater-than", value: "0" }
+          }[e] || { operator: "equals", value: "" } });
+        },
+        propKey: "condAuthField",
+        children: re.map((e) => /* @__PURE__ */ a("option", { value: e.value, children: e.label }, e.value))
+      }
+    ),
+    t.type === "company" && /* @__PURE__ */ a(
+      m,
+      {
+        value: t.key,
+        onChange: (e) => l({ key: e }),
+        propKey: "condCompanyField",
+        children: pe.map((e) => /* @__PURE__ */ a("option", { value: e.value, children: e.label }, e.value))
+      }
+    ),
+    t.type === "connector" && /* @__PURE__ */ d(k, { children: [
+      /* @__PURE__ */ d(
+        m,
+        {
+          value: t.key.split(".")[0] || "",
+          onChange: (e) => l({ key: e }),
+          propKey: "condConnProvider",
+          children: [
+            /* @__PURE__ */ a("option", { value: "", children: "Select provider..." }),
+            v.map((e) => /* @__PURE__ */ a("option", { value: e.provider, children: e.provider.charAt(0).toUpperCase() + e.provider.slice(1) }, e.provider))
+          ]
+        }
+      ),
+      t.key && /* @__PURE__ */ d(
+        m,
+        {
+          value: t.key,
+          onChange: (e) => l({ key: e }),
+          propKey: "condConnCollection",
+          children: [
+            /* @__PURE__ */ a("option", { value: t.key.split(".")[0], children: "Any data" }),
+            (n = v.find((e) => e.provider === t.key.split(".")[0])) == null ? void 0 : n.collections.map((e) => /* @__PURE__ */ a("option", { value: `${t.key.split(".")[0]}.${e}`, children: e.charAt(0).toUpperCase() + e.slice(1) }, e))
+          ]
+        }
+      )
+    ] }),
+    t.type === "form-field" && /* @__PURE__ */ d(k, { children: [
+      /* @__PURE__ */ d(
+        m,
+        {
+          value: t.target || "",
+          onChange: (e) => l({ target: e }),
+          propKey: "condFormTarget",
+          children: [
+            /* @__PURE__ */ a("option", { value: "", children: "Select field..." }),
+            o.map((e) => /* @__PURE__ */ a("option", { value: e.anchor, children: e.label }, e.nodeId))
+          ]
+        }
+      ),
+      /* @__PURE__ */ a(f, { children: /* @__PURE__ */ a(
+        "input",
+        {
+          type: "text",
+          value: t.key,
+          onChange: (e) => l({ key: e.target.value }),
+          placeholder: "field name",
+          className: "h-full w-full bg-transparent px-1 font-mono text-xs outline-none"
+        }
+      ) })
+    ] }),
+    t.type === "url-param" && /* @__PURE__ */ a(f, { children: /* @__PURE__ */ a(
+      "input",
+      {
+        type: "text",
+        value: t.key,
+        onChange: (e) => l({ key: e.target.value }),
+        placeholder: "param name (e.g. ref)",
+        className: "h-full w-full bg-transparent px-1 font-mono text-xs outline-none"
+      }
+    ) }),
+    t.type === "localStorage" && /* @__PURE__ */ a(f, { children: /* @__PURE__ */ a(
+      "input",
+      {
+        type: "text",
+        value: t.key,
+        onChange: (e) => l({ key: e.target.value }),
+        placeholder: "storage key (e.g. ph-cookie-consent)",
+        className: "h-full w-full bg-transparent px-1 font-mono text-xs outline-none"
+      }
+    ) }),
+    t.type === "state" && /* @__PURE__ */ a(f, { children: /* @__PURE__ */ a(
+      "input",
+      {
+        type: "text",
+        value: t.key,
+        onChange: (e) => l({ key: e.target.value }),
+        placeholder: "state key (element id or named state)",
+        className: "h-full w-full bg-transparent px-1 font-mono text-xs outline-none"
+      }
+    ) }),
+    t.type !== "device" && /* @__PURE__ */ a(
+      m,
+      {
+        value: t.operator,
+        onChange: (e) => l({ operator: e }),
+        propKey: "condOp",
+        children: s.map((e) => /* @__PURE__ */ a("option", { value: e, children: X[e] }, e))
+      }
+    ),
+    t.type !== "device" && !P.includes(t.operator) && (t.type === "auth" && t.key === "status" ? /* @__PURE__ */ a(
+      m,
+      {
+        value: t.value || "logged-in",
+        onChange: (e) => l({ value: e }),
+        propKey: "condAuthValue",
+        children: ie.map((e) => /* @__PURE__ */ a("option", { value: e.value, children: e.label }, e.value))
+      }
+    ) : t.type === "auth" && t.key === "customer.hasSubscription" ? /* @__PURE__ */ a(
+      m,
+      {
+        value: t.value || "true",
+        onChange: (e) => l({ value: e }),
+        propKey: "condAuthBoolValue",
+        children: ue.map((e) => /* @__PURE__ */ a("option", { value: e.value, children: e.label }, e.value))
+      }
+    ) : /* @__PURE__ */ a(f, { children: /* @__PURE__ */ a(
+      "input",
+      {
+        type: "text",
+        value: t.value,
+        onChange: (e) => l({ value: e.target.value }),
+        placeholder: "expected value",
+        className: "h-full w-full bg-transparent px-1 font-mono text-xs outline-none"
+      }
+    ) }))
+  ] });
+}
+function de({
+  cond: t,
+  onChange: l,
+  onRemove: o,
+  formElements: v,
+  connectorOptions: s
+}) {
+  var n;
+  return /* @__PURE__ */ d("div", { className: "border-base-300 mb-2 flex flex-col gap-1.5 rounded-md border p-2", children: [
+    /* @__PURE__ */ d("div", { className: "flex items-center justify-between", children: [
+      /* @__PURE__ */ a("span", { className: "text-neutral-content text-[10px] font-medium", children: ((n = E.find((e) => e.value === t.type)) == null ? void 0 : n.label) || t.type }),
+      /* @__PURE__ */ a(
+        "button",
+        {
+          type: "button",
+          onClick: o,
+          className: "text-neutral-content hover:bg-error hover:text-error-content rounded p-0.5",
+          children: /* @__PURE__ */ a(H, { size: 12 })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ a(
+      R,
+      {
+        cond: t,
+        onChange: l,
+        formElements: v,
+        connectorOptions: s
+      }
+    )
+  ] });
+}
+function ve({
+  group: t,
+  groupIndex: l,
+  onChange: o,
+  onRemove: v,
+  formElements: s,
+  connectorOptions: n
+}) {
+  const e = (c, i) => {
+    const p = [...t.conditions];
+    p[c] = { ...p[c], ...i }, o({ ...t, conditions: p });
+  }, h = (c) => {
+    const i = t.conditions.filter((p, b) => b !== c);
+    i.length === 0 ? v() : o({ ...t, conditions: i });
+  }, x = () => {
+    o({
+      ...t,
+      conditions: [...t.conditions, S("url-param")]
+    });
+  };
+  return /* @__PURE__ */ d("div", { children: [
+    t.conditions.length > 1 && /* @__PURE__ */ d("div", { className: "bg-neutral mb-2 flex gap-1 rounded-md p-0.5", children: [
+      /* @__PURE__ */ a(
+        "button",
+        {
+          type: "button",
+          onClick: () => o({ ...t, logic: "all" }),
+          className: `flex-1 rounded px-2 py-1 text-[11px] font-medium transition-colors ${t.logic === "all" ? "bg-base-100 text-base-content shadow-sm" : "text-neutral-content hover:text-base-content"}`,
+          children: "All match (AND)"
+        }
+      ),
+      /* @__PURE__ */ a(
+        "button",
+        {
+          type: "button",
+          onClick: () => o({ ...t, logic: "any" }),
+          className: `flex-1 rounded px-2 py-1 text-[11px] font-medium transition-colors ${t.logic === "any" ? "bg-base-100 text-base-content shadow-sm" : "text-neutral-content hover:text-base-content"}`,
+          children: "Any match (OR)"
+        }
+      )
+    ] }),
+    t.conditions.map((c, i) => /* @__PURE__ */ a(
+      de,
+      {
+        cond: c,
+        onChange: (p) => e(i, p),
+        onRemove: () => h(i),
+        formElements: s,
+        connectorOptions: n
+      },
+      i
+    )),
+    /* @__PURE__ */ a(M, { onClick: x, children: "Add condition" })
+  ] });
+}
+const me = "conditions", he = () => {
+  var g;
+  const {
+    id: t,
+    actions: { setProp: l },
+    conditionGroups: o
+  } = D((r) => {
+    var u, y;
+    return {
+      id: r.id,
+      conditionGroups: (y = (u = r.data) == null ? void 0 : u.props) == null ? void 0 : y.conditionGroups
+    };
+  }), s = z(J).get(Q(t, me)) || 0, n = ((g = o == null ? void 0 : o[0]) == null ? void 0 : g.conditions) ?? [], e = (r) => {
+    l((u) => {
+      u.conditionGroups = r.length > 0 ? [{ conditions: r, logic: "all" }] : [];
+    });
+  }, h = (r, u) => {
+    const y = n.map((A, I) => I === r ? { ...A, ...u } : A);
+    e(y);
+  }, x = (r) => {
+    e(n.filter((u, y) => y !== r));
+  }, c = T(n.length), [i, p] = L(null);
+  q(() => {
+    n.length > c.current && p(n.length - 1), c.current = n.length;
+  }, [n.length]);
+  const b = T(0);
+  q(() => {
+    s === 0 || s === b.current || (b.current = s, n.length > 0 && p(n.length - 1));
+  }, [s, n.length]);
+  const C = () => p(null);
+  return n.length === 0 ? null : /* @__PURE__ */ a("div", { className: "flex flex-col gap-1", children: n.map((r, u) => /* @__PURE__ */ a(
+    se,
+    {
+      cond: r,
+      autoOpen: u === i,
+      onAutoOpenConsumed: C,
+      onChange: (y) => h(u, y),
+      onRemove: () => x(u)
+    },
+    u
+  )) });
+}, Te = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  CONDITION_TYPE_OPTIONS: _,
+  ConditionFields: R,
+  ConditionGroupUI: ve,
+  ConditionsInput: he,
+  defaultCondition: S
+}, Symbol.toStringTag, { value: "Module" }));
+export {
+  se as C,
+  _ as a,
+  ve as b,
+  R as c,
+  S as d,
+  Te as e
+};