@aglyn/plugins-crm 1.0.0-beta.177 → 1.0.0-beta.179

package/src/lib/components/lead-source-values-card.js

@@ -0,0 +1,606 @@
+/**
+ * @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 } from "react/jsx-runtime";
+import { CRM_COLLECTIONS, CRM_LEAD_SOURCE_PICKLIST, CRM_LEAD_TEXT_MAX, crmPicklistActiveValues, newResourceScopeFields, ORG_SCOPE_TOKEN } from "@aglyn/aglyn";
+import { mdiArrowDown, mdiArrowUp, mdiDeleteOutline, mdiDragVertical, mdiEyeOffOutline, mdiEyeOutline, mdiPencilOutline, mdiStarOutline } from "@aglyn/shared-data-mdi";
+import { MdiIcon, SrOnly } from "@aglyn/shared-ui-jsx";
+import RowActionsMenu from "@aglyn/shared-ui-jsx/components/row-actions-menu.component";
+import { ScrollTable } from "@aglyn/shared-ui-jsx/components/scroll-table.component";
+import { useSnackbar } from "@aglyn/shared-ui-snackstack";
+import { authorizedFetch } from "@aglyn/shared-util-http/authorized-token";
+import { useFirestore, useUser, writeGuardedBySeed } from "@aglyn/tenant-feature-instance";
+import { Button, Chip, Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle, IconButton, MenuItem, Stack, TableBody, TableCell, TableHead, TableRow, TextField, Typography } from "@mui/material";
+import { doc, serverTimestamp, setDoc } from "firebase/firestore";
+import { useCallback, useState } from "react";
+import { useLeadSourcePicklist } from "../hooks/use-lead-source-picklist.js";
+import { addPicklistValue, crmLeadSourceValuesRouteUrl, movePicklistValue, setPicklistDefault, setPicklistValueActive, sortPicklistValues } from "../model/lead-source-values.js";
+import { crmTaskCallScope } from "../model/task-routes.js";
+/**
+ * THE LEAD SOURCE VALUES (AGL-3298) — Salesforce's Lead Source picklist,
+ * managed where the org's lead fields are.
+ *
+ * Every move that touches only the LIST — add, reorder by drag or arrows,
+ * sort A–Z, activate, deactivate, default — is one client write of the
+ * whole document, guarded against a cached read like every seeded save on
+ * the Fields page. The two that change RECORDS — rename, and delete with a
+ * replacement — go to `crm/lead-source-values`, which rewrites the list and
+ * every lead and contact holding the old label together; see that route.
+ *
+ * An org that has never edited its list reads the starter set, and the
+ * first move here writes it down as the org's own.
+ */ export function LeadSourceValuesCard(props) {
+    var _ref;
+    const { hostId, orgId, createHostId } = props;
+    const firestore = useFirestore();
+    const { data: user } = useUser();
+    const { enqueueSnackbar } = useSnackbar();
+    const { picklist, stored, ready, fromCache } = useLeadSourcePicklist(orgId);
+    const [busy, setBusy] = useState(false);
+    const [nameDialog, setNameDialog] = useState(null);
+    const [draftName, setDraftName] = useState('');
+    const [nameError, setNameError] = useState('');
+    const [deleting, setDeleting] = useState(null);
+    const [replaceWith, setReplaceWith] = useState('');
+    const [dragFrom, setDragFrom] = useState(null);
+    /** Write the whole list — the list-only moves above. */ const save = useCallback(async (next, done)=>{
+        if (!orgId || busy) return;
+        setBusy(true);
+        try {
+            const verdict = await writeGuardedBySeed({
+                subject: 'lead source list',
+                fromCache
+            }, ()=>setDoc(doc(firestore, 'orgs', orgId, CRM_COLLECTIONS.picklists, CRM_LEAD_SOURCE_PICKLIST), _extends({
+                    values: next.values,
+                    defaultValueId: next.defaultValueId,
+                    updatedAt: serverTimestamp()
+                }, stored ? {} : _extends({
+                    hostId: createHostId,
+                    createdAt: serverTimestamp()
+                }, newResourceScopeFields([
+                    ORG_SCOPE_TOKEN
+                ]))), {
+                    merge: true
+                }));
+            if (!verdict.ok) {
+                enqueueSnackbar(verdict.message, {
+                    variant: 'warning',
+                    persist: false
+                });
+                return;
+            }
+            enqueueSnackbar(done, {
+                variant: 'success',
+                persist: false
+            });
+        } catch (error) {
+            console.error(error);
+            enqueueSnackbar('The lead sources could not be saved.', {
+                variant: 'error',
+                allowDuplicate: true
+            });
+        } finally{
+            setBusy(false);
+        }
+    }, [
+        orgId,
+        busy,
+        fromCache,
+        firestore,
+        stored,
+        createHostId,
+        enqueueSnackbar
+    ]);
+    /** A rename or a delete — the moves that change records too. */ const post = useCallback(async (request)=>{
+        const scope = crmTaskCallScope(hostId, orgId);
+        if (!scope || busy) return null;
+        setBusy(true);
+        try {
+            const response = await authorizedFetch(user, crmLeadSourceValuesRouteUrl(), {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json'
+                },
+                body: JSON.stringify(_extends({}, request, scope))
+            });
+            const payload = await response.json().catch(()=>({}));
+            if (!response.ok) {
+                enqueueSnackbar(payload.error || 'The lead sources could not be saved.', {
+                    variant: 'warning',
+                    persist: false
+                });
+                return null;
+            }
+            return payload;
+        } catch (error) {
+            console.error(error);
+            enqueueSnackbar('The lead sources could not be saved.', {
+                variant: 'error',
+                allowDuplicate: true
+            });
+            return null;
+        } finally{
+            setBusy(false);
+        }
+    }, [
+        hostId,
+        orgId,
+        busy,
+        user,
+        enqueueSnackbar
+    ]);
+    const moved = (result)=>{
+        const records = result.leads + result.contacts;
+        return records ? ` — ${result.leads.toLocaleString()} lead${result.leads === 1 ? '' : 's'} and ` + `${result.contacts.toLocaleString()} contact${result.contacts === 1 ? '' : 's'} updated` : '';
+    };
+    const openAdd = ()=>{
+        setDraftName('');
+        setNameError('');
+        setNameDialog({
+            mode: 'add'
+        });
+    };
+    const openRename = (value)=>{
+        setDraftName(value.label);
+        setNameError('');
+        setNameDialog({
+            mode: 'rename',
+            value
+        });
+    };
+    const submitName = async ()=>{
+        if (!nameDialog) return;
+        if (nameDialog.mode === 'add') {
+            const move = addPicklistValue(picklist, draftName);
+            if (move.ok === false) return void setNameError(move.error);
+            setNameDialog(null);
+            await save(move.picklist, `“${draftName.trim()}” added`);
+            return;
+        }
+        const result = await post({
+            action: 'rename',
+            valueId: nameDialog.value.id,
+            label: draftName
+        });
+        if (!result) return;
+        setNameDialog(null);
+        enqueueSnackbar(`Renamed${moved(result)}`, {
+            variant: 'success',
+            persist: false
+        });
+    };
+    const openDelete = (value)=>{
+        setReplaceWith('');
+        setDeleting(value);
+    };
+    const submitDelete = async ()=>{
+        if (!deleting) return;
+        const result = await post({
+            action: 'delete',
+            valueId: deleting.id,
+            replaceWith: replaceWith || null
+        });
+        if (!result) return;
+        setDeleting(null);
+        enqueueSnackbar(`“${deleting.label}” deleted${moved(result)}`, {
+            variant: 'success',
+            persist: false
+        });
+    };
+    const move = (from, to)=>void save(movePicklistValue(picklist, from, to), 'Order saved');
+    const rowActions = (value)=>{
+        const isDefault = picklist.defaultValueId === value.id;
+        return [
+            {
+                key: 'rename',
+                label: 'Rename',
+                icon: /*#__PURE__*/ _jsx(MdiIcon, {
+                    path: mdiPencilOutline.path,
+                    size: 0.8
+                }),
+                disabled: busy,
+                onClick: ()=>openRename(value)
+            },
+            {
+                key: 'default',
+                label: isDefault ? 'Clear default' : 'Make default',
+                icon: /*#__PURE__*/ _jsx(MdiIcon, {
+                    path: mdiStarOutline.path,
+                    size: 0.8
+                }),
+                disabled: busy || !isDefault && !value.active,
+                disabledReason: !value.active ? 'An inactive value cannot be the default' : undefined,
+                onClick: ()=>void save(setPicklistDefault(picklist, isDefault ? null : value.id), isDefault ? 'Default cleared' : `New leads start as “${value.label}”`)
+            },
+            {
+                key: 'active',
+                label: value.active ? 'Deactivate' : 'Activate',
+                icon: /*#__PURE__*/ _jsx(MdiIcon, {
+                    path: value.active ? mdiEyeOffOutline.path : mdiEyeOutline.path,
+                    size: 0.8
+                }),
+                disabled: busy,
+                onClick: ()=>void save(setPicklistValueActive(picklist, value.id, !value.active), value.active ? `“${value.label}” deactivated` : `“${value.label}” activated`)
+            },
+            {
+                key: 'delete',
+                label: 'Delete…',
+                icon: /*#__PURE__*/ _jsx(MdiIcon, {
+                    path: mdiDeleteOutline.path,
+                    size: 0.8
+                }),
+                destructive: true,
+                disabled: busy,
+                onClick: ()=>openDelete(value)
+            }
+        ];
+    };
+    const replacements = crmPicklistActiveValues(picklist).filter((value)=>value.id !== (deleting == null ? void 0 : deleting.id));
+    return /*#__PURE__*/ _jsxs(Stack, {
+        spacing: 1.5,
+        children: [
+            /*#__PURE__*/ _jsxs(Stack, {
+                direction: {
+                    xs: 'column',
+                    sm: 'row'
+                },
+                spacing: 1,
+                sx: {
+                    justifyContent: 'space-between',
+                    alignItems: {
+                        sm: 'center'
+                    }
+                },
+                children: [
+                    /*#__PURE__*/ _jsxs(Stack, {
+                        spacing: 0.25,
+                        children: [
+                            /*#__PURE__*/ _jsx(Typography, {
+                                variant: "subtitle1",
+                                children: 'Lead source values'
+                            }),
+                            /*#__PURE__*/ _jsx(Typography, {
+                                variant: "body2",
+                                color: "text.secondary",
+                                children: 'The choices in every lead’s Lead source select, in this order. ' + 'An import or an API write naming anything else is refused. ' + 'A deactivated value stays on the records that hold it.'
+                            })
+                        ]
+                    }),
+                    orgId ? /*#__PURE__*/ _jsxs(Stack, {
+                        direction: "row",
+                        spacing: 1,
+                        sx: {
+                            flexShrink: 0
+                        },
+                        children: [
+                            /*#__PURE__*/ _jsx(Button, {
+                                size: "small",
+                                disabled: busy || picklist.values.length < 2,
+                                onClick: ()=>void save(sortPicklistValues(picklist), 'Sorted A–Z'),
+                                children: 'Sort A–Z'
+                            }),
+                            /*#__PURE__*/ _jsx(Button, {
+                                size: "small",
+                                variant: "outlined",
+                                disabled: busy,
+                                onClick: openAdd,
+                                children: 'Add value'
+                            })
+                        ]
+                    }) : null
+                ]
+            }),
+            !ready ? null : /*#__PURE__*/ _jsxs(ScrollTable, {
+                size: "small",
+                "aria-label": "Lead source values",
+                children: [
+                    /*#__PURE__*/ _jsx(TableHead, {
+                        children: /*#__PURE__*/ _jsxs(TableRow, {
+                            children: [
+                                /*#__PURE__*/ _jsx(TableCell, {
+                                    sx: {
+                                        width: 120
+                                    },
+                                    children: 'Order'
+                                }),
+                                /*#__PURE__*/ _jsx(TableCell, {
+                                    children: 'Value'
+                                }),
+                                /*#__PURE__*/ _jsx(TableCell, {
+                                    children: 'Status'
+                                }),
+                                /*#__PURE__*/ _jsx(TableCell, {
+                                    align: "right"
+                                })
+                            ]
+                        })
+                    }),
+                    /*#__PURE__*/ _jsxs(TableBody, {
+                        children: [
+                            picklist.values.length === 0 ? /*#__PURE__*/ _jsx(TableRow, {
+                                children: /*#__PURE__*/ _jsx(TableCell, {
+                                    colSpan: 4,
+                                    children: /*#__PURE__*/ _jsx(Typography, {
+                                        variant: "body2",
+                                        color: "text.secondary",
+                                        children: 'No values yet. Add one, and every lead can be given it.'
+                                    })
+                                })
+                            }) : null,
+                            picklist.values.map((value, index)=>/*#__PURE__*/ _jsxs(TableRow, {
+                                    hover: true,
+                                    // Native drag and drop for a pointer; the arrows beside the
+                                    // handle are the same move for a keyboard or a touch screen.
+                                    draggable: !busy,
+                                    onDragStart: (event)=>{
+                                        setDragFrom(index);
+                                        event.dataTransfer.effectAllowed = 'move';
+                                    },
+                                    onDragOver: (event)=>{
+                                        if (dragFrom === null) return;
+                                        event.preventDefault();
+                                        event.dataTransfer.dropEffect = 'move';
+                                    },
+                                    onDrop: (event)=>{
+                                        event.preventDefault();
+                                        if (dragFrom !== null && dragFrom !== index) move(dragFrom, index);
+                                        setDragFrom(null);
+                                    },
+                                    onDragEnd: ()=>setDragFrom(null),
+                                    sx: _extends({}, value.active ? {} : {
+                                        opacity: 0.6
+                                    }, dragFrom === index ? {
+                                        outline: 1,
+                                        outlineColor: 'primary.main'
+                                    } : {}),
+                                    children: [
+                                        /*#__PURE__*/ _jsx(TableCell, {
+                                            children: /*#__PURE__*/ _jsxs(Stack, {
+                                                direction: "row",
+                                                spacing: 0,
+                                                sx: {
+                                                    alignItems: 'center'
+                                                },
+                                                children: [
+                                                    /*#__PURE__*/ _jsx(MdiIcon, {
+                                                        path: mdiDragVertical.path,
+                                                        size: 0.8,
+                                                        style: {
+                                                            cursor: busy ? 'default' : 'grab'
+                                                        },
+                                                        "aria-hidden": true
+                                                    }),
+                                                    /*#__PURE__*/ _jsxs(IconButton, {
+                                                        size: "small",
+                                                        disabled: index === 0 || busy,
+                                                        onClick: ()=>move(index, index - 1),
+                                                        children: [
+                                                            /*#__PURE__*/ _jsx(MdiIcon, {
+                                                                path: mdiArrowUp.path,
+                                                                size: 0.7
+                                                            }),
+                                                            /*#__PURE__*/ _jsx(SrOnly, {
+                                                                children: `Move ${value.label} up`
+                                                            })
+                                                        ]
+                                                    }),
+                                                    /*#__PURE__*/ _jsxs(IconButton, {
+                                                        size: "small",
+                                                        disabled: index === picklist.values.length - 1 || busy,
+                                                        onClick: ()=>move(index, index + 1),
+                                                        children: [
+                                                            /*#__PURE__*/ _jsx(MdiIcon, {
+                                                                path: mdiArrowDown.path,
+                                                                size: 0.7
+                                                            }),
+                                                            /*#__PURE__*/ _jsx(SrOnly, {
+                                                                children: `Move ${value.label} down`
+                                                            })
+                                                        ]
+                                                    })
+                                                ]
+                                            })
+                                        }),
+                                        /*#__PURE__*/ _jsx(TableCell, {
+                                            children: /*#__PURE__*/ _jsx(Typography, {
+                                                variant: "body2",
+                                                children: value.label
+                                            })
+                                        }),
+                                        /*#__PURE__*/ _jsx(TableCell, {
+                                            children: /*#__PURE__*/ _jsxs(Stack, {
+                                                direction: "row",
+                                                spacing: 1,
+                                                sx: {
+                                                    flexWrap: 'wrap',
+                                                    alignItems: 'center'
+                                                },
+                                                children: [
+                                                    value.active ? null : /*#__PURE__*/ _jsx(Chip, {
+                                                        size: "small",
+                                                        variant: "outlined",
+                                                        color: "warning",
+                                                        label: "Inactive"
+                                                    }),
+                                                    picklist.defaultValueId === value.id ? /*#__PURE__*/ _jsx(Chip, {
+                                                        size: "small",
+                                                        variant: "outlined",
+                                                        color: "primary",
+                                                        label: "Default"
+                                                    }) : null,
+                                                    value.active && picklist.defaultValueId !== value.id ? /*#__PURE__*/ _jsx(Typography, {
+                                                        variant: "body2",
+                                                        color: "text.secondary",
+                                                        children: 'Active'
+                                                    }) : null
+                                                ]
+                                            })
+                                        }),
+                                        /*#__PURE__*/ _jsx(TableCell, {
+                                            align: "right",
+                                            sx: {
+                                                width: 56
+                                            },
+                                            children: /*#__PURE__*/ _jsx(RowActionsMenu, {
+                                                label: value.label,
+                                                items: rowActions(value)
+                                            })
+                                        })
+                                    ]
+                                }, value.id))
+                        ]
+                    })
+                ]
+            }),
+            ready && !stored ? /*#__PURE__*/ _jsx(Typography, {
+                variant: "caption",
+                color: "text.secondary",
+                children: 'This is the starter list. Your first change here makes it your organization’s own.'
+            }) : null,
+            /*#__PURE__*/ _jsxs(Dialog, {
+                open: nameDialog !== null,
+                onClose: ()=>setNameDialog(null),
+                fullWidth: true,
+                maxWidth: "xs",
+                children: [
+                    /*#__PURE__*/ _jsx(DialogTitle, {
+                        children: (nameDialog == null ? void 0 : nameDialog.mode) === 'rename' ? `Rename “${nameDialog.value.label}”` : 'Add a lead source'
+                    }),
+                    /*#__PURE__*/ _jsx(DialogContent, {
+                        children: /*#__PURE__*/ _jsxs(Stack, {
+                            spacing: 1.5,
+                            sx: {
+                                pt: 1
+                            },
+                            children: [
+                                (nameDialog == null ? void 0 : nameDialog.mode) === 'rename' ? /*#__PURE__*/ _jsx(DialogContentText, {
+                                    variant: "body2",
+                                    children: 'Every lead and contact holding this value is updated to the new name.'
+                                }) : null,
+                                /*#__PURE__*/ _jsx(TextField, {
+                                    size: "small",
+                                    label: "Value",
+                                    value: draftName,
+                                    onChange: (event)=>{
+                                        setDraftName(event.target.value);
+                                        setNameError('');
+                                    },
+                                    onKeyDown: (event)=>{
+                                        if (event.key === 'Enter') void submitName();
+                                    },
+                                    error: Boolean(nameError),
+                                    helperText: nameError || ' ',
+                                    slotProps: {
+                                        htmlInput: {
+                                            maxLength: CRM_LEAD_TEXT_MAX
+                                        }
+                                    },
+                                    autoFocus: true,
+                                    fullWidth: true
+                                })
+                            ]
+                        })
+                    }),
+                    /*#__PURE__*/ _jsxs(DialogActions, {
+                        children: [
+                            /*#__PURE__*/ _jsx(Button, {
+                                onClick: ()=>setNameDialog(null),
+                                children: 'Cancel'
+                            }),
+                            /*#__PURE__*/ _jsx(Button, {
+                                variant: "contained",
+                                disabled: busy || !draftName.trim(),
+                                onClick: ()=>void submitName(),
+                                children: (nameDialog == null ? void 0 : nameDialog.mode) === 'rename' ? 'Rename' : 'Add'
+                            })
+                        ]
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsxs(Dialog, {
+                open: deleting !== null,
+                onClose: ()=>setDeleting(null),
+                fullWidth: true,
+                maxWidth: "xs",
+                children: [
+                    /*#__PURE__*/ _jsx(DialogTitle, {
+                        children: `Delete “${(_ref = deleting == null ? void 0 : deleting.label) != null ? _ref : ''}”?`
+                    }),
+                    /*#__PURE__*/ _jsx(DialogContent, {
+                        children: /*#__PURE__*/ _jsxs(Stack, {
+                            spacing: 1.5,
+                            sx: {
+                                pt: 1
+                            },
+                            children: [
+                                /*#__PURE__*/ _jsx(DialogContentText, {
+                                    variant: "body2",
+                                    children: 'The value leaves the list for good. Leads and contacts that hold it ' + 'are moved to the value you pick here, or cleared. To keep it on ' + 'those records instead, deactivate it.'
+                                }),
+                                /*#__PURE__*/ _jsxs(TextField, {
+                                    select: true,
+                                    size: "small",
+                                    label: "Replace it on existing records with",
+                                    value: replaceWith,
+                                    onChange: (event)=>setReplaceWith(String(event.target.value)),
+                                    fullWidth: true,
+                                    slotProps: {
+                                        select: {
+                                            displayEmpty: true
+                                        },
+                                        inputLabel: {
+                                            shrink: true
+                                        }
+                                    },
+                                    children: [
+                                        /*#__PURE__*/ _jsx(MenuItem, {
+                                            value: "",
+                                            children: 'None — clear it'
+                                        }),
+                                        replacements.map((value)=>/*#__PURE__*/ _jsx(MenuItem, {
+                                                value: value.label,
+                                                children: value.label
+                                            }, value.id))
+                                    ]
+                                })
+                            ]
+                        })
+                    }),
+                    /*#__PURE__*/ _jsxs(DialogActions, {
+                        children: [
+                            /*#__PURE__*/ _jsx(Button, {
+                                onClick: ()=>setDeleting(null),
+                                children: 'Cancel'
+                            }),
+                            /*#__PURE__*/ _jsx(Button, {
+                                variant: "contained",
+                                color: "error",
+                                disabled: busy,
+                                onClick: ()=>void submitDelete(),
+                                children: 'Delete value'
+                            })
+                        ]
+                    })
+                ]
+            })
+        ]
+    });
+}
+LeadSourceValuesCard.displayName = 'LeadSourceValuesCard';
+export default LeadSourceValuesCard;
+
+//# sourceMappingURL=lead-source-values-card.js.map