@aglyn/plugins-commerce 1.0.0-beta.250 → 1.0.0-beta.252

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

@@ -0,0 +1,174 @@
+/**
+ * @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 { Button, Dialog, DialogActions, DialogContent, DialogTitle, ToggleButton, ToggleButtonGroup, Typography } from "@mui/material";
+import { useCallback, useState } from "react";
+import * as CommerceModel from "../../../model/index.js";
+import { posDisplayCall, PosRequestError } from "./pos-api.js";
+/**
+ * A fresh six-digit code that pairs a tablet to one register, as a customer
+ * display or a self-service kiosk (AGL-3608, AGL-3623). The server holds the
+ * gate: the register's role and `managePos` checks and the plan's `pos`.
+ */ export function requestPosPairingCode(user, hostId, registerId, mode = 'display') {
+    return posDisplayCall(user, {
+        action: 'pairing-code',
+        hostId,
+        registerId,
+        mode
+    });
+}
+/** The address a tablet opens to enter the code. */ export function posPairingAddress(mode) {
+    const origin = typeof window === 'undefined' ? '' : window.location.origin;
+    return `${origin}/kiosk/commerce/${mode === 'kiosk' ? 'pos-kiosk' : 'pos-display'}`;
+}
+const TTL_MINUTES = Math.round(CommerceModel.POS_DISPLAY_PAIRING_TTL_MS / 60000);
+/** The code, the address to enter it at, and the display-or-kiosk choice. */ export function PosPairingDialog({ pairing, onModeChange, onClose }) {
+    var _ref;
+    const mode = (_ref = pairing == null ? void 0 : pairing.mode) != null ? _ref : 'display';
+    return /*#__PURE__*/ _jsxs(Dialog, {
+        open: Boolean(pairing),
+        onClose: onClose,
+        maxWidth: "xs",
+        fullWidth: true,
+        children: [
+            /*#__PURE__*/ _jsxs(DialogTitle, {
+                children: [
+                    mode === 'kiosk' ? 'Pair a self-service kiosk' : 'Pair a customer display',
+                    (pairing == null ? void 0 : pairing.registerName) ? /*#__PURE__*/ _jsx(Typography, {
+                        component: "span",
+                        variant: "body2",
+                        color: "text.secondary",
+                        sx: {
+                            display: 'block'
+                        },
+                        children: `For ${pairing.registerName}`
+                    }) : null
+                ]
+            }),
+            /*#__PURE__*/ _jsxs(DialogContent, {
+                sx: {
+                    display: 'flex',
+                    flexDirection: 'column',
+                    gap: 2
+                },
+                children: [
+                    /*#__PURE__*/ _jsxs(ToggleButtonGroup, {
+                        exclusive: true,
+                        fullWidth: true,
+                        size: "small",
+                        value: mode,
+                        onChange: (_event, next)=>{
+                            if (next && next !== mode) onModeChange(next);
+                        },
+                        sx: {
+                            mt: 1
+                        },
+                        children: [
+                            /*#__PURE__*/ _jsx(ToggleButton, {
+                                value: "display",
+                                children: 'Customer display'
+                            }),
+                            /*#__PURE__*/ _jsx(ToggleButton, {
+                                value: "kiosk",
+                                children: 'Self-service kiosk'
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ _jsx(Typography, {
+                        variant: "body2",
+                        color: "text.secondary",
+                        children: (mode === 'kiosk' ? 'On the tablet customers order from, open this address and enter the code. ' : 'On the tablet facing your customer, open this address and enter the code. ') + `The code works once and expires in ${TTL_MINUTES} minutes.`
+                    }),
+                    /*#__PURE__*/ _jsx(Typography, {
+                        variant: "body1",
+                        sx: {
+                            wordBreak: 'break-all'
+                        },
+                        children: posPairingAddress(mode)
+                    }),
+                    /*#__PURE__*/ _jsx(Typography, {
+                        variant: "h3",
+                        component: "p",
+                        sx: {
+                            textAlign: 'center',
+                            letterSpacing: 8
+                        },
+                        children: pairing == null ? void 0 : pairing.code
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsx(DialogActions, {
+                children: /*#__PURE__*/ _jsx(Button, {
+                    onClick: onClose,
+                    children: 'Done'
+                })
+            })
+        ]
+    });
+}
+PosPairingDialog.displayName = 'PosPairingDialog';
+/**
+ * The one pairing flow, for the register and the POS devices card alike:
+ * `open(registerId)` asks for a code and shows it; switching between
+ * customer display and kiosk asks for a code of that kind. Render `dialog`.
+ */ export function usePosPairing({ user, hostId, onError }) {
+    const [pairing, setPairing] = useState(null);
+    const open = useCallback(async (registerId, mode = 'display', registerName)=>{
+        if (!user || !registerId) return;
+        try {
+            const answer = await requestPosPairingCode(user, hostId, registerId, mode);
+            setPairing(_extends({}, answer, {
+                registerId,
+                mode
+            }, registerName ? {
+                registerName
+            } : {}));
+        } catch (error) {
+            onError(error instanceof PosRequestError ? error.message : 'Could not make a code');
+        }
+    }, [
+        user,
+        hostId,
+        onError
+    ]);
+    const close = useCallback(()=>setPairing(null), []);
+    const dialog = /*#__PURE__*/ _jsx(PosPairingDialog, {
+        pairing: pairing,
+        onClose: close,
+        onModeChange: (mode)=>{
+            if (pairing) void open(pairing.registerId, mode, pairing.registerName);
+        }
+    });
+    return {
+        pairing,
+        open,
+        close,
+        dialog
+    };
+}
+/** The element id the POS registers card carries, for a link that lands on it. */ export const POS_REGISTERS_ANCHOR = 'pos-registers';
+/**
+ * Where a register is created — the POS registers card, on Products → Point
+ * of sale (`…/products/pos`, AGL-3713) — from the register page's own console
+ * path (`…/pos`). Undefined when that path is not the register's.
+ */ export function posRegistersSettingsHref(posBasePath) {
+    if (!posBasePath || !/\/pos\/?$/.test(posBasePath)) return undefined;
+    return `${posBasePath.replace(/\/pos\/?$/, '/products/pos')}#${POS_REGISTERS_ANCHOR}`;
+}
+
+//# sourceMappingURL=pos-pairing.component.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../../../libs/plugins/commerce/src/lib/components/console/pos/pos-pairing.component.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 {\n  Button,\n  Dialog,\n  DialogActions,\n  DialogContent,\n  DialogTitle,\n  ToggleButton,\n  ToggleButtonGroup,\n  Typography,\n} from '@mui/material'\nimport { useCallback, useState, type ReactNode } from 'react'\nimport * as CommerceModel from '../../../model'\nimport { posDisplayCall, PosRequestError } from './pos-api'\n\ntype User = Parameters<typeof posDisplayCall>[0]\n\n/** A code on screen, and the register and kind of device it pairs. */\nexport interface PosPairingState {\n  registerId: string\n  registerName?: string\n  mode: CommerceModel.PosDeviceMode\n  code: string\n  expiresAtMs: number\n}\n\n/**\n * A fresh six-digit code that pairs a tablet to one register, as a customer\n * display or a self-service kiosk (AGL-3608, AGL-3623). The server holds the\n * gate: the register's role and `managePos` checks and the plan's `pos`.\n */\nexport function requestPosPairingCode(\n  user: User,\n  hostId: string,\n  registerId: string,\n  mode: CommerceModel.PosDeviceMode = 'display',\n): Promise<{ code: string; expiresAtMs: number }> {\n  return posDisplayCall<{ code: string; expiresAtMs: number }>(user, {\n    action: 'pairing-code',\n    hostId,\n    registerId,\n    mode,\n  })\n}\n\n/** The address a tablet opens to enter the code. */\nexport function posPairingAddress(mode: CommerceModel.PosDeviceMode): string {\n  const origin = typeof window === 'undefined' ? '' : window.location.origin\n  return `${origin}/kiosk/commerce/${mode === 'kiosk' ? 'pos-kiosk' : 'pos-display'}`\n}\n\nconst TTL_MINUTES = Math.round(CommerceModel.POS_DISPLAY_PAIRING_TTL_MS / 60_000)\n\nexport interface PosPairingDialogProps {\n  pairing: PosPairingState | null\n  onModeChange: (mode: CommerceModel.PosDeviceMode) => void\n  onClose: () => void\n}\n\n/** The code, the address to enter it at, and the display-or-kiosk choice. */\nexport function PosPairingDialog({ pairing, onModeChange, onClose }: PosPairingDialogProps) {\n  const mode = pairing?.mode ?? 'display'\n  return (\n    <Dialog open={Boolean(pairing)} onClose={onClose} maxWidth=\"xs\" fullWidth>\n      <DialogTitle>\n        {mode === 'kiosk' ? 'Pair a self-service kiosk' : 'Pair a customer display'}\n        {pairing?.registerName ? (\n          <Typography component=\"span\" variant=\"body2\" color=\"text.secondary\" sx={{ display: 'block' }}>\n            {`For ${pairing.registerName}`}\n          </Typography>\n        ) : null}\n      </DialogTitle>\n      <DialogContent sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>\n        <ToggleButtonGroup\n          exclusive\n          fullWidth\n          size=\"small\"\n          value={mode}\n          onChange={(_event, next: CommerceModel.PosDeviceMode | null) => {\n            if (next && next !== mode) onModeChange(next)\n          }}\n          sx={{ mt: 1 }}\n        >\n          <ToggleButton value=\"display\">{'Customer display'}</ToggleButton>\n          <ToggleButton value=\"kiosk\">{'Self-service kiosk'}</ToggleButton>\n        </ToggleButtonGroup>\n        <Typography variant=\"body2\" color=\"text.secondary\">\n          {(mode === 'kiosk'\n            ? 'On the tablet customers order from, open this address and enter the code. '\n            : 'On the tablet facing your customer, open this address and enter the code. ') +\n            `The code works once and expires in ${TTL_MINUTES} minutes.`}\n        </Typography>\n        <Typography variant=\"body1\" sx={{ wordBreak: 'break-all' }}>\n          {posPairingAddress(mode)}\n        </Typography>\n        <Typography variant=\"h3\" component=\"p\" sx={{ textAlign: 'center', letterSpacing: 8 }}>\n          {pairing?.code}\n        </Typography>\n      </DialogContent>\n      <DialogActions>\n        <Button onClick={onClose}>{'Done'}</Button>\n      </DialogActions>\n    </Dialog>\n  )\n}\nPosPairingDialog.displayName = 'PosPairingDialog'\n\nexport interface UsePosPairingOptions {\n  user: User | null | undefined\n  hostId: string\n  /** Told the reason a code could not be made. */\n  onError: (message: string) => void\n}\n\n/**\n * The one pairing flow, for the register and the POS devices card alike:\n * `open(registerId)` asks for a code and shows it; switching between\n * customer display and kiosk asks for a code of that kind. Render `dialog`.\n */\nexport function usePosPairing({ user, hostId, onError }: UsePosPairingOptions): {\n  pairing: PosPairingState | null\n  open: (registerId: string, mode?: CommerceModel.PosDeviceMode, registerName?: string) => Promise<void>\n  close: () => void\n  dialog: ReactNode\n} {\n  const [pairing, setPairing] = useState<PosPairingState | null>(null)\n\n  const open = useCallback(\n    async (registerId: string, mode: CommerceModel.PosDeviceMode = 'display', registerName?: string) => {\n      if (!user || !registerId) return\n      try {\n        const answer = await requestPosPairingCode(user, hostId, registerId, mode)\n        setPairing({ ...answer, registerId, mode, ...(registerName ? { registerName } : {}) })\n      } catch (error) {\n        onError(error instanceof PosRequestError ? error.message : 'Could not make a code')\n      }\n    },\n    [user, hostId, onError],\n  )\n  const close = useCallback(() => setPairing(null), [])\n\n  const dialog = (\n    <PosPairingDialog\n      pairing={pairing}\n      onClose={close}\n      onModeChange={(mode) => {\n        if (pairing) void open(pairing.registerId, mode, pairing.registerName)\n      }}\n    />\n  )\n  return { pairing, open, close, dialog }\n}\n\n/** The element id the POS registers card carries, for a link that lands on it. */\nexport const POS_REGISTERS_ANCHOR = 'pos-registers'\n\n/**\n * Where a register is created — the POS registers card, on Products → Point\n * of sale (`…/products/pos`, AGL-3713) — from the register page's own console\n * path (`…/pos`). Undefined when that path is not the register's.\n */\nexport function posRegistersSettingsHref(posBasePath: string | undefined): string | undefined {\n  if (!posBasePath || !/\\/pos\\/?$/.test(posBasePath)) return undefined\n  return `${posBasePath.replace(/\\/pos\\/?$/, '/products/pos')}#${POS_REGISTERS_ANCHOR}`\n}\n"],"names":["Button","Dialog","DialogActions","DialogContent","DialogTitle","ToggleButton","ToggleButtonGroup","Typography","useCallback","useState","CommerceModel","posDisplayCall","PosRequestError","requestPosPairingCode","user","hostId","registerId","mode","action","posPairingAddress","origin","window","location","TTL_MINUTES","Math","round","POS_DISPLAY_PAIRING_TTL_MS","PosPairingDialog","pairing","onModeChange","onClose","open","Boolean","maxWidth","fullWidth","registerName","component","variant","color","sx","display","flexDirection","gap","exclusive","size","value","onChange","_event","next","mt","wordBreak","textAlign","letterSpacing","code","onClick","displayName","usePosPairing","onError","setPairing","answer","error","message","close","dialog","POS_REGISTERS_ANCHOR","posRegistersSettingsHref","posBasePath","test","undefined","replace"],"mappings":"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"}

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

@@ -27,14 +27,6 @@ export interface PosDisplayControl {
      */
     ask: (state: Omit<CommerceModel.PosDisplayState, 'updatedAtMs' | 'promptId'>) => Promise<CommerceModel.PosDisplayResponse | null>;
     cancelAsk: () => void;
-    /**
-     * A fresh six-digit pairing code for a new customer display, or for a
-     * self-service kiosk (AGL-3623).
-     */
-    pairingCode: (mode?: CommerceModel.PosDeviceMode) => Promise<{
-        code: string;
-        expiresAtMs: number;
-    }>;
 }
 /**
  * The register's half of the customer display (AGL-3608). It writes the

package/src/lib/components/console/pos/use-pos-display.js

@@ -135,27 +135,13 @@ import { newAttemptKey, posDisplayCall } from "./pos-api.js";
         hostId,
         registerId
     ]);
-    const pairingCode = useCallback(async (mode = 'display')=>{
-        if (!user) throw new Error('Not signed in');
-        const result = await posDisplayCall(user, {
-            action: 'pairing-code',
-            hostId,
-            registerId,
-            mode
-        });
-        return result;
-    }, [
-        user,
-        hostId,
-        registerId
-    ]);
+    // Pairing a new display is `usePosPairing` (AGL-3712), shared with the devices card.
     return {
         connected,
         asking,
         show,
         ask,
-        cancelAsk,
-        pairingCode
+        cancelAsk
     };
 }
 

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../../../../libs/plugins/commerce/src/lib/components/console/pos/use-pos-display.ts"],"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 { useCallback, useEffect, useRef, useState } from 'react'\nimport type * as CommerceModel from '../../../model'\nimport { newAttemptKey, posDisplayCall } from './pos-api'\n\ntype User = Parameters<typeof posDisplayCall>[0]\n\n/**\n * The tip the customer screen shows beside the sale (AGL-3608): the tips\n * already on its payments, plus one chosen for the payment about to be taken\n * (on the display or by the cashier), which the ledger does not hold until\n * that payment is recorded. Without the second part the screen read the\n * sale's total right after the customer added a tip, short by that tip.\n */\nexport function posDisplayTipCents(\n  sale: { status: string; tipCents: number } | null | undefined,\n  pendingTipCents: number,\n): number {\n  if (!sale) return 0\n  const pending = sale.status === 'paid' ? 0 : Math.max(0, Math.round(pendingTipCents) || 0)\n  return Math.max(0, sale.tipCents) + pending\n}\n\n/** How long the register waits for the customer to answer a prompt. */\nexport const POS_DISPLAY_ANSWER_TIMEOUT_MS = 3 * 60 * 1000\n\nexport interface PosDisplayControl {\n  /** A display for this register polled within the last two minutes. */\n  connected: boolean\n  /** The prompt the register is waiting on, if any. */\n  asking: CommerceModel.PosDisplayMode | null\n  /** Shows something on the display with no answer expected. */\n  show: (state: Omit<CommerceModel.PosDisplayState, 'updatedAtMs' | 'promptId'>) => Promise<void>\n  /**\n   * Asks the customer (a tip or a receipt) and resolves with their answer,\n   * or null when the cashier cancels or the customer does not answer.\n   */\n  ask: (\n    state: Omit<CommerceModel.PosDisplayState, 'updatedAtMs' | 'promptId'>,\n  ) => Promise<CommerceModel.PosDisplayResponse | null>\n  cancelAsk: () => void\n  /**\n   * A fresh six-digit pairing code for a new customer display, or for a\n   * self-service kiosk (AGL-3623).\n   */\n  pairingCode: (mode?: CommerceModel.PosDeviceMode) => Promise<{ code: string; expiresAtMs: number }>\n}\n\n/**\n * The register's half of the customer display (AGL-3608). It writes the\n * display's state through `commerce/pos-display` and reads answers back the\n * same way; nothing here talks to Firestore, because the display state is\n * server-only (it can hold a customer's typed email address).\n */\nexport function usePosDisplay(\n  user: User | null | undefined,\n  hostId: string,\n  registerId: string,\n): PosDisplayControl {\n  const [connected, setConnected] = useState(false)\n  const [asking, setAsking] = useState<CommerceModel.PosDisplayMode | null>(null)\n  const cancelRef = useRef<(() => void) | null>(null)\n  // The poll reads the latest session through a ref and is keyed on the uid,\n  // so a refreshed user object does not restart it.\n  const userRef = useRef(user)\n  userRef.current = user\n  const uid = (user as { uid?: string } | null | undefined)?.uid ?? ''\n\n  useEffect(() => {\n    if (!uid || !registerId) return undefined\n    let active = true\n    const check = async () => {\n      const signedIn = userRef.current\n      if (!signedIn) return\n      try {\n        const result = await posDisplayCall<{ connected: boolean }>(\n          signedIn,\n          { action: 'state', hostId, registerId },\n          'GET',\n        )\n        if (active) setConnected(Boolean(result.connected))\n      } catch {\n        if (active) setConnected(false)\n      }\n    }\n    void check()\n    const timer = setInterval(check, 15_000)\n    return () => {\n      active = false\n      clearInterval(timer)\n    }\n  }, [uid, hostId, registerId])\n\n  const show = useCallback<PosDisplayControl['show']>(\n    async (state) => {\n      if (!user || !registerId || !connected) return\n      await posDisplayCall(user, { action: 'push', hostId, registerId, state }).catch(() => undefined)\n    },\n    [user, hostId, registerId, connected],\n  )\n\n  const cancelAsk = useCallback(() => {\n    cancelRef.current?.()\n  }, [])\n\n  const ask = useCallback<PosDisplayControl['ask']>(\n    async (state) => {\n      if (!user || !registerId) return null\n      cancelRef.current?.()\n      const promptId = newAttemptKey().slice(0, 32)\n      await posDisplayCall(user, {\n        action: 'push',\n        hostId,\n        registerId,\n        state: { ...state, promptId },\n      })\n      setAsking(state.mode)\n      return await new Promise<CommerceModel.PosDisplayResponse | null>((resolve) => {\n        let done = false\n        const finish = (answer: CommerceModel.PosDisplayResponse | null) => {\n          if (done) return\n          done = true\n          clearInterval(timer)\n          clearTimeout(timeout)\n          cancelRef.current = null\n          setAsking(null)\n          resolve(answer)\n        }\n        const timer = setInterval(async () => {\n          try {\n            const result = await posDisplayCall<{\n              state: CommerceModel.PosDisplayState | null\n            }>(user, { action: 'state', hostId, registerId }, 'GET')\n            const response = result.state?.response\n            if (response && response.promptId === promptId) finish(response)\n          } catch {\n            // A missed poll is retried on the next tick.\n          }\n        }, 1000)\n        const timeout = setTimeout(() => finish(null), POS_DISPLAY_ANSWER_TIMEOUT_MS)\n        cancelRef.current = () => finish(null)\n      })\n    },\n    [user, hostId, registerId],\n  )\n\n  const pairingCode = useCallback(async (mode: CommerceModel.PosDeviceMode = 'display') => {\n    if (!user) throw new Error('Not signed in')\n    const result = await posDisplayCall<{ code: string; expiresAtMs: number }>(user, {\n      action: 'pairing-code',\n      hostId,\n      registerId,\n      mode,\n    })\n    return result\n  }, [user, hostId, registerId])\n\n  return { connected, asking, show, ask, cancelAsk, pairingCode }\n}\n"],"names":["useCallback","useEffect","useRef","useState","newAttemptKey","posDisplayCall","posDisplayTipCents","sale","pendingTipCents","pending","status","Math","max","round","tipCents","POS_DISPLAY_ANSWER_TIMEOUT_MS","usePosDisplay","user","hostId","registerId","connected","setConnected","asking","setAsking","cancelRef","userRef","current","uid","undefined","active","check","signedIn","result","action","Boolean","timer","setInterval","clearInterval","show","state","catch","cancelAsk","ask","promptId","slice","mode","Promise","resolve","done","finish","answer","clearTimeout","timeout","response","setTimeout","pairingCode","Error"],"mappings":"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"}
+{"version":3,"sources":["../../../../../../../../../libs/plugins/commerce/src/lib/components/console/pos/use-pos-display.ts"],"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 { useCallback, useEffect, useRef, useState } from 'react'\nimport type * as CommerceModel from '../../../model'\nimport { newAttemptKey, posDisplayCall } from './pos-api'\n\ntype User = Parameters<typeof posDisplayCall>[0]\n\n/**\n * The tip the customer screen shows beside the sale (AGL-3608): the tips\n * already on its payments, plus one chosen for the payment about to be taken\n * (on the display or by the cashier), which the ledger does not hold until\n * that payment is recorded. Without the second part the screen read the\n * sale's total right after the customer added a tip, short by that tip.\n */\nexport function posDisplayTipCents(\n  sale: { status: string; tipCents: number } | null | undefined,\n  pendingTipCents: number,\n): number {\n  if (!sale) return 0\n  const pending = sale.status === 'paid' ? 0 : Math.max(0, Math.round(pendingTipCents) || 0)\n  return Math.max(0, sale.tipCents) + pending\n}\n\n/** How long the register waits for the customer to answer a prompt. */\nexport const POS_DISPLAY_ANSWER_TIMEOUT_MS = 3 * 60 * 1000\n\nexport interface PosDisplayControl {\n  /** A display for this register polled within the last two minutes. */\n  connected: boolean\n  /** The prompt the register is waiting on, if any. */\n  asking: CommerceModel.PosDisplayMode | null\n  /** Shows something on the display with no answer expected. */\n  show: (state: Omit<CommerceModel.PosDisplayState, 'updatedAtMs' | 'promptId'>) => Promise<void>\n  /**\n   * Asks the customer (a tip or a receipt) and resolves with their answer,\n   * or null when the cashier cancels or the customer does not answer.\n   */\n  ask: (\n    state: Omit<CommerceModel.PosDisplayState, 'updatedAtMs' | 'promptId'>,\n  ) => Promise<CommerceModel.PosDisplayResponse | null>\n  cancelAsk: () => void\n}\n\n/**\n * The register's half of the customer display (AGL-3608). It writes the\n * display's state through `commerce/pos-display` and reads answers back the\n * same way; nothing here talks to Firestore, because the display state is\n * server-only (it can hold a customer's typed email address).\n */\nexport function usePosDisplay(\n  user: User | null | undefined,\n  hostId: string,\n  registerId: string,\n): PosDisplayControl {\n  const [connected, setConnected] = useState(false)\n  const [asking, setAsking] = useState<CommerceModel.PosDisplayMode | null>(null)\n  const cancelRef = useRef<(() => void) | null>(null)\n  // The poll reads the latest session through a ref and is keyed on the uid,\n  // so a refreshed user object does not restart it.\n  const userRef = useRef(user)\n  userRef.current = user\n  const uid = (user as { uid?: string } | null | undefined)?.uid ?? ''\n\n  useEffect(() => {\n    if (!uid || !registerId) return undefined\n    let active = true\n    const check = async () => {\n      const signedIn = userRef.current\n      if (!signedIn) return\n      try {\n        const result = await posDisplayCall<{ connected: boolean }>(\n          signedIn,\n          { action: 'state', hostId, registerId },\n          'GET',\n        )\n        if (active) setConnected(Boolean(result.connected))\n      } catch {\n        if (active) setConnected(false)\n      }\n    }\n    void check()\n    const timer = setInterval(check, 15_000)\n    return () => {\n      active = false\n      clearInterval(timer)\n    }\n  }, [uid, hostId, registerId])\n\n  const show = useCallback<PosDisplayControl['show']>(\n    async (state) => {\n      if (!user || !registerId || !connected) return\n      await posDisplayCall(user, { action: 'push', hostId, registerId, state }).catch(() => undefined)\n    },\n    [user, hostId, registerId, connected],\n  )\n\n  const cancelAsk = useCallback(() => {\n    cancelRef.current?.()\n  }, [])\n\n  const ask = useCallback<PosDisplayControl['ask']>(\n    async (state) => {\n      if (!user || !registerId) return null\n      cancelRef.current?.()\n      const promptId = newAttemptKey().slice(0, 32)\n      await posDisplayCall(user, {\n        action: 'push',\n        hostId,\n        registerId,\n        state: { ...state, promptId },\n      })\n      setAsking(state.mode)\n      return await new Promise<CommerceModel.PosDisplayResponse | null>((resolve) => {\n        let done = false\n        const finish = (answer: CommerceModel.PosDisplayResponse | null) => {\n          if (done) return\n          done = true\n          clearInterval(timer)\n          clearTimeout(timeout)\n          cancelRef.current = null\n          setAsking(null)\n          resolve(answer)\n        }\n        const timer = setInterval(async () => {\n          try {\n            const result = await posDisplayCall<{\n              state: CommerceModel.PosDisplayState | null\n            }>(user, { action: 'state', hostId, registerId }, 'GET')\n            const response = result.state?.response\n            if (response && response.promptId === promptId) finish(response)\n          } catch {\n            // A missed poll is retried on the next tick.\n          }\n        }, 1000)\n        const timeout = setTimeout(() => finish(null), POS_DISPLAY_ANSWER_TIMEOUT_MS)\n        cancelRef.current = () => finish(null)\n      })\n    },\n    [user, hostId, registerId],\n  )\n\n  // Pairing a new display is `usePosPairing` (AGL-3712), shared with the devices card.\n  return { connected, asking, show, ask, cancelAsk }\n}\n"],"names":["useCallback","useEffect","useRef","useState","newAttemptKey","posDisplayCall","posDisplayTipCents","sale","pendingTipCents","pending","status","Math","max","round","tipCents","POS_DISPLAY_ANSWER_TIMEOUT_MS","usePosDisplay","user","hostId","registerId","connected","setConnected","asking","setAsking","cancelRef","userRef","current","uid","undefined","active","check","signedIn","result","action","Boolean","timer","setInterval","clearInterval","show","state","catch","cancelAsk","ask","promptId","slice","mode","Promise","resolve","done","finish","answer","clearTimeout","timeout","response","setTimeout"],"mappings":"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"}

package/src/lib/components/console/pos-devices-card.component.d.ts

@@ -1,13 +1,24 @@
 export interface PosDevicesCardProps {
     hostId: string;
+    /**
+     * Whether the viewer may work this site's register: `managePos`, as the
+     * shell resolved it, on a site role that may run it (admin or editor).
+     * Pairing a tablet is refused by the server otherwise, so the card says why
+     * rather than offering a button that fails. Absent reads as not allowed.
+     */
+    canManagePos?: boolean;
 }
 /**
  * The register's hardware (AGL-3607, AGL-3608): Stripe Terminal card readers
  * — registered with the code a reader shows, bound to a register, renamed,
  * removed — and the customer displays paired to each register, which can be
  * signed out. Readers appear only where card readers are offered at all.
+ *
+ * Each register pairs a new customer display or self-service kiosk here,
+ * through the same flow as the register's own Pair display (AGL-3712); a site
+ * with no register is sent to the card that makes one.
  */
-export declare function PosDevicesCard({ hostId }: PosDevicesCardProps): import("react").JSX.Element;
+export declare function PosDevicesCard({ hostId, canManagePos }: PosDevicesCardProps): import("react").JSX.Element;
 export declare namespace PosDevicesCard {
     var displayName: string;
 }

package/src/lib/components/console/pos-devices-card.component.js

@@ -15,15 +15,17 @@
  * 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 { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import * as Aglyn from "@aglyn/aglyn";
 import { pluginDocsHelp } from "@aglyn/aglyn";
 import { CardDisplay, useConfirmationContext } from "@aglyn/shared-ui-jsx";
 import { useSnackbar } from "@aglyn/shared-ui-snackstack";
-import { useFirestore, useFirestoreCollection, useUser } from "@aglyn/tenant-feature-instance";
+import { useFirestore, useFirestoreCollection, useOrgPlan, useUser } from "@aglyn/tenant-feature-instance";
 import { Box, Button, Chip, Dialog, DialogActions, DialogContent, DialogTitle, MenuItem, Stack, TextField, Typography } from "@mui/material";
 import { collection, limit, query } from "firebase/firestore";
 import { useCallback, useEffect, useState } from "react";
 import { posDisplayCall, posReadersCall, PosRequestError } from "./pos/pos-api.js";
+import { POS_REGISTERS_ANCHOR, usePosPairing } from "./pos/pos-pairing.component.js";
 const EMPTY_ADDRESS = {
     line1: '',
     line2: '',
@@ -37,7 +39,11 @@ const EMPTY_ADDRESS = {
  * — registered with the code a reader shows, bound to a register, renamed,
  * removed — and the customer displays paired to each register, which can be
  * signed out. Readers appear only where card readers are offered at all.
- */ export function PosDevicesCard({ hostId }) {
+ *
+ * Each register pairs a new customer display or self-service kiosk here,
+ * through the same flow as the register's own Pair display (AGL-3712); a site
+ * with no register is sent to the card that makes one.
+ */ export function PosDevicesCard({ hostId, canManagePos = false }) {
     var _ref, _ref1, _ref2;
     const firestore = useFirestore();
     const { data: user } = useUser();
@@ -49,6 +55,8 @@ const EMPTY_ADDRESS = {
     ], {
         idField: '$id'
     });
+    // Not "no registers" until the listen has answered.
+    const noRegisters = registerDocs !== undefined && registerDocs.length === 0;
     const registers = [
         ...registerDocs != null ? registerDocs : []
     ].sort((a, b)=>{
@@ -64,12 +72,26 @@ const EMPTY_ADDRESS = {
     const [address, setAddress] = useState(EMPTY_ADDRESS);
     const [busy, setBusy] = useState(false);
     const [renaming, setRenaming] = useState(null);
+    const { org, ready: planReady } = useOrgPlan(hostId);
+    const posEntitled = planReady && Aglyn.checkEntitlement(org, 'pos');
     const notify = useCallback((error, fallback)=>enqueueSnackbar(error instanceof PosRequestError ? error.message : fallback, {
             variant: 'warning',
             persist: false
         }), [
         enqueueSnackbar
     ]);
+    const onPairingError = useCallback((message)=>enqueueSnackbar(message, {
+            variant: 'warning',
+            persist: false
+        }), [
+        enqueueSnackbar
+    ]);
+    const pairingFlow = usePosPairing({
+        user,
+        hostId,
+        onError: onPairingError
+    });
+    /** Why pairing is not offered to this viewer, or null when it is. */ const pairBlocked = !planReady ? 'Checking your plan…' : !posEntitled ? 'Point of Sale is not on your plan. Upgrade in Billing to pair displays and kiosks.' : !canManagePos ? 'Only an admin or editor with the "Use the point of sale" permission can pair displays and kiosks.' : null;
     const load = useCallback(async (refresh = false)=>{
         if (!user) return;
         try {
@@ -159,11 +181,22 @@ const EMPTY_ADDRESS = {
         help: pluginDocsHelp('pos', {
             anchor: '#card-readers'
         }),
-        HeaderProps: showReaders ? {
-            action: /*#__PURE__*/ _jsx(Button, {
-                size: "small",
-                onClick: ()=>setAdding(true),
-                children: 'Add card reader'
+        HeaderProps: showReaders || noRegisters ? {
+            action: /*#__PURE__*/ _jsxs(Stack, {
+                direction: "row",
+                spacing: 1,
+                children: [
+                    noRegisters ? /*#__PURE__*/ _jsx(Button, {
+                        size: "small",
+                        href: `#${POS_REGISTERS_ANCHOR}`,
+                        children: 'Add a register'
+                    }) : null,
+                    showReaders ? /*#__PURE__*/ _jsx(Button, {
+                        size: "small",
+                        onClick: ()=>setAdding(true),
+                        children: 'Add card reader'
+                    }) : null
+                ]
             })
         } : undefined,
         contentGutterX: true,
@@ -294,58 +327,97 @@ const EMPTY_ADDRESS = {
                                 variant: "subtitle2",
                                 children: 'Customer displays and kiosks'
                             }),
-                            /*#__PURE__*/ _jsx(Typography, {
+                            noRegisters ? /*#__PURE__*/ _jsx(Typography, {
                                 variant: "body2",
                                 color: "text.secondary",
-                                children: 'Pair a tablet from the register: tap Pair display, choose Customer display or Self-service kiosk, and enter the code on the tablet.'
-                            }),
-                            registers.flatMap((register)=>{
-                                var _displays_register_$id;
-                                return ((_displays_register_$id = displays[register.$id]) != null ? _displays_register_$id : []).map((display)=>/*#__PURE__*/ _jsxs(Stack, {
-                                        direction: "row",
-                                        spacing: 1,
-                                        sx: {
-                                            alignItems: 'center'
-                                        },
-                                        children: [
-                                            /*#__PURE__*/ _jsx(Typography, {
-                                                variant: "body2",
-                                                sx: {
-                                                    flex: 1
-                                                },
-                                                children: `${display.label} · ${register.name}`
-                                            }),
-                                            /*#__PURE__*/ _jsx(Chip, {
-                                                size: "small",
-                                                label: Date.now() - display.lastSeenAtMs < 120000 ? 'Connected' : 'Not connected',
-                                                color: Date.now() - display.lastSeenAtMs < 120000 ? 'success' : 'default'
-                                            }),
-                                            /*#__PURE__*/ _jsx(Button, {
-                                                size: "small",
-                                                color: "error",
-                                                onClick: async ()=>{
-                                                    if (!user) return;
-                                                    try {
-                                                        await posDisplayCall(user, {
-                                                            action: 'revoke',
-                                                            hostId,
-                                                            registerId: register.$id,
-                                                            displayId: display.id
-                                                        });
-                                                        setDisplays((prev)=>{
-                                                            var _prev_register_$id;
-                                                            return _extends({}, prev, {
-                                                                [register.$id]: ((_prev_register_$id = prev[register.$id]) != null ? _prev_register_$id : []).filter((entry)=>entry.id !== display.id)
-                                                            });
-                                                        });
-                                                    } catch (error) {
-                                                        notify(error, 'The display could not be signed out');
-                                                    }
-                                                },
-                                                children: 'Sign out'
-                                            })
-                                        ]
-                                    }, `${register.$id}:${display.id}`));
+                                children: 'A display or kiosk pairs to a register. Add a register first.'
+                            }) : /*#__PURE__*/ _jsxs(_Fragment, {
+                                children: [
+                                    /*#__PURE__*/ _jsx(Typography, {
+                                        variant: "body2",
+                                        color: "text.secondary",
+                                        children: pairBlocked != null ? pairBlocked : 'Pair display gives you a code. Open the address it shows on the tablet and enter the code.'
+                                    }),
+                                    registers.map((register)=>{
+                                        var _displays_register_$id;
+                                        return /*#__PURE__*/ _jsxs(Stack, {
+                                            spacing: 0.5,
+                                            children: [
+                                                /*#__PURE__*/ _jsxs(Stack, {
+                                                    direction: "row",
+                                                    spacing: 1,
+                                                    sx: {
+                                                        alignItems: 'center'
+                                                    },
+                                                    children: [
+                                                        /*#__PURE__*/ _jsx(Typography, {
+                                                            variant: "body2",
+                                                            sx: {
+                                                                flex: 1,
+                                                                fontWeight: 'fontWeightMedium'
+                                                            },
+                                                            noWrap: true,
+                                                            children: register.name
+                                                        }),
+                                                        /*#__PURE__*/ _jsx(Button, {
+                                                            size: "small",
+                                                            disabled: Boolean(pairBlocked),
+                                                            onClick: ()=>void pairingFlow.open(register.$id, 'display', register.name),
+                                                            "aria-label": `Pair display to ${register.name}`,
+                                                            children: 'Pair display'
+                                                        })
+                                                    ]
+                                                }),
+                                                ((_displays_register_$id = displays[register.$id]) != null ? _displays_register_$id : []).map((display)=>/*#__PURE__*/ _jsxs(Stack, {
+                                                        direction: "row",
+                                                        spacing: 1,
+                                                        sx: {
+                                                            alignItems: 'center',
+                                                            pl: 2
+                                                        },
+                                                        children: [
+                                                            /*#__PURE__*/ _jsx(Typography, {
+                                                                variant: "body2",
+                                                                sx: {
+                                                                    flex: 1
+                                                                },
+                                                                children: display.label
+                                                            }),
+                                                            /*#__PURE__*/ _jsx(Chip, {
+                                                                size: "small",
+                                                                label: Date.now() - display.lastSeenAtMs < 120000 ? 'Connected' : 'Not connected',
+                                                                color: Date.now() - display.lastSeenAtMs < 120000 ? 'success' : 'default'
+                                                            }),
+                                                            /*#__PURE__*/ _jsx(Button, {
+                                                                size: "small",
+                                                                color: "error",
+                                                                onClick: async ()=>{
+                                                                    if (!user) return;
+                                                                    try {
+                                                                        await posDisplayCall(user, {
+                                                                            action: 'revoke',
+                                                                            hostId,
+                                                                            registerId: register.$id,
+                                                                            displayId: display.id
+                                                                        });
+                                                                        setDisplays((prev)=>{
+                                                                            var _prev_register_$id;
+                                                                            return _extends({}, prev, {
+                                                                                [register.$id]: ((_prev_register_$id = prev[register.$id]) != null ? _prev_register_$id : []).filter((entry)=>entry.id !== display.id)
+                                                                            });
+                                                                        });
+                                                                    } catch (error) {
+                                                                        notify(error, 'The display could not be signed out');
+                                                                    }
+                                                                },
+                                                                children: 'Sign out'
+                                                            })
+                                                        ]
+                                                    }, `${register.$id}:${display.id}`))
+                                            ]
+                                        }, register.$id);
+                                    })
+                                ]
                             })
                         ]
                     })
@@ -536,7 +608,8 @@ const EMPTY_ADDRESS = {
                         ]
                     })
                 ]
-            })
+            }),
+            pairingFlow.dialog
         ]
     });
 }