@aglyn/plugins-workflows 1.0.0-beta.143

package/src/lib/components/automation-step-fields.component.js

@@ -0,0 +1,1210 @@
+/**
+ * @license
+ * Copyright 2026 Aglyn LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */ 'use client';
+import { _ as _extends } from "@swc/helpers/_/_extends";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * ONE STEP EDITOR FOR BOTH AUTOMATION BUILDERS (AGL-3105).
+ *
+ * A step's fields belong to the step, not to the card the step is edited on.
+ * The Actions builder and the Workflows builder both hold an ordered list of
+ * steps, and a workflow step may be any server-side Actions step, so the
+ * fields it takes — which dataset, which campaign, how long to wait, what to
+ * say — are asked here and in one place. A second copy would be two editors
+ * of one vocabulary, drifting a field at a time.
+ *
+ * What the card keeps is the list: what "Add step" builds, how many are
+ * allowed, and what a kind the Actions vocabulary does not hold looks like —
+ * a workflow's function call, handed in as `fields`.
+ */ import { CONTACT_LIFECYCLE_STAGE_LABELS, CONTACT_LIFECYCLE_STAGES, CONTACT_TAG_MAX_LENGTH, CRM_ACTIVITY_KIND_LABELS, CRM_ACTIVITY_KINDS, CRM_TASK_KIND_LABELS, CRM_TASK_KINDS, CRM_TASK_MAX_DUE_DAYS, HOST_EVENT_TYPES, hostEventLabel, isInteractionAttributeAllowed } from "@aglyn/aglyn";
+import { automationPlaceholderIn } from "@aglyn/aglyn/app-utils/automation-placeholders";
+import { IconButton, MenuItem, Stack, TextField, Typography } from "@mui/material";
+/**
+ * The durations a wait may be set to, from the picker.
+ *
+ * A select rather than a number field, because minutes are the wrong unit for
+ * the thing being chosen: a welcome series is authored in days and nobody
+ * wants to compute that three days is 4,320. Every value is inside the
+ * validated band, so the picker cannot produce a step the validator refuses —
+ * which is the property a free-text duration field would not have.
+ */ const FLOW_WAIT_PRESETS = [
+    {
+        minutes: 5,
+        label: '5 minutes'
+    },
+    {
+        minutes: 30,
+        label: '30 minutes'
+    },
+    {
+        minutes: 60,
+        label: '1 hour'
+    },
+    {
+        minutes: 60 * 4,
+        label: '4 hours'
+    },
+    {
+        minutes: 60 * 24,
+        label: '1 day'
+    },
+    {
+        minutes: 60 * 24 * 2,
+        label: '2 days'
+    },
+    {
+        minutes: 60 * 24 * 3,
+        label: '3 days'
+    },
+    {
+        minutes: 60 * 24 * 7,
+        label: '1 week'
+    },
+    {
+        minutes: 60 * 24 * 14,
+        label: '2 weeks'
+    },
+    {
+        minutes: 60 * 24 * 30,
+        label: '30 days'
+    },
+    {
+        minutes: 60 * 24 * 60,
+        label: '60 days'
+    },
+    {
+        minutes: 60 * 24 * 90,
+        label: '90 days'
+    }
+];
+/**
+ * The two stored fields a typed teammate reference becomes.
+ *
+ * `ownerEmail`/`assigneeEmail` hold an address and nothing else — the
+ * validator refuses one without an `@`, and the executor matches it on the
+ * roster's `email`. A value with no `@` is a member id, stored in the uid
+ * field the executor verifies against the roster document. Clearing the
+ * text clears both, so a step never carries a stale address beside a uid.
+ */ function memberRefFields(role, value) {
+    const text = value.trim();
+    const emailKey = `${role}Email`;
+    const uidKey = `${role}Uid`;
+    if (!text) return {
+        [emailKey]: undefined,
+        [uidKey]: undefined
+    };
+    return text.includes('@') ? {
+        [emailKey]: value,
+        [uidKey]: undefined
+    } : {
+        [emailKey]: undefined,
+        [uidKey]: text
+    };
+}
+/**
+ * What a field holding a placeholder shows: an error state and what to do
+ * about it. A placeholder is a value a person still has to supply, written in
+ * square brackets where it belongs — an automation drafted for review carries
+ * one wherever it could not name a real record or did not know a fact.
+ */ export function placeholderState(value, help) {
+    return automationPlaceholderIn(value) ? {
+        error: true,
+        helperText: help
+    } : {};
+}
+/**
+ * A picker whose stored reference is a placeholder name and no id: the record
+ * the draft asked for, which the site did not have when it was written.
+ */ function placeholderReference(name, id, noun) {
+    const words = String(id != null ? id : '').trim() ? null : automationPlaceholderIn(name);
+    return words ? {
+        error: true,
+        helperText: `Pick the ${noun} — the draft asked for “${words}”`
+    } : {};
+}
+export function defaultStep(type) {
+    switch(type){
+        case 'runWorkflow':
+            return {
+                type,
+                workflowName: ''
+            };
+        case 'siteAlert':
+            return {
+                type,
+                message: '',
+                severity: 'info'
+            };
+        case 'customEvent':
+            return {
+                type,
+                eventName: ''
+            };
+        case 'webhookPost':
+            return {
+                type,
+                webhookName: ''
+            };
+        case 'showOverlay':
+            return {
+                type,
+                overlayId: ''
+            };
+        case 'stickyNav':
+            return {
+                type,
+                selector: ''
+            };
+        case 'addClass':
+        case 'removeClass':
+        case 'toggleClass':
+            return {
+                type,
+                selector: '',
+                className: ''
+            };
+        // Element show/hide + drawer commands (AGL-562).
+        case 'showElement':
+        case 'hideElement':
+        case 'toggleElement':
+            return {
+                type,
+                selector: ''
+            };
+        // Every step the menu offers needs a case here: the `default` below is a
+        // dataset write, so a step without one turns into that (AGL-2876).
+        case 'setAttribute':
+            return {
+                type,
+                selector: '',
+                name: '',
+                value: ''
+            };
+        case 'removeAttribute':
+            return {
+                type,
+                selector: '',
+                name: ''
+            };
+        // One-target steps (AGL-2867); absent options are the defaults.
+        case 'scrollTo':
+        case 'playVideo':
+            return {
+                type,
+                selector: ''
+            };
+        case 'openDrawer':
+        case 'closeDrawer':
+        case 'toggleDrawer':
+            return {
+                type
+            };
+        // Menu commands (AGL-568) mirror the drawer's optional target.
+        case 'openMenu':
+        case 'closeMenu':
+        case 'toggleMenu':
+            return {
+                type
+            };
+        case 'showHtml':
+            return {
+                type,
+                html: ''
+            };
+        case 'runJs':
+            return {
+                type,
+                code: ''
+            };
+        case 'redirect':
+            return {
+                type,
+                url: ''
+            };
+        case 'trackGaEvent':
+            return {
+                type,
+                eventName: ''
+            };
+        case 'sendEmail':
+            return {
+                type,
+                subject: '',
+                body: ''
+            };
+        case 'notifyAdmins':
+            return {
+                type,
+                title: ''
+            };
+        case 'enrollList':
+            return {
+                type,
+                listId: ''
+            };
+        case 'updateDataset':
+            return {
+                type,
+                datasetId: ''
+            };
+        case 'assignCampaign':
+            return {
+                type,
+                campaignId: ''
+            };
+        // The CRM steps (AGL-2605). A stage and a kind start on a real entry of
+        // their vocabulary rather than blank, so the select never shows a value
+        // the validator would refuse; the free-text fields start empty because
+        // there is nothing sensible to guess for them.
+        case 'setContactStage':
+            return {
+                type,
+                lifecycleStage: 'lead'
+            };
+        case 'addContactTag':
+            return {
+                type,
+                tag: ''
+            };
+        case 'assignContactOwner':
+            return {
+                type,
+                ownerEmail: ''
+            };
+        case 'createCrmTask':
+            return {
+                type,
+                title: '',
+                kind: 'call',
+                dueInDays: 1
+            };
+        case 'logCrmActivity':
+            return {
+                type,
+                kind: 'note',
+                body: ''
+            };
+        // A day, because a new wait is almost always part of a series measured in
+        // days and a default of one minute reads as a placeholder rather than a
+        // choice. Both are inside the validated band, so neither can be saved
+        // wrong; this is only which one the author starts from.
+        case 'wait':
+            return {
+                type,
+                delayMinutes: 60 * 24
+            };
+        case 'waitForEvent':
+            return {
+                type,
+                eventName: '',
+                timeoutMinutes: 60 * 24 * 3
+            };
+        case 'exitFlow':
+            return {
+                type
+            };
+        default:
+            return {
+                type: 'datasetAppend',
+                datasetName: ''
+            };
+    }
+}
+/**
+ * One step's row: its number, what it does, the fields that kind takes, and
+ * the condition that gates it.
+ */ export function AutomationStepFields({ step, index, kind, kinds, stepForKind, pickers, onSteps, fields }) {
+    var _ref, _step_workflowId, _step_severity, _ref1, _step_webhookId, _ref2, _step_datasetId, _step_overlayId, _step_selector, _step_selector1, _step_className, _step_selector2, _step_selector3, _step_offsetPx, _step_selector4, _step_name, _step_value, _step_drawerNodeId, _step_menuNodeId, _step_html, _step_code, _step_url, _step_eventName, _step_subject, _step_body, _step_title, _step_listId, _step_campaignId, _step_lifecycleStage, _step_tag, _step_title1, _step_kind, _step_dueInDays, _step_kind1, _step_body1, _step_eventName1, _step_timeoutMinutes, _step_delayMinutes, _ref3, _step_when_conditions__field, _step_when_conditions__value;
+    var _workflowOptions_find, _webhookOptions_find, _datasetOptions_find, _step_when_conditions_, _step_when_conditions, _step_when, _step_when_conditions_1, _step_when_conditions1, _step_when1, _step_when_conditions_2, _step_when_conditions2, _step_when2, _step_when_conditions_3, _step_when_conditions3, _step_when3;
+    const { workflowOptions, datasetOptions, overlayOptions, listOptions, campaignOptions, webhookOptions } = pickers;
+    /*
+   * The list, edited as a draft holding it — the shape both cards' own
+   * `patch` takes, so a field below reads the same here as it did beside the
+   * card it came from, and an edit that spreads `previous` still spreads only
+   * what it may change.
+   */ const patch = (update)=>onSteps((previous)=>update({
+                steps: previous
+            }).steps);
+    return /*#__PURE__*/ _jsxs(Stack, {
+        spacing: 0.5,
+        children: [
+            /*#__PURE__*/ _jsxs(Stack, {
+                direction: "row",
+                spacing: 1,
+                sx: {
+                    alignItems: 'center'
+                },
+                children: [
+                    /*#__PURE__*/ _jsx(Typography, {
+                        variant: "caption",
+                        color: "text.secondary",
+                        children: `${index + 1}`
+                    }),
+                    /*#__PURE__*/ _jsx(TextField, {
+                        select: true,
+                        label: "Do",
+                        value: kind,
+                        onChange: (event)=>patch((previous)=>_extends({}, previous, {
+                                    steps: previous.steps.map((s, index2)=>index2 === index ? stepForKind(event.target.value) : s)
+                                })),
+                        size: "small",
+                        sx: {
+                            minWidth: 170
+                        },
+                        children: kinds.map((option)=>/*#__PURE__*/ _jsx(MenuItem, {
+                                value: option.value,
+                                children: option.label
+                            }, option.value))
+                    }),
+                    fields != null ? fields : step.type === 'runWorkflow' ? /*#__PURE__*/ _jsx(TextField, _extends({
+                        select: true,
+                        label: "Workflow"
+                    }, placeholderReference(step.workflowName, step.workflowId, 'workflow'), {
+                        value: (_ref = (_step_workflowId = step.workflowId) != null ? _step_workflowId : (_workflowOptions_find = workflowOptions.find((option)=>option.name === step.workflowName)) == null ? void 0 : _workflowOptions_find.id) != null ? _ref : '',
+                        onChange: (event)=>patch((previous)=>_extends({}, previous, {
+                                    steps: previous.steps.map((s, index2)=>{
+                                        var _ref;
+                                        var _workflowOptions_find;
+                                        return index2 === index ? _extends({}, s, {
+                                            workflowId: event.target.value,
+                                            workflowName: (_ref = (_workflowOptions_find = workflowOptions.find((option)=>option.id === event.target.value)) == null ? void 0 : _workflowOptions_find.name) != null ? _ref : s.workflowName
+                                        }) : s;
+                                    })
+                                })),
+                        size: "small",
+                        sx: {
+                            flex: 1
+                        },
+                        children: workflowOptions.map((option)=>/*#__PURE__*/ _jsx(MenuItem, {
+                                value: option.id,
+                                children: option.name
+                            }, option.id))
+                    })) : step.type === 'siteAlert' ? /*#__PURE__*/ _jsxs(_Fragment, {
+                        children: [
+                            /*#__PURE__*/ _jsx(TextField, _extends({
+                                label: "Message"
+                            }, placeholderState(step.message, 'Fill in the placeholder'), {
+                                value: step.message,
+                                onChange: (event)=>patch((previous)=>_extends({}, previous, {
+                                            steps: previous.steps.map((s, index2)=>index2 === index ? _extends({}, s, {
+                                                    message: event.target.value
+                                                }) : s)
+                                        })),
+                                size: "small",
+                                sx: {
+                                    flex: 1
+                                }
+                            })),
+                            /*#__PURE__*/ _jsx(TextField, {
+                                select: true,
+                                label: "Style",
+                                value: (_step_severity = step.severity) != null ? _step_severity : 'info',
+                                onChange: (event)=>patch((previous)=>_extends({}, previous, {
+                                            steps: previous.steps.map((s, index2)=>index2 === index ? _extends({}, s, {
+                                                    severity: event.target.value
+                                                }) : s)
+                                        })),
+                                size: "small",
+                                sx: {
+                                    width: 110
+                                },
+                                children: [
+                                    'info',
+                                    'success',
+                                    'warning',
+                                    'error'
+                                ].map((value)=>/*#__PURE__*/ _jsx(MenuItem, {
+                                        value: value,
+                                        children: value
+                                    }, value))
+                            })
+                        ]
+                    }) : step.type === 'customEvent' ? /*#__PURE__*/ _jsx(TextField, {
+                        label: "Event name",
+                        value: step.eventName,
+                        onChange: (event)=>patch((previous)=>_extends({}, previous, {
+                                    steps: previous.steps.map((s, index2)=>index2 === index ? _extends({}, s, {
+                                            eventName: event.target.value
+                                        }) : s)
+                                })),
+                        size: "small",
+                        sx: {
+                            flex: 1
+                        }
+                    }) : step.type === 'webhookPost' ? /*#__PURE__*/ _jsx(TextField, _extends({
+                        select: true,
+                        label: "Webhook"
+                    }, placeholderReference(step.webhookName, step.webhookId, 'webhook'), {
+                        value: (_ref1 = (_step_webhookId = step.webhookId) != null ? _step_webhookId : (_webhookOptions_find = webhookOptions.find((option)=>option.name === step.webhookName)) == null ? void 0 : _webhookOptions_find.id) != null ? _ref1 : '',
+                        onChange: (event)=>patch((previous)=>_extends({}, previous, {
+                                    steps: previous.steps.map((s, index2)=>{
+                                        var _ref;
+                                        var _webhookOptions_find;
+                                        return index2 === index ? _extends({}, s, {
+                                            webhookId: event.target.value,
+                                            webhookName: (_ref = (_webhookOptions_find = webhookOptions.find((option)=>option.id === event.target.value)) == null ? void 0 : _webhookOptions_find.name) != null ? _ref : s.webhookName
+                                        }) : s;
+                                    })
+                                })),
+                        size: "small",
+                        sx: {
+                            flex: 1
+                        },
+                        children: webhookOptions.map((option)=>/*#__PURE__*/ _jsx(MenuItem, {
+                                value: option.id,
+                                children: option.name
+                            }, option.id))
+                    })) : step.type === 'datasetAppend' || step.type === 'updateDataset' ? /*#__PURE__*/ _jsx(TextField, _extends({
+                        select: true,
+                        label: "Dataset"
+                    }, placeholderReference(step.datasetName, step.datasetId, 'dataset'), {
+                        value: (_ref2 = (_step_datasetId = step.datasetId) != null ? _step_datasetId : (_datasetOptions_find = datasetOptions.find((option)=>option.name === step.datasetName)) == null ? void 0 : _datasetOptions_find.id) != null ? _ref2 : '',
+                        onChange: (event)=>patch((previous)=>_extends({}, previous, {
+                                    steps: previous.steps.map((s, index2)=>{
+                                        var _ref;
+                                        var _datasetOptions_find;
+                                        return index2 === index ? _extends({}, s, {
+                                            datasetId: event.target.value,
+                                            datasetName: (_ref = (_datasetOptions_find = datasetOptions.find((option)=>option.id === event.target.value)) == null ? void 0 : _datasetOptions_find.name) != null ? _ref : s.datasetName
+                                        }) : s;
+                                    })
+                                })),
+                        size: "small",
+                        sx: {
+                            flex: 1
+                        },
+                        children: datasetOptions.map((option)=>/*#__PURE__*/ _jsx(MenuItem, {
+                                value: option.id,
+                                children: option.name
+                            }, option.id))
+                    })) : step.type === 'showOverlay' ? /*#__PURE__*/ _jsx(TextField, {
+                        select: true,
+                        label: "Overlay",
+                        value: (_step_overlayId = step.overlayId) != null ? _step_overlayId : '',
+                        onChange: (event)=>patch((previous)=>_extends({}, previous, {
+                                    steps: previous.steps.map((s, index2)=>{
+                                        var _ref;
+                                        var _overlayOptions_find;
+                                        return index2 === index ? _extends({}, s, {
+                                            overlayId: event.target.value,
+                                            overlayName: (_ref = (_overlayOptions_find = overlayOptions.find((option)=>option.id === event.target.value)) == null ? void 0 : _overlayOptions_find.name) != null ? _ref : ''
+                                        }) : s;
+                                    })
+                                })),
+                        size: "small",
+                        sx: {
+                            flex: 1
+                        },
+                        children: overlayOptions.map((option)=>/*#__PURE__*/ _jsx(MenuItem, {
+                                value: option.id,
+                                children: option.name
+                            }, option.id))
+                    }) : step.type === 'stickyNav' ? /*#__PURE__*/ _jsx(TextField, {
+                        label: "Selector (default: header/nav)",
+                        value: (_step_selector = step.selector) != null ? _step_selector : '',
+                        onChange: (event)=>patch((previous)=>_extends({}, previous, {
+                                    steps: previous.steps.map((s, index2)=>index2 === index ? _extends({}, s, {
+                                            selector: event.target.value
+                                        }) : s)
+                                })),
+                        size: "small",
+                        sx: {
+                            flex: 1
+                        }
+                    }) : step.type === 'addClass' || step.type === 'removeClass' || step.type === 'toggleClass' ? /*#__PURE__*/ _jsxs(_Fragment, {
+                        children: [
+                            /*#__PURE__*/ _jsx(TextField, {
+                                label: "CSS selector",
+                                value: (_step_selector1 = step.selector) != null ? _step_selector1 : '',
+                                onChange: (event)=>patch((previous)=>_extends({}, previous, {
+                                            steps: previous.steps.map((s, index2)=>index2 === index ? _extends({}, s, {
+                                                    selector: event.target.value
+                                                }) : s)
+                                        })),
+                                size: "small",
+                                sx: {
+                                    flex: 1
+                                }
+                            }),
+                            /*#__PURE__*/ _jsx(TextField, {
+                                label: "Class name",
+                                value: (_step_className = step.className) != null ? _step_className : '',
+                                onChange: (event)=>patch((previous)=>_extends({}, previous, {
+                                            steps: previous.steps.map((s, index2)=>index2 === index ? _extends({}, s, {
+                                                    className: event.target.value
+                                                }) : s)
+                                        })),
+                                size: "small",
+                                sx: {
+                                    width: 150
+                                }
+                            })
+                        ]
+                    }) : step.type === 'showElement' || step.type === 'hideElement' || step.type === 'toggleElement' || step.type === 'playVideo' ? // Element choreography (AGL-562) and Play a video
+                    // (AGL-2867). The besigner's builder offers an element
+                    // picker; here the CSS selector is the escape hatch (node
+                    // targets use [data-aglyn="leaf:…"]).
+                    /*#__PURE__*/ _jsx(TextField, {
+                        label: "CSS selector",
+                        placeholder: '[data-aglyn="leaf:…"] or .my-class',
+                        value: (_step_selector2 = step.selector) != null ? _step_selector2 : '',
+                        onChange: (event)=>patch((previous)=>_extends({}, previous, {
+                                    steps: previous.steps.map((s, index2)=>index2 === index ? _extends({}, s, {
+                                            selector: event.target.value
+                                        }) : s)
+                                })),
+                        size: "small",
+                        sx: {
+                            flex: 1
+                        }
+                    }) : step.type === 'scrollTo' ? // Scroll to element (AGL-2867): the target, how the page
+                    // moves, and the room left above it for a sticky header.
+                    /*#__PURE__*/ _jsxs(_Fragment, {
+                        children: [
+                            /*#__PURE__*/ _jsx(TextField, {
+                                label: "CSS selector",
+                                placeholder: '[data-aglyn="leaf:…"] or .my-class',
+                                value: (_step_selector3 = step.selector) != null ? _step_selector3 : '',
+                                onChange: (event)=>patch((previous)=>_extends({}, previous, {
+                                            steps: previous.steps.map((s, index2)=>index2 === index ? _extends({}, s, {
+                                                    selector: event.target.value
+                                                }) : s)
+                                        })),
+                                size: "small",
+                                sx: {
+                                    flex: 1
+                                }
+                            }),
+                            /*#__PURE__*/ _jsxs(TextField, {
+                                select: true,
+                                label: "Scroll",
+                                value: step.behavior === 'instant' ? 'instant' : 'smooth',
+                                onChange: (event)=>patch((previous)=>_extends({}, previous, {
+                                            steps: previous.steps.map((s, index2)=>index2 === index ? _extends({}, s, {
+                                                    behavior: event.target.value === 'instant' ? 'instant' : undefined
+                                                }) : s)
+                                        })),
+                                size: "small",
+                                sx: {
+                                    width: 130
+                                },
+                                children: [
+                                    /*#__PURE__*/ _jsx(MenuItem, {
+                                        value: "smooth",
+                                        children: 'Smoothly'
+                                    }),
+                                    /*#__PURE__*/ _jsx(MenuItem, {
+                                        value: "instant",
+                                        children: 'Instantly'
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ _jsx(TextField, {
+                                label: "Offset (px)",
+                                type: "number",
+                                value: (_step_offsetPx = step.offsetPx) != null ? _step_offsetPx : '',
+                                onChange: (event)=>patch((previous)=>_extends({}, previous, {
+                                            steps: previous.steps.map((s, index2)=>index2 === index ? _extends({}, s, {
+                                                    offsetPx: event.target.value === '' ? undefined : Number(event.target.value)
+                                                }) : s)
+                                        })),
+                                size: "small",
+                                sx: {
+                                    width: 110
+                                }
+                            })
+                        ]
+                    }) : step.type === 'setAttribute' || step.type === 'removeAttribute' ? // The attribute steps (AGL-2546). The page applies only
+                    // `aria-*` and `data-*` names, so the field says so while
+                    // it holds any other, as the interaction builder's does.
+                    /*#__PURE__*/ _jsxs(_Fragment, {
+                        children: [
+                            /*#__PURE__*/ _jsx(TextField, {
+                                label: "CSS selector",
+                                placeholder: '[data-aglyn="leaf:…"] or .my-class',
+                                value: (_step_selector4 = step.selector) != null ? _step_selector4 : '',
+                                onChange: (event)=>patch((previous)=>_extends({}, previous, {
+                                            steps: previous.steps.map((s, index2)=>index2 === index ? _extends({}, s, {
+                                                    selector: event.target.value
+                                                }) : s)
+                                        })),
+                                size: "small",
+                                sx: {
+                                    flex: 1
+                                }
+                            }),
+                            /*#__PURE__*/ _jsx(TextField, {
+                                label: "Attribute",
+                                placeholder: "aria-expanded",
+                                value: (_step_name = step.name) != null ? _step_name : '',
+                                onChange: (event)=>patch((previous)=>_extends({}, previous, {
+                                            steps: previous.steps.map((s, index2)=>index2 === index ? _extends({}, s, {
+                                                    name: event.target.value
+                                                }) : s)
+                                        })),
+                                error: Boolean(step.name) && !isInteractionAttributeAllowed(step.name),
+                                helperText: Boolean(step.name) && !isInteractionAttributeAllowed(step.name) ? 'Must start with aria- or data-' : undefined,
+                                size: "small",
+                                sx: {
+                                    width: 150
+                                }
+                            }),
+                            step.type === 'setAttribute' ? /*#__PURE__*/ _jsx(TextField, {
+                                label: "Value",
+                                placeholder: "true",
+                                value: (_step_value = step.value) != null ? _step_value : '',
+                                onChange: (event)=>patch((previous)=>_extends({}, previous, {
+                                            steps: previous.steps.map((s, index2)=>index2 === index ? _extends({}, s, {
+                                                    value: event.target.value
+                                                }) : s)
+                                        })),
+                                size: "small",
+                                sx: {
+                                    width: 110
+                                }
+                            }) : null
+                        ]
+                    }) : step.type === 'openDrawer' || step.type === 'closeDrawer' || step.type === 'toggleDrawer' ? /*#__PURE__*/ _jsx(TextField, {
+                        label: "Drawer node id (optional)",
+                        placeholder: "Empty = the page's first drawer",
+                        value: (_step_drawerNodeId = step.drawerNodeId) != null ? _step_drawerNodeId : '',
+                        onChange: (event)=>patch((previous)=>_extends({}, previous, {
+                                    steps: previous.steps.map((s, index2)=>index2 === index ? _extends({}, s, {
+                                            drawerNodeId: event.target.value || undefined
+                                        }) : s)
+                                })),
+                        size: "small",
+                        sx: {
+                            flex: 1
+                        }
+                    }) : step.type === 'openMenu' || step.type === 'closeMenu' || step.type === 'toggleMenu' ? // Menu commands (AGL-568). The besigner's builder offers
+                    // a menu picker; here the raw node id is the escape
+                    // hatch, like the drawer field above.
+                    /*#__PURE__*/ _jsx(TextField, {
+                        label: "Menu node id (optional)",
+                        placeholder: "Empty = the page's first menu",
+                        value: (_step_menuNodeId = step.menuNodeId) != null ? _step_menuNodeId : '',
+                        onChange: (event)=>patch((previous)=>_extends({}, previous, {
+                                    steps: previous.steps.map((s, index2)=>index2 === index ? _extends({}, s, {
+                                            menuNodeId: event.target.value || undefined
+                                        }) : s)
+                                })),
+                        size: "small",
+                        sx: {
+                            flex: 1
+                        }
+                    }) : step.type === 'showHtml' || step.type === 'runJs' ? /*#__PURE__*/ _jsx(TextField, {
+                        label: step.type === 'showHtml' ? 'HTML' : 'JavaScript',
+                        value: step.type === 'showHtml' ? (_step_html = step.html) != null ? _step_html : '' : (_step_code = step.code) != null ? _step_code : '',
+                        onChange: (event)=>patch((previous)=>_extends({}, previous, {
+                                    steps: previous.steps.map((s, index2)=>index2 === index ? step.type === 'showHtml' ? _extends({}, s, {
+                                            html: event.target.value
+                                        }) : _extends({}, s, {
+                                            code: event.target.value
+                                        }) : s)
+                                })),
+                        size: "small",
+                        multiline: true,
+                        maxRows: 4,
+                        sx: {
+                            flex: 1
+                        }
+                    }) : step.type === 'redirect' ? /*#__PURE__*/ _jsx(TextField, {
+                        label: "Destination URL",
+                        value: (_step_url = step.url) != null ? _step_url : '',
+                        onChange: (event)=>patch((previous)=>_extends({}, previous, {
+                                    steps: previous.steps.map((s, index2)=>index2 === index ? _extends({}, s, {
+                                            url: event.target.value
+                                        }) : s)
+                                })),
+                        size: "small",
+                        sx: {
+                            flex: 1
+                        }
+                    }) : step.type === 'trackGaEvent' ? /*#__PURE__*/ _jsx(TextField, {
+                        label: "Analytics event name",
+                        value: (_step_eventName = step.eventName) != null ? _step_eventName : '',
+                        onChange: (event)=>patch((previous)=>_extends({}, previous, {
+                                    steps: previous.steps.map((s, index2)=>index2 === index ? _extends({}, s, {
+                                            eventName: event.target.value
+                                        }) : s)
+                                })),
+                        size: "small",
+                        sx: {
+                            flex: 1
+                        }
+                    }) : step.type === 'sendEmail' ? /*#__PURE__*/ _jsxs(_Fragment, {
+                        children: [
+                            /*#__PURE__*/ _jsx(TextField, _extends({
+                                label: "Subject"
+                            }, placeholderState(step.subject, 'Fill in the placeholder'), {
+                                value: (_step_subject = step.subject) != null ? _step_subject : '',
+                                onChange: (event)=>patch((previous)=>_extends({}, previous, {
+                                            steps: previous.steps.map((s, index2)=>index2 === index ? _extends({}, s, {
+                                                    subject: event.target.value
+                                                }) : s)
+                                        })),
+                                size: "small",
+                                sx: {
+                                    width: 180
+                                }
+                            })),
+                            /*#__PURE__*/ _jsx(TextField, _extends({
+                                label: "Body"
+                            }, placeholderState(step.body, 'Fill in the placeholders'), {
+                                value: (_step_body = step.body) != null ? _step_body : '',
+                                onChange: (event)=>patch((previous)=>_extends({}, previous, {
+                                            steps: previous.steps.map((s, index2)=>index2 === index ? _extends({}, s, {
+                                                    body: event.target.value
+                                                }) : s)
+                                        })),
+                                size: "small",
+                                multiline: true,
+                                maxRows: 3,
+                                sx: {
+                                    flex: 1
+                                }
+                            }))
+                        ]
+                    }) : step.type === 'notifyAdmins' ? /*#__PURE__*/ _jsx(TextField, _extends({
+                        label: "Notification title"
+                    }, placeholderState(step.title, 'Fill in the placeholder'), {
+                        value: (_step_title = step.title) != null ? _step_title : '',
+                        onChange: (event)=>patch((previous)=>_extends({}, previous, {
+                                    steps: previous.steps.map((s, index2)=>index2 === index ? _extends({}, s, {
+                                            title: event.target.value
+                                        }) : s)
+                                })),
+                        size: "small",
+                        sx: {
+                            flex: 1
+                        }
+                    })) : step.type === 'enrollList' ? /*#__PURE__*/ _jsxs(TextField, _extends({
+                        select: true,
+                        label: "List"
+                    }, placeholderReference(step.listName, step.listId, 'list'), {
+                        value: (_step_listId = step.listId) != null ? _step_listId : '',
+                        onChange: (event)=>patch((previous)=>_extends({}, previous, {
+                                    steps: previous.steps.map((s, index2)=>{
+                                        var _ref;
+                                        var _listOptions_find;
+                                        return index2 === index ? _extends({}, s, {
+                                            listId: event.target.value,
+                                            listName: (_ref = (_listOptions_find = listOptions.find((option)=>option.id === event.target.value)) == null ? void 0 : _listOptions_find.name) != null ? _ref : ''
+                                        }) : s;
+                                    })
+                                })),
+                        size: "small",
+                        sx: {
+                            flex: 1
+                        },
+                        children: [
+                            listOptions.length === 0 ? /*#__PURE__*/ _jsx(MenuItem, {
+                                value: "",
+                                disabled: true,
+                                children: 'No lists yet — create one under Campaigns'
+                            }) : null,
+                            listOptions.map((option)=>/*#__PURE__*/ _jsx(MenuItem, {
+                                    value: option.id,
+                                    children: option.name
+                                }, option.id))
+                        ]
+                    })) : step.type === 'assignCampaign' ? /*#__PURE__*/ _jsxs(TextField, _extends({
+                        select: true,
+                        label: "Campaign"
+                    }, placeholderReference(step.campaignName, step.campaignId, 'campaign'), {
+                        value: (_step_campaignId = step.campaignId) != null ? _step_campaignId : '',
+                        onChange: (event)=>patch((previous)=>_extends({}, previous, {
+                                    steps: previous.steps.map((s, index2)=>{
+                                        var _ref;
+                                        var _campaignOptions_find;
+                                        return index2 === index ? _extends({}, s, {
+                                            campaignId: event.target.value,
+                                            campaignName: (_ref = (_campaignOptions_find = campaignOptions.find((option)=>option.id === event.target.value)) == null ? void 0 : _campaignOptions_find.name) != null ? _ref : ''
+                                        }) : s;
+                                    })
+                                })),
+                        size: "small",
+                        sx: {
+                            flex: 1
+                        },
+                        children: [
+                            campaignOptions.length === 0 ? /*#__PURE__*/ _jsx(MenuItem, {
+                                value: "",
+                                disabled: true,
+                                children: 'No campaigns yet'
+                            }) : null,
+                            campaignOptions.map((option)=>/*#__PURE__*/ _jsx(MenuItem, {
+                                    value: option.id,
+                                    children: option.name
+                                }, option.id))
+                        ]
+                    })) : step.type === 'setContactStage' ? // The CRM steps (AGL-2605). Each acts on the contact the
+                    // event names — by id when the door knew it, by the email
+                    // in the payload otherwise — so none of them asks who.
+                    /*#__PURE__*/ _jsx(TextField, {
+                        select: true,
+                        label: "Stage",
+                        value: (_step_lifecycleStage = step.lifecycleStage) != null ? _step_lifecycleStage : '',
+                        onChange: (event)=>patch((previous)=>_extends({}, previous, {
+                                    steps: previous.steps.map((s, index2)=>index2 === index && s.type === 'setContactStage' ? _extends({}, s, {
+                                            lifecycleStage: event.target.value
+                                        }) : s)
+                                })),
+                        size: "small",
+                        sx: {
+                            minWidth: 200
+                        },
+                        children: CONTACT_LIFECYCLE_STAGES.map((stage)=>/*#__PURE__*/ _jsx(MenuItem, {
+                                value: stage,
+                                children: CONTACT_LIFECYCLE_STAGE_LABELS[stage]
+                            }, stage))
+                    }) : step.type === 'addContactTag' ? /*#__PURE__*/ _jsx(TextField, _extends({
+                        label: "Tag"
+                    }, placeholderState(step.tag, 'Fill in the placeholder'), {
+                        value: (_step_tag = step.tag) != null ? _step_tag : '',
+                        onChange: (event)=>patch((previous)=>_extends({}, previous, {
+                                    steps: previous.steps.map((s, index2)=>index2 === index ? _extends({}, s, {
+                                            tag: event.target.value.slice(0, CONTACT_TAG_MAX_LENGTH)
+                                        }) : s)
+                                })),
+                        size: "small",
+                        sx: {
+                            flex: 1
+                        }
+                    })) : step.type === 'assignContactOwner' ? // Two modes (AGL-2618): a member the author names, or the
+                    // next member of the round-robin pool the CRM's Settings
+                    // keep. Switching to the rotation drops the named member,
+                    // because the validator refuses a step that says both.
+                    /*#__PURE__*/ _jsxs(_Fragment, {
+                        children: [
+                            /*#__PURE__*/ _jsxs(TextField, {
+                                select: true,
+                                label: "Assign to",
+                                value: step.roundRobin === true ? 'roundRobin' : 'member',
+                                onChange: (event)=>patch((previous)=>_extends({}, previous, {
+                                            steps: previous.steps.map((s, index2)=>index2 === index && s.type === 'assignContactOwner' ? event.target.value === 'roundRobin' ? {
+                                                    type: s.type,
+                                                    roundRobin: true
+                                                } : {
+                                                    type: s.type,
+                                                    ownerEmail: ''
+                                                } : s)
+                                        })),
+                                size: "small",
+                                sx: {
+                                    minWidth: 200
+                                },
+                                children: [
+                                    /*#__PURE__*/ _jsx(MenuItem, {
+                                        value: "member",
+                                        children: 'A team member'
+                                    }),
+                                    /*#__PURE__*/ _jsx(MenuItem, {
+                                        value: "roundRobin",
+                                        children: 'Round robin — the next member of the CRM’s pool'
+                                    })
+                                ]
+                            }),
+                            step.roundRobin === true ? /*#__PURE__*/ _jsx(Typography, {
+                                variant: "caption",
+                                color: "text.secondary",
+                                children: 'The pool is set under CRM → Settings; an empty pool is a failed step.'
+                            }) : /*#__PURE__*/ _jsxs(_Fragment, {
+                                children: [
+                                    /*#__PURE__*/ _jsx(TextField, {
+                                        label: "Owner (email address or member id)",
+                                        value: step.ownerEmail || step.ownerUid || '',
+                                        onChange: (event)=>patch((previous)=>_extends({}, previous, {
+                                                    steps: previous.steps.map((s, index2)=>index2 === index ? _extends({}, s, memberRefFields('owner', event.target.value)) : s)
+                                                })),
+                                        size: "small",
+                                        sx: {
+                                            flex: 1
+                                        }
+                                    }),
+                                    /*#__PURE__*/ _jsx(Typography, {
+                                        variant: "caption",
+                                        color: "text.secondary",
+                                        children: 'Somebody on your team, matched against the roster when the automation runs.'
+                                    })
+                                ]
+                            })
+                        ]
+                    }) : step.type === 'createCrmTask' ? /*#__PURE__*/ _jsxs(_Fragment, {
+                        children: [
+                            /*#__PURE__*/ _jsx(TextField, _extends({
+                                label: "Title"
+                            }, placeholderState(step.title, 'Fill in the placeholder'), {
+                                value: (_step_title1 = step.title) != null ? _step_title1 : '',
+                                onChange: (event)=>patch((previous)=>_extends({}, previous, {
+                                            steps: previous.steps.map((s, index2)=>index2 === index ? _extends({}, s, {
+                                                    title: event.target.value
+                                                }) : s)
+                                        })),
+                                size: "small",
+                                sx: {
+                                    flex: 1
+                                }
+                            })),
+                            /*#__PURE__*/ _jsx(TextField, {
+                                select: true,
+                                label: "Kind",
+                                value: (_step_kind = step.kind) != null ? _step_kind : '',
+                                onChange: (event)=>patch((previous)=>_extends({}, previous, {
+                                            steps: previous.steps.map((s, index2)=>index2 === index && s.type === 'createCrmTask' ? _extends({}, s, {
+                                                    kind: event.target.value
+                                                }) : s)
+                                        })),
+                                size: "small",
+                                sx: {
+                                    minWidth: 120
+                                },
+                                children: CRM_TASK_KINDS.map((kind)=>/*#__PURE__*/ _jsx(MenuItem, {
+                                        value: kind,
+                                        children: CRM_TASK_KIND_LABELS[kind]
+                                    }, kind))
+                            }),
+                            /*#__PURE__*/ _jsx(TextField, {
+                                type: "number",
+                                label: "Due in (days)",
+                                value: (_step_dueInDays = step.dueInDays) != null ? _step_dueInDays : '',
+                                onChange: (event)=>patch((previous)=>_extends({}, previous, {
+                                            steps: previous.steps.map((s, index2)=>index2 === index ? _extends({}, s, {
+                                                    dueInDays: Math.min(CRM_TASK_MAX_DUE_DAYS, Math.max(0, Number(event.target.value)))
+                                                }) : s)
+                                        })),
+                                size: "small",
+                                sx: {
+                                    width: 130
+                                }
+                            }),
+                            /*#__PURE__*/ _jsx(TextField, {
+                                label: "Assignee (email address or member id, optional)",
+                                value: step.assigneeEmail || step.assigneeUid || '',
+                                onChange: (event)=>patch((previous)=>_extends({}, previous, {
+                                            steps: previous.steps.map((s, index2)=>index2 === index ? _extends({}, s, memberRefFields('assignee', event.target.value)) : s)
+                                        })),
+                                size: "small",
+                                sx: {
+                                    flex: 1
+                                },
+                                helperText: "Blank gives it to the contact’s owner."
+                            })
+                        ]
+                    }) : step.type === 'logCrmActivity' ? /*#__PURE__*/ _jsxs(_Fragment, {
+                        children: [
+                            /*#__PURE__*/ _jsx(TextField, {
+                                select: true,
+                                label: "Kind",
+                                value: (_step_kind1 = step.kind) != null ? _step_kind1 : '',
+                                onChange: (event)=>patch((previous)=>_extends({}, previous, {
+                                            steps: previous.steps.map((s, index2)=>index2 === index && s.type === 'logCrmActivity' ? _extends({}, s, {
+                                                    kind: event.target.value
+                                                }) : s)
+                                        })),
+                                size: "small",
+                                sx: {
+                                    minWidth: 120
+                                },
+                                children: CRM_ACTIVITY_KINDS.map((kind)=>/*#__PURE__*/ _jsx(MenuItem, {
+                                        value: kind,
+                                        children: CRM_ACTIVITY_KIND_LABELS[kind]
+                                    }, kind))
+                            }),
+                            /*#__PURE__*/ _jsx(TextField, _extends({
+                                label: "What happened"
+                            }, placeholderState(step.body, 'Fill in the placeholders'), {
+                                value: (_step_body1 = step.body) != null ? _step_body1 : '',
+                                onChange: (event)=>patch((previous)=>_extends({}, previous, {
+                                            steps: previous.steps.map((s, index2)=>index2 === index ? _extends({}, s, {
+                                                    body: event.target.value
+                                                }) : s)
+                                        })),
+                                size: "small",
+                                multiline: true,
+                                maxRows: 3,
+                                sx: {
+                                    flex: 1
+                                }
+                            }))
+                        ]
+                    }) : step.type === 'wait' || step.type === 'waitForEvent' ? /*#__PURE__*/ _jsxs(_Fragment, {
+                        children: [
+                            step.type === 'waitForEvent' ? /*#__PURE__*/ _jsx(TextField, {
+                                select: true,
+                                label: "Until",
+                                value: (_step_eventName1 = step.eventName) != null ? _step_eventName1 : '',
+                                onChange: (event)=>patch((previous)=>_extends({}, previous, {
+                                            steps: previous.steps.map((s, index2)=>index2 === index ? _extends({}, s, {
+                                                    eventName: event.target.value
+                                                }) : s)
+                                        })),
+                                size: "small",
+                                sx: {
+                                    minWidth: 170
+                                },
+                                children: HOST_EVENT_TYPES.map((option)=>/*#__PURE__*/ _jsx(MenuItem, {
+                                        value: option,
+                                        children: hostEventLabel(option)
+                                    }, option))
+                            }) : null,
+                            /*#__PURE__*/ _jsx(TextField, {
+                                select: true,
+                                label: step.type === 'waitForEvent' ? 'Give up after' : 'Wait for',
+                                value: String(step.type === 'waitForEvent' ? (_step_timeoutMinutes = step.timeoutMinutes) != null ? _step_timeoutMinutes : '' : (_step_delayMinutes = step.delayMinutes) != null ? _step_delayMinutes : ''),
+                                onChange: (event)=>patch((previous)=>_extends({}, previous, {
+                                            steps: previous.steps.map((s, index2)=>index2 === index ? s.type === 'waitForEvent' ? _extends({}, s, {
+                                                    timeoutMinutes: Number(event.target.value)
+                                                }) : _extends({}, s, {
+                                                    delayMinutes: Number(event.target.value)
+                                                }) : s)
+                                        })),
+                                size: "small",
+                                sx: {
+                                    minWidth: 150
+                                },
+                                children: FLOW_WAIT_PRESETS.map((option)=>/*#__PURE__*/ _jsx(MenuItem, {
+                                        value: option.minutes,
+                                        children: option.label
+                                    }, option.minutes))
+                            }),
+                            /*#__PURE__*/ _jsx(Typography, {
+                                variant: "caption",
+                                color: "text.secondary",
+                                children: step.type === 'waitForEvent' ? 'Continues as soon as this happens, or when the time is up.' : 'The rest of this automation runs later, on its own.'
+                            })
+                        ]
+                    }) : step.type === 'exitFlow' ? /*#__PURE__*/ _jsx(Typography, {
+                        variant: "caption",
+                        color: "text.secondary",
+                        children: 'Nothing after this step runs. Add a condition to make it a branch.'
+                    }) : null,
+                    /*#__PURE__*/ _jsx(IconButton, {
+                        size: "small",
+                        "aria-label": "remove step",
+                        onClick: ()=>patch((previous)=>_extends({}, previous, {
+                                    steps: previous.steps.filter((_, index2)=>index2 !== index)
+                                })),
+                        children: '×'
+                    })
+                ]
+            }),
+            fields ? null : /*#__PURE__*/ _jsxs(Stack, {
+                direction: "row",
+                spacing: 1,
+                sx: {
+                    alignItems: 'center',
+                    pl: 3
+                },
+                children: [
+                    /*#__PURE__*/ _jsxs(TextField, {
+                        select: true,
+                        label: "Only if",
+                        value: (_ref3 = (_step_when = step.when) == null ? void 0 : (_step_when_conditions = _step_when.conditions) == null ? void 0 : (_step_when_conditions_ = _step_when_conditions[0]) == null ? void 0 : _step_when_conditions_.op) != null ? _ref3 : '',
+                        onChange: (event)=>patch((previous)=>_extends({}, previous, {
+                                    steps: previous.steps.map((s, index2)=>{
+                                        var _ref, _ref1;
+                                        var _s_when_conditions_, _s_when_conditions, _s_when, _s_when_conditions_1, _s_when_conditions1, _s_when1;
+                                        return index2 === index ? _extends({}, s, {
+                                            when: event.target.value ? {
+                                                conditions: [
+                                                    {
+                                                        op: event.target.value,
+                                                        field: (_ref = (_s_when = s.when) == null ? void 0 : (_s_when_conditions = _s_when.conditions) == null ? void 0 : (_s_when_conditions_ = _s_when_conditions[0]) == null ? void 0 : _s_when_conditions_.field) != null ? _ref : '',
+                                                        value: (_ref1 = (_s_when1 = s.when) == null ? void 0 : (_s_when_conditions1 = _s_when1.conditions) == null ? void 0 : (_s_when_conditions_1 = _s_when_conditions1[0]) == null ? void 0 : _s_when_conditions_1.value) != null ? _ref1 : ''
+                                                    }
+                                                ]
+                                            } : null
+                                        }) : s;
+                                    })
+                                })),
+                        size: "small",
+                        sx: {
+                            minWidth: 170
+                        },
+                        children: [
+                            /*#__PURE__*/ _jsx(MenuItem, {
+                                value: "",
+                                children: 'Always run'
+                            }),
+                            /*#__PURE__*/ _jsx(MenuItem, {
+                                value: "notEmpty",
+                                children: 'Field is not empty'
+                            }),
+                            /*#__PURE__*/ _jsx(MenuItem, {
+                                value: "equals",
+                                children: 'Field equals'
+                            }),
+                            /*#__PURE__*/ _jsx(MenuItem, {
+                                value: "contains",
+                                children: 'Field contains'
+                            })
+                        ]
+                    }),
+                    ((_step_when1 = step.when) == null ? void 0 : (_step_when_conditions1 = _step_when1.conditions) == null ? void 0 : (_step_when_conditions_1 = _step_when_conditions1[0]) == null ? void 0 : _step_when_conditions_1.op) ? /*#__PURE__*/ _jsx(TextField, {
+                        label: "Field",
+                        placeholder: "orderId",
+                        value: (_step_when_conditions__field = step.when.conditions[0].field) != null ? _step_when_conditions__field : '',
+                        onChange: (event)=>patch((previous)=>_extends({}, previous, {
+                                    steps: previous.steps.map((s, index2)=>{
+                                        var _s_when_conditions, _s_when;
+                                        return index2 === index && ((_s_when = s.when) == null ? void 0 : (_s_when_conditions = _s_when.conditions) == null ? void 0 : _s_when_conditions[0]) ? _extends({}, s, {
+                                            when: {
+                                                conditions: [
+                                                    _extends({}, s.when.conditions[0], {
+                                                        field: event.target.value
+                                                    })
+                                                ]
+                                            }
+                                        }) : s;
+                                    })
+                                })),
+                        size: "small",
+                        sx: {
+                            flex: 1
+                        }
+                    }) : null,
+                    ((_step_when2 = step.when) == null ? void 0 : (_step_when_conditions2 = _step_when2.conditions) == null ? void 0 : (_step_when_conditions_2 = _step_when_conditions2[0]) == null ? void 0 : _step_when_conditions_2.op) === 'equals' || ((_step_when3 = step.when) == null ? void 0 : (_step_when_conditions3 = _step_when3.conditions) == null ? void 0 : (_step_when_conditions_3 = _step_when_conditions3[0]) == null ? void 0 : _step_when_conditions_3.op) === 'contains' ? /*#__PURE__*/ _jsx(TextField, _extends({
+                        label: "Value"
+                    }, placeholderState(step.when.conditions[0].value, 'Replace the placeholder with the value to match'), {
+                        value: (_step_when_conditions__value = step.when.conditions[0].value) != null ? _step_when_conditions__value : '',
+                        onChange: (event)=>patch((previous)=>_extends({}, previous, {
+                                    steps: previous.steps.map((s, index2)=>{
+                                        var _s_when_conditions, _s_when;
+                                        return index2 === index && ((_s_when = s.when) == null ? void 0 : (_s_when_conditions = _s_when.conditions) == null ? void 0 : _s_when_conditions[0]) ? _extends({}, s, {
+                                            when: {
+                                                conditions: [
+                                                    _extends({}, s.when.conditions[0], {
+                                                        value: event.target.value
+                                                    })
+                                                ]
+                                            }
+                                        }) : s;
+                                    })
+                                })),
+                        size: "small",
+                        sx: {
+                            flex: 1
+                        }
+                    })) : null
+                ]
+            })
+        ]
+    });
+}
+
+//# sourceMappingURL=automation-step-fields.component.js.map