@aglyn/plugins-crm 1.0.0-beta.200 → 1.0.0-beta.202

package/src/lib/components/lead-properties-card.js

@@ -18,7 +18,7 @@ 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 { mdiAccountCancelOutline } from "@aglyn/shared-data-mdi";
-import { AppLink, MdiIcon } from "@aglyn/shared-ui-jsx";
+import { AppLink, CardDisplay, MdiIcon } from "@aglyn/shared-ui-jsx";
 import { useSnackbar } from "@aglyn/shared-ui-snackstack";
 import { useFirestore, writeGuardedBySeed } from "@aglyn/tenant-feature-instance";
 import { Alert, Button, FormControl, InputLabel, MenuItem, Select, Stack, TextField, Tooltip, Typography } from "@mui/material";
@@ -89,15 +89,23 @@ const TEXT_MAX = Aglyn.CRM_LEAD_TEXT_MAX;
  * What the team knows and decides about a lead: status, owner, notes, and
  * the identity and consent the capture recorded (AGL-2608).
  *
+ * Two cards. The record's header carries the identity, the status and owner,
+ * the consent the capture recorded and the record's actions. **Details**
+ * under it carries the profile, the org's own lead fields under **More
+ * fields**, and the notes — one card with one Save in its header, the way
+ * Salesforce keeps a record's standard and custom fields in one Details
+ * section.
+ *
  * Status and owner are single-field client writes — the rules let a site
  * admin, editor or author update `hosts/{hostId}/leads`, and a one-field
- * `update` cannot roll anything else back. Notes are a text field seeded
- * from the document, so that save goes through `writeGuardedBySeed`: a draft
- * edited over a cached read would otherwise overwrite a newer note with an
- * older one plus a sentence.
+ * `update` cannot roll anything else back. The details are drafts seeded
+ * from the document, so their save goes through `writeGuardedBySeed`: a
+ * draft edited over a cached read would otherwise overwrite a newer note or
+ * profile with an older one.
  *
- * Converted leads are read-only here. Their status is the conversion, and
- * the actions become links to what the conversion made.
+ * Converted leads are read-only here, but for the notes. Their status is the
+ * conversion, and the header's actions become links to what the conversion
+ * made.
  */ export function LeadPropertiesCard(props) {
     var _lead_phone, _lead_notes, _lead_email, _lead_email1, _lead_name, _lead_leadSource;
     const { hostId, consentGroup, orgId, leadId, lead, leadStatus, fromCache, basePath, roster, onConvert, onUnqualify, extraMenuItems = [], banner, extraChips, erasurePending = false, org } = props;
@@ -121,16 +129,16 @@ const TEXT_MAX = Aglyn.CRM_LEAD_TEXT_MAX;
     // after the status it shows — see `LeadOwnerSelect`.
     const statusLabelId = useId();
     const [notesDirty, setNotesDirty] = useState(false);
-    const [savingNotes, setSavingNotes] = useState(false);
     /*
    * THE LEAD'S OWN PROFILE (AGL-3231) — company, title, phone, website,
-   * address, tags, lead source — edited as one block with one Save, the
-   * way the contact's Properties card saves. Seeded from the document and
-   * guarded on save like the notes: a draft edited over a cached read must
-   * not overwrite a newer profile with an older one.
+   * address, tags, lead source — edited in the Details card with the notes
+   * and the custom fields, under one Save, the way the contact's Properties
+   * card saves. Seeded from the document and guarded on save: a draft
+   * edited over a cached read must not overwrite a newer profile with an
+   * older one.
    */ const [profile, setProfile] = useState(()=>profileDraftFrom(lead));
     const [profileDirty, setProfileDirty] = useState(false);
-    const [savingProfile, setSavingProfile] = useState(false);
+    const [saving, setSaving] = useState(false);
     const [profileErrors, setProfileErrors] = useState({});
     useEffect(()=>{
         if (!profileDirty) setProfile(profileDraftFrom(lead));
@@ -180,7 +188,7 @@ const TEXT_MAX = Aglyn.CRM_LEAD_TEXT_MAX;
         lead.notes,
         notesDirty
     ]);
-    const write = async (fields, done)=>{
+    /** One update of the lead, and whether it landed. */ const write = async (fields, done)=>{
         try {
             const ref = refFor();
             if (!ref) {
@@ -188,7 +196,7 @@ const TEXT_MAX = Aglyn.CRM_LEAD_TEXT_MAX;
                     variant: 'warning',
                     persist: false
                 });
-                return;
+                return false;
             }
             await updateDoc(ref, _extends({}, fields, {
                 updatedAt: serverTimestamp()
@@ -197,70 +205,76 @@ const TEXT_MAX = Aglyn.CRM_LEAD_TEXT_MAX;
                 variant: 'success',
                 persist: false
             });
+            return true;
         } catch (error) {
             enqueueSnackbar(error instanceof Error ? error.message : 'The lead could not be updated.', {
                 variant: 'error'
             });
+            return false;
         }
     };
-    const saveNotes = async ()=>{
-        setSavingNotes(true);
-        const verdict = await writeGuardedBySeed({
-            subject: 'lead',
-            fromCache,
-            unreadable: leadStatus === 'error'
-        }, ()=>write({
-                notes: notes.trim().slice(0, NOTES_MAX)
-            }, 'Notes saved'));
-        setSavingNotes(false);
-        if (!verdict.ok) {
-            var _verdict_message;
-            enqueueSnackbar((_verdict_message = verdict.message) != null ? _verdict_message : 'The notes could not be saved.', {
-                variant: 'warning'
-            });
-            return;
-        }
+    /*
+   * What Save is offered for: a profile field edited, a custom value that
+   * differs from the stored map, or the notes. Touched-and-put-back does
+   * not count for a custom value — the draft keeps the key either way, and
+   * a Save that wrote nothing would still bump `updatedAt`.
+   */ const customChanged = crmCustomDraftChanges(storedCustom, custom).length > 0;
+    const dirty = profileDirty || customChanged || notesDirty;
+    /** Every draft back to what the document holds. */ const discard = ()=>{
+        var _lead_notes;
+        setProfile(profileDraftFrom(lead));
+        setProfileDirty(false);
+        setProfileErrors({});
+        setCustom({});
+        setNotes(String((_lead_notes = lead.notes) != null ? _lead_notes : ''));
         setNotesDirty(false);
     };
     /*
-   * What Save is offered for: a profile field edited, or a custom value
-   * that differs from the stored map. Touched-and-put-back does not count
-   * — the draft keeps the key either way, and a Save that wrote nothing
-   * would still bump `updatedAt`.
-   */ const dirty = profileDirty || crmCustomDraftChanges(storedCustom, custom).length > 0;
-    const saveProfile = async ()=>{
-        const { patch, errors } = Aglyn.normalizeCrmLeadProfile({
-            company: profile.company,
-            jobTitle: profile.jobTitle,
-            phone: profile.phone,
-            website: profile.website,
-            leadSource: profile.leadSource,
-            tags: profile.tags,
-            address: profile.address
-        });
-        setProfileErrors(errors);
-        if (Object.keys(errors).length) return;
-        /*
-     * A required field the reader CLEARED is refused; one the lead has
-     * always lacked is not this save's to demand, or a field added after
-     * the lead was captured would block every later edit to its company.
-     */ const missing = crmCustomDraftMissingRequired(fields.active, storedCustom, custom, 'edit');
-        if (missing.length) {
-            enqueueSnackbar(`${missing.join(', ')} ${missing.length > 1 ? 'are' : 'is'} required.`, {
-                variant: 'warning'
+   * The Details card's one Save: the profile and the custom values while
+   * the lead is open, and the notes, in one update. A converted lead's
+   * profile is the contact's now, so only its notes are written.
+   */ const saveDetails = async ()=>{
+        const update = {};
+        if (!converted && (profileDirty || customChanged)) {
+            const { patch, errors } = Aglyn.normalizeCrmLeadProfile({
+                company: profile.company,
+                jobTitle: profile.jobTitle,
+                phone: profile.phone,
+                website: profile.website,
+                leadSource: profile.leadSource,
+                tags: profile.tags,
+                address: profile.address
             });
-            return;
+            setProfileErrors(errors);
+            if (Object.keys(errors).length) return;
+            /*
+       * A required field the reader CLEARED is refused; one the lead has
+       * always lacked is not this save's to demand, or a field added after
+       * the lead was captured would block every later edit to its company.
+       */ const missing = crmCustomDraftMissingRequired(fields.active, storedCustom, custom, 'edit');
+            if (missing.length) {
+                enqueueSnackbar(`${missing.join(', ')} ${missing.length > 1 ? 'are' : 'is'} required.`, {
+                    variant: 'warning'
+                });
+                return;
+            }
+            const profileFields = profileWrite(patch);
+            Object.assign(update, profileFields, crmCustomDraftWrites(storedCustom, custom), // The company, title, tags and lead source are what the Leads list
+            // searches and filters by (AGL-3321).
+            crmClientListFields('leads', lead, profileFields, LEAD_CLIENT_LIST_FIELDS));
         }
-        setSavingProfile(true);
+        if (notesDirty) update['notes'] = notes.trim().slice(0, NOTES_MAX);
+        if (!Object.keys(update).length) return;
+        setSaving(true);
+        let landed = false;
         const verdict = await writeGuardedBySeed({
             subject: 'lead',
             fromCache,
             unreadable: leadStatus === 'error'
-        }, ()=>{
-            const profileFields = profileWrite(patch);
-            return write(_extends({}, profileFields, crmCustomDraftWrites(storedCustom, custom), crmClientListFields('leads', lead, profileFields, LEAD_CLIENT_LIST_FIELDS)), 'Lead saved');
+        }, async ()=>{
+            landed = await write(update, 'Lead saved');
         });
-        setSavingProfile(false);
+        setSaving(false);
         if (!verdict.ok) {
             var _verdict_message;
             enqueueSnackbar((_verdict_message = verdict.message) != null ? _verdict_message : 'The lead could not be saved.', {
@@ -268,247 +282,271 @@ const TEXT_MAX = Aglyn.CRM_LEAD_TEXT_MAX;
             });
             return;
         }
+        if (!landed) return;
         setProfileDirty(false);
+        setNotesDirty(false);
         // The draft is spent: what it held is stored, and the controls read
         // the document again.
         setCustom({});
     };
     const consent = Aglyn.readMarketingBasis(lead, consentGroup);
     const consentLine = consent.basis === 'granted' ? `Opted in to marketing${consent.basisAtMs ? ` on ${new Date(consent.basisAtMs).toLocaleDateString()}` : ''}` : consent.basis === 'declined' ? 'Declined marketing' : 'No marketing consent recorded — this lead cannot be emailed marketing';
-    return /*#__PURE__*/ _jsx(CrmRecordHeader, {
-        kind: "Lead",
-        title: String(lead['name'] || lead['email'] || leadId),
-        // The name is the heading; the address is the one line under it,
-        // unless the address IS the name, in which case there is no second fact.
-        subtitle: lead['name'] ? String((_lead_email = lead['email']) != null ? _lead_email : '') : undefined,
-        help: Aglyn.pluginDocsHelp('crmLeads', {
-            anchor: '#working-a-lead-from-the-row'
-        }),
-        backHref: routes.section('leads'),
-        backLabel: "Back to leads",
-        // The booking door (AGL-2660), while the lead is still the record
-        // being worked: once converted, the contact is where a meeting is
-        // booked from, and the links below lead there.
-        booking: converted ? undefined : {
-            hostId,
-            org,
-            kind: 'lead',
-            recordId: leadId
-        },
-        actions: /*#__PURE__*/ _jsxs(_Fragment, {
-            children: [
-                converted ? null : erasurePending ? /*#__PURE__*/ _jsx(Tooltip, {
-                    title: CONVERT_PENDING_ERASURE_REASON,
-                    children: /*#__PURE__*/ _jsx("span", {
-                        children: /*#__PURE__*/ _jsx(Button, {
+    return /*#__PURE__*/ _jsxs(_Fragment, {
+        children: [
+            /*#__PURE__*/ _jsx(CrmRecordHeader, {
+                kind: "Lead",
+                title: String(lead['name'] || lead['email'] || leadId),
+                // The name is the heading; the address is the one line under it,
+                // unless the address IS the name, in which case there is no second fact.
+                subtitle: lead['name'] ? String((_lead_email = lead['email']) != null ? _lead_email : '') : undefined,
+                help: Aglyn.pluginDocsHelp('crmLeads', {
+                    anchor: '#working-a-lead-from-the-row'
+                }),
+                backHref: routes.section('leads'),
+                backLabel: "Back to leads",
+                // The booking door (AGL-2660), while the lead is still the record
+                // being worked: once converted, the contact is where a meeting is
+                // booked from, and the links below lead there.
+                booking: converted ? undefined : {
+                    hostId,
+                    org,
+                    kind: 'lead',
+                    recordId: leadId
+                },
+                actions: /*#__PURE__*/ _jsxs(_Fragment, {
+                    children: [
+                        converted ? /*#__PURE__*/ _jsxs(_Fragment, {
+                            children: [
+                                /*#__PURE__*/ _jsx(Button, _extends({
+                                    component: AppLink
+                                }, {
+                                    componentVariant: 'naked',
+                                    nativeButton: false
+                                }, {
+                                    href: routes.contact(String(lead.convertedContactId)),
+                                    size: "small",
+                                    variant: "outlined",
+                                    children: 'Open contact'
+                                })),
+                                lead.companyId ? /*#__PURE__*/ _jsx(Button, _extends({
+                                    component: AppLink
+                                }, {
+                                    componentVariant: 'naked',
+                                    nativeButton: false
+                                }, {
+                                    href: routes.company(lead.companyId),
+                                    size: "small",
+                                    variant: "outlined",
+                                    children: 'Open company'
+                                })) : null,
+                                lead.dealId ? /*#__PURE__*/ _jsx(Button, _extends({
+                                    component: AppLink
+                                }, {
+                                    componentVariant: 'naked',
+                                    nativeButton: false
+                                }, {
+                                    href: routes.deal(lead.dealId),
+                                    size: "small",
+                                    variant: "outlined",
+                                    children: 'Open deal'
+                                })) : null
+                            ]
+                        }) : erasurePending ? /*#__PURE__*/ _jsx(Tooltip, {
+                            title: CONVERT_PENDING_ERASURE_REASON,
+                            children: /*#__PURE__*/ _jsx("span", {
+                                children: /*#__PURE__*/ _jsx(Button, {
+                                    size: "small",
+                                    variant: "contained",
+                                    disabled: true,
+                                    children: 'Convert'
+                                })
+                            })
+                        }) : /*#__PURE__*/ _jsx(Button, {
                             size: "small",
                             variant: "contained",
-                            disabled: true,
+                            onClick: onConvert,
                             children: 'Convert'
+                        }),
+                        /*#__PURE__*/ _jsx(CrmCallButton, {
+                            hostId: hostId,
+                            org: org,
+                            link: {
+                                leadId
+                            },
+                            phone: leadPhone
+                        }),
+                        /*#__PURE__*/ _jsx(CrmSendEmailButton, {
+                            hostId: hostId,
+                            leadId: leadId,
+                            email: String((_lead_email1 = lead['email']) != null ? _lead_email1 : ''),
+                            name: String((_lead_name = lead['name']) != null ? _lead_name : ''),
+                            emailState: emailState
                         })
-                    })
-                }) : /*#__PURE__*/ _jsx(Button, {
-                    size: "small",
-                    variant: "contained",
-                    onClick: onConvert,
-                    children: 'Convert'
-                }),
-                /*#__PURE__*/ _jsx(CrmCallButton, {
-                    hostId: hostId,
-                    org: org,
-                    link: {
-                        leadId
-                    },
-                    phone: leadPhone
-                }),
-                /*#__PURE__*/ _jsx(CrmSendEmailButton, {
-                    hostId: hostId,
-                    leadId: leadId,
-                    email: String((_lead_email1 = lead['email']) != null ? _lead_email1 : ''),
-                    name: String((_lead_name = lead['name']) != null ? _lead_name : ''),
-                    emailState: emailState
-                })
-            ]
-        }),
-        menuItems: [
-            ...open ? [
-                {
-                    key: 'unqualify',
-                    label: 'Unqualify',
-                    icon: /*#__PURE__*/ _jsx(MdiIcon, {
-                        path: mdiAccountCancelOutline.path,
-                        size: 0.8
-                    }),
-                    destructive: true,
-                    onClick: onUnqualify
-                }
-            ] : [],
-            ...extraMenuItems
-        ],
-        chips: /*#__PURE__*/ _jsxs(_Fragment, {
-            children: [
-                /*#__PURE__*/ _jsx(LeadStatusChip, {
-                    lead: lead
-                }),
-                /*#__PURE__*/ _jsx(CrmEmailStateChip, {
-                    state: emailState
-                }),
-                /*#__PURE__*/ _jsx(CrmRecordChip, {
-                    label: "Owner",
-                    value: lead.ownerUid ? roster.labelFor(lead.ownerUid) : undefined
+                    ]
                 }),
-                extraChips
-            ]
-        }),
-        children: /*#__PURE__*/ _jsxs(Stack, {
-            spacing: 3,
-            children: [
-                banner,
-                leadPhone ? /*#__PURE__*/ _jsx(Fact, {
-                    label: "Phone",
-                    children: /*#__PURE__*/ _jsx(CrmPhoneLink, {
-                        phone: leadPhone
-                    })
-                }) : null,
-                /*#__PURE__*/ _jsx(Fact, {
-                    label: "Marketing consent",
-                    children: consentLine
+                menuItems: [
+                    ...open ? [
+                        {
+                            key: 'unqualify',
+                            label: 'Unqualify',
+                            icon: /*#__PURE__*/ _jsx(MdiIcon, {
+                                path: mdiAccountCancelOutline.path,
+                                size: 0.8
+                            }),
+                            destructive: true,
+                            onClick: onUnqualify
+                        }
+                    ] : [],
+                    ...extraMenuItems
+                ],
+                chips: /*#__PURE__*/ _jsxs(_Fragment, {
+                    children: [
+                        /*#__PURE__*/ _jsx(LeadStatusChip, {
+                            lead: lead
+                        }),
+                        /*#__PURE__*/ _jsx(CrmEmailStateChip, {
+                            state: emailState
+                        }),
+                        /*#__PURE__*/ _jsx(CrmRecordChip, {
+                            label: "Owner",
+                            value: lead.ownerUid ? roster.labelFor(lead.ownerUid) : undefined
+                        }),
+                        extraChips
+                    ]
                 }),
-                /*#__PURE__*/ _jsxs(Stack, {
-                    direction: {
-                        xs: 'column',
-                        md: 'row'
-                    },
-                    spacing: 2,
+                children: /*#__PURE__*/ _jsxs(Stack, {
+                    spacing: 3,
                     children: [
-                        converted ? /*#__PURE__*/ _jsx(Fact, {
-                            label: "Status",
-                            children: /*#__PURE__*/ _jsxs(Stack, {
-                                direction: "row",
-                                spacing: 1,
-                                sx: {
-                                    alignItems: 'center'
-                                },
-                                children: [
-                                    /*#__PURE__*/ _jsx(LeadStatusChip, {
-                                        lead: lead
-                                    }),
-                                    /*#__PURE__*/ _jsx(Typography, {
-                                        variant: "body2",
-                                        color: "text.secondary",
-                                        children: lead.convertedAtMs ? `Converted ${new Date(lead.convertedAtMs).toLocaleString()}` : 'Converted'
-                                    })
-                                ]
+                        banner,
+                        leadPhone ? /*#__PURE__*/ _jsx(Fact, {
+                            label: "Phone",
+                            children: /*#__PURE__*/ _jsx(CrmPhoneLink, {
+                                phone: leadPhone
                             })
-                        }) : /*#__PURE__*/ _jsxs(FormControl, {
-                            size: "small",
-                            sx: {
-                                minWidth: 200
+                        }) : null,
+                        /*#__PURE__*/ _jsx(Fact, {
+                            label: "Marketing consent",
+                            children: consentLine
+                        }),
+                        /*#__PURE__*/ _jsxs(Stack, {
+                            direction: {
+                                xs: 'column',
+                                md: 'row'
                             },
+                            spacing: 2,
                             children: [
-                                /*#__PURE__*/ _jsx(InputLabel, {
-                                    id: statusLabelId,
-                                    children: 'Status'
-                                }),
-                                /*#__PURE__*/ _jsxs(Select, {
-                                    labelId: statusLabelId,
+                                converted ? /*#__PURE__*/ _jsx(Fact, {
                                     label: "Status",
-                                    value: status === 'unqualified' ? 'unqualified' : status,
-                                    onChange: (event)=>{
-                                        const next = String(event.target.value);
-                                        if (next === 'unqualified') {
-                                            onUnqualify();
-                                            return;
-                                        }
-                                        // Reopening drops the reason with the closed state: a lead
-                                        // being worked again is not "unqualified because …".
-                                        void write(_extends({
-                                            status: next
-                                        }, status === 'unqualified' ? {
-                                            unqualifiedReason: deleteField()
-                                        } : {}), 'Status updated');
+                                    children: /*#__PURE__*/ _jsxs(Stack, {
+                                        direction: "row",
+                                        spacing: 1,
+                                        sx: {
+                                            alignItems: 'center'
+                                        },
+                                        children: [
+                                            /*#__PURE__*/ _jsx(LeadStatusChip, {
+                                                lead: lead
+                                            }),
+                                            /*#__PURE__*/ _jsx(Typography, {
+                                                variant: "body2",
+                                                color: "text.secondary",
+                                                children: lead.convertedAtMs ? `Converted ${new Date(lead.convertedAtMs).toLocaleString()}` : 'Converted'
+                                            })
+                                        ]
+                                    })
+                                }) : /*#__PURE__*/ _jsxs(FormControl, {
+                                    size: "small",
+                                    sx: {
+                                        minWidth: 200
                                     },
                                     children: [
-                                        /*#__PURE__*/ _jsx(MenuItem, {
-                                            value: "new",
-                                            children: Aglyn.CRM_LEAD_STATUS_LABELS.new
-                                        }),
-                                        /*#__PURE__*/ _jsx(MenuItem, {
-                                            value: "working",
-                                            children: Aglyn.CRM_LEAD_STATUS_LABELS.working
+                                        /*#__PURE__*/ _jsx(InputLabel, {
+                                            id: statusLabelId,
+                                            children: 'Status'
                                         }),
-                                        /*#__PURE__*/ _jsx(MenuItem, {
-                                            value: "unqualified",
-                                            children: `${Aglyn.CRM_LEAD_STATUS_LABELS.unqualified}…`
+                                        /*#__PURE__*/ _jsxs(Select, {
+                                            labelId: statusLabelId,
+                                            label: "Status",
+                                            value: status === 'unqualified' ? 'unqualified' : status,
+                                            onChange: (event)=>{
+                                                const next = String(event.target.value);
+                                                if (next === 'unqualified') {
+                                                    onUnqualify();
+                                                    return;
+                                                }
+                                                // Reopening drops the reason with the closed state: a lead
+                                                // being worked again is not "unqualified because …".
+                                                void write(_extends({
+                                                    status: next
+                                                }, status === 'unqualified' ? {
+                                                    unqualifiedReason: deleteField()
+                                                } : {}), 'Status updated');
+                                            },
+                                            children: [
+                                                /*#__PURE__*/ _jsx(MenuItem, {
+                                                    value: "new",
+                                                    children: Aglyn.CRM_LEAD_STATUS_LABELS.new
+                                                }),
+                                                /*#__PURE__*/ _jsx(MenuItem, {
+                                                    value: "working",
+                                                    children: Aglyn.CRM_LEAD_STATUS_LABELS.working
+                                                }),
+                                                /*#__PURE__*/ _jsx(MenuItem, {
+                                                    value: "unqualified",
+                                                    children: `${Aglyn.CRM_LEAD_STATUS_LABELS.unqualified}…`
+                                                })
+                                            ]
                                         })
                                     ]
+                                }),
+                                /*#__PURE__*/ _jsx(LeadOwnerSelect, {
+                                    value: lead.ownerUid,
+                                    roster: roster,
+                                    fullWidth: false,
+                                    onChange: (uid)=>void write({
+                                            ownerUid: uid || deleteField()
+                                        }, uid ? 'Owner assigned' : 'Owner cleared')
                                 })
                             ]
                         }),
-                        /*#__PURE__*/ _jsx(LeadOwnerSelect, {
-                            value: lead.ownerUid,
-                            roster: roster,
-                            fullWidth: false,
-                            onChange: (uid)=>void write({
-                                    ownerUid: uid || deleteField()
-                                }, uid ? 'Owner assigned' : 'Owner cleared')
-                        })
+                        status === 'unqualified' && lead.unqualifiedReason ? /*#__PURE__*/ _jsx(Alert, {
+                            severity: "info",
+                            children: `Unqualified: ${lead.unqualifiedReason}`
+                        }) : null
                     ]
+                })
+            }),
+            /*#__PURE__*/ _jsx(CardDisplay, {
+                header: 'Details',
+                help: Aglyn.pluginDocsHelp('crmLeads', {
+                    anchor: '#a-leads-page'
                 }),
-                status === 'unqualified' && lead.unqualifiedReason ? /*#__PURE__*/ _jsx(Alert, {
-                    severity: "info",
-                    children: `Unqualified: ${lead.unqualifiedReason}`
-                }) : null,
-                converted ? /*#__PURE__*/ _jsxs(Stack, {
-                    direction: "row",
-                    spacing: 1,
-                    sx: {
-                        flexWrap: 'wrap',
-                        rowGap: 1
-                    },
-                    children: [
-                        /*#__PURE__*/ _jsx(Button, _extends({
-                            component: AppLink
-                        }, {
-                            componentVariant: 'naked',
-                            nativeButton: false
-                        }, {
-                            href: routes.contact(String(lead.convertedContactId)),
-                            size: "small",
-                            variant: "outlined",
-                            children: 'Open contact'
-                        })),
-                        lead.companyId ? /*#__PURE__*/ _jsx(Button, _extends({
-                            component: AppLink
-                        }, {
-                            componentVariant: 'naked',
-                            nativeButton: false
-                        }, {
-                            href: routes.company(lead.companyId),
-                            size: "small",
-                            variant: "outlined",
-                            children: 'Open company'
-                        })) : null,
-                        lead.dealId ? /*#__PURE__*/ _jsx(Button, _extends({
-                            component: AppLink
-                        }, {
-                            componentVariant: 'naked',
-                            nativeButton: false
-                        }, {
-                            href: routes.deal(lead.dealId),
-                            size: "small",
-                            variant: "outlined",
-                            children: 'Open deal'
-                        })) : null
-                    ]
-                }) : null,
-                /*#__PURE__*/ _jsxs(Stack, {
+                contentGutterX: true,
+                contentGutterY: true,
+                HeaderProps: {
+                    action: /*#__PURE__*/ _jsxs(Stack, {
+                        direction: "row",
+                        spacing: 1,
+                        children: [
+                            dirty ? /*#__PURE__*/ _jsx(Button, {
+                                size: "small",
+                                disabled: saving,
+                                onClick: discard,
+                                children: 'Discard changes'
+                            }) : null,
+                            /*#__PURE__*/ _jsx(Button, {
+                                size: "small",
+                                variant: "contained",
+                                onClick: ()=>void saveDetails(),
+                                disabled: !dirty || saving,
+                                children: saving ? 'Saving…' : 'Save'
+                            })
+                        ]
+                    })
+                },
+                children: /*#__PURE__*/ _jsxs(Stack, {
                     spacing: 2,
                     children: [
-                        /*#__PURE__*/ _jsx(Typography, {
-                            variant: "subtitle2",
-                            children: 'Profile'
-                        }),
                         /*#__PURE__*/ _jsxs(Stack, {
                             direction: {
                                 xs: 'column',
@@ -611,9 +649,8 @@ const TEXT_MAX = Aglyn.CRM_LEAD_TEXT_MAX;
                         fields.active.length ? /*#__PURE__*/ _jsxs(_Fragment, {
                             children: [
                                 /*#__PURE__*/ _jsx(Typography, {
-                                    variant: "caption",
-                                    color: "text.secondary",
-                                    children: 'Custom fields'
+                                    variant: "subtitle2",
+                                    children: 'More fields'
                                 }),
                                 fields.active.map((definition)=>/*#__PURE__*/ _jsx(CrmCustomFieldControl, {
                                         definition: definition,
@@ -621,29 +658,10 @@ const TEXT_MAX = Aglyn.CRM_LEAD_TEXT_MAX;
                                         onChange: (value)=>setCustom((current)=>_extends({}, current, {
                                                     [definition.key]: value
                                                 })),
-                                        disabled: converted || savingProfile
+                                        disabled: converted || saving
                                     }, definition.$id))
                             ]
                         }) : null,
-                        converted ? null : /*#__PURE__*/ _jsx(Stack, {
-                            direction: "row",
-                            spacing: 1,
-                            sx: {
-                                justifyContent: 'flex-end'
-                            },
-                            children: /*#__PURE__*/ _jsx(Button, {
-                                size: "small",
-                                variant: "contained",
-                                onClick: ()=>void saveProfile(),
-                                disabled: !dirty || savingProfile,
-                                children: 'Save'
-                            })
-                        })
-                    ]
-                }),
-                /*#__PURE__*/ _jsxs(Stack, {
-                    spacing: 1,
-                    children: [
                         /*#__PURE__*/ _jsx(TextField, {
                             size: "small",
                             label: "Notes",
@@ -660,25 +678,11 @@ const TEXT_MAX = Aglyn.CRM_LEAD_TEXT_MAX;
                                     maxLength: NOTES_MAX
                                 }
                             }
-                        }),
-                        /*#__PURE__*/ _jsx(Stack, {
-                            direction: "row",
-                            spacing: 1,
-                            sx: {
-                                justifyContent: 'flex-end'
-                            },
-                            children: /*#__PURE__*/ _jsx(Button, {
-                                size: "small",
-                                variant: "contained",
-                                onClick: ()=>void saveNotes(),
-                                disabled: !notesDirty || savingNotes,
-                                children: 'Save notes'
-                            })
                         })
                     ]
                 })
-            ]
-        })
+            })
+        ]
     });
 }
 LeadPropertiesCard.displayName = 'LeadPropertiesCard';