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

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

@@ -0,0 +1,140 @@
+/**
+ * @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 { _ as _extends } from "@swc/helpers/_/_extends";
+/**
+ * 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 const POS_DISPLAY_ENDPOINT = '/api/commerce/pos-display';
+/** Where the paired token lives on the device. */ export const POS_DISPLAY_TOKEN_KEY = 'aglyn.posDisplayToken';
+export const POS_DISPLAY_TOKEN_HEADER = 'X-Pos-Display-Token';
+export function readStoredToken() {
+    try {
+        return window.localStorage.getItem(POS_DISPLAY_TOKEN_KEY) || null;
+    } catch (unused) {
+        return null;
+    }
+}
+export function storeToken(token) {
+    try {
+        if (token) window.localStorage.setItem(POS_DISPLAY_TOKEN_KEY, token);
+        else window.localStorage.removeItem(POS_DISPLAY_TOKEN_KEY);
+    } catch (unused) {
+    // Storage blocked (a private window, a locked-down kiosk browser): the
+    // display still works until it reloads, then asks for a code again.
+    }
+}
+async function call(init, token) {
+    const headers = {};
+    if (token) headers[POS_DISPLAY_TOKEN_HEADER] = token;
+    if (init.method === 'POST') headers['Content-Type'] = 'application/json';
+    try {
+        const response = await fetch(init.method === 'GET' ? `${POS_DISPLAY_ENDPOINT}?${init.query}` : POS_DISPLAY_ENDPOINT, _extends({
+            method: init.method,
+            headers,
+            cache: 'no-store'
+        }, init.method === 'POST' ? {
+            body: JSON.stringify(init.body)
+        } : {}));
+        const payload = await response.json().catch(()=>null);
+        if (!response.ok) {
+            var _ref;
+            return {
+                ok: false,
+                status: response.status,
+                error: String((_ref = payload == null ? void 0 : payload['error']) != null ? _ref : 'Something went wrong. Try again.')
+            };
+        }
+        return {
+            ok: true,
+            status: response.status,
+            value: payload != null ? payload : {}
+        };
+    } catch (unused) {
+        // Offline or the request never landed: status 0, which the poll treats
+        // as "try again next tick" rather than as a reason to unpair.
+        return {
+            ok: false,
+            status: 0,
+            error: 'No connection. Trying again…'
+        };
+    }
+}
+export function pairDisplay(code) {
+    return call({
+        method: 'POST',
+        body: {
+            action: 'pair',
+            code,
+            label: 'Customer display'
+        }
+    }, null);
+}
+export function pollDisplay(token, withBranding) {
+    return call({
+        method: 'GET',
+        query: `action=poll${withBranding ? '&branding=true' : ''}`
+    }, token);
+}
+export function respondToDisplay(token, response) {
+    return call({
+        method: 'POST',
+        body: {
+            action: 'respond',
+            response
+        }
+    }, token);
+}
+export function forgetDisplay(token) {
+    return call({
+        method: 'POST',
+        body: {
+            action: 'forget'
+        }
+    }, token);
+}
+/**
+ * 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 function displayMoney(cents, currency) {
+    const code = String(currency || 'usd').toUpperCase();
+    const amount = Number(cents) || 0;
+    try {
+        var _format_resolvedOptions_maximumFractionDigits;
+        const format = new Intl.NumberFormat('en-US', {
+            style: 'currency',
+            currency: code
+        });
+        const digits = (_format_resolvedOptions_maximumFractionDigits = format.resolvedOptions().maximumFractionDigits) != null ? _format_resolvedOptions_maximumFractionDigits : 2;
+        return format.format(amount / 10 ** digits);
+    } catch (unused) {
+        return `${(amount / 100).toFixed(2)} ${code}`;
+    }
+}
+/**
+ * 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 function dollarsToCents(input) {
+    const cleaned = String(input != null ? input : '').trim().replace(/^\$/, '');
+    if (!/^\d+(\.\d{0,2})?$/.test(cleaned)) return null;
+    return Math.round(Number(cleaned) * 100);
+}
+
+//# sourceMappingURL=pos-display-api.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../../../libs/plugins/commerce/src/lib/components/console/pos-display/pos-display-api.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\nimport type * as CommerceModel from '../../../model'\n\n/**\n * The customer display's half of `/api/commerce/pos-display` (AGL-3608).\n *\n * Every call carries the DISPLAY token, never a staff session: the screen\n * faces the public, and the token opens one register's display state and\n * nothing else. The route answers 401 when the token is unknown or revoked,\n * which the page reads as \"pair again\".\n */\nexport const POS_DISPLAY_ENDPOINT = '/api/commerce/pos-display'\n\n/** Where the paired token lives on the device. */\nexport const POS_DISPLAY_TOKEN_KEY = 'aglyn.posDisplayToken'\n\nexport const POS_DISPLAY_TOKEN_HEADER = 'X-Pos-Display-Token'\n\n/** The store's look for the idle and thank-you screens. */\nexport interface PosDisplayBranding {\n  name: string\n  logoUrl: string | null\n  logoDarkUrl: string | null\n  message: string\n}\n\n/** The state as the route hands it to the display. */\nexport type PosDisplayPublicState = Omit<CommerceModel.PosDisplayState, 'response'> & {\n  answered: boolean\n}\n\n/** What the customer sends back for the current prompt. */\nexport interface PosDisplayAnswer {\n  promptId: string\n  tipChoice?: 'percent' | 'custom' | 'none'\n  tipPercent?: number\n  tipCents?: number\n  receiptChannel?: CommerceModel.PosReceiptChannel\n  email?: string\n  phone?: string\n  marketingOptIn?: boolean\n}\n\n/**\n * A call's outcome, with the status the page branches on: `value` when `ok`,\n * `error` when not. One flat shape rather than a union, because the\n * workspace compiles without `strict` and an `ok` check would not narrow one.\n */\nexport interface PosDisplayResult<T> {\n  ok: boolean\n  /** The HTTP status, or 0 when the request never landed. */\n  status: number\n  value?: T\n  error?: string\n}\n\nexport function readStoredToken(): string | null {\n  try {\n    return window.localStorage.getItem(POS_DISPLAY_TOKEN_KEY) || null\n  } catch {\n    return null\n  }\n}\n\nexport function storeToken(token: string | null): void {\n  try {\n    if (token) window.localStorage.setItem(POS_DISPLAY_TOKEN_KEY, token)\n    else window.localStorage.removeItem(POS_DISPLAY_TOKEN_KEY)\n  } catch {\n    // Storage blocked (a private window, a locked-down kiosk browser): the\n    // display still works until it reloads, then asks for a code again.\n  }\n}\n\nasync function call<T>(\n  init: { method: 'GET'; query: string } | { method: 'POST'; body: Record<string, unknown> },\n  token: string | null,\n): Promise<PosDisplayResult<T>> {\n  const headers: Record<string, string> = {}\n  if (token) headers[POS_DISPLAY_TOKEN_HEADER] = token\n  if (init.method === 'POST') headers['Content-Type'] = 'application/json'\n  try {\n    const response = await fetch(\n      init.method === 'GET' ? `${POS_DISPLAY_ENDPOINT}?${init.query}` : POS_DISPLAY_ENDPOINT,\n      {\n        method: init.method,\n        headers,\n        cache: 'no-store',\n        ...(init.method === 'POST' ? { body: JSON.stringify(init.body) } : {}),\n      },\n    )\n    const payload = (await response.json().catch(() => null)) as Record<string, unknown> | null\n    if (!response.ok) {\n      return {\n        ok: false,\n        status: response.status,\n        error: String(payload?.['error'] ?? 'Something went wrong. Try again.'),\n      }\n    }\n    return { ok: true, status: response.status, value: (payload ?? {}) as T }\n  } catch {\n    // Offline or the request never landed: status 0, which the poll treats\n    // as \"try again next tick\" rather than as a reason to unpair.\n    return { ok: false, status: 0, error: 'No connection. Trying again…' }\n  }\n}\n\nexport function pairDisplay(code: string) {\n  return call<{ token: string; branding: PosDisplayBranding }>(\n    { method: 'POST', body: { action: 'pair', code, label: 'Customer display' } },\n    null,\n  )\n}\n\nexport function pollDisplay(token: string, withBranding: boolean) {\n  return call<{ state: PosDisplayPublicState; branding?: PosDisplayBranding }>(\n    { method: 'GET', query: `action=poll${withBranding ? '&branding=true' : ''}` },\n    token,\n  )\n}\n\nexport function respondToDisplay(token: string, response: PosDisplayAnswer) {\n  return call<{ ok: true }>({ method: 'POST', body: { action: 'respond', response } }, token)\n}\n\nexport function forgetDisplay(token: string) {\n  return call<{ ok: true }>({ method: 'POST', body: { action: 'forget' } }, token)\n}\n\n/**\n * Minor units as the register shows them, in the store's currency (the\n * display state's `currency`; US dollars when a state predates it). A\n * zero-decimal currency (JPY) has no minor unit to divide out.\n */\nexport function displayMoney(cents: number, currency?: string | null): string {\n  const code = String(currency || 'usd').toUpperCase()\n  const amount = Number(cents) || 0\n  try {\n    const format = new Intl.NumberFormat('en-US', { style: 'currency', currency: code })\n    const digits = format.resolvedOptions().maximumFractionDigits ?? 2\n    return format.format(amount / 10 ** digits)\n  } catch {\n    return `${(amount / 100).toFixed(2)} ${code}`\n  }\n}\n\n/**\n * Dollars typed on the display as whole cents, or null when the entry is not\n * an amount (`12`, `12.5` and `$12.50` are; `12.505` and `abc` are not).\n */\nexport function dollarsToCents(input: string): number | null {\n  const cleaned = String(input ?? '').trim().replace(/^\\$/, '')\n  if (!/^\\d+(\\.\\d{0,2})?$/.test(cleaned)) return null\n  return Math.round(Number(cleaned) * 100)\n}\n"],"names":["POS_DISPLAY_ENDPOINT","POS_DISPLAY_TOKEN_KEY","POS_DISPLAY_TOKEN_HEADER","readStoredToken","window","localStorage","getItem","storeToken","token","setItem","removeItem","call","init","headers","method","response","fetch","query","cache","body","JSON","stringify","payload","json","catch","ok","status","error","String","value","pairDisplay","code","action","label","pollDisplay","withBranding","respondToDisplay","forgetDisplay","displayMoney","cents","currency","toUpperCase","amount","Number","format","Intl","NumberFormat","style","digits","resolvedOptions","maximumFractionDigits","toFixed","dollarsToCents","input","cleaned","trim","replace","test","Math","round"],"mappings":"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"}

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

@@ -0,0 +1,35 @@
+/**
+ * @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 * as CommerceModel from '../../../model';
+import type { PosDisplayAnswer } from './pos-display-api';
+type ReceiptPrompt = NonNullable<CommerceModel.PosDisplayState['receipt']>;
+/**
+ * The receipt prompt (AGL-3608). The channels are the register's offer; email
+ * and text ask for an address on this screen, and the marketing box is shown
+ * only when the store turned it on, unticked, the way checkout words it.
+ *
+ * What the customer types lives in this component only until it is sent:
+ * the inputs empty on submit, and the page unmounts this screen whenever the
+ * prompt moves on, so the next customer finds nothing of the last one's.
+ */
+export declare function PosDisplayReceiptScreen({ receipt, promptId, busy, onAnswer, }: {
+    receipt: ReceiptPrompt;
+    promptId: string;
+    busy: boolean;
+    onAnswer: (answer: PosDisplayAnswer) => void;
+}): import("react").JSX.Element;
+export {};

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

@@ -0,0 +1,200 @@
+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 Button from "@mui/material/Button";
+import Checkbox from "@mui/material/Checkbox";
+import FormControlLabel from "@mui/material/FormControlLabel";
+import Stack from "@mui/material/Stack";
+import TextField from "@mui/material/TextField";
+import Typography from "@mui/material/Typography";
+import { useState } from "react";
+import * as CommerceModel from "../../../model/index.js";
+import { posDisplayTouchSx } from "./tip-screen.js";
+const CHANNEL_LABELS = {
+    email: 'Email',
+    sms: 'Text',
+    print: 'Print',
+    none: 'No receipt'
+};
+/**
+ * The receipt prompt (AGL-3608). The channels are the register's offer; email
+ * and text ask for an address on this screen, and the marketing box is shown
+ * only when the store turned it on, unticked, the way checkout words it.
+ *
+ * What the customer types lives in this component only until it is sent:
+ * the inputs empty on submit, and the page unmounts this screen whenever the
+ * prompt moves on, so the next customer finds nothing of the last one's.
+ */ export function PosDisplayReceiptScreen({ receipt, promptId, busy, onAnswer }) {
+    const [entry, setEntry] = useState(null);
+    const [value, setValue] = useState('');
+    const [optIn, setOptIn] = useState(false);
+    const [problem, setProblem] = useState(null);
+    const reset = ()=>{
+        setEntry(null);
+        setValue('');
+        setOptIn(false);
+        setProblem(null);
+    };
+    const submit = (event)=>{
+        event.preventDefault();
+        if (entry === 'email') {
+            const email = CommerceModel.posDisplayEmail(value);
+            if (!email) {
+                setProblem('Enter an email address, like name@example.com.');
+                return;
+            }
+            const marketingOptIn = receipt.offerMarketing && optIn;
+            reset();
+            onAnswer(_extends({
+                promptId,
+                receiptChannel: 'email',
+                email
+            }, marketingOptIn ? {
+                marketingOptIn: true
+            } : {}));
+            return;
+        }
+        if (entry === 'sms') {
+            const phone = CommerceModel.posDisplayPhone(value);
+            if (!phone) {
+                setProblem('Enter a phone number with its area code.');
+                return;
+            }
+            reset();
+            onAnswer({
+                promptId,
+                receiptChannel: 'sms',
+                phone
+            });
+        }
+    };
+    if (entry) {
+        const email = entry === 'email';
+        return /*#__PURE__*/ _jsxs(Stack, {
+            component: "form",
+            onSubmit: submit,
+            spacing: 3,
+            sx: {
+                width: '100%'
+            },
+            children: [
+                /*#__PURE__*/ _jsx(Typography, {
+                    variant: "h3",
+                    component: "h1",
+                    sx: {
+                        textAlign: 'center'
+                    },
+                    children: email ? 'Email receipt' : 'Text receipt'
+                }),
+                /*#__PURE__*/ _jsx(TextField, {
+                    value: value,
+                    onChange: (event)=>{
+                        setValue(event.target.value);
+                        setProblem(null);
+                    },
+                    autoFocus: true,
+                    autoComplete: "off",
+                    type: email ? 'email' : 'tel',
+                    label: email ? 'Email' : 'Mobile number',
+                    error: Boolean(problem),
+                    helperText: problem != null ? problem : email ? 'For your receipt' : 'For your receipt by text',
+                    slotProps: {
+                        htmlInput: {
+                            inputMode: email ? 'email' : 'tel'
+                        }
+                    },
+                    sx: (theme)=>({
+                            '& input': theme.typography.h5
+                        })
+                }),
+                email && receipt.offerMarketing ? /*#__PURE__*/ _jsx(FormControlLabel, {
+                    control: /*#__PURE__*/ _jsx(Checkbox, {
+                        checked: optIn,
+                        onChange: (event)=>setOptIn(event.target.checked)
+                    }),
+                    label: /*#__PURE__*/ _jsx(Typography, {
+                        variant: "h6",
+                        children: "Email me news and offers"
+                    })
+                }) : null,
+                /*#__PURE__*/ _jsxs(Stack, {
+                    direction: "row",
+                    spacing: 2,
+                    children: [
+                        /*#__PURE__*/ _jsx(Button, {
+                            variant: "outlined",
+                            size: "large",
+                            fullWidth: true,
+                            disabled: busy,
+                            onClick: reset,
+                            sx: posDisplayTouchSx,
+                            children: "Back"
+                        }),
+                        /*#__PURE__*/ _jsx(Button, {
+                            type: "submit",
+                            variant: "contained",
+                            size: "large",
+                            fullWidth: true,
+                            disabled: busy || !value.trim(),
+                            sx: posDisplayTouchSx,
+                            children: "Send"
+                        })
+                    ]
+                })
+            ]
+        });
+    }
+    return /*#__PURE__*/ _jsxs(Stack, {
+        spacing: 3,
+        sx: {
+            width: '100%'
+        },
+        children: [
+            /*#__PURE__*/ _jsx(Typography, {
+                variant: "h3",
+                component: "h1",
+                sx: {
+                    textAlign: 'center'
+                },
+                children: "How would you like your receipt?"
+            }),
+            /*#__PURE__*/ _jsx(Stack, {
+                spacing: 2,
+                children: receipt.channels.map((channel)=>/*#__PURE__*/ _jsx(Button, {
+                        variant: channel === 'none' ? 'outlined' : 'contained',
+                        size: "large",
+                        fullWidth: true,
+                        disabled: busy,
+                        onClick: ()=>{
+                            if (channel === 'email' || channel === 'sms') {
+                                setEntry(channel);
+                                return;
+                            }
+                            onAnswer({
+                                promptId,
+                                receiptChannel: channel
+                            });
+                        },
+                        sx: posDisplayTouchSx,
+                        children: CHANNEL_LABELS[channel]
+                    }, channel))
+            })
+        ]
+    });
+}
+
+//# sourceMappingURL=receipt-screen.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../../../libs/plugins/commerce/src/lib/components/console/pos-display/receipt-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 Button from '@mui/material/Button'\nimport Checkbox from '@mui/material/Checkbox'\nimport FormControlLabel from '@mui/material/FormControlLabel'\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 * as CommerceModel from '../../../model'\nimport type { PosDisplayAnswer } from './pos-display-api'\nimport { posDisplayTouchSx } from './tip-screen'\n\ntype ReceiptPrompt = NonNullable<CommerceModel.PosDisplayState['receipt']>\n\nconst CHANNEL_LABELS: Record<CommerceModel.PosReceiptChannel, string> = {\n  email: 'Email',\n  sms: 'Text',\n  print: 'Print',\n  none: 'No receipt',\n}\n\n/**\n * The receipt prompt (AGL-3608). The channels are the register's offer; email\n * and text ask for an address on this screen, and the marketing box is shown\n * only when the store turned it on, unticked, the way checkout words it.\n *\n * What the customer types lives in this component only until it is sent:\n * the inputs empty on submit, and the page unmounts this screen whenever the\n * prompt moves on, so the next customer finds nothing of the last one's.\n */\nexport function PosDisplayReceiptScreen({\n  receipt,\n  promptId,\n  busy,\n  onAnswer,\n}: {\n  receipt: ReceiptPrompt\n  promptId: string\n  busy: boolean\n  onAnswer: (answer: PosDisplayAnswer) => void\n}) {\n  const [entry, setEntry] = useState<'email' | 'sms' | null>(null)\n  const [value, setValue] = useState('')\n  const [optIn, setOptIn] = useState(false)\n  const [problem, setProblem] = useState<string | null>(null)\n\n  const reset = () => {\n    setEntry(null)\n    setValue('')\n    setOptIn(false)\n    setProblem(null)\n  }\n\n  const submit = (event: FormEvent) => {\n    event.preventDefault()\n    if (entry === 'email') {\n      const email = CommerceModel.posDisplayEmail(value)\n      if (!email) {\n        setProblem('Enter an email address, like name@example.com.')\n        return\n      }\n      const marketingOptIn = receipt.offerMarketing && optIn\n      reset()\n      onAnswer({\n        promptId,\n        receiptChannel: 'email',\n        email,\n        ...(marketingOptIn ? { marketingOptIn: true } : {}),\n      })\n      return\n    }\n    if (entry === 'sms') {\n      const phone = CommerceModel.posDisplayPhone(value)\n      if (!phone) {\n        setProblem('Enter a phone number with its area code.')\n        return\n      }\n      reset()\n      onAnswer({ promptId, receiptChannel: 'sms', phone })\n    }\n  }\n\n  if (entry) {\n    const email = entry === 'email'\n    return (\n      <Stack component=\"form\" onSubmit={submit} spacing={3} sx={{ width: '100%' }}>\n        <Typography variant=\"h3\" component=\"h1\" sx={{ textAlign: 'center' }}>\n          {email ? 'Email receipt' : 'Text receipt'}\n        </Typography>\n        <TextField\n          value={value}\n          onChange={(event) => {\n            setValue(event.target.value)\n            setProblem(null)\n          }}\n          autoFocus\n          autoComplete=\"off\"\n          type={email ? 'email' : 'tel'}\n          label={email ? 'Email' : 'Mobile number'}\n          error={Boolean(problem)}\n          helperText={problem ?? (email ? 'For your receipt' : 'For your receipt by text')}\n          slotProps={{ htmlInput: { inputMode: email ? 'email' : 'tel' } }}\n          sx={(theme) => ({ '& input': theme.typography.h5 })}\n        />\n        {email && receipt.offerMarketing ? (\n          <FormControlLabel\n            control={\n              <Checkbox checked={optIn} onChange={(event) => setOptIn(event.target.checked)} />\n            }\n            label={<Typography variant=\"h6\">Email me news and offers</Typography>}\n          />\n        ) : null}\n        <Stack direction=\"row\" spacing={2}>\n          <Button\n            variant=\"outlined\"\n            size=\"large\"\n            fullWidth\n            disabled={busy}\n            onClick={reset}\n            sx={posDisplayTouchSx}\n          >\n            Back\n          </Button>\n          <Button\n            type=\"submit\"\n            variant=\"contained\"\n            size=\"large\"\n            fullWidth\n            disabled={busy || !value.trim()}\n            sx={posDisplayTouchSx}\n          >\n            Send\n          </Button>\n        </Stack>\n      </Stack>\n    )\n  }\n\n  return (\n    <Stack spacing={3} sx={{ width: '100%' }}>\n      <Typography variant=\"h3\" component=\"h1\" sx={{ textAlign: 'center' }}>\n        How would you like your receipt?\n      </Typography>\n      <Stack spacing={2}>\n        {receipt.channels.map((channel) => (\n          <Button\n            key={channel}\n            variant={channel === 'none' ? 'outlined' : 'contained'}\n            size=\"large\"\n            fullWidth\n            disabled={busy}\n            onClick={() => {\n              if (channel === 'email' || channel === 'sms') {\n                setEntry(channel)\n                return\n              }\n              onAnswer({ promptId, receiptChannel: channel })\n            }}\n            sx={posDisplayTouchSx}\n          >\n            {CHANNEL_LABELS[channel]}\n          </Button>\n        ))}\n      </Stack>\n    </Stack>\n  )\n}\n"],"names":["Button","Checkbox","FormControlLabel","Stack","TextField","Typography","useState","CommerceModel","posDisplayTouchSx","CHANNEL_LABELS","email","sms","print","none","PosDisplayReceiptScreen","receipt","promptId","busy","onAnswer","entry","setEntry","value","setValue","optIn","setOptIn","problem","setProblem","reset","submit","event","preventDefault","posDisplayEmail","marketingOptIn","offerMarketing","receiptChannel","phone","posDisplayPhone","component","onSubmit","spacing","sx","width","variant","textAlign","onChange","target","autoFocus","autoComplete","type","label","error","Boolean","helperText","slotProps","htmlInput","inputMode","theme","typography","h5","control","checked","direction","size","fullWidth","disabled","onClick","trim","channels","map","channel"],"mappings":"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"}

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

@@ -0,0 +1,36 @@
+/**
+ * @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 { CSSObject, Theme } from '@mui/material/styles';
+import * as CommerceModel from '../../../model';
+import { type PosDisplayAnswer } from './pos-display-api';
+type TipPrompt = NonNullable<CommerceModel.PosDisplayState['tip']>;
+/** A tall, full-width touch target. */
+export declare const posDisplayTouchSx: (theme: Theme) => CSSObject;
+/**
+ * The tip prompt (AGL-3608): the merchant's presets, each with the amount it
+ * comes to, a custom amount and no tip. The server recomputes a percentage
+ * from the prompt it sent, so what is shown here is never what is charged.
+ */
+export declare function PosDisplayTipScreen({ tip, promptId, busy, currency, onAnswer, }: {
+    tip: TipPrompt;
+    promptId: string;
+    busy: boolean;
+    /** The store's currency, from the display state. */
+    currency?: string;
+    onAnswer: (answer: PosDisplayAnswer) => void;
+}): import("react").JSX.Element;
+export {};

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

@@ -0,0 +1,211 @@
+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 Button from "@mui/material/Button";
+import InputAdornment from "@mui/material/InputAdornment";
+import Stack from "@mui/material/Stack";
+import TextField from "@mui/material/TextField";
+import Typography from "@mui/material/Typography";
+import { useState } from "react";
+import * as CommerceModel from "../../../model/index.js";
+import { displayMoney, dollarsToCents } from "./pos-display-api.js";
+/** A tall, full-width touch target. */ export const posDisplayTouchSx = (theme)=>_extends({
+        minHeight: theme.spacing(10)
+    }, theme.typography.h5);
+/**
+ * The tip prompt (AGL-3608): the merchant's presets, each with the amount it
+ * comes to, a custom amount and no tip. The server recomputes a percentage
+ * from the prompt it sent, so what is shown here is never what is charged.
+ */ export function PosDisplayTipScreen({ tip, promptId, busy, currency, onAnswer }) {
+    const [custom, setCustom] = useState(null);
+    const [problem, setProblem] = useState(null);
+    const submitCustom = (event)=>{
+        event.preventDefault();
+        const cents = dollarsToCents(custom != null ? custom : '');
+        const error = cents === null ? 'Enter an amount, like 5 or 5.50.' : CommerceModel.posTipProblem(cents, tip.baseCents);
+        if (cents === null || error) {
+            setProblem(error);
+            return;
+        }
+        setCustom(null);
+        setProblem(null);
+        onAnswer({
+            promptId,
+            tipChoice: 'custom',
+            tipCents: cents
+        });
+    };
+    if (custom !== null) {
+        return /*#__PURE__*/ _jsxs(Stack, {
+            component: "form",
+            onSubmit: submitCustom,
+            spacing: 3,
+            sx: {
+                width: '100%'
+            },
+            children: [
+                /*#__PURE__*/ _jsx(Typography, {
+                    variant: "h3",
+                    component: "h1",
+                    sx: {
+                        textAlign: 'center'
+                    },
+                    children: "Custom tip"
+                }),
+                /*#__PURE__*/ _jsx(TextField, {
+                    value: custom,
+                    onChange: (event)=>{
+                        setCustom(event.target.value);
+                        setProblem(null);
+                    },
+                    autoFocus: true,
+                    error: Boolean(problem),
+                    helperText: problem != null ? problem : `Up to ${displayMoney(tip.baseCents, currency)}`,
+                    slotProps: {
+                        input: {
+                            startAdornment: /*#__PURE__*/ _jsx(InputAdornment, {
+                                position: "start",
+                                children: "$"
+                            })
+                        },
+                        htmlInput: {
+                            inputMode: 'decimal',
+                            'aria-label': 'Tip amount'
+                        }
+                    },
+                    sx: (theme)=>({
+                            '& input': theme.typography.h4
+                        })
+                }),
+                /*#__PURE__*/ _jsxs(Stack, {
+                    direction: "row",
+                    spacing: 2,
+                    children: [
+                        /*#__PURE__*/ _jsx(Button, {
+                            variant: "outlined",
+                            size: "large",
+                            fullWidth: true,
+                            disabled: busy,
+                            onClick: ()=>{
+                                setCustom(null);
+                                setProblem(null);
+                            },
+                            sx: posDisplayTouchSx,
+                            children: "Back"
+                        }),
+                        /*#__PURE__*/ _jsx(Button, {
+                            type: "submit",
+                            variant: "contained",
+                            size: "large",
+                            fullWidth: true,
+                            disabled: busy || !custom,
+                            sx: posDisplayTouchSx,
+                            children: "Add tip"
+                        })
+                    ]
+                })
+            ]
+        });
+    }
+    return /*#__PURE__*/ _jsxs(Stack, {
+        spacing: 3,
+        sx: {
+            width: '100%'
+        },
+        children: [
+            /*#__PURE__*/ _jsx(Typography, {
+                variant: "h3",
+                component: "h1",
+                sx: {
+                    textAlign: 'center'
+                },
+                children: "Add a tip?"
+            }),
+            /*#__PURE__*/ _jsx(Typography, {
+                variant: "h6",
+                color: "text.secondary",
+                sx: {
+                    textAlign: 'center'
+                },
+                children: `On ${displayMoney(tip.baseCents, currency)}`
+            }),
+            /*#__PURE__*/ _jsx(Stack, {
+                direction: {
+                    xs: 'column',
+                    sm: 'row'
+                },
+                spacing: 2,
+                children: tip.percentages.map((percent)=>/*#__PURE__*/ _jsxs(Button, {
+                        variant: "contained",
+                        size: "large",
+                        fullWidth: true,
+                        disabled: busy,
+                        onClick: ()=>onAnswer({
+                                promptId,
+                                tipChoice: 'percent',
+                                tipPercent: percent
+                            }),
+                        sx: (theme)=>_extends({}, posDisplayTouchSx(theme), {
+                                flexDirection: 'column'
+                            }),
+                        children: [
+                            /*#__PURE__*/ _jsx("span", {
+                                children: `${percent}%`
+                            }),
+                            /*#__PURE__*/ _jsx(Typography, {
+                                variant: "body1",
+                                component: "span",
+                                children: displayMoney(CommerceModel.posTipFromPercent(tip.baseCents, percent), currency)
+                            })
+                        ]
+                    }, percent))
+            }),
+            /*#__PURE__*/ _jsxs(Stack, {
+                direction: {
+                    xs: 'column',
+                    sm: 'row'
+                },
+                spacing: 2,
+                children: [
+                    tip.allowCustom ? /*#__PURE__*/ _jsx(Button, {
+                        variant: "outlined",
+                        size: "large",
+                        fullWidth: true,
+                        disabled: busy,
+                        onClick: ()=>setCustom(''),
+                        sx: posDisplayTouchSx,
+                        children: "Custom amount"
+                    }) : null,
+                    /*#__PURE__*/ _jsx(Button, {
+                        variant: "outlined",
+                        size: "large",
+                        fullWidth: true,
+                        disabled: busy,
+                        onClick: ()=>onAnswer({
+                                promptId,
+                                tipChoice: 'none'
+                            }),
+                        sx: posDisplayTouchSx,
+                        children: "No tip"
+                    })
+                ]
+            })
+        ]
+    });
+}
+
+//# sourceMappingURL=tip-screen.js.map