/* eslint-env browser */
/**
* FormConditionsControl — the "Conditional Display" element-control for AAE
* Form field widgets (pro feature; this is only the editor UI — free ships
* it dormant, exactly like the Integrations tab).
*
* Registered under the type id 'aae-form-conditions' (see ./index.js). The
* PRO plugin's FormConditions\Controls injects the section (General tab, on
* each field widget) with an enable switch bound to `aae_cond_enable` and
* this control. The dialog reads/writes three props on the SELECTED field:
*
* aae_cond_action 'show' | 'hide' (string prop)
* aae_cond_logic 'all' | 'any' (string prop)
* aae_cond_rules JSON [{field, operator, value}, …] (string prop)
*
* Rule semantics (mirrored EXACTLY by the pro runtime + PHP engine):
* a field value list passes equals/contains/… per rule; 'all'/'any'
* combines; action 'show' reveals on pass, 'hide' conceals on pass.
*
* Writes use the documented envelope pattern — string props saved as
* { $$type: 'string', value } via $e.run('document/elements/settings').
*/
import * as React from "react";
import { __ } from "@wordpress/i18n";
import { useElement } from "@elementor/editor-editing-panel";
import { getContainer } from "@elementor/editor-elements";
import {
Alert,
Box,
Button,
Dialog,
DialogActions,
DialogContent,
DialogTitle,
FormControl,
IconButton,
InputLabel,
MenuItem,
Select,
Stack,
TextField,
Typography,
} from "@elementor/ui";
import { collectFieldTags } from "./FormActionsControl";
const { useState } = React;
const BRAND = "#F6502C";
const BRAND_HOVER = "#E04524";
const BRAND_GRADIENT = "linear-gradient(135deg, #FFA184 0%, #F2754F 100%)";
const OPERATORS = [
{ value: "equals", label: __("Is", "animation-addons-for-elementor") },
{ value: "not_equals", label: __("Is not", "animation-addons-for-elementor") },
{ value: "not_empty", label: __("Is not empty", "animation-addons-for-elementor") },
{ value: "empty", label: __("Is empty", "animation-addons-for-elementor") },
{ value: "contains", label: __("Contains", "animation-addons-for-elementor") },
{ value: "greater_than", label: __("Greater than", "animation-addons-for-elementor") },
{ value: "less_than", label: __("Less than", "animation-addons-for-elementor") },
];
const NO_VALUE_OPERATORS = ["empty", "not_empty"];
/** Unwrap a possibly-enveloped prop value ({$$type,value} → value). */
const unwrap = (raw) =>
raw && typeof raw === "object" && "value" in raw ? raw.value : raw;
const asString = (raw) => {
let value = unwrap(raw);
if (value && typeof value === "object") {
value = unwrap(value);
}
return value === null || value === undefined || typeof value === "object"
? ""
: String(value);
};
/** Nearest e-aae-a-form ancestor container of an editor container. */
const parentFormOf = (container) => {
let current = container?.parent;
while (current) {
const model = current.model;
const elType = model?.get?.("elType");
const type = "widget" === elType ? model?.get?.("widgetType") : elType;
if ("e-aae-a-form" === type) {
return current;
}
current = current.parent;
}
return null;
};
const readState = (container) => {
const settings = container?.settings?.toJSON?.() || {};
const action = asString(settings.aae_cond_action) || "show";
const logic = asString(settings.aae_cond_logic) || "all";
let rules = [];
try {
const parsed = JSON.parse(asString(settings.aae_cond_rules) || "[]");
if (Array.isArray(parsed)) {
rules = parsed
.filter((rule) => rule && typeof rule === "object")
.map((rule) => ({
field: String(rule.field || ""),
operator: String(rule.operator || "equals"),
value: String(rule.value ?? ""),
}));
}
} catch (_e) {
/* corrupt JSON — start empty */
}
return { action, logic, rules };
};
/* Branching-paths icon for the row button (native Display Conditions style). */
const BranchIcon = () => (
);
const TrashIcon = () => (
);
export function FormConditionsControl({ label }) {
const { element } = useElement();
const [open, setOpen] = useState(false);
const [action, setAction] = useState("show");
const [logic, setLogic] = useState("all");
const [rules, setRules] = useState([]);
const [fieldTags, setFieldTags] = useState([]);
const [noForm, setNoForm] = useState(false);
const openDialog = () => {
const container = getContainer(element.id);
const state = readState(container);
setAction(state.action);
setLogic(state.logic);
setRules(
state.rules.length
? state.rules
: [{ field: "", operator: "equals", value: "" }]
);
const form = parentFormOf(container);
setNoForm(!form);
setFieldTags(form ? collectFieldTags(form) : []);
setOpen(true);
};
const patchRule = (index, key, value) =>
setRules((current) =>
current.map((rule, i) => (i === index ? { ...rule, [key]: value } : rule))
);
const removeRule = (index) =>
setRules((current) => current.filter((_rule, i) => i !== index));
const addRule = () =>
setRules((current) => [...current, { field: "", operator: "equals", value: "" }]);
const save = () => {
const container = getContainer(element.id);
const $e = window.$e;
if (!container || !$e?.run) {
return;
}
const cleanRules = rules.filter((rule) => rule.field);
$e.run("document/elements/settings", {
container,
settings: {
// Native-style UX: rules present = feature on; cleared = off.
aae_cond_enable: { $$type: "boolean", value: cleanRules.length > 0 },
aae_cond_action: { $$type: "string", value: action },
aae_cond_logic: { $$type: "string", value: logic },
aae_cond_rules: { $$type: "string", value: JSON.stringify(cleanRules) },
},
options: { external: true },
});
setOpen(false);
};
// Active = enabled with at least one saved rule — read at render so the
// indicator refreshes when the dialog closes.
const currentSettings = getContainer(element.id)?.settings?.toJSON?.() || {};
let active = !!unwrap(currentSettings.aae_cond_enable);
if (active) {
try {
const saved = JSON.parse(asString(currentSettings.aae_cond_rules) || "[]");
active = Array.isArray(saved) && saved.length > 0;
} catch (_e) {
active = false;
}
}
return (
{/* Native Settings-row look: label left, bordered icon button right
(same pattern as Elementor Pro's Display Conditions row). */}
{/* AAE brand mark — same icon-font glyph the AAE section headers
use (see responsive-section/section-branding.js). */}
{label || __("Conditional Display", "animation-addons-for-elementor")}
{active && (
)}
);
}