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

package/src/lib/components/console/pos-kiosk/kiosk-menu.js

@@ -0,0 +1,344 @@
+/**
+ * @license
+ * Copyright 2026 Aglyn LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */ 'use client';
+import { _ as _extends } from "@swc/helpers/_/_extends";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Box from "@mui/material/Box";
+import Button from "@mui/material/Button";
+import Card from "@mui/material/Card";
+import CardActionArea from "@mui/material/CardActionArea";
+import CardContent from "@mui/material/CardContent";
+import Chip from "@mui/material/Chip";
+import CircularProgress from "@mui/material/CircularProgress";
+import Divider from "@mui/material/Divider";
+import Drawer from "@mui/material/Drawer";
+import IconButton from "@mui/material/IconButton";
+import Stack from "@mui/material/Stack";
+import Typography from "@mui/material/Typography";
+import * as CommerceModel from "../../../model/index.js";
+import { displayMoney } from "../pos-display/pos-display-api.js";
+/** The lowest price a product sells at, for its tile. */ export function kioskFromCents(product) {
+    var _ref;
+    var _product_variants_;
+    return product.variants.reduce((low, variant)=>Math.min(low, variant.priceCents), (_ref = (_product_variants_ = product.variants[0]) == null ? void 0 : _product_variants_.priceCents) != null ? _ref : 0);
+}
+export function kioskProductSoldOut(product) {
+    return product.variants.length > 0 && product.variants.every((variant)=>variant.soldOut);
+}
+/**
+ * The menu (AGL-3623): category chips, the product tiles, and the cart bar.
+ * A category chip asks the server for that category; nothing is filtered
+ * out of a list already loaded.
+ */ export function KioskMenu({ catalog, loading, categoryId, onCategory, onProduct, lines, currency, onReview, onQuantity, cartOpen, onCartOpen, busy }) {
+    var _ref, _ref1;
+    const count = lines.reduce((sum, line)=>sum + line.quantity, 0);
+    const estimate = lines.reduce((sum, line)=>sum + line.unitCents * line.quantity, 0);
+    const money = (cents)=>displayMoney(cents, currency);
+    const products = (_ref = catalog == null ? void 0 : catalog.products) != null ? _ref : [];
+    return /*#__PURE__*/ _jsxs(Box, {
+        sx: {
+            minHeight: '100dvh',
+            display: 'flex',
+            flexDirection: 'column'
+        },
+        children: [
+            /*#__PURE__*/ _jsxs(Box, {
+                component: "nav",
+                "aria-label": "Categories",
+                sx: {
+                    display: 'flex',
+                    gap: 1,
+                    overflowX: 'auto',
+                    p: 2,
+                    borderBottom: 1,
+                    borderColor: 'divider'
+                },
+                children: [
+                    /*#__PURE__*/ _jsx(Chip, {
+                        label: "All",
+                        color: categoryId ? 'default' : 'primary',
+                        variant: categoryId ? 'outlined' : 'filled',
+                        "aria-pressed": !categoryId,
+                        onClick: ()=>onCategory(null),
+                        sx: (theme)=>_extends({
+                                minHeight: theme.spacing(6),
+                                px: 1
+                            }, theme.typography.subtitle1)
+                    }),
+                    ((_ref1 = catalog == null ? void 0 : catalog.categories) != null ? _ref1 : []).map((category)=>/*#__PURE__*/ _jsx(Chip, {
+                            label: category.name,
+                            color: categoryId === category.id ? 'primary' : 'default',
+                            variant: categoryId === category.id ? 'filled' : 'outlined',
+                            "aria-pressed": categoryId === category.id,
+                            onClick: ()=>onCategory(category.id),
+                            sx: (theme)=>_extends({
+                                    minHeight: theme.spacing(6),
+                                    px: 1
+                                }, theme.typography.subtitle1)
+                        }, category.id))
+                ]
+            }),
+            /*#__PURE__*/ _jsx(Box, {
+                sx: {
+                    flex: 1,
+                    p: 2,
+                    pb: 14
+                },
+                children: loading ? /*#__PURE__*/ _jsx(Box, {
+                    sx: {
+                        display: 'grid',
+                        placeItems: 'center',
+                        py: 8
+                    },
+                    children: /*#__PURE__*/ _jsx(CircularProgress, {
+                        "aria-label": "Loading the menu"
+                    })
+                }) : products.length === 0 ? /*#__PURE__*/ _jsx(Typography, {
+                    variant: "h6",
+                    color: "text.secondary",
+                    sx: {
+                        textAlign: 'center',
+                        py: 8
+                    },
+                    children: 'Nothing here yet. Try another category.'
+                }) : /*#__PURE__*/ _jsx(Box, {
+                    sx: (theme)=>({
+                            display: 'grid',
+                            gap: 2,
+                            gridTemplateColumns: `repeat(auto-fill, minmax(${theme.spacing(22)}, 1fr))`
+                        }),
+                    children: products.map((product)=>{
+                        const soldOut = kioskProductSoldOut(product);
+                        const several = product.variants.length > 1;
+                        return /*#__PURE__*/ _jsx(Card, {
+                            variant: "outlined",
+                            children: /*#__PURE__*/ _jsxs(CardActionArea, {
+                                disabled: soldOut,
+                                onClick: ()=>onProduct(product),
+                                sx: {
+                                    height: '100%',
+                                    display: 'flex',
+                                    flexDirection: 'column',
+                                    alignItems: 'stretch'
+                                },
+                                children: [
+                                    product.imageUrl ? /*#__PURE__*/ _jsx(Box, {
+                                        component: "img",
+                                        src: product.imageUrl,
+                                        alt: "",
+                                        loading: "lazy",
+                                        sx: {
+                                            width: '100%',
+                                            aspectRatio: '4 / 3',
+                                            objectFit: 'cover',
+                                            display: 'block'
+                                        }
+                                    }) : null,
+                                    /*#__PURE__*/ _jsxs(CardContent, {
+                                        sx: {
+                                            flex: 1
+                                        },
+                                        children: [
+                                            /*#__PURE__*/ _jsx(Typography, {
+                                                variant: "subtitle1",
+                                                component: "h2",
+                                                children: product.name
+                                            }),
+                                            /*#__PURE__*/ _jsx(Typography, {
+                                                variant: "body2",
+                                                color: soldOut ? 'text.disabled' : 'text.secondary',
+                                                children: soldOut ? 'Sold out' : `${several ? 'From ' : ''}${money(kioskFromCents(product))}`
+                                            })
+                                        ]
+                                    })
+                                ]
+                            })
+                        }, product.id);
+                    })
+                })
+            }),
+            count > 0 ? /*#__PURE__*/ _jsxs(Box, {
+                sx: (theme)=>({
+                        position: 'fixed',
+                        left: 0,
+                        right: 0,
+                        bottom: 0,
+                        p: 2,
+                        bgcolor: 'background.paper',
+                        borderTop: 1,
+                        borderColor: 'divider',
+                        display: 'flex',
+                        gap: 2,
+                        zIndex: theme.zIndex.appBar
+                    }),
+                children: [
+                    /*#__PURE__*/ _jsx(Button, {
+                        variant: "outlined",
+                        size: "large",
+                        onClick: ()=>onCartOpen(true),
+                        sx: (theme)=>_extends({
+                                minHeight: theme.spacing(8)
+                            }, theme.typography.h6),
+                        children: `Cart (${count})`
+                    }),
+                    /*#__PURE__*/ _jsx(Button, {
+                        variant: "contained",
+                        size: "large",
+                        disabled: busy,
+                        onClick: onReview,
+                        sx: (theme)=>_extends({
+                                flex: 1,
+                                minHeight: theme.spacing(8)
+                            }, theme.typography.h6),
+                        children: busy ? 'Getting your total…' : `Checkout · ${money(estimate)}`
+                    })
+                ]
+            }) : null,
+            /*#__PURE__*/ _jsx(Drawer, {
+                anchor: "right",
+                open: cartOpen,
+                onClose: ()=>onCartOpen(false),
+                slotProps: {
+                    paper: {
+                        sx: (theme)=>({
+                                width: `min(100vw, ${theme.spacing(60)})`,
+                                p: 2
+                            })
+                    }
+                },
+                children: /*#__PURE__*/ _jsxs(Stack, {
+                    spacing: 2,
+                    sx: {
+                        height: '100%'
+                    },
+                    children: [
+                        /*#__PURE__*/ _jsx(Typography, {
+                            variant: "h5",
+                            component: "h2",
+                            children: 'Your order'
+                        }),
+                        /*#__PURE__*/ _jsxs(Stack, {
+                            spacing: 1,
+                            divider: /*#__PURE__*/ _jsx(Divider, {
+                                flexItem: true
+                            }),
+                            sx: {
+                                flex: 1,
+                                overflowY: 'auto'
+                            },
+                            children: [
+                                lines.map((line)=>/*#__PURE__*/ _jsxs(Stack, {
+                                        direction: "row",
+                                        spacing: 1,
+                                        sx: {
+                                            alignItems: 'center'
+                                        },
+                                        children: [
+                                            /*#__PURE__*/ _jsxs(Box, {
+                                                sx: {
+                                                    flex: 1,
+                                                    minWidth: 0
+                                                },
+                                                children: [
+                                                    /*#__PURE__*/ _jsx(Typography, {
+                                                        variant: "subtitle1",
+                                                        children: line.name
+                                                    }),
+                                                    line.label ? /*#__PURE__*/ _jsx(Typography, {
+                                                        variant: "body2",
+                                                        color: "text.secondary",
+                                                        children: line.label
+                                                    }) : null,
+                                                    /*#__PURE__*/ _jsx(Typography, {
+                                                        variant: "body2",
+                                                        children: money(line.unitCents * line.quantity)
+                                                    })
+                                                ]
+                                            }),
+                                            /*#__PURE__*/ _jsx(IconButton, {
+                                                "aria-label": `One fewer ${line.name}`,
+                                                onClick: ()=>onQuantity(line.key, line.quantity - 1),
+                                                sx: (theme)=>({
+                                                        width: theme.spacing(7),
+                                                        height: theme.spacing(7),
+                                                        border: 1,
+                                                        borderColor: 'divider'
+                                                    }),
+                                                children: '−'
+                                            }),
+                                            /*#__PURE__*/ _jsx(Typography, {
+                                                variant: "h6",
+                                                component: "span",
+                                                "aria-label": "Quantity",
+                                                sx: {
+                                                    minWidth: (theme)=>theme.spacing(4),
+                                                    textAlign: 'center'
+                                                },
+                                                children: line.quantity
+                                            }),
+                                            /*#__PURE__*/ _jsx(IconButton, {
+                                                "aria-label": `One more ${line.name}`,
+                                                disabled: line.quantity >= CommerceModel.POS_KIOSK_MAX_QUANTITY,
+                                                onClick: ()=>onQuantity(line.key, line.quantity + 1),
+                                                sx: (theme)=>({
+                                                        width: theme.spacing(7),
+                                                        height: theme.spacing(7),
+                                                        border: 1,
+                                                        borderColor: 'divider'
+                                                    }),
+                                                children: '+'
+                                            })
+                                        ]
+                                    }, line.key)),
+                                lines.length === 0 ? /*#__PURE__*/ _jsx(Typography, {
+                                    color: "text.secondary",
+                                    children: 'Your cart is empty.'
+                                }) : null
+                            ]
+                        }),
+                        /*#__PURE__*/ _jsx(Typography, {
+                            variant: "body2",
+                            color: "text.secondary",
+                            children: 'Tax is added at checkout.'
+                        }),
+                        /*#__PURE__*/ _jsx(Button, {
+                            variant: "contained",
+                            size: "large",
+                            disabled: busy || lines.length === 0,
+                            onClick: ()=>{
+                                onCartOpen(false);
+                                onReview();
+                            },
+                            sx: (theme)=>_extends({
+                                    minHeight: theme.spacing(8)
+                                }, theme.typography.h6),
+                            children: `Checkout · ${money(estimate)}`
+                        }),
+                        /*#__PURE__*/ _jsx(Button, {
+                            onClick: ()=>onCartOpen(false),
+                            sx: (theme)=>({
+                                    minHeight: theme.spacing(7)
+                                }),
+                            children: 'Keep ordering'
+                        })
+                    ]
+                })
+            })
+        ]
+    });
+}
+
+//# sourceMappingURL=kiosk-menu.js.map

package/src/lib/components/console/pos-kiosk/kiosk-menu.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../../../libs/plugins/commerce/src/lib/components/console/pos-kiosk/kiosk-menu.tsx"],"sourcesContent":["/**\n * @license\n * Copyright 2026 Aglyn LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *   http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n'use client'\n\nimport Box from '@mui/material/Box'\nimport Button from '@mui/material/Button'\nimport Card from '@mui/material/Card'\nimport CardActionArea from '@mui/material/CardActionArea'\nimport CardContent from '@mui/material/CardContent'\nimport Chip from '@mui/material/Chip'\nimport CircularProgress from '@mui/material/CircularProgress'\nimport Divider from '@mui/material/Divider'\nimport Drawer from '@mui/material/Drawer'\nimport IconButton from '@mui/material/IconButton'\nimport Stack from '@mui/material/Stack'\nimport Typography from '@mui/material/Typography'\nimport * as CommerceModel from '../../../model'\nimport { displayMoney } from '../pos-display/pos-display-api'\n\n/** A cart line on the kiosk: what is sent, plus what the screen shows. */\nexport interface KioskCartLine extends CommerceModel.PosKioskLine {\n  /** Merges the same item with the same choices. */\n  key: string\n  name: string\n  label?: string\n  /** The catalog's price per unit, modifiers included: an estimate until checkout. */\n  unitCents: number\n}\n\n/** The lowest price a product sells at, for its tile. */\nexport function kioskFromCents(product: CommerceModel.PosKioskProduct): number {\n  return product.variants.reduce(\n    (low, variant) => Math.min(low, variant.priceCents),\n    product.variants[0]?.priceCents ?? 0,\n  )\n}\n\nexport function kioskProductSoldOut(product: CommerceModel.PosKioskProduct): boolean {\n  return product.variants.length > 0 && product.variants.every((variant) => variant.soldOut)\n}\n\n/**\n * The menu (AGL-3623): category chips, the product tiles, and the cart bar.\n * A category chip asks the server for that category; nothing is filtered\n * out of a list already loaded.\n */\nexport function KioskMenu({\n  catalog,\n  loading,\n  categoryId,\n  onCategory,\n  onProduct,\n  lines,\n  currency,\n  onReview,\n  onQuantity,\n  cartOpen,\n  onCartOpen,\n  busy,\n}: {\n  catalog: CommerceModel.PosKioskCatalog | null\n  loading: boolean\n  categoryId: string | null\n  onCategory: (categoryId: string | null) => void\n  onProduct: (product: CommerceModel.PosKioskProduct) => void\n  lines: KioskCartLine[]\n  currency: string\n  onReview: () => void\n  onQuantity: (key: string, quantity: number) => void\n  cartOpen: boolean\n  onCartOpen: (open: boolean) => void\n  busy: boolean\n}) {\n  const count = lines.reduce((sum, line) => sum + line.quantity, 0)\n  const estimate = lines.reduce((sum, line) => sum + line.unitCents * line.quantity, 0)\n  const money = (cents: number) => displayMoney(cents, currency)\n  const products = catalog?.products ?? []\n  return (\n    <Box sx={{ minHeight: '100dvh', display: 'flex', flexDirection: 'column' }}>\n      <Box\n        component=\"nav\"\n        aria-label=\"Categories\"\n        sx={{ display: 'flex', gap: 1, overflowX: 'auto', p: 2, borderBottom: 1, borderColor: 'divider' }}\n      >\n        <Chip\n          label=\"All\"\n          color={categoryId ? 'default' : 'primary'}\n          variant={categoryId ? 'outlined' : 'filled'}\n          aria-pressed={!categoryId}\n          onClick={() => onCategory(null)}\n          sx={(theme) => ({ minHeight: theme.spacing(6), px: 1, ...theme.typography.subtitle1 })}\n        />\n        {(catalog?.categories ?? []).map((category) => (\n          <Chip\n            key={category.id}\n            label={category.name}\n            color={categoryId === category.id ? 'primary' : 'default'}\n            variant={categoryId === category.id ? 'filled' : 'outlined'}\n            aria-pressed={categoryId === category.id}\n            onClick={() => onCategory(category.id)}\n            sx={(theme) => ({ minHeight: theme.spacing(6), px: 1, ...theme.typography.subtitle1 })}\n          />\n        ))}\n      </Box>\n      <Box sx={{ flex: 1, p: 2, pb: 14 }}>\n        {loading ? (\n          <Box sx={{ display: 'grid', placeItems: 'center', py: 8 }}>\n            <CircularProgress aria-label=\"Loading the menu\" />\n          </Box>\n        ) : products.length === 0 ? (\n          <Typography variant=\"h6\" color=\"text.secondary\" sx={{ textAlign: 'center', py: 8 }}>\n            {'Nothing here yet. Try another category.'}\n          </Typography>\n        ) : (\n          <Box\n            sx={(theme) => ({\n              display: 'grid',\n              gap: 2,\n              gridTemplateColumns: `repeat(auto-fill, minmax(${theme.spacing(22)}, 1fr))`,\n            })}\n          >\n            {products.map((product) => {\n              const soldOut = kioskProductSoldOut(product)\n              const several = product.variants.length > 1\n              return (\n                <Card key={product.id} variant=\"outlined\">\n                  <CardActionArea\n                    disabled={soldOut}\n                    onClick={() => onProduct(product)}\n                    sx={{ height: '100%', display: 'flex', flexDirection: 'column', alignItems: 'stretch' }}\n                  >\n                    {product.imageUrl ? (\n                      <Box\n                        component=\"img\"\n                        src={product.imageUrl}\n                        alt=\"\"\n                        loading=\"lazy\"\n                        sx={{ width: '100%', aspectRatio: '4 / 3', objectFit: 'cover', display: 'block' }}\n                      />\n                    ) : null}\n                    <CardContent sx={{ flex: 1 }}>\n                      <Typography variant=\"subtitle1\" component=\"h2\">\n                        {product.name}\n                      </Typography>\n                      <Typography variant=\"body2\" color={soldOut ? 'text.disabled' : 'text.secondary'}>\n                        {soldOut\n                          ? 'Sold out'\n                          : `${several ? 'From ' : ''}${money(kioskFromCents(product))}`}\n                      </Typography>\n                    </CardContent>\n                  </CardActionArea>\n                </Card>\n              )\n            })}\n          </Box>\n        )}\n      </Box>\n      {count > 0 ? (\n        <Box\n          sx={(theme) => ({\n            position: 'fixed',\n            left: 0,\n            right: 0,\n            bottom: 0,\n            p: 2,\n            bgcolor: 'background.paper',\n            borderTop: 1,\n            borderColor: 'divider',\n            display: 'flex',\n            gap: 2,\n            zIndex: theme.zIndex.appBar,\n          })}\n        >\n          <Button\n            variant=\"outlined\"\n            size=\"large\"\n            onClick={() => onCartOpen(true)}\n            sx={(theme) => ({ minHeight: theme.spacing(8), ...theme.typography.h6 })}\n          >\n            {`Cart (${count})`}\n          </Button>\n          <Button\n            variant=\"contained\"\n            size=\"large\"\n            disabled={busy}\n            onClick={onReview}\n            sx={(theme) => ({ flex: 1, minHeight: theme.spacing(8), ...theme.typography.h6 })}\n          >\n            {busy ? 'Getting your total…' : `Checkout · ${money(estimate)}`}\n          </Button>\n        </Box>\n      ) : null}\n      <Drawer\n        anchor=\"right\"\n        open={cartOpen}\n        onClose={() => onCartOpen(false)}\n        slotProps={{ paper: { sx: (theme) => ({ width: `min(100vw, ${theme.spacing(60)})`, p: 2 }) } }}\n      >\n        <Stack spacing={2} sx={{ height: '100%' }}>\n          <Typography variant=\"h5\" component=\"h2\">\n            {'Your order'}\n          </Typography>\n          <Stack spacing={1} divider={<Divider flexItem />} sx={{ flex: 1, overflowY: 'auto' }}>\n            {lines.map((line) => (\n              <Stack key={line.key} direction=\"row\" spacing={1} sx={{ alignItems: 'center' }}>\n                <Box sx={{ flex: 1, minWidth: 0 }}>\n                  <Typography variant=\"subtitle1\">{line.name}</Typography>\n                  {line.label ? (\n                    <Typography variant=\"body2\" color=\"text.secondary\">\n                      {line.label}\n                    </Typography>\n                  ) : null}\n                  <Typography variant=\"body2\">{money(line.unitCents * line.quantity)}</Typography>\n                </Box>\n                <IconButton\n                  aria-label={`One fewer ${line.name}`}\n                  onClick={() => onQuantity(line.key, line.quantity - 1)}\n                  sx={(theme) => ({ width: theme.spacing(7), height: theme.spacing(7), border: 1, borderColor: 'divider' })}\n                >\n                  {'−'}\n                </IconButton>\n                <Typography variant=\"h6\" component=\"span\" aria-label=\"Quantity\" sx={{ minWidth: (theme) => theme.spacing(4), textAlign: 'center' }}>\n                  {line.quantity}\n                </Typography>\n                <IconButton\n                  aria-label={`One more ${line.name}`}\n                  disabled={line.quantity >= CommerceModel.POS_KIOSK_MAX_QUANTITY}\n                  onClick={() => onQuantity(line.key, line.quantity + 1)}\n                  sx={(theme) => ({ width: theme.spacing(7), height: theme.spacing(7), border: 1, borderColor: 'divider' })}\n                >\n                  {'+'}\n                </IconButton>\n              </Stack>\n            ))}\n            {lines.length === 0 ? (\n              <Typography color=\"text.secondary\">{'Your cart is empty.'}</Typography>\n            ) : null}\n          </Stack>\n          <Typography variant=\"body2\" color=\"text.secondary\">\n            {'Tax is added at checkout.'}\n          </Typography>\n          <Button\n            variant=\"contained\"\n            size=\"large\"\n            disabled={busy || lines.length === 0}\n            onClick={() => {\n              onCartOpen(false)\n              onReview()\n            }}\n            sx={(theme) => ({ minHeight: theme.spacing(8), ...theme.typography.h6 })}\n          >\n            {`Checkout · ${money(estimate)}`}\n          </Button>\n          <Button onClick={() => onCartOpen(false)} sx={(theme) => ({ minHeight: theme.spacing(7) })}>\n            {'Keep ordering'}\n          </Button>\n        </Stack>\n      </Drawer>\n    </Box>\n  )\n}\n"],"names":["Box","Button","Card","CardActionArea","CardContent","Chip","CircularProgress","Divider","Drawer","IconButton","Stack","Typography","CommerceModel","displayMoney","kioskFromCents","product","variants","reduce","low","variant","Math","min","priceCents","kioskProductSoldOut","length","every","soldOut","KioskMenu","catalog","loading","categoryId","onCategory","onProduct","lines","currency","onReview","onQuantity","cartOpen","onCartOpen","busy","count","sum","line","quantity","estimate","unitCents","money","cents","products","sx","minHeight","display","flexDirection","component","aria-label","gap","overflowX","p","borderBottom","borderColor","label","color","aria-pressed","onClick","theme","spacing","px","typography","subtitle1","categories","map","category","name","id","flex","pb","placeItems","py","textAlign","gridTemplateColumns","several","disabled","height","alignItems","imageUrl","src","alt","width","aspectRatio","objectFit","position","left","right","bottom","bgcolor","borderTop","zIndex","appBar","size","h6","anchor","open","onClose","slotProps","paper","divider","flexItem","overflowY","direction","minWidth","key","border","POS_KIOSK_MAX_QUANTITY"],"mappings":"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"}

package/src/lib/components/console/pos-kiosk/kiosk-staff.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Staff unlock (AGL-3623): a corner button, then the staff PIN the register
+ * uses, checked on the server. No names are listed — the screen faces the
+ * public — and a right PIN opens the kiosk's settings for a few minutes:
+ * which card reader it sends payments to, and leaving kiosk mode.
+ */
+export declare function KioskStaffControl({ token, onExit, onUnauthorized, }: {
+    token: string;
+    /** Kiosk mode was left: the device is unpaired. */
+    onExit: () => void;
+    onUnauthorized: () => void;
+}): import("react").JSX.Element;

package/src/lib/components/console/pos-kiosk/kiosk-staff.js

@@ -0,0 +1,257 @@
+/**
+ * @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 { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import Alert from "@mui/material/Alert";
+import Button from "@mui/material/Button";
+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 MenuItem from "@mui/material/MenuItem";
+import Stack from "@mui/material/Stack";
+import TextField from "@mui/material/TextField";
+import { useEffect, useState } from "react";
+import { kioskApi } from "./pos-kiosk-api.js";
+/**
+ * Staff unlock (AGL-3623): a corner button, then the staff PIN the register
+ * uses, checked on the server. No names are listed — the screen faces the
+ * public — and a right PIN opens the kiosk's settings for a few minutes:
+ * which card reader it sends payments to, and leaving kiosk mode.
+ */ export function KioskStaffControl({ token, onExit, onUnauthorized }) {
+    var _view_readerId;
+    const [stage, setStage] = useState('closed');
+    const [pin, setPin] = useState('');
+    const [unlock, setUnlock] = useState(null);
+    const [view, setView] = useState(null);
+    const [error, setError] = useState(null);
+    const [busy, setBusy] = useState(false);
+    const [confirmExit, setConfirmExit] = useState(false);
+    const close = ()=>{
+        setStage('closed');
+        setPin('');
+        setUnlock(null);
+        setView(null);
+        setError(null);
+        setConfirmExit(false);
+    };
+    // The unlock lapses on its own: the settings close with it.
+    useEffect(()=>{
+        if (!unlock) return undefined;
+        const timer = setTimeout(close, Math.max(0, unlock.expiresAtMs - Date.now()));
+        return ()=>clearTimeout(timer);
+    }, [
+        unlock
+    ]);
+    const submitPin = async (event)=>{
+        var _opened_value;
+        event.preventDefault();
+        if (busy || pin.length < 4) return;
+        setBusy(true);
+        setError(null);
+        const result = await kioskApi.unlock(token, pin);
+        setPin('');
+        if (!result.ok || !result.value) {
+            var _result_error, _result_error1;
+            setBusy(false);
+            if (result.status === 401 && /not paired/i.test((_result_error = result.error) != null ? _result_error : '')) return onUnauthorized();
+            setError((_result_error1 = result.error) != null ? _result_error1 : 'That PIN is not right.');
+            return;
+        }
+        const opened = await kioskApi.settings(token, result.value.unlock);
+        setBusy(false);
+        setUnlock(result.value);
+        setView((_opened_value = opened.value) != null ? _opened_value : null);
+        setStage('settings');
+    };
+    const chooseReader = async (readerId)=>{
+        var _result_error;
+        if (!unlock) return;
+        setBusy(true);
+        const result = await kioskApi.setReader(token, unlock.unlock, readerId);
+        setBusy(false);
+        if (result.ok && result.value) setView(result.value);
+        else setError((_result_error = result.error) != null ? _result_error : 'The card reader could not be changed.');
+    };
+    const exit = async ()=>{
+        if (!unlock) return;
+        setBusy(true);
+        const result = await kioskApi.exit(token, unlock.unlock);
+        setBusy(false);
+        if (!result.ok) {
+            var _result_error;
+            setError((_result_error = result.error) != null ? _result_error : 'Kiosk mode could not be turned off.');
+            return;
+        }
+        close();
+        onExit();
+    };
+    return /*#__PURE__*/ _jsxs(_Fragment, {
+        children: [
+            /*#__PURE__*/ _jsx(Button, {
+                size: "small",
+                color: "inherit",
+                onClick: ()=>setStage('pin'),
+                sx: (theme)=>({
+                        position: 'fixed',
+                        left: theme.spacing(1),
+                        top: theme.spacing(1),
+                        opacity: 0.4
+                    }),
+                children: 'Staff'
+            }),
+            /*#__PURE__*/ _jsx(Dialog, {
+                open: stage === 'pin',
+                onClose: ()=>busy ? undefined : close(),
+                maxWidth: "xs",
+                fullWidth: true,
+                children: /*#__PURE__*/ _jsxs("form", {
+                    onSubmit: submitPin,
+                    children: [
+                        /*#__PURE__*/ _jsx(DialogTitle, {
+                            children: 'Staff unlock'
+                        }),
+                        /*#__PURE__*/ _jsx(DialogContent, {
+                            children: /*#__PURE__*/ _jsxs(Stack, {
+                                spacing: 2,
+                                sx: {
+                                    pt: 1
+                                },
+                                children: [
+                                    /*#__PURE__*/ _jsx(DialogContentText, {
+                                        children: 'Enter your register PIN.'
+                                    }),
+                                    /*#__PURE__*/ _jsx(TextField, {
+                                        value: pin,
+                                        onChange: (event)=>setPin(event.target.value.replace(/\D/g, '').slice(0, 6)),
+                                        type: "password",
+                                        autoFocus: true,
+                                        autoComplete: "off",
+                                        slotProps: {
+                                            htmlInput: {
+                                                inputMode: 'numeric',
+                                                pattern: '[0-9]*',
+                                                maxLength: 6,
+                                                'aria-label': 'Staff PIN'
+                                            }
+                                        }
+                                    }),
+                                    error ? /*#__PURE__*/ _jsx(Alert, {
+                                        severity: "error",
+                                        children: error
+                                    }) : null
+                                ]
+                            })
+                        }),
+                        /*#__PURE__*/ _jsxs(DialogActions, {
+                            children: [
+                                /*#__PURE__*/ _jsx(Button, {
+                                    onClick: close,
+                                    disabled: busy,
+                                    children: 'Cancel'
+                                }),
+                                /*#__PURE__*/ _jsx(Button, {
+                                    type: "submit",
+                                    variant: "contained",
+                                    disabled: busy || pin.length < 4,
+                                    children: busy ? 'Checking…' : 'Unlock'
+                                })
+                            ]
+                        })
+                    ]
+                })
+            }),
+            /*#__PURE__*/ _jsxs(Dialog, {
+                open: stage === 'settings',
+                onClose: ()=>busy ? undefined : close(),
+                maxWidth: "xs",
+                fullWidth: true,
+                children: [
+                    /*#__PURE__*/ _jsx(DialogTitle, {
+                        children: (view == null ? void 0 : view.label) || 'Kiosk settings'
+                    }),
+                    /*#__PURE__*/ _jsx(DialogContent, {
+                        children: /*#__PURE__*/ _jsxs(Stack, {
+                            spacing: 2,
+                            sx: {
+                                pt: 1
+                            },
+                            children: [
+                                view && view.readers.length > 0 ? /*#__PURE__*/ _jsxs(TextField, {
+                                    select: true,
+                                    label: "Card reader",
+                                    value: (_view_readerId = view.readerId) != null ? _view_readerId : '',
+                                    disabled: busy,
+                                    onChange: (event)=>void chooseReader(event.target.value),
+                                    children: [
+                                        /*#__PURE__*/ _jsx(MenuItem, {
+                                            value: "",
+                                            children: 'None — pay at counter only'
+                                        }),
+                                        view.readers.map((reader)=>/*#__PURE__*/ _jsx(MenuItem, {
+                                                value: reader.id,
+                                                children: `${reader.label} (${reader.status})`
+                                            }, reader.id))
+                                    ]
+                                }) : /*#__PURE__*/ _jsx(DialogContentText, {
+                                    children: 'No card reader is assigned to this register.'
+                                }),
+                                confirmExit ? /*#__PURE__*/ _jsx(Alert, {
+                                    severity: "warning",
+                                    children: 'This unpairs the kiosk. To use it again, show a new kiosk code on the register.'
+                                }) : null,
+                                error ? /*#__PURE__*/ _jsx(Alert, {
+                                    severity: "error",
+                                    children: error
+                                }) : null
+                            ]
+                        })
+                    }),
+                    /*#__PURE__*/ _jsxs(DialogActions, {
+                        children: [
+                            confirmExit ? /*#__PURE__*/ _jsx(Button, {
+                                color: "error",
+                                variant: "contained",
+                                disabled: busy,
+                                onClick: ()=>void exit(),
+                                children: 'Exit kiosk mode'
+                            }) : /*#__PURE__*/ _jsx(Button, {
+                                color: "error",
+                                disabled: busy,
+                                onClick: ()=>setConfirmExit(true),
+                                children: 'Exit kiosk mode'
+                            }),
+                            /*#__PURE__*/ _jsx(Button, {
+                                onClick: ()=>window.location.reload(),
+                                disabled: busy,
+                                children: 'Reload'
+                            }),
+                            /*#__PURE__*/ _jsx(Button, {
+                                variant: "contained",
+                                onClick: close,
+                                disabled: busy,
+                                children: 'Done'
+                            })
+                        ]
+                    })
+                ]
+            })
+        ]
+    });
+}
+
+//# sourceMappingURL=kiosk-staff.js.map