@aglyn/plugins-forms 1.0.0-beta.143

package/src/lib/components/form-detail-card.js

@@ -0,0 +1,827 @@
+/**
+ * @license
+ * Copyright 2026 Aglyn LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */ 'use client';
+import { _ as _extends } from "@swc/helpers/_/_extends";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import * as Aglyn from "@aglyn/aglyn";
+import { buildRoute, formFieldsCanYieldAnEmail, formFieldsCaptureConsent, PageHeaderActions, PageHeaderRecord, listConsoleWidgets, pluginDocsHelp, Route } from "@aglyn/aglyn";
+import { useConsoleWidgetSlot } from "@aglyn/aglyn/app-utils/console-widget-slot-context";
+// The CRM's route builder by its leaf path, not the plugin barrel: the barrel
+// is the entry point the tenant's loader imports to activate the plugin's
+// site half, and a console page named there would ship to every published
+// page. The same import the Inbox makes for the same reason.
+import { pluginRecordFilteredHref } from "@aglyn/aglyn/plugin-manager/plugin-record-routes";
+import { ICON_VARIANT_BESIGNER } from "@aglyn/shared-data-enums";
+import { AppLink, CardDisplay, GridItems, MdiIcon, useLoading } 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, AlertTitle, Button, Chip, FormControlLabel, MenuItem, Stack, Switch, TableBody, TableCell, TableHead, TableRow, TextField, Typography } from "@mui/material";
+import { useConsoleHostRoute, useFirestore, useFirestoreCollection, useFirestoreDoc, useHostCampaigns, useHostVersionApi } from "@aglyn/tenant-feature-instance";
+import CampaignPicker from "@aglyn/shared-ui-email-campaigns/components/campaign-picker.component";
+import { collection, doc, limit, query, updateDoc } from "firebase/firestore";
+import { useRouter } from "next/navigation";
+import { useCallback, useMemo, useState } from "react";
+import { FORM_CONTACT_FIELDS_ZONE } from "./form-zones.js";
+import FormDesignPreview from "./form-design-preview.component.js";
+import FormMetricsCard from "./form-metrics-card.component.js";
+import FormSubmissionsCard from "./form-submissions-card.component.js";
+import useFormPromoteApi from "./use-form-promote-api.js";
+/**
+ * One form — the component detail surface, for a document that is also a
+ * contract.
+ *
+ * The split this enforces is the reason it exists rather than sending a row
+ * straight into the besigner. A form has two halves:
+ *
+ *  - the DESIGN, which is what an author draws, and which lives in the
+ *    besigner reached from here;
+ *  - the DECLARATION — where a submission is routed and which field carries
+ *    marketing consent — which is edited here.
+ *
+ * They are edited apart because the declaration is what the design is then
+ * checked AGAINST. `checkFormContract` compares the two at publish, so a
+ * surface that let an author change both in one motion would let them satisfy
+ * the check by moving whichever side happened to be easier — which is how a
+ * form ends up with lead routing pointed at a field nobody fills in.
+ *
+ * ## Promotion lives here, not only in the besigner
+ *
+ * A component's version history offers Publish on any version: promotion is
+ * how you go back, not only how you go forward, and an author restoring last
+ * week's design should not have to open a canvas to do it.
+ *
+ * It rides `/api/hosts/forms/promote` rather than an `updateDoc` here, because
+ * a form's promotion has to run `checkFormContract` on the tree it is about to
+ * write and REFUSE. A check in this component would be advice a determined
+ * client could skip; the route reads the stored version itself, so nothing
+ * about the design crosses the wire inbound and there is no version of this
+ * surface that can publish a design the check has not seen.
+ */ export function FormDetailCard(props) {
+    var _ref, _ref1;
+    var _form_routing;
+    const { hostId, formId, basePath, canPublish, hostRoleLoaded } = props;
+    const firestore = useFirestore();
+    const ContactFieldsZone = useConsoleWidgetSlot();
+    // Read at render, after the shell has loaded its plugins.
+    const hasContactFieldsWidget = listConsoleWidgets(FORM_CONTACT_FIELDS_ZONE.id).length > 0;
+    /**
+   * The write a widget in the contact-fields zone asks for. The declaration
+   * is one array on the form document, and the document is this plugin's, so
+   * the page writes what the widget decided.
+   */ const saveFields = useCallback(async (fields)=>{
+        await updateDoc(doc(firestore, 'hosts', hostId, 'forms', formId), {
+            fields,
+            updatedAt: Timestamp.now()
+        });
+    }, [
+        firestore,
+        hostId,
+        formId
+    ]);
+    const { orgSlug, subdomain: host } = useConsoleHostRoute(hostId);
+    const createHostVersion = useHostVersionApi();
+    const promoteForm = useFormPromoteApi();
+    const router = useRouter();
+    const { enqueueSnackbar } = useSnackbar();
+    const { queueLoading } = useLoading();
+    const { data: form, status } = useFirestoreDoc(()=>doc(firestore, 'hosts', hostId, 'forms', formId), [
+        firestore,
+        hostId,
+        formId
+    ], {
+        idField: '$id'
+    });
+    // Three states, not two (AGL-706): loading and absent both arrive as
+    // `undefined`, and an editable form over a mistyped id reads as data loss.
+    const notFound = status !== 'loading' && !form;
+    /**
+   * The published design, in BOTH stored forms (AGL-1151).
+   *
+   * The read above is converter-less, so `nodes` arrives exactly as stored —
+   * msgpack for a design promoted since forms were compressed, a plain map
+   * for everything older. Decoded once here because two surfaces below need
+   * it and both fail silently on the raw value: `checkFormContract` reports
+   * bogus violations against a tree it cannot walk, and the AGL-753 empty
+   * guard passes on a `Bytes` because `Object.keys` counts the wrapper.
+   */ const formNodes = useMemo(()=>Aglyn.decodeStoredNodes(form == null ? void 0 : form.nodes), [
+        form == null ? void 0 : form.nodes
+    ]);
+    // No orderBy: the oldest version docs predate `createdAt`, and Firestore
+    // drops documents missing the ordered field.
+    const { data: versionDocs } = useFirestoreCollection(()=>query(collection(firestore, 'hosts', hostId, 'forms', formId, 'versions'), limit(100)), [
+        firestore,
+        hostId,
+        formId
+    ], {
+        idField: '$id'
+    });
+    const versions = [
+        ...versionDocs != null ? versionDocs : []
+    ].sort((a, b)=>{
+        var _ref, _ref1;
+        var _b_createdAt, _a_createdAt;
+        return ((_ref = (_b_createdAt = b.createdAt) == null ? void 0 : _b_createdAt.seconds) != null ? _ref : 0) - ((_ref1 = (_a_createdAt = a.createdAt) == null ? void 0 : _a_createdAt.seconds) != null ? _ref1 : 0);
+    });
+    const publishedVersionId = form == null ? void 0 : form.versionId;
+    const [name, setName] = useState(null);
+    const [lead, setLead] = useState(null);
+    const [consentField, setConsentField] = useState(null);
+    /**
+   * The campaigns picked on screen, or null while the stored value stands.
+   *
+   * Null and `[]` are different: null means "not touched", `[]` means "take
+   * this form out of every campaign". Collapsing them would make clearing the
+   * last campaign a no-op, which is the half of set-and-clear that is easy to
+   * ship broken.
+   */ const [campaignIds, setCampaignIds] = useState(null);
+    const [opening, setOpening] = useState(false);
+    const [promoting, setPromoting] = useState(null);
+    /**
+   * What a REFUSED promotion said, kept on the surface rather than in a toast.
+   *
+   * A contract violation is a list of things to go and fix in the besigner,
+   * and a snackbar is gone by the time the author has read the second one.
+   * The besigner's own refusal persists for the same reason.
+   */ const [promoteRefusal, setPromoteRefusal] = useState(null);
+    /** The fields the PUBLISHED design draws, which is what a submission can carry. */ const declaredFields = useMemo(()=>Array.isArray(form == null ? void 0 : form.fields) ? form.fields : [], [
+        form
+    ]);
+    const effectiveLead = lead != null ? lead : (form == null ? void 0 : (_form_routing = form.routing) == null ? void 0 : _form_routing.lead) === true;
+    const effectiveConsent = consentField != null ? consentField : String((_ref = form == null ? void 0 : form.consentFieldName) != null ? _ref : '');
+    /*
+   * Whether lead routing COULD work on this design — the two preconditions
+   * `checkFormContract` applies at publish, asked here so the switch says so
+   * before it is flipped rather than after (AGL-2612). Consent is read as
+   * it is being edited: picking a field below is what satisfies it.
+   */ const hasEmailField = formFieldsCanYieldAnEmail(declaredFields);
+    const capturesConsent = formFieldsCaptureConsent(declaredFields, effectiveConsent);
+    /*
+   * Where this form's people are: the contacts list narrowed to this form,
+   * asked of the plugin that keeps people (`null`, and no link, without one). Built from the resolved org slug and
+   * subdomain the besigner link already waits on, so the link appears when
+   * they land and never points at a half-built address.
+   */ const contactsHref = orgSlug && host ? pluginRecordFilteredHref('contact', {
+        orgSlug,
+        host
+    }, 'form', formId) : null;
+    /*
+   * WHICH CAMPAIGNS THIS FORM IS PART OF.
+   *
+   * The site's campaigns are read while this page is open because the field
+   * is DISPLAYED here as well as edited here: the document stores ids, and a
+   * page that drew them until a button was pressed would be showing a
+   * merchant raw storage. Bounded at the ceiling the campaigns table itself
+   * draws, so it can offer nothing that list does not.
+   */ const siteCampaigns = useHostCampaigns(hostId, {
+        enabled: Boolean(form)
+    });
+    const storedCampaigns = useMemo(()=>Aglyn.readCampaignIds(form), [
+        form
+    ]);
+    const effectiveCampaigns = campaignIds != null ? campaignIds : storedCampaigns;
+    /**
+   * What the published design would break, judged against the declaration as
+   * it is being edited here.
+   *
+   * Shown here as well as at publish because the two halves are edited in
+   * different places: turning lead routing on for a form whose design has no
+   * email field is a break the author causes HERE, on a design they are not
+   * looking at, and the besigner would not tell them until they next opened
+   * it.
+   */ const violations = useMemo(()=>{
+        var _form_routing;
+        return form ? Aglyn.checkFormContract({
+            form: _extends({
+                routing: _extends({}, (_form_routing = form.routing) != null ? _form_routing : {}, {
+                    lead: effectiveLead
+                })
+            }, effectiveConsent ? {
+                consentFieldName: effectiveConsent
+            } : {}),
+            formId,
+            nodes: formNodes,
+            formNodeId: findFormNodeId(formNodes)
+        }) : [];
+    }, [
+        form,
+        formId,
+        effectiveLead,
+        effectiveConsent
+    ]);
+    const handleSave = useCallback(async ()=>{
+        const dequeue = queueLoading();
+        try {
+            var _ref;
+            await updateDoc(doc(firestore, 'hosts', hostId, 'forms', formId), _extends({}, name != null ? {
+                displayName: name.trim()
+            } : {}, lead != null ? {
+                routing: _extends({}, (_ref = form == null ? void 0 : form.routing) != null ? _ref : {}, {
+                    lead
+                })
+            } : {}, consentField != null ? {
+                consentFieldName: consentField.trim()
+            } : {}, campaignIds != null ? {
+                [Aglyn.CAMPAIGN_MEMBERSHIP_FIELD]: Aglyn.campaignMembershipValue(campaignIds)
+            } : {}, {
+                updatedAt: Timestamp.now()
+            }));
+            setName(null);
+            setLead(null);
+            setConsentField(null);
+            setCampaignIds(null);
+            enqueueSnackbar('Form saved', {
+                variant: 'success',
+                persist: false
+            });
+        } catch (error) {
+            console.error(error);
+            enqueueSnackbar('An error has occurred', {
+                variant: 'error',
+                allowDuplicate: true
+            });
+        } finally{
+            dequeue();
+        }
+    }, [
+        firestore,
+        hostId,
+        formId,
+        form,
+        name,
+        lead,
+        consentField,
+        campaignIds,
+        queueLoading,
+        enqueueSnackbar
+    ]);
+    /**
+   * Makes one version the version the live sites serve.
+   *
+   * The route decides, not this handler: it re-reads the stored version, runs
+   * `checkFormContract` on the tree it is about to write, and answers 422 with
+   * the violations when a publish would stop the submissions arriving. So the
+   * only thing here is what to do with each answer — and a refusal is put on
+   * the page rather than in a toast, because it is a list of things to fix.
+   */ const handlePromote = useCallback((targetVersionId)=>async ()=>{
+            if (promoting) return;
+            setPromoting(targetVersionId);
+            setPromoteRefusal(null);
+            try {
+                const result = await promoteForm({
+                    hostId,
+                    formId,
+                    versionId: targetVersionId
+                });
+                if (!result.ok) {
+                    var _result_message, _result_violations;
+                    const message = (_result_message = result.message) != null ? _result_message : 'Publish failed';
+                    setPromoteRefusal({
+                        message,
+                        violations: (_result_violations = result.violations) != null ? _result_violations : []
+                    });
+                    // `persist` because this is a refusal an author has to act on: an
+                    // auto-dismissed warning is how someone walks away believing the
+                    // form shipped.
+                    enqueueSnackbar(message, {
+                        variant: 'warning',
+                        allowDuplicate: true,
+                        persist: true
+                    });
+                    return;
+                }
+                enqueueSnackbar('Published. The live sites now serve this version, and the form’s ' + 'declared fields match it.', {
+                    variant: 'success',
+                    persist: false
+                });
+            } catch (error) {
+                console.error(error);
+                enqueueSnackbar('Could not publish that version', {
+                    variant: 'error',
+                    allowDuplicate: true,
+                    persist: true
+                });
+            } finally{
+                setPromoting(null);
+            }
+        }, [
+        promoting,
+        promoteForm,
+        hostId,
+        formId,
+        enqueueSnackbar
+    ]);
+    /**
+   * Opens a version in the besigner, minting the first one when the form has
+   * none.
+   *
+   * Forms adopted from a page carry a declared field list and a `nodes` map
+   * seeded from the page they were adopted from — so the first version opens
+   * on the form the site was ALREADY submitting rather than a blank canvas.
+   */ const handleOpen = useCallback((targetVersionId)=>async ()=>{
+            if (opening) return;
+            setOpening(true);
+            try {
+                var _ref;
+                var _versions_;
+                let versionId = (_ref = targetVersionId != null ? targetVersionId : publishedVersionId) != null ? _ref : (_versions_ = versions[0]) == null ? void 0 : _versions_.$id;
+                if (!versionId) {
+                    versionId = Aglyn.createResourceUid();
+                    // Rides /api/hosts/versions: rules deny the client create, and the
+                    // route allows a resource's FIRST version on every plan — which
+                    // this always is, since the form reached here with no `versionId`.
+                    await createHostVersion({
+                        hostId,
+                        kind: 'form',
+                        parentId: formId,
+                        id: versionId,
+                        data: _extends({
+                            formId,
+                            hostId,
+                            displayName: 'Initial version',
+                            // Emptiness, not just absence: a form that holds no `nodes` and
+                            // `??` would pass an empty map straight through to a version
+                            // that opens uneditable (AGL-753). Measured on the DECODED
+                            // tree — `Object.keys` over a stored `Bytes` is non-empty, so
+                            // the raw value passes this guard and mints exactly the
+                            // uneditable version it exists to stop (AGL-1151).
+                            nodes: Object.keys(formNodes != null ? formNodes : {}).length ? formNodes : {
+                                [Aglyn.CANVAS_ROOT_ELEMENT_ID]: {
+                                    $id: Aglyn.CANVAS_ROOT_ELEMENT_ID,
+                                    componentId: 'div',
+                                    nodes: []
+                                }
+                            }
+                        }, (form == null ? void 0 : form.rootId) ? {
+                            rootId: form.rootId
+                        } : {})
+                    });
+                    await updateDoc(doc(firestore, 'hosts', hostId, 'forms', formId), {
+                        versionId,
+                        updatedAt: Timestamp.now()
+                    });
+                }
+                // The editor's URL needs the resolved org slug and subdomain, which
+                // `useConsoleHostRoute` reads. Until they land the button below is
+                // disabled, so this branch cannot be reached without them.
+                if (orgSlug && host) {
+                    router.push(buildRoute(Route.FORM_BESIGNER, {
+                        orgSlug,
+                        host,
+                        formId,
+                        versionId
+                    }));
+                }
+            } catch (error) {
+                console.error(error);
+                enqueueSnackbar('Could not open the besigner', {
+                    variant: 'error',
+                    allowDuplicate: true
+                });
+                setOpening(false);
+            }
+        }, [
+        opening,
+        createHostVersion,
+        publishedVersionId,
+        versions,
+        firestore,
+        hostId,
+        formId,
+        form,
+        router,
+        orgSlug,
+        host,
+        enqueueSnackbar
+    ]);
+    const dirty = name != null || lead != null || consentField != null || campaignIds != null && !Aglyn.campaignMembershipUnchanged(storedCampaigns, campaignIds);
+    // Named before it is used on every row, so a role denial reads as a reason
+    // rather than as a control that does nothing.
+    const publishBlock = hostRoleLoaded ? 'Your role on this site can edit content but not publish it' : 'Checking what your role can do…';
+    if (notFound) {
+        return /*#__PURE__*/ _jsx(CardDisplay, {
+            header: "Form not found",
+            help: pluginDocsHelp('forms', {
+                anchor: '#build-a-form',
+                excerpt: 'A form is created from the Forms list and keeps the id every ' + 'submission is filed under.'
+            }),
+            contentGutterX: true,
+            contentGutterY: true,
+            children: /*#__PURE__*/ _jsxs(Stack, {
+                spacing: 2,
+                sx: {
+                    alignItems: 'flex-start'
+                },
+                children: [
+                    /*#__PURE__*/ _jsx(Alert, {
+                        severity: "info",
+                        children: `No form on this site has the id ${formId}. It may have been deleted, or the link may be from another site.`
+                    }),
+                    basePath ? /*#__PURE__*/ _jsx(AppLink, {
+                        href: basePath,
+                        children: 'Back to forms'
+                    }) : null
+                ]
+            })
+        });
+    }
+    /* The cards, named so the page chrome above them is a plain list of
+     what this surface publishes upward. */ const cards = /*#__PURE__*/ _jsx(GridItems, {
+        spacing: 3,
+        items: [
+            {
+                size: {
+                    xs: 12,
+                    lg: 5
+                },
+                children: /*#__PURE__*/ _jsx(CardDisplay, {
+                    header: "Details",
+                    help: pluginDocsHelp('forms', {
+                        anchor: '#build-a-form',
+                        excerpt: 'The id is what every submission is filed under, so ' + 'renaming a form never splits its history.'
+                    }),
+                    contentGutterX: true,
+                    contentGutterY: true,
+                    children: /*#__PURE__*/ _jsxs(Stack, {
+                        spacing: 2,
+                        children: [
+                            /*#__PURE__*/ _jsx(TextField, {
+                                label: "Display name",
+                                size: "small",
+                                value: (_ref1 = name != null ? name : form == null ? void 0 : form.displayName) != null ? _ref1 : '',
+                                onChange: (event)=>setName(event.target.value),
+                                fullWidth: true
+                            }),
+                            /*#__PURE__*/ _jsx(Typography, {
+                                variant: "caption",
+                                color: "text.secondary",
+                                children: `ID ${formId} — every submission is filed under this, so it never changes`
+                            }),
+                            /*#__PURE__*/ _jsx(CampaignPicker, {
+                                options: siteCampaigns.options,
+                                value: effectiveCampaigns,
+                                onChange: setCampaignIds,
+                                helperText: "The campaigns this form is part of. It does not change who a campaign mails.",
+                                empty: siteCampaigns.ready && !siteCampaigns.options.length
+                            }),
+                            /*#__PURE__*/ _jsx(Stack, {
+                                direction: "row",
+                                spacing: 1,
+                                children: /*#__PURE__*/ _jsx(Button, {
+                                    variant: "contained",
+                                    color: "primary",
+                                    size: "small",
+                                    disabled: !dirty,
+                                    onClick: handleSave,
+                                    children: 'Save'
+                                })
+                            })
+                        ]
+                    })
+                })
+            },
+            {
+                size: {
+                    xs: 12,
+                    lg: 7
+                },
+                children: /*#__PURE__*/ _jsx(CardDisplay, {
+                    header: "CRM routing",
+                    help: pluginDocsHelp('forms', {
+                        anchor: '#where-submissions-go',
+                        excerpt: 'Every submission reaches the Inbox and updates the ' + 'contact. Lead routing and the consent field decide ' + 'what else happens to it.'
+                    }),
+                    contentGutterX: true,
+                    contentGutterY: true,
+                    children: /*#__PURE__*/ _jsxs(Stack, {
+                        spacing: 2,
+                        children: [
+                            /*#__PURE__*/ _jsx(Typography, {
+                                variant: "body2",
+                                children: 'Every submission with an email address updates the person ' + 'in Contacts at stage Lead — a new contact when the ' + 'address is new, an interaction on their timeline when it ' + 'is not. A customer stays a customer.'
+                            }),
+                            /*#__PURE__*/ _jsxs(Stack, {
+                                spacing: 0.5,
+                                children: [
+                                    /*#__PURE__*/ _jsx(FormControlLabel, {
+                                        control: /*#__PURE__*/ _jsx(Switch, {
+                                            checked: effectiveLead,
+                                            onChange: (event)=>setLead(event.target.checked)
+                                        }),
+                                        label: "Also create a lead from the address someone gives this form"
+                                    }),
+                                    /*#__PURE__*/ _jsx(Typography, {
+                                        variant: "caption",
+                                        color: "text.secondary",
+                                        children: !hasEmailField ? 'Needs an email field in the published design — a ' + 'submission without an address cannot key a lead, and ' + 'publishing with this on would be refused until one exists.' : !capturesConsent ? 'Needs a marketing consent field — a lead nobody opted ' + 'in with is one the team cannot email, and publishing ' + 'with this on would be refused until the field below ' + 'names one.' : 'Files a lead in CRM → Leads for the sales team to work, ' + 'carrying the opt-in the consent field records.'
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ _jsxs(TextField, {
+                                select: true,
+                                label: "Marketing consent field",
+                                size: "small",
+                                value: effectiveConsent,
+                                onChange: (event)=>setConsentField(event.target.value),
+                                fullWidth: true,
+                                helperText: "The one field that IS the opt-in. Submitting a form is never itself consent.",
+                                children: [
+                                    /*#__PURE__*/ _jsx(MenuItem, {
+                                        value: "",
+                                        children: 'None — this form collects no opt-in'
+                                    }),
+                                    declaredFields.map((field)=>/*#__PURE__*/ _jsx(MenuItem, {
+                                            value: field.fieldName,
+                                            children: field.label ? `${field.label} (${field.fieldName})` : field.fieldName
+                                        }, field.fieldName))
+                                ]
+                            }),
+                            violations.length ? /*#__PURE__*/ _jsxs(Alert, {
+                                severity: "warning",
+                                children: [
+                                    /*#__PURE__*/ _jsx(AlertTitle, {
+                                        children: 'This form would stop collecting'
+                                    }),
+                                    /*#__PURE__*/ _jsx(Stack, {
+                                        component: "ul",
+                                        sx: {
+                                            pl: 2,
+                                            m: 0
+                                        },
+                                        children: violations.map((violation)=>{
+                                            var _ref, _violation_nodeId;
+                                            return /*#__PURE__*/ _jsx(Typography, {
+                                                component: "li",
+                                                variant: "body2",
+                                                children: violation.message
+                                            }, `${violation.code}:${(_ref = (_violation_nodeId = violation.nodeId) != null ? _violation_nodeId : violation.fieldName) != null ? _ref : ''}`);
+                                        })
+                                    })
+                                ]
+                            }) : null,
+                            contactsHref ? /*#__PURE__*/ _jsx(Typography, {
+                                variant: "body2",
+                                children: /*#__PURE__*/ _jsx(AppLink, {
+                                    href: contactsHref,
+                                    children: 'See the contacts this form captured in the CRM'
+                                })
+                            }) : null
+                        ]
+                    })
+                })
+            },
+            // Where each field saves on the person: another plugin's card, in a
+            // zone this page hosts. No item at all where nothing fills it, so the
+            // grid keeps no empty cell.
+            ...ContactFieldsZone && hasContactFieldsWidget ? [
+                {
+                    size: {
+                        xs: 12
+                    },
+                    children: /*#__PURE__*/ _jsx(ContactFieldsZone, {
+                        slot: FORM_CONTACT_FIELDS_ZONE.id,
+                        hostId: hostId,
+                        formId: formId,
+                        fields: declaredFields,
+                        loading: status === 'loading',
+                        saveFields: saveFields
+                    })
+                }
+            ] : [],
+            {
+                size: {
+                    xs: 12,
+                    lg: 5
+                },
+                children: /*#__PURE__*/ _jsx(FormMetricsCard, {
+                    stats: form == null ? void 0 : form.stats,
+                    fields: declaredFields,
+                    leadRouting: effectiveLead,
+                    loading: status === 'loading'
+                })
+            },
+            {
+                size: {
+                    xs: 12,
+                    lg: 7
+                },
+                children: /*#__PURE__*/ _jsx(CardDisplay, {
+                    header: "Versions",
+                    help: pluginDocsHelp('forms', {
+                        anchor: '#build-a-form',
+                        excerpt: 'Publishing a form version updates every page that ' + 'places it. Saving does not — a save is not a publish.'
+                    }),
+                    contentGutterX: true,
+                    contentGutterY: true,
+                    children: /*#__PURE__*/ _jsxs(Stack, {
+                        spacing: 2,
+                        children: [
+                            promoteRefusal ? /*#__PURE__*/ _jsxs(Alert, {
+                                severity: "warning",
+                                onClose: ()=>setPromoteRefusal(null),
+                                children: [
+                                    /*#__PURE__*/ _jsx(AlertTitle, {
+                                        children: promoteRefusal.message
+                                    }),
+                                    promoteRefusal.violations.length ? /*#__PURE__*/ _jsx(Stack, {
+                                        component: "ul",
+                                        sx: {
+                                            pl: 2,
+                                            m: 0
+                                        },
+                                        children: promoteRefusal.violations.map((violation)=>{
+                                            var _ref, _violation_nodeId;
+                                            return /*#__PURE__*/ _jsx(Typography, {
+                                                component: "li",
+                                                variant: "body2",
+                                                children: violation.message
+                                            }, `${violation.code}:${(_ref = (_violation_nodeId = violation.nodeId) != null ? _violation_nodeId : violation.fieldName) != null ? _ref : ''}`);
+                                        })
+                                    }) : null
+                                ]
+                            }) : null,
+                            versions.length === 0 ? /*#__PURE__*/ _jsx(Typography, {
+                                variant: "body2",
+                                color: "text.secondary",
+                                children: 'No versions yet — opening the besigner creates the first one.'
+                            }) : /*#__PURE__*/ _jsxs(ScrollTable, {
+                                size: "small",
+                                children: [
+                                    /*#__PURE__*/ _jsx(TableHead, {
+                                        children: /*#__PURE__*/ _jsxs(TableRow, {
+                                            children: [
+                                                /*#__PURE__*/ _jsx(TableCell, {
+                                                    children: 'Version'
+                                                }),
+                                                /*#__PURE__*/ _jsx(TableCell, {
+                                                    children: 'Created'
+                                                }),
+                                                /*#__PURE__*/ _jsx(TableCell, {
+                                                    children: 'Updated'
+                                                }),
+                                                /*#__PURE__*/ _jsx(TableCell, {
+                                                    align: "right",
+                                                    children: 'Actions'
+                                                })
+                                            ]
+                                        })
+                                    }),
+                                    /*#__PURE__*/ _jsx(TableBody, {
+                                        children: versions.map((version)=>{
+                                            var _version_displayName, _ref, _ref1;
+                                            var _version_createdAt_toDate, _version_createdAt, _version_updatedAt_toDate, _version_updatedAt;
+                                            return /*#__PURE__*/ _jsxs(TableRow, {
+                                                hover: true,
+                                                children: [
+                                                    /*#__PURE__*/ _jsx(TableCell, {
+                                                        children: /*#__PURE__*/ _jsxs(Stack, {
+                                                            direction: "row",
+                                                            spacing: 1,
+                                                            sx: {
+                                                                alignItems: 'center'
+                                                            },
+                                                            children: [
+                                                                /*#__PURE__*/ _jsx(Typography, {
+                                                                    variant: "body2",
+                                                                    children: (_version_displayName = version.displayName) != null ? _version_displayName : version.$id
+                                                                }),
+                                                                version.$id === publishedVersionId ? /*#__PURE__*/ _jsx(Chip, {
+                                                                    label: "Current",
+                                                                    color: "success",
+                                                                    size: "small"
+                                                                }) : null
+                                                            ]
+                                                        })
+                                                    }),
+                                                    /*#__PURE__*/ _jsx(TableCell, {
+                                                        children: (_ref = (_version_createdAt = version.createdAt) == null ? void 0 : (_version_createdAt_toDate = _version_createdAt.toDate) == null ? void 0 : _version_createdAt_toDate.call(_version_createdAt).toLocaleString()) != null ? _ref : '--'
+                                                    }),
+                                                    /*#__PURE__*/ _jsx(TableCell, {
+                                                        children: (_ref1 = (_version_updatedAt = version.updatedAt) == null ? void 0 : (_version_updatedAt_toDate = _version_updatedAt.toDate) == null ? void 0 : _version_updatedAt_toDate.call(_version_updatedAt).toLocaleString()) != null ? _ref1 : '--'
+                                                    }),
+                                                    /*#__PURE__*/ _jsx(TableCell, {
+                                                        align: "right",
+                                                        children: /*#__PURE__*/ _jsxs(Stack, {
+                                                            direction: "row",
+                                                            spacing: 1,
+                                                            sx: {
+                                                                justifyContent: 'flex-end'
+                                                            },
+                                                            children: [
+                                                                /*#__PURE__*/ _jsx(Button, {
+                                                                    size: "small",
+                                                                    disabled: opening || !orgSlug || !host,
+                                                                    onClick: handleOpen(version.$id),
+                                                                    children: 'Open'
+                                                                }),
+                                                                /*#__PURE__*/ _jsx(Button, {
+                                                                    size: "small",
+                                                                    variant: "outlined",
+                                                                    title: canPublish ? undefined : publishBlock,
+                                                                    disabled: !canPublish || promoting !== null || version.$id === publishedVersionId,
+                                                                    onClick: handlePromote(version.$id),
+                                                                    children: promoting === version.$id ? 'Publishing…' : version.$id === publishedVersionId ? 'Published' : 'Publish'
+                                                                })
+                                                            ]
+                                                        })
+                                                    })
+                                                ]
+                                            }, version.$id);
+                                        })
+                                    })
+                                ]
+                            })
+                        ]
+                    })
+                })
+            },
+            {
+                /*
+            THE MESSAGES THEMSELVES, under the numbers that describe them.
+            Full width because it is a table of people and what they wrote,
+            and it sits below the metrics because those are read at a glance
+            and this is read a row at a time.
+           */ size: {
+                    xs: 12
+                },
+                children: /*#__PURE__*/ _jsx(FormSubmissionsCard, {
+                    hostId: hostId,
+                    formId: formId
+                })
+            },
+            {
+                // Full width: the frame is a document, and a document in a
+                // five-column card is a column of one-word lines.
+                size: {
+                    xs: 12
+                },
+                children: /*#__PURE__*/ _jsx(CardDisplay, {
+                    header: "What a submission will carry",
+                    help: pluginDocsHelp('forms', {
+                        anchor: '#field-types',
+                        excerpt: 'Each field arrives under its own name. Two fields ' + 'sharing one name arrive as a single answer.'
+                    }),
+                    contentGutterX: true,
+                    contentGutterY: true,
+                    children: /*#__PURE__*/ _jsx(FormDesignPreview, {
+                        formId: formId,
+                        nodes: form == null ? void 0 : form.nodes,
+                        consentFieldName: effectiveConsent ? effectiveConsent : undefined,
+                        loading: status === 'loading'
+                    })
+                })
+            }
+        ]
+    });
+    return /*#__PURE__*/ _jsxs(_Fragment, {
+        children: [
+            /*#__PURE__*/ _jsx(PageHeaderRecord, {
+                title: form ? form.displayName || formId : undefined
+            }),
+            /*#__PURE__*/ _jsx(PageHeaderActions, {
+                children: /*#__PURE__*/ _jsx(Button, {
+                    size: "small",
+                    variant: "contained",
+                    disabled: opening || !orgSlug || !host,
+                    title: orgSlug && host ? undefined : 'Resolving this site’s address…',
+                    onClick: handleOpen(),
+                    startIcon: /*#__PURE__*/ _jsx(MdiIcon, {
+                        color: "inherit",
+                        path: ICON_VARIANT_BESIGNER.path
+                    }),
+                    children: opening ? 'Opening…' : 'Edit in besigner'
+                })
+            }),
+            cards
+        ]
+    });
+}
+FormDetailCard.displayName = 'FormDetailCard';
+/**
+ * The `form` node inside a published design.
+ *
+ * A form document's tree holds exactly one, because the document IS that
+ * form — but the tree is a flat map with a synthetic root, so the node has to
+ * be found rather than assumed to be the root itself.
+ */ function findFormNodeId(nodes) {
+    return Object.keys(nodes != null ? nodes : {}).find((id)=>{
+        var _nodes_id;
+        return (nodes == null ? void 0 : (_nodes_id = nodes[id]) == null ? void 0 : _nodes_id.componentId) === 'form';
+    });
+}
+export default FormDetailCard;
+
+//# sourceMappingURL=form-detail-card.js.map