@aglyn/plugins-forms 1.0.0-beta.221 → 1.0.0-beta.222

package/README.md

@@ -25,6 +25,7 @@ Presets for both, including a composed contact section, appear in the Besigner's
 
 - A `Forms` nav item at `/forms`: the form catalog and one form's own page (declaration, metrics, versions, promotion, design preview). The nav item owns its subtree, because a form's URL names a document id. The page is code-split and loads when opened.
 - Two zones the plugin hosts on a form's page for other plugins to fill, registered with `registerPluginZone`: `formSubmissions`, where a reader of that form's submissions is drawn, and a zone for mapping a form's fields onto a person's fields.
+- The `formSubmission` kind on the record seams: a console list source (`plugin-record-lists`) — the newest of a site's, the base the Inbox walks, one submission's document, and a site's submissions by name — a server record index (`plugin-record-index`), and a count source (`plugin-record-counts`) for how many a site received. The Inbox and a campaign's conversion report read submissions through these instead of the collection.
 
 **Ids are persisted.** `componentId` (`form`, `formField`) is stored in every screen document and does not change. `pluginId` is stored beside it and is `forms` (`BUNDLE_ID`); the renderer reads it to decide which bundles must register before first paint, so a page with no form on it does not wait for this package.
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aglyn/plugins-forms",
-  "version": "1.0.0-beta.221",
+  "version": "1.0.0-beta.222",
   "license": "Apache-2.0",
   "homepage": "https://aglyn.com",
   "repository": {
@@ -25,17 +25,19 @@
     "./package.json": "./package.json"
   },
   "dependencies": {
-    "@aglyn/aglyn": "1.0.0-beta.221",
-    "@aglyn/shared-data-enums": "1.0.0-beta.221",
-    "@aglyn/shared-data-mdi": "1.0.0-beta.221",
-    "@aglyn/shared-ui-jsx": "1.0.0-beta.221",
-    "@aglyn/shared-ui-jsx-forms": "1.0.0-beta.221",
-    "@aglyn/shared-ui-snackstack": "1.0.0-beta.221",
-    "@aglyn/shared-util-http": "1.0.0-beta.221",
-    "@aglyn/shared-util-timestamp": "1.0.0-beta.221",
-    "@aglyn/shared-util-tools": "1.0.0-beta.221",
-    "@aglyn/tenant-data-admin": "1.0.0-beta.221",
-    "@aglyn/tenant-feature-instance": "1.0.0-beta.221",
+    "@aglyn/aglyn": "1.0.0-beta.222",
+    "@aglyn/shared-data-enums": "1.0.0-beta.222",
+    "@aglyn/shared-data-mdi": "1.0.0-beta.222",
+    "@aglyn/shared-ui-jsx": "1.0.0-beta.222",
+    "@aglyn/shared-ui-jsx-forms": "1.0.0-beta.222",
+    "@aglyn/shared-ui-snackstack": "1.0.0-beta.222",
+    "@aglyn/shared-util-email": "1.0.0-beta.222",
+    "@aglyn/shared-util-http": "1.0.0-beta.222",
+    "@aglyn/shared-util-timestamp": "1.0.0-beta.222",
+    "@aglyn/shared-util-tools": "1.0.0-beta.222",
+    "@aglyn/tenant-data-admin": "1.0.0-beta.222",
+    "@aglyn/tenant-feature-instance": "1.0.0-beta.222",
+    "@aglyn/tenant-runtime": "1.0.0-beta.222",
     "@swc/helpers": "0.5.23"
   },
   "peerDependencies": {

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

@@ -25,7 +25,7 @@ import { useConsoleWidgetSlot } from "@aglyn/aglyn/app-utils/console-widget-slot
 // 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 { AppLink, CardDisplay, GridItems, MdiIcon, useConfirmationContext, 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";
@@ -34,7 +34,7 @@ import { useConsoleHostRoute, useFirestore, useFirestoreCollection, useFirestore
 import ContainerPicker from "@aglyn/tenant-feature-instance/components/container-picker";
 import { collection, doc, limit, query, updateDoc } from "firebase/firestore";
 import { useRouter } from "next/navigation";
-import { useCallback, useMemo, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { FORM_CONTACT_FIELDS_ZONE } from "./form-zones.js";
 import { FORMS_DOCUMENT_SEGMENT } from "../constants/bundle-common.js";
 import FormDesignPreview from "./form-design-preview.component.js";
@@ -73,8 +73,8 @@ import useFormStatsRecountApi from "./use-form-stats-recount-api.js";
  * 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;
+    var _ref, _ref1, _ref2, _ref3;
+    var _form_routing, _form_routing1;
     const { hostId, formId, basePath, canPublish, hostRoleLoaded } = props;
     const firestore = useFirestore();
     const ContactFieldsZone = useConsoleWidgetSlot();
@@ -101,6 +101,7 @@ import useFormStatsRecountApi from "./use-form-stats-recount-api.js";
     const router = useRouter();
     const { enqueueSnackbar } = useSnackbar();
     const { queueLoading } = useLoading();
+    const { confirm } = useConfirmationContext();
     const { data: form, status } = useFirestoreDoc(()=>doc(firestore, 'hosts', hostId, 'forms', formId), [
         firestore,
         hostId,
@@ -225,31 +226,79 @@ import useFormStatsRecountApi from "./use-form-stats-recount-api.js";
         effectiveLead,
         effectiveConsent
     ]);
-    const handleSave = useCallback(async ()=>{
+    /**
+   * WHICH CARD IS WRITING, or null.
+   *
+   * Each card saves what it shows and nothing else (AGL-3508). One handler
+   * used to write the name, the campaigns, the lead switch and the consent
+   * field together from a button in Details, so a routing change made in its
+   * own card sat unsaved until somebody pressed Save somewhere else — and was
+   * dropped without a word when they left instead.
+   */ const [saving, setSaving] = useState(null);
+    /**
+   * Details: the name and the campaigns. Never `routing` or the consent
+   * field, so saving a rename cannot also commit a half-made routing change.
+   */ const handleSaveDetails = useCallback(async ()=>{
         const dequeue = queueLoading();
+        setSaving('details');
         try {
-            var _ref;
-            var _form_routing;
             await updateDoc(doc(firestore, 'hosts', hostId, 'forms', formId), _extends({}, name != null ? _extends({
                 displayName: name.trim()
             }, Aglyn.formListFields({
                 id: formId,
                 displayName: name.trim(),
                 slug: form == null ? void 0 : form.slug
-            })) : {}, lead != null ? {
+            })) : {}, campaignIds != null ? Aglyn.formCampaignFields(campaignIds) : {}, {
+                updatedAt: Timestamp.now()
+            }));
+            setName(null);
+            setCampaignIds(null);
+            enqueueSnackbar('Details saved', {
+                variant: 'success',
+                persist: false
+            });
+        } catch (error) {
+            console.error(error);
+            enqueueSnackbar('An error has occurred', {
+                variant: 'error',
+                allowDuplicate: true
+            });
+        } finally{
+            setSaving(null);
+            dequeue();
+        }
+    }, [
+        firestore,
+        hostId,
+        formId,
+        form,
+        name,
+        campaignIds,
+        queueLoading,
+        enqueueSnackbar
+    ]);
+    /**
+   * CRM routing: the lead switch and the consent field, together, because
+   * the contract judges them together — a lead surface with no opt-in field
+   * is one of the breaks the warning in this card names.
+   */ const handleSaveRouting = useCallback(async ()=>{
+        const dequeue = queueLoading();
+        setSaving('routing');
+        try {
+            var _ref;
+            var _form_routing;
+            await updateDoc(doc(firestore, 'hosts', hostId, 'forms', formId), _extends({}, lead != null ? {
                 routing: _extends({}, (_ref = form == null ? void 0 : form.routing) != null ? _ref : {}, {
                     lead
                 })
             } : {}, consentField != null ? {
                 consentFieldName: consentField.trim()
-            } : {}, campaignIds != null ? Aglyn.formCampaignFields(campaignIds) : {}, {
+            } : {}, {
                 updatedAt: Timestamp.now()
             }));
-            setName(null);
             setLead(null);
             setConsentField(null);
-            setCampaignIds(null);
-            enqueueSnackbar('Form saved', {
+            enqueueSnackbar('CRM routing saved', {
                 variant: 'success',
                 persist: false
             });
@@ -272,6 +321,7 @@ import useFormStatsRecountApi from "./use-form-stats-recount-api.js";
                 allowDuplicate: true
             });
         } finally{
+            setSaving(null);
             dequeue();
         }
     }, [
@@ -279,14 +329,57 @@ import useFormStatsRecountApi from "./use-form-stats-recount-api.js";
         hostId,
         formId,
         form,
-        name,
         lead,
         consentField,
-        campaignIds,
         queueLoading,
         enqueueSnackbar,
         recountFormStats
     ]);
+    /*
+   * Whether each card holds a change, measured against what is stored rather
+   * than against "was touched": flipping the switch and flipping it back is
+   * no change, and a Save that writes nothing should not be offered.
+   */ const detailsDirty = name != null && name.trim() !== String((_ref1 = form == null ? void 0 : form.displayName) != null ? _ref1 : '') || campaignIds != null && !Aglyn.containerMembershipUnchanged(storedCampaigns, campaignIds);
+    const routingDirty = lead != null && lead !== ((form == null ? void 0 : (_form_routing1 = form.routing) == null ? void 0 : _form_routing1.lead) === true) || consentField != null && consentField.trim() !== String((_ref2 = form == null ? void 0 : form.consentFieldName) != null ? _ref2 : '');
+    const dirty = detailsDirty || routingDirty;
+    /**
+   * Read from inside handlers that must not re-subscribe on every keystroke:
+   * `beforeunload` and the besigner buttons need the CURRENT answer.
+   */ const dirtyRef = useRef(false);
+    dirtyRef.current = dirty;
+    /**
+   * The exits a router cannot mediate: reload, tab close, or a link out of
+   * the console. Registered only while a card holds a change, so a clean page
+   * never nags — the same guard a content entry's editor keeps. The App
+   * Router has no navigation-blocking hook, so an in-console link is guarded
+   * only where this surface makes the move itself (the besigner buttons,
+   * below); everywhere else the enabled Save and Discard in each card's
+   * header are what say a change is waiting.
+   */ useEffect(()=>{
+        if (!dirty) return;
+        const warn = (event)=>{
+            event.preventDefault();
+            event.returnValue = '';
+        };
+        window.addEventListener('beforeunload', warn);
+        return ()=>window.removeEventListener('beforeunload', warn);
+    }, [
+        dirty
+    ]);
+    /**
+   * Asked before this surface navigates away on its own — opening the
+   * besigner — while a card holds a change. `confirm` resolves with no value
+   * and REJECTS on cancel.
+   */ const confirmLeave = useCallback(async ()=>{
+        if (!dirtyRef.current) return true;
+        return confirm({
+            title: 'Discard unsaved changes?',
+            description: 'This form has changes that have not been saved yet. Opening the ' + 'besigner now discards them.',
+            confirmationText: 'Discard and open'
+        }).then(()=>true).catch(()=>false);
+    }, [
+        confirm
+    ]);
     /**
    * Makes one version the version the live sites serve.
    *
@@ -352,6 +445,7 @@ import useFormStatsRecountApi from "./use-form-stats-recount-api.js";
    * on the form the site was ALREADY submitting rather than a blank canvas.
    */ const handleOpen = useCallback((targetVersionId)=>async ()=>{
             if (opening) return;
+            if (!await confirmLeave()) return;
             setOpening(true);
             try {
                 var _ref;
@@ -415,6 +509,7 @@ import useFormStatsRecountApi from "./use-form-stats-recount-api.js";
             }
         }, [
         opening,
+        confirmLeave,
         createHostVersion,
         publishedVersionId,
         versions,
@@ -427,7 +522,6 @@ import useFormStatsRecountApi from "./use-form-stats-recount-api.js";
         host,
         enqueueSnackbar
     ]);
-    const dirty = name != null || lead != null || consentField != null || campaignIds != null && !Aglyn.containerMembershipUnchanged(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…';
@@ -473,6 +567,18 @@ import useFormStatsRecountApi from "./use-form-stats-recount-api.js";
                         anchor: '#build-a-form',
                         excerpt: 'The id is what every submission is filed under, so ' + 'renaming a form never splits its history.'
                     }),
+                    HeaderProps: {
+                        action: /*#__PURE__*/ _jsx(FormDetailCardActions, {
+                            section: "details",
+                            dirty: detailsDirty,
+                            saving: saving,
+                            onDiscard: ()=>{
+                                setName(null);
+                                setCampaignIds(null);
+                            },
+                            onSave: handleSaveDetails
+                        })
+                    },
                     contentGutterX: true,
                     contentGutterY: true,
                     children: /*#__PURE__*/ _jsxs(Stack, {
@@ -481,7 +587,7 @@ import useFormStatsRecountApi from "./use-form-stats-recount-api.js";
                             /*#__PURE__*/ _jsx(TextField, {
                                 label: "Display name",
                                 size: "small",
-                                value: (_ref1 = name != null ? name : form == null ? void 0 : form.displayName) != null ? _ref1 : '',
+                                value: (_ref3 = name != null ? name : form == null ? void 0 : form.displayName) != null ? _ref3 : '',
                                 onChange: (event)=>setName(event.target.value),
                                 fullWidth: true
                             }),
@@ -497,18 +603,6 @@ import useFormStatsRecountApi from "./use-form-stats-recount-api.js";
                                 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'
-                                })
                             })
                         ]
                     })
@@ -525,6 +619,18 @@ import useFormStatsRecountApi from "./use-form-stats-recount-api.js";
                         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.'
                     }),
+                    HeaderProps: {
+                        action: /*#__PURE__*/ _jsx(FormDetailCardActions, {
+                            section: "routing",
+                            dirty: routingDirty,
+                            saving: saving,
+                            onDiscard: ()=>{
+                                setLead(null);
+                                setConsentField(null);
+                            },
+                            onSave: handleSaveRouting
+                        })
+                    },
                     contentGutterX: true,
                     contentGutterY: true,
                     children: /*#__PURE__*/ _jsxs(Stack, {
@@ -780,7 +886,8 @@ import useFormStatsRecountApi from "./use-form-stats-recount-api.js";
                 },
                 children: /*#__PURE__*/ _jsx(FormSubmissionsCard, {
                     hostId: hostId,
-                    formId: formId
+                    formId: formId,
+                    formName: form == null ? void 0 : form.displayName
                 })
             },
             {
@@ -831,6 +938,36 @@ import useFormStatsRecountApi from "./use-form-stats-recount-api.js";
     });
 }
 FormDetailCard.displayName = 'FormDetailCard';
+/**
+ * One card's Discard and Save, in that card's header (AGL-3508).
+ *
+ * Each is disabled until its card holds a change, and both while either card
+ * is writing: the two saves touch one document, and a second write landing
+ * mid-flight would be judged against a form the first is still changing.
+ */ function FormDetailCardActions(props) {
+    const { section, dirty, saving, onDiscard, onSave } = props;
+    return /*#__PURE__*/ _jsxs(Stack, {
+        direction: "row",
+        spacing: 1,
+        children: [
+            /*#__PURE__*/ _jsx(Button, {
+                size: "small",
+                variant: "text",
+                disabled: !dirty || saving !== null,
+                onClick: onDiscard,
+                children: 'Discard changes'
+            }),
+            /*#__PURE__*/ _jsx(Button, {
+                size: "small",
+                variant: "contained",
+                color: "primary",
+                disabled: !dirty || saving !== null,
+                onClick: ()=>void onSave(),
+                children: saving === section ? 'Saving…' : 'Save'
+            })
+        ]
+    });
+}
 /**
  * The `form` node inside a published design.
  *