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

package/src/lib/components/console/pos-display/brand-screen.js

@@ -0,0 +1,85 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * @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.
+ */ import Box from "@mui/material/Box";
+import CircularProgress from "@mui/material/CircularProgress";
+import Stack from "@mui/material/Stack";
+import { useColorScheme } from "@mui/material/styles";
+import Typography from "@mui/material/Typography";
+/** The store's logo for the scheme in use, its name when it has none. */ export function PosDisplayBrandMark({ branding }) {
+    const { mode, systemMode } = useColorScheme();
+    const dark = (mode === 'system' ? systemMode : mode) === 'dark';
+    const logo = dark && (branding == null ? void 0 : branding.logoDarkUrl) || (branding == null ? void 0 : branding.logoUrl) || null;
+    if (logo) {
+        var _ref;
+        return /*#__PURE__*/ _jsx(Box, {
+            component: "img",
+            src: logo,
+            alt: (_ref = branding == null ? void 0 : branding.name) != null ? _ref : '',
+            sx: (theme)=>({
+                    maxWidth: '80%',
+                    maxHeight: theme.spacing(24),
+                    objectFit: 'contain'
+                })
+        });
+    }
+    return /*#__PURE__*/ _jsx(Typography, {
+        variant: "h2",
+        component: "p",
+        sx: {
+            textAlign: 'center'
+        },
+        children: (branding == null ? void 0 : branding.name) || 'Welcome'
+    });
+}
+/**
+ * A centered full-screen message under the store's mark: the idle screen,
+ * the thank-you, the card reader prompt and "the cashier will finish up".
+ */ export function PosDisplayBrandScreen({ branding, title, message, busy, children }) {
+    return /*#__PURE__*/ _jsxs(Stack, {
+        spacing: 4,
+        sx: {
+            minHeight: '100dvh',
+            alignItems: 'center',
+            justifyContent: 'center',
+            textAlign: 'center',
+            px: 2
+        },
+        children: [
+            /*#__PURE__*/ _jsx(PosDisplayBrandMark, {
+                branding: branding
+            }),
+            title ? /*#__PURE__*/ _jsx(Typography, {
+                variant: "h3",
+                component: "h1",
+                children: title
+            }) : null,
+            message ? /*#__PURE__*/ _jsx(Typography, {
+                variant: "h5",
+                component: "p",
+                color: "text.secondary",
+                children: message
+            }) : null,
+            busy ? /*#__PURE__*/ _jsx(CircularProgress, {
+                size: 64,
+                "aria-label": "Waiting for the card reader"
+            }) : null,
+            children
+        ]
+    });
+}
+
+//# sourceMappingURL=brand-screen.js.map

package/src/lib/components/console/pos-display/brand-screen.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../../../libs/plugins/commerce/src/lib/components/console/pos-display/brand-screen.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\nimport Box from '@mui/material/Box'\nimport CircularProgress from '@mui/material/CircularProgress'\nimport Stack from '@mui/material/Stack'\nimport { useColorScheme } from '@mui/material/styles'\nimport Typography from '@mui/material/Typography'\nimport type { ReactNode } from 'react'\nimport type { PosDisplayBranding } from './pos-display-api'\n\n/** The store's logo for the scheme in use, its name when it has none. */\nexport function PosDisplayBrandMark({ branding }: { branding: PosDisplayBranding | null }) {\n  const { mode, systemMode } = useColorScheme()\n  const dark = (mode === 'system' ? systemMode : mode) === 'dark'\n  const logo = (dark && branding?.logoDarkUrl) || branding?.logoUrl || null\n  if (logo) {\n    return (\n      <Box\n        component=\"img\"\n        src={logo}\n        alt={branding?.name ?? ''}\n        sx={(theme) => ({\n          maxWidth: '80%',\n          maxHeight: theme.spacing(24),\n          objectFit: 'contain',\n        })}\n      />\n    )\n  }\n  return (\n    <Typography variant=\"h2\" component=\"p\" sx={{ textAlign: 'center' }}>\n      {branding?.name || 'Welcome'}\n    </Typography>\n  )\n}\n\n/**\n * A centered full-screen message under the store's mark: the idle screen,\n * the thank-you, the card reader prompt and \"the cashier will finish up\".\n */\nexport function PosDisplayBrandScreen({\n  branding,\n  title,\n  message,\n  busy,\n  children,\n}: {\n  branding: PosDisplayBranding | null\n  title?: string\n  message?: string\n  busy?: boolean\n  children?: ReactNode\n}) {\n  return (\n    <Stack\n      spacing={4}\n      sx={{\n        minHeight: '100dvh',\n        alignItems: 'center',\n        justifyContent: 'center',\n        textAlign: 'center',\n        px: 2,\n      }}\n    >\n      <PosDisplayBrandMark branding={branding} />\n      {title ? (\n        <Typography variant=\"h3\" component=\"h1\">\n          {title}\n        </Typography>\n      ) : null}\n      {message ? (\n        <Typography variant=\"h5\" component=\"p\" color=\"text.secondary\">\n          {message}\n        </Typography>\n      ) : null}\n      {busy ? <CircularProgress size={64} aria-label=\"Waiting for the card reader\" /> : null}\n      {children}\n    </Stack>\n  )\n}\n"],"names":["Box","CircularProgress","Stack","useColorScheme","Typography","PosDisplayBrandMark","branding","mode","systemMode","dark","logo","logoDarkUrl","logoUrl","component","src","alt","name","sx","theme","maxWidth","maxHeight","spacing","objectFit","variant","textAlign","PosDisplayBrandScreen","title","message","busy","children","minHeight","alignItems","justifyContent","px","color","size","aria-label"],"mappings":";AAAA;;;;;;;;;;;;;;;CAeC,GAED,OAAOA,SAAS,oBAAmB;AACnC,OAAOC,sBAAsB,iCAAgC;AAC7D,OAAOC,WAAW,sBAAqB;AACvC,SAASC,cAAc,QAAQ,uBAAsB;AACrD,OAAOC,gBAAgB,2BAA0B;AAIjD,uEAAuE,GACvE,OAAO,SAASC,oBAAoB,EAAEC,QAAQ,EAA2C;IACvF,MAAM,EAAEC,IAAI,EAAEC,UAAU,EAAE,GAAGL;IAC7B,MAAMM,OAAO,AAACF,CAAAA,SAAS,WAAWC,aAAaD,IAAG,MAAO;IACzD,MAAMG,OAAO,AAACD,SAAQH,4BAAAA,SAAUK,WAAW,MAAKL,4BAAAA,SAAUM,OAAO,KAAI;IACrE,IAAIF,MAAM;;QACR,qBACE,KAACV;YACCa,WAAU;YACVC,KAAKJ;YACLK,GAAG,UAAET,4BAAAA,SAAUU,IAAI,mBAAI;YACvBC,IAAI,CAACC,QAAW,CAAA;oBACdC,UAAU;oBACVC,WAAWF,MAAMG,OAAO,CAAC;oBACzBC,WAAW;gBACb,CAAA;;IAGN;IACA,qBACE,KAAClB;QAAWmB,SAAQ;QAAKV,WAAU;QAAII,IAAI;YAAEO,WAAW;QAAS;kBAC9DlB,CAAAA,4BAAAA,SAAUU,IAAI,KAAI;;AAGzB;AAEA;;;CAGC,GACD,OAAO,SAASS,sBAAsB,EACpCnB,QAAQ,EACRoB,KAAK,EACLC,OAAO,EACPC,IAAI,EACJC,QAAQ,EAOT;IACC,qBACE,MAAC3B;QACCmB,SAAS;QACTJ,IAAI;YACFa,WAAW;YACXC,YAAY;YACZC,gBAAgB;YAChBR,WAAW;YACXS,IAAI;QACN;;0BAEA,KAAC5B;gBAAoBC,UAAUA;;YAC9BoB,sBACC,KAACtB;gBAAWmB,SAAQ;gBAAKV,WAAU;0BAChCa;iBAED;YACHC,wBACC,KAACvB;gBAAWmB,SAAQ;gBAAKV,WAAU;gBAAIqB,OAAM;0BAC1CP;iBAED;YACHC,qBAAO,KAAC3B;gBAAiBkC,MAAM;gBAAIC,cAAW;iBAAmC;YACjFP;;;AAGP"}

package/src/lib/components/console/pos-display/cart-screen.d.ts

@@ -0,0 +1,29 @@
+/**
+ * @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.
+ */
+import type * as CommerceModel from '../../../model';
+/**
+ * The basket as the cashier builds it, with what is paid and still due.
+ *
+ * `totalCents` is the SALE: a tip rides beside it and never inside it (the
+ * ledger's rule, `posTipCents`), and so do `paidCents` and `dueCents`. Once a
+ * tip is on the sale the customer sees it as its own line and the total they
+ * are actually paying under it, so the screen never reads short by the tip.
+ */
+export declare function PosDisplayCartView({ cart, currency, }: {
+    cart: CommerceModel.PosDisplayCart;
+    currency?: string;
+}): import("react").JSX.Element;

package/src/lib/components/console/pos-display/cart-screen.js

@@ -0,0 +1,166 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * @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.
+ */ import Divider from "@mui/material/Divider";
+import List from "@mui/material/List";
+import ListItem from "@mui/material/ListItem";
+import ListItemText from "@mui/material/ListItemText";
+import Stack from "@mui/material/Stack";
+import Typography from "@mui/material/Typography";
+import { displayMoney } from "./pos-display-api.js";
+function TotalRow({ label, cents, currency, negative, strong }) {
+    const variant = strong ? 'h3' : 'h6';
+    return /*#__PURE__*/ _jsxs(Stack, {
+        direction: "row",
+        sx: {
+            justifyContent: 'space-between',
+            alignItems: 'baseline'
+        },
+        children: [
+            /*#__PURE__*/ _jsx(Typography, {
+                variant: variant,
+                component: "span",
+                children: label
+            }),
+            /*#__PURE__*/ _jsx(Typography, {
+                variant: variant,
+                component: "span",
+                children: negative ? `−${displayMoney(cents, currency)}` : displayMoney(cents, currency)
+            })
+        ]
+    });
+}
+/**
+ * The basket as the cashier builds it, with what is paid and still due.
+ *
+ * `totalCents` is the SALE: a tip rides beside it and never inside it (the
+ * ledger's rule, `posTipCents`), and so do `paidCents` and `dueCents`. Once a
+ * tip is on the sale the customer sees it as its own line and the total they
+ * are actually paying under it, so the screen never reads short by the tip.
+ */ export function PosDisplayCartView({ cart, currency }) {
+    var _cart_tipCents;
+    const tipCents = (_cart_tipCents = cart.tipCents) != null ? _cart_tipCents : 0;
+    // The register prices tax when the cashier charges; until then the basket
+    // has no tax figure, and a "Tax $0.00" row would be a promise.
+    const priced = cart.dueCents != null;
+    return /*#__PURE__*/ _jsxs(Stack, {
+        spacing: 2,
+        sx: {
+            width: '100%'
+        },
+        children: [
+            /*#__PURE__*/ _jsx(List, {
+                "aria-label": "Items",
+                sx: {
+                    overflowY: 'auto'
+                },
+                children: cart.lines.map((line, index)=>/*#__PURE__*/ _jsx(ListItem, {
+                        divider: true,
+                        secondaryAction: /*#__PURE__*/ _jsx(Typography, {
+                            variant: "h6",
+                            component: "span",
+                            children: displayMoney(line.amountCents, currency)
+                        }),
+                        children: /*#__PURE__*/ _jsx(ListItemText, {
+                            primary: `${line.quantity} × ${line.name}`,
+                            secondary: line.variantLabel || undefined,
+                            slotProps: {
+                                primary: {
+                                    variant: 'h6'
+                                },
+                                secondary: {
+                                    variant: 'body1'
+                                }
+                            }
+                        })
+                    }, `${index}:${line.name}`))
+            }),
+            cart.lines.length === 0 ? /*#__PURE__*/ _jsx(Typography, {
+                variant: "h6",
+                color: "text.secondary",
+                sx: {
+                    textAlign: 'center'
+                },
+                children: "Your items will show here"
+            }) : null,
+            /*#__PURE__*/ _jsxs(Stack, {
+                spacing: 1,
+                children: [
+                    /*#__PURE__*/ _jsx(TotalRow, {
+                        label: "Subtotal",
+                        cents: cart.itemsCents,
+                        currency: currency
+                    }),
+                    cart.discountCents > 0 ? /*#__PURE__*/ _jsx(TotalRow, {
+                        label: "Discount",
+                        cents: cart.discountCents,
+                        currency: currency,
+                        negative: true
+                    }) : null,
+                    priced ? /*#__PURE__*/ _jsx(TotalRow, {
+                        label: "Tax",
+                        cents: cart.taxCents,
+                        currency: currency
+                    }) : null,
+                    /*#__PURE__*/ _jsx(Divider, {}),
+                    tipCents > 0 ? /*#__PURE__*/ _jsxs(_Fragment, {
+                        children: [
+                            /*#__PURE__*/ _jsx(TotalRow, {
+                                label: "Total",
+                                cents: cart.totalCents,
+                                currency: currency
+                            }),
+                            /*#__PURE__*/ _jsx(TotalRow, {
+                                label: "Tip",
+                                cents: tipCents,
+                                currency: currency
+                            }),
+                            /*#__PURE__*/ _jsx(TotalRow, {
+                                label: "Total with tip",
+                                cents: cart.totalCents + tipCents,
+                                currency: currency,
+                                strong: true
+                            })
+                        ]
+                    }) : /*#__PURE__*/ _jsx(TotalRow, {
+                        label: "Total",
+                        cents: cart.totalCents,
+                        currency: currency,
+                        strong: true
+                    }),
+                    priced ? null : /*#__PURE__*/ _jsx(Typography, {
+                        variant: "body1",
+                        color: "text.secondary",
+                        children: "Any tax is added when you pay."
+                    }),
+                    cart.paidCents ? /*#__PURE__*/ _jsx(TotalRow, {
+                        label: "Paid",
+                        cents: cart.paidCents,
+                        currency: currency
+                    }) : null,
+                    cart.dueCents != null && cart.paidCents ? /*#__PURE__*/ _jsx(TotalRow, {
+                        label: "Due",
+                        cents: cart.dueCents,
+                        currency: currency,
+                        strong: true
+                    }) : null
+                ]
+            })
+        ]
+    });
+}
+
+//# sourceMappingURL=cart-screen.js.map

package/src/lib/components/console/pos-display/cart-screen.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../../../libs/plugins/commerce/src/lib/components/console/pos-display/cart-screen.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\nimport Divider from '@mui/material/Divider'\nimport List from '@mui/material/List'\nimport ListItem from '@mui/material/ListItem'\nimport ListItemText from '@mui/material/ListItemText'\nimport Stack from '@mui/material/Stack'\nimport Typography from '@mui/material/Typography'\nimport type * as CommerceModel from '../../../model'\nimport { displayMoney } from './pos-display-api'\n\nfunction TotalRow({\n  label,\n  cents,\n  currency,\n  negative,\n  strong,\n}: {\n  label: string\n  cents: number\n  currency?: string\n  negative?: boolean\n  strong?: boolean\n}) {\n  const variant = strong ? 'h3' : 'h6'\n  return (\n    <Stack direction=\"row\" sx={{ justifyContent: 'space-between', alignItems: 'baseline' }}>\n      <Typography variant={variant} component=\"span\">\n        {label}\n      </Typography>\n      <Typography variant={variant} component=\"span\">\n        {negative ? `−${displayMoney(cents, currency)}` : displayMoney(cents, currency)}\n      </Typography>\n    </Stack>\n  )\n}\n\n/**\n * The basket as the cashier builds it, with what is paid and still due.\n *\n * `totalCents` is the SALE: a tip rides beside it and never inside it (the\n * ledger's rule, `posTipCents`), and so do `paidCents` and `dueCents`. Once a\n * tip is on the sale the customer sees it as its own line and the total they\n * are actually paying under it, so the screen never reads short by the tip.\n */\nexport function PosDisplayCartView({\n  cart,\n  currency,\n}: {\n  cart: CommerceModel.PosDisplayCart\n  currency?: string\n}) {\n  const tipCents = cart.tipCents ?? 0\n  // The register prices tax when the cashier charges; until then the basket\n  // has no tax figure, and a \"Tax $0.00\" row would be a promise.\n  const priced = cart.dueCents != null\n  return (\n    <Stack spacing={2} sx={{ width: '100%' }}>\n      <List aria-label=\"Items\" sx={{ overflowY: 'auto' }}>\n        {cart.lines.map((line, index) => (\n          <ListItem\n            key={`${index}:${line.name}`}\n            divider\n            secondaryAction={\n              <Typography variant=\"h6\" component=\"span\">\n                {displayMoney(line.amountCents, currency)}\n              </Typography>\n            }\n          >\n            <ListItemText\n              primary={`${line.quantity} × ${line.name}`}\n              secondary={line.variantLabel || undefined}\n              slotProps={{\n                primary: { variant: 'h6' },\n                secondary: { variant: 'body1' },\n              }}\n            />\n          </ListItem>\n        ))}\n      </List>\n      {cart.lines.length === 0 ? (\n        <Typography variant=\"h6\" color=\"text.secondary\" sx={{ textAlign: 'center' }}>\n          Your items will show here\n        </Typography>\n      ) : null}\n      <Stack spacing={1}>\n        <TotalRow label=\"Subtotal\" cents={cart.itemsCents} currency={currency} />\n        {cart.discountCents > 0 ? (\n          <TotalRow label=\"Discount\" cents={cart.discountCents} currency={currency} negative />\n        ) : null}\n        {priced ? <TotalRow label=\"Tax\" cents={cart.taxCents} currency={currency} /> : null}\n        <Divider />\n        {tipCents > 0 ? (\n          <>\n            <TotalRow label=\"Total\" cents={cart.totalCents} currency={currency} />\n            <TotalRow label=\"Tip\" cents={tipCents} currency={currency} />\n            <TotalRow\n              label=\"Total with tip\"\n              cents={cart.totalCents + tipCents}\n              currency={currency}\n              strong\n            />\n          </>\n        ) : (\n          <TotalRow label=\"Total\" cents={cart.totalCents} currency={currency} strong />\n        )}\n        {priced ? null : (\n          <Typography variant=\"body1\" color=\"text.secondary\">\n            Any tax is added when you pay.\n          </Typography>\n        )}\n        {cart.paidCents ? (\n          <TotalRow label=\"Paid\" cents={cart.paidCents} currency={currency} />\n        ) : null}\n        {cart.dueCents != null && cart.paidCents ? (\n          <TotalRow label=\"Due\" cents={cart.dueCents} currency={currency} strong />\n        ) : null}\n      </Stack>\n    </Stack>\n  )\n}\n"],"names":["Divider","List","ListItem","ListItemText","Stack","Typography","displayMoney","TotalRow","label","cents","currency","negative","strong","variant","direction","sx","justifyContent","alignItems","component","PosDisplayCartView","cart","tipCents","priced","dueCents","spacing","width","aria-label","overflowY","lines","map","line","index","divider","secondaryAction","amountCents","primary","quantity","name","secondary","variantLabel","undefined","slotProps","length","color","textAlign","itemsCents","discountCents","taxCents","totalCents","paidCents"],"mappings":"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"}

package/src/lib/components/console/pos-display/pairing-screen.d.ts

@@ -0,0 +1,24 @@
+/**
+ * @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.
+ */
+import { type PosDisplayBranding } from './pos-display-api';
+/**
+ * The unpaired display (AGL-3608): six digits from the register's Customer
+ * display menu, exchanged once for this device's token.
+ */
+export declare function PosDisplayPairingScreen({ onPaired, }: {
+    onPaired: (token: string, branding: PosDisplayBranding) => void;
+}): import("react").JSX.Element;

package/src/lib/components/console/pos-display/pairing-screen.js

@@ -0,0 +1,127 @@
+import { _ as _extends } from "@swc/helpers/_/_extends";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * @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.
+ */ import Alert from "@mui/material/Alert";
+import Button from "@mui/material/Button";
+import Stack from "@mui/material/Stack";
+import TextField from "@mui/material/TextField";
+import Typography from "@mui/material/Typography";
+import { useState } from "react";
+import { pairDisplay } from "./pos-display-api.js";
+/**
+ * The unpaired display (AGL-3608): six digits from the register's Customer
+ * display menu, exchanged once for this device's token.
+ */ export function PosDisplayPairingScreen({ onPaired }) {
+    const [code, setCode] = useState('');
+    const [busy, setBusy] = useState(false);
+    const [error, setError] = useState(null);
+    const ready = code.length === 6;
+    const submit = async (event)=>{
+        var _result_error;
+        var _result_value;
+        event.preventDefault();
+        if (!ready || busy) return;
+        setBusy(true);
+        setError(null);
+        const result = await pairDisplay(code);
+        setBusy(false);
+        const token = result.ok ? (_result_value = result.value) == null ? void 0 : _result_value.token : undefined;
+        setCode('');
+        if (token) {
+            var _result_value1;
+            onPaired(token, (_result_value1 = result.value) == null ? void 0 : _result_value1.branding);
+            return;
+        }
+        setError((_result_error = result.error) != null ? _result_error : 'That code is not valid. Show a new code on the register.');
+    };
+    return /*#__PURE__*/ _jsxs(Stack, {
+        component: "form",
+        onSubmit: submit,
+        spacing: 4,
+        sx: {
+            minHeight: '100dvh',
+            alignItems: 'center',
+            justifyContent: 'center',
+            px: 2
+        },
+        children: [
+            /*#__PURE__*/ _jsx(Typography, {
+                variant: "h3",
+                component: "h1",
+                sx: {
+                    textAlign: 'center'
+                },
+                children: "Pair this display"
+            }),
+            /*#__PURE__*/ _jsx(Typography, {
+                variant: "h6",
+                color: "text.secondary",
+                sx: {
+                    textAlign: 'center'
+                },
+                children: "Enter the code shown on the register"
+            }),
+            /*#__PURE__*/ _jsx(TextField, {
+                value: code,
+                onChange: (event)=>setCode(event.target.value.replace(/\D/g, '').slice(0, 6)),
+                autoFocus: true,
+                autoComplete: "one-time-code",
+                placeholder: "000000",
+                slotProps: {
+                    htmlInput: {
+                        inputMode: 'numeric',
+                        pattern: '[0-9]*',
+                        maxLength: 6,
+                        'aria-label': 'Pairing code',
+                        style: {
+                            textAlign: 'center'
+                        }
+                    }
+                },
+                sx: (theme)=>({
+                        width: '100%',
+                        maxWidth: theme.spacing(48),
+                        '& input': _extends({}, theme.typography.h3, {
+                            letterSpacing: theme.spacing(1)
+                        })
+                    })
+            }),
+            error ? /*#__PURE__*/ _jsx(Alert, {
+                severity: "error",
+                sx: {
+                    width: '100%',
+                    maxWidth: (theme)=>theme.spacing(48)
+                },
+                children: error
+            }) : null,
+            /*#__PURE__*/ _jsx(Button, {
+                type: "submit",
+                variant: "contained",
+                size: "large",
+                disabled: !ready || busy,
+                sx: (theme)=>_extends({
+                        width: '100%',
+                        maxWidth: theme.spacing(48),
+                        minHeight: theme.spacing(8)
+                    }, theme.typography.h6),
+                children: busy ? 'Pairing…' : 'Pair display'
+            })
+        ]
+    });
+}
+
+//# sourceMappingURL=pairing-screen.js.map

package/src/lib/components/console/pos-display/pairing-screen.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../../../libs/plugins/commerce/src/lib/components/console/pos-display/pairing-screen.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\nimport Alert from '@mui/material/Alert'\nimport Button from '@mui/material/Button'\nimport Stack from '@mui/material/Stack'\nimport TextField from '@mui/material/TextField'\nimport Typography from '@mui/material/Typography'\nimport { type FormEvent, useState } from 'react'\nimport { pairDisplay, type PosDisplayBranding } from './pos-display-api'\n\n/**\n * The unpaired display (AGL-3608): six digits from the register's Customer\n * display menu, exchanged once for this device's token.\n */\nexport function PosDisplayPairingScreen({\n  onPaired,\n}: {\n  onPaired: (token: string, branding: PosDisplayBranding) => void\n}) {\n  const [code, setCode] = useState('')\n  const [busy, setBusy] = useState(false)\n  const [error, setError] = useState<string | null>(null)\n  const ready = code.length === 6\n\n  const submit = async (event: FormEvent) => {\n    event.preventDefault()\n    if (!ready || busy) return\n    setBusy(true)\n    setError(null)\n    const result = await pairDisplay(code)\n    setBusy(false)\n    const token = result.ok ? result.value?.token : undefined\n    setCode('')\n    if (token) {\n      onPaired(token, result.value?.branding)\n      return\n    }\n    setError(result.error ?? 'That code is not valid. Show a new code on the register.')\n  }\n\n  return (\n    <Stack\n      component=\"form\"\n      onSubmit={submit}\n      spacing={4}\n      sx={{ minHeight: '100dvh', alignItems: 'center', justifyContent: 'center', px: 2 }}\n    >\n      <Typography variant=\"h3\" component=\"h1\" sx={{ textAlign: 'center' }}>\n        Pair this display\n      </Typography>\n      <Typography variant=\"h6\" color=\"text.secondary\" sx={{ textAlign: 'center' }}>\n        Enter the code shown on the register\n      </Typography>\n      <TextField\n        value={code}\n        onChange={(event) => setCode(event.target.value.replace(/\\D/g, '').slice(0, 6))}\n        autoFocus\n        autoComplete=\"one-time-code\"\n        placeholder=\"000000\"\n        slotProps={{\n          htmlInput: {\n            inputMode: 'numeric',\n            pattern: '[0-9]*',\n            maxLength: 6,\n            'aria-label': 'Pairing code',\n            style: { textAlign: 'center' },\n          },\n        }}\n        sx={(theme) => ({\n          width: '100%',\n          maxWidth: theme.spacing(48),\n          '& input': { ...theme.typography.h3, letterSpacing: theme.spacing(1) },\n        })}\n      />\n      {error ? (\n        <Alert severity=\"error\" sx={{ width: '100%', maxWidth: (theme) => theme.spacing(48) }}>\n          {error}\n        </Alert>\n      ) : null}\n      <Button\n        type=\"submit\"\n        variant=\"contained\"\n        size=\"large\"\n        disabled={!ready || busy}\n        sx={(theme) => ({\n          width: '100%',\n          maxWidth: theme.spacing(48),\n          minHeight: theme.spacing(8),\n          ...theme.typography.h6,\n        })}\n      >\n        {busy ? 'Pairing…' : 'Pair display'}\n      </Button>\n    </Stack>\n  )\n}\n"],"names":["Alert","Button","Stack","TextField","Typography","useState","pairDisplay","PosDisplayPairingScreen","onPaired","code","setCode","busy","setBusy","error","setError","ready","length","submit","event","result","preventDefault","token","ok","value","undefined","branding","component","onSubmit","spacing","sx","minHeight","alignItems","justifyContent","px","variant","textAlign","color","onChange","target","replace","slice","autoFocus","autoComplete","placeholder","slotProps","htmlInput","inputMode","pattern","maxLength","style","theme","width","maxWidth","typography","h3","letterSpacing","severity","type","size","disabled","h6"],"mappings":";;AAAA;;;;;;;;;;;;;;;CAeC,GAED,OAAOA,WAAW,sBAAqB;AACvC,OAAOC,YAAY,uBAAsB;AACzC,OAAOC,WAAW,sBAAqB;AACvC,OAAOC,eAAe,0BAAyB;AAC/C,OAAOC,gBAAgB,2BAA0B;AACjD,SAAyBC,QAAQ,QAAQ,QAAO;AAChD,SAASC,WAAW,QAAiC,uBAAmB;AAExE;;;CAGC,GACD,OAAO,SAASC,wBAAwB,EACtCC,QAAQ,EAGT;IACC,MAAM,CAACC,MAAMC,QAAQ,GAAGL,SAAS;IACjC,MAAM,CAACM,MAAMC,QAAQ,GAAGP,SAAS;IACjC,MAAM,CAACQ,OAAOC,SAAS,GAAGT,SAAwB;IAClD,MAAMU,QAAQN,KAAKO,MAAM,KAAK;IAE9B,MAAMC,SAAS,OAAOC;YAaXC;YANiBA;QAN1BD,MAAME,cAAc;QACpB,IAAI,CAACL,SAASJ,MAAM;QACpBC,QAAQ;QACRE,SAAS;QACT,MAAMK,SAAS,MAAMb,YAAYG;QACjCG,QAAQ;QACR,MAAMS,QAAQF,OAAOG,EAAE,IAAGH,gBAAAA,OAAOI,KAAK,qBAAZJ,cAAcE,KAAK,GAAGG;QAChDd,QAAQ;QACR,IAAIW,OAAO;gBACOF;YAAhBX,SAASa,QAAOF,iBAAAA,OAAOI,KAAK,qBAAZJ,eAAcM,QAAQ;YACtC;QACF;QACAX,UAASK,gBAAAA,OAAON,KAAK,YAAZM,gBAAgB;IAC3B;IAEA,qBACE,MAACjB;QACCwB,WAAU;QACVC,UAAUV;QACVW,SAAS;QACTC,IAAI;YAAEC,WAAW;YAAUC,YAAY;YAAUC,gBAAgB;YAAUC,IAAI;QAAE;;0BAEjF,KAAC7B;gBAAW8B,SAAQ;gBAAKR,WAAU;gBAAKG,IAAI;oBAAEM,WAAW;gBAAS;0BAAG;;0BAGrE,KAAC/B;gBAAW8B,SAAQ;gBAAKE,OAAM;gBAAiBP,IAAI;oBAAEM,WAAW;gBAAS;0BAAG;;0BAG7E,KAAChC;gBACCoB,OAAOd;gBACP4B,UAAU,CAACnB,QAAUR,QAAQQ,MAAMoB,MAAM,CAACf,KAAK,CAACgB,OAAO,CAAC,OAAO,IAAIC,KAAK,CAAC,GAAG;gBAC5EC,SAAS;gBACTC,cAAa;gBACbC,aAAY;gBACZC,WAAW;oBACTC,WAAW;wBACTC,WAAW;wBACXC,SAAS;wBACTC,WAAW;wBACX,cAAc;wBACdC,OAAO;4BAAEd,WAAW;wBAAS;oBAC/B;gBACF;gBACAN,IAAI,CAACqB,QAAW,CAAA;wBACdC,OAAO;wBACPC,UAAUF,MAAMtB,OAAO,CAAC;wBACxB,WAAW,aAAKsB,MAAMG,UAAU,CAACC,EAAE;4BAAEC,eAAeL,MAAMtB,OAAO,CAAC;;oBACpE,CAAA;;YAEDf,sBACC,KAACb;gBAAMwD,UAAS;gBAAQ3B,IAAI;oBAAEsB,OAAO;oBAAQC,UAAU,CAACF,QAAUA,MAAMtB,OAAO,CAAC;gBAAI;0BACjFf;iBAED;0BACJ,KAACZ;gBACCwD,MAAK;gBACLvB,SAAQ;gBACRwB,MAAK;gBACLC,UAAU,CAAC5C,SAASJ;gBACpBkB,IAAI,CAACqB,QAAW;wBACdC,OAAO;wBACPC,UAAUF,MAAMtB,OAAO,CAAC;wBACxBE,WAAWoB,MAAMtB,OAAO,CAAC;uBACtBsB,MAAMG,UAAU,CAACO,EAAE;0BAGvBjD,OAAO,aAAa;;;;AAI7B"}

package/src/lib/components/console/pos-display/pos-display-api.d.ts

@@ -0,0 +1,90 @@
+/**
+ * @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.
+ */
+import type * as CommerceModel from '../../../model';
+/**
+ * The customer display's half of `/api/commerce/pos-display` (AGL-3608).
+ *
+ * Every call carries the DISPLAY token, never a staff session: the screen
+ * faces the public, and the token opens one register's display state and
+ * nothing else. The route answers 401 when the token is unknown or revoked,
+ * which the page reads as "pair again".
+ */
+export declare const POS_DISPLAY_ENDPOINT = "/api/commerce/pos-display";
+/** Where the paired token lives on the device. */
+export declare const POS_DISPLAY_TOKEN_KEY = "aglyn.posDisplayToken";
+export declare const POS_DISPLAY_TOKEN_HEADER = "X-Pos-Display-Token";
+/** The store's look for the idle and thank-you screens. */
+export interface PosDisplayBranding {
+    name: string;
+    logoUrl: string | null;
+    logoDarkUrl: string | null;
+    message: string;
+}
+/** The state as the route hands it to the display. */
+export type PosDisplayPublicState = Omit<CommerceModel.PosDisplayState, 'response'> & {
+    answered: boolean;
+};
+/** What the customer sends back for the current prompt. */
+export interface PosDisplayAnswer {
+    promptId: string;
+    tipChoice?: 'percent' | 'custom' | 'none';
+    tipPercent?: number;
+    tipCents?: number;
+    receiptChannel?: CommerceModel.PosReceiptChannel;
+    email?: string;
+    phone?: string;
+    marketingOptIn?: boolean;
+}
+/**
+ * A call's outcome, with the status the page branches on: `value` when `ok`,
+ * `error` when not. One flat shape rather than a union, because the
+ * workspace compiles without `strict` and an `ok` check would not narrow one.
+ */
+export interface PosDisplayResult<T> {
+    ok: boolean;
+    /** The HTTP status, or 0 when the request never landed. */
+    status: number;
+    value?: T;
+    error?: string;
+}
+export declare function readStoredToken(): string | null;
+export declare function storeToken(token: string | null): void;
+export declare function pairDisplay(code: string): Promise<PosDisplayResult<{
+    token: string;
+    branding: PosDisplayBranding;
+}>>;
+export declare function pollDisplay(token: string, withBranding: boolean): Promise<PosDisplayResult<{
+    state: PosDisplayPublicState;
+    branding?: PosDisplayBranding;
+}>>;
+export declare function respondToDisplay(token: string, response: PosDisplayAnswer): Promise<PosDisplayResult<{
+    ok: true;
+}>>;
+export declare function forgetDisplay(token: string): Promise<PosDisplayResult<{
+    ok: true;
+}>>;
+/**
+ * Minor units as the register shows them, in the store's currency (the
+ * display state's `currency`; US dollars when a state predates it). A
+ * zero-decimal currency (JPY) has no minor unit to divide out.
+ */
+export declare function displayMoney(cents: number, currency?: string | null): string;
+/**
+ * Dollars typed on the display as whole cents, or null when the entry is not
+ * an amount (`12`, `12.5` and `$12.50` are; `12.505` and `abc` are not).
+ */
+export declare function dollarsToCents(input: string): number | null;