@inspirer-dev/crm-dashboard 1.0.10 → 1.0.11

package/dist/_chunks/index-Bnjm_sYk.mjs

@@ -0,0 +1,339 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import React__default, { forwardRef, useState, useCallback } from "react";
+import { Field, Flex, Typography, Card, CardContent, Box, Button, SingleSelect, SingleSelectOption, Tooltip, IconButton, Switch, TextInput } from "@strapi/design-system";
+import { Plus, Trash } from "@strapi/icons";
+import { useTheme } from "styled-components";
+const booleanOperators = ["$eq", "$ne"];
+const numberOperators = ["$eq", "$ne", "$gt", "$lt", "$gte", "$lte"];
+const timeAgoOperators = ["$gt", "$lt", "$gte", "$lte"];
+const CANCEL_METRICS = [
+  {
+    key: "has_deposit_since_trigger",
+    label: "Made Deposit",
+    valueType: "boolean",
+    description: "User made a successful deposit after the trigger event",
+    operators: booleanOperators
+  },
+  {
+    key: "has_activity_since_trigger",
+    label: "Had Activity",
+    valueType: "boolean",
+    description: "User had any activity (case open, upgrade, battle, etc.) after trigger",
+    operators: booleanOperators
+  },
+  {
+    key: "has_session_since_trigger",
+    label: "Returned to Site",
+    valueType: "boolean",
+    description: "User had a new session/visit after the trigger event",
+    operators: booleanOperators
+  },
+  {
+    key: "balance_sufficient",
+    label: "Balance Sufficient",
+    valueType: "boolean",
+    description: "User balance is now sufficient for the intended action",
+    operators: booleanOperators
+  },
+  {
+    key: "is_authenticated",
+    label: "Is Authenticated",
+    valueType: "boolean",
+    description: "User has logged in / authenticated",
+    operators: booleanOperators
+  },
+  {
+    key: "battle_completed",
+    label: "Battle Completed",
+    valueType: "boolean",
+    description: "The battle was completed or continued",
+    operators: booleanOperators
+  },
+  {
+    key: "upgrade_completed",
+    label: "Upgrade Completed",
+    valueType: "boolean",
+    description: "The upgrade was completed or retried",
+    operators: booleanOperators
+  },
+  {
+    key: "contract_completed",
+    label: "Contract Completed",
+    valueType: "boolean",
+    description: "The contract was completed",
+    operators: booleanOperators
+  },
+  {
+    key: "deposit_count",
+    label: "Deposit Count",
+    valueType: "number",
+    description: "Total number of deposits (e.g., for checking if 2nd deposit exists)",
+    operators: numberOperators
+  },
+  {
+    key: "case_open_count_since_trigger",
+    label: "Cases Opened Since Trigger",
+    valueType: "number",
+    description: "Number of cases opened after the trigger event",
+    operators: numberOperators
+  },
+  {
+    key: "time_since_trigger",
+    label: "Time Since Trigger",
+    valueType: "time_ago",
+    description: "How long since the trigger event fired",
+    operators: timeAgoOperators
+  }
+];
+const CANCEL_TIME_UNITS = [
+  { value: "minutes_ago", label: "minutes" },
+  { value: "hours_ago", label: "hours" }
+];
+const generateId = () => Math.random().toString(36).substring(2, 11);
+const DEFAULT_CONFIG = {
+  logic: "$or",
+  rules: []
+};
+const parseConfig = (value) => {
+  if (!value) return DEFAULT_CONFIG;
+  try {
+    const parsed = JSON.parse(value);
+    if (parsed.logic && Array.isArray(parsed.rules)) {
+      return parsed;
+    }
+    return DEFAULT_CONFIG;
+  } catch {
+    return DEFAULT_CONFIG;
+  }
+};
+const serializeConfig = (config) => {
+  return JSON.stringify(config);
+};
+const getMetric = (key) => {
+  return CANCEL_METRICS.find((m) => m.key === key);
+};
+const OPERATORS = [
+  { value: "$eq", label: "=" },
+  { value: "$ne", label: "≠" },
+  { value: "$gt", label: ">" },
+  { value: "$lt", label: "<" },
+  { value: "$gte", label: "≥" },
+  { value: "$lte", label: "≤" }
+];
+const ValueInput = ({ metric, value, operator, onChange, disabled }) => {
+  if (metric.valueType === "boolean") {
+    const boolVal = value === true || value === "true";
+    return /* @__PURE__ */ jsxs(Flex, { gap: 2, alignItems: "center", children: [
+      /* @__PURE__ */ jsx(
+        Switch,
+        {
+          label: "",
+          checked: boolVal,
+          onChange: () => onChange(!boolVal),
+          disabled
+        }
+      ),
+      /* @__PURE__ */ jsx(Typography, { variant: "omega", textColor: "neutral600", children: boolVal ? "true" : "false" })
+    ] });
+  }
+  if (metric.valueType === "number") {
+    return /* @__PURE__ */ jsx(
+      TextInput,
+      {
+        type: "number",
+        value: String(value ?? 0),
+        onChange: (e) => onChange(parseInt(e.target.value, 10) || 0),
+        disabled,
+        "aria-label": "Value"
+      }
+    );
+  }
+  if (metric.valueType === "time_ago") {
+    const timeValue = value || { minutes_ago: 10 };
+    const unit = Object.keys(timeValue)[0] || "minutes_ago";
+    const numValue = timeValue[unit] || 10;
+    return /* @__PURE__ */ jsxs(Flex, { gap: 2, children: [
+      /* @__PURE__ */ jsx(Box, { style: { width: "80px" }, children: /* @__PURE__ */ jsx(
+        TextInput,
+        {
+          type: "number",
+          value: String(numValue),
+          onChange: (e) => onChange({ [unit]: parseInt(e.target.value, 10) || 0 }),
+          disabled,
+          "aria-label": "Time value"
+        }
+      ) }),
+      /* @__PURE__ */ jsx(Box, { style: { width: "120px" }, children: /* @__PURE__ */ jsx(
+        SingleSelect,
+        {
+          value: unit,
+          onChange: (newUnit) => onChange({ [newUnit]: numValue }),
+          disabled,
+          children: CANCEL_TIME_UNITS.map((u) => /* @__PURE__ */ jsx(SingleSelectOption, { value: u.value, children: u.label }, u.value))
+        }
+      ) })
+    ] });
+  }
+  return null;
+};
+const RuleRow = ({ rule, onUpdate, onDelete, disabled }) => {
+  const theme = useTheme();
+  const colors = theme?.colors;
+  const metric = getMetric(rule.field);
+  const availableOperators = metric?.operators || ["$eq"];
+  const handleFieldChange = (fieldKey) => {
+    const newMetric = getMetric(fieldKey);
+    let newValue = true;
+    if (newMetric?.valueType === "number") {
+      newValue = 0;
+    } else if (newMetric?.valueType === "time_ago") {
+      newValue = { minutes_ago: 10 };
+    }
+    const newOp = newMetric?.operators[0] || "$eq";
+    onUpdate({ ...rule, field: fieldKey, operator: newOp, value: newValue });
+  };
+  return /* @__PURE__ */ jsxs(
+    Flex,
+    {
+      gap: 2,
+      alignItems: "center",
+      padding: 2,
+      background: "neutral0",
+      hasRadius: true,
+      style: { border: `1px solid ${colors?.neutral200 || "#dcdce4"}` },
+      children: [
+        /* @__PURE__ */ jsx(Box, { style: { flex: "1 1 200px", minWidth: "180px" }, children: /* @__PURE__ */ jsx(
+          SingleSelect,
+          {
+            value: rule.field,
+            onChange: (val) => handleFieldChange(val),
+            disabled,
+            size: "S",
+            children: CANCEL_METRICS.map((m) => /* @__PURE__ */ jsx(SingleSelectOption, { value: m.key, children: m.label }, m.key))
+          }
+        ) }),
+        /* @__PURE__ */ jsx(Box, { style: { width: "80px" }, children: /* @__PURE__ */ jsx(
+          SingleSelect,
+          {
+            value: rule.operator,
+            onChange: (val) => onUpdate({ ...rule, operator: val }),
+            disabled,
+            size: "S",
+            children: OPERATORS.filter((op) => availableOperators.includes(op.value)).map((op) => /* @__PURE__ */ jsx(SingleSelectOption, { value: op.value, children: op.label }, op.value))
+          }
+        ) }),
+        /* @__PURE__ */ jsx(Box, { style: { flex: "1 1 150px", minWidth: "120px" }, children: metric && /* @__PURE__ */ jsx(
+          ValueInput,
+          {
+            metric,
+            value: rule.value,
+            operator: rule.operator,
+            onChange: (val) => onUpdate({ ...rule, value: val }),
+            disabled
+          }
+        ) }),
+        /* @__PURE__ */ jsx(Tooltip, { label: "Delete condition", children: /* @__PURE__ */ jsx(IconButton, { onClick: onDelete, label: "Delete condition", variant: "ghost", disabled, children: /* @__PURE__ */ jsx(Trash, {}) }) })
+      ]
+    }
+  );
+};
+const CancelConditionsField = forwardRef(
+  ({ name, value, onChange, intlLabel, disabled, error, required, hint }, ref) => {
+    const [config, setConfig] = useState(() => parseConfig(value));
+    const theme = useTheme();
+    theme?.colors;
+    React__default.useEffect(() => {
+      const parsed = parseConfig(value);
+      setConfig(parsed);
+    }, [value]);
+    const handleUpdate = useCallback((newConfig) => {
+      setConfig(newConfig);
+      onChange({
+        target: {
+          name,
+          value: serializeConfig(newConfig)
+        }
+      });
+    }, [name, onChange]);
+    const handleAddRule = () => {
+      const newRule = {
+        id: generateId(),
+        field: "has_deposit_since_trigger",
+        operator: "$eq",
+        value: true
+      };
+      handleUpdate({
+        ...config,
+        rules: [...config.rules, newRule]
+      });
+    };
+    const handleUpdateRule = (ruleId, updatedRule) => {
+      handleUpdate({
+        ...config,
+        rules: config.rules.map((r) => r.id === ruleId ? updatedRule : r)
+      });
+    };
+    const handleDeleteRule = (ruleId) => {
+      handleUpdate({
+        ...config,
+        rules: config.rules.filter((r) => r.id !== ruleId)
+      });
+    };
+    const handleLogicToggle = () => {
+      handleUpdate({
+        ...config,
+        logic: config.logic === "$or" ? "$and" : "$or"
+      });
+    };
+    const hasRules = config.rules.length > 0;
+    return /* @__PURE__ */ jsx(Field.Root, { name, error, required, hint, ref, children: /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: 3, children: [
+      /* @__PURE__ */ jsx(Field.Label, { children: intlLabel?.defaultMessage || "Cancel Conditions" }),
+      /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral600", children: "Skip sending if any of these conditions are true (checked right before send)" }),
+      /* @__PURE__ */ jsx(Card, { background: "neutral100", children: /* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsxs(Box, { padding: 4, children: [
+        hasRules && /* @__PURE__ */ jsx(Flex, { justifyContent: "space-between", alignItems: "center", marginBottom: 3, children: /* @__PURE__ */ jsxs(Flex, { gap: 2, alignItems: "center", children: [
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: config.logic === "$or" ? "default" : "secondary",
+              size: "S",
+              onClick: handleLogicToggle,
+              disabled,
+              children: config.logic === "$or" ? "OR" : "AND"
+            }
+          ),
+          /* @__PURE__ */ jsx(Typography, { variant: "omega", textColor: "neutral600", children: config.logic === "$or" ? "Cancel if ANY condition is true" : "Cancel if ALL conditions are true" })
+        ] }) }),
+        /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: 2, children: [
+          config.rules.map((rule) => /* @__PURE__ */ jsx(
+            RuleRow,
+            {
+              rule,
+              onUpdate: (updated) => handleUpdateRule(rule.id, updated),
+              onDelete: () => handleDeleteRule(rule.id),
+              disabled
+            },
+            rule.id
+          )),
+          !hasRules && /* @__PURE__ */ jsx(Box, { padding: 4, background: "neutral0", hasRadius: true, style: { textAlign: "center" }, children: /* @__PURE__ */ jsx(Typography, { variant: "omega", textColor: "neutral500", children: "No cancel conditions defined. Message will be sent if segment rules match." }) })
+        ] }),
+        /* @__PURE__ */ jsx(Box, { marginTop: 3, children: /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "secondary",
+            startIcon: /* @__PURE__ */ jsx(Plus, {}),
+            onClick: handleAddRule,
+            disabled,
+            size: "S",
+            children: "Add Cancel Condition"
+          }
+        ) })
+      ] }) }) }),
+      error && /* @__PURE__ */ jsx(Field.Error, { children: error }),
+      hint && /* @__PURE__ */ jsx(Field.Hint, { children: hint })
+    ] }) });
+  }
+);
+CancelConditionsField.displayName = "CancelConditionsField";
+export {
+  CancelConditionsField as default
+};

package/dist/_chunks/index-Cf8DZYT6.js

@@ -0,0 +1,341 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const designSystem = require("@strapi/design-system");
+const icons = require("@strapi/icons");
+const styled = require("styled-components");
+const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
+const React__default = /* @__PURE__ */ _interopDefault(React);
+const booleanOperators = ["$eq", "$ne"];
+const numberOperators = ["$eq", "$ne", "$gt", "$lt", "$gte", "$lte"];
+const timeAgoOperators = ["$gt", "$lt", "$gte", "$lte"];
+const CANCEL_METRICS = [
+  {
+    key: "has_deposit_since_trigger",
+    label: "Made Deposit",
+    valueType: "boolean",
+    description: "User made a successful deposit after the trigger event",
+    operators: booleanOperators
+  },
+  {
+    key: "has_activity_since_trigger",
+    label: "Had Activity",
+    valueType: "boolean",
+    description: "User had any activity (case open, upgrade, battle, etc.) after trigger",
+    operators: booleanOperators
+  },
+  {
+    key: "has_session_since_trigger",
+    label: "Returned to Site",
+    valueType: "boolean",
+    description: "User had a new session/visit after the trigger event",
+    operators: booleanOperators
+  },
+  {
+    key: "balance_sufficient",
+    label: "Balance Sufficient",
+    valueType: "boolean",
+    description: "User balance is now sufficient for the intended action",
+    operators: booleanOperators
+  },
+  {
+    key: "is_authenticated",
+    label: "Is Authenticated",
+    valueType: "boolean",
+    description: "User has logged in / authenticated",
+    operators: booleanOperators
+  },
+  {
+    key: "battle_completed",
+    label: "Battle Completed",
+    valueType: "boolean",
+    description: "The battle was completed or continued",
+    operators: booleanOperators
+  },
+  {
+    key: "upgrade_completed",
+    label: "Upgrade Completed",
+    valueType: "boolean",
+    description: "The upgrade was completed or retried",
+    operators: booleanOperators
+  },
+  {
+    key: "contract_completed",
+    label: "Contract Completed",
+    valueType: "boolean",
+    description: "The contract was completed",
+    operators: booleanOperators
+  },
+  {
+    key: "deposit_count",
+    label: "Deposit Count",
+    valueType: "number",
+    description: "Total number of deposits (e.g., for checking if 2nd deposit exists)",
+    operators: numberOperators
+  },
+  {
+    key: "case_open_count_since_trigger",
+    label: "Cases Opened Since Trigger",
+    valueType: "number",
+    description: "Number of cases opened after the trigger event",
+    operators: numberOperators
+  },
+  {
+    key: "time_since_trigger",
+    label: "Time Since Trigger",
+    valueType: "time_ago",
+    description: "How long since the trigger event fired",
+    operators: timeAgoOperators
+  }
+];
+const CANCEL_TIME_UNITS = [
+  { value: "minutes_ago", label: "minutes" },
+  { value: "hours_ago", label: "hours" }
+];
+const generateId = () => Math.random().toString(36).substring(2, 11);
+const DEFAULT_CONFIG = {
+  logic: "$or",
+  rules: []
+};
+const parseConfig = (value) => {
+  if (!value) return DEFAULT_CONFIG;
+  try {
+    const parsed = JSON.parse(value);
+    if (parsed.logic && Array.isArray(parsed.rules)) {
+      return parsed;
+    }
+    return DEFAULT_CONFIG;
+  } catch {
+    return DEFAULT_CONFIG;
+  }
+};
+const serializeConfig = (config) => {
+  return JSON.stringify(config);
+};
+const getMetric = (key) => {
+  return CANCEL_METRICS.find((m) => m.key === key);
+};
+const OPERATORS = [
+  { value: "$eq", label: "=" },
+  { value: "$ne", label: "≠" },
+  { value: "$gt", label: ">" },
+  { value: "$lt", label: "<" },
+  { value: "$gte", label: "≥" },
+  { value: "$lte", label: "≤" }
+];
+const ValueInput = ({ metric, value, operator, onChange, disabled }) => {
+  if (metric.valueType === "boolean") {
+    const boolVal = value === true || value === "true";
+    return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { gap: 2, alignItems: "center", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        designSystem.Switch,
+        {
+          label: "",
+          checked: boolVal,
+          onChange: () => onChange(!boolVal),
+          disabled
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "omega", textColor: "neutral600", children: boolVal ? "true" : "false" })
+    ] });
+  }
+  if (metric.valueType === "number") {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      designSystem.TextInput,
+      {
+        type: "number",
+        value: String(value ?? 0),
+        onChange: (e) => onChange(parseInt(e.target.value, 10) || 0),
+        disabled,
+        "aria-label": "Value"
+      }
+    );
+  }
+  if (metric.valueType === "time_ago") {
+    const timeValue = value || { minutes_ago: 10 };
+    const unit = Object.keys(timeValue)[0] || "minutes_ago";
+    const numValue = timeValue[unit] || 10;
+    return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { gap: 2, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { style: { width: "80px" }, children: /* @__PURE__ */ jsxRuntime.jsx(
+        designSystem.TextInput,
+        {
+          type: "number",
+          value: String(numValue),
+          onChange: (e) => onChange({ [unit]: parseInt(e.target.value, 10) || 0 }),
+          disabled,
+          "aria-label": "Time value"
+        }
+      ) }),
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { style: { width: "120px" }, children: /* @__PURE__ */ jsxRuntime.jsx(
+        designSystem.SingleSelect,
+        {
+          value: unit,
+          onChange: (newUnit) => onChange({ [newUnit]: numValue }),
+          disabled,
+          children: CANCEL_TIME_UNITS.map((u) => /* @__PURE__ */ jsxRuntime.jsx(designSystem.SingleSelectOption, { value: u.value, children: u.label }, u.value))
+        }
+      ) })
+    ] });
+  }
+  return null;
+};
+const RuleRow = ({ rule, onUpdate, onDelete, disabled }) => {
+  const theme = styled.useTheme();
+  const colors = theme?.colors;
+  const metric = getMetric(rule.field);
+  const availableOperators = metric?.operators || ["$eq"];
+  const handleFieldChange = (fieldKey) => {
+    const newMetric = getMetric(fieldKey);
+    let newValue = true;
+    if (newMetric?.valueType === "number") {
+      newValue = 0;
+    } else if (newMetric?.valueType === "time_ago") {
+      newValue = { minutes_ago: 10 };
+    }
+    const newOp = newMetric?.operators[0] || "$eq";
+    onUpdate({ ...rule, field: fieldKey, operator: newOp, value: newValue });
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    designSystem.Flex,
+    {
+      gap: 2,
+      alignItems: "center",
+      padding: 2,
+      background: "neutral0",
+      hasRadius: true,
+      style: { border: `1px solid ${colors?.neutral200 || "#dcdce4"}` },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { style: { flex: "1 1 200px", minWidth: "180px" }, children: /* @__PURE__ */ jsxRuntime.jsx(
+          designSystem.SingleSelect,
+          {
+            value: rule.field,
+            onChange: (val) => handleFieldChange(val),
+            disabled,
+            size: "S",
+            children: CANCEL_METRICS.map((m) => /* @__PURE__ */ jsxRuntime.jsx(designSystem.SingleSelectOption, { value: m.key, children: m.label }, m.key))
+          }
+        ) }),
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { style: { width: "80px" }, children: /* @__PURE__ */ jsxRuntime.jsx(
+          designSystem.SingleSelect,
+          {
+            value: rule.operator,
+            onChange: (val) => onUpdate({ ...rule, operator: val }),
+            disabled,
+            size: "S",
+            children: OPERATORS.filter((op) => availableOperators.includes(op.value)).map((op) => /* @__PURE__ */ jsxRuntime.jsx(designSystem.SingleSelectOption, { value: op.value, children: op.label }, op.value))
+          }
+        ) }),
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { style: { flex: "1 1 150px", minWidth: "120px" }, children: metric && /* @__PURE__ */ jsxRuntime.jsx(
+          ValueInput,
+          {
+            metric,
+            value: rule.value,
+            operator: rule.operator,
+            onChange: (val) => onUpdate({ ...rule, value: val }),
+            disabled
+          }
+        ) }),
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Tooltip, { label: "Delete condition", children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.IconButton, { onClick: onDelete, label: "Delete condition", variant: "ghost", disabled, children: /* @__PURE__ */ jsxRuntime.jsx(icons.Trash, {}) }) })
+      ]
+    }
+  );
+};
+const CancelConditionsField = React.forwardRef(
+  ({ name, value, onChange, intlLabel, disabled, error, required, hint }, ref) => {
+    const [config, setConfig] = React.useState(() => parseConfig(value));
+    const theme = styled.useTheme();
+    theme?.colors;
+    React__default.default.useEffect(() => {
+      const parsed = parseConfig(value);
+      setConfig(parsed);
+    }, [value]);
+    const handleUpdate = React.useCallback((newConfig) => {
+      setConfig(newConfig);
+      onChange({
+        target: {
+          name,
+          value: serializeConfig(newConfig)
+        }
+      });
+    }, [name, onChange]);
+    const handleAddRule = () => {
+      const newRule = {
+        id: generateId(),
+        field: "has_deposit_since_trigger",
+        operator: "$eq",
+        value: true
+      };
+      handleUpdate({
+        ...config,
+        rules: [...config.rules, newRule]
+      });
+    };
+    const handleUpdateRule = (ruleId, updatedRule) => {
+      handleUpdate({
+        ...config,
+        rules: config.rules.map((r) => r.id === ruleId ? updatedRule : r)
+      });
+    };
+    const handleDeleteRule = (ruleId) => {
+      handleUpdate({
+        ...config,
+        rules: config.rules.filter((r) => r.id !== ruleId)
+      });
+    };
+    const handleLogicToggle = () => {
+      handleUpdate({
+        ...config,
+        logic: config.logic === "$or" ? "$and" : "$or"
+      });
+    };
+    const hasRules = config.rules.length > 0;
+    return /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Root, { name, error, required, hint, ref, children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", gap: 3, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Label, { children: intlLabel?.defaultMessage || "Cancel Conditions" }),
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", textColor: "neutral600", children: "Skip sending if any of these conditions are true (checked right before send)" }),
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Card, { background: "neutral100", children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.CardContent, { children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { padding: 4, children: [
+        hasRules && /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { justifyContent: "space-between", alignItems: "center", marginBottom: 3, children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { gap: 2, alignItems: "center", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            designSystem.Button,
+            {
+              variant: config.logic === "$or" ? "default" : "secondary",
+              size: "S",
+              onClick: handleLogicToggle,
+              disabled,
+              children: config.logic === "$or" ? "OR" : "AND"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "omega", textColor: "neutral600", children: config.logic === "$or" ? "Cancel if ANY condition is true" : "Cancel if ALL conditions are true" })
+        ] }) }),
+        /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", gap: 2, children: [
+          config.rules.map((rule) => /* @__PURE__ */ jsxRuntime.jsx(
+            RuleRow,
+            {
+              rule,
+              onUpdate: (updated) => handleUpdateRule(rule.id, updated),
+              onDelete: () => handleDeleteRule(rule.id),
+              disabled
+            },
+            rule.id
+          )),
+          !hasRules && /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { padding: 4, background: "neutral0", hasRadius: true, style: { textAlign: "center" }, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "omega", textColor: "neutral500", children: "No cancel conditions defined. Message will be sent if segment rules match." }) })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { marginTop: 3, children: /* @__PURE__ */ jsxRuntime.jsx(
+          designSystem.Button,
+          {
+            variant: "secondary",
+            startIcon: /* @__PURE__ */ jsxRuntime.jsx(icons.Plus, {}),
+            onClick: handleAddRule,
+            disabled,
+            size: "S",
+            children: "Add Cancel Condition"
+          }
+        ) })
+      ] }) }) }),
+      error && /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Error, { children: error }),
+      hint && /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Hint, { children: hint })
+    ] }) });
+  }
+);
+CancelConditionsField.displayName = "CancelConditionsField";
+exports.default = CancelConditionsField;