@aglyn/plugins-commerce 1.0.0-beta.231 → 1.0.0-beta.233

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

@@ -22,15 +22,16 @@ import { PRODUCT_LIST_BASE, PRODUCT_LIST_QUERY } from "../../constants/product-l
 import { NextPageTitle } from "@aglyn/shared-ui-next/contexts/next-page-title-provider";
 import { useSnackbar } from "@aglyn/shared-ui-snackstack";
 import { planListQuery } from "@aglyn/shared-ui-jsx/const/list-query-plan";
+import { useViewportFill } from "@aglyn/shared-ui-jsx/hooks/use-viewport-fill";
 import { nameSearchNormalizers } from "@aglyn/aglyn/app-utils/name-search";
-import { Badge, Box, Button, Dialog, DialogActions, DialogContent, DialogTitle, Drawer, MenuItem, Stack, TextField, Typography, useMediaQuery, useTheme } from "@mui/material";
+import { Badge, Box, Button, Dialog, DialogActions, DialogContent, DialogTitle, Drawer, MenuItem, Stack, TextField, ToggleButton, ToggleButtonGroup, Typography, useMediaQuery, useTheme } from "@mui/material";
 import { collection, getDocs, limit, query, where } from "firebase/firestore";
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { useFirestore, useUser } from "@aglyn/tenant-feature-instance";
 import { useFirestoreCollection } from "@aglyn/tenant-feature-instance";
 import { listQueryConstraints } from "@aglyn/tenant-feature-instance/hooks/use-list-query";
 import { useOrgPlan } from "@aglyn/tenant-feature-instance";
-import { newAttemptKey, openPosSale, posRegisterContext, PosRequestError, usd } from "./pos/pos-api.js";
+import { newAttemptKey, openPosSale, posRegisterContext, posTender, PosRequestError, usd } from "./pos/pos-api.js";
 import { PosCartPanel } from "./pos/pos-cart-panel.component.js";
 import { ScanAdornment } from "../../barcode/scan-button.component.js";
 import { useScannerWedge } from "../../barcode/scanner-wedge.js";
@@ -39,7 +40,11 @@ import { POS_QUICK_KEYS, POS_TOUCH_PX, PosProductGrid } from "./pos/pos-product-
 import { PosItemDialog, posItemNeedsChoice } from "./pos/pos-item-dialog.component.js";
 import { PosReceiptPanel } from "./pos/pos-receipt-panel.component.js";
 import { PosTenderPanel } from "./pos/pos-tender-panel.component.js";
+import { PosKioskQueue } from "./pos/pos-kiosk-queue.component.js";
 import { posDisplayTipCents, usePosDisplay } from "./pos/use-pos-display.js";
+import { useConsoleWidgetSlot } from "@aglyn/aglyn/app-utils/console-widget-slot-context";
+import { POS_ORDERS_ZONE } from "./pos-zones.js";
+import { PosOfflineBanner, PosOfflineCheckout, usePosOffline } from "./pos-offline/register-offline.js";
 /** The till sells active products only; every read of the catalog asks it. */ const SELLABLE = {
     field: 'status',
     op: 'equals',
@@ -167,9 +172,23 @@ import { posDisplayTipCents, usePosDisplay } from "./pos/use-pos-display.js";
     var _line_variantId;
     return `${line.productId}:${(_line_variantId = line.variantId) != null ? _line_variantId : ''}:${CommerceModel.modifierSelectionKey(line.modifiers)}`;
 }
+/**
+ * The register's zone (AGL-3644), drawn again only when what it is handed
+ * changes: the till redraws on every tap, and the shell's renderer is not
+ * memoized (the order dialog's reasoning).
+ */ const PosOrdersZone = /*#__PURE__*/ memo(function PosOrdersZone(props) {
+    const { renderer: Renderer, hostId, registerId } = props;
+    return /*#__PURE__*/ _jsx(Renderer, {
+        slot: POS_ORDERS_ZONE.id,
+        hostId: hostId,
+        orgId: undefined,
+        registerId: registerId
+    });
+});
 export function PosConsolePage({ hostId }) {
-    var _ref, _ref1, _ref2, _ref3, _ref4;
-    var _usableRegisters_find, _usableRegisters_;
+    var _ref, _ref1, _ref2, _liveRegister_openShiftId, _ref3, _ref4, _ref5, _ref6;
+    var _usableRegisters_find, _usableRegisters_, _offline_totalsFor;
+    const WidgetSlot = useConsoleWidgetSlot();
     const firestore = useFirestore();
     const { data: user } = useUser();
     const { enqueueSnackbar } = useSnackbar();
@@ -315,6 +334,9 @@ export function PosConsolePage({ hostId }) {
    * whenever the basket changes, so a retried Charge finds the same sale and
    * ringing the same coffee twice is two sales.
    */ const attemptKey = useRef('');
+    const fill = useViewportFill({
+        min: 480
+    });
     useEffect(()=>{
         attemptKey.current = '';
     }, [
@@ -328,11 +350,53 @@ export function PosConsolePage({ hostId }) {
             })), [
         productDocs
     ]);
-    const productsById = useMemo(()=>new Map(products.map((product)=>[
+    /*
+   * THE OFFLINE REGISTER (AGL-3625): the catalog and the site's offline rules
+   * kept on this device, the queue of cash sales rung without a connection,
+   * and the sync that records them once it returns.
+   */ const loadCatalog = useCallback(async ()=>(await getDocs(query(collection(firestore, 'hosts', hostId, 'products'), ...listQueryConstraints(posProductPlan({})), limit(POS_GRID_CEILING)))).docs.map((snapshot)=>_extends({}, snapshot.data(), {
+                $id: snapshot.id
+            })), [
+        firestore,
+        hostId
+    ]);
+    const liveRegister = usableRegisters.find((register)=>register.$id === registerId);
+    const offline = usePosOffline(_extends({
+        hostId,
+        user,
+        registerId,
+        openShiftId: liveRegister ? (_liveRegister_openShiftId = liveRegister.openShiftId) != null ? _liveRegister_openShiftId : null : undefined,
+        locationId
+    }, cashier.assertion ? {
+        cashierAssertion: cashier.assertion
+    } : {}, {
+        liveProducts: products,
+        loadCatalog
+    }));
+    const [offlineCheckout, setOfflineCheckout] = useState(false);
+    /** Open sales left unpaid when the connection dropped, voided once it returns. */ const strandedSales = useRef([]);
+    useEffect(()=>{
+        if (offline.offline || !user || !strandedSales.current.length) return;
+        const orderIds = strandedSales.current.splice(0);
+        for (const orderId of orderIds){
+            void posTender(user, hostId, orderId, 'void').catch(()=>undefined);
+        }
+    }, [
+        offline.offline,
+        user,
+        hostId
+    ]);
+    const sellProducts = useMemo(()=>offline.offline && offline.ready ? offline.gridProducts(search, categoryId, POS_QUICK_KEYS) : products, [
+        offline,
+        search,
+        categoryId,
+        products
+    ]);
+    const productsById = useMemo(()=>new Map(sellProducts.map((product)=>[
                 product.$id,
                 product
             ])), [
-        products
+        sellProducts
     ]);
     /** AGL-2357: warns, never blocks. */ const shortfalls = useMemo(()=>lines.map((line)=>{
             var _line_variantId;
@@ -357,6 +421,18 @@ export function PosConsolePage({ hostId }) {
     }, [
         enqueueSnackbar
     ]);
+    /** A pairing code for a customer display or a self-service kiosk (AGL-3623). */ const showPairingCode = useCallback(async (mode)=>{
+        try {
+            setPairing(_extends({}, await display.pairingCode(mode), {
+                mode
+            }));
+        } catch (error) {
+            notify(error instanceof PosRequestError ? error.message : 'Could not make a code', 'error');
+        }
+    }, [
+        display,
+        notify
+    ]);
     /**
    * Adds a line, or more of an identical one: the same product, variant and
    * modifiers merge, so two oat lattes are one line of two and an oat latte
@@ -416,6 +492,13 @@ export function PosConsolePage({ hostId }) {
         var _product_variants_find;
         const needle = scanned.trim().toLowerCase();
         if (!needle || sale) return;
+        if (offline.offline) {
+            const found = offline.findByCode(needle);
+            if (!found) return void notify(`No product matches “${scanned.trim()}”`, 'warning');
+            tapProduct(found.product, found.variant);
+            setSearch('');
+            return;
+        }
         const lookup = async (field)=>{
             const found = await getDocs(query(collection(firestore, 'hosts', hostId, 'products'), ...listQueryConstraints(posProductPlan({
                 code: {
@@ -431,6 +514,7 @@ export function PosConsolePage({ hostId }) {
             hit = (_ref = await lookup('barcodes')) != null ? _ref : await lookup('skus');
         } catch (error) {
             console.error(error);
+            offline.reportNetworkFailure();
             return void notify('Could not reach the catalog — try again', 'warning');
         }
         if (!hit) return void notify(`No product matches “${scanned.trim()}”`, 'warning');
@@ -450,7 +534,8 @@ export function PosConsolePage({ hostId }) {
         firestore,
         hostId,
         tapProduct,
-        notify
+        notify,
+        offline
     ]);
     const handleSearchEnter = useCallback(()=>lookupCode(search), [
         lookupCode,
@@ -472,6 +557,13 @@ export function PosConsolePage({ hostId }) {
     const charge = useCallback(async ()=>{
         if (chargeInFlight.current || lines.length === 0 || !user) return;
         if (!registerId) return void notify('Select a register before taking payment', 'warning');
+        // Offline, the basket rings as a cash sale kept on this register (AGL-3625).
+        if (offline.offline) {
+            var _offline_unavailableReason;
+            if (!offline.ready) return void notify((_offline_unavailableReason = offline.unavailableReason) != null ? _offline_unavailableReason : 'Offline selling is unavailable', 'warning');
+            setOfflineCheckout(true);
+            return;
+        }
         if (!attemptKey.current) attemptKey.current = newAttemptKey();
         chargeInFlight.current = true;
         setOpening(true);
@@ -503,7 +595,13 @@ export function PosConsolePage({ hostId }) {
             });
             setSheetOpen(true);
         } catch (error) {
-            notify(error instanceof PosRequestError ? error.message : 'Sale failed', 'error');
+            if (error instanceof PosRequestError) {
+                notify(error.message, 'error');
+            } else {
+                // The request never reached the server: the register is offline.
+                offline.reportNetworkFailure();
+                notify('The register lost its connection. Charge again to take cash offline.', 'warning');
+            }
         } finally{
             chargeInFlight.current = false;
             setOpening(false);
@@ -518,7 +616,8 @@ export function PosConsolePage({ hostId }) {
         customer,
         cashier.assertion,
         locationId,
-        notify
+        notify,
+        offline
     ]);
     const resetSale = useCallback(()=>{
         if ((sale == null ? void 0 : sale.status) === 'paid') setLastReceipt({
@@ -668,13 +767,7 @@ export function PosConsolePage({ hostId }) {
                     }),
                     registerId ? /*#__PURE__*/ _jsx(Button, {
                         size: "small",
-                        onClick: async ()=>{
-                            try {
-                                setPairing(await display.pairingCode());
-                            } catch (error) {
-                                notify(error instanceof PosRequestError ? error.message : 'Could not make a code', 'error');
-                            }
-                        },
+                        onClick: ()=>void showPairingCode('display'),
                         children: display.connected ? 'Display connected' : 'Pair display'
                     }) : null
                 ]
@@ -774,8 +867,18 @@ export function PosConsolePage({ hostId }) {
             }, cashier.assertion ? {
                 cashierAssertion: cashier.assertion
             } : {}, {
-                notify: notify
-            })) : /*#__PURE__*/ _jsxs(_Fragment, {
+                notify: notify,
+                offline: offline.offline
+            }, offline.ready ? {
+                onSellOffline: ()=>{
+                    // The server's open sale took no payment; it is voided once
+                    // the connection returns, and the basket rings offline.
+                    strandedSales.current.push(sale.orderId);
+                    setSale(null);
+                    setSaleLines([]);
+                    setOfflineCheckout(true);
+                }
+            } : {})) : /*#__PURE__*/ _jsxs(_Fragment, {
                 children: [
                     /*#__PURE__*/ _jsxs(Box, {
                         sx: {
@@ -806,7 +909,7 @@ export function PosConsolePage({ hostId }) {
                         sx: {
                             minHeight: 56
                         },
-                        children: opening ? 'Pricing…' : `Charge ${usd(estimateCents)}`
+                        children: opening ? 'Pricing…' : offline.offline ? `Cash ${usd((_ref4 = (_offline_totalsFor = offline.totalsFor(lines, discountPct)) == null ? void 0 : _offline_totalsFor.totalCents) != null ? _ref4 : estimateCents)} (offline)` : `Charge ${usd(estimateCents)}`
                     }),
                     lastReceipt ? /*#__PURE__*/ _jsx(PosLastReceipt, _extends({
                         hostId: hostId,
@@ -826,42 +929,75 @@ export function PosConsolePage({ hostId }) {
                 screen: 'POS'
             }),
             /*#__PURE__*/ _jsxs(Box, {
+                ref: fill.ref,
                 sx: {
                     display: 'flex',
-                    height: '100dvh',
+                    // From under the console's header, nav and page title to the
+                    // bottom of the window, not a whole window tall below them.
+                    height: fill.height,
                     overflow: 'hidden'
                 },
                 children: [
-                    /*#__PURE__*/ _jsx(Box, {
+                    /*#__PURE__*/ _jsxs(Box, {
                         sx: {
                             flex: 1,
                             p: 2,
                             overflowY: 'auto',
                             pb: wide ? 2 : 12
                         },
-                        children: /*#__PURE__*/ _jsx(PosProductGrid, {
-                            search: search,
-                            onSearch: setSearch,
-                            onSearchEnter: ()=>void handleSearchEnter(),
-                            scanAdornment: scanAdornment,
-                            categories: (categoryDocs != null ? categoryDocs : []).map((category)=>{
-                                var _category_name;
-                                return {
-                                    $id: category.$id,
-                                    name: String((_category_name = category.name) != null ? _category_name : 'Category')
-                                };
+                        children: [
+                            /*#__PURE__*/ _jsx(Box, {
+                                sx: {
+                                    mb: 2,
+                                    '&:empty': {
+                                        display: 'none'
+                                    }
+                                },
+                                children: /*#__PURE__*/ _jsx(PosOfflineBanner, {
+                                    offline: offline
+                                })
                             }),
-                            categoryId: categoryId,
-                            onCategory: setCategoryId,
-                            notices: gridPlan.notices,
-                            hostId: hostId,
-                            products: products,
-                            basketCounts: basketCounts,
-                            onTap: (product)=>{
-                                if (sale) return void notify('Finish or void the open sale first', 'info');
-                                tapProduct(product);
-                            }
-                        })
+                            registerId ? /*#__PURE__*/ _jsx(PosKioskQueue, {
+                                user: user,
+                                hostId: hostId,
+                                registerId: registerId,
+                                disabled: Boolean(sale),
+                                onTake: (next, nextLines)=>{
+                                    setSaleLines(nextLines);
+                                    setSale(next);
+                                    setSheetOpen(true);
+                                },
+                                notify: notify
+                            }) : null,
+                            WidgetSlot ? /*#__PURE__*/ _jsx(PosOrdersZone, {
+                                renderer: WidgetSlot,
+                                hostId: hostId,
+                                registerId: registerId || null
+                            }) : null,
+                            /*#__PURE__*/ _jsx(PosProductGrid, {
+                                search: search,
+                                onSearch: setSearch,
+                                onSearchEnter: ()=>void handleSearchEnter(),
+                                scanAdornment: scanAdornment,
+                                categories: (categoryDocs != null ? categoryDocs : []).map((category)=>{
+                                    var _category_name;
+                                    return {
+                                        $id: category.$id,
+                                        name: String((_category_name = category.name) != null ? _category_name : 'Category')
+                                    };
+                                }),
+                                categoryId: categoryId,
+                                onCategory: setCategoryId,
+                                notices: gridPlan.notices,
+                                hostId: hostId,
+                                products: sellProducts,
+                                basketCounts: basketCounts,
+                                onTap: (product)=>{
+                                    if (sale) return void notify('Finish or void the open sale first', 'info');
+                                    tapProduct(product);
+                                }
+                            })
+                        ]
                     }),
                     wide ? /*#__PURE__*/ _jsx(Box, {
                         sx: {
@@ -949,7 +1085,7 @@ export function PosConsolePage({ hostId }) {
                 ]
             }) : null,
             /*#__PURE__*/ _jsx(PosItemDialog, _extends({
-                product: (_ref4 = itemSheet == null ? void 0 : itemSheet.product) != null ? _ref4 : null,
+                product: (_ref5 = itemSheet == null ? void 0 : itemSheet.product) != null ? _ref5 : null,
                 initial: itemSheet == null ? void 0 : itemSheet.initial,
                 onClose: ()=>setItemSheet(null),
                 onConfirm: (choice)=>{
@@ -970,6 +1106,28 @@ export function PosConsolePage({ hostId }) {
                     setLines((prev)=>prev.filter((_line, index)=>index !== at));
                 }
             } : {})),
+            /*#__PURE__*/ _jsx(PosOfflineCheckout, _extends({
+                open: offlineCheckout,
+                offline: offline,
+                hostId: hostId,
+                lines: lines,
+                discountPct: discountPct,
+                customer: customer
+            }, registerName ? {
+                registerName
+            } : {}, cashier.cashier ? {
+                cashierName: cashier.cashier.name
+            } : {}, {
+                onClose: ()=>setOfflineCheckout(false),
+                onRung: ()=>undefined,
+                onDone: ()=>{
+                    setOfflineCheckout(false);
+                    setLines([]);
+                    setDiscountPct(0);
+                    setCustomer(null);
+                    setSheetOpen(false);
+                }
+            })),
             /*#__PURE__*/ _jsxs(Dialog, {
                 open: Boolean(pairing),
                 onClose: ()=>setPairing(null),
@@ -977,7 +1135,7 @@ export function PosConsolePage({ hostId }) {
                 fullWidth: true,
                 children: [
                     /*#__PURE__*/ _jsx(DialogTitle, {
-                        children: 'Pair a customer display'
+                        children: (pairing == null ? void 0 : pairing.mode) === 'kiosk' ? 'Pair a self-service kiosk' : 'Pair a customer display'
                     }),
                     /*#__PURE__*/ _jsxs(DialogContent, {
                         sx: {
@@ -986,20 +1144,39 @@ export function PosConsolePage({ hostId }) {
                             gap: 2
                         },
                         children: [
-                            /*#__PURE__*/ _jsx(Typography, {
-                                variant: "body2",
-                                color: "text.secondary",
+                            /*#__PURE__*/ _jsxs(ToggleButtonGroup, {
+                                exclusive: true,
+                                fullWidth: true,
+                                size: "small",
+                                value: (_ref6 = pairing == null ? void 0 : pairing.mode) != null ? _ref6 : 'display',
+                                onChange: (_event, mode)=>{
+                                    if (mode && mode !== (pairing == null ? void 0 : pairing.mode)) void showPairingCode(mode);
+                                },
                                 sx: {
                                     mt: 1
                                 },
-                                children: 'On the tablet facing your customer, open this address and enter the code. ' + 'The code works once and expires in 10 minutes.'
+                                children: [
+                                    /*#__PURE__*/ _jsx(ToggleButton, {
+                                        value: "display",
+                                        children: 'Customer display'
+                                    }),
+                                    /*#__PURE__*/ _jsx(ToggleButton, {
+                                        value: "kiosk",
+                                        children: 'Self-service kiosk'
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ _jsx(Typography, {
+                                variant: "body2",
+                                color: "text.secondary",
+                                children: ((pairing == null ? void 0 : pairing.mode) === 'kiosk' ? 'On the tablet customers order from, open this address and enter the code. ' : 'On the tablet facing your customer, open this address and enter the code. ') + 'The code works once and expires in 10 minutes.'
                             }),
                             /*#__PURE__*/ _jsx(Typography, {
                                 variant: "body1",
                                 sx: {
                                     wordBreak: 'break-all'
                                 },
-                                children: `${typeof window === 'undefined' ? '' : window.location.origin}/kiosk/commerce/pos-display`
+                                children: `${typeof window === 'undefined' ? '' : window.location.origin}/kiosk/commerce/${(pairing == null ? void 0 : pairing.mode) === 'kiosk' ? 'pos-kiosk' : 'pos-display'}`
                             }),
                             /*#__PURE__*/ _jsx(Typography, {
                                 variant: "h3",