@aglyn/plugins-commerce 1.0.0-beta.288 → 1.0.0-beta.289

package/src/lib/components/console/quote-editor-dialog.component.js

@@ -0,0 +1,1266 @@
+/**
+ * @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 * as CommerceModel from "../../model/index.js";
+import { posMoney } from "../../model/commerce-pos-ops.js";
+import { commerceSitePermissionRefusal } from "../../model/plugin-permissions.js";
+import { BlockedControl } from "@aglyn/shared-ui-jsx/components/blocked-control.component";
+import { PrerequisiteNotice } from "@aglyn/shared-ui-jsx/components/prerequisite-notice.component";
+import { useSnackbar } from "@aglyn/shared-ui-snackstack";
+import { authorizedFetch } from "@aglyn/shared-util-http/authorized-token";
+import { useFirestore, useFirestoreDoc, useStoreSettingsHref, useUser } from "@aglyn/tenant-feature-instance";
+import { Alert, Box, Button, Chip, Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle, Divider, FormControlLabel, List, ListItemButton, ListItemText, MenuItem, Paper, Stack, Switch, TextField, Typography } from "@mui/material";
+import { doc } from "firebase/firestore";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { QuotePayLinkSection } from "./quote-pay-link.component.js";
+const REFUSAL = commerceSitePermissionRefusal('commerce.quotes');
+const SEARCH_DEBOUNCE_MS = 250;
+const money = (cents)=>posMoney(cents);
+/** Field widths on a wide screen, from the theme's spacing; full width on a phone. */ const narrowField = (theme)=>({
+        maxWidth: {
+            sm: theme.spacing(16)
+        }
+    });
+const mediumField = (theme)=>({
+        minWidth: {
+            sm: theme.spacing(20)
+        },
+        maxWidth: {
+            sm: theme.spacing(24)
+        }
+    });
+/** Dollars typed into a field, as whole cents, or `null` when it is not an amount. */ function centsOf(text) {
+    const trimmed = text.trim();
+    if (!trimmed) return 0;
+    if (!/^\d+(\.\d{0,2})?$/.test(trimmed)) return null;
+    return Math.round(Number(trimmed) * 100);
+}
+const dollarsOf = (cents)=>cents ? (cents / 100).toFixed(2).replace(/\.00$/, '') : '';
+function addressForm(address) {
+    var _ref, _ref1, _ref2, _ref3, _ref4, _ref5, _ref6;
+    return {
+        name: (_ref = address == null ? void 0 : address.name) != null ? _ref : '',
+        line1: (_ref1 = address == null ? void 0 : address.line1) != null ? _ref1 : '',
+        line2: (_ref2 = address == null ? void 0 : address.line2) != null ? _ref2 : '',
+        city: (_ref3 = address == null ? void 0 : address.city) != null ? _ref3 : '',
+        state: (_ref4 = address == null ? void 0 : address.state) != null ? _ref4 : '',
+        postalCode: (_ref5 = address == null ? void 0 : address.postalCode) != null ? _ref5 : '',
+        country: (_ref6 = address == null ? void 0 : address.country) != null ? _ref6 : ''
+    };
+}
+let lineSequence = 0;
+const nextLineKey = ()=>`line-${++lineSequence}`;
+function formFromQuote(quote, requireProofApproval) {
+    var _ref, _ref1, _ref2, _ref3, _ref4, _ref5, _ref6, _ref7, _ref8, _ref9;
+    var _section_customer, _section_customer1, _section_customer2, _section_customer3, _section_customer4, _section_shipping;
+    const section = quote == null ? void 0 : quote.quote;
+    const discount = (_ref = section == null ? void 0 : section.discount) != null ? _ref : null;
+    return {
+        lines: ((_ref1 = quote == null ? void 0 : quote.lineItems) != null ? _ref1 : []).map((line)=>{
+            var _request_description, _request_sku, _request_variantId, _request_modifiers, _request_description1;
+            const request = CommerceModel.quoteLineRequestFromLine(line);
+            return request.kind === 'custom' ? {
+                key: nextLineKey(),
+                kind: 'custom',
+                name: request.name,
+                description: (_request_description = request.description) != null ? _request_description : '',
+                sku: (_request_sku = request.sku) != null ? _request_sku : '',
+                price: dollarsOf(request.unitAmountCents),
+                quantity: String(request.quantity),
+                ships: request.ships !== false,
+                included: request.included === true
+            } : {
+                key: nextLineKey(),
+                kind: 'catalog',
+                productId: request.productId,
+                variantId: (_request_variantId = request.variantId) != null ? _request_variantId : '',
+                quantity: String(request.quantity),
+                modifiers: (_request_modifiers = request.modifiers) != null ? _request_modifiers : [],
+                description: (_request_description1 = request.description) != null ? _request_description1 : '',
+                included: request.included === true
+            };
+        }),
+        customer: {
+            record: (_ref2 = section == null ? void 0 : (_section_customer = section.customer) == null ? void 0 : _section_customer.record) != null ? _ref2 : null,
+            name: (_ref3 = section == null ? void 0 : (_section_customer1 = section.customer) == null ? void 0 : _section_customer1.name) != null ? _ref3 : '',
+            company: (_ref4 = section == null ? void 0 : (_section_customer2 = section.customer) == null ? void 0 : _section_customer2.company) != null ? _ref4 : '',
+            email: (_ref5 = section == null ? void 0 : (_section_customer3 = section.customer) == null ? void 0 : _section_customer3.email) != null ? _ref5 : '',
+            phone: (_ref6 = section == null ? void 0 : (_section_customer4 = section.customer) == null ? void 0 : _section_customer4.phone) != null ? _ref6 : ''
+        },
+        shipTo: addressForm(section == null ? void 0 : section.shipTo),
+        billTo: addressForm(section == null ? void 0 : section.billTo),
+        discountKind: (_ref7 = discount == null ? void 0 : discount.kind) != null ? _ref7 : 'none',
+        discountValue: (discount == null ? void 0 : discount.kind) === 'amount' ? dollarsOf(discount.amountCents) : (discount == null ? void 0 : discount.kind) === 'percent' ? String(discount.pct) : '',
+        shipping: dollarsOf(section == null ? void 0 : (_section_shipping = section.shipping) == null ? void 0 : _section_shipping.amountCents),
+        notes: (_ref8 = section == null ? void 0 : section.notes) != null ? _ref8 : '',
+        terms: (_ref9 = section == null ? void 0 : section.terms) != null ? _ref9 : '',
+        requireProofApproval: section ? section.requireProofApproval === true : requireProofApproval
+    };
+}
+function lineRequest(line) {
+    var _centsOf;
+    const quantity = Number(line.quantity);
+    if (line.kind === 'catalog') {
+        return _extends({
+            kind: 'catalog',
+            productId: line.productId
+        }, line.variantId ? {
+            variantId: line.variantId
+        } : {}, {
+            quantity
+        }, line.modifiers.length ? {
+            modifiers: line.modifiers
+        } : {}, line.included ? {
+            included: true
+        } : {}, line.description.trim() ? {
+            description: line.description.trim()
+        } : {});
+    }
+    return _extends({
+        kind: 'custom',
+        name: line.name.trim()
+    }, line.description.trim() ? {
+        description: line.description.trim()
+    } : {}, line.sku.trim() ? {
+        sku: line.sku.trim()
+    } : {}, {
+        unitAmountCents: line.included ? 0 : (_centsOf = centsOf(line.price)) != null ? _centsOf : Number.NaN,
+        quantity,
+        ships: line.ships
+    }, line.included ? {
+        included: true
+    } : {});
+}
+function addressBody(address) {
+    const entries = Object.entries(address).filter(([, value])=>value.trim());
+    return entries.length ? Object.fromEntries(entries.map(([key, value])=>[
+            key,
+            value.trim()
+        ])) : null;
+}
+/** What the server is sent: choices, never what a product costs. */ function quoteBody(form) {
+    var _centsOf;
+    const discountCents = centsOf(form.discountValue);
+    return {
+        lines: form.lines.map(lineRequest),
+        customer: _extends({}, form.customer.record ? {
+            record: form.customer.record
+        } : {}, {
+            name: form.customer.name,
+            company: form.customer.company,
+            email: form.customer.email,
+            phone: form.customer.phone
+        }),
+        shipTo: addressBody(form.shipTo),
+        billTo: addressBody(form.billTo),
+        discount: form.discountKind === 'amount' ? {
+            kind: 'amount',
+            amountCents: discountCents != null ? discountCents : Number.NaN
+        } : form.discountKind === 'percent' ? {
+            kind: 'percent',
+            pct: Number(form.discountValue || 0)
+        } : null,
+        shipping: form.shipping.trim() ? {
+            amountCents: (_centsOf = centsOf(form.shipping)) != null ? _centsOf : Number.NaN
+        } : null,
+        notes: form.notes,
+        terms: form.terms,
+        requireProofApproval: form.requireProofApproval
+    };
+}
+/**
+ * The quote editor (AGL-4093): who it is for, its lines (products with their
+ * options and add-ons, typed items, things included at no charge), discount,
+ * shipping, notes and terms, with the totals worked out as it is edited. The
+ * server prices and saves it; the totals here are the same function's answer
+ * over the same inputs, and a connected tax service's figure arrives on save.
+ */ export function QuoteEditorDialog(props) {
+    var _centsOf, _ref, _ref1;
+    var _quote_quote_tax, _quote_quote, _quote_quote1, _quote_quote2;
+    const { hostId, quote, products, canEdit, canSend, onClose } = props;
+    const firestore = useFirestore();
+    const { data: user } = useUser();
+    const { enqueueSnackbar } = useSnackbar();
+    const taxesHref = useStoreSettingsHref(hostId, 'taxes');
+    const { data: store } = useFirestoreDoc(()=>doc(firestore, 'hosts', hostId, 'settings', 'store'), [
+        firestore,
+        hostId
+    ]);
+    const storeDefault = CommerceModel.quoteRequiresProofApprovalByDefault(store == null ? void 0 : store.quotes);
+    const [form, setForm] = useState(()=>formFromQuote(quote, storeDefault));
+    // The version this form was opened on. A change saved elsewhere while it is
+    // open arrives on `quote`; the save still names this one, so the server
+    // refuses rather than overwrite that change.
+    const [baseUpdatedAtMs] = useState(()=>{
+        var _quote_quote;
+        return quote == null ? void 0 : (_quote_quote = quote.quote) == null ? void 0 : _quote_quote.updatedAtMs;
+    });
+    const [busy, setBusy] = useState(false);
+    const [confirmingDelete, setConfirmingDelete] = useState(false);
+    /** Whether anything has been changed since the dialog opened. */ const [edited, setEdited] = useState(false);
+    /** Whether the proof-approval switch was set by hand. */ const [approvalSet, setApprovalSet] = useState(false);
+    // A new quote starts with the store's default, which may arrive after the
+    // dialog opens; a switch set by hand keeps its setting.
+    const requireProofApproval = quote || approvalSet ? form.requireProofApproval : storeDefault;
+    const update = useCallback((patch)=>{
+        setEdited(true);
+        if ('requireProofApproval' in patch) setApprovalSet(true);
+        setForm((prev)=>_extends({}, prev, patch));
+    }, []);
+    const updateLine = useCallback((key, patch)=>{
+        setEdited(true);
+        setForm((prev)=>_extends({}, prev, {
+                lines: prev.lines.map((line)=>line.key === key ? _extends({}, line, patch) : line)
+            }));
+    }, []);
+    /*
+   * One attempt per change (AGL-1697's rule): a retried Save presents the same
+   * key and is answered from the first, an edited quote is a new attempt.
+   */ const attemptKey = useRef('');
+    useEffect(()=>{
+        attemptKey.current = '';
+    }, [
+        form
+    ]);
+    const productsById = useMemo(()=>new Map(products.map((product)=>[
+                String(product.$id),
+                product
+            ])), [
+        products
+    ]);
+    /** Each line priced as the server will price it, or why it cannot be. */ const priced = useMemo(()=>form.lines.map((line)=>{
+            const request = lineRequest(line);
+            if (request.kind === 'custom') {
+                if (!request.name) return {
+                    error: 'Name the item.'
+                };
+                if (!Number.isInteger(request.unitAmountCents)) return {
+                    error: 'Enter a price.'
+                };
+                if (!(request.quantity >= 1)) return {
+                    error: 'Enter a quantity.'
+                };
+                return {
+                    line: CommerceModel.priceQuoteCustomLine(request)
+                };
+            }
+            if (!request.productId) return {
+                error: 'Choose a product.'
+            };
+            if (!(request.quantity >= 1)) return {
+                error: 'Enter a quantity.'
+            };
+            const answer = CommerceModel.priceQuoteCatalogLine(productsById.get(request.productId), request);
+            return 'error' in answer ? {
+                error: answer.error
+            } : {
+                line: answer.line
+            };
+        }), [
+        form.lines,
+        productsById
+    ]);
+    const discountCents = centsOf(form.discountValue);
+    const discount = form.discountKind === 'amount' && discountCents ? {
+        kind: 'amount',
+        amountCents: discountCents
+    } : form.discountKind === 'percent' && Number(form.discountValue) > 0 ? {
+        kind: 'percent',
+        pct: Math.min(100, Number(form.discountValue))
+    } : null;
+    const shippingCents = (_centsOf = centsOf(form.shipping)) != null ? _centsOf : 0;
+    const taxBasis = CommerceModel.quoteTaxBasisFromSettings(store == null ? void 0 : store.tax, {
+        country: form.shipTo.country.trim().toUpperCase(),
+        state: form.shipTo.state.trim()
+    });
+    const pricedLines = priced.flatMap((entry)=>'line' in entry && entry.line ? [
+            entry.line
+        ] : []);
+    const totals = CommerceModel.computeQuoteTotals({
+        lines: pricedLines,
+        discount,
+        shippingCents,
+        tax: taxBasis
+    });
+    const problems = priced.some((entry)=>'error' in entry);
+    const savedService = (quote == null ? void 0 : (_quote_quote = quote.quote) == null ? void 0 : (_quote_quote_tax = _quote_quote.tax) == null ? void 0 : _quote_quote_tax.kind) === 'service' ? quote.quote.tax : null;
+    const save = useCallback(async ()=>{
+        setBusy(true);
+        try {
+            var _payload_number;
+            if (!attemptKey.current) {
+                var _ref;
+                var _globalThis_crypto_randomUUID, _globalThis_crypto;
+                attemptKey.current = (_ref = (_globalThis_crypto = globalThis.crypto) == null ? void 0 : (_globalThis_crypto_randomUUID = _globalThis_crypto.randomUUID) == null ? void 0 : _globalThis_crypto_randomUUID.call(_globalThis_crypto)) != null ? _ref : `${Date.now()}-${Math.random().toString(36).slice(2)}`;
+            }
+            const response = await authorizedFetch(user, '/api/commerce/quote', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                    'Idempotency-Key': attemptKey.current
+                },
+                body: JSON.stringify(_extends({
+                    action: quote ? 'update' : 'create',
+                    hostId
+                }, quote ? {
+                    quoteId: quote.$id,
+                    baseUpdatedAtMs
+                } : {}, {
+                    quote: quoteBody(_extends({}, form, {
+                        requireProofApproval
+                    }))
+                }))
+            });
+            const payload = await response.json().catch(()=>({}));
+            if (!response.ok) {
+                var _ref1;
+                return void enqueueSnackbar((_ref1 = payload == null ? void 0 : payload.error) != null ? _ref1 : 'The quote could not be saved', {
+                    variant: 'error',
+                    allowDuplicate: true
+                });
+            }
+            enqueueSnackbar(`${CommerceModel.formatQuoteNumber({
+                number: (_payload_number = payload.number) != null ? _payload_number : undefined
+            }, payload.quoteId)} saved`, {
+                variant: 'success',
+                persist: false
+            });
+            onClose();
+        } finally{
+            setBusy(false);
+        }
+    }, [
+        user,
+        quote,
+        hostId,
+        baseUpdatedAtMs,
+        form,
+        requireProofApproval,
+        enqueueSnackbar,
+        onClose
+    ]);
+    const remove = useCallback(async ()=>{
+        if (!quote) return;
+        setBusy(true);
+        try {
+            const response = await authorizedFetch(user, '/api/commerce/quote', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json'
+                },
+                body: JSON.stringify({
+                    action: 'delete',
+                    hostId,
+                    quoteId: quote.$id
+                })
+            });
+            const payload = await response.json().catch(()=>({}));
+            if (!response.ok) {
+                var _ref;
+                return void enqueueSnackbar((_ref = payload == null ? void 0 : payload.error) != null ? _ref : 'The quote could not be deleted', {
+                    variant: 'error',
+                    allowDuplicate: true
+                });
+            }
+            enqueueSnackbar(`${CommerceModel.formatQuoteNumber(quote, quote.$id)} deleted`, {
+                variant: 'success',
+                persist: false
+            });
+            setConfirmingDelete(false);
+            onClose();
+        } finally{
+            setBusy(false);
+        }
+    }, [
+        user,
+        quote,
+        hostId,
+        enqueueSnackbar,
+        onClose
+    ]);
+    const readOnly = !canEdit || busy;
+    const paid = quote ? !CommerceModel.isUnpaidQuote(quote) : false;
+    const title = quote ? CommerceModel.formatQuoteNumber(quote, quote.$id) : 'New quote';
+    const status = quote ? CommerceModel.quoteDisplayStatus(quote) : null;
+    const deletable = Boolean(quote) && !paid && ((_ref = quote == null ? void 0 : (_quote_quote1 = quote.quote) == null ? void 0 : _quote_quote1.stage) != null ? _ref : 'draft') === 'draft';
+    return /*#__PURE__*/ _jsxs(Dialog, {
+        open: true,
+        onClose: busy ? undefined : onClose,
+        maxWidth: "md",
+        fullWidth: true,
+        scroll: "paper",
+        "aria-labelledby": "quote-editor-title",
+        children: [
+            /*#__PURE__*/ _jsx(DialogTitle, {
+                id: "quote-editor-title",
+                children: /*#__PURE__*/ _jsxs(Stack, {
+                    direction: "row",
+                    spacing: 1,
+                    sx: {
+                        alignItems: 'center'
+                    },
+                    children: [
+                        /*#__PURE__*/ _jsx("span", {
+                            children: title
+                        }),
+                        status ? /*#__PURE__*/ _jsx(Chip, {
+                            size: "small",
+                            variant: "outlined",
+                            label: status.label,
+                            color: CommerceModel.QUOTE_STATUS_COLOR[status.key]
+                        }) : null
+                    ]
+                })
+            }),
+            /*#__PURE__*/ _jsx(DialogContent, {
+                dividers: true,
+                children: /*#__PURE__*/ _jsxs(Stack, {
+                    spacing: 3,
+                    children: [
+                        paid ? /*#__PURE__*/ _jsx(Alert, {
+                            severity: "success",
+                            children: (quote == null ? void 0 : (_quote_quote2 = quote.quote) == null ? void 0 : _quote_quote2.paidAtMs) ? `Paid ${new Date(quote.quote.paidAtMs).toLocaleDateString()}. It is an order now and can no longer be changed.` : 'This quote has been paid, so it is an order now and can no longer be changed.'
+                        }) : null,
+                        quote ? /*#__PURE__*/ _jsx(QuotePayLinkSection, {
+                            hostId: hostId,
+                            quoteId: quote.$id,
+                            quote: quote,
+                            canSend: canSend,
+                            edited: edited
+                        }) : null,
+                        taxBasis.kind === 'none' && taxBasis.reason === 'undecided' ? /*#__PURE__*/ _jsx(PrerequisiteNotice, {
+                            href: taxesHref != null ? taxesHref : undefined,
+                            actionLabel: "Open Taxes",
+                            children: 'This store has not chosen how it handles sales tax, so this quote shows no tax. Choose it in Taxes.'
+                        }) : null,
+                        /*#__PURE__*/ _jsx(QuoteCustomerSection, {
+                            hostId: hostId,
+                            form: form,
+                            disabled: readOnly || paid,
+                            onChange: (customer)=>update({
+                                    customer
+                                })
+                        }),
+                        /*#__PURE__*/ _jsxs(Stack, {
+                            spacing: 1.5,
+                            children: [
+                                /*#__PURE__*/ _jsx(Typography, {
+                                    variant: "subtitle2",
+                                    children: 'Items'
+                                }),
+                                form.lines.length === 0 ? /*#__PURE__*/ _jsx(Typography, {
+                                    variant: "body2",
+                                    color: "text.secondary",
+                                    children: 'Add products from your catalog, or type an item that is made to order.'
+                                }) : null,
+                                form.lines.map((line, index)=>/*#__PURE__*/ _jsx(QuoteLineEditor, {
+                                        line: line,
+                                        priced: priced[index],
+                                        products: products,
+                                        disabled: readOnly || paid,
+                                        onChange: (patch)=>updateLine(line.key, patch),
+                                        onRemove: ()=>update({
+                                                lines: form.lines.filter((entry)=>entry.key !== line.key)
+                                            })
+                                    }, line.key)),
+                                /*#__PURE__*/ _jsxs(Stack, {
+                                    direction: "row",
+                                    spacing: 1,
+                                    useFlexGap: true,
+                                    sx: {
+                                        flexWrap: 'wrap'
+                                    },
+                                    children: [
+                                        /*#__PURE__*/ _jsx(Button, {
+                                            size: "small",
+                                            disabled: readOnly || paid || products.length === 0,
+                                            onClick: ()=>update({
+                                                    lines: [
+                                                        ...form.lines,
+                                                        {
+                                                            key: nextLineKey(),
+                                                            kind: 'catalog',
+                                                            productId: '',
+                                                            variantId: '',
+                                                            quantity: '1',
+                                                            modifiers: [],
+                                                            description: '',
+                                                            included: false
+                                                        }
+                                                    ]
+                                                }),
+                                            children: 'Add product'
+                                        }),
+                                        /*#__PURE__*/ _jsx(Button, {
+                                            size: "small",
+                                            disabled: readOnly || paid,
+                                            onClick: ()=>update({
+                                                    lines: [
+                                                        ...form.lines,
+                                                        {
+                                                            key: nextLineKey(),
+                                                            kind: 'custom',
+                                                            name: '',
+                                                            description: '',
+                                                            sku: '',
+                                                            price: '',
+                                                            quantity: '1',
+                                                            ships: true,
+                                                            included: false
+                                                        }
+                                                    ]
+                                                }),
+                                            children: 'Add custom item'
+                                        })
+                                    ]
+                                })
+                            ]
+                        }),
+                        /*#__PURE__*/ _jsxs(Stack, {
+                            direction: {
+                                xs: 'column',
+                                sm: 'row'
+                            },
+                            spacing: 2,
+                            children: [
+                                /*#__PURE__*/ _jsxs(TextField, {
+                                    label: "Discount",
+                                    select: true,
+                                    size: "small",
+                                    value: form.discountKind,
+                                    disabled: readOnly || paid,
+                                    onChange: (event)=>update({
+                                            discountKind: event.target.value
+                                        }),
+                                    sx: mediumField,
+                                    children: [
+                                        /*#__PURE__*/ _jsx(MenuItem, {
+                                            value: "none",
+                                            children: 'None'
+                                        }),
+                                        /*#__PURE__*/ _jsx(MenuItem, {
+                                            value: "amount",
+                                            children: 'Amount off'
+                                        }),
+                                        /*#__PURE__*/ _jsx(MenuItem, {
+                                            value: "percent",
+                                            children: 'Percent off'
+                                        })
+                                    ]
+                                }),
+                                form.discountKind !== 'none' ? /*#__PURE__*/ _jsx(TextField, {
+                                    label: form.discountKind === 'amount' ? 'Amount ($)' : 'Percent (%)',
+                                    size: "small",
+                                    value: form.discountValue,
+                                    disabled: readOnly || paid,
+                                    onChange: (event)=>update({
+                                            discountValue: event.target.value
+                                        }),
+                                    slotProps: {
+                                        htmlInput: {
+                                            inputMode: 'decimal'
+                                        }
+                                    },
+                                    error: form.discountKind === 'amount' ? centsOf(form.discountValue) === null : !(Number(form.discountValue) >= 0 && Number(form.discountValue) <= 100)
+                                }) : null,
+                                /*#__PURE__*/ _jsx(TextField, {
+                                    label: "Shipping ($)",
+                                    size: "small",
+                                    value: form.shipping,
+                                    disabled: readOnly || paid,
+                                    onChange: (event)=>update({
+                                            shipping: event.target.value
+                                        }),
+                                    slotProps: {
+                                        htmlInput: {
+                                            inputMode: 'decimal'
+                                        }
+                                    },
+                                    error: centsOf(form.shipping) === null,
+                                    helperText: "Leave empty when nothing ships."
+                                })
+                            ]
+                        }),
+                        /*#__PURE__*/ _jsx(QuoteAddressFields, {
+                            label: "Ship to",
+                            value: form.shipTo,
+                            disabled: readOnly || paid,
+                            helperText: "Where the order goes. Store tax rates use its state and country.",
+                            onChange: (shipTo)=>update({
+                                    shipTo
+                                })
+                        }),
+                        /*#__PURE__*/ _jsx(QuoteAddressFields, {
+                            label: "Bill to",
+                            value: form.billTo,
+                            disabled: readOnly || paid,
+                            onChange: (billTo)=>update({
+                                    billTo
+                                })
+                        }),
+                        /*#__PURE__*/ _jsxs(Stack, {
+                            spacing: 2,
+                            children: [
+                                /*#__PURE__*/ _jsx(TextField, {
+                                    label: "Notes for the customer",
+                                    multiline: true,
+                                    minRows: 2,
+                                    value: form.notes,
+                                    disabled: readOnly || paid,
+                                    onChange: (event)=>update({
+                                            notes: event.target.value
+                                        })
+                                }),
+                                /*#__PURE__*/ _jsx(TextField, {
+                                    label: "Terms",
+                                    multiline: true,
+                                    minRows: 2,
+                                    value: form.terms,
+                                    disabled: readOnly || paid,
+                                    onChange: (event)=>update({
+                                            terms: event.target.value
+                                        })
+                                }),
+                                /*#__PURE__*/ _jsx(FormControlLabel, {
+                                    control: /*#__PURE__*/ _jsx(Switch, {
+                                        checked: requireProofApproval,
+                                        disabled: readOnly || paid,
+                                        onChange: (event)=>update({
+                                                requireProofApproval: event.target.checked
+                                            })
+                                    }),
+                                    label: "Customers approve the proof before they can pay"
+                                })
+                            ]
+                        }),
+                        /*#__PURE__*/ _jsx(Divider, {}),
+                        /*#__PURE__*/ _jsx(QuoteTotalsSummary, {
+                            totals: totals,
+                            tax: taxBasis,
+                            savedService: edited ? null : savedService,
+                            savedTotals: edited ? null : (_ref1 = quote == null ? void 0 : quote.totals) != null ? _ref1 : null
+                        })
+                    ]
+                })
+            }),
+            /*#__PURE__*/ _jsxs(DialogActions, {
+                sx: {
+                    flexWrap: 'wrap',
+                    rowGap: 1
+                },
+                children: [
+                    deletable ? /*#__PURE__*/ _jsx(BlockedControl, {
+                        blocked: !canEdit,
+                        reason: REFUSAL,
+                        children: /*#__PURE__*/ _jsx(Button, {
+                            color: "error",
+                            disabled: busy,
+                            onClick: ()=>setConfirmingDelete(true),
+                            sx: {
+                                mr: 'auto'
+                            },
+                            children: 'Delete'
+                        })
+                    }) : null,
+                    /*#__PURE__*/ _jsx(Button, {
+                        onClick: onClose,
+                        disabled: busy,
+                        children: paid || !canEdit ? 'Close' : 'Cancel'
+                    }),
+                    paid ? null : /*#__PURE__*/ _jsx(BlockedControl, {
+                        blocked: !canEdit,
+                        reason: REFUSAL,
+                        children: /*#__PURE__*/ _jsx(Button, {
+                            variant: "contained",
+                            disabled: busy || form.lines.length === 0 || problems,
+                            onClick: ()=>void save(),
+                            children: quote ? 'Save' : 'Create quote'
+                        })
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsxs(Dialog, {
+                open: confirmingDelete,
+                onClose: ()=>setConfirmingDelete(false),
+                maxWidth: "xs",
+                fullWidth: true,
+                children: [
+                    /*#__PURE__*/ _jsx(DialogTitle, {
+                        children: `Delete ${title}?`
+                    }),
+                    /*#__PURE__*/ _jsx(DialogContent, {
+                        children: /*#__PURE__*/ _jsx(DialogContentText, {
+                            children: 'The quote and everything on it is removed. This can’t be undone.'
+                        })
+                    }),
+                    /*#__PURE__*/ _jsxs(DialogActions, {
+                        children: [
+                            /*#__PURE__*/ _jsx(Button, {
+                                onClick: ()=>setConfirmingDelete(false),
+                                disabled: busy,
+                                children: 'Cancel'
+                            }),
+                            /*#__PURE__*/ _jsx(Button, {
+                                color: "error",
+                                variant: "contained",
+                                disabled: busy,
+                                onClick: ()=>void remove(),
+                                children: 'Delete'
+                            })
+                        ]
+                    })
+                ]
+            })
+        ]
+    });
+}
+QuoteEditorDialog.displayName = 'QuoteEditorDialog';
+/** Who the quote is for: a person the workspace keeps, or details typed here. */ function QuoteCustomerSection(props) {
+    const { hostId, form, disabled, onChange } = props;
+    const { data: user } = useUser();
+    const [text, setText] = useState('');
+    const [found, setFound] = useState([]);
+    const [available, setAvailable] = useState(true);
+    const ticket = useRef(0);
+    const customer = form.customer;
+    useEffect(()=>{
+        const typed = text.trim();
+        if (typed.length < 2 || !user) {
+            // Only when something is listed, so an effect that re-runs settles.
+            setFound((prev)=>prev.length ? [] : prev);
+            return;
+        }
+        const mine = ++ticket.current;
+        const timer = window.setTimeout(()=>{
+            void authorizedFetch(user, '/api/commerce/quote', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json'
+                },
+                body: JSON.stringify({
+                    action: 'search-customers',
+                    hostId,
+                    text: typed
+                })
+            }).then((response)=>response.json().catch(()=>({}))).then((payload)=>{
+                if (mine !== ticket.current) return;
+                setAvailable((payload == null ? void 0 : payload.available) !== false);
+                setFound(Array.isArray(payload == null ? void 0 : payload.customers) ? payload.customers : []);
+            }).catch(()=>undefined);
+        }, SEARCH_DEBOUNCE_MS);
+        return ()=>window.clearTimeout(timer);
+    }, [
+        text,
+        user,
+        hostId
+    ]);
+    const pick = (person)=>{
+        var _person_email, _person_phone;
+        onChange({
+            record: person.record,
+            name: person.name,
+            company: person.company,
+            email: (_person_email = person.email) != null ? _person_email : '',
+            phone: (_person_phone = person.phone) != null ? _person_phone : ''
+        });
+        setText('');
+        setFound([]);
+    };
+    return /*#__PURE__*/ _jsxs(Stack, {
+        spacing: 1.5,
+        children: [
+            /*#__PURE__*/ _jsx(Typography, {
+                variant: "subtitle2",
+                children: 'Customer'
+            }),
+            customer.record ? /*#__PURE__*/ _jsxs(Stack, {
+                direction: "row",
+                spacing: 1,
+                sx: {
+                    alignItems: 'center'
+                },
+                children: [
+                    /*#__PURE__*/ _jsx(Chip, {
+                        color: "primary",
+                        variant: "outlined",
+                        label: customer.name || customer.email || 'Contact',
+                        onDelete: disabled ? undefined : ()=>onChange(_extends({}, customer, {
+                                record: null
+                            }))
+                    }),
+                    /*#__PURE__*/ _jsx(Typography, {
+                        variant: "caption",
+                        color: "text.secondary",
+                        children: 'From your contacts'
+                    })
+                ]
+            }) : available ? /*#__PURE__*/ _jsxs(Box, {
+                children: [
+                    /*#__PURE__*/ _jsx(TextField, {
+                        size: "small",
+                        fullWidth: true,
+                        label: "Find a contact",
+                        placeholder: "Name, email or phone",
+                        value: text,
+                        disabled: disabled,
+                        onChange: (event)=>setText(event.target.value)
+                    }),
+                    found.length ? /*#__PURE__*/ _jsx(Paper, {
+                        variant: "outlined",
+                        sx: {
+                            mt: 0.5
+                        },
+                        children: /*#__PURE__*/ _jsx(List, {
+                            dense: true,
+                            disablePadding: true,
+                            children: found.map((person)=>/*#__PURE__*/ _jsx(ListItemButton, {
+                                    onClick: ()=>pick(person),
+                                    children: /*#__PURE__*/ _jsx(ListItemText, {
+                                        primary: person.name || person.email || 'Contact',
+                                        secondary: [
+                                            person.company,
+                                            person.email,
+                                            person.phone
+                                        ].filter(Boolean).join(' · ')
+                                    })
+                                }, `${person.record.kind}:${person.record.id}`))
+                        })
+                    }) : null
+                ]
+            }) : null,
+            /*#__PURE__*/ _jsxs(Stack, {
+                direction: {
+                    xs: 'column',
+                    sm: 'row'
+                },
+                spacing: 2,
+                children: [
+                    /*#__PURE__*/ _jsx(TextField, {
+                        size: "small",
+                        fullWidth: true,
+                        label: "Name",
+                        value: customer.name,
+                        disabled: disabled,
+                        onChange: (event)=>onChange(_extends({}, customer, {
+                                name: event.target.value
+                            }))
+                    }),
+                    /*#__PURE__*/ _jsx(TextField, {
+                        size: "small",
+                        fullWidth: true,
+                        label: "Company",
+                        value: customer.company,
+                        disabled: disabled,
+                        onChange: (event)=>onChange(_extends({}, customer, {
+                                company: event.target.value
+                            }))
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsxs(Stack, {
+                direction: {
+                    xs: 'column',
+                    sm: 'row'
+                },
+                spacing: 2,
+                children: [
+                    /*#__PURE__*/ _jsx(TextField, {
+                        size: "small",
+                        fullWidth: true,
+                        label: "Email",
+                        type: "email",
+                        value: customer.email,
+                        disabled: disabled,
+                        onChange: (event)=>onChange(_extends({}, customer, {
+                                email: event.target.value
+                            }))
+                    }),
+                    /*#__PURE__*/ _jsx(TextField, {
+                        size: "small",
+                        fullWidth: true,
+                        label: "Phone",
+                        value: customer.phone,
+                        disabled: disabled,
+                        onChange: (event)=>onChange(_extends({}, customer, {
+                                phone: event.target.value
+                            }))
+                    })
+                ]
+            })
+        ]
+    });
+}
+/** One address on the quote. */ function QuoteAddressFields(props) {
+    const { label, value, disabled, helperText, onChange } = props;
+    const field = (key, fieldLabel, extra = {})=>/*#__PURE__*/ _jsx(TextField, _extends({
+            size: "small",
+            fullWidth: true,
+            label: fieldLabel,
+            value: value[key],
+            disabled: disabled,
+            onChange: (event)=>onChange(_extends({}, value, {
+                    [key]: event.target.value
+                }))
+        }, extra));
+    return /*#__PURE__*/ _jsxs(Stack, {
+        spacing: 1.5,
+        children: [
+            /*#__PURE__*/ _jsx(Typography, {
+                variant: "subtitle2",
+                children: label
+            }),
+            helperText ? /*#__PURE__*/ _jsx(Typography, {
+                variant: "caption",
+                color: "text.secondary",
+                children: helperText
+            }) : null,
+            field('name', 'Name'),
+            field('line1', 'Address'),
+            field('line2', 'Apartment, suite, unit'),
+            /*#__PURE__*/ _jsxs(Stack, {
+                direction: {
+                    xs: 'column',
+                    sm: 'row'
+                },
+                spacing: 2,
+                children: [
+                    field('city', 'City'),
+                    field('state', 'State or region'),
+                    field('postalCode', 'Postal code'),
+                    field('country', 'Country code', {
+                        placeholder: 'US',
+                        slotProps: {
+                            htmlInput: {
+                                maxLength: 2
+                            }
+                        }
+                    })
+                ]
+            })
+        ]
+    });
+}
+/** One line of the quote: a product with its options and add-ons, or a typed item. */ function QuoteLineEditor(props) {
+    var _lifted_variants_;
+    const { line, priced, products, disabled, onChange, onRemove } = props;
+    const product = line.kind === 'catalog' ? products.find((entry)=>String(entry.$id) === line.productId) : undefined;
+    const lifted = product ? CommerceModel.liftLegacyProduct(product) : null;
+    const groups = lifted ? CommerceModel.productModifierGroups(lifted) : [];
+    const lineCents = (priced == null ? void 0 : priced.line) ? CommerceModel.quoteLineCents(priced.line) : 0;
+    return /*#__PURE__*/ _jsx(Paper, {
+        variant: "outlined",
+        sx: {
+            p: 2
+        },
+        children: /*#__PURE__*/ _jsxs(Stack, {
+            spacing: 1.5,
+            children: [
+                /*#__PURE__*/ _jsxs(Stack, {
+                    direction: "row",
+                    spacing: 1,
+                    sx: {
+                        alignItems: 'flex-start'
+                    },
+                    children: [
+                        /*#__PURE__*/ _jsxs(Stack, {
+                            spacing: 1.5,
+                            sx: {
+                                flex: 1,
+                                minWidth: 0
+                            },
+                            children: [
+                                line.kind === 'catalog' ? /*#__PURE__*/ _jsxs(Stack, {
+                                    direction: {
+                                        xs: 'column',
+                                        sm: 'row'
+                                    },
+                                    spacing: 2,
+                                    children: [
+                                        /*#__PURE__*/ _jsx(TextField, {
+                                            label: "Product",
+                                            select: true,
+                                            size: "small",
+                                            fullWidth: true,
+                                            value: line.productId,
+                                            disabled: disabled,
+                                            onChange: (event)=>onChange({
+                                                    productId: event.target.value,
+                                                    variantId: '',
+                                                    modifiers: []
+                                                }),
+                                            children: products.map((entry)=>{
+                                                var _entry_name;
+                                                return /*#__PURE__*/ _jsx(MenuItem, {
+                                                    value: String(entry.$id),
+                                                    children: String((_entry_name = entry.name) != null ? _entry_name : entry.$id)
+                                                }, String(entry.$id));
+                                            })
+                                        }),
+                                        lifted && lifted.variants.length > 1 ? /*#__PURE__*/ _jsx(TextField, {
+                                            label: "Option",
+                                            select: true,
+                                            size: "small",
+                                            fullWidth: true,
+                                            value: line.variantId || ((_lifted_variants_ = lifted.variants[0]) == null ? void 0 : _lifted_variants_.id) || '',
+                                            disabled: disabled,
+                                            onChange: (event)=>onChange({
+                                                    variantId: event.target.value
+                                                }),
+                                            children: lifted.variants.map((variant)=>{
+                                                var _variant_options;
+                                                return /*#__PURE__*/ _jsx(MenuItem, {
+                                                    value: variant.id,
+                                                    children: Object.values((_variant_options = variant.options) != null ? _variant_options : {}).join(' / ') || 'Default'
+                                                }, variant.id);
+                                            })
+                                        }) : null
+                                    ]
+                                }) : /*#__PURE__*/ _jsxs(Stack, {
+                                    direction: {
+                                        xs: 'column',
+                                        sm: 'row'
+                                    },
+                                    spacing: 2,
+                                    children: [
+                                        /*#__PURE__*/ _jsx(TextField, {
+                                            label: "Item",
+                                            size: "small",
+                                            fullWidth: true,
+                                            value: line.name,
+                                            disabled: disabled,
+                                            onChange: (event)=>onChange({
+                                                    name: event.target.value
+                                                })
+                                        }),
+                                        /*#__PURE__*/ _jsx(TextField, {
+                                            label: "SKU (optional)",
+                                            size: "small",
+                                            value: line.sku,
+                                            disabled: disabled,
+                                            onChange: (event)=>onChange({
+                                                    sku: event.target.value
+                                                })
+                                        })
+                                    ]
+                                }),
+                                groups.map((group)=>{
+                                    var _chosen_;
+                                    const chosen = line.kind === 'catalog' ? line.modifiers.filter((pick)=>pick.groupId === group.id).map((pick)=>pick.optionId) : [];
+                                    return /*#__PURE__*/ _jsxs(TextField, {
+                                        label: CommerceModel.modifierGroupRequired(group) ? group.name : `${group.name} (optional)`,
+                                        select: true,
+                                        size: "small",
+                                        fullWidth: true,
+                                        value: group.max > 1 ? chosen : (_chosen_ = chosen[0]) != null ? _chosen_ : '',
+                                        disabled: disabled,
+                                        slotProps: {
+                                            select: {
+                                                multiple: group.max > 1
+                                            }
+                                        },
+                                        onChange: (event)=>{
+                                            const raw = event.target.value;
+                                            const picked = (Array.isArray(raw) ? raw : raw ? [
+                                                raw
+                                            ] : []).map(String);
+                                            if (line.kind !== 'catalog') return;
+                                            onChange({
+                                                modifiers: [
+                                                    ...line.modifiers.filter((pick)=>pick.groupId !== group.id),
+                                                    ...picked.map((optionId)=>({
+                                                            groupId: group.id,
+                                                            optionId
+                                                        }))
+                                                ]
+                                            });
+                                        },
+                                        children: [
+                                            group.max > 1 ? null : /*#__PURE__*/ _jsx(MenuItem, {
+                                                value: "",
+                                                children: 'None'
+                                            }),
+                                            group.options.map((option)=>/*#__PURE__*/ _jsx(MenuItem, {
+                                                    value: option.id,
+                                                    children: option.priceCents ? `${option.name} (+${money(option.priceCents)})` : option.name
+                                                }, option.id))
+                                        ]
+                                    }, group.id);
+                                }),
+                                /*#__PURE__*/ _jsx(TextField, {
+                                    label: "Description (optional)",
+                                    size: "small",
+                                    fullWidth: true,
+                                    multiline: true,
+                                    value: line.description,
+                                    disabled: disabled,
+                                    onChange: (event)=>onChange({
+                                            description: event.target.value
+                                        })
+                                }),
+                                /*#__PURE__*/ _jsxs(Stack, {
+                                    direction: {
+                                        xs: 'column',
+                                        sm: 'row'
+                                    },
+                                    spacing: 2,
+                                    sx: {
+                                        alignItems: {
+                                            sm: 'center'
+                                        }
+                                    },
+                                    children: [
+                                        /*#__PURE__*/ _jsx(TextField, {
+                                            label: "Quantity",
+                                            size: "small",
+                                            value: line.quantity,
+                                            disabled: disabled,
+                                            onChange: (event)=>onChange({
+                                                    quantity: event.target.value.replace(/[^0-9]/g, '')
+                                                }),
+                                            slotProps: {
+                                                htmlInput: {
+                                                    inputMode: 'numeric'
+                                                }
+                                            },
+                                            sx: narrowField
+                                        }),
+                                        line.kind === 'custom' ? /*#__PURE__*/ _jsx(TextField, {
+                                            label: "Unit price ($)",
+                                            size: "small",
+                                            value: line.included ? '' : line.price,
+                                            disabled: disabled || line.included,
+                                            onChange: (event)=>onChange({
+                                                    price: event.target.value
+                                                }),
+                                            slotProps: {
+                                                htmlInput: {
+                                                    inputMode: 'decimal'
+                                                }
+                                            },
+                                            error: !line.included && centsOf(line.price) === null,
+                                            sx: mediumField
+                                        }) : null,
+                                        line.kind === 'custom' ? /*#__PURE__*/ _jsx(FormControlLabel, {
+                                            control: /*#__PURE__*/ _jsx(Switch, {
+                                                checked: line.ships,
+                                                disabled: disabled,
+                                                onChange: (event)=>onChange({
+                                                        ships: event.target.checked
+                                                    })
+                                            }),
+                                            label: "Ships"
+                                        }) : null,
+                                        /*#__PURE__*/ _jsx(FormControlLabel, {
+                                            control: /*#__PURE__*/ _jsx(Switch, {
+                                                checked: line.included,
+                                                disabled: disabled,
+                                                onChange: (event)=>onChange({
+                                                        included: event.target.checked
+                                                    })
+                                            }),
+                                            label: "Included at no charge"
+                                        })
+                                    ]
+                                })
+                            ]
+                        }),
+                        /*#__PURE__*/ _jsxs(Stack, {
+                            sx: {
+                                alignItems: 'flex-end',
+                                flexShrink: 0
+                            },
+                            children: [
+                                /*#__PURE__*/ _jsx(Button, {
+                                    size: "small",
+                                    color: "inherit",
+                                    disabled: disabled,
+                                    onClick: onRemove,
+                                    children: 'Remove'
+                                }),
+                                /*#__PURE__*/ _jsx(Typography, {
+                                    variant: "body2",
+                                    sx: {
+                                        fontWeight: 'fontWeightMedium'
+                                    },
+                                    children: line.included ? 'Included' : money(lineCents)
+                                }),
+                                (priced == null ? void 0 : priced.line) && !line.included && priced.line.quantity > 1 ? /*#__PURE__*/ _jsx(Typography, {
+                                    variant: "caption",
+                                    color: "text.secondary",
+                                    children: `${money(priced.line.unitAmountCents)} each`
+                                }) : null
+                            ]
+                        })
+                    ]
+                }),
+                (priced == null ? void 0 : priced.error) ? /*#__PURE__*/ _jsx(Typography, {
+                    variant: "caption",
+                    color: "error",
+                    children: priced.error
+                }) : null
+            ]
+        })
+    });
+}
+/** The quote's totals, as the customer will read them. */ function QuoteTotalsSummary(props) {
+    const { totals, tax, savedService, savedTotals } = props;
+    const shown = savedService && savedTotals ? _extends({}, totals, savedTotals) : totals;
+    const taxLabel = CommerceModel.describeQuoteTax(savedService != null ? savedService : tax);
+    const row = (label, value, strong = false)=>/*#__PURE__*/ _jsxs(Stack, {
+            direction: "row",
+            sx: {
+                justifyContent: 'space-between'
+            },
+            children: [
+                /*#__PURE__*/ _jsx(Typography, {
+                    variant: strong ? 'subtitle1' : 'body2',
+                    color: strong ? 'text.primary' : 'text.secondary',
+                    children: label
+                }),
+                /*#__PURE__*/ _jsx(Typography, {
+                    variant: strong ? 'subtitle1' : 'body2',
+                    children: value
+                })
+            ]
+        });
+    return /*#__PURE__*/ _jsxs(Stack, {
+        spacing: 0.5,
+        sx: (theme)=>({
+                alignSelf: {
+                    sm: 'flex-end'
+                },
+                minWidth: {
+                    sm: theme.spacing(40)
+                }
+            }),
+        children: [
+            row('Items', money(shown.itemsCents)),
+            shown.discountCents ? row('Discount', `−${money(shown.discountCents)}`) : null,
+            shown.shippingCents ? row('Shipping', money(shown.shippingCents)) : null,
+            tax.kind === 'at-payment' && !savedService ? /*#__PURE__*/ _jsx(Typography, {
+                variant: "body2",
+                color: "text.secondary",
+                children: taxLabel
+            }) : row(taxLabel, money(shown.taxCents)),
+            row(totals.taxAtPayment && !savedService ? 'Total before tax' : 'Total', money(shown.totalCents), true)
+        ]
+    });
+}
+export default QuoteEditorDialog;
+
+//# sourceMappingURL=quote-editor-dialog.component.js.map