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

package/src/lib/components/console/pos-kiosk-page.component.js

@@ -0,0 +1,791 @@
+/**
+ * @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 from "@mui/material/Alert";
+import Box from "@mui/material/Box";
+import Button from "@mui/material/Button";
+import CircularProgress from "@mui/material/CircularProgress";
+import Container from "@mui/material/Container";
+import Dialog from "@mui/material/Dialog";
+import DialogActions from "@mui/material/DialogActions";
+import DialogContent from "@mui/material/DialogContent";
+import DialogContentText from "@mui/material/DialogContentText";
+import DialogTitle from "@mui/material/DialogTitle";
+import Stack from "@mui/material/Stack";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import * as CommerceModel from "../../model/index.js";
+import { newAttemptKey, posNativeBridge } from "./pos/pos-api.js";
+import { PosItemDialog, posItemNeedsChoice } from "./pos/pos-item-dialog.component.js";
+import { PosDisplayBrandMark, PosDisplayBrandScreen } from "./pos-display/brand-screen.js";
+import { PosDisplayPairingScreen } from "./pos-display/pairing-screen.js";
+import { displayMoney } from "./pos-display/pos-display-api.js";
+import { PosDisplayReceiptScreen } from "./pos-display/receipt-screen.js";
+import { PosDisplayTipScreen, posDisplayTouchSx } from "./pos-display/tip-screen.js";
+import { KioskDone, KioskPaying, KioskReview } from "./pos-kiosk/kiosk-checkout.js";
+import { KioskMenu } from "./pos-kiosk/kiosk-menu.js";
+import { KioskStaffControl } from "./pos-kiosk/kiosk-staff.js";
+import { clearKioskCustomerStorage, kioskApi, readKioskToken, storeKioskToken } from "./pos-kiosk/pos-kiosk-api.js";
+import { useKioskIdle } from "./pos-kiosk/use-kiosk-idle.js";
+/** How often the kiosk asks after a card payment in flight. */ export const POS_KIOSK_PAYMENT_POLL_MS = 1500;
+/** A product as the register's item sheet takes it, from the kiosk's catalog. */ export function kioskItemProduct(product) {
+    return {
+        $id: product.id,
+        name: product.name,
+        slug: product.id,
+        type: 'physical',
+        status: 'active',
+        options: product.options,
+        modifierGroups: product.modifierGroups,
+        variants: product.variants.map((variant)=>({
+                id: variant.id,
+                options: variant.options,
+                priceUsd: variant.priceCents / 100,
+                // A sold-out variant reads as zero on hand; anything else as untracked,
+                // so the kiosk never learns or shows a stock count.
+                inventory: variant.soldOut ? 0 : null
+            }))
+    };
+}
+/** The cart line a choice makes: same item and choices merge. */ export function kioskCartLine(product, choice) {
+    var _product_variants_find;
+    const variant = (_product_variants_find = product.variants.find((candidate)=>candidate.id === choice.variant.id)) != null ? _product_variants_find : product.variants[0];
+    const picked = choice.modifiers.map((pick)=>{
+        const group = product.modifierGroups.find((candidate)=>candidate.id === pick.groupId);
+        return group == null ? void 0 : group.options.find((option)=>option.id === pick.optionId);
+    }).filter((option)=>Boolean(option));
+    const label = CommerceModel.lineLabelWithModifiers(Object.keys(variant.options).length ? Object.values(variant.options).join(' / ') : undefined, picked);
+    return _extends({
+        key: `${product.id}:${variant.id}:${CommerceModel.modifierSelectionKey(choice.modifiers)}`,
+        productId: product.id
+    }, variant.id !== 'default' || product.variants.length > 1 ? {
+        variantId: variant.id
+    } : {}, {
+        quantity: Math.min(CommerceModel.POS_KIOSK_MAX_QUANTITY, choice.quantity)
+    }, choice.modifiers.length ? {
+        modifiers: choice.modifiers
+    } : {}, {
+        name: product.name
+    }, label ? {
+        label
+    } : {}, {
+        unitCents: variant.priceCents + picked.reduce((sum, option)=>sum + option.priceCents, 0)
+    });
+}
+/**
+ * The self-service kiosk (AGL-3623), served at `/kiosk/commerce/pos-kiosk`
+ * with no staff session: a customer builds their own order and pays on the
+ * register's card reader or Tap to Pay, or sends it to the counter.
+ *
+ * It holds one secret — the kiosk token from pairing — and everything the
+ * customer chooses or types lives in this component's memory only. The idle
+ * reset (and "Done", and "Start over") voids an unpaid order, drops the
+ * cart, the tip and any email or phone, sweeps the kiosk's storage keys, and
+ * remounts every screen, so the next customer finds nothing of the last.
+ */ export default function PosKioskPage(_props) {
+    var _ref, _ref1, _ref2, _ref3, _idle_warning;
+    const [token, setToken] = useState(undefined);
+    const [context, setContext] = useState(null);
+    const [catalog, setCatalog] = useState(null);
+    const [catalogLoading, setCatalogLoading] = useState(false);
+    const [categoryId, setCategoryId] = useState(null);
+    const [phase, setPhase] = useState({
+        kind: 'start'
+    });
+    const [lines, setLines] = useState([]);
+    const [itemProduct, setItemProduct] = useState(null);
+    const [cartOpen, setCartOpen] = useState(false);
+    const [sale, setSale] = useState(null);
+    const [tip, setTip] = useState({
+        tipChoice: 'none'
+    });
+    const [busy, setBusy] = useState(false);
+    const [notice, setNotice] = useState(null);
+    const [offline, setOffline] = useState(false);
+    // Bumped by every reset: keys every screen, so inputs never carry over.
+    const [turn, setTurn] = useState(0);
+    // One attempt per cart, and one per press of a payment button.
+    const checkoutKey = useRef(null);
+    const payKey = useRef(null);
+    const saleRef = useRef(sale);
+    saleRef.current = sale;
+    const phaseRef = useRef(phase);
+    phaseRef.current = phase;
+    useEffect(()=>{
+        setToken(readKioskToken());
+    }, []);
+    const unpaired = useCallback(()=>{
+        storeKioskToken(null);
+        clearKioskCustomerStorage();
+        setToken(null);
+        setContext(null);
+        setCatalog(null);
+        setSale(null);
+        setLines([]);
+        setPhase({
+            kind: 'start'
+        });
+    }, []);
+    /** A response that says the kiosk is no longer paired ends the session. */ const lost = useCallback((status)=>{
+        if (status === 401) {
+            unpaired();
+            return true;
+        }
+        return false;
+    }, [
+        unpaired
+    ]);
+    // The kiosk's settings and the menu: read when paired, and again every
+    // ten minutes while idle on the start screen, so an edit reaches it.
+    const refresh = useCallback(async ()=>{
+        if (!token) return;
+        const result = await kioskApi.context(token);
+        if (lost(result.status)) return;
+        setOffline(!result.ok && result.status === 0);
+        if (result.ok && result.value) setContext(result.value);
+    }, [
+        token,
+        lost
+    ]);
+    useEffect(()=>{
+        void refresh();
+        const timer = setInterval(()=>{
+            if (phaseRef.current.kind === 'start') void refresh();
+        }, 10 * 60 * 1000);
+        return ()=>clearInterval(timer);
+    }, [
+        refresh
+    ]);
+    useEffect(()=>{
+        if (!token) return undefined;
+        let active = true;
+        setCatalogLoading(true);
+        void kioskApi.catalog(token, categoryId).then((result)=>{
+            if (!active) return;
+            setCatalogLoading(false);
+            if (lost(result.status)) return;
+            if (result.ok && result.value) setCatalog(result.value);
+            else setOffline(result.status === 0);
+        });
+        return ()=>{
+            active = false;
+        };
+    }, [
+        token,
+        categoryId,
+        turn,
+        lost
+    ]);
+    const currency = (_ref = (_ref1 = context == null ? void 0 : context.currency) != null ? _ref1 : catalog == null ? void 0 : catalog.currency) != null ? _ref : 'usd';
+    const money = useCallback((cents)=>displayMoney(cents, currency), [
+        currency
+    ]);
+    /**
+   * THE RESET: the unpaid order voided, every customer detail dropped from
+   * memory and storage, and the screens remounted on the start screen.
+   */ const reset = useCallback(()=>{
+        const open = saleRef.current;
+        if (token && open && open.status === 'open') void kioskApi.abandon(token, open.orderId);
+        setSale(null);
+        setLines([]);
+        setTip({
+            tipChoice: 'none'
+        });
+        setItemProduct(null);
+        setCartOpen(false);
+        setNotice(null);
+        setCategoryId(null);
+        checkoutKey.current = null;
+        payKey.current = null;
+        clearKioskCustomerStorage();
+        setPhase({
+            kind: 'start'
+        });
+        setTurn((value)=>value + 1);
+    }, [
+        token
+    ]);
+    const idle = useKioskIdle({
+        // Never while a card is being collected: the customer is at the reader.
+        active: Boolean(token) && phase.kind !== 'start' && phase.kind !== 'paying',
+        idleSeconds: (_ref2 = context == null ? void 0 : context.idleSeconds) != null ? _ref2 : CommerceModel.POS_KIOSK_IDLE_SECONDS_DEFAULT,
+        warningSeconds: CommerceModel.POS_KIOSK_IDLE_WARNING_SECONDS,
+        onExpire: reset
+    });
+    // The order-number screen returns to the start on its own.
+    useEffect(()=>{
+        if (phase.kind !== 'done') return undefined;
+        const timer = setTimeout(reset, CommerceModel.POS_KIOSK_DONE_SECONDS * 1000);
+        return ()=>clearTimeout(timer);
+    }, [
+        phase.kind,
+        reset
+    ]);
+    const addChoice = useCallback((product, choice)=>{
+        const line = kioskCartLine(product, choice);
+        checkoutKey.current = null;
+        setLines((current)=>{
+            const existing = current.find((candidate)=>candidate.key === line.key);
+            if (existing) {
+                return current.map((candidate)=>candidate.key === line.key ? _extends({}, candidate, {
+                        quantity: Math.min(CommerceModel.POS_KIOSK_MAX_QUANTITY, candidate.quantity + line.quantity)
+                    }) : candidate);
+            }
+            if (current.length >= CommerceModel.POS_KIOSK_MAX_LINES) return current;
+            return [
+                ...current,
+                line
+            ];
+        });
+    }, []);
+    const tapProduct = useCallback((product)=>{
+        var _product_variants_;
+        const asItem = kioskItemProduct(product);
+        if (posItemNeedsChoice(asItem)) {
+            setItemProduct(product);
+            return;
+        }
+        const variant = asItem.variants[0];
+        if (!variant || ((_product_variants_ = product.variants[0]) == null ? void 0 : _product_variants_.soldOut)) return;
+        addChoice(product, {
+            variant,
+            modifiers: [],
+            quantity: 1
+        });
+    }, [
+        addChoice
+    ]);
+    const checkout = useCallback(async ()=>{
+        var _result_value;
+        if (!token || busy || lines.length === 0) return;
+        if (!checkoutKey.current) checkoutKey.current = newAttemptKey();
+        setBusy(true);
+        setNotice(null);
+        const result = await kioskApi.checkout(token, lines.map(({ productId, variantId, quantity, modifiers })=>_extends({
+                productId
+            }, variantId ? {
+                variantId
+            } : {}, {
+                quantity
+            }, modifiers ? {
+                modifiers
+            } : {})), checkoutKey.current);
+        setBusy(false);
+        if (lost(result.status)) return;
+        if (!result.ok || !((_result_value = result.value) == null ? void 0 : _result_value.sale)) {
+            var _result_error;
+            // A refused cart is changed before it is tried again.
+            checkoutKey.current = null;
+            setNotice((_result_error = result.error) != null ? _result_error : 'Your order could not be priced. Try again.');
+            return;
+        }
+        setSale(result.value.sale);
+        setCartOpen(false);
+        setPhase({
+            kind: 'review'
+        });
+    }, [
+        token,
+        busy,
+        lines,
+        lost
+    ]);
+    const backToMenu = useCallback(()=>{
+        const open = saleRef.current;
+        if (token && open && open.status === 'open') void kioskApi.abandon(token, open.orderId);
+        setSale(null);
+        checkoutKey.current = null;
+        setNotice(null);
+        setPhase({
+            kind: 'menu'
+        });
+    }, [
+        token
+    ]);
+    const sendToCounter = useCallback(async ()=>{
+        var _result_value;
+        const open = saleRef.current;
+        if (!token || !open) return;
+        setBusy(true);
+        const result = await kioskApi.counter(token, open.orderId);
+        setBusy(false);
+        if (lost(result.status)) return;
+        if (!result.ok || !((_result_value = result.value) == null ? void 0 : _result_value.sale)) {
+            var _result_error;
+            setNotice((_result_error = result.error) != null ? _result_error : 'Your order could not be sent to the counter.');
+            return;
+        }
+        setSale(result.value.sale);
+        setLines([]);
+        setPhase({
+            kind: 'done'
+        });
+    }, [
+        token,
+        lost
+    ]);
+    const startPayment = useCallback(async (method, answer)=>{
+        var _ref;
+        const open = saleRef.current;
+        if (!token || !open) return;
+        if (!payKey.current) payKey.current = newAttemptKey();
+        setBusy(true);
+        setNotice(null);
+        const result = await kioskApi.pay(token, _extends({
+            orderId: open.orderId,
+            method
+        }, answer), payKey.current);
+        if (lost(result.status)) return setBusy(false);
+        if (!result.ok || !result.value) {
+            var _result_error;
+            setBusy(false);
+            payKey.current = null;
+            setNotice((_result_error = result.error) != null ? _result_error : 'The card payment could not be started.');
+            setPhase({
+                kind: 'review'
+            });
+            return;
+        }
+        const { sale: next, paymentId, clientSecret, paymentIntentId } = result.value;
+        setSale(next);
+        const tipCents = CommerceModel.posKioskTipCents(answer.tipChoice, {
+            baseCents: open.dueCents,
+            enabled: true,
+            percentages: (_ref = context == null ? void 0 : context.tipping.percentages) != null ? _ref : [],
+            percent: answer.tipPercent,
+            cents: answer.tipCents
+        });
+        const chargeCents = open.dueCents + (tipCents != null ? tipCents : 0);
+        setPhase({
+            kind: 'paying',
+            method,
+            paymentId: paymentId != null ? paymentId : null,
+            chargeCents,
+            failure: null
+        });
+        setBusy(false);
+        if (method === 'tap') {
+            const bridge = posNativeBridge();
+            if (!bridge || !clientSecret || !paymentIntentId) {
+                setPhase({
+                    kind: 'paying',
+                    method,
+                    paymentId: paymentId != null ? paymentId : null,
+                    chargeCents,
+                    failure: 'Tap to Pay is not available on this device.'
+                });
+                return;
+            }
+            const collected = await bridge.collectCardPayment({
+                paymentIntentId,
+                clientSecret,
+                amountCents: chargeCents
+            }).catch(()=>({
+                    status: 'failed',
+                    message: undefined
+                }));
+            if (collected.status !== 'collected') {
+                var _collected_message;
+                setPhase({
+                    kind: 'paying',
+                    method,
+                    paymentId: paymentId != null ? paymentId : null,
+                    chargeCents,
+                    failure: collected.status === 'canceled' ? 'The payment was canceled.' : (_collected_message = collected.message) != null ? _collected_message : 'The card was not read.'
+                });
+            }
+        }
+    }, [
+        token,
+        lost,
+        context
+    ]);
+    // The card in flight, asked after until it is paid or it fails.
+    const paymentId = phase.kind === 'paying' ? phase.paymentId : null;
+    const paymentFailed = phase.kind === 'paying' ? Boolean(phase.failure) : false;
+    useEffect(()=>{
+        if (!token || !paymentId || paymentFailed) return undefined;
+        const open = saleRef.current;
+        if (!open) return undefined;
+        let active = true;
+        const timer = setInterval(async ()=>{
+            var _result_value, _next_payment;
+            const result = await kioskApi.paymentStatus(token, open.orderId, paymentId);
+            if (!active) return;
+            if (lost(result.status)) return;
+            const next = (_result_value = result.value) == null ? void 0 : _result_value.sale;
+            if (!next) return;
+            setSale(next);
+            if (next.status === 'paid') {
+                clearInterval(timer);
+                setLines([]);
+                payKey.current = null;
+                setPhase({
+                    kind: 'receipt'
+                });
+                return;
+            }
+            const status = ((_next_payment = next.payment) == null ? void 0 : _next_payment.id) === paymentId ? next.payment.status : '';
+            if (status === 'failed' || status === 'canceled') {
+                clearInterval(timer);
+                payKey.current = null;
+                setPhase((current)=>{
+                    var _ref;
+                    var _next_payment;
+                    return current.kind === 'paying' ? _extends({}, current, {
+                        failure: (_ref = (_next_payment = next.payment) == null ? void 0 : _next_payment.failureMessage) != null ? _ref : 'The card was declined.'
+                    }) : current;
+                });
+            }
+        }, POS_KIOSK_PAYMENT_POLL_MS);
+        return ()=>{
+            active = false;
+            clearInterval(timer);
+        };
+    }, [
+        token,
+        paymentId,
+        paymentFailed,
+        lost
+    ]);
+    const cancelPayment = useCallback(async ()=>{
+        var _fresh_value, _fresh_value1;
+        const open = saleRef.current;
+        if (!token || !open || phase.kind !== 'paying') return;
+        setBusy(true);
+        if (phase.paymentId && !phase.failure) await kioskApi.cancelPayment(token, open.orderId, phase.paymentId);
+        const fresh = await kioskApi.sale(token, open.orderId);
+        setBusy(false);
+        payKey.current = null;
+        if ((_fresh_value = fresh.value) == null ? void 0 : _fresh_value.sale) setSale(fresh.value.sale);
+        if (((_fresh_value1 = fresh.value) == null ? void 0 : _fresh_value1.sale.status) === 'paid') {
+            setPhase({
+                kind: 'receipt'
+            });
+            return;
+        }
+        setPhase({
+            kind: 'review'
+        });
+    }, [
+        token,
+        phase
+    ]);
+    const answerReceipt = useCallback(async (answer)=>{
+        const paid = saleRef.current;
+        if (!token || !paid || !answer.receiptChannel) return;
+        setBusy(true);
+        const result = await kioskApi.receipt(token, _extends({
+            orderId: paid.orderId,
+            channel: answer.receiptChannel
+        }, answer.email ? {
+            to: answer.email
+        } : {}, answer.phone ? {
+            to: answer.phone
+        } : {}, answer.marketingOptIn ? {
+            marketingOptIn: true
+        } : {}));
+        setBusy(false);
+        if (lost(result.status)) return;
+        if (!result.ok) {
+            var _result_error;
+            setNotice((_result_error = result.error) != null ? _result_error : 'Your receipt could not be sent. Ask at the counter.');
+        }
+        setPhase({
+            kind: 'done'
+        });
+    }, [
+        token,
+        lost
+    ]);
+    const pay = useMemo(()=>({
+            reader: Boolean((context == null ? void 0 : context.payments.cardPresent) && context.payments.reader),
+            tap: Boolean((context == null ? void 0 : context.payments.cardPresent) && posNativeBridge()),
+            counter: Boolean(context == null ? void 0 : context.payments.payAtCounter)
+        }), [
+        context
+    ]);
+    const choosePay = useCallback((method)=>{
+        if (context == null ? void 0 : context.tipping.enabled) {
+            setPhase({
+                kind: 'tip',
+                method
+            });
+            return;
+        }
+        setTip({
+            tipChoice: 'none'
+        });
+        void startPayment(method, {
+            tipChoice: 'none'
+        });
+    }, [
+        context,
+        startPayment
+    ]);
+    if (token === undefined) {
+        return /*#__PURE__*/ _jsx(Box, {
+            sx: {
+                minHeight: '100dvh',
+                display: 'grid',
+                placeItems: 'center'
+            },
+            children: /*#__PURE__*/ _jsx(CircularProgress, {
+                "aria-label": "Loading"
+            })
+        });
+    }
+    if (!token) {
+        return /*#__PURE__*/ _jsx(PosDisplayPairingScreen, {
+            mode: "kiosk",
+            onPaired: (next)=>{
+                storeKioskToken(next);
+                setToken(next);
+            }
+        });
+    }
+    const branding = (_ref3 = context == null ? void 0 : context.branding) != null ? _ref3 : null;
+    let screen;
+    if (phase.kind === 'start') {
+        screen = /*#__PURE__*/ _jsx(PosDisplayBrandScreen, {
+            branding: branding,
+            message: (branding == null ? void 0 : branding.message) || 'Order here',
+            children: /*#__PURE__*/ _jsx(Button, {
+                variant: "contained",
+                size: "large",
+                onClick: ()=>setPhase({
+                        kind: 'menu'
+                    }),
+                sx: (theme)=>_extends({}, posDisplayTouchSx(theme), {
+                        px: 6
+                    }),
+                children: 'Start order'
+            })
+        });
+    } else if (phase.kind === 'menu') {
+        screen = /*#__PURE__*/ _jsxs(_Fragment, {
+            children: [
+                notice ? /*#__PURE__*/ _jsx(Alert, {
+                    severity: "warning",
+                    onClose: ()=>setNotice(null),
+                    sx: {
+                        m: 2,
+                        mb: 0
+                    },
+                    children: notice
+                }) : null,
+                /*#__PURE__*/ _jsx(KioskMenu, {
+                    catalog: catalog,
+                    loading: catalogLoading && !catalog,
+                    categoryId: categoryId,
+                    onCategory: setCategoryId,
+                    onProduct: tapProduct,
+                    lines: lines,
+                    currency: currency,
+                    onReview: ()=>void checkout(),
+                    onQuantity: (key, quantity)=>{
+                        checkoutKey.current = null;
+                        setLines((current)=>quantity <= 0 ? current.filter((line)=>line.key !== key) : current.map((line)=>line.key === key ? _extends({}, line, {
+                                    quantity
+                                }) : line));
+                    },
+                    cartOpen: cartOpen,
+                    onCartOpen: setCartOpen,
+                    busy: busy
+                })
+            ]
+        });
+    } else if (phase.kind === 'review' && sale) {
+        screen = /*#__PURE__*/ _jsx(KioskReview, {
+            sale: sale,
+            currency: currency,
+            pay: pay,
+            busy: busy,
+            notice: notice,
+            onPay: choosePay,
+            onCounter: ()=>void sendToCounter(),
+            onBack: backToMenu
+        });
+    } else if (phase.kind === 'tip' && sale && context) {
+        screen = /*#__PURE__*/ _jsx(Container, {
+            maxWidth: "md",
+            sx: {
+                py: 4
+            },
+            children: /*#__PURE__*/ _jsxs(Stack, {
+                spacing: 4,
+                sx: {
+                    alignItems: 'center'
+                },
+                children: [
+                    /*#__PURE__*/ _jsx(PosDisplayBrandMark, {
+                        branding: branding
+                    }),
+                    /*#__PURE__*/ _jsx(PosDisplayTipScreen, {
+                        tip: {
+                            baseCents: sale.dueCents,
+                            percentages: context.tipping.percentages,
+                            allowCustom: true
+                        },
+                        promptId: `kiosk-${sale.orderId}`,
+                        busy: busy,
+                        currency: currency,
+                        onAnswer: (answer)=>{
+                            var _answer_tipChoice, _answer_tipCents;
+                            const next = _extends({
+                                tipChoice: (_answer_tipChoice = answer.tipChoice) != null ? _answer_tipChoice : 'none'
+                            }, answer.tipPercent ? {
+                                tipPercent: answer.tipPercent
+                            } : {}, answer.tipChoice === 'custom' ? {
+                                tipCents: (_answer_tipCents = answer.tipCents) != null ? _answer_tipCents : 0
+                            } : {});
+                            setTip(next);
+                            void startPayment(phase.method, next);
+                        }
+                    }),
+                    /*#__PURE__*/ _jsx(Button, {
+                        onClick: ()=>setPhase({
+                                kind: 'review'
+                            }),
+                        disabled: busy,
+                        children: 'Back'
+                    })
+                ]
+            })
+        });
+    } else if (phase.kind === 'paying' && sale) {
+        screen = /*#__PURE__*/ _jsx(KioskPaying, {
+            chargeCents: phase.chargeCents,
+            currency: currency,
+            method: phase.method,
+            failure: phase.failure,
+            testMode: Boolean((context == null ? void 0 : context.testMode) && phase.method === 'reader'),
+            busy: busy,
+            onCancel: ()=>void cancelPayment(),
+            onRetry: ()=>void startPayment(phase.method, tip),
+            onCounter: pay.counter ? ()=>void sendToCounter() : null,
+            onSimulate: phase.paymentId ? ()=>void kioskApi.simulate(token, sale.orderId, phase.paymentId) : null
+        });
+    } else if (phase.kind === 'receipt' && sale && context) {
+        screen = /*#__PURE__*/ _jsx(Container, {
+            maxWidth: "md",
+            sx: {
+                py: 4
+            },
+            children: /*#__PURE__*/ _jsxs(Stack, {
+                spacing: 4,
+                sx: {
+                    alignItems: 'center'
+                },
+                children: [
+                    /*#__PURE__*/ _jsx(PosDisplayBrandMark, {
+                        branding: branding
+                    }),
+                    /*#__PURE__*/ _jsx(PosDisplayReceiptScreen, {
+                        receipt: {
+                            channels: context.receipts,
+                            offerMarketing: context.offerMarketing
+                        },
+                        promptId: `kiosk-${sale.orderId}`,
+                        busy: busy,
+                        onAnswer: (answer)=>void answerReceipt(answer)
+                    })
+                ]
+            })
+        });
+    } else if (phase.kind === 'done' && sale) {
+        screen = /*#__PURE__*/ _jsx(KioskDone, {
+            sale: sale,
+            currency: currency,
+            onDone: reset
+        });
+    } else {
+        screen = /*#__PURE__*/ _jsx(PosDisplayBrandScreen, {
+            branding: branding,
+            busy: true
+        });
+    }
+    return /*#__PURE__*/ _jsxs(Box, {
+        sx: {
+            position: 'relative',
+            minHeight: '100dvh'
+        },
+        children: [
+            offline ? /*#__PURE__*/ _jsx(Alert, {
+                severity: "warning",
+                sx: {
+                    position: 'fixed',
+                    top: 0,
+                    left: 0,
+                    right: 0,
+                    zIndex: (theme)=>theme.zIndex.modal + 1
+                },
+                children: 'Reconnecting…'
+            }) : null,
+            screen,
+            /*#__PURE__*/ _jsx(PosItemDialog, {
+                product: itemProduct ? kioskItemProduct(itemProduct) : null,
+                onClose: ()=>setItemProduct(null),
+                onConfirm: (choice)=>{
+                    const product = itemProduct;
+                    setItemProduct(null);
+                    if (product) addChoice(product, choice);
+                },
+                formatMoney: money,
+                blockSoldOut: true,
+                maxQuantity: CommerceModel.POS_KIOSK_MAX_QUANTITY
+            }),
+            /*#__PURE__*/ _jsxs(Dialog, {
+                open: idle.warning !== null,
+                onClose: idle.stillHere,
+                maxWidth: "xs",
+                fullWidth: true,
+                children: [
+                    /*#__PURE__*/ _jsx(DialogTitle, {
+                        children: 'Still there?'
+                    }),
+                    /*#__PURE__*/ _jsx(DialogContent, {
+                        children: /*#__PURE__*/ _jsx(DialogContentText, {
+                            children: `This order will be cleared in ${(_idle_warning = idle.warning) != null ? _idle_warning : 0} seconds.`
+                        })
+                    }),
+                    /*#__PURE__*/ _jsxs(DialogActions, {
+                        children: [
+                            /*#__PURE__*/ _jsx(Button, {
+                                onClick: reset,
+                                children: 'Start over'
+                            }),
+                            /*#__PURE__*/ _jsx(Button, {
+                                variant: "contained",
+                                onClick: idle.stillHere,
+                                children: 'I’m still here'
+                            })
+                        ]
+                    })
+                ]
+            }),
+            phase.kind === 'start' || phase.kind === 'menu' ? /*#__PURE__*/ _jsx(KioskStaffControl, {
+                token: token,
+                onExit: unpaired,
+                onUnauthorized: unpaired
+            }) : null
+        ]
+    }, turn);
+}
+PosKioskPage.displayName = 'PosKioskPage';
+
+//# sourceMappingURL=pos-kiosk-page.component.js.map