@aglyn/plugins-crm 1.0.0-beta.143

package/src/lib/components/deal-products-card.js

@@ -0,0 +1,614 @@
+/**
+ * @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 { createElement as _createElement } from "react";
+import { checkEntitlement, CRM_COLLECTIONS, DEAL_LINE_ITEM_NAME_MAX, DEAL_LINE_ITEM_QUANTITY_MAX, DEAL_LINE_ITEMS_MAX, lineItemsTotalCents, nameSearchToken, pluginDocsHelp, readDealLineItems } from "@aglyn/aglyn";
+import { mdiDeleteOutline, mdiPlus } from "@aglyn/shared-data-mdi";
+import { CardDisplay, MdiIcon } from "@aglyn/shared-ui-jsx";
+import { ScrollTable } from "@aglyn/shared-ui-jsx/components/scroll-table.component";
+import { useSnackbar } from "@aglyn/shared-ui-snackstack";
+import { useFirestore, writeGuardedBySeed } from "@aglyn/tenant-feature-instance";
+import { Autocomplete, Button, Dialog, DialogActions, DialogContent, DialogTitle, IconButton, Stack, TableBody, TableCell, TableHead, TableRow, TextField, ToggleButton, ToggleButtonGroup, Tooltip, Typography } from "@mui/material";
+import { collection, doc, getDocs, limit, orderBy, query, updateDoc, where } from "firebase/firestore";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { amountInputValue, DEFAULT_DEAL_CURRENCY, formatMoney, parseAmountInput } from "../model/deal-board-model.js";
+/** Catalog matches offered per keystroke; a longer list is a scroll, not a pick. */ const CATALOG_MATCHES = 8;
+/**
+ * The products behind a deal's amount (AGL-2620).
+ *
+ * ## The amount follows the lines
+ *
+ * Every write here stores `lineItems` AND `amountCents` as their sum, in
+ * one update, so the board, the reports and the API keep reading the one
+ * field they always read and no reader adds up lines. Once a deal has a
+ * line, the drawer's Amount goes read-only and says why; remove the last
+ * line and the amount is typed again, keeping the last sum rather than
+ * dropping to nothing. The currency is the deal's — a line cannot be in
+ * another, because their sum is one number.
+ *
+ * ## Two doors to a line
+ *
+ * **From the catalog** searches THIS site's products — a prefix on
+ * `nameTokens` over active products, the query the products hub runs and
+ * the `(status, nameTokens, nameLower)` index serves — and offers each
+ * variant priced. The catalog is USD; a deal in another currency is told
+ * so and can edit the unit amount after. **By hand** takes a name and a
+ * price with no product behind them, which is also all a plan without
+ * commerce gets: the catalog door is not drawn for it, because the site
+ * has no catalog to search.
+ *
+ * Adding opens a dialog rather than a row of fields above the table, and
+ * a quantity is edited in place and written on blur.
+ */ export function DealProductsCard(props) {
+    var _ref;
+    const { deal, orgId, hostId, org, fromCache, unreadable } = props;
+    const firestore = useFirestore();
+    // The catalog searched: the mounted site's, or the deal's own.
+    const catalogHostId = (_ref = hostId != null ? hostId : deal.hostId) != null ? _ref : null;
+    const { enqueueSnackbar } = useSnackbar();
+    const currency = String(deal.currency || DEFAULT_DEAL_CURRENCY).toLowerCase();
+    const items = useMemo(()=>{
+        var _deal_lineItems;
+        return (_deal_lineItems = deal.lineItems) != null ? _deal_lineItems : [];
+    }, [
+        deal.lineItems
+    ]);
+    const hasCommerce = checkEntitlement(org != null ? org : null, 'commerce');
+    const [busy, setBusy] = useState(false);
+    const [adding, setAdding] = useState(false);
+    /** The one write: the lines and their sum, together. */ const save = useCallback(async (next, done)=>{
+        const read = readDealLineItems(next, currency);
+        if ('error' in read) {
+            enqueueSnackbar(read.error, {
+                variant: 'warning',
+                persist: false
+            });
+            return false;
+        }
+        setBusy(true);
+        try {
+            const verdict = await writeGuardedBySeed({
+                subject: 'deal',
+                unreadable,
+                fromCache
+            }, async ()=>{
+                await updateDoc(doc(firestore, 'orgs', orgId, CRM_COLLECTIONS.deals, deal.$id), _extends({
+                    lineItems: read.items
+                }, read.items.length ? {
+                    amountCents: lineItemsTotalCents(read.items)
+                } : {}, {
+                    updatedAt: new Date()
+                }));
+            });
+            if (!verdict.ok) {
+                enqueueSnackbar(verdict.message, {
+                    variant: 'warning',
+                    persist: false
+                });
+                return false;
+            }
+            enqueueSnackbar(done, {
+                variant: 'success',
+                persist: false
+            });
+            return true;
+        } catch (error) {
+            console.error(error);
+            enqueueSnackbar('An error has occurred', {
+                variant: 'error',
+                allowDuplicate: true
+            });
+            return false;
+        } finally{
+            setBusy(false);
+        }
+    }, [
+        currency,
+        enqueueSnackbar,
+        unreadable,
+        fromCache,
+        firestore,
+        orgId,
+        deal.$id
+    ]);
+    const handleRemove = useCallback((index)=>void save(items.filter((_item, at)=>at !== index), 'Line removed'), [
+        items,
+        save
+    ]);
+    const handleQuantity = useCallback((index, quantity)=>{
+        var _items_index;
+        if (quantity === ((_items_index = items[index]) == null ? void 0 : _items_index.quantity)) return;
+        void save(items.map((item, at)=>at === index ? _extends({}, item, {
+                quantity
+            }) : item), 'Quantity saved');
+    }, [
+        items,
+        save
+    ]);
+    const handleAdd = useCallback(async (line)=>{
+        const ok = await save([
+            ...items,
+            line
+        ], 'Line added');
+        if (ok) setAdding(false);
+    }, [
+        items,
+        save
+    ]);
+    const total = lineItemsTotalCents(items);
+    const full = items.length >= DEAL_LINE_ITEMS_MAX;
+    return /*#__PURE__*/ _jsxs(_Fragment, {
+        children: [
+            /*#__PURE__*/ _jsx(CardDisplay, {
+                header: 'Products',
+                help: pluginDocsHelp('deals', {
+                    anchor: '#line-items'
+                }),
+                actions: /*#__PURE__*/ _jsx(Tooltip, {
+                    title: full ? `A deal carries at most ${DEAL_LINE_ITEMS_MAX} lines` : '',
+                    children: /*#__PURE__*/ _jsx("span", {
+                        children: /*#__PURE__*/ _jsx(Button, {
+                            size: "small",
+                            startIcon: /*#__PURE__*/ _jsx(MdiIcon, {
+                                path: mdiPlus.path,
+                                size: 0.8
+                            }),
+                            disabled: busy || full,
+                            onClick: ()=>setAdding(true),
+                            children: 'Add line'
+                        })
+                    })
+                }),
+                contentGutterX: true,
+                contentGutterY: true,
+                children: items.length === 0 ? /*#__PURE__*/ _jsx(Typography, {
+                    variant: "body2",
+                    color: "text.secondary",
+                    children: hasCommerce ? 'No line items yet. Add products from your catalog or by hand; the amount becomes their sum.' : 'No line items yet. Add what the deal is for, priced by hand; the amount becomes their sum.'
+                }) : /*#__PURE__*/ _jsxs(ScrollTable, {
+                    size: "small",
+                    "aria-label": "Line items",
+                    children: [
+                        /*#__PURE__*/ _jsx(TableHead, {
+                            children: /*#__PURE__*/ _jsxs(TableRow, {
+                                children: [
+                                    /*#__PURE__*/ _jsx(TableCell, {
+                                        children: 'Item'
+                                    }),
+                                    /*#__PURE__*/ _jsx(TableCell, {
+                                        align: "right",
+                                        sx: {
+                                            width: 110
+                                        },
+                                        children: 'Quantity'
+                                    }),
+                                    /*#__PURE__*/ _jsx(TableCell, {
+                                        align: "right",
+                                        children: 'Unit'
+                                    }),
+                                    /*#__PURE__*/ _jsx(TableCell, {
+                                        align: "right",
+                                        children: 'Total'
+                                    }),
+                                    /*#__PURE__*/ _jsx(TableCell, {
+                                        sx: {
+                                            width: 48
+                                        }
+                                    })
+                                ]
+                            })
+                        }),
+                        /*#__PURE__*/ _jsxs(TableBody, {
+                            children: [
+                                items.map((item, index)=>{
+                                    var _item_productId;
+                                    return /*#__PURE__*/ _jsxs(TableRow, {
+                                        children: [
+                                            /*#__PURE__*/ _jsxs(TableCell, {
+                                                children: [
+                                                    /*#__PURE__*/ _jsx(Typography, {
+                                                        variant: "body2",
+                                                        children: item.name
+                                                    }),
+                                                    item.productId ? /*#__PURE__*/ _jsx(Typography, {
+                                                        variant: "caption",
+                                                        color: "text.secondary",
+                                                        children: 'From the catalog'
+                                                    }) : null
+                                                ]
+                                            }),
+                                            /*#__PURE__*/ _jsx(TableCell, {
+                                                align: "right",
+                                                children: /*#__PURE__*/ _jsx(QuantityField, {
+                                                    value: item.quantity,
+                                                    disabled: busy,
+                                                    label: `Quantity of ${item.name}`,
+                                                    onCommit: (quantity)=>handleQuantity(index, quantity)
+                                                })
+                                            }),
+                                            /*#__PURE__*/ _jsx(TableCell, {
+                                                align: "right",
+                                                children: formatMoney(item.unitAmountCents, currency)
+                                            }),
+                                            /*#__PURE__*/ _jsx(TableCell, {
+                                                align: "right",
+                                                children: formatMoney(item.quantity * item.unitAmountCents, currency)
+                                            }),
+                                            /*#__PURE__*/ _jsx(TableCell, {
+                                                padding: "none",
+                                                align: "right",
+                                                children: /*#__PURE__*/ _jsx(Tooltip, {
+                                                    title: "Remove line",
+                                                    children: /*#__PURE__*/ _jsx("span", {
+                                                        children: /*#__PURE__*/ _jsx(IconButton, {
+                                                            size: "small",
+                                                            color: "error",
+                                                            disabled: busy,
+                                                            "aria-label": `Remove ${item.name}`,
+                                                            onClick: ()=>handleRemove(index),
+                                                            children: /*#__PURE__*/ _jsx(MdiIcon, {
+                                                                path: mdiDeleteOutline.path,
+                                                                size: 0.8
+                                                            })
+                                                        })
+                                                    })
+                                                })
+                                            })
+                                        ]
+                                    }, `${index}:${(_item_productId = item.productId) != null ? _item_productId : item.name}`);
+                                }),
+                                /*#__PURE__*/ _jsxs(TableRow, {
+                                    children: [
+                                        /*#__PURE__*/ _jsx(TableCell, {
+                                            colSpan: 3,
+                                            children: /*#__PURE__*/ _jsx(Typography, {
+                                                variant: "subtitle2",
+                                                children: 'Amount'
+                                            })
+                                        }),
+                                        /*#__PURE__*/ _jsx(TableCell, {
+                                            align: "right",
+                                            children: /*#__PURE__*/ _jsx(Typography, {
+                                                variant: "subtitle2",
+                                                "data-testid": "line-items-total",
+                                                children: formatMoney(total, currency)
+                                            })
+                                        }),
+                                        /*#__PURE__*/ _jsx(TableCell, {
+                                            padding: "none"
+                                        })
+                                    ]
+                                })
+                            ]
+                        })
+                    ]
+                })
+            }),
+            /*#__PURE__*/ _jsx(AddLineDialog, {
+                open: adding,
+                onClose: ()=>setAdding(false),
+                hostId: catalogHostId,
+                currency: currency,
+                catalog: hasCommerce && Boolean(catalogHostId),
+                busy: busy,
+                onAdd: handleAdd
+            })
+        ]
+    });
+}
+DealProductsCard.displayName = 'DealProductsCard';
+/** A quantity edited in place, committed on blur or Enter, refused below one. */ function QuantityField(props) {
+    const { value, disabled, label, onCommit } = props;
+    const [draft, setDraft] = useState(String(value));
+    useEffect(()=>setDraft(String(value)), [
+        value
+    ]);
+    const commit = ()=>{
+        const quantity = Number(draft);
+        if (Number.isInteger(quantity) && quantity >= 1 && quantity <= DEAL_LINE_ITEM_QUANTITY_MAX) {
+            onCommit(quantity);
+        } else {
+            setDraft(String(value));
+        }
+    };
+    return /*#__PURE__*/ _jsx(TextField, {
+        size: "small",
+        type: "number",
+        value: draft,
+        disabled: disabled,
+        onChange: (event)=>setDraft(event.target.value),
+        onBlur: commit,
+        onKeyDown: (event)=>{
+            if (event.key === 'Enter') {
+                event.preventDefault();
+                event.target.blur();
+            }
+        },
+        sx: {
+            width: 88
+        },
+        slotProps: {
+            htmlInput: {
+                min: 1,
+                max: DEAL_LINE_ITEM_QUANTITY_MAX,
+                step: 1,
+                'aria-label': label,
+                style: {
+                    textAlign: 'right'
+                }
+            }
+        }
+    });
+}
+QuantityField.displayName = 'QuantityField';
+function AddLineDialog(props) {
+    const { open, onClose, hostId, currency, catalog, busy, onAdd } = props;
+    const firestore = useFirestore();
+    const [door, setDoor] = useState(catalog ? 'catalog' : 'manual');
+    const [picked, setPicked] = useState(null);
+    const [name, setName] = useState('');
+    const [quantity, setQuantity] = useState('1');
+    const [unit, setUnit] = useState('');
+    const [search, setSearch] = useState('');
+    const [choices, setChoices] = useState([]);
+    useEffect(()=>{
+        if (!open) return;
+        setDoor(catalog ? 'catalog' : 'manual');
+        setPicked(null);
+        setName('');
+        setQuantity('1');
+        setUnit('');
+        setSearch('');
+        setChoices([]);
+    }, [
+        open,
+        catalog
+    ]);
+    /*
+   * THE CATALOG SEARCH: the first typed word as a prefix token over active
+   * products, ordered by name, debounced so a name typed at speed is one
+   * query rather than one per letter. Each variant is its own choice,
+   * priced from `priceUsd` in cents.
+   */ useEffect(()=>{
+        if (!open || door !== 'catalog' || !hostId) return;
+        const token = nameSearchToken(search);
+        if (!token) {
+            setChoices([]);
+            return;
+        }
+        let active = true;
+        const timer = setTimeout(()=>{
+            void getDocs(query(collection(firestore, 'hosts', hostId, 'products'), where('status', '==', 'active'), where('nameTokens', 'array-contains', token), orderBy('nameLower'), limit(CATALOG_MATCHES))).then((snapshot)=>{
+                if (!active) return;
+                const next = [];
+                for (const entry of snapshot.docs){
+                    var _entry_get, _entry_get1;
+                    const productName = String((_entry_get = entry.get('name')) != null ? _entry_get : '');
+                    const variants = (_entry_get1 = entry.get('variants')) != null ? _entry_get1 : [];
+                    const priced = variants.length ? variants : [
+                        {
+                            id: '',
+                            priceUsd: entry.get('priceUsd')
+                        }
+                    ];
+                    for (const variant of priced){
+                        var _variant_options, _variant_id;
+                        const options = Object.values((_variant_options = variant['options']) != null ? _variant_options : {});
+                        const label = options.length ? `${productName} — ${options.join(' / ')}` : productName;
+                        next.push({
+                            key: `${entry.id}:${String((_variant_id = variant['id']) != null ? _variant_id : '')}`,
+                            productId: entry.id,
+                            label,
+                            unitAmountCents: Math.max(0, Math.round((Number(variant['priceUsd']) || 0) * 100))
+                        });
+                    }
+                }
+                setChoices(next);
+            }).catch(()=>{
+                if (active) setChoices([]);
+            });
+        }, 200);
+        return ()=>{
+            active = false;
+            clearTimeout(timer);
+        };
+    }, [
+        firestore,
+        open,
+        door,
+        hostId,
+        search
+    ]);
+    const unitCents = parseAmountInput(unit);
+    const quantityNumber = Number(quantity);
+    const lineName = (door === 'catalog' ? name || (picked == null ? void 0 : picked.label) || '' : name).trim();
+    const problem = !lineName ? door === 'catalog' ? 'Pick a product.' : 'A line needs a name.' : !Number.isInteger(quantityNumber) || quantityNumber < 1 ? 'The quantity has to be a whole number of one or more.' : unitCents === null ? 'The unit amount has to be a number of zero or more.' : null;
+    const handleAdd = ()=>{
+        if (problem || unitCents === null) return;
+        void onAdd(_extends({}, door === 'catalog' && picked ? {
+            productId: picked.productId
+        } : {}, {
+            name: lineName.slice(0, DEAL_LINE_ITEM_NAME_MAX),
+            quantity: quantityNumber,
+            unitAmountCents: unitCents,
+            currency
+        }));
+    };
+    return /*#__PURE__*/ _jsxs(Dialog, {
+        open: open,
+        onClose: busy ? undefined : onClose,
+        fullWidth: true,
+        maxWidth: "xs",
+        children: [
+            /*#__PURE__*/ _jsx(DialogTitle, {
+                children: 'Add a line'
+            }),
+            /*#__PURE__*/ _jsx(DialogContent, {
+                children: /*#__PURE__*/ _jsxs(Stack, {
+                    spacing: 2,
+                    sx: {
+                        pt: 1
+                    },
+                    children: [
+                        catalog ? /*#__PURE__*/ _jsxs(ToggleButtonGroup, {
+                            exclusive: true,
+                            size: "small",
+                            color: "primary",
+                            value: door,
+                            onChange: (_event, next)=>{
+                                if (next) setDoor(next);
+                            },
+                            "aria-label": "Where the line comes from",
+                            children: [
+                                /*#__PURE__*/ _jsx(ToggleButton, {
+                                    value: "catalog",
+                                    children: 'From the catalog'
+                                }),
+                                /*#__PURE__*/ _jsx(ToggleButton, {
+                                    value: "manual",
+                                    children: 'By hand'
+                                })
+                            ]
+                        }) : null,
+                        door === 'catalog' ? /*#__PURE__*/ _jsx(Autocomplete, {
+                            options: choices,
+                            value: picked,
+                            inputValue: search,
+                            onInputChange: (_event, next, reason)=>{
+                                if (reason !== 'reset') setSearch(next);
+                            },
+                            onChange: (_event, choice)=>{
+                                var _ref;
+                                setPicked(choice);
+                                setName((_ref = choice == null ? void 0 : choice.label) != null ? _ref : '');
+                                setUnit(choice ? amountInputValue(choice.unitAmountCents) : '');
+                            },
+                            getOptionLabel: (choice)=>choice.label,
+                            isOptionEqualToValue: (option, value)=>option.key === value.key,
+                            // The match is the query's own prefix over `nameTokens`, never
+                            // MUI's substring filter over labels.
+                            filterOptions: (options)=>options,
+                            renderOption: (optionProps, choice)=>/*#__PURE__*/ _createElement("li", _extends({}, optionProps, {
+                                    key: choice.key
+                                }), /*#__PURE__*/ _jsxs(Stack, {
+                                    direction: "row",
+                                    spacing: 1,
+                                    sx: {
+                                        width: '100%',
+                                        alignItems: 'baseline'
+                                    },
+                                    children: [
+                                        /*#__PURE__*/ _jsx(Typography, {
+                                            variant: "body2",
+                                            sx: {
+                                                flex: 1
+                                            },
+                                            children: choice.label
+                                        }),
+                                        /*#__PURE__*/ _jsx(Typography, {
+                                            variant: "caption",
+                                            color: "text.secondary",
+                                            children: formatMoney(choice.unitAmountCents, 'usd')
+                                        })
+                                    ]
+                                })),
+                            noOptionsText: search.trim() ? 'No active product matches' : 'Type a product name',
+                            renderInput: (params)=>/*#__PURE__*/ _jsx(TextField, _extends({}, params, {
+                                    label: "Product",
+                                    placeholder: "Search this site's catalog",
+                                    autoFocus: true,
+                                    helperText: currency !== 'usd' ? `Catalog prices are in USD; this deal is in ${currency.toUpperCase()}. Check the unit amount.` : undefined
+                                }))
+                        }) : /*#__PURE__*/ _jsx(TextField, {
+                            label: "Name",
+                            value: name,
+                            onChange: (event)=>setName(event.target.value),
+                            autoFocus: true,
+                            fullWidth: true,
+                            slotProps: {
+                                htmlInput: {
+                                    maxLength: DEAL_LINE_ITEM_NAME_MAX
+                                }
+                            }
+                        }),
+                        /*#__PURE__*/ _jsxs(Stack, {
+                            direction: "row",
+                            spacing: 1,
+                            children: [
+                                /*#__PURE__*/ _jsx(TextField, {
+                                    label: "Quantity",
+                                    type: "number",
+                                    value: quantity,
+                                    onChange: (event)=>setQuantity(event.target.value),
+                                    sx: {
+                                        width: 120
+                                    },
+                                    slotProps: {
+                                        htmlInput: {
+                                            min: 1,
+                                            max: DEAL_LINE_ITEM_QUANTITY_MAX,
+                                            step: 1
+                                        }
+                                    }
+                                }),
+                                /*#__PURE__*/ _jsx(TextField, {
+                                    label: `Unit amount (${currency.toUpperCase()})`,
+                                    value: unit,
+                                    onChange: (event)=>setUnit(event.target.value),
+                                    placeholder: "0.00",
+                                    sx: {
+                                        flex: 1
+                                    },
+                                    slotProps: {
+                                        htmlInput: {
+                                            inputMode: 'decimal'
+                                        }
+                                    }
+                                })
+                            ]
+                        }),
+                        problem && (lineName || unit) ? /*#__PURE__*/ _jsx(Typography, {
+                            variant: "caption",
+                            color: "warning.main",
+                            children: problem
+                        }) : null
+                    ]
+                })
+            }),
+            /*#__PURE__*/ _jsxs(DialogActions, {
+                children: [
+                    /*#__PURE__*/ _jsx(Button, {
+                        onClick: onClose,
+                        disabled: busy,
+                        children: 'Cancel'
+                    }),
+                    /*#__PURE__*/ _jsx(Button, {
+                        variant: "contained",
+                        disabled: busy || Boolean(problem),
+                        onClick: handleAdd,
+                        children: 'Add line'
+                    })
+                ]
+            })
+        ]
+    });
+}
+AddLineDialog.displayName = 'AddLineDialog';
+export default DealProductsCard;
+
+//# sourceMappingURL=deal-products-card.js.map