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

package/src/lib/components/console/register-hardware-card.component.js

@@ -0,0 +1,826 @@
+/**
+ * @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 { _ as _object_without_properties_loose } from "@swc/helpers/_/_object_without_properties_loose";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import * as CommerceModel from "../../model/index.js";
+import { CardDisplay, useConfirmationContext } from "@aglyn/shared-ui-jsx";
+import { useSnackbar } from "@aglyn/shared-ui-snackstack";
+import { authorizedFetch } from "@aglyn/shared-util-http/authorized-token";
+import { pluginDocsHelp } from "@aglyn/aglyn";
+import { Alert, Autocomplete, Box, Button, Chip, Dialog, DialogActions, DialogContent, DialogTitle, Divider, FormControlLabel, MenuItem, Stack, Switch, TextField, Typography } from "@mui/material";
+import { collection, limit, orderBy, query, where } from "firebase/firestore";
+import { useCallback, useEffect, useState } from "react";
+import { useFirestore, useFirestoreCollection, useUser } from "@aglyn/tenant-feature-instance";
+const STATE_COLOR = {
+    online: 'success',
+    paper_low: 'warning',
+    paper_out: 'error',
+    cover_open: 'error',
+    error: 'error',
+    offline: 'default',
+    unknown: 'default'
+};
+const JOB_LABELS = {
+    receipt: 'Receipt',
+    kitchen: 'Kitchen ticket',
+    drawer: 'Open drawer',
+    test: 'Test print',
+    report: 'Shift report'
+};
+/** "just now", "3 min ago", "2 h ago". */ export function seenAgo(atMs, nowMs) {
+    if (!atMs) return 'never';
+    const seconds = Math.max(0, Math.round((nowMs - atMs) / 1000));
+    if (seconds < 45) return 'just now';
+    const minutes = Math.round(seconds / 60);
+    if (minutes < 60) return `${minutes} min ago`;
+    const hours = Math.round(minutes / 60);
+    if (hours < 48) return `${hours} h ago`;
+    return `${Math.round(hours / 24)} days ago`;
+}
+function useNow(intervalMs) {
+    const [now, setNow] = useState(()=>Date.now());
+    useEffect(()=>{
+        const id = setInterval(()=>setNow(Date.now()), intervalMs);
+        return ()=>clearInterval(id);
+    }, [
+        intervalMs
+    ]);
+    return now;
+}
+function usePrintersApi(hostId) {
+    const { data: user } = useUser();
+    const { enqueueSnackbar } = useSnackbar();
+    return useCallback(async (body)=>{
+        try {
+            const response = await authorizedFetch(user, '/api/commerce/printers', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json'
+                },
+                body: JSON.stringify(_extends({
+                    hostId
+                }, body))
+            });
+            const payload = await response.json().catch(()=>({}));
+            if (!response.ok) {
+                var _ref;
+                enqueueSnackbar((_ref = payload == null ? void 0 : payload.error) != null ? _ref : 'The printer could not be updated', {
+                    variant: 'warning',
+                    persist: false
+                });
+                return null;
+            }
+            return payload;
+        } catch (unused) {
+            enqueueSnackbar('The printer could not be reached. Check your connection.', {
+                variant: 'warning',
+                persist: false
+            });
+            return null;
+        }
+    }, [
+        user,
+        hostId,
+        enqueueSnackbar
+    ]);
+}
+/** Where each brand's poll URL goes, step by step. */ export function printerSetupSteps(brand) {
+    return brand === 'star' ? [
+        'Open the printer’s web page: print a self-test (hold FEED while switching on) to find its IP address, then browse to it and sign in (default user root, password public, or the password on the printer’s label).',
+        'Go to Settings → CloudPRNT. Turn CloudPRNT on and paste the URL below as the Server URL.',
+        'Set the polling interval to 5 seconds, then Submit and Save → Restart device.',
+        'Come back here: the printer shows Online within a minute. Send a test print.'
+    ] : [
+        'Open EPSON TMNet WebConfig: browse to the printer’s IP address (print a status sheet by holding FEED while switching on).',
+        'Open Server Direct Print (under Web Service Settings on most models). Select Enable and enter the ID below.',
+        'Paste the URL below as Server 1 URL and set the interval to 5 seconds. Submit, then reset the printer.',
+        'Come back here: the printer shows Online within a minute. Send a test print.'
+    ];
+}
+const EMPTY_FORM = {
+    brand: 'star',
+    name: '',
+    model: '',
+    deviceId: '',
+    paperWidthMm: 80,
+    autoPrintReceipts: true,
+    kickDrawer: true,
+    kitchenTickets: false,
+    logoKey: ''
+};
+function PrinterForm(props) {
+    const { value, onChange, brandLocked } = props;
+    const set = (key, next)=>onChange(_extends({}, value, {
+            [key]: next
+        }));
+    return /*#__PURE__*/ _jsxs(Stack, {
+        spacing: 2,
+        sx: {
+            pt: 1
+        },
+        children: [
+            /*#__PURE__*/ _jsx(TextField, {
+                select: true,
+                label: "Brand",
+                value: value.brand,
+                disabled: brandLocked,
+                onChange: (event)=>set('brand', event.target.value),
+                children: CommerceModel.PRINTER_BRANDS.map((brand)=>/*#__PURE__*/ _jsx(MenuItem, {
+                        value: brand,
+                        children: CommerceModel.PRINTER_BRAND_LABELS[brand]
+                    }, brand))
+            }),
+            /*#__PURE__*/ _jsx(Autocomplete, {
+                freeSolo: true,
+                options: [
+                    ...CommerceModel.PRINTER_MODEL_SUGGESTIONS[value.brand]
+                ],
+                value: value.model,
+                onInputChange: (_event, next)=>set('model', next),
+                renderInput: (params)=>/*#__PURE__*/ _jsx(TextField, _extends({}, params, {
+                        label: "Model"
+                    }))
+            }),
+            /*#__PURE__*/ _jsx(TextField, {
+                label: "Name",
+                value: value.name,
+                placeholder: "Counter printer",
+                onChange: (event)=>set('name', event.target.value)
+            }),
+            /*#__PURE__*/ _jsx(TextField, {
+                label: value.brand === 'star' ? 'MAC address' : 'Server Direct Print ID',
+                value: value.deviceId,
+                placeholder: value.brand === 'star' ? '00:11:62:12:34:56' : 'counter-1',
+                helperText: value.brand === 'star' ? 'The Ethernet MAC on the self-test print, even if the printer uses Wi-Fi.' : 'Any ID you choose (letters, digits, - _ .), entered again in WebConfig.',
+                onChange: (event)=>set('deviceId', event.target.value)
+            }),
+            /*#__PURE__*/ _jsxs(TextField, {
+                select: true,
+                label: "Paper",
+                value: value.paperWidthMm,
+                onChange: (event)=>set('paperWidthMm', Number(event.target.value) === 58 ? 58 : 80),
+                children: [
+                    /*#__PURE__*/ _jsx(MenuItem, {
+                        value: 80,
+                        children: '80 mm (3 1/8 in)'
+                    }),
+                    /*#__PURE__*/ _jsx(MenuItem, {
+                        value: 58,
+                        children: '58 mm (2 1/4 in)'
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsx(TextField, {
+                label: "Stored logo (optional)",
+                value: value.logoKey,
+                placeholder: value.brand === 'star' ? '1' : '48,48',
+                helperText: value.brand === 'star' ? 'The logo number saved in the printer with Star Quick Setup Utility.' : 'The key saved in the printer with Epson TM Utility, as two numbers.',
+                onChange: (event)=>set('logoKey', event.target.value)
+            }),
+            /*#__PURE__*/ _jsx(FormControlLabel, {
+                control: /*#__PURE__*/ _jsx(Switch, {
+                    checked: value.autoPrintReceipts,
+                    onChange: (event)=>set('autoPrintReceipts', event.target.checked)
+                }),
+                label: "Print a receipt for every sale on this register"
+            }),
+            /*#__PURE__*/ _jsx(FormControlLabel, {
+                control: /*#__PURE__*/ _jsx(Switch, {
+                    checked: value.kickDrawer,
+                    onChange: (event)=>set('kickDrawer', event.target.checked)
+                }),
+                label: "A cash drawer is plugged into this printer"
+            }),
+            /*#__PURE__*/ _jsx(FormControlLabel, {
+                control: /*#__PURE__*/ _jsx(Switch, {
+                    checked: value.kitchenTickets,
+                    onChange: (event)=>set('kitchenTickets', event.target.checked)
+                }),
+                label: "Print a kitchen ticket for every sale (items and quantities, no prices)"
+            })
+        ]
+    });
+}
+function PollUrlPanel(props) {
+    const { credentials } = props;
+    const { enqueueSnackbar } = useSnackbar();
+    const copy = async ()=>{
+        try {
+            await navigator.clipboard.writeText(credentials.pollUrl);
+            enqueueSnackbar('Copied', {
+                variant: 'success',
+                persist: false
+            });
+        } catch (unused) {
+            enqueueSnackbar('Select the URL and copy it', {
+                variant: 'info',
+                persist: false
+            });
+        }
+    };
+    return /*#__PURE__*/ _jsxs(Stack, {
+        spacing: 1.5,
+        children: [
+            /*#__PURE__*/ _jsx(Alert, {
+                severity: "info",
+                children: 'This URL is the printer’s password: anyone with it can collect this register’s receipts. ' + 'Regenerate it if it is ever shared.'
+            }),
+            /*#__PURE__*/ _jsx(TextField, {
+                label: credentials.brand === 'star' ? 'CloudPRNT Server URL' : 'Server Direct Print URL',
+                value: credentials.pollUrl,
+                multiline: true,
+                slotProps: {
+                    htmlInput: {
+                        readOnly: true
+                    }
+                }
+            }),
+            credentials.brand === 'epson' ? /*#__PURE__*/ _jsx(TextField, {
+                label: "ID",
+                value: credentials.deviceId,
+                slotProps: {
+                    htmlInput: {
+                        readOnly: true
+                    }
+                }
+            }) : null,
+            /*#__PURE__*/ _jsx(Box, {
+                children: /*#__PURE__*/ _jsx(Button, {
+                    size: "small",
+                    onClick: copy,
+                    children: 'Copy URL'
+                })
+            }),
+            /*#__PURE__*/ _jsx(Box, {
+                component: "ol",
+                sx: {
+                    pl: 2.5,
+                    m: 0
+                },
+                children: printerSetupSteps(credentials.brand).map((step)=>/*#__PURE__*/ _jsx(Typography, {
+                        component: "li",
+                        variant: "body2",
+                        sx: {
+                            mb: 0.5
+                        },
+                        children: step
+                    }, step))
+            })
+        ]
+    });
+}
+function PrinterRowView(props) {
+    var _printer_status;
+    const { printer, now, call, onSettings } = props;
+    const { enqueueSnackbar } = useSnackbar();
+    const { confirm } = useConfirmationContext();
+    const state = CommerceModel.printerDisplayState(printer.status, now);
+    const label = state === 'offline' ? 'Offline' : CommerceModel.PRINTER_STATE_LABELS[state];
+    const send = async (action)=>{
+        const result = await call({
+            action,
+            printerId: printer.$id
+        });
+        if (result) {
+            enqueueSnackbar(action === 'test' ? 'Test print sent' : 'Drawer kick sent', {
+                variant: 'success',
+                persist: false
+            });
+        }
+    };
+    const remove = async ()=>{
+        const confirmed = await confirm({
+            title: `Remove ${printer.name}?`,
+            description: 'Its URL stops working and anything it has not printed is canceled.',
+            confirmationText: 'Remove',
+            confirmationButtonProps: {
+                color: 'error'
+            }
+        }).then(()=>true).catch(()=>false);
+        if (confirmed) await call({
+            action: 'remove',
+            printerId: printer.$id
+        });
+    };
+    return /*#__PURE__*/ _jsxs(Stack, {
+        spacing: 0.5,
+        children: [
+            /*#__PURE__*/ _jsxs(Stack, {
+                direction: "row",
+                spacing: 1,
+                sx: {
+                    alignItems: 'center',
+                    flexWrap: 'wrap',
+                    rowGap: 1
+                },
+                children: [
+                    /*#__PURE__*/ _jsxs(Typography, {
+                        variant: "body2",
+                        sx: {
+                            flex: '1 1 160px',
+                            minWidth: 0
+                        },
+                        noWrap: true,
+                        children: [
+                            printer.name,
+                            /*#__PURE__*/ _jsx(Typography, {
+                                component: "span",
+                                variant: "caption",
+                                color: "text.secondary",
+                                children: ` · ${printer.brand === 'star' ? 'Star' : 'Epson'}${printer.model ? ` ${printer.model}` : ''}`
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ _jsx(Chip, {
+                        size: "small",
+                        variant: "outlined",
+                        color: STATE_COLOR[state],
+                        label: label
+                    }),
+                    /*#__PURE__*/ _jsx(Button, {
+                        size: "small",
+                        onClick: ()=>send('test'),
+                        children: 'Test print'
+                    }),
+                    printer.kickDrawer ? /*#__PURE__*/ _jsx(Button, {
+                        size: "small",
+                        onClick: ()=>send('drawer'),
+                        children: 'Open drawer'
+                    }) : null,
+                    /*#__PURE__*/ _jsx(Button, {
+                        size: "small",
+                        onClick: ()=>onSettings(printer),
+                        children: 'Settings'
+                    }),
+                    /*#__PURE__*/ _jsx(Button, {
+                        size: "small",
+                        color: "error",
+                        onClick: remove,
+                        children: 'Remove'
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsxs(Typography, {
+                variant: "caption",
+                color: "text.secondary",
+                children: [
+                    ((_printer_status = printer.status) == null ? void 0 : _printer_status.atMs) ? `Last seen ${seenAgo(printer.status.atMs, now)}${printer.status.detail ? ` · ${printer.status.detail}` : ''}` : 'Waiting for the printer to poll — paste its URL into the printer to finish.',
+                    printer.autoPrintReceipts ? ' · Prints every sale' : '',
+                    printer.kickDrawer ? ' · Cash drawer' : '',
+                    printer.kitchenTickets ? ' · Kitchen tickets' : ''
+                ]
+            })
+        ]
+    });
+}
+/** A customer display that polled within this long is shown as connected. */ const DISPLAY_CONNECTED_MS = 120000;
+/**
+ * The register's other devices, read-only: the Stripe Terminal card readers
+ * assigned to it and the customer displays paired with it. Each is added and
+ * removed where it is set up; this list is the one place a manager sees
+ * everything plugged into the till. Nothing renders when there are none.
+ */ export function RegisterOtherDevices(props) {
+    const { hostId, registerId, now } = props;
+    const firestore = useFirestore();
+    const { data: user } = useUser();
+    const { data: readerDocs } = useFirestoreCollection(()=>query(collection(firestore, 'hosts', hostId, 'terminalReaders'), where('registerId', '==', registerId), limit(10)), [
+        firestore,
+        hostId,
+        registerId
+    ], {
+        idField: '$id'
+    });
+    const [displays, setDisplays] = useState([]);
+    useEffect(()=>{
+        if (!user) return;
+        let live = true;
+        void (async ()=>{
+            try {
+                const response = await authorizedFetch(user, '/api/commerce/pos-display', {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json'
+                    },
+                    body: JSON.stringify({
+                        hostId,
+                        registerId,
+                        action: 'displays'
+                    })
+                });
+                if (!response.ok) return;
+                const answer = await response.json().catch(()=>({}));
+                if (live) setDisplays(Array.isArray(answer.displays) ? answer.displays : []);
+            } catch (unused) {
+            // Offline: the list stays as it was; the printers above still show.
+            }
+        })();
+        return ()=>{
+            live = false;
+        };
+    }, [
+        user,
+        hostId,
+        registerId
+    ]);
+    const readers = readerDocs != null ? readerDocs : [];
+    if (!readers.length && !displays.length) return null;
+    return /*#__PURE__*/ _jsxs(_Fragment, {
+        children: [
+            /*#__PURE__*/ _jsx(Divider, {}),
+            /*#__PURE__*/ _jsx(Typography, {
+                variant: "subtitle2",
+                children: 'Card readers and customer displays'
+            }),
+            readers.map((reader)=>/*#__PURE__*/ _jsxs(Stack, {
+                    direction: "row",
+                    spacing: 1,
+                    sx: {
+                        alignItems: 'center'
+                    },
+                    children: [
+                        /*#__PURE__*/ _jsxs(Typography, {
+                            variant: "body2",
+                            sx: {
+                                flex: 1,
+                                minWidth: 0
+                            },
+                            noWrap: true,
+                            children: [
+                                reader.label || 'Card reader',
+                                /*#__PURE__*/ _jsx(Typography, {
+                                    component: "span",
+                                    variant: "caption",
+                                    color: "text.secondary",
+                                    children: ` · Card reader${reader.deviceType ? ` · ${reader.deviceType}` : ''}`
+                                })
+                            ]
+                        }),
+                        /*#__PURE__*/ _jsx(Chip, {
+                            size: "small",
+                            variant: "outlined",
+                            color: reader.status === 'online' ? 'success' : 'default',
+                            label: reader.status === 'online' ? 'Online' : 'Offline'
+                        })
+                    ]
+                }, reader.$id)),
+            displays.map((display)=>{
+                const connected = now - display.lastSeenAtMs < DISPLAY_CONNECTED_MS;
+                return /*#__PURE__*/ _jsxs(Stack, {
+                    direction: "row",
+                    spacing: 1,
+                    sx: {
+                        alignItems: 'center'
+                    },
+                    children: [
+                        /*#__PURE__*/ _jsxs(Typography, {
+                            variant: "body2",
+                            sx: {
+                                flex: 1,
+                                minWidth: 0
+                            },
+                            noWrap: true,
+                            children: [
+                                display.label || 'Customer display',
+                                /*#__PURE__*/ _jsx(Typography, {
+                                    component: "span",
+                                    variant: "caption",
+                                    color: "text.secondary",
+                                    children: ` · Customer display · seen ${seenAgo(display.lastSeenAtMs, now)}`
+                                })
+                            ]
+                        }),
+                        /*#__PURE__*/ _jsx(Chip, {
+                            size: "small",
+                            variant: "outlined",
+                            color: connected ? 'success' : 'default',
+                            label: connected ? 'Connected' : 'Offline'
+                        })
+                    ]
+                }, display.id);
+            })
+        ]
+    });
+}
+RegisterOtherDevices.displayName = 'RegisterOtherDevices';
+export function RegisterHardwareCard(props) {
+    var _ref;
+    const { hostId, registerId, registerName } = props;
+    const firestore = useFirestore();
+    const call = usePrintersApi(hostId);
+    const now = useNow(15000);
+    const { data: printerDocs } = useFirestoreCollection(()=>query(collection(firestore, 'hosts', hostId, 'printers'), where('registerId', '==', registerId), limit(4)), [
+        firestore,
+        hostId,
+        registerId
+    ], {
+        idField: '$id'
+    });
+    const { data: jobDocs } = useFirestoreCollection(()=>query(collection(firestore, 'hosts', hostId, 'printJobs'), where('registerId', '==', registerId), orderBy('createdAtMs', 'desc'), limit(6)), [
+        firestore,
+        hostId,
+        registerId
+    ], {
+        idField: '$id'
+    });
+    const printers = [
+        ...printerDocs != null ? printerDocs : []
+    ].sort((a, b)=>a.createdAtMs - b.createdAtMs);
+    const jobs = jobDocs != null ? jobDocs : [];
+    const [adding, setAdding] = useState(false);
+    const [form, setForm] = useState(EMPTY_FORM);
+    const [editing, setEditing] = useState(null);
+    const [credentials, setCredentials] = useState(null);
+    const [busy, setBusy] = useState(false);
+    const openAdd = ()=>{
+        setForm(EMPTY_FORM);
+        setCredentials(null);
+        setAdding(true);
+    };
+    const create = async ()=>{
+        setBusy(true);
+        const created = await call(_extends({
+            action: 'create',
+            registerId
+        }, form));
+        setBusy(false);
+        if (created) setCredentials(created);
+    };
+    const openSettings = async (printer)=>{
+        var _printer_model, _printer_paperWidthMm, _printer_logoKey;
+        setEditing(printer);
+        setForm({
+            brand: printer.brand,
+            name: printer.name,
+            model: (_printer_model = printer.model) != null ? _printer_model : '',
+            deviceId: printer.deviceId,
+            paperWidthMm: (_printer_paperWidthMm = printer.paperWidthMm) != null ? _printer_paperWidthMm : 80,
+            autoPrintReceipts: printer.autoPrintReceipts,
+            kickDrawer: printer.kickDrawer,
+            kitchenTickets: Boolean(printer.kitchenTickets),
+            logoKey: (_printer_logoKey = printer.logoKey) != null ? _printer_logoKey : ''
+        });
+        setCredentials(null);
+        const shown = await call({
+            action: 'credentials',
+            printerId: printer.$id
+        });
+        if (shown) setCredentials(shown);
+    };
+    const save = async ()=>{
+        if (!editing) return;
+        setBusy(true);
+        const { brand: _brand } = form, settings = _object_without_properties_loose(form, [
+            "brand"
+        ]);
+        const saved = await call(_extends({
+            action: 'update',
+            printerId: editing.$id
+        }, settings));
+        setBusy(false);
+        if (saved) setEditing(null);
+    };
+    const regenerate = async ()=>{
+        if (!editing) return;
+        const next = await call({
+            action: 'regenerate',
+            printerId: editing.$id
+        });
+        if (next) setCredentials(next);
+    };
+    const cancelJob = (job)=>()=>void call({
+                action: 'cancel',
+                jobId: job.$id
+            });
+    const printerName = (id)=>{
+        var _ref;
+        var _printers_find;
+        return (_ref = (_printers_find = printers.find((printer)=>printer.$id === id)) == null ? void 0 : _printers_find.name) != null ? _ref : 'Removed printer';
+    };
+    return /*#__PURE__*/ _jsxs(CardDisplay, {
+        header: `Hardware · ${registerName}`,
+        help: pluginDocsHelp('posHardware', {
+            anchor: '#receipt-printers'
+        }),
+        HeaderProps: {
+            action: /*#__PURE__*/ _jsx(Button, {
+                size: "small",
+                onClick: openAdd,
+                disabled: printers.length >= 4,
+                children: 'Add printer'
+            })
+        },
+        contentGutterX: true,
+        contentGutterY: true,
+        children: [
+            /*#__PURE__*/ _jsxs(Stack, {
+                spacing: 1.5,
+                children: [
+                    /*#__PURE__*/ _jsx(Typography, {
+                        variant: "subtitle2",
+                        children: 'Receipt printers'
+                    }),
+                    printers.length === 0 ? /*#__PURE__*/ _jsx(Typography, {
+                        variant: "body2",
+                        color: "text.secondary",
+                        children: 'Pair a Star CloudPRNT or Epson Server Direct Print printer to print receipts from this register ' + 'on any device, with no driver, and to open its cash drawer on cash sales.'
+                    }) : printers.map((printer)=>/*#__PURE__*/ _jsx(PrinterRowView, {
+                            printer: printer,
+                            now: now,
+                            call: call,
+                            onSettings: openSettings
+                        }, printer.$id)),
+                    jobs.length ? /*#__PURE__*/ _jsxs(_Fragment, {
+                        children: [
+                            /*#__PURE__*/ _jsx(Divider, {}),
+                            /*#__PURE__*/ _jsx(Typography, {
+                                variant: "subtitle2",
+                                children: 'Recent print jobs'
+                            }),
+                            jobs.map((job)=>{
+                                var _job_receipt;
+                                return /*#__PURE__*/ _jsxs(Stack, {
+                                    direction: "row",
+                                    spacing: 1,
+                                    sx: {
+                                        alignItems: 'center'
+                                    },
+                                    children: [
+                                        /*#__PURE__*/ _jsxs(Typography, {
+                                            variant: "body2",
+                                            sx: {
+                                                flex: 1,
+                                                minWidth: 0
+                                            },
+                                            noWrap: true,
+                                            children: [
+                                                JOB_LABELS[job.kind],
+                                                ((_job_receipt = job.receipt) == null ? void 0 : _job_receipt.orderNumber) ? ` #${job.receipt.orderNumber}` : '',
+                                                /*#__PURE__*/ _jsxs(Typography, {
+                                                    component: "span",
+                                                    variant: "caption",
+                                                    color: "text.secondary",
+                                                    children: [
+                                                        ` · ${printerName(job.printerId)} · ${seenAgo(job.createdAtMs, now)}`,
+                                                        job.error ? ` · ${job.error}` : ''
+                                                    ]
+                                                })
+                                            ]
+                                        }),
+                                        /*#__PURE__*/ _jsx(Chip, {
+                                            size: "small",
+                                            variant: "outlined",
+                                            color: job.status === 'done' ? 'success' : job.status === 'failed' ? 'error' : 'default',
+                                            label: CommerceModel.PRINT_JOB_STATUS_LABELS[job.status]
+                                        }),
+                                        job.status === 'queued' ? /*#__PURE__*/ _jsx(Button, {
+                                            size: "small",
+                                            onClick: cancelJob(job),
+                                            children: 'Cancel'
+                                        }) : null
+                                    ]
+                                }, job.$id);
+                            })
+                        ]
+                    }) : null,
+                    /*#__PURE__*/ _jsx(RegisterOtherDevices, {
+                        hostId: hostId,
+                        registerId: registerId,
+                        now: now
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsxs(Dialog, {
+                open: adding,
+                onClose: ()=>setAdding(false),
+                fullWidth: true,
+                maxWidth: "sm",
+                children: [
+                    /*#__PURE__*/ _jsx(DialogTitle, {
+                        children: credentials ? 'Connect the printer' : `Add a printer to ${registerName}`
+                    }),
+                    /*#__PURE__*/ _jsx(DialogContent, {
+                        children: credentials ? /*#__PURE__*/ _jsx(PollUrlPanel, {
+                            credentials: credentials
+                        }) : /*#__PURE__*/ _jsx(PrinterForm, {
+                            value: form,
+                            onChange: setForm
+                        })
+                    }),
+                    /*#__PURE__*/ _jsx(DialogActions, {
+                        children: credentials ? /*#__PURE__*/ _jsx(Button, {
+                            onClick: ()=>setAdding(false),
+                            children: 'Done'
+                        }) : /*#__PURE__*/ _jsxs(_Fragment, {
+                            children: [
+                                /*#__PURE__*/ _jsx(Button, {
+                                    onClick: ()=>setAdding(false),
+                                    children: 'Cancel'
+                                }),
+                                /*#__PURE__*/ _jsx(Button, {
+                                    onClick: create,
+                                    disabled: busy || !form.name.trim() || !form.deviceId.trim(),
+                                    children: 'Add printer'
+                                })
+                            ]
+                        })
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsxs(Dialog, {
+                open: Boolean(editing),
+                onClose: ()=>setEditing(null),
+                fullWidth: true,
+                maxWidth: "sm",
+                children: [
+                    /*#__PURE__*/ _jsx(DialogTitle, {
+                        children: (_ref = editing == null ? void 0 : editing.name) != null ? _ref : 'Printer'
+                    }),
+                    /*#__PURE__*/ _jsxs(DialogContent, {
+                        children: [
+                            /*#__PURE__*/ _jsx(PrinterForm, {
+                                value: form,
+                                onChange: setForm,
+                                brandLocked: true
+                            }),
+                            /*#__PURE__*/ _jsx(Divider, {
+                                sx: {
+                                    my: 2
+                                }
+                            }),
+                            credentials ? /*#__PURE__*/ _jsx(PollUrlPanel, {
+                                credentials: credentials
+                            }) : null
+                        ]
+                    }),
+                    /*#__PURE__*/ _jsxs(DialogActions, {
+                        children: [
+                            /*#__PURE__*/ _jsx(Button, {
+                                color: "warning",
+                                onClick: regenerate,
+                                children: 'Regenerate URL'
+                            }),
+                            /*#__PURE__*/ _jsx(Box, {
+                                sx: {
+                                    flex: 1
+                                }
+                            }),
+                            /*#__PURE__*/ _jsx(Button, {
+                                onClick: ()=>setEditing(null),
+                                children: 'Cancel'
+                            }),
+                            /*#__PURE__*/ _jsx(Button, {
+                                onClick: save,
+                                disabled: busy || !form.name.trim(),
+                                children: 'Save'
+                            })
+                        ]
+                    })
+                ]
+            })
+        ]
+    });
+}
+RegisterHardwareCard.displayName = 'RegisterHardwareCard';
+/** One Hardware card per register on the site. */ export function RegisterHardwareCards(props) {
+    const { hostId } = props;
+    const firestore = useFirestore();
+    const { data: registerDocs } = useFirestoreCollection(()=>query(collection(firestore, 'hosts', hostId, 'registers'), limit(25)), [
+        firestore,
+        hostId
+    ], {
+        idField: '$id'
+    });
+    const registers = [
+        ...registerDocs != null ? registerDocs : []
+    ].sort((a, b)=>{
+        var _a_name, _b_name;
+        return String((_a_name = a.name) != null ? _a_name : '').localeCompare(String((_b_name = b.name) != null ? _b_name : ''));
+    });
+    if (!registers.length) return null;
+    return /*#__PURE__*/ _jsx(Stack, {
+        spacing: 3,
+        children: registers.map((register)=>/*#__PURE__*/ _jsx(RegisterHardwareCard, {
+                hostId: hostId,
+                registerId: register.$id,
+                registerName: register.name || 'Register'
+            }, register.$id))
+    });
+}
+export default RegisterHardwareCards;
+
+//# sourceMappingURL=register-hardware-card.component.js.map