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

package/src/lib/components/console/host-quotes-card.component.js

@@ -0,0 +1,263 @@
+/**
+ * @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 { pluginDocsHelp } from "@aglyn/aglyn";
+import { CardDisplay } from "@aglyn/shared-ui-jsx";
+import { BlockedControl } from "@aglyn/shared-ui-jsx/components/blocked-control.component";
+import { ListTable } from "@aglyn/shared-ui-jsx/components/list-table.component";
+import { ceilingedWindow, collectionCeiling, useFirestore, useFirestoreCollection } from "@aglyn/tenant-feature-instance";
+import { Button, Chip, Stack, Typography } from "@mui/material";
+import { collection, limit, query, where } from "firebase/firestore";
+import { useEffect, useMemo, useState } from "react";
+import QuoteEditorDialog from "./quote-editor-dialog.component.js";
+/**
+ * How many quotes the list reads. The whole set is read and the grid sorts
+ * it by any column; a store past this many is told the list stops short.
+ */ const QUOTE_CEILING = 500;
+/** The products the editor's picker offers. */ const PRODUCT_WINDOW = 200;
+const REFUSAL = commerceSitePermissionRefusal('commerce.quotes');
+/** One quote as its row draws and sorts it. */ function quoteListRow(quote) {
+    var _quote_lineItems, _ref, _ref1, _ref2, _ref3;
+    var _quote_quote, _items_, _quote_totals, _quote_quote1, _CommerceModel_latestQuoteResponse;
+    const customer = (_quote_quote = quote.quote) == null ? void 0 : _quote_quote.customer;
+    const status = CommerceModel.quoteDisplayStatus(quote);
+    const items = (_quote_lineItems = quote.lineItems) != null ? _quote_lineItems : [];
+    return _extends({}, quote, {
+        customerLabel: (customer == null ? void 0 : customer.name) || (customer == null ? void 0 : customer.company) || (customer == null ? void 0 : customer.email) || '',
+        firstItem: (_ref = (_items_ = items[0]) == null ? void 0 : _items_.name) != null ? _ref : '',
+        moreItems: Math.max(0, items.length - 1),
+        statusKey: status.key,
+        statusLabel: status.label,
+        totalCents: Number((_ref1 = (_quote_totals = quote.totals) == null ? void 0 : _quote_totals.totalCents) != null ? _ref1 : 0),
+        // The customer's latest answer counts as an update (AGL-4096), so a quote
+        // they just approved or asked changes to sorts to the top.
+        updatedAtMs: Math.max(Number((_ref2 = (_quote_quote1 = quote.quote) == null ? void 0 : _quote_quote1.updatedAtMs) != null ? _ref2 : 0), Number((_ref3 = (_CommerceModel_latestQuoteResponse = CommerceModel.latestQuoteResponse(quote.quote)) == null ? void 0 : _CommerceModel_latestQuoteResponse.atMs) != null ? _ref3 : 0))
+    });
+}
+/**
+ * Quotes (AGL-4093): prices put to a customer before they buy, beside the
+ * orders they become. A quote is an unpaid order on the `quote` channel, so
+ * this reads `hosts/{hostId}/orders` for that channel alone; the Orders list
+ * above never shows one until it is paid.
+ */ export function HostQuotesCard(props) {
+    var _quotes_rows_find;
+    const { hostId, canEdit, canSend } = props;
+    const firestore = useFirestore();
+    const { data: quoteDocs, status } = useFirestoreCollection(()=>query(collection(firestore, 'hosts', hostId, 'orders'), where('channel', '==', 'quote'), limit(QUOTE_CEILING + 1)), [
+        firestore,
+        hostId
+    ], {
+        idField: '$id'
+    });
+    const quotes = useMemo(()=>ceilingedWindow(quoteDocs != null ? quoteDocs : undefined, QUOTE_CEILING), [
+        quoteDocs
+    ]);
+    const rows = useMemo(()=>Array.from(quotes.rows, quoteListRow), [
+        quotes
+    ]);
+    const { data: productDocs } = useFirestoreCollection(()=>collectionCeiling(collection(firestore, 'hosts', hostId, 'products'), PRODUCT_WINDOW), [
+        firestore,
+        hostId
+    ], {
+        idField: '$id'
+    });
+    const products = useMemo(()=>ceilingedWindow(productDocs != null ? productDocs : undefined, PRODUCT_WINDOW).rows.filter((product)=>!product['deletedAt']), [
+        productDocs
+    ]);
+    /** The quote open in the editor: its id, or `new`. */ const [openId, setOpenId] = useState(null);
+    const openQuote = openId && openId !== 'new' ? (_quotes_rows_find = quotes.rows.find((row)=>row.$id === openId)) != null ? _quotes_rows_find : null : null;
+    // A manager notice opens its quote (AGL-4096): `?quote=<id>` on the Orders
+    // page, once that quote has loaded.
+    const [linkedId, setLinkedId] = useState(()=>{
+        var _get;
+        return typeof window === 'undefined' ? '' : (_get = new URLSearchParams(window.location.search).get('quote')) != null ? _get : '';
+    });
+    useEffect(()=>{
+        if (!linkedId || !quotes.rows.some((row)=>row.$id === linkedId)) return;
+        setOpenId(linkedId);
+        setLinkedId('');
+    }, [
+        linkedId,
+        quotes.rows
+    ]);
+    const columns = useMemo(()=>[
+            {
+                field: 'number',
+                headerName: 'Quote',
+                flex: 1,
+                minWidth: 160,
+                renderCell: ({ row })=>/*#__PURE__*/ _jsxs(Stack, {
+                        sx: {
+                            minWidth: 0
+                        },
+                        children: [
+                            /*#__PURE__*/ _jsx(Typography, {
+                                variant: "body2",
+                                noWrap: true,
+                                children: CommerceModel.formatQuoteNumber(row, row.$id)
+                            }),
+                            /*#__PURE__*/ _jsx(Typography, {
+                                variant: "caption",
+                                color: "text.secondary",
+                                noWrap: true,
+                                children: row.moreItems ? `${row.firstItem} and more` : row.firstItem
+                            })
+                        ]
+                    })
+            },
+            {
+                field: 'customerLabel',
+                headerName: 'Customer',
+                flex: 1,
+                minWidth: 160,
+                renderCell: ({ row })=>/*#__PURE__*/ _jsx(Typography, {
+                        variant: "body2",
+                        noWrap: true,
+                        children: row.customerLabel || '—'
+                    })
+            },
+            {
+                field: 'totalCents',
+                headerName: 'Total',
+                type: 'number',
+                width: 140,
+                align: 'right',
+                headerAlign: 'right',
+                renderCell: ({ row })=>{
+                    var _row_quote_tax, _row_quote;
+                    return /*#__PURE__*/ _jsxs(Stack, {
+                        sx: {
+                            alignItems: 'flex-end',
+                            minWidth: 0,
+                            width: 1
+                        },
+                        children: [
+                            /*#__PURE__*/ _jsx(Typography, {
+                                variant: "body2",
+                                children: posMoney(row.totalCents)
+                            }),
+                            ((_row_quote = row.quote) == null ? void 0 : (_row_quote_tax = _row_quote.tax) == null ? void 0 : _row_quote_tax.kind) === 'at-payment' && CommerceModel.isUnpaidQuote(row) ? /*#__PURE__*/ _jsx(Typography, {
+                                variant: "caption",
+                                color: "text.secondary",
+                                noWrap: true,
+                                children: 'plus tax at payment'
+                            }) : null
+                        ]
+                    });
+                }
+            },
+            {
+                field: 'statusLabel',
+                headerName: 'Status',
+                width: 180,
+                renderCell: ({ row })=>/*#__PURE__*/ _jsx(Chip, {
+                        size: "small",
+                        variant: "outlined",
+                        label: row.statusLabel,
+                        color: CommerceModel.QUOTE_STATUS_COLOR[row.statusKey]
+                    })
+            },
+            {
+                field: 'updatedAtMs',
+                headerName: 'Updated',
+                type: 'number',
+                width: 140,
+                align: 'left',
+                headerAlign: 'left',
+                renderCell: ({ row })=>/*#__PURE__*/ _jsx(Typography, {
+                        variant: "body2",
+                        noWrap: true,
+                        children: row.updatedAtMs ? new Date(row.updatedAtMs).toLocaleDateString() : '—'
+                    })
+            }
+        ], []);
+    const empty = status === 'success' && rows.length === 0;
+    return /*#__PURE__*/ _jsxs(CardDisplay, {
+        header: 'Quotes',
+        subheader: 'Prices for a customer’s order before they buy',
+        help: pluginDocsHelp('quotes', {
+            anchor: '#make-a-quote',
+            title: 'Quotes',
+            excerpt: 'Put a price to a customer with your products, items typed for the job and anything ' + 'included. A quote becomes an order when it is paid.'
+        }),
+        HeaderProps: {
+            action: /*#__PURE__*/ _jsx(BlockedControl, {
+                blocked: !canEdit,
+                reason: REFUSAL,
+                children: /*#__PURE__*/ _jsx(Button, {
+                    size: "small",
+                    variant: "contained",
+                    onClick: ()=>setOpenId('new'),
+                    children: 'New quote'
+                })
+            })
+        },
+        contentGutterX: true,
+        contentGutterY: true,
+        children: [
+            empty ? /*#__PURE__*/ _jsx(Typography, {
+                variant: "body2",
+                color: "text.secondary",
+                children: 'No quotes yet. A quote prices a customer’s order before they buy: your products, ' + 'items typed for the job, and anything you include at no charge.'
+            }) : /*#__PURE__*/ _jsxs(Stack, {
+                spacing: 1,
+                children: [
+                    quotes.truncated ? /*#__PURE__*/ _jsx(Typography, {
+                        variant: "caption",
+                        color: "text.secondary",
+                        children: 'This store has more quotes than the list shows at once.'
+                    }) : null,
+                    /*#__PURE__*/ _jsx(ListTable, {
+                        "aria-label": "Quotes",
+                        rows: rows,
+                        columns: columns,
+                        loading: status === 'loading',
+                        onOpen: (id)=>setOpenId(id),
+                        quickFilter: true,
+                        initialState: {
+                            sorting: {
+                                sortModel: [
+                                    {
+                                        field: 'updatedAtMs',
+                                        sort: 'desc'
+                                    }
+                                ]
+                            }
+                        },
+                        noRowsLabel: "No quotes match"
+                    })
+                ]
+            }),
+            openId === 'new' || openQuote ? /*#__PURE__*/ _jsx(QuoteEditorDialog, {
+                hostId: hostId,
+                quote: openQuote,
+                products: products,
+                canEdit: canEdit,
+                canSend: canSend,
+                onClose: ()=>setOpenId(null)
+            }, openId) : null
+        ]
+    });
+}
+HostQuotesCard.displayName = 'HostQuotesCard';
+export default HostQuotesCard;
+
+//# sourceMappingURL=host-quotes-card.component.js.map

package/src/lib/components/console/host-quotes-card.component.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../../libs/plugins/commerce/src/lib/components/console/host-quotes-card.component.tsx"],"sourcesContent":["/**\n * @license\n * Copyright 2026 Aglyn LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *   http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n'use client'\n\nimport * as CommerceModel from '../../model'\nimport { posMoney } from '../../model/commerce-pos-ops'\nimport { commerceSitePermissionRefusal } from '../../model/plugin-permissions'\nimport { pluginDocsHelp } from '@aglyn/aglyn'\nimport { CardDisplay } from '@aglyn/shared-ui-jsx'\nimport { BlockedControl } from '@aglyn/shared-ui-jsx/components/blocked-control.component'\nimport { ListTable } from '@aglyn/shared-ui-jsx/components/list-table.component'\nimport {\n  ceilingedWindow,\n  collectionCeiling,\n  useFirestore,\n  useFirestoreCollection,\n} from '@aglyn/tenant-feature-instance'\nimport { Button, Chip, Stack, Typography } from '@mui/material'\nimport type { GridColDef } from '@mui/x-data-grid'\nimport { collection, limit, query, where } from 'firebase/firestore'\nimport { useEffect, useMemo, useState } from 'react'\nimport QuoteEditorDialog, { type QuoteRow } from './quote-editor-dialog.component'\n\nexport interface HostQuotesCardProps {\n  hostId: string\n  /** Holds \"Create and edit quotes\" (`commerce.quotes`). */\n  canEdit: boolean\n  /** Holds \"Send quotes and invoices to customers\" (`commerce.quotes.send`). */\n  canSend: boolean\n}\n\n/**\n * How many quotes the list reads. The whole set is read and the grid sorts\n * it by any column; a store past this many is told the list stops short.\n */\nconst QUOTE_CEILING = 500\n\n/** The products the editor's picker offers. */\nconst PRODUCT_WINDOW = 200\n\nconst REFUSAL = commerceSitePermissionRefusal('commerce.quotes')\n\ninterface QuoteListRow extends QuoteRow {\n  customerLabel: string\n  firstItem: string\n  moreItems: number\n  statusKey: ReturnType<typeof CommerceModel.quoteDisplayStatus>['key']\n  statusLabel: string\n  totalCents: number\n  updatedAtMs: number\n}\n\n/** One quote as its row draws and sorts it. */\nfunction quoteListRow(quote: QuoteRow): QuoteListRow {\n  const customer = quote.quote?.customer\n  const status = CommerceModel.quoteDisplayStatus(quote)\n  const items = quote.lineItems ?? []\n  return {\n    ...quote,\n    customerLabel: customer?.name || customer?.company || customer?.email || '',\n    firstItem: items[0]?.name ?? '',\n    moreItems: Math.max(0, items.length - 1),\n    statusKey: status.key,\n    statusLabel: status.label,\n    totalCents: Number(quote.totals?.totalCents ?? 0),\n    // The customer's latest answer counts as an update (AGL-4096), so a quote\n    // they just approved or asked changes to sorts to the top.\n    updatedAtMs: Math.max(\n      Number(quote.quote?.updatedAtMs ?? 0),\n      Number(CommerceModel.latestQuoteResponse(quote.quote)?.atMs ?? 0),\n    ),\n  }\n}\n\n/**\n * Quotes (AGL-4093): prices put to a customer before they buy, beside the\n * orders they become. A quote is an unpaid order on the `quote` channel, so\n * this reads `hosts/{hostId}/orders` for that channel alone; the Orders list\n * above never shows one until it is paid.\n */\nexport function HostQuotesCard(props: HostQuotesCardProps) {\n  const { hostId, canEdit, canSend } = props\n  const firestore = useFirestore()\n  const { data: quoteDocs, status } = useFirestoreCollection<QuoteRow>(\n    () =>\n      query(\n        collection(firestore, 'hosts', hostId, 'orders'),\n        where('channel', '==', 'quote'),\n        limit(QUOTE_CEILING + 1),\n      ),\n    [firestore, hostId],\n    { idField: '$id' },\n  )\n  const quotes = useMemo(() => ceilingedWindow<QuoteRow>(quoteDocs ?? undefined, QUOTE_CEILING), [quoteDocs])\n  const rows = useMemo(() => Array.from(quotes.rows, quoteListRow), [quotes])\n\n  const { data: productDocs } = useFirestoreCollection<Record<string, any>>(\n    () => collectionCeiling(collection(firestore, 'hosts', hostId, 'products'), PRODUCT_WINDOW),\n    [firestore, hostId],\n    { idField: '$id' },\n  )\n  const products = useMemo(\n    () => ceilingedWindow<Record<string, any>>(productDocs ?? undefined, PRODUCT_WINDOW).rows.filter((product) => !product['deletedAt']),\n    [productDocs],\n  )\n\n  /** The quote open in the editor: its id, or `new`. */\n  const [openId, setOpenId] = useState<string | null>(null)\n  const openQuote = openId && openId !== 'new' ? (quotes.rows.find((row) => row.$id === openId) ?? null) : null\n\n  // A manager notice opens its quote (AGL-4096): `?quote=<id>` on the Orders\n  // page, once that quote has loaded.\n  const [linkedId, setLinkedId] = useState(() =>\n    typeof window === 'undefined' ? '' : (new URLSearchParams(window.location.search).get('quote') ?? ''),\n  )\n  useEffect(() => {\n    if (!linkedId || !quotes.rows.some((row) => row.$id === linkedId)) return\n    setOpenId(linkedId)\n    setLinkedId('')\n  }, [linkedId, quotes.rows])\n\n  const columns = useMemo<GridColDef[]>(\n    () => [\n      {\n        field: 'number',\n        headerName: 'Quote',\n        flex: 1,\n        minWidth: 160,\n        renderCell: ({ row }: { row: QuoteListRow }) => (\n          <Stack sx={{ minWidth: 0 }}>\n            <Typography variant=\"body2\" noWrap>\n              {CommerceModel.formatQuoteNumber(row, row.$id)}\n            </Typography>\n            <Typography variant=\"caption\" color=\"text.secondary\" noWrap>\n              {row.moreItems ? `${row.firstItem} and more` : row.firstItem}\n            </Typography>\n          </Stack>\n        ),\n      },\n      {\n        field: 'customerLabel',\n        headerName: 'Customer',\n        flex: 1,\n        minWidth: 160,\n        renderCell: ({ row }: { row: QuoteListRow }) => (\n          <Typography variant=\"body2\" noWrap>\n            {row.customerLabel || '—'}\n          </Typography>\n        ),\n      },\n      {\n        field: 'totalCents',\n        headerName: 'Total',\n        type: 'number',\n        width: 140,\n        align: 'right',\n        headerAlign: 'right',\n        renderCell: ({ row }: { row: QuoteListRow }) => (\n          <Stack sx={{ alignItems: 'flex-end', minWidth: 0, width: 1 }}>\n            <Typography variant=\"body2\">{posMoney(row.totalCents)}</Typography>\n            {row.quote?.tax?.kind === 'at-payment' && CommerceModel.isUnpaidQuote(row) ? (\n              <Typography variant=\"caption\" color=\"text.secondary\" noWrap>\n                {'plus tax at payment'}\n              </Typography>\n            ) : null}\n          </Stack>\n        ),\n      },\n      {\n        field: 'statusLabel',\n        headerName: 'Status',\n        width: 180,\n        renderCell: ({ row }: { row: QuoteListRow }) => (\n          <Chip\n            size=\"small\"\n            variant=\"outlined\"\n            label={row.statusLabel}\n            color={CommerceModel.QUOTE_STATUS_COLOR[row.statusKey]}\n          />\n        ),\n      },\n      {\n        field: 'updatedAtMs',\n        headerName: 'Updated',\n        type: 'number',\n        width: 140,\n        align: 'left',\n        headerAlign: 'left',\n        renderCell: ({ row }: { row: QuoteListRow }) => (\n          <Typography variant=\"body2\" noWrap>\n            {row.updatedAtMs ? new Date(row.updatedAtMs).toLocaleDateString() : '—'}\n          </Typography>\n        ),\n      },\n    ],\n    [],\n  )\n\n  const empty = status === 'success' && rows.length === 0\n\n  return (\n    <CardDisplay\n      header={'Quotes'}\n      subheader={'Prices for a customer’s order before they buy'}\n      help={pluginDocsHelp('quotes', {\n        anchor: '#make-a-quote',\n        title: 'Quotes',\n        excerpt:\n          'Put a price to a customer with your products, items typed for the job and anything ' +\n          'included. A quote becomes an order when it is paid.',\n      })}\n      HeaderProps={{\n        action: (\n          <BlockedControl blocked={!canEdit} reason={REFUSAL}>\n            <Button size=\"small\" variant=\"contained\" onClick={() => setOpenId('new')}>\n              {'New quote'}\n            </Button>\n          </BlockedControl>\n        ),\n      }}\n      contentGutterX\n      contentGutterY\n    >\n      {empty ? (\n        <Typography variant=\"body2\" color=\"text.secondary\">\n          {'No quotes yet. A quote prices a customer’s order before they buy: your products, ' +\n            'items typed for the job, and anything you include at no charge.'}\n        </Typography>\n      ) : (\n        <Stack spacing={1}>\n          {quotes.truncated ? (\n            <Typography variant=\"caption\" color=\"text.secondary\">\n              {'This store has more quotes than the list shows at once.'}\n            </Typography>\n          ) : null}\n          <ListTable\n            aria-label=\"Quotes\"\n            rows={rows}\n            columns={columns}\n            loading={status === 'loading'}\n            onOpen={(id) => setOpenId(id)}\n            quickFilter\n            initialState={{ sorting: { sortModel: [{ field: 'updatedAtMs', sort: 'desc' }] } }}\n            noRowsLabel=\"No quotes match\"\n          />\n        </Stack>\n      )}\n      {/* A quote deleted while open closes its editor rather than turn it into a new one. */}\n      {openId === 'new' || openQuote ? (\n        <QuoteEditorDialog\n          key={openId}\n          hostId={hostId}\n          quote={openQuote}\n          products={products}\n          canEdit={canEdit}\n          canSend={canSend}\n          onClose={() => setOpenId(null)}\n        />\n      ) : null}\n    </CardDisplay>\n  )\n}\nHostQuotesCard.displayName = 'HostQuotesCard'\n\nexport default HostQuotesCard\n"],"names":["CommerceModel","posMoney","commerceSitePermissionRefusal","pluginDocsHelp","CardDisplay","BlockedControl","ListTable","ceilingedWindow","collectionCeiling","useFirestore","useFirestoreCollection","Button","Chip","Stack","Typography","collection","limit","query","where","useEffect","useMemo","useState","QuoteEditorDialog","QUOTE_CEILING","PRODUCT_WINDOW","REFUSAL","quoteListRow","quote","items","customer","status","quoteDisplayStatus","lineItems","customerLabel","name","company","email","firstItem","moreItems","Math","max","length","statusKey","key","statusLabel","label","totalCents","Number","totals","updatedAtMs","latestQuoteResponse","atMs","HostQuotesCard","props","quotes","hostId","canEdit","canSend","firestore","data","quoteDocs","idField","undefined","rows","Array","from","productDocs","products","filter","product","openId","setOpenId","openQuote","find","row","$id","linkedId","setLinkedId","window","URLSearchParams","location","search","get","some","columns","field","headerName","flex","minWidth","renderCell","sx","variant","noWrap","formatQuoteNumber","color","type","width","align","headerAlign","alignItems","tax","kind","isUnpaidQuote","size","QUOTE_STATUS_COLOR","Date","toLocaleDateString","empty","header","subheader","help","anchor","title","excerpt","HeaderProps","action","blocked","reason","onClick","contentGutterX","contentGutterY","spacing","truncated","aria-label","loading","onOpen","id","quickFilter","initialState","sorting","sortModel","sort","noRowsLabel","onClose","displayName"],"mappings":"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"}

package/src/lib/components/console/order-invoice.component.d.ts

@@ -21,10 +21,12 @@ export interface OrderInvoiceButtonProps {
     order: CommerceModel.HostOrder;
 }
 /**
- * "Invoice" (AGL-3611), beside "Packing slip" in the order dialog: the order
- * as a printable bill, which the print dialog also saves as a PDF. The store's
- * name, currency and footer are read when it is clicked, not while the dialog
- * is open, so the dialog listens to nothing more.
+ * "Invoice" (AGL-3611), beside "Packing slip" in the order dialog: a menu of
+ * "Print invoice", the order as a printable bill, and "Download PDF"
+ * (AGL-4095), the branded invoice the server makes in the site's colors with
+ * its logo (`commerce/order-print?kind=invoice-pdf`, "Manage orders"). The
+ * store's name, currency and footer are read when one is clicked, not while
+ * the dialog is open, so the dialog listens to nothing more.
  */
 export declare function OrderInvoiceButton(props: OrderInvoiceButtonProps): import("react").JSX.Element;
 export declare namespace OrderInvoiceButton {

package/src/lib/components/console/order-invoice.component.js

@@ -14,22 +14,57 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */ 'use client';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useFirestore } from "@aglyn/tenant-feature-instance";
-import { Button } from "@mui/material";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useSnackbar } from "@aglyn/shared-ui-snackstack";
+import { useFirestore, useUser } from "@aglyn/tenant-feature-instance";
+import { Button, Menu, MenuItem } from "@mui/material";
 import { doc, getDoc } from "firebase/firestore";
 import { useCallback, useState } from "react";
 import { buildOrderInvoiceHtml, invoiceStoreFrom } from "../../utils/order-invoice.js";
+import { downloadCommercePdf } from "./commerce-pdf-download.js";
 /**
- * "Invoice" (AGL-3611), beside "Packing slip" in the order dialog: the order
- * as a printable bill, which the print dialog also saves as a PDF. The store's
- * name, currency and footer are read when it is clicked, not while the dialog
- * is open, so the dialog listens to nothing more.
+ * "Invoice" (AGL-3611), beside "Packing slip" in the order dialog: a menu of
+ * "Print invoice", the order as a printable bill, and "Download PDF"
+ * (AGL-4095), the branded invoice the server makes in the site's colors with
+ * its logo (`commerce/order-print?kind=invoice-pdf`, "Manage orders"). The
+ * store's name, currency and footer are read when one is clicked, not while
+ * the dialog is open, so the dialog listens to nothing more.
  */ export function OrderInvoiceButton(props) {
     const { hostId, orderId, order } = props;
     const firestore = useFirestore();
+    const { data: user } = useUser();
+    const { enqueueSnackbar } = useSnackbar();
     const [busy, setBusy] = useState(false);
+    const [anchor, setAnchor] = useState(null);
+    const handleDownload = useCallback(async ()=>{
+        setAnchor(null);
+        setBusy(true);
+        try {
+            var _order_number;
+            const query = new URLSearchParams({
+                hostId,
+                orderId,
+                kind: 'invoice-pdf'
+            });
+            const refused = await downloadCommercePdf(user, `/api/commerce/order-print?${query.toString()}`, {
+                method: 'GET'
+            }, `invoice-${(_order_number = order.number) != null ? _order_number : orderId.slice(-6)}.pdf`);
+            if (refused) enqueueSnackbar(refused, {
+                variant: 'error',
+                allowDuplicate: true
+            });
+        } finally{
+            setBusy(false);
+        }
+    }, [
+        user,
+        hostId,
+        orderId,
+        order.number,
+        enqueueSnackbar
+    ]);
     const handleInvoice = useCallback(async ()=>{
+        setAnchor(null);
         // Opened before the reads, inside the click, so a popup blocker sees the
         // user's gesture.
         const win = window.open('', '_blank', 'width=720,height=900');
@@ -61,10 +96,31 @@ import { buildOrderInvoiceHtml, invoiceStoreFrom } from "../../utils/order-invoi
         orderId,
         order
     ]);
-    return /*#__PURE__*/ _jsx(Button, {
-        disabled: busy,
-        onClick: handleInvoice,
-        children: 'Invoice'
+    return /*#__PURE__*/ _jsxs(_Fragment, {
+        children: [
+            /*#__PURE__*/ _jsx(Button, {
+                disabled: busy,
+                "aria-haspopup": "menu",
+                "aria-expanded": anchor ? 'true' : undefined,
+                onClick: (event)=>setAnchor(event.currentTarget),
+                children: 'Invoice'
+            }),
+            /*#__PURE__*/ _jsxs(Menu, {
+                anchorEl: anchor,
+                open: Boolean(anchor),
+                onClose: ()=>setAnchor(null),
+                children: [
+                    /*#__PURE__*/ _jsx(MenuItem, {
+                        onClick: ()=>void handleInvoice(),
+                        children: 'Print invoice'
+                    }),
+                    /*#__PURE__*/ _jsx(MenuItem, {
+                        onClick: ()=>void handleDownload(),
+                        children: 'Download PDF'
+                    })
+                ]
+            })
+        ]
     });
 }
 OrderInvoiceButton.displayName = 'OrderInvoiceButton';

package/src/lib/components/console/order-invoice.component.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../../../libs/plugins/commerce/src/lib/components/console/order-invoice.component.tsx"],"sourcesContent":["/**\n * @license\n * Copyright 2026 Aglyn LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *   http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n'use client'\n\nimport { useFirestore } from '@aglyn/tenant-feature-instance'\nimport { Button } from '@mui/material'\nimport { doc, getDoc } from 'firebase/firestore'\nimport { useCallback, useState } from 'react'\nimport type * as CommerceModel from '../../model'\nimport { buildOrderInvoiceHtml, invoiceStoreFrom } from '../../utils/order-invoice'\n\nexport interface OrderInvoiceButtonProps {\n  hostId: string\n  orderId: string\n  order: CommerceModel.HostOrder\n}\n\n/**\n * \"Invoice\" (AGL-3611), beside \"Packing slip\" in the order dialog: the order\n * as a printable bill, which the print dialog also saves as a PDF. The store's\n * name, currency and footer are read when it is clicked, not while the dialog\n * is open, so the dialog listens to nothing more.\n */\nexport function OrderInvoiceButton(props: OrderInvoiceButtonProps) {\n  const { hostId, orderId, order } = props\n  const firestore = useFirestore()\n  const [busy, setBusy] = useState(false)\n\n  const handleInvoice = useCallback(async () => {\n    // Opened before the reads, inside the click, so a popup blocker sees the\n    // user's gesture.\n    const win = window.open('', '_blank', 'width=720,height=900')\n    if (!win) return\n    setBusy(true)\n    try {\n      const [host, store] = await Promise.all([\n        getDoc(doc(firestore, 'hosts', hostId)).catch(() => null),\n        getDoc(doc(firestore, 'hosts', hostId, 'settings', 'store')).catch(() => null),\n      ])\n      const html = buildOrderInvoiceHtml({\n        order,\n        orderId,\n        store: invoiceStoreFrom(\n          host?.data() as Record<string, unknown> | undefined,\n          store?.data() as Record<string, unknown> | undefined,\n        ),\n      })\n      // Every value in `html` is escaped by the builder (AGL-2283).\n      win.document.write(html)\n      win.document.close()\n      // Print from the opener, not an injected script: the popup inherits\n      // the console's CSP (AGL-523).\n      win.focus()\n      win.print()\n    } finally {\n      setBusy(false)\n    }\n  }, [firestore, hostId, orderId, order])\n\n  return (\n    <Button disabled={busy} onClick={handleInvoice}>\n      {'Invoice'}\n    </Button>\n  )\n}\nOrderInvoiceButton.displayName = 'OrderInvoiceButton'\n\nexport default OrderInvoiceButton\n"],"names":["useFirestore","Button","doc","getDoc","useCallback","useState","buildOrderInvoiceHtml","invoiceStoreFrom","OrderInvoiceButton","props","hostId","orderId","order","firestore","busy","setBusy","handleInvoice","win","window","open","host","store","Promise","all","catch","html","data","document","write","close","focus","print","disabled","onClick","displayName"],"mappings":"AAAA;;;;;;;;;;;;;;;CAeC,GAED;;AAEA,SAASA,YAAY,QAAQ,iCAAgC;AAC7D,SAASC,MAAM,QAAQ,gBAAe;AACtC,SAASC,GAAG,EAAEC,MAAM,QAAQ,qBAAoB;AAChD,SAASC,WAAW,EAAEC,QAAQ,QAAQ,QAAO;AAE7C,SAASC,qBAAqB,EAAEC,gBAAgB,QAAQ,+BAA2B;AAQnF;;;;;CAKC,GACD,OAAO,SAASC,mBAAmBC,KAA8B;IAC/D,MAAM,EAAEC,MAAM,EAAEC,OAAO,EAAEC,KAAK,EAAE,GAAGH;IACnC,MAAMI,YAAYb;IAClB,MAAM,CAACc,MAAMC,QAAQ,GAAGV,SAAS;IAEjC,MAAMW,gBAAgBZ,YAAY;QAChC,yEAAyE;QACzE,kBAAkB;QAClB,MAAMa,MAAMC,OAAOC,IAAI,CAAC,IAAI,UAAU;QACtC,IAAI,CAACF,KAAK;QACVF,QAAQ;QACR,IAAI;YACF,MAAM,CAACK,MAAMC,MAAM,GAAG,MAAMC,QAAQC,GAAG,CAAC;gBACtCpB,OAAOD,IAAIW,WAAW,SAASH,SAASc,KAAK,CAAC,IAAM;gBACpDrB,OAAOD,IAAIW,WAAW,SAASH,QAAQ,YAAY,UAAUc,KAAK,CAAC,IAAM;aAC1E;YACD,MAAMC,OAAOnB,sBAAsB;gBACjCM;gBACAD;gBACAU,OAAOd,iBACLa,wBAAAA,KAAMM,IAAI,IACVL,yBAAAA,MAAOK,IAAI;YAEf;YACA,8DAA8D;YAC9DT,IAAIU,QAAQ,CAACC,KAAK,CAACH;YACnBR,IAAIU,QAAQ,CAACE,KAAK;YAClB,oEAAoE;YACpE,+BAA+B;YAC/BZ,IAAIa,KAAK;YACTb,IAAIc,KAAK;QACX,SAAU;YACRhB,QAAQ;QACV;IACF,GAAG;QAACF;QAAWH;QAAQC;QAASC;KAAM;IAEtC,qBACE,KAACX;QAAO+B,UAAUlB;QAAMmB,SAASjB;kBAC9B;;AAGP;AACAR,mBAAmB0B,WAAW,GAAG;AAEjC,eAAe1B,mBAAkB"}
+{"version":3,"sources":["../../../../../../../../libs/plugins/commerce/src/lib/components/console/order-invoice.component.tsx"],"sourcesContent":["/**\n * @license\n * Copyright 2026 Aglyn LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *   http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n'use client'\n\nimport { useSnackbar } from '@aglyn/shared-ui-snackstack'\nimport { useFirestore, useUser } from '@aglyn/tenant-feature-instance'\nimport { Button, Menu, MenuItem } from '@mui/material'\nimport { doc, getDoc } from 'firebase/firestore'\nimport { useCallback, useState } from 'react'\nimport type * as CommerceModel from '../../model'\nimport { buildOrderInvoiceHtml, invoiceStoreFrom } from '../../utils/order-invoice'\nimport { downloadCommercePdf } from './commerce-pdf-download'\n\nexport interface OrderInvoiceButtonProps {\n  hostId: string\n  orderId: string\n  order: CommerceModel.HostOrder\n}\n\n/**\n * \"Invoice\" (AGL-3611), beside \"Packing slip\" in the order dialog: a menu of\n * \"Print invoice\", the order as a printable bill, and \"Download PDF\"\n * (AGL-4095), the branded invoice the server makes in the site's colors with\n * its logo (`commerce/order-print?kind=invoice-pdf`, \"Manage orders\"). The\n * store's name, currency and footer are read when one is clicked, not while\n * the dialog is open, so the dialog listens to nothing more.\n */\nexport function OrderInvoiceButton(props: OrderInvoiceButtonProps) {\n  const { hostId, orderId, order } = props\n  const firestore = useFirestore()\n  const { data: user } = useUser()\n  const { enqueueSnackbar } = useSnackbar()\n  const [busy, setBusy] = useState(false)\n  const [anchor, setAnchor] = useState<HTMLElement | null>(null)\n\n  const handleDownload = useCallback(async () => {\n    setAnchor(null)\n    setBusy(true)\n    try {\n      const query = new URLSearchParams({ hostId, orderId, kind: 'invoice-pdf' })\n      const refused = await downloadCommercePdf(\n        user,\n        `/api/commerce/order-print?${query.toString()}`,\n        { method: 'GET' },\n        `invoice-${order.number ?? orderId.slice(-6)}.pdf`,\n      )\n      if (refused) enqueueSnackbar(refused, { variant: 'error', allowDuplicate: true })\n    } finally {\n      setBusy(false)\n    }\n  }, [user, hostId, orderId, order.number, enqueueSnackbar])\n\n  const handleInvoice = useCallback(async () => {\n    setAnchor(null)\n    // Opened before the reads, inside the click, so a popup blocker sees the\n    // user's gesture.\n    const win = window.open('', '_blank', 'width=720,height=900')\n    if (!win) return\n    setBusy(true)\n    try {\n      const [host, store] = await Promise.all([\n        getDoc(doc(firestore, 'hosts', hostId)).catch(() => null),\n        getDoc(doc(firestore, 'hosts', hostId, 'settings', 'store')).catch(() => null),\n      ])\n      const html = buildOrderInvoiceHtml({\n        order,\n        orderId,\n        store: invoiceStoreFrom(\n          host?.data() as Record<string, unknown> | undefined,\n          store?.data() as Record<string, unknown> | undefined,\n        ),\n      })\n      // Every value in `html` is escaped by the builder (AGL-2283).\n      win.document.write(html)\n      win.document.close()\n      // Print from the opener, not an injected script: the popup inherits\n      // the console's CSP (AGL-523).\n      win.focus()\n      win.print()\n    } finally {\n      setBusy(false)\n    }\n  }, [firestore, hostId, orderId, order])\n\n  return (\n    <>\n      <Button\n        disabled={busy}\n        aria-haspopup=\"menu\"\n        aria-expanded={anchor ? 'true' : undefined}\n        onClick={(event) => setAnchor(event.currentTarget)}\n      >\n        {'Invoice'}\n      </Button>\n      <Menu anchorEl={anchor} open={Boolean(anchor)} onClose={() => setAnchor(null)}>\n        <MenuItem onClick={() => void handleInvoice()}>{'Print invoice'}</MenuItem>\n        <MenuItem onClick={() => void handleDownload()}>{'Download PDF'}</MenuItem>\n      </Menu>\n    </>\n  )\n}\nOrderInvoiceButton.displayName = 'OrderInvoiceButton'\n\nexport default OrderInvoiceButton\n"],"names":["useSnackbar","useFirestore","useUser","Button","Menu","MenuItem","doc","getDoc","useCallback","useState","buildOrderInvoiceHtml","invoiceStoreFrom","downloadCommercePdf","OrderInvoiceButton","props","hostId","orderId","order","firestore","data","user","enqueueSnackbar","busy","setBusy","anchor","setAnchor","handleDownload","query","URLSearchParams","kind","refused","toString","method","number","slice","variant","allowDuplicate","handleInvoice","win","window","open","host","store","Promise","all","catch","html","document","write","close","focus","print","disabled","aria-haspopup","aria-expanded","undefined","onClick","event","currentTarget","anchorEl","Boolean","onClose","displayName"],"mappings":"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"}

package/src/lib/components/console/pos-ops/pos-check-ins-card.component.js

@@ -165,6 +165,39 @@ function PosCheckInsBody(props) {
                 minWidth: 150,
                 valueGetter: (_value, row)=>row.customerName || row.customerEmail || ''
             },
+            {
+                // What a pass waiting at the window can still have done to it: a
+                // rain check, or one taken back; and a stay's guest count (AGL-4043).
+                // Not a value, so nothing to sort.
+                //
+                // Second, beside the name it acts on, rather than trailing. The grid
+                // has no column pinning, so a trailing column sat past the right edge
+                // of any window narrower than every column put together — on a
+                // laptop, and always on a phone — and the window could not see it.
+                field: 'rainCheckAction',
+                headerName: 'Actions',
+                minWidth: 150,
+                sortable: false,
+                filterable: false,
+                hideable: false,
+                disableColumnMenu: true,
+                renderCell: ({ row })=>row.source === 'reservation' && row.reservationId ? /*#__PURE__*/ _jsx(Button, {
+                        size: "small",
+                        disabled: !canManagePos,
+                        onClick: ()=>setGuestsFor(row.reservationId),
+                        children: 'Guests'
+                    }) : row.source !== 'order' || row.status !== 'expected' ? null : row.rainCheck ? /*#__PURE__*/ _jsx(Button, {
+                        size: "small",
+                        disabled: !canManagePos,
+                        onClick: ()=>void undoRainCheck(row),
+                        children: 'Undo rain check'
+                    }) : /*#__PURE__*/ _jsx(Button, {
+                        size: "small",
+                        disabled: !canManagePos || !todayKey,
+                        onClick: ()=>setRainCheckRow(row),
+                        children: 'Rain check'
+                    })
+            },
             {
                 field: 'itemName',
                 headerName: 'Item',
@@ -225,34 +258,6 @@ function PosCheckInsBody(props) {
                 headerName: 'Wristband',
                 minWidth: 120,
                 valueGetter: (_value, row)=>describeWristband(row.wristband)
-            },
-            {
-                // What a pass waiting at the window can still have done to it: a
-                // rain check, or one taken back; and a stay's guest count (AGL-4043).
-                // Not a value, so nothing to sort.
-                field: 'rainCheckAction',
-                headerName: '',
-                minWidth: 150,
-                sortable: false,
-                filterable: false,
-                hideable: false,
-                disableColumnMenu: true,
-                renderCell: ({ row })=>row.source === 'reservation' && row.reservationId ? /*#__PURE__*/ _jsx(Button, {
-                        size: "small",
-                        disabled: !canManagePos,
-                        onClick: ()=>setGuestsFor(row.reservationId),
-                        children: 'Guests'
-                    }) : row.source !== 'order' || row.status !== 'expected' ? null : row.rainCheck ? /*#__PURE__*/ _jsx(Button, {
-                        size: "small",
-                        disabled: !canManagePos,
-                        onClick: ()=>void undoRainCheck(row),
-                        children: 'Undo rain check'
-                    }) : /*#__PURE__*/ _jsx(Button, {
-                        size: "small",
-                        disabled: !canManagePos || !todayKey,
-                        onClick: ()=>setRainCheckRow(row),
-                        children: 'Rain check'
-                    })
             }
         ], [
         list,