@aglyn/plugins-marketing 1.0.0-beta.143

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

@@ -0,0 +1,783 @@
+/**
+ * @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, pluginDocsHelp } from "@aglyn/aglyn";
+import { overlayActiveAt } from "../model/index.js";
+import { mdiChevronDown, mdiChevronUp } from "@aglyn/shared-data-mdi";
+import { CardDisplay, MdiIcon, useConfirmationContext } from "@aglyn/shared-ui-jsx";
+import { ScrollTable } from "@aglyn/shared-ui-jsx/components/scroll-table.component";
+import { useSnackbar } from "@aglyn/shared-ui-snackstack";
+import { Timestamp } from "@aglyn/shared-util-timestamp";
+import { Alert, Button, Chip, IconButton, Dialog, DialogActions, DialogContent, DialogTitle, MenuItem, Stack, Switch, TableBody, TableCell, TableHead, TableRow, TextField, Typography } from "@mui/material";
+import { collection, deleteDoc, doc, limit, orderBy, query, setDoc } from "firebase/firestore";
+import { useState } from "react";
+import { useFirestore, useFirestoreCollection, useHostActivityLogger, writeGuardedBySeed } from "@aglyn/tenant-feature-instance";
+import { OVERLAY_COPY_HELPER_TEXT, shownAsTypedHelperText, useOverlayCopyEditor } from "./use-overlay-copy-editor.js";
+/**
+ * How many overlays the card reads.
+ *
+ * A ceiling rather than a page size — see the query, which explains why this
+ * one list is deliberately not paginated. Generous on purpose: a site runs a
+ * handful of banners and popups, and the number exists to bound a pathological
+ * collection rather than to bound a normal one.
+ */ const CEILING = 50;
+const EMPTY_BAR = {
+    kind: 'bar',
+    enabled: true,
+    bar: {
+        dismissible: true
+    }
+};
+const EMPTY_POPUP = {
+    kind: 'popup',
+    enabled: true,
+    popup: {
+        trigger: 'delay',
+        triggerValue: 3,
+        frequencyDays: 7
+    }
+};
+function toDatetimeLocal(ms) {
+    if (!ms) return '';
+    const date = new Date(ms);
+    const pad = (value)=>String(value).padStart(2, '0');
+    return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-` + `${pad(date.getDate())}T${pad(date.getHours())}:${pad(date.getMinutes())}`;
+}
+function fromDatetimeLocal(value) {
+    if (!value) return undefined;
+    const ms = new Date(value).getTime();
+    return Number.isFinite(ms) ? ms : undefined;
+}
+function parsePatterns(value) {
+    return value.split(',').map((pattern)=>pattern.trim()).filter(Boolean);
+}
+/**
+ * Marketing hub overlays manager (AGL-251): multiple announcement bars
+ * and popups at `hosts/{hostId}/overlays`, each with a schedule window
+ * and page targeting; the tenant render shows the first active match per
+ * kind (overlay docs win over the legacy single bar/popup fields). A bar's
+ * text and a popup's headline and body are edited through
+ * `useOverlayCopyEditor`, like the single bar and popup cards (AGL-2885).
+ */ export function HostOverlaysCard(props) {
+    var _ref, _editor_name, _shownAsTypedHelperText, _ref1, _ref2, _ref3, _shownAsTypedHelperText1, _ref4, _ref5, _ref6, _ref7, _ref8, _ref9, _editor_pathPatterns, _editor_excludePathPatterns;
+    var _editor_bar, _editor_popup, _editor_popup1, _editor_bar1, _editor_popup2, _editor_popup3, _editor_bar2, _editor_bar3, _editor_bar4, _editor_bar5, _editor_popup4, _editor_popup5, _editor_popup6, _editor_popup7, _editor_popup8, _editor_popup9, _editor_popup10, _editor_popup11, _editor_popup12, _editor_popup13, _editor_bar6, _editor_popup14, _editor_popup15;
+    const { hostId } = props;
+    const firestore = useFirestore();
+    const { org } = props;
+    const { enqueueSnackbar } = useSnackbar();
+    const { confirm } = useConfirmationContext();
+    const logActivity = useHostActivityLogger(hostId);
+    const entitled = checkEntitlement(org, 'marketingOverlays');
+    const { data: overlayDocs, status: overlaysStatus, /**
+     * The overlay rows the editor is seeded from are unconfirmed by the
+     * server (AGL-1358). Editing one spreads the whole stored row into
+     * `editor` and writes it back with NO options argument at all — a full
+     * document replace — so a cached seed reverts every field nobody
+     * touched. Including `stats`, the lifetime impression/click/dismissal
+     * counters the org beacon increments: a save here would roll live
+     * engagement numbers back to whenever the snapshot was taken.
+     */ fromCache: overlaysFromCache } = useFirestoreCollection(()=>query(collection(firestore, 'hosts', hostId, 'overlays'), /*
+         * ORDERED AND CEILINGED, deliberately not paged (AGL-2501).
+         *
+         * ## Why the read is ordered
+         *
+         * `limit(50)` alone is answered in DOCUMENT-ID order over ids from
+         * `createResourceUid()`, so the window was a pseudo-random fifty that
+         * the client sort below arranged into a believable precedence list.
+         * `name` is the one field every overlay carries: `handleSave` writes
+         * `name: (…).trim() || null` on every save, and it is the only writer
+         * that CREATES one — the analytics beacon uses `update()` precisely so
+         * a stale page cannot mint a stats-only stray, and `overlays` is not
+         * in `IMPORTABLE_FIELDS`, so no restore path makes one either. A null
+         * name still matches an `orderBy`; an ABSENT field would not.
+         *
+         * ## Why this list is not paged
+         *
+         * The row order IS the feature: the first enabled overlay of each kind
+         * is the one a visitor sees (AGL-270), and the arrows reorder by
+         * swapping `order` with the ADJACENT row. A page boundary separates a
+         * row from the neighbor it would swap with, so the eleventh overlay
+         * could never be moved into tenth place — the same reason the console's
+         * screen tree and starter bundles are ceilinged rather than paged.
+         *
+         * `orderBy('order')` is not an option either, and that is what makes
+         * the precedence sort a client-side one: `EMPTY_BAR` and `EMPTY_POPUP`
+         * carry no `order`, and only `handleMove` ever writes one, so ordering
+         * the query on it would hide every overlay nobody has reordered rather
+         * than mis-sorting it. The client sort holds the WHOLE window, which is
+         * what makes sorting it here honest.
+         */ orderBy('name'), // One past the ceiling, so "there are more overlays than these" is a
+        // fact rather than a guess from `length === 50`.
+        limit(CEILING + 1)), [
+        firestore,
+        hostId
+    ], {
+        idField: '$id'
+    });
+    const truncated = ((_ref = overlayDocs == null ? void 0 : overlayDocs.length) != null ? _ref : 0) > CEILING;
+    const overlays = [
+        ...overlayDocs != null ? overlayDocs : []
+    ].slice(0, CEILING).sort((a, b)=>{
+        var _a_order, _b_order, _a_name, _b_name;
+        return ((_a_order = a.order) != null ? _a_order : 0) - ((_b_order = b.order) != null ? _b_order : 0) || String((_a_name = a.name) != null ? _a_name : '').localeCompare(String((_b_name = b.name) != null ? _b_name : ''));
+    });
+    const [editor, setEditor] = useState(null);
+    // The editor's copy is held in its stored form; the fields show it as typed.
+    const copy = useOverlayCopyEditor({
+        hostId,
+        usesTokens: entitled && [
+            editor == null ? void 0 : (_editor_bar = editor.bar) == null ? void 0 : _editor_bar.text,
+            editor == null ? void 0 : (_editor_popup = editor.popup) == null ? void 0 : _editor_popup.headline,
+            editor == null ? void 0 : (_editor_popup1 = editor.popup) == null ? void 0 : _editor_popup1.body
+        ].some((text)=>text == null ? void 0 : text.includes('{{'))
+    });
+    const barTextShownAsTyped = copy.shownAsTyped(editor == null ? void 0 : (_editor_bar1 = editor.bar) == null ? void 0 : _editor_bar1.text);
+    const headlineShownAsTyped = copy.shownAsTyped(editor == null ? void 0 : (_editor_popup2 = editor.popup) == null ? void 0 : _editor_popup2.headline);
+    const bodyShownAsTyped = copy.shownAsTyped(editor == null ? void 0 : (_editor_popup3 = editor.popup) == null ? void 0 : _editor_popup3.body);
+    const patch = (partial)=>setEditor((previous)=>previous ? _extends({}, previous, partial) : previous);
+    const patchBar = (partial)=>setEditor((previous)=>{
+            var _previous_bar;
+            return previous ? _extends({}, previous, {
+                bar: _extends({}, (_previous_bar = previous.bar) != null ? _previous_bar : {}, partial)
+            }) : previous;
+        });
+    const patchPopup = (partial)=>setEditor((previous)=>{
+            var _previous_popup;
+            return previous ? _extends({}, previous, {
+                popup: _extends({}, (_previous_popup = previous.popup) != null ? _previous_popup : {}, partial)
+            }) : previous;
+        });
+    const handleSave = async ()=>{
+        var _editor_$id;
+        var _editor_bar_text, _editor_bar, _editor_popup_body, _editor_popup;
+        if (!editor) return;
+        if (editor.kind === 'bar' && !((_editor_bar = editor.bar) == null ? void 0 : (_editor_bar_text = _editor_bar.text) == null ? void 0 : _editor_bar_text.trim())) {
+            return void enqueueSnackbar('Enter the bar text', {
+                variant: 'warning',
+                persist: false
+            });
+        }
+        if (editor.kind === 'popup' && !((_editor_popup = editor.popup) == null ? void 0 : (_editor_popup_body = _editor_popup.body) == null ? void 0 : _editor_popup_body.trim())) {
+            return void enqueueSnackbar('Enter the popup body', {
+                variant: 'warning',
+                persist: false
+            });
+        }
+        const id = (_editor_$id = editor.$id) != null ? _editor_$id : createResourceUid();
+        const { $id: _ignored, createdAt: _createdAt, updatedAt: _updatedAt } = editor, payload = _object_without_properties_loose(editor, [
+            "$id",
+            "createdAt",
+            "updatedAt"
+        ]);
+        try {
+            var _editor_name;
+            // JSON round-trip strips undefined values Firestore rejects. The copy
+            // is stored again here, for a name typed before the variables arrived.
+            const cleaned = JSON.parse(JSON.stringify(_extends({}, payload, payload.bar ? {
+                bar: _extends({}, payload.bar, {
+                    text: copy.stored(payload.bar.text)
+                })
+            } : {}, payload.popup ? {
+                popup: _extends({}, payload.popup, {
+                    headline: copy.stored(payload.popup.headline),
+                    body: copy.stored(payload.popup.body)
+                })
+            } : {}, {
+                name: ((_editor_name = editor.name) != null ? _editor_name : '').trim() || null
+            })));
+            /**
+       * Refuse an EDIT whose seed the server never confirmed (AGL-1358).
+       *
+       * This write has no options argument, so it is a full document replace
+       * of a payload copied wholesale off the listener — `merge` would not
+       * have helped anyway, since every field is present. The activity log
+       * is inside the guard too: a logged "Updated overlay" whose write never
+       * happened is worse than neither, because the history then disagrees
+       * with the overlay it claims to explain.
+       *
+       * Only the edit path. A NEW overlay starts from `EMPTY_BAR`/
+       * `EMPTY_POPUP` 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: an early return is a shape you can keep
+       * while losing the protection.
+       */ const verdict = await writeGuardedBySeed({
+                subject: 'overlay',
+                unreadable: Boolean(editor.$id) && overlaysStatus === 'error',
+                fromCache: Boolean(editor.$id) && overlaysFromCache
+            }, async ()=>{
+                await setDoc(doc(firestore, 'hosts', hostId, 'overlays', id), _extends({}, cleaned, {
+                    updatedAt: Timestamp.now()
+                }, editor.$id ? {} : {
+                    createdAt: Timestamp.now()
+                }));
+                logActivity(editor.$id ? 'Updated overlay' : 'Created overlay', _extends({
+                    type: 'content',
+                    id
+                }, editor.name ? {
+                    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('Overlay saved', {
+                variant: 'success',
+                persist: false
+            });
+            setEditor(null);
+        } catch (error) {
+            console.error(error);
+            enqueueSnackbar('An error has occurred', {
+                variant: 'error'
+            });
+        }
+    };
+    const handleDelete = async (overlay)=>{
+        var _overlay_name;
+        if (!overlay.$id) return;
+        const confirmed = await confirm({
+            title: 'Delete overlay?',
+            description: `"${(_overlay_name = overlay.name) != null ? _overlay_name : overlay.$id}" stops showing immediately.`,
+            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 (!confirmed) return;
+        await deleteDoc(doc(firestore, 'hosts', hostId, 'overlays', overlay.$id));
+        enqueueSnackbar('Overlay deleted', {
+            variant: 'success',
+            persist: false
+        });
+        logActivity('Deleted overlay', _extends({
+            type: 'content',
+            id: overlay.$id
+        }, overlay.name ? {
+            name: overlay.name
+        } : {}));
+    };
+    // Ordering (AGL-270): the first active overlay per kind wins, so the
+    // list order is meaningful — swap `order` with the neighbor.
+    const handleMove = async (index, direction)=>{
+        var _current_order, _neighbor_order;
+        const neighbor = overlays[index + direction];
+        const current = overlays[index];
+        if (!(neighbor == null ? void 0 : neighbor.$id) || !(current == null ? void 0 : current.$id)) return;
+        const currentOrder = (_current_order = current.order) != null ? _current_order : index;
+        const neighborOrder = (_neighbor_order = neighbor.order) != null ? _neighbor_order : index + direction;
+        await Promise.all([
+            setDoc(doc(firestore, 'hosts', hostId, 'overlays', current.$id), {
+                order: neighborOrder === currentOrder ? neighborOrder + direction : neighborOrder
+            }, {
+                merge: true
+            }),
+            setDoc(doc(firestore, 'hosts', hostId, 'overlays', neighbor.$id), {
+                order: currentOrder
+            }, {
+                merge: true
+            })
+        ]).catch(console.error);
+    };
+    const handleToggle = async (overlay)=>{
+        if (!overlay.$id) return;
+        await setDoc(doc(firestore, 'hosts', hostId, 'overlays', overlay.$id), {
+            enabled: overlay.enabled === false
+        }, {
+            merge: true
+        });
+    };
+    // Engagement (AGL-271): lifetime counters the org beacon increments.
+    const statsLabel = (overlay)=>{
+        var _overlay_stats, _stats_impressions, _stats_clicks, _stats_dismissals;
+        const stats = (_overlay_stats = overlay.stats) != null ? _overlay_stats : {};
+        const impressions = (_stats_impressions = stats.impressions) != null ? _stats_impressions : 0;
+        const clicks = (_stats_clicks = stats.clicks) != null ? _stats_clicks : 0;
+        const dismissals = (_stats_dismissals = stats.dismissals) != null ? _stats_dismissals : 0;
+        if (!impressions && !clicks && !dismissals) return '—';
+        const parts = [
+            `${impressions.toLocaleString()} views`
+        ];
+        if (clicks) parts.push(`${clicks.toLocaleString()} clicks`);
+        if (dismissals) parts.push(`${dismissals.toLocaleString()} dismissed`);
+        return parts.join(' · ');
+    };
+    const statusChip = (overlay)=>{
+        if (overlay.enabled === false) {
+            return /*#__PURE__*/ _jsx(Chip, {
+                size: "small",
+                label: "Off"
+            });
+        }
+        if (!overlayActiveAt(overlay, Date.now())) {
+            return /*#__PURE__*/ _jsx(Chip, {
+                size: "small",
+                color: "info",
+                label: "Scheduled"
+            });
+        }
+        return /*#__PURE__*/ _jsx(Chip, {
+            size: "small",
+            color: "success",
+            label: "Live"
+        });
+    };
+    return /*#__PURE__*/ _jsxs(CardDisplay, {
+        header: "Announcement bars & popups",
+        help: pluginDocsHelp('marketingOverlays', {
+            anchor: '#frequency',
+            excerpt: 'Every bar and popup on this site, with its schedule, page ' + 'targeting, and how often a visitor sees it again.'
+        }),
+        contentGutterX: true,
+        contentGutterY: true,
+        contentBordered: "all",
+        children: [
+            !entitled ? /*#__PURE__*/ _jsx(Alert, {
+                severity: "info",
+                children: 'Announcement bars and popups are included from the Starter ' + 'plan — see Billing to upgrade.'
+            }) : /*#__PURE__*/ _jsxs(Stack, {
+                spacing: 2,
+                children: [
+                    /*#__PURE__*/ _jsx(Typography, {
+                        variant: "body2",
+                        color: "text.secondary",
+                        children: 'Configure as many bars and popups as you need, each with its ' + 'own schedule and page targeting. When several match a page, ' + 'the first per kind shows.'
+                    }),
+                    /*#__PURE__*/ _jsxs(Stack, {
+                        direction: "row",
+                        spacing: 1,
+                        children: [
+                            /*#__PURE__*/ _jsx(Button, {
+                                size: "small",
+                                color: "primary",
+                                variant: "contained",
+                                onClick: ()=>setEditor(_extends({}, EMPTY_BAR)),
+                                children: 'New bar'
+                            }),
+                            /*#__PURE__*/ _jsx(Button, {
+                                size: "small",
+                                color: "primary",
+                                variant: "contained",
+                                onClick: ()=>setEditor(_extends({}, EMPTY_POPUP)),
+                                children: 'New popup'
+                            })
+                        ]
+                    }),
+                    truncated ? /*#__PURE__*/ _jsx(Alert, {
+                        severity: "info",
+                        children: `Showing ${CEILING} overlays, ordered by name. This site has ` + 'more than that — delete the ones you have finished with, or ' + 'the ones below the ceiling cannot be reordered against them.'
+                    }) : null,
+                    overlays.length === 0 ? /*#__PURE__*/ _jsx(Typography, {
+                        variant: "body2",
+                        color: "text.secondary",
+                        children: 'No overlays yet — the single announcement bar and popup ' + 'below keep working as your default surfaces.'
+                    }) : /*#__PURE__*/ _jsxs(ScrollTable, {
+                        size: "small",
+                        children: [
+                            /*#__PURE__*/ _jsx(TableHead, {
+                                children: /*#__PURE__*/ _jsxs(TableRow, {
+                                    children: [
+                                        /*#__PURE__*/ _jsx(TableCell, {
+                                            children: 'Name'
+                                        }),
+                                        /*#__PURE__*/ _jsx(TableCell, {
+                                            children: 'Kind'
+                                        }),
+                                        /*#__PURE__*/ _jsx(TableCell, {
+                                            children: 'Status'
+                                        }),
+                                        /*#__PURE__*/ _jsx(TableCell, {
+                                            children: 'Window'
+                                        }),
+                                        /*#__PURE__*/ _jsx(TableCell, {
+                                            children: 'Pages'
+                                        }),
+                                        /*#__PURE__*/ _jsx(TableCell, {
+                                            children: 'Engagement'
+                                        }),
+                                        /*#__PURE__*/ _jsx(TableCell, {
+                                            align: "right",
+                                            children: 'Actions'
+                                        })
+                                    ]
+                                })
+                            }),
+                            /*#__PURE__*/ _jsx(TableBody, {
+                                children: overlays.map((overlay)=>{
+                                    var _ref, _overlay_name, _ref1, _ref2;
+                                    var _overlay_bar, _overlay_popup, _overlay_pathPatterns;
+                                    return /*#__PURE__*/ _jsxs(TableRow, {
+                                        children: [
+                                            /*#__PURE__*/ _jsx(TableCell, {
+                                                children: (_ref = (_overlay_name = overlay.name) != null ? _overlay_name : overlay.kind === 'bar' ? ((_ref1 = (_overlay_bar = overlay.bar) == null ? void 0 : _overlay_bar.text) != null ? _ref1 : '').slice(0, 32) : ((_ref2 = (_overlay_popup = overlay.popup) == null ? void 0 : _overlay_popup.headline) != null ? _ref2 : '').slice(0, 32)) != null ? _ref : overlay.$id
+                                            }),
+                                            /*#__PURE__*/ _jsx(TableCell, {
+                                                children: overlay.kind === 'bar' ? 'Bar' : 'Popup'
+                                            }),
+                                            /*#__PURE__*/ _jsx(TableCell, {
+                                                children: statusChip(overlay)
+                                            }),
+                                            /*#__PURE__*/ _jsx(TableCell, {
+                                                children: overlay.startAtMs || overlay.endAtMs ? `${overlay.startAtMs ? new Date(overlay.startAtMs).toLocaleDateString() : '…'} → ${overlay.endAtMs ? new Date(overlay.endAtMs).toLocaleDateString() : '…'}` : 'Always'
+                                            }),
+                                            /*#__PURE__*/ _jsx(TableCell, {
+                                                children: ((_overlay_pathPatterns = overlay.pathPatterns) == null ? void 0 : _overlay_pathPatterns.length) ? overlay.pathPatterns.join(', ') : 'All pages'
+                                            }),
+                                            /*#__PURE__*/ _jsx(TableCell, {
+                                                children: /*#__PURE__*/ _jsx(Typography, {
+                                                    variant: "caption",
+                                                    color: "text.secondary",
+                                                    children: statsLabel(overlay)
+                                                })
+                                            }),
+                                            /*#__PURE__*/ _jsxs(TableCell, {
+                                                align: "right",
+                                                children: [
+                                                    /*#__PURE__*/ _jsx(IconButton, {
+                                                        size: "small",
+                                                        "aria-label": "move up",
+                                                        disabled: overlays.indexOf(overlay) === 0,
+                                                        onClick: ()=>void handleMove(overlays.indexOf(overlay), -1),
+                                                        children: /*#__PURE__*/ _jsx(MdiIcon, {
+                                                            path: mdiChevronUp.path,
+                                                            sx: {
+                                                                fontSize: '1rem'
+                                                            }
+                                                        })
+                                                    }),
+                                                    /*#__PURE__*/ _jsx(IconButton, {
+                                                        size: "small",
+                                                        "aria-label": "move down",
+                                                        disabled: overlays.indexOf(overlay) === overlays.length - 1,
+                                                        onClick: ()=>void handleMove(overlays.indexOf(overlay), 1),
+                                                        children: /*#__PURE__*/ _jsx(MdiIcon, {
+                                                            path: mdiChevronDown.path,
+                                                            sx: {
+                                                                fontSize: '1rem'
+                                                            }
+                                                        })
+                                                    }),
+                                                    /*#__PURE__*/ _jsx(Switch, {
+                                                        size: "small",
+                                                        checked: overlay.enabled !== false,
+                                                        onChange: ()=>handleToggle(overlay),
+                                                        slotProps: {
+                                                            input: {
+                                                                'aria-label': 'Enabled'
+                                                            }
+                                                        }
+                                                    }),
+                                                    /*#__PURE__*/ _jsx(Button, {
+                                                        size: "small",
+                                                        color: "primary",
+                                                        onClick: ()=>setEditor(_extends({}, overlay)),
+                                                        children: 'Edit'
+                                                    }),
+                                                    /*#__PURE__*/ _jsx(Button, {
+                                                        size: "small",
+                                                        color: "error",
+                                                        onClick: ()=>handleDelete(overlay),
+                                                        children: 'Delete'
+                                                    })
+                                                ]
+                                            })
+                                        ]
+                                    }, overlay.$id);
+                                })
+                            })
+                        ]
+                    })
+                ]
+            }),
+            /*#__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 overlay' : (editor == null ? void 0 : editor.kind) === 'bar' ? 'New announcement bar' : 'New popup'
+                    }),
+                    /*#__PURE__*/ _jsx(DialogContent, {
+                        children: editor ? /*#__PURE__*/ _jsxs(Stack, {
+                            spacing: 2,
+                            sx: {
+                                mt: 1
+                            },
+                            children: [
+                                /*#__PURE__*/ _jsx(TextField, {
+                                    size: "small",
+                                    label: "Name",
+                                    value: (_editor_name = editor.name) != null ? _editor_name : '',
+                                    onChange: (event)=>patch({
+                                            name: event.target.value
+                                        }),
+                                    helperText: "Internal label shown in this list"
+                                }),
+                                editor.kind === 'bar' ? /*#__PURE__*/ _jsxs(_Fragment, {
+                                    children: [
+                                        /*#__PURE__*/ _jsx(TextField, {
+                                            size: "small",
+                                            label: "Text",
+                                            required: true,
+                                            value: copy.editable((_editor_bar2 = editor.bar) == null ? void 0 : _editor_bar2.text),
+                                            onChange: (event)=>patchBar({
+                                                    text: copy.stored(event.target.value)
+                                                }),
+                                            error: barTextShownAsTyped.length > 0,
+                                            helperText: (_shownAsTypedHelperText = shownAsTypedHelperText(barTextShownAsTyped)) != null ? _shownAsTypedHelperText : OVERLAY_COPY_HELPER_TEXT
+                                        }),
+                                        /*#__PURE__*/ _jsx(TextField, {
+                                            size: "small",
+                                            label: "Link (optional)",
+                                            value: (_ref1 = (_editor_bar3 = editor.bar) == null ? void 0 : _editor_bar3.href) != null ? _ref1 : '',
+                                            onChange: (event)=>patchBar({
+                                                    href: event.target.value
+                                                })
+                                        }),
+                                        /*#__PURE__*/ _jsxs(Stack, {
+                                            direction: "row",
+                                            spacing: 1,
+                                            children: [
+                                                /*#__PURE__*/ _jsx(TextField, {
+                                                    size: "small",
+                                                    label: "Background color",
+                                                    value: (_ref2 = (_editor_bar4 = editor.bar) == null ? void 0 : _editor_bar4.backgroundColor) != null ? _ref2 : '',
+                                                    onChange: (event)=>patchBar({
+                                                            backgroundColor: event.target.value
+                                                        })
+                                                }),
+                                                /*#__PURE__*/ _jsx(TextField, {
+                                                    size: "small",
+                                                    label: "Text color",
+                                                    value: (_ref3 = (_editor_bar5 = editor.bar) == null ? void 0 : _editor_bar5.textColor) != null ? _ref3 : '',
+                                                    onChange: (event)=>patchBar({
+                                                            textColor: event.target.value
+                                                        })
+                                                })
+                                            ]
+                                        })
+                                    ]
+                                }) : /*#__PURE__*/ _jsxs(_Fragment, {
+                                    children: [
+                                        /*#__PURE__*/ _jsx(TextField, {
+                                            size: "small",
+                                            label: "Headline",
+                                            value: copy.editable((_editor_popup4 = editor.popup) == null ? void 0 : _editor_popup4.headline),
+                                            onChange: (event)=>patchPopup({
+                                                    headline: copy.stored(event.target.value)
+                                                }),
+                                            error: headlineShownAsTyped.length > 0,
+                                            helperText: shownAsTypedHelperText(headlineShownAsTyped)
+                                        }),
+                                        /*#__PURE__*/ _jsx(TextField, {
+                                            size: "small",
+                                            label: "Body",
+                                            required: true,
+                                            multiline: true,
+                                            minRows: 2,
+                                            value: copy.editable((_editor_popup5 = editor.popup) == null ? void 0 : _editor_popup5.body),
+                                            onChange: (event)=>patchPopup({
+                                                    body: copy.stored(event.target.value)
+                                                }),
+                                            error: bodyShownAsTyped.length > 0,
+                                            helperText: (_shownAsTypedHelperText1 = shownAsTypedHelperText(bodyShownAsTyped)) != null ? _shownAsTypedHelperText1 : OVERLAY_COPY_HELPER_TEXT
+                                        }),
+                                        /*#__PURE__*/ _jsxs(Stack, {
+                                            direction: "row",
+                                            spacing: 1,
+                                            children: [
+                                                /*#__PURE__*/ _jsx(TextField, {
+                                                    size: "small",
+                                                    label: "CTA label",
+                                                    value: (_ref4 = (_editor_popup6 = editor.popup) == null ? void 0 : _editor_popup6.ctaLabel) != null ? _ref4 : '',
+                                                    onChange: (event)=>patchPopup({
+                                                            ctaLabel: event.target.value
+                                                        })
+                                                }),
+                                                /*#__PURE__*/ _jsx(TextField, {
+                                                    size: "small",
+                                                    label: "CTA link",
+                                                    value: (_ref5 = (_editor_popup7 = editor.popup) == null ? void 0 : _editor_popup7.ctaHref) != null ? _ref5 : '',
+                                                    onChange: (event)=>patchPopup({
+                                                            ctaHref: event.target.value
+                                                        })
+                                                })
+                                            ]
+                                        }),
+                                        /*#__PURE__*/ _jsxs(Stack, {
+                                            direction: "row",
+                                            spacing: 1,
+                                            children: [
+                                                /*#__PURE__*/ _jsxs(TextField, {
+                                                    select: true,
+                                                    size: "small",
+                                                    label: "Trigger",
+                                                    sx: {
+                                                        minWidth: 140
+                                                    },
+                                                    value: (_ref6 = (_editor_popup8 = editor.popup) == null ? void 0 : _editor_popup8.trigger) != null ? _ref6 : 'delay',
+                                                    onChange: (event)=>patchPopup({
+                                                            trigger: event.target.value
+                                                        }),
+                                                    children: [
+                                                        /*#__PURE__*/ _jsx(MenuItem, {
+                                                            value: "delay",
+                                                            children: 'After a delay'
+                                                        }),
+                                                        /*#__PURE__*/ _jsx(MenuItem, {
+                                                            value: "scroll",
+                                                            children: 'On scroll'
+                                                        }),
+                                                        /*#__PURE__*/ _jsx(MenuItem, {
+                                                            value: "exit",
+                                                            children: 'On exit intent'
+                                                        })
+                                                    ]
+                                                }),
+                                                /*#__PURE__*/ _jsx(TextField, {
+                                                    size: "small",
+                                                    type: "number",
+                                                    label: ((_ref7 = (_editor_popup9 = editor.popup) == null ? void 0 : _editor_popup9.trigger) != null ? _ref7 : 'delay') === 'scroll' ? 'Scroll %' : 'Seconds',
+                                                    value: (_ref8 = (_editor_popup10 = editor.popup) == null ? void 0 : _editor_popup10.triggerValue) != null ? _ref8 : 3,
+                                                    onChange: (event)=>patchPopup({
+                                                            triggerValue: Number(event.target.value)
+                                                        })
+                                                }),
+                                                /*#__PURE__*/ _jsxs(TextField, {
+                                                    select: true,
+                                                    size: "small",
+                                                    label: "Frequency",
+                                                    value: ((_editor_popup11 = editor.popup) == null ? void 0 : _editor_popup11.oncePerSession) ? 'session' : 'days',
+                                                    onChange: (event)=>patchPopup({
+                                                            oncePerSession: event.target.value === 'session'
+                                                        }),
+                                                    sx: {
+                                                        minWidth: 170
+                                                    },
+                                                    children: [
+                                                        /*#__PURE__*/ _jsx(MenuItem, {
+                                                            value: "session",
+                                                            children: 'Once per session'
+                                                        }),
+                                                        /*#__PURE__*/ _jsx(MenuItem, {
+                                                            value: "days",
+                                                            children: 'Re-show after a while'
+                                                        })
+                                                    ]
+                                                }),
+                                                ((_editor_popup12 = editor.popup) == null ? void 0 : _editor_popup12.oncePerSession) ? null : /*#__PURE__*/ _jsx(TextField, {
+                                                    size: "small",
+                                                    type: "number",
+                                                    label: "Re-show after (days)",
+                                                    value: (_ref9 = (_editor_popup13 = editor.popup) == null ? void 0 : _editor_popup13.frequencyDays) != null ? _ref9 : 7,
+                                                    onChange: (event)=>patchPopup({
+                                                            frequencyDays: Number(event.target.value)
+                                                        })
+                                                })
+                                            ]
+                                        })
+                                    ]
+                                }),
+                                /*#__PURE__*/ _jsxs(Stack, {
+                                    direction: "row",
+                                    spacing: 1,
+                                    children: [
+                                        /*#__PURE__*/ _jsx(TextField, {
+                                            size: "small",
+                                            type: "datetime-local",
+                                            label: "Show from",
+                                            slotProps: {
+                                                inputLabel: {
+                                                    shrink: true
+                                                }
+                                            },
+                                            value: toDatetimeLocal(editor.startAtMs),
+                                            onChange: (event)=>patch({
+                                                    startAtMs: fromDatetimeLocal(event.target.value)
+                                                })
+                                        }),
+                                        /*#__PURE__*/ _jsx(TextField, {
+                                            size: "small",
+                                            type: "datetime-local",
+                                            label: "Show until",
+                                            slotProps: {
+                                                inputLabel: {
+                                                    shrink: true
+                                                }
+                                            },
+                                            value: toDatetimeLocal(editor.endAtMs),
+                                            onChange: (event)=>patch({
+                                                    endAtMs: fromDatetimeLocal(event.target.value)
+                                                })
+                                        })
+                                    ]
+                                }),
+                                /*#__PURE__*/ _jsx(TextField, {
+                                    size: "small",
+                                    label: "Show on pages",
+                                    value: ((_editor_pathPatterns = editor.pathPatterns) != null ? _editor_pathPatterns : []).join(', '),
+                                    onChange: (event)=>patch({
+                                            pathPatterns: parsePatterns(event.target.value)
+                                        }),
+                                    helperText: 'Comma-separated paths; /blog/* matches a section. ' + 'Empty = every page.'
+                                }),
+                                /*#__PURE__*/ _jsx(TextField, {
+                                    size: "small",
+                                    label: "Never show on",
+                                    value: ((_editor_excludePathPatterns = editor.excludePathPatterns) != null ? _editor_excludePathPatterns : []).join(', '),
+                                    onChange: (event)=>patch({
+                                            excludePathPatterns: parsePatterns(event.target.value)
+                                        })
+                                })
+                            ]
+                        }) : null
+                    }),
+                    /*#__PURE__*/ _jsxs(DialogActions, {
+                        children: [
+                            /*#__PURE__*/ _jsx(Button, {
+                                color: "inherit",
+                                onClick: ()=>setEditor(null),
+                                children: 'Cancel'
+                            }),
+                            /*#__PURE__*/ _jsx(Button, {
+                                variant: "contained",
+                                color: "primary",
+                                onClick: handleSave,
+                                disabled: copy.pending(editor == null ? void 0 : (_editor_bar6 = editor.bar) == null ? void 0 : _editor_bar6.text, editor == null ? void 0 : (_editor_popup14 = editor.popup) == null ? void 0 : _editor_popup14.headline, editor == null ? void 0 : (_editor_popup15 = editor.popup) == null ? void 0 : _editor_popup15.body),
+                                children: 'Save'
+                            })
+                        ]
+                    })
+                ]
+            })
+        ]
+    });
+}
+HostOverlaysCard.displayName = 'HostOverlaysCard';
+export default HostOverlaysCard;
+
+//# sourceMappingURL=host-overlays-card.component.js.map