@aglyn/plugins-marketing 1.0.0-beta.143

package/src/lib/components/host-experiments-card.component.js

@@ -0,0 +1,887 @@
+/**
+ * @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 { _ as _object_without_properties_loose } from "@swc/helpers/_/_object_without_properties_loose";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { checkEntitlement, createResourceUid, HOST_EVENT_TYPES, pluginDocsHelp, SITE_EVENT_TYPES } from "@aglyn/aglyn";
+import { compareVariants, summarizeVariantStats, validateExperiment } from "../model/index.js";
+import { mdiChartBar, mdiDeleteOutline, mdiPause, mdiPencilOutline, mdiPlay } from "@aglyn/shared-data-mdi";
+import { CardDisplay, MdiIcon, useConfirmationContext } from "@aglyn/shared-ui-jsx";
+import { ListPagination } from "@aglyn/shared-ui-jsx/components/list-pagination.component";
+import { ListRowActions, ListTable, listActionsColumn } from "@aglyn/shared-ui-jsx/components/list-table.component";
+import { ScrollTable } from "@aglyn/shared-ui-jsx/components/scroll-table.component";
+import { TABLE_ROW_HEIGHT } from "@aglyn/shared-ui-jsx/const/table-pagination";
+import { useSnackbar } from "@aglyn/shared-ui-snackstack";
+import { Timestamp } from "@aglyn/shared-util-timestamp";
+import { Alert, Button, Chip, Dialog, DialogActions, DialogContent, DialogTitle, FormControlLabel, MenuItem, Stack, Switch, TableBody, TableCell, TableHead, TableRow, TextField, Typography } from "@mui/material";
+import { collection, deleteDoc, doc, getDocs, limit, orderBy, query, setDoc } from "firebase/firestore";
+import { useState } from "react";
+import { useFirestore, useFirestoreCollection, useHostActivityLogger, usePagedCollection, writeGuardedBySeed } from "@aglyn/tenant-feature-instance";
+import { ExperimentResultZone, ExperimentVariantsZone, marketingExperimentVariantDrafts } from "./experiment-zones.js";
+const STATUS_COLORS = {
+    draft: 'default',
+    running: 'success',
+    paused: 'warning',
+    done: 'info'
+};
+/**
+ * Experiments manager (AGL-252): create screen/section/email A/B tests
+ * with weighted variants and a conversion goal; start/pause/finish them
+ * and read exposures/conversions per variant. Business tier
+ * (`ab-testing`).
+ */ export function HostExperimentsCard(props) {
+    var _ref, _ref1, _ref2, _ref3, _ref4, _ref5, _editor_$id, _editor_name, _editor_target, _ref6, _ref7, _ref8, _results_experiment_$id, _results_experiment_$id1;
+    var _editor_goal, _editor_goal1, _results_experiment_name;
+    const { hostId } = props;
+    const firestore = useFirestore();
+    const { org } = props;
+    const { enqueueSnackbar } = useSnackbar();
+    const { confirm } = useConfirmationContext();
+    const logActivity = useHostActivityLogger(hostId);
+    const entitled = checkEntitlement(org, 'abTesting');
+    const { rows: experimentRows, hasMore: hasMoreExperiments, page: experimentPage, setPage: setExperimentPage, pageSize: experimentPageSize, setPageSize: setExperimentPageSize, status: experimentsStatus, /**
+     * The rows this editor is seeded from are unconfirmed by the server
+     * (AGL-1358). Editing spreads a whole stored experiment into `editor`
+     * and writes all of it back, so `merge: true` protects nothing — every
+     * field is in the payload. `status` is the one that bites: it is
+     * otherwise only ever moved by the start/pause/finish controls below, so
+     * a cached seed can quietly restart a finished test, or stop a running
+     * one, along with reverting its variant weights and goal.
+     */ fromCache: experimentsFromCache } = usePagedCollection((pageLimit)=>query(collection(firestore, 'hosts', hostId, 'experiments'), /*
+         * Ordered by the server and paged (AGL-2501, AGL-2292).
+         *
+         * `limit(50)` with no `orderBy` is answered in DOCUMENT-ID order over
+         * ids from `createResourceUid()`, so the window was an arbitrary fifty
+         * that a `localeCompare` in the browser arranged into a convincing A-to-Z
+         * page. A site past fifty experiments could not reach the rest, and
+         * the ones missing left no gap on screen.
+         *
+         * `name` is safe to order on, checked against the writers rather than
+         * assumed: this card is the only thing that creates an experiment,
+         * `newExperiment()` seeds `name: ''` and `validateExperiment` refuses
+         * a save without one, the two server paths (`email-events`,
+         * `campaign-send`) only ever `update` an existing document, and
+         * `experiments` is not in `IMPORTABLE_FIELDS`. There is no writer that
+         * can produce a nameless experiment for `orderBy` to drop.
+         */ orderBy('name'), limit(pageLimit)), [
+        firestore,
+        hostId
+    ], {
+        idField: '$id'
+    });
+    /*
+   * Soft-deleted rows are dropped HERE and not in the query, which is why a
+   * page can render fewer rows than its size: Firestore cannot ask for
+   * documents that LACK a field, and a live experiment has no `deletedAt` at
+   * all. The rows are not re-sorted — the server already ordered them, and
+   * re-sorting a page of a name-ordered walk is the lie the old code told.
+   */ const experiments = experimentRows.filter((experiment)=>!experiment.deletedAt);
+    const { data: screenDocs } = useFirestoreCollection(()=>query(collection(firestore, 'hosts', hostId, 'screens'), limit(100)), [
+        firestore,
+        hostId
+    ], {
+        idField: '$id'
+    });
+    const screenOptions = [
+        ...screenDocs != null ? screenDocs : []
+    ].filter((screen)=>!screen.deletedAt).map((screen)=>{
+        var _ref, _screen_displayName;
+        return {
+            id: screen.$id,
+            name: (_ref = (_screen_displayName = screen.displayName) != null ? _screen_displayName : screen.name) != null ? _ref : screen.$id
+        };
+    }).sort((a, b)=>a.name.localeCompare(b.name));
+    const [editor, setEditor] = useState(null);
+    // Versions of the screen under test (AGL-253): variants pin one each.
+    const { data: versionDocs } = useFirestoreCollection(()=>{
+        var _ref;
+        return query(collection(firestore, 'hosts', hostId, 'screens', (_ref = editor == null ? void 0 : editor.screenId) != null ? _ref : '-none-', 'versions'), limit(50));
+    }, [
+        firestore,
+        hostId,
+        editor == null ? void 0 : editor.screenId
+    ], {
+        idField: '$id'
+    });
+    const versionOptions = [
+        ...versionDocs != null ? versionDocs : []
+    ].filter((version)=>!version.deletedAt).map((version)=>{
+        var _ref, _version_name;
+        return {
+            id: version.$id,
+            name: (_ref = (_version_name = version.name) != null ? _version_name : version.displayName) != null ? _ref : version.$id
+        };
+    }).sort((a, b)=>a.name.localeCompare(b.name));
+    const [results, setResults] = useState(null);
+    const patch = (partial)=>setEditor((previous)=>previous ? _extends({}, previous, partial) : previous);
+    /**
+   * What a widget in the variants zone proposes, put into the editor's own
+   * fields as unsaved changes. Only the variants the editor already holds are
+   * filled, in order: the test's shape — how many arms, their ids, their
+   * weights, the version each screen variant pins — is the person's, and a
+   * proposal that could add or drop an arm would be changing the test rather
+   * than writing copy for it. A field a widget left empty is left alone, so
+   * a proposal for an email's subject does not blank a body someone typed.
+   */ const proposeVariants = (proposed)=>setEditor((previous)=>previous ? _extends({}, previous, {
+                variants: previous.variants.map((variant, index)=>{
+                    const draft = proposed[index];
+                    if (!draft) return variant;
+                    return _extends({}, variant, draft.name ? {
+                        name: draft.name
+                    } : {}, draft.subject ? {
+                        subject: draft.subject
+                    } : {}, draft.body ? {
+                        body: draft.body
+                    } : {});
+                })
+            }) : previous);
+    const patchVariant = (index, partial)=>setEditor((previous)=>previous ? _extends({}, previous, {
+                variants: previous.variants.map((variant, index2)=>index2 === index ? _extends({}, variant, partial) : variant)
+            }) : previous);
+    const newExperiment = ()=>({
+            name: '',
+            status: 'draft',
+            target: 'screen',
+            variants: [
+                {
+                    id: 'a',
+                    name: 'A (control)',
+                    weight: 1
+                },
+                {
+                    id: 'b',
+                    name: 'B',
+                    weight: 1
+                }
+            ],
+            goal: {
+                event: 'formSubmission'
+            }
+        });
+    const handleSave = async ()=>{
+        var _editor_$id;
+        if (!editor) return;
+        const problem = validateExperiment(editor);
+        if (problem) {
+            return void enqueueSnackbar(problem, {
+                variant: 'warning',
+                persist: false
+            });
+        }
+        const id = (_editor_$id = editor.$id) != null ? _editor_$id : createResourceUid();
+        const { $id: _ignored } = editor, payload = _object_without_properties_loose(editor, [
+            "$id"
+        ]);
+        try {
+            /**
+       * Refuse an EDIT whose seed the server never confirmed (AGL-1358).
+       *
+       * `merge: true` is here so a cleared end date or auto-winner overwrites
+       * (AGL-273), not to protect untouched fields — there are none, because
+       * the payload is the whole stored row spread into `editor`. `status`
+       * and `winnerVariantId` ride along with it, and those are otherwise
+       * only moved by `setStatus`, so a cached seed can restart a test the
+       * owner finished or halt one that is splitting live traffic.
+       *
+       * Only the edit path. A NEW experiment comes from `newExperiment()` at
+       * a fresh uid and can overwrite nothing, and the first snapshot of any
+       * listener is `fromCache: true`, so guarding a create would refuse a
+       * save that was never unsafe.
+       *
+       * The guard WRAPS the write, and the activity log with it: a logged
+       * "Updated experiment" whose write never happened leaves the history
+       * disagreeing with the experiment it claims to explain.
+       */ const verdict = await writeGuardedBySeed({
+                subject: 'experiment',
+                unreadable: Boolean(editor.$id) && experimentsStatus === 'error',
+                fromCache: Boolean(editor.$id) && experimentsFromCache
+            }, async ()=>{
+                var _editor_endAtMs, _editor_autoWinner;
+                await setDoc(doc(firestore, 'hosts', hostId, 'experiments', id), _extends({}, JSON.parse(JSON.stringify(payload)), {
+                    // Clearing the end date / auto-winner must overwrite — a
+                    // merge-set keeps absent keys otherwise (AGL-273).
+                    endAtMs: (_editor_endAtMs = editor.endAtMs) != null ? _editor_endAtMs : null,
+                    autoWinner: (_editor_autoWinner = editor.autoWinner) != null ? _editor_autoWinner : null,
+                    updatedAt: Timestamp.now()
+                }, editor.$id ? {} : {
+                    createdAt: Timestamp.now()
+                }), {
+                    merge: true
+                });
+                logActivity(editor.$id ? 'Updated experiment' : 'Created experiment', {
+                    type: 'content',
+                    id,
+                    name: editor.name
+                });
+            });
+            // A refusal keeps the editor open with everything that was typed.
+            if (!verdict.ok) {
+                return void enqueueSnackbar(verdict.message, {
+                    variant: 'warning',
+                    persist: false
+                });
+            }
+            enqueueSnackbar('Experiment saved', {
+                variant: 'success',
+                persist: false
+            });
+            setEditor(null);
+        } catch (error) {
+            console.error(error);
+            enqueueSnackbar('An error has occurred', {
+                variant: 'error'
+            });
+        }
+    };
+    const setStatus = async (experiment, status, winnerVariantId)=>{
+        if (!experiment.$id) return;
+        // One running experiment per screen (AGL-265): the page runner only
+        // serves the first, so a second would silently never split traffic.
+        if (status === 'running' && experiment.screenId) {
+            const clash = experiments.find((candidate)=>candidate.$id !== experiment.$id && candidate.status === 'running' && candidate.screenId === experiment.screenId);
+            if (clash) {
+                return void enqueueSnackbar(`"${clash.name}" is already running on that screen — pause or ` + 'finish it first', {
+                    variant: 'warning',
+                    persist: false
+                });
+            }
+        }
+        await setDoc(doc(firestore, 'hosts', hostId, 'experiments', experiment.$id), _extends({
+            status
+        }, winnerVariantId ? {
+            winnerVariantId
+        } : {}, {
+            updatedAt: Timestamp.now()
+        }), {
+            merge: true
+        });
+        logActivity(`Experiment ${status}`, {
+            type: 'content',
+            id: experiment.$id,
+            name: experiment.name
+        });
+    };
+    const handleDelete = async (experiment)=>{
+        if (!experiment.$id) return;
+        const accepted = await confirm({
+            title: 'Delete experiment?',
+            description: `"${experiment.name}" and its results are removed.`,
+            confirmationText: 'Delete',
+            confirmationButtonProps: {
+                color: 'error'
+            }
+        })// Resolves with no value and rejects on cancel — gating on the
+        // resolved value alone made this always return (AGL-950).
+        .then(()=>true).catch(()=>false);
+        if (!accepted) return;
+        await deleteDoc(doc(firestore, 'hosts', hostId, 'experiments', experiment.$id));
+    };
+    const openResults = async (experiment)=>{
+        if (!experiment.$id) return;
+        const snapshot = await getDocs(collection(firestore, 'hosts', hostId, 'experiments', experiment.$id, 'stats'));
+        const stats = {};
+        snapshot.forEach((entry)=>{
+            stats[entry.id] = entry.data();
+        });
+        setResults({
+            experiment,
+            stats
+        });
+    };
+    /*
+   * One row per experiment. The row opens its results, the one thing every
+   * experiment has to show; starting, pausing, editing and deleting it are in
+   * the row's menu rather than a row of buttons one mis-click from each other.
+   */ const experimentActions = (experiment)=>[
+            ...experiment.status === 'running' ? [
+                {
+                    key: 'pause',
+                    label: 'Pause',
+                    icon: /*#__PURE__*/ _jsx(MdiIcon, {
+                        path: mdiPause.path,
+                        size: 0.8
+                    }),
+                    onClick: ()=>void setStatus(experiment, 'paused')
+                }
+            ] : experiment.status !== 'done' ? [
+                {
+                    key: 'start',
+                    label: 'Start',
+                    icon: /*#__PURE__*/ _jsx(MdiIcon, {
+                        path: mdiPlay.path,
+                        size: 0.8
+                    }),
+                    onClick: ()=>void setStatus(experiment, 'running')
+                }
+            ] : [],
+            {
+                key: 'edit',
+                label: 'Edit',
+                icon: /*#__PURE__*/ _jsx(MdiIcon, {
+                    path: mdiPencilOutline.path,
+                    size: 0.8
+                }),
+                onClick: ()=>setEditor(_extends({}, experiment))
+            },
+            {
+                key: 'delete',
+                label: 'Delete',
+                icon: /*#__PURE__*/ _jsx(MdiIcon, {
+                    path: mdiDeleteOutline.path,
+                    size: 0.8
+                }),
+                destructive: true,
+                onClick: ()=>void handleDelete(experiment)
+            }
+        ];
+    const experimentColumns = [
+        {
+            field: 'name',
+            headerName: 'Experiment',
+            flex: 1,
+            minWidth: 200
+        },
+        {
+            field: 'target',
+            headerName: 'Tests',
+            flex: 1,
+            minWidth: 200,
+            valueGetter: (_value, experiment)=>{
+                var _experiment_variants;
+                return `${experiment.target} · ${((_experiment_variants = experiment.variants) != null ? _experiment_variants : []).length} variants`;
+            }
+        },
+        {
+            field: 'status',
+            headerName: 'Status',
+            width: 130,
+            renderCell: ({ row: experiment })=>{
+                var _STATUS_COLORS_experiment_status;
+                return /*#__PURE__*/ _jsx(Chip, {
+                    size: "small",
+                    color: (_STATUS_COLORS_experiment_status = STATUS_COLORS[experiment.status]) != null ? _STATUS_COLORS_experiment_status : 'default',
+                    label: experiment.status
+                });
+            }
+        },
+        listActionsColumn((experiment)=>/*#__PURE__*/ _jsx(ListRowActions, {
+                label: experiment.name || 'this experiment',
+                quick: {
+                    icon: mdiChartBar.path,
+                    label: 'Results',
+                    onClick: ()=>void openResults(experiment)
+                },
+                items: experimentActions(experiment)
+            }))
+    ];
+    return /*#__PURE__*/ _jsxs(CardDisplay, {
+        header: "Experiments",
+        help: pluginDocsHelp('emailCampaigns', {
+            anchor: '#experiments'
+        }),
+        contentGutterX: true,
+        contentGutterY: true,
+        contentBordered: "all",
+        children: [
+            !entitled ? /*#__PURE__*/ _jsx(Alert, {
+                severity: "info",
+                children: 'A/B experiments are included in the Business plan — see ' + 'Billing to upgrade.'
+            }) : /*#__PURE__*/ _jsxs(Stack, {
+                spacing: 1.5,
+                children: [
+                    /*#__PURE__*/ _jsx(Typography, {
+                        variant: "body2",
+                        color: "text.secondary",
+                        children: 'Split traffic between variants of a screen, a section, or a ' + 'campaign email, and measure which one converts. Visitors ' + 'are assigned deterministically, so everyone keeps seeing ' + 'the same variant.'
+                    }),
+                    /*#__PURE__*/ _jsx(Button, {
+                        size: "small",
+                        variant: "contained",
+                        color: "primary",
+                        sx: {
+                            alignSelf: 'flex-start'
+                        },
+                        onClick: ()=>setEditor(newExperiment()),
+                        children: 'New experiment'
+                    }),
+                    experiments.length === 0 && !hasMoreExperiments ? null : /*#__PURE__*/ _jsxs(_Fragment, {
+                        children: [
+                            /*#__PURE__*/ _jsx(ListTable, {
+                                "aria-label": "Experiments",
+                                rows: experiments,
+                                columns: experimentColumns,
+                                rowHeight: TABLE_ROW_HEIGHT,
+                                onOpen: (_id, experiment)=>void openResults(experiment),
+                                // Paged by the footer below, so the grid must not also slice.
+                                hideFooter: true
+                            }),
+                            /*#__PURE__*/ _jsx(ListPagination, {
+                                page: experimentPage,
+                                pageSize: experimentPageSize,
+                                // The rows LEFT after the soft-delete filter, not the page the
+                                // server returned: the footer must describe what is on screen.
+                                rowCount: experiments.length,
+                                hasMore: hasMoreExperiments,
+                                onPageChange: setExperimentPage,
+                                onPageSizeChange: setExperimentPageSize
+                            })
+                        ]
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsxs(Dialog, {
+                open: Boolean(editor),
+                onClose: ()=>setEditor(null),
+                maxWidth: "sm",
+                fullWidth: true,
+                children: [
+                    /*#__PURE__*/ _jsx(DialogTitle, {
+                        children: (editor == null ? void 0 : editor.$id) ? 'Edit experiment' : 'New experiment'
+                    }),
+                    /*#__PURE__*/ _jsxs(DialogContent, {
+                        sx: {
+                            display: 'flex',
+                            flexDirection: 'column',
+                            gap: 1.5,
+                            pt: 1
+                        },
+                        children: [
+                            /*#__PURE__*/ _jsx(TextField, {
+                                size: "small",
+                                label: "Name",
+                                required: true,
+                                value: (_ref = editor == null ? void 0 : editor.name) != null ? _ref : '',
+                                onChange: (event)=>patch({
+                                        name: event.target.value
+                                    }),
+                                sx: {
+                                    mt: 1
+                                }
+                            }),
+                            /*#__PURE__*/ _jsxs(Stack, {
+                                direction: "row",
+                                spacing: 1,
+                                children: [
+                                    /*#__PURE__*/ _jsxs(TextField, {
+                                        select: true,
+                                        size: "small",
+                                        label: "Tests",
+                                        value: (_ref1 = editor == null ? void 0 : editor.target) != null ? _ref1 : 'screen',
+                                        onChange: (event)=>patch({
+                                                target: event.target.value
+                                            }),
+                                        sx: {
+                                            minWidth: 140
+                                        },
+                                        children: [
+                                            /*#__PURE__*/ _jsx(MenuItem, {
+                                                value: "screen",
+                                                children: 'A screen'
+                                            }),
+                                            /*#__PURE__*/ _jsx(MenuItem, {
+                                                value: "section",
+                                                children: 'A section'
+                                            }),
+                                            /*#__PURE__*/ _jsx(MenuItem, {
+                                                value: "email",
+                                                children: 'An email'
+                                            })
+                                        ]
+                                    }),
+                                    (editor == null ? void 0 : editor.target) !== 'email' ? /*#__PURE__*/ _jsx(TextField, {
+                                        select: true,
+                                        size: "small",
+                                        label: "Screen",
+                                        value: (_ref2 = editor == null ? void 0 : editor.screenId) != null ? _ref2 : '',
+                                        onChange: (event)=>patch({
+                                                screenId: event.target.value
+                                            }),
+                                        sx: {
+                                            flex: 1
+                                        },
+                                        children: screenOptions.map((option)=>/*#__PURE__*/ _jsx(MenuItem, {
+                                                value: option.id,
+                                                children: option.name
+                                            }, option.id))
+                                    }) : null
+                                ]
+                            }),
+                            (editor == null ? void 0 : editor.target) === 'section' ? /*#__PURE__*/ _jsx(TextField, {
+                                size: "small",
+                                label: "Element id",
+                                helperText: "The canvas element the variants swap (from the besigner)",
+                                value: (_ref3 = editor == null ? void 0 : editor.nodeId) != null ? _ref3 : '',
+                                onChange: (event)=>patch({
+                                        nodeId: event.target.value
+                                    })
+                            }) : null,
+                            /*#__PURE__*/ _jsx(TextField, {
+                                select: true,
+                                size: "small",
+                                label: "Conversion goal",
+                                value: (_ref4 = editor == null ? void 0 : (_editor_goal = editor.goal) == null ? void 0 : _editor_goal.event) != null ? _ref4 : 'formSubmission',
+                                onChange: (event)=>patch({
+                                        goal: _extends({}, editor == null ? void 0 : editor.goal, {
+                                            event: event.target.value
+                                        })
+                                    }),
+                                sx: {
+                                    maxWidth: 260
+                                },
+                                children: [
+                                    ...HOST_EVENT_TYPES,
+                                    ...SITE_EVENT_TYPES
+                                ].map((eventType)=>/*#__PURE__*/ _jsx(MenuItem, {
+                                        value: eventType,
+                                        children: eventType
+                                    }, eventType))
+                            }),
+                            /*#__PURE__*/ _jsxs(Stack, {
+                                direction: "row",
+                                spacing: 1,
+                                sx: {
+                                    alignItems: 'center',
+                                    flexWrap: 'wrap'
+                                },
+                                children: [
+                                    /*#__PURE__*/ _jsx(TextField, {
+                                        size: "small",
+                                        type: "datetime-local",
+                                        label: "Ends at (optional)",
+                                        slotProps: {
+                                            inputLabel: {
+                                                shrink: true
+                                            }
+                                        },
+                                        value: (editor == null ? void 0 : editor.endAtMs) ? new Date(editor.endAtMs - new Date().getTimezoneOffset() * 60000).toISOString().slice(0, 16) : '',
+                                        onChange: (event)=>{
+                                            const ms = event.target.value ? new Date(event.target.value).getTime() : undefined;
+                                            patch({
+                                                endAtMs: Number.isFinite(ms) ? ms : undefined
+                                            });
+                                        },
+                                        helperText: "Past this, visitors get the default"
+                                    }),
+                                    /*#__PURE__*/ _jsx(FormControlLabel, {
+                                        control: /*#__PURE__*/ _jsx(Switch, {
+                                            size: "small",
+                                            checked: Boolean(editor == null ? void 0 : editor.autoWinner),
+                                            onChange: (event)=>patch({
+                                                    autoWinner: event.target.checked ? {
+                                                        minExposures: 200,
+                                                        confidence: 0.95
+                                                    } : undefined
+                                                })
+                                        }),
+                                        label: "Auto-declare winner"
+                                    }),
+                                    (editor == null ? void 0 : editor.autoWinner) ? /*#__PURE__*/ _jsxs(_Fragment, {
+                                        children: [
+                                            /*#__PURE__*/ _jsx(TextField, {
+                                                size: "small",
+                                                type: "number",
+                                                label: "Min exposures / variant",
+                                                value: editor.autoWinner.minExposures,
+                                                onChange: (event)=>patch({
+                                                        autoWinner: _extends({}, editor.autoWinner, {
+                                                            minExposures: Number(event.target.value)
+                                                        })
+                                                    }),
+                                                sx: {
+                                                    width: 170
+                                                }
+                                            }),
+                                            /*#__PURE__*/ _jsxs(TextField, {
+                                                select: true,
+                                                size: "small",
+                                                label: "Confidence",
+                                                value: String(editor.autoWinner.confidence),
+                                                onChange: (event)=>patch({
+                                                        autoWinner: _extends({}, editor.autoWinner, {
+                                                            confidence: Number(event.target.value)
+                                                        })
+                                                    }),
+                                                sx: {
+                                                    width: 120
+                                                },
+                                                children: [
+                                                    /*#__PURE__*/ _jsx(MenuItem, {
+                                                        value: "0.9",
+                                                        children: '90%'
+                                                    }),
+                                                    /*#__PURE__*/ _jsx(MenuItem, {
+                                                        value: "0.95",
+                                                        children: '95%'
+                                                    }),
+                                                    /*#__PURE__*/ _jsx(MenuItem, {
+                                                        value: "0.99",
+                                                        children: '99%'
+                                                    })
+                                                ]
+                                            })
+                                        ]
+                                    }) : null
+                                ]
+                            }),
+                            /*#__PURE__*/ _jsx(Typography, {
+                                variant: "subtitle2",
+                                children: 'Variants'
+                            }),
+                            ((_ref5 = editor == null ? void 0 : editor.variants) != null ? _ref5 : []).map((variant, index)=>{
+                                var _variant_name, _variant_weight, _variant_versionId, _variant_subject, _variant_body;
+                                return /*#__PURE__*/ _jsxs(Stack, {
+                                    spacing: 1,
+                                    children: [
+                                        /*#__PURE__*/ _jsxs(Stack, {
+                                            direction: "row",
+                                            spacing: 1,
+                                            children: [
+                                                /*#__PURE__*/ _jsx(TextField, {
+                                                    size: "small",
+                                                    label: `Variant ${variant.id.toUpperCase()}`,
+                                                    value: (_variant_name = variant.name) != null ? _variant_name : '',
+                                                    onChange: (event)=>patchVariant(index, {
+                                                            name: event.target.value
+                                                        }),
+                                                    sx: {
+                                                        flex: 1
+                                                    }
+                                                }),
+                                                /*#__PURE__*/ _jsx(TextField, {
+                                                    size: "small",
+                                                    type: "number",
+                                                    label: "Weight",
+                                                    value: (_variant_weight = variant.weight) != null ? _variant_weight : 1,
+                                                    onChange: (event)=>patchVariant(index, {
+                                                            weight: Number(event.target.value)
+                                                        }),
+                                                    sx: {
+                                                        width: 100
+                                                    }
+                                                }),
+                                                (editor == null ? void 0 : editor.target) !== 'email' ? // Screen/section variants pin a screen version
+                                                // (AGL-253); empty = the published version.
+                                                /*#__PURE__*/ _jsxs(TextField, {
+                                                    select: true,
+                                                    size: "small",
+                                                    label: "Version",
+                                                    value: (_variant_versionId = variant.versionId) != null ? _variant_versionId : '',
+                                                    onChange: (event)=>patchVariant(index, {
+                                                            versionId: event.target.value
+                                                        }),
+                                                    sx: {
+                                                        minWidth: 160
+                                                    },
+                                                    children: [
+                                                        /*#__PURE__*/ _jsx(MenuItem, {
+                                                            value: "",
+                                                            children: 'Published (control)'
+                                                        }),
+                                                        versionOptions.map((option)=>/*#__PURE__*/ _jsx(MenuItem, {
+                                                                value: option.id,
+                                                                children: option.name
+                                                            }, option.id))
+                                                    ]
+                                                }) : null
+                                            ]
+                                        }),
+                                        (editor == null ? void 0 : editor.target) === 'email' ? // Email variants override the campaign copy (AGL-255).
+                                        /*#__PURE__*/ _jsxs(Stack, {
+                                            direction: "row",
+                                            spacing: 1,
+                                            children: [
+                                                /*#__PURE__*/ _jsx(TextField, {
+                                                    size: "small",
+                                                    label: "Subject override",
+                                                    value: (_variant_subject = variant.subject) != null ? _variant_subject : '',
+                                                    onChange: (event)=>patchVariant(index, {
+                                                            subject: event.target.value
+                                                        }),
+                                                    sx: {
+                                                        width: 220
+                                                    }
+                                                }),
+                                                /*#__PURE__*/ _jsx(TextField, {
+                                                    size: "small",
+                                                    label: "Body override",
+                                                    value: (_variant_body = variant.body) != null ? _variant_body : '',
+                                                    onChange: (event)=>patchVariant(index, {
+                                                            body: event.target.value
+                                                        }),
+                                                    multiline: true,
+                                                    maxRows: 3,
+                                                    sx: {
+                                                        flex: 1
+                                                    }
+                                                })
+                                            ]
+                                        }) : null
+                                    ]
+                                }, variant.id);
+                            }),
+                            editor ? /*#__PURE__*/ _jsx(ExperimentVariantsZone, {
+                                hostId: hostId,
+                                experimentId: (_editor_$id = editor.$id) != null ? _editor_$id : '',
+                                name: (_editor_name = editor.name) != null ? _editor_name : '',
+                                target: (_editor_target = editor.target) != null ? _editor_target : 'screen',
+                                goal: (_ref6 = (_editor_goal1 = editor.goal) == null ? void 0 : _editor_goal1.event) != null ? _ref6 : '',
+                                variants: marketingExperimentVariantDrafts(editor.variants),
+                                proposeVariants: proposeVariants
+                            }) : null
+                        ]
+                    }),
+                    /*#__PURE__*/ _jsxs(DialogActions, {
+                        children: [
+                            /*#__PURE__*/ _jsx(Button, {
+                                color: "inherit",
+                                onClick: ()=>setEditor(null),
+                                children: 'Cancel'
+                            }),
+                            /*#__PURE__*/ _jsx(Button, {
+                                variant: "contained",
+                                color: "primary",
+                                onClick: ()=>void handleSave(),
+                                children: 'Save'
+                            })
+                        ]
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsxs(Dialog, {
+                open: Boolean(results),
+                onClose: ()=>setResults(null),
+                maxWidth: "xs",
+                fullWidth: true,
+                children: [
+                    /*#__PURE__*/ _jsxs(DialogTitle, {
+                        children: [
+                            `Results — ${(_ref7 = results == null ? void 0 : results.experiment.name) != null ? _ref7 : ''}`,
+                            (results == null ? void 0 : results.experiment.autoCompleted) ? // The track pipeline decided this one (AGL-273).
+                            /*#__PURE__*/ _jsx(Chip, {
+                                size: "small",
+                                color: "success",
+                                label: "Auto-completed",
+                                sx: {
+                                    ml: 1
+                                }
+                            }) : null
+                        ]
+                    }),
+                    /*#__PURE__*/ _jsxs(DialogContent, {
+                        children: [
+                            /*#__PURE__*/ _jsxs(ScrollTable, {
+                                size: "small",
+                                children: [
+                                    /*#__PURE__*/ _jsx(TableHead, {
+                                        children: /*#__PURE__*/ _jsxs(TableRow, {
+                                            children: [
+                                                /*#__PURE__*/ _jsx(TableCell, {
+                                                    children: 'Variant'
+                                                }),
+                                                /*#__PURE__*/ _jsx(TableCell, {
+                                                    children: 'Exposures'
+                                                }),
+                                                /*#__PURE__*/ _jsx(TableCell, {
+                                                    children: 'Conversions'
+                                                }),
+                                                /*#__PURE__*/ _jsx(TableCell, {
+                                                    children: 'Rate'
+                                                }),
+                                                /*#__PURE__*/ _jsx(TableCell, {
+                                                    children: 'vs control'
+                                                }),
+                                                /*#__PURE__*/ _jsx(TableCell, {
+                                                    align: "right"
+                                                })
+                                            ]
+                                        })
+                                    }),
+                                    /*#__PURE__*/ _jsx(TableBody, {
+                                        children: ((_ref8 = results == null ? void 0 : results.experiment.variants) != null ? _ref8 : []).map((variant, index)=>{
+                                            var _ref, _ref1, _ref2, _ref3, _variant_name;
+                                            const summary = summarizeVariantStats((_ref = results == null ? void 0 : results.stats[variant.id]) != null ? _ref : {});
+                                            // Lift + z-test confidence vs the first variant (AGL-265).
+                                            const control = results == null ? void 0 : results.experiment.variants[0];
+                                            const comparison = index > 0 && control ? compareVariants((_ref1 = results == null ? void 0 : results.stats[control.id]) != null ? _ref1 : {}, (_ref2 = results == null ? void 0 : results.stats[variant.id]) != null ? _ref2 : {}) : null;
+                                            const leader = summary.exposures > 0 && ((_ref3 = results == null ? void 0 : results.experiment.variants) != null ? _ref3 : []).every((other)=>{
+                                                var _ref;
+                                                const otherSummary = summarizeVariantStats((_ref = results == null ? void 0 : results.stats[other.id]) != null ? _ref : {});
+                                                return summary.rate >= otherSummary.rate;
+                                            });
+                                            return /*#__PURE__*/ _jsxs(TableRow, {
+                                                selected: leader,
+                                                children: [
+                                                    /*#__PURE__*/ _jsxs(TableCell, {
+                                                        children: [
+                                                            (_variant_name = variant.name) != null ? _variant_name : variant.id.toUpperCase(),
+                                                            (results == null ? void 0 : results.experiment.winnerVariantId) === variant.id ? ' 🏆' : leader ? ' ▲' : ''
+                                                        ]
+                                                    }),
+                                                    /*#__PURE__*/ _jsx(TableCell, {
+                                                        children: summary.exposures
+                                                    }),
+                                                    /*#__PURE__*/ _jsx(TableCell, {
+                                                        children: summary.conversions
+                                                    }),
+                                                    /*#__PURE__*/ _jsx(TableCell, {
+                                                        children: `${(summary.rate * 100).toFixed(1)}%`
+                                                    }),
+                                                    /*#__PURE__*/ _jsx(TableCell, {
+                                                        children: comparison ? `${comparison.lift != null ? `${comparison.lift >= 0 ? '+' : ''}${(comparison.lift * 100).toFixed(0)}%` : '—'}${comparison.confidence != null ? ` · ${(comparison.confidence * 100).toFixed(0)}% conf.` : ' · needs data'}` : 'control'
+                                                    }),
+                                                    /*#__PURE__*/ _jsx(TableCell, {
+                                                        align: "right",
+                                                        children: (results == null ? void 0 : results.experiment.status) !== 'done' ? /*#__PURE__*/ _jsx(Button, {
+                                                            size: "small",
+                                                            onClick: ()=>{
+                                                                if (results) {
+                                                                    void setStatus(results.experiment, 'done', variant.id);
+                                                                    setResults(null);
+                                                                }
+                                                            },
+                                                            children: 'Pick winner'
+                                                        }) : null
+                                                    })
+                                                ]
+                                            }, variant.id);
+                                        })
+                                    })
+                                ]
+                            }),
+                            results ? /*#__PURE__*/ _jsx(ExperimentResultZone, {
+                                hostId: hostId,
+                                experimentId: (_results_experiment_$id = results.experiment.$id) != null ? _results_experiment_$id : '',
+                                test: ((_results_experiment_name = results.experiment.name) == null ? void 0 : _results_experiment_name.trim()) || ((_results_experiment_$id1 = results.experiment.$id) != null ? _results_experiment_$id1 : '')
+                            }) : null
+                        ]
+                    }),
+                    /*#__PURE__*/ _jsx(DialogActions, {
+                        children: /*#__PURE__*/ _jsx(Button, {
+                            color: "inherit",
+                            onClick: ()=>setResults(null),
+                            children: 'Close'
+                        })
+                    })
+                ]
+            })
+        ]
+    });
+}
+HostExperimentsCard.displayName = 'HostExperimentsCard';
+export default HostExperimentsCard;
+
+//# sourceMappingURL=host-experiments-card.component.js.map