@aglyn/plugins-commerce 1.0.0-beta.230 → 1.0.0-beta.232

package/src/lib/components/console/pos/pos-tender-panel.component.js

@@ -0,0 +1,640 @@
+/**
+ * @license
+ * Copyright 2026 Aglyn LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */ 'use client';
+import { _ as _extends } from "@swc/helpers/_/_extends";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Alert, Box, Button, Chip, Divider, MenuItem, Stack, TextField, Typography } from "@mui/material";
+import { useConfirmationContext } from "@aglyn/shared-ui-jsx";
+import { useCallback, useEffect, useRef, useState } from "react";
+import * as CommerceModel from "../../../model/index.js";
+import { centsFromInput, newAttemptKey, posGiftCardBalance, posNativeBridge, posTender, PosRequestError, usd } from "./pos-api.js";
+import { POS_TOUCH_PX } from "./pos-product-grid.component.js";
+import { PosCashDialog, PosFolioDialog, PosGiftCardDialog, PosKeyedCardDialog, PosQrDialog } from "./pos-tender-dialogs.component.js";
+const STATUS_LABEL = {
+    pending: 'Waiting',
+    succeeded: 'Approved',
+    failed: 'Declined',
+    canceled: 'Canceled',
+    reversed: 'Returned'
+};
+const STATUS_COLOR = {
+    pending: 'info',
+    succeeded: 'success',
+    failed: 'error',
+    canceled: 'default',
+    reversed: 'warning'
+};
+/**
+ * Taking payment on an open sale (AGL-3607): the balance due, every payment
+ * taken so far with its live status, and the tenders. A sale can take as many
+ * payments as it needs; it is paid when the balance reaches zero, and only
+ * then does the server take the stock and complete it.
+ */ export function PosTenderPanel(props) {
+    var _ref, _ref1, _ref2, _ref3, _ref4, _ref5, _ref6;
+    var _context_terminal, _context_terminal1;
+    const { user, hostId, sale, context, display, onSale, notify } = props;
+    const settings = context == null ? void 0 : context.settings;
+    const [amount, setAmount] = useState('');
+    const [tipCents, setTipCents] = useState(0);
+    const [busy, setBusy] = useState(false);
+    const [dialog, setDialog] = useState(null);
+    const [qr, setQr] = useState(null);
+    const [keyed, setKeyed] = useState(null);
+    const [readerId, setReaderId] = useState('');
+    const inFlight = useRef(false);
+    const { confirm } = useConfirmationContext();
+    const { onTipChange } = props;
+    useEffect(()=>{
+        onTipChange == null ? void 0 : onTipChange(tipCents);
+    }, [
+        onTipChange,
+        tipCents
+    ]);
+    const readers = ((_ref = context == null ? void 0 : context.readers) != null ? _ref : []).filter((reader)=>!reader.registerId || reader.registerId === props.registerId);
+    useEffect(()=>{
+        if (!readerId && readers.length) {
+            var _ref;
+            var _readers_find;
+            setReaderId((_ref = (_readers_find = readers.find((reader)=>reader.registerId === props.registerId)) == null ? void 0 : _readers_find.id) != null ? _ref : readers[0].id);
+        }
+    }, [
+        readerId,
+        readers,
+        props.registerId
+    ]);
+    // The amount defaults to whatever is still open; a split is the cashier
+    // typing less than that.
+    const typedCents = centsFromInput(amount);
+    const chargeCents = typedCents > 0 ? Math.min(typedCents, sale.tenderableCents) : sale.tenderableCents;
+    const paid = sale.status === 'paid';
+    const run = useCallback(async (action, body = {}, starts = false)=>{
+        if (inFlight.current) return null;
+        inFlight.current = true;
+        setBusy(true);
+        try {
+            const result = await posTender(user, hostId, sale.orderId, action, starts && props.cashierAssertion ? _extends({}, body, {
+                cashierAssertion: props.cashierAssertion
+            }) : body, starts ? newAttemptKey() : undefined);
+            onSale(result.sale);
+            if (starts) {
+                setAmount('');
+                setTipCents(0);
+            }
+            return result;
+        } catch (error) {
+            notify(error instanceof PosRequestError ? error.message : 'Something went wrong', 'error');
+            return null;
+        } finally{
+            inFlight.current = false;
+            setBusy(false);
+        }
+    }, [
+        user,
+        hostId,
+        sale.orderId,
+        onSale,
+        notify,
+        props.cashierAssertion
+    ]);
+    // Card payments still waiting are checked every two seconds: the reader,
+    // the QR page and the typed card all settle on the server, and this is the
+    // register's view of it (the webhook does the same thing when it lands).
+    const pending = sale.payments.filter((payment)=>payment.status === 'pending' && CommerceModel.isCardPaymentMethod(payment.method));
+    const pendingKey = pending.map((payment)=>payment.id).join(',');
+    const latest = useRef({
+        user,
+        onSale
+    });
+    latest.current = {
+        user,
+        onSale
+    };
+    useEffect(()=>{
+        if (!pendingKey) return undefined;
+        const timer = setInterval(async ()=>{
+            for (const id of pendingKey.split(',')){
+                try {
+                    const result = await posTender(latest.current.user, hostId, sale.orderId, 'status', {
+                        paymentId: id
+                    });
+                    latest.current.onSale(result.sale);
+                } catch (unused) {
+                // The next tick asks again.
+                }
+            }
+        }, 2000);
+        return ()=>clearInterval(timer);
+    }, [
+        pendingKey,
+        hostId,
+        sale.orderId
+    ]);
+    // The display shows "tap your card" while a reader payment waits, and the
+    // running balance otherwise.
+    const readerWaiting = pending.some((payment)=>payment.method === 'card_present');
+    useEffect(()=>{
+        if (!display.connected || display.asking) return;
+        if (readerWaiting) {
+            void display.show({
+                mode: 'processing',
+                processing: {
+                    message: 'Tap, insert or swipe your card on the reader.'
+                }
+            });
+        }
+    }, [
+        readerWaiting,
+        display
+    ]);
+    const askTip = useCallback(async ()=>{
+        const base = chargeCents;
+        if (!(base > 0) || !settings) return;
+        const answer = await display.ask({
+            mode: 'tip',
+            tip: {
+                baseCents: base,
+                percentages: settings.tipPercentages,
+                allowCustom: true
+            }
+        });
+        if (answer) {
+            var _answer_tipCents;
+            setTipCents((_answer_tipCents = answer.tipCents) != null ? _answer_tipCents : 0);
+            notify(answer.tipCents ? `Tip: ${usd(answer.tipCents)}` : 'No tip', 'info');
+        }
+    }, [
+        chargeCents,
+        settings,
+        display,
+        notify
+    ]);
+    const startCardPresent = useCallback(async ()=>{
+        if (!readerId) return;
+        await run('card-present', {
+            amountCents: chargeCents,
+            tipCents,
+            readerId
+        }, true);
+    }, [
+        run,
+        chargeCents,
+        tipCents,
+        readerId
+    ]);
+    const startBridge = useCallback(async ()=>{
+        const bridge = posNativeBridge();
+        if (!bridge) return;
+        const amountCents = chargeCents;
+        const result = await run('card-present-sdk', {
+            amountCents,
+            tipCents
+        }, true);
+        if (!(result == null ? void 0 : result.paymentIntentId) || !result.clientSecret || !result.paymentId) return;
+        try {
+            const collected = await bridge.collectCardPayment({
+                paymentIntentId: result.paymentIntentId,
+                clientSecret: result.clientSecret,
+                amountCents: amountCents + tipCents
+            });
+            if (collected.status !== 'collected') {
+                var _collected_message;
+                notify((_collected_message = collected.message) != null ? _collected_message : 'The card was not taken.', 'warning');
+            }
+        } finally{
+            // Settled by the server either way: the status poll captures an
+            // authorized tap and records a decline or a cancel.
+            await run('status', {
+                paymentId: result.paymentId
+            });
+        }
+    }, [
+        run,
+        chargeCents,
+        tipCents,
+        notify
+    ]);
+    const startKeyed = useCallback(async ()=>{
+        const amountCents = chargeCents;
+        const result = await run('card-keyed', {
+            amountCents,
+            tipCents
+        }, true);
+        if ((result == null ? void 0 : result.clientSecret) && result.paymentId) {
+            setKeyed({
+                clientSecret: result.clientSecret,
+                amountCents: amountCents + tipCents,
+                paymentId: result.paymentId
+            });
+        }
+    }, [
+        run,
+        chargeCents,
+        tipCents
+    ]);
+    const startLink = useCallback(async ()=>{
+        var _result_sale_payments_find;
+        const amountCents = chargeCents;
+        const result = await run('card-link', {
+            amountCents,
+            tipCents
+        }, true);
+        const url = result == null ? void 0 : (_result_sale_payments_find = result.sale.payments.find((payment)=>payment.id === result.paymentId)) == null ? void 0 : _result_sale_payments_find.checkoutUrl;
+        if (url) setQr({
+            url,
+            amountCents: amountCents + tipCents
+        });
+    }, [
+        run,
+        chargeCents,
+        tipCents
+    ]);
+    const tipOn = Boolean(settings == null ? void 0 : settings.tippingEnabled) && !paid;
+    return /*#__PURE__*/ _jsxs(Stack, {
+        spacing: 1.5,
+        sx: {
+            minHeight: 0
+        },
+        children: [
+            /*#__PURE__*/ _jsxs(Box, {
+                sx: {
+                    display: 'flex',
+                    justifyContent: 'space-between',
+                    alignItems: 'baseline'
+                },
+                children: [
+                    /*#__PURE__*/ _jsx(Typography, {
+                        variant: "h6",
+                        children: paid ? 'Paid' : 'Balance due'
+                    }),
+                    /*#__PURE__*/ _jsx(Typography, {
+                        variant: "h4",
+                        component: "p",
+                        children: usd(paid ? sale.totalCents : sale.dueCents)
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsx(Typography, {
+                variant: "body2",
+                color: "text.secondary",
+                children: `Total ${usd(sale.totalCents)} · paid ${usd(sale.paidCents)}` + (sale.tipCents ? ` · tips ${usd(sale.tipCents)}` : '')
+            }),
+            sale.payments.length ? /*#__PURE__*/ _jsx(Stack, {
+                spacing: 1,
+                "aria-label": "Payments",
+                children: sale.payments.map((payment)=>{
+                    var _context_terminal;
+                    return /*#__PURE__*/ _jsxs(Box, {
+                        sx: {
+                            display: 'flex',
+                            alignItems: 'center',
+                            gap: 1,
+                            flexWrap: 'wrap'
+                        },
+                        children: [
+                            /*#__PURE__*/ _jsxs(Typography, {
+                                variant: "body2",
+                                sx: {
+                                    flex: 1,
+                                    minWidth: 140
+                                },
+                                children: [
+                                    CommerceModel.describeOrderPayment(_extends({}, payment, {
+                                        atMs: 0
+                                    })),
+                                    payment.changeCents ? ` · change ${usd(payment.changeCents)}` : ''
+                                ]
+                            }),
+                            /*#__PURE__*/ _jsx(Chip, {
+                                size: "small",
+                                label: STATUS_LABEL[payment.status],
+                                color: STATUS_COLOR[payment.status]
+                            }),
+                            payment.status === 'pending' && CommerceModel.isCardPaymentMethod(payment.method) ? /*#__PURE__*/ _jsxs(_Fragment, {
+                                children: [
+                                    payment.method === 'card_link' && payment.checkoutUrl ? /*#__PURE__*/ _jsx(Button, {
+                                        size: "small",
+                                        onClick: ()=>setQr({
+                                                url: payment.checkoutUrl,
+                                                amountCents: payment.amountCents
+                                            }),
+                                        children: 'Show QR'
+                                    }) : null,
+                                    payment.method === 'card_present' && payment.livemode === false && (context == null ? void 0 : (_context_terminal = context.terminal) == null ? void 0 : _context_terminal.testMode) ? /*#__PURE__*/ _jsx(Button, {
+                                        size: "small",
+                                        onClick: ()=>void run('simulate', {
+                                                paymentId: payment.id
+                                            }),
+                                        children: 'Simulate tap'
+                                    }) : null,
+                                    /*#__PURE__*/ _jsx(Button, {
+                                        size: "small",
+                                        color: "error",
+                                        onClick: ()=>void run('cancel', {
+                                                paymentId: payment.id
+                                            }),
+                                        children: 'Cancel'
+                                    })
+                                ]
+                            }) : null,
+                            payment.status === 'failed' && payment.method === 'card_present' && !paid ? /*#__PURE__*/ _jsx(Button, {
+                                size: "small",
+                                onClick: ()=>void run('retry', {
+                                        paymentId: payment.id
+                                    }),
+                                children: 'Retry'
+                            }) : null,
+                            payment.failureMessage && payment.status === 'failed' ? /*#__PURE__*/ _jsx(Typography, {
+                                variant: "caption",
+                                color: "error",
+                                sx: {
+                                    width: 1
+                                },
+                                children: payment.failureMessage
+                            }) : null
+                        ]
+                    }, payment.id);
+                })
+            }) : null,
+            !paid ? /*#__PURE__*/ _jsxs(_Fragment, {
+                children: [
+                    /*#__PURE__*/ _jsx(Divider, {}),
+                    /*#__PURE__*/ _jsx(Stack, {
+                        direction: "row",
+                        spacing: 1,
+                        sx: {
+                            alignItems: 'center'
+                        },
+                        children: /*#__PURE__*/ _jsx(TextField, {
+                            label: "Amount to charge ($)",
+                            placeholder: (sale.tenderableCents / 100).toFixed(2),
+                            value: amount,
+                            onChange: (event)=>setAmount(event.target.value.replace(/[^0-9.]/g, '')),
+                            sx: {
+                                flex: 1
+                            },
+                            helperText: typedCents > 0 && typedCents < sale.tenderableCents ? `Split: ${usd(sale.tenderableCents - typedCents)} stays open` : ' ',
+                            slotProps: {
+                                htmlInput: {
+                                    inputMode: 'decimal'
+                                }
+                            }
+                        })
+                    }),
+                    tipOn ? /*#__PURE__*/ _jsxs(Stack, {
+                        direction: "row",
+                        spacing: 1,
+                        sx: {
+                            alignItems: 'center',
+                            flexWrap: 'wrap',
+                            rowGap: 1
+                        },
+                        children: [
+                            /*#__PURE__*/ _jsx(Typography, {
+                                variant: "body2",
+                                sx: {
+                                    mr: 1
+                                },
+                                children: `Tip ${usd(tipCents)}`
+                            }),
+                            display.connected ? /*#__PURE__*/ _jsx(Button, {
+                                variant: "outlined",
+                                onClick: ()=>void askTip(),
+                                disabled: busy || Boolean(display.asking),
+                                sx: {
+                                    minHeight: POS_TOUCH_PX
+                                },
+                                children: display.asking === 'tip' ? 'Waiting for customer…' : 'Ask on display'
+                            }) : null,
+                            ((_ref1 = settings == null ? void 0 : settings.tipPercentages) != null ? _ref1 : []).map((pct)=>/*#__PURE__*/ _jsx(Button, {
+                                    variant: tipCents === CommerceModel.posTipFromPercent(chargeCents, pct) && tipCents > 0 ? 'contained' : 'outlined',
+                                    onClick: ()=>setTipCents(CommerceModel.posTipFromPercent(chargeCents, pct)),
+                                    sx: {
+                                        minHeight: POS_TOUCH_PX
+                                    },
+                                    children: `${pct}%`
+                                }, pct)),
+                            /*#__PURE__*/ _jsx(Button, {
+                                onClick: ()=>setTipCents(0),
+                                sx: {
+                                    minHeight: POS_TOUCH_PX
+                                },
+                                children: 'No tip'
+                            })
+                        ]
+                    }) : null,
+                    /*#__PURE__*/ _jsxs(Box, {
+                        sx: {
+                            display: 'grid',
+                            gap: 1,
+                            gridTemplateColumns: 'repeat(auto-fill, minmax(140px, 1fr))'
+                        },
+                        children: [
+                            /*#__PURE__*/ _jsx(Button, {
+                                variant: "contained",
+                                disabled: busy || chargeCents <= 0,
+                                onClick: ()=>setDialog('cash'),
+                                sx: {
+                                    minHeight: 56
+                                },
+                                children: 'Cash'
+                            }),
+                            (context == null ? void 0 : (_context_terminal = context.terminal) == null ? void 0 : _context_terminal.available) && readers.length ? /*#__PURE__*/ _jsx(Button, {
+                                variant: "contained",
+                                disabled: busy || chargeCents <= 0 || !readerId,
+                                onClick: ()=>void startCardPresent(),
+                                sx: {
+                                    minHeight: 56
+                                },
+                                children: 'Card reader'
+                            }) : null,
+                            posNativeBridge() ? /*#__PURE__*/ _jsx(Button, {
+                                variant: "contained",
+                                disabled: busy || chargeCents <= 0,
+                                onClick: ()=>void startBridge(),
+                                sx: {
+                                    minHeight: 56
+                                },
+                                children: 'Tap to Pay / Bluetooth reader'
+                            }) : null,
+                            (context == null ? void 0 : context.publishableKey) ? /*#__PURE__*/ _jsx(Button, {
+                                variant: "outlined",
+                                disabled: busy || chargeCents <= 0,
+                                onClick: ()=>void startKeyed(),
+                                sx: {
+                                    minHeight: 56
+                                },
+                                children: 'Type card'
+                            }) : null,
+                            /*#__PURE__*/ _jsx(Button, {
+                                variant: "outlined",
+                                disabled: busy || chargeCents <= 0,
+                                onClick: ()=>void startLink(),
+                                sx: {
+                                    minHeight: 56
+                                },
+                                children: 'Card (QR)'
+                            }),
+                            /*#__PURE__*/ _jsx(Button, {
+                                variant: "outlined",
+                                disabled: busy || chargeCents <= 0,
+                                onClick: ()=>setDialog('gift'),
+                                sx: {
+                                    minHeight: 56
+                                },
+                                children: 'Gift card'
+                            }),
+                            props.stays.length ? /*#__PURE__*/ _jsx(Button, {
+                                variant: "outlined",
+                                disabled: busy || chargeCents <= 0,
+                                onClick: ()=>setDialog('folio'),
+                                sx: {
+                                    minHeight: 56
+                                },
+                                children: 'Room'
+                            }) : null
+                        ]
+                    }),
+                    (context == null ? void 0 : (_context_terminal1 = context.terminal) == null ? void 0 : _context_terminal1.available) && readers.length > 1 ? /*#__PURE__*/ _jsx(TextField, {
+                        select: true,
+                        size: "small",
+                        label: "Card reader",
+                        value: readerId,
+                        onChange: (event)=>setReaderId(event.target.value),
+                        children: readers.map((reader)=>/*#__PURE__*/ _jsx(MenuItem, {
+                                value: reader.id,
+                                children: `${reader.label}${reader.status === 'online' ? '' : ' (offline)'}`
+                            }, reader.id))
+                    }) : null,
+                    readers.some((reader)=>reader.id === readerId && reader.status !== 'online') ? /*#__PURE__*/ _jsx(Alert, {
+                        severity: "warning",
+                        children: 'The selected card reader looks offline.'
+                    }) : null,
+                    /*#__PURE__*/ _jsx(Button, {
+                        color: "error",
+                        disabled: busy,
+                        onClick: async ()=>{
+                            const confirmed = await confirm({
+                                title: 'Void this sale?',
+                                description: 'Every payment taken on it is handed back: cards are refunded, gift ' + 'cards re-credited and room charges removed. Hand back any cash.',
+                                confirmationText: 'Void sale',
+                                confirmationButtonProps: {
+                                    color: 'error'
+                                }
+                            }).then(()=>true).catch(()=>false);
+                            if (!confirmed) return;
+                            const result = await run('void');
+                            if (result) {
+                                notify('Sale voided', 'info');
+                                props.onVoided();
+                            }
+                        },
+                        sx: {
+                            minHeight: POS_TOUCH_PX,
+                            alignSelf: 'flex-start'
+                        },
+                        children: 'Void sale'
+                    })
+                ]
+            }) : null,
+            /*#__PURE__*/ _jsx(PosCashDialog, {
+                open: dialog === 'cash',
+                dueCents: chargeCents,
+                tipCents: tipCents,
+                busy: busy,
+                onClose: ()=>setDialog(null),
+                onTake: async (tenderedCents)=>{
+                    const result = await run('cash', _extends({
+                        tenderedCents
+                    }, typedCents > 0 ? {
+                        amountCents: chargeCents
+                    } : {}, {
+                        tipCents
+                    }), true);
+                    if (result) {
+                        var _result_sale_payments_find;
+                        setDialog(null);
+                        const change = (_result_sale_payments_find = result.sale.payments.find((payment)=>payment.id === result.paymentId)) == null ? void 0 : _result_sale_payments_find.changeCents;
+                        if (change) notify(`Change due: ${usd(change)}`, 'success');
+                    }
+                }
+            }),
+            /*#__PURE__*/ _jsx(PosGiftCardDialog, {
+                open: dialog === 'gift',
+                busy: busy,
+                onClose: ()=>setDialog(null),
+                onCheck: async (code)=>{
+                    try {
+                        return await posGiftCardBalance(user, hostId, code);
+                    } catch (error) {
+                        notify(error instanceof PosRequestError ? error.message : 'Could not read that card', 'warning');
+                        return null;
+                    }
+                },
+                onApply: async (code)=>{
+                    const result = await run('gift-card', _extends({
+                        code
+                    }, typedCents > 0 ? {
+                        amountCents: chargeCents
+                    } : {}), true);
+                    if (result) setDialog(null);
+                }
+            }),
+            /*#__PURE__*/ _jsx(PosFolioDialog, {
+                open: dialog === 'folio',
+                amountCents: chargeCents,
+                stays: props.stays,
+                busy: busy,
+                onClose: ()=>setDialog(null),
+                onCharge: async (reservationId)=>{
+                    const result = await run('folio', _extends({
+                        reservationId
+                    }, typedCents > 0 ? {
+                        amountCents: chargeCents
+                    } : {}), true);
+                    if (result) setDialog(null);
+                }
+            }),
+            /*#__PURE__*/ _jsx(PosQrDialog, {
+                url: (_ref2 = qr == null ? void 0 : qr.url) != null ? _ref2 : '',
+                amountCents: (_ref3 = qr == null ? void 0 : qr.amountCents) != null ? _ref3 : 0,
+                onClose: ()=>setQr(null)
+            }),
+            /*#__PURE__*/ _jsx(PosKeyedCardDialog, {
+                clientSecret: (_ref4 = keyed == null ? void 0 : keyed.clientSecret) != null ? _ref4 : '',
+                publishableKey: (_ref5 = context == null ? void 0 : context.publishableKey) != null ? _ref5 : '',
+                amountCents: (_ref6 = keyed == null ? void 0 : keyed.amountCents) != null ? _ref6 : 0,
+                onClose: async ()=>{
+                    const open = keyed;
+                    setKeyed(null);
+                    // Closing without paying releases the amount for another tender.
+                    if (open) await run('cancel', {
+                        paymentId: open.paymentId
+                    });
+                },
+                onConfirmed: async ()=>{
+                    const open = keyed;
+                    setKeyed(null);
+                    if (open) await run('status', {
+                        paymentId: open.paymentId
+                    });
+                }
+            })
+        ]
+    });
+}
+PosTenderPanel.displayName = 'PosTenderPanel';
+
+//# sourceMappingURL=pos-tender-panel.component.js.map