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

package/src/lib/components/console/pos/pos-product-grid.component.js

@@ -0,0 +1,272 @@
+/**
+ * @license
+ * Copyright 2026 Aglyn LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */ 'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { resolveMediaSrc } from "@aglyn/aglyn/app-utils/media-ref";
+import { ListQueryNotices } from "@aglyn/shared-ui-jsx/components/list-query-notices.component";
+import { Box, Card, CardActionArea, Chip, IconButton, InputAdornment, Stack, TextField, Typography } from "@mui/material";
+import * as CommerceModel from "../../../model/index.js";
+/** The smallest comfortable touch target, in px (WCAG 2.5.5). */ export const POS_TOUCH_PX = 44;
+/** The category chip that shows the store's quick keys (AGL-3607). */ export const POS_QUICK_KEYS = '__quick';
+function cents(variant) {
+    var _ref;
+    return Math.round(Number((_ref = variant == null ? void 0 : variant.priceUsd) != null ? _ref : 0) * 100);
+}
+/** `$4.50`, or `From $4.50` when the variants are not all one price. */ export function posTilePrice(product) {
+    var _product_variants;
+    const prices = ((_product_variants = product.variants) != null ? _product_variants : []).map(cents);
+    const low = Math.min(...prices);
+    const label = CommerceModel.formatReceiptMoney(Number.isFinite(low) ? low : 0, 'usd');
+    return prices.some((price)=>price !== low) ? `From ${label}` : label;
+}
+/** What the tile says about the shelf: nothing when it is untracked or plenty. */ export function posTileStock(product) {
+    var _product_variants, _product_variants1, _product_lowStockThreshold;
+    const tracked = ((_product_variants = product.variants) != null ? _product_variants : []).filter((variant)=>variant.inventory != null);
+    if (tracked.length === 0 || tracked.length < ((_product_variants1 = product.variants) != null ? _product_variants1 : []).length) return null;
+    const total = tracked.reduce((sum, variant)=>sum + Math.max(0, Number(variant.inventory)), 0);
+    if (total <= 0) return 'Out of stock';
+    if (total <= Math.max(3, Number((_product_lowStockThreshold = product.lowStockThreshold) != null ? _product_lowStockThreshold : 0))) return `${total} left`;
+    return null;
+}
+/**
+ * The register's product picker (AGL-3607): search and scan, a category bar
+ * that opens on the store's quick keys, and photo tiles with the price, the
+ * shelf and how many are already in the basket. A product with variants or
+ * modifiers opens the item sheet; any other adds at a tap. Touch-first:
+ * every target is at least 44px, and the tiles reflow from two columns on a
+ * phone to six on a landscape tablet.
+ */ export function PosProductGrid(props) {
+    const { products, hostId } = props;
+    return /*#__PURE__*/ _jsxs(Box, {
+        sx: {
+            display: 'flex',
+            flexDirection: 'column',
+            gap: 1.5,
+            minHeight: 0
+        },
+        children: [
+            /*#__PURE__*/ _jsx(TextField, {
+                placeholder: "Search or scan barcode…",
+                value: props.search,
+                onChange: (event)=>props.onSearch(event.target.value),
+                onKeyDown: (event)=>{
+                    if (event.key === 'Enter') props.onSearchEnter();
+                },
+                fullWidth: true,
+                autoFocus: true,
+                slotProps: {
+                    htmlInput: {
+                        'aria-label': 'Search or scan barcode',
+                        enterKeyHint: 'search'
+                    },
+                    input: props.search || props.scanAdornment ? {
+                        endAdornment: /*#__PURE__*/ _jsxs(_Fragment, {
+                            children: [
+                                props.search ? /*#__PURE__*/ _jsx(InputAdornment, {
+                                    position: "end",
+                                    children: /*#__PURE__*/ _jsx(IconButton, {
+                                        "aria-label": "Clear search",
+                                        onClick: ()=>props.onSearch(''),
+                                        sx: {
+                                            width: POS_TOUCH_PX,
+                                            height: POS_TOUCH_PX
+                                        },
+                                        children: '✕'
+                                    })
+                                }) : null,
+                                props.scanAdornment
+                            ]
+                        })
+                    } : undefined
+                }
+            }),
+            props.toolbar,
+            /*#__PURE__*/ _jsxs(Stack, {
+                direction: "row",
+                spacing: 1,
+                sx: {
+                    overflowX: 'auto',
+                    pb: 0.5,
+                    flexShrink: 0
+                },
+                role: "toolbar",
+                "aria-label": "Categories",
+                children: [
+                    /*#__PURE__*/ _jsx(Chip, {
+                        label: "★ Quick keys",
+                        color: props.categoryId === POS_QUICK_KEYS ? 'primary' : 'default',
+                        onClick: ()=>props.onCategory(POS_QUICK_KEYS),
+                        "aria-pressed": props.categoryId === POS_QUICK_KEYS,
+                        sx: {
+                            minHeight: POS_TOUCH_PX
+                        }
+                    }),
+                    /*#__PURE__*/ _jsx(Chip, {
+                        label: "All",
+                        color: props.categoryId ? 'default' : 'primary',
+                        onClick: ()=>props.onCategory(''),
+                        "aria-pressed": !props.categoryId,
+                        sx: {
+                            minHeight: POS_TOUCH_PX
+                        }
+                    }),
+                    props.categories.map((category)=>/*#__PURE__*/ _jsx(Chip, {
+                            label: category.name,
+                            color: props.categoryId === category.$id ? 'primary' : 'default',
+                            onClick: ()=>props.onCategory(category.$id),
+                            "aria-pressed": props.categoryId === category.$id,
+                            sx: {
+                                minHeight: POS_TOUCH_PX
+                            }
+                        }, category.$id))
+                ]
+            }),
+            props.notices.length ? /*#__PURE__*/ _jsx(ListQueryNotices, {
+                refused: [],
+                notices: props.notices
+            }) : null,
+            products.length === 0 ? /*#__PURE__*/ _jsx(Typography, {
+                variant: "body2",
+                color: "text.secondary",
+                sx: {
+                    py: 4,
+                    textAlign: 'center'
+                },
+                children: props.categoryId === POS_QUICK_KEYS && !props.search ? 'No quick keys yet. Turn on “Quick key at the register” on the products you sell most.' : 'No products match.'
+            }) : null,
+            /*#__PURE__*/ _jsx(Box, {
+                sx: {
+                    display: 'grid',
+                    gap: 1.5,
+                    gridTemplateColumns: {
+                        xs: 'repeat(2, minmax(0, 1fr))',
+                        sm: 'repeat(auto-fill, minmax(150px, 1fr))'
+                    },
+                    alignContent: 'start'
+                },
+                children: products.map((product)=>{
+                    var _ref, _props_basketCounts_get, _product_name;
+                    var _product_mediaUrls;
+                    const image = resolveMediaSrc((_ref = (_product_mediaUrls = product.mediaUrls) == null ? void 0 : _product_mediaUrls[0]) != null ? _ref : product.imageUrl, {
+                        hostId
+                    });
+                    const stock = posTileStock(product);
+                    const inBasket = (_props_basketCounts_get = props.basketCounts.get(product.$id)) != null ? _props_basketCounts_get : 0;
+                    const choices = product.variants.length > 1 || CommerceModel.productModifierGroups(product).length > 0;
+                    return /*#__PURE__*/ _jsxs(Card, {
+                        variant: "outlined",
+                        sx: {
+                            position: 'relative'
+                        },
+                        children: [
+                            inBasket > 0 ? /*#__PURE__*/ _jsx(Box, {
+                                "aria-label": `${inBasket} in the basket`,
+                                sx: {
+                                    position: 'absolute',
+                                    top: 8,
+                                    right: 8,
+                                    zIndex: 1,
+                                    minWidth: 28,
+                                    height: 28,
+                                    px: 0.75,
+                                    borderRadius: 14,
+                                    display: 'grid',
+                                    placeItems: 'center',
+                                    bgcolor: 'primary.main',
+                                    color: 'primary.contrastText',
+                                    typography: 'subtitle2',
+                                    pointerEvents: 'none'
+                                },
+                                children: inBasket
+                            }) : null,
+                            /*#__PURE__*/ _jsxs(CardActionArea, {
+                                onClick: ()=>props.onTap(product),
+                                "aria-label": `${product.name}, ${posTilePrice(product)}${choices ? ', choose options' : ''}`,
+                                sx: {
+                                    height: '100%',
+                                    display: 'flex',
+                                    flexDirection: 'column',
+                                    alignItems: 'stretch'
+                                },
+                                children: [
+                                    image ? /*#__PURE__*/ _jsx(Box, {
+                                        component: "img",
+                                        src: image,
+                                        alt: "",
+                                        loading: "lazy",
+                                        sx: {
+                                            width: '100%',
+                                            aspectRatio: '4 / 3',
+                                            objectFit: 'cover',
+                                            display: 'block'
+                                        }
+                                    }) : /*#__PURE__*/ _jsx(Box, {
+                                        "aria-hidden": true,
+                                        sx: {
+                                            width: '100%',
+                                            aspectRatio: '4 / 3',
+                                            display: 'grid',
+                                            placeItems: 'center',
+                                            bgcolor: 'action.hover',
+                                            color: 'text.secondary',
+                                            typography: 'h4'
+                                        },
+                                        children: String((_product_name = product.name) != null ? _product_name : '?').slice(0, 1).toUpperCase()
+                                    }),
+                                    /*#__PURE__*/ _jsxs(Box, {
+                                        sx: {
+                                            p: 1.25,
+                                            minHeight: 64
+                                        },
+                                        children: [
+                                            /*#__PURE__*/ _jsx(Typography, {
+                                                variant: "body2",
+                                                sx: {
+                                                    fontWeight: 600,
+                                                    display: '-webkit-box',
+                                                    WebkitLineClamp: 2,
+                                                    WebkitBoxOrient: 'vertical',
+                                                    overflow: 'hidden'
+                                                },
+                                                children: product.name
+                                            }),
+                                            /*#__PURE__*/ _jsxs(Typography, {
+                                                variant: "body2",
+                                                color: "text.secondary",
+                                                children: [
+                                                    posTilePrice(product),
+                                                    choices ? ' · Options' : ''
+                                                ]
+                                            }),
+                                            stock ? /*#__PURE__*/ _jsx(Typography, {
+                                                variant: "caption",
+                                                color: stock === 'Out of stock' ? 'error.main' : 'warning.main',
+                                                children: stock
+                                            }) : null
+                                        ]
+                                    })
+                                ]
+                            })
+                        ]
+                    }, product.$id);
+                })
+            })
+        ]
+    });
+}
+PosProductGrid.displayName = 'PosProductGrid';
+
+//# sourceMappingURL=pos-product-grid.component.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../../../libs/plugins/commerce/src/lib/components/console/pos/pos-product-grid.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 { resolveMediaSrc } from '@aglyn/aglyn/app-utils/media-ref'\nimport { ListQueryNotices } from '@aglyn/shared-ui-jsx/components/list-query-notices.component'\nimport {\n  Box,\n  Card,\n  CardActionArea,\n  Chip,\n  IconButton,\n  InputAdornment,\n  Stack,\n  TextField,\n  Typography,\n} from '@mui/material'\nimport type { ReactNode } from 'react'\nimport * as CommerceModel from '../../../model'\n\n/** The smallest comfortable touch target, in px (WCAG 2.5.5). */\nexport const POS_TOUCH_PX = 44\n\n/** The category chip that shows the store's quick keys (AGL-3607). */\nexport const POS_QUICK_KEYS = '__quick'\n\nexport interface PosGridCategory {\n  $id: string\n  name: string\n}\n\nexport interface PosProductGridProps {\n  hostId: string\n  search: string\n  onSearch: (value: string) => void\n  /** Enter in the search box: a barcode wedge finishing a scan. */\n  onSearchEnter: () => void\n  /** The camera scanner's button (AGL-3619), at the end of the search box. */\n  scanAdornment?: ReactNode\n  categories: PosGridCategory[]\n  /** `''` for all, {@link POS_QUICK_KEYS}, or a category id. */\n  categoryId: string\n  onCategory: (id: string) => void\n  notices: Parameters<typeof ListQueryNotices>[0]['notices']\n  products: any[]\n  /** How many of each product are in the basket, for the tile badge. */\n  basketCounts: ReadonlyMap<string, number>\n  onTap: (product: any) => void\n  /** A slot under the search, for the register's reader and display status. */\n  toolbar?: ReactNode\n}\n\nfunction cents(variant: { priceUsd?: number } | undefined): number {\n  return Math.round(Number(variant?.priceUsd ?? 0) * 100)\n}\n\n/** `$4.50`, or `From $4.50` when the variants are not all one price. */\nexport function posTilePrice(product: CommerceModel.HostProduct): string {\n  const prices = (product.variants ?? []).map(cents)\n  const low = Math.min(...prices)\n  const label = CommerceModel.formatReceiptMoney(Number.isFinite(low) ? low : 0, 'usd')\n  return prices.some((price) => price !== low) ? `From ${label}` : label\n}\n\n/** What the tile says about the shelf: nothing when it is untracked or plenty. */\nexport function posTileStock(product: CommerceModel.HostProduct): string | null {\n  const tracked = (product.variants ?? []).filter((variant) => variant.inventory != null)\n  if (tracked.length === 0 || tracked.length < (product.variants ?? []).length) return null\n  const total = tracked.reduce((sum, variant) => sum + Math.max(0, Number(variant.inventory)), 0)\n  if (total <= 0) return 'Out of stock'\n  if (total <= Math.max(3, Number(product.lowStockThreshold ?? 0))) return `${total} left`\n  return null\n}\n\n/**\n * The register's product picker (AGL-3607): search and scan, a category bar\n * that opens on the store's quick keys, and photo tiles with the price, the\n * shelf and how many are already in the basket. A product with variants or\n * modifiers opens the item sheet; any other adds at a tap. Touch-first:\n * every target is at least 44px, and the tiles reflow from two columns on a\n * phone to six on a landscape tablet.\n */\nexport function PosProductGrid(props: PosProductGridProps) {\n  const { products, hostId } = props\n  return (\n    <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1.5, minHeight: 0 }}>\n      <TextField\n        placeholder=\"Search or scan barcode…\"\n        value={props.search}\n        onChange={(event) => props.onSearch(event.target.value)}\n        onKeyDown={(event) => {\n          if (event.key === 'Enter') props.onSearchEnter()\n        }}\n        fullWidth\n        autoFocus\n        slotProps={{\n          htmlInput: { 'aria-label': 'Search or scan barcode', enterKeyHint: 'search' },\n          input:\n            props.search || props.scanAdornment\n              ? {\n                  endAdornment: (\n                    <>\n                      {props.search ? (\n                        <InputAdornment position=\"end\">\n                          <IconButton\n                            aria-label=\"Clear search\"\n                            onClick={() => props.onSearch('')}\n                            sx={{ width: POS_TOUCH_PX, height: POS_TOUCH_PX }}\n                          >\n                            {'✕'}\n                          </IconButton>\n                        </InputAdornment>\n                      ) : null}\n                      {props.scanAdornment}\n                    </>\n                  ),\n                }\n              : undefined,\n        }}\n      />\n      {props.toolbar}\n      <Stack\n        direction=\"row\"\n        spacing={1}\n        sx={{ overflowX: 'auto', pb: 0.5, flexShrink: 0 }}\n        role=\"toolbar\"\n        aria-label=\"Categories\"\n      >\n        <Chip\n          label=\"★ Quick keys\"\n          color={props.categoryId === POS_QUICK_KEYS ? 'primary' : 'default'}\n          onClick={() => props.onCategory(POS_QUICK_KEYS)}\n          aria-pressed={props.categoryId === POS_QUICK_KEYS}\n          sx={{ minHeight: POS_TOUCH_PX }}\n        />\n        <Chip\n          label=\"All\"\n          color={props.categoryId ? 'default' : 'primary'}\n          onClick={() => props.onCategory('')}\n          aria-pressed={!props.categoryId}\n          sx={{ minHeight: POS_TOUCH_PX }}\n        />\n        {props.categories.map((category) => (\n          <Chip\n            key={category.$id}\n            label={category.name}\n            color={props.categoryId === category.$id ? 'primary' : 'default'}\n            onClick={() => props.onCategory(category.$id)}\n            aria-pressed={props.categoryId === category.$id}\n            sx={{ minHeight: POS_TOUCH_PX }}\n          />\n        ))}\n      </Stack>\n      {props.notices.length ? <ListQueryNotices refused={[]} notices={props.notices} /> : null}\n      {products.length === 0 ? (\n        <Typography variant=\"body2\" color=\"text.secondary\" sx={{ py: 4, textAlign: 'center' }}>\n          {props.categoryId === POS_QUICK_KEYS && !props.search\n            ? 'No quick keys yet. Turn on “Quick key at the register” on the products you sell most.'\n            : 'No products match.'}\n        </Typography>\n      ) : null}\n      <Box\n        sx={{\n          display: 'grid',\n          gap: 1.5,\n          gridTemplateColumns: {\n            xs: 'repeat(2, minmax(0, 1fr))',\n            sm: 'repeat(auto-fill, minmax(150px, 1fr))',\n          },\n          alignContent: 'start',\n        }}\n      >\n        {products.map((product: any) => {\n          const image = resolveMediaSrc(product.mediaUrls?.[0] ?? product.imageUrl, { hostId })\n          const stock = posTileStock(product)\n          const inBasket = props.basketCounts.get(product.$id) ?? 0\n          const choices =\n            product.variants.length > 1 ||\n            CommerceModel.productModifierGroups(product).length > 0\n          return (\n            <Card key={product.$id} variant=\"outlined\" sx={{ position: 'relative' }}>\n              {inBasket > 0 ? (\n                <Box\n                  aria-label={`${inBasket} in the basket`}\n                  sx={{\n                    position: 'absolute',\n                    top: 8,\n                    right: 8,\n                    zIndex: 1,\n                    minWidth: 28,\n                    height: 28,\n                    px: 0.75,\n                    borderRadius: 14,\n                    display: 'grid',\n                    placeItems: 'center',\n                    bgcolor: 'primary.main',\n                    color: 'primary.contrastText',\n                    typography: 'subtitle2',\n                    pointerEvents: 'none',\n                  }}\n                >\n                  {inBasket}\n                </Box>\n              ) : null}\n              <CardActionArea\n                onClick={() => props.onTap(product)}\n                aria-label={`${product.name}, ${posTilePrice(product)}${choices ? ', choose options' : ''}`}\n                sx={{ height: '100%', display: 'flex', flexDirection: 'column', alignItems: 'stretch' }}\n              >\n                {image ? (\n                  <Box\n                    component=\"img\"\n                    src={image}\n                    alt=\"\"\n                    loading=\"lazy\"\n                    sx={{ width: '100%', aspectRatio: '4 / 3', objectFit: 'cover', display: 'block' }}\n                  />\n                ) : (\n                  <Box\n                    aria-hidden\n                    sx={{\n                      width: '100%',\n                      aspectRatio: '4 / 3',\n                      display: 'grid',\n                      placeItems: 'center',\n                      bgcolor: 'action.hover',\n                      color: 'text.secondary',\n                      typography: 'h4',\n                    }}\n                  >\n                    {String(product.name ?? '?').slice(0, 1).toUpperCase()}\n                  </Box>\n                )}\n                <Box sx={{ p: 1.25, minHeight: 64 }}>\n                  <Typography\n                    variant=\"body2\"\n                    sx={{\n                      fontWeight: 600,\n                      display: '-webkit-box',\n                      WebkitLineClamp: 2,\n                      WebkitBoxOrient: 'vertical',\n                      overflow: 'hidden',\n                    }}\n                  >\n                    {product.name}\n                  </Typography>\n                  <Typography variant=\"body2\" color=\"text.secondary\">\n                    {posTilePrice(product)}\n                    {choices ? ' · Options' : ''}\n                  </Typography>\n                  {stock ? (\n                    <Typography variant=\"caption\" color={stock === 'Out of stock' ? 'error.main' : 'warning.main'}>\n                      {stock}\n                    </Typography>\n                  ) : null}\n                </Box>\n              </CardActionArea>\n            </Card>\n          )\n        })}\n      </Box>\n    </Box>\n  )\n}\nPosProductGrid.displayName = 'PosProductGrid'\n"],"names":["resolveMediaSrc","ListQueryNotices","Box","Card","CardActionArea","Chip","IconButton","InputAdornment","Stack","TextField","Typography","CommerceModel","POS_TOUCH_PX","POS_QUICK_KEYS","cents","variant","Math","round","Number","priceUsd","posTilePrice","product","prices","variants","map","low","min","label","formatReceiptMoney","isFinite","some","price","posTileStock","tracked","filter","inventory","length","total","reduce","sum","max","lowStockThreshold","PosProductGrid","props","products","hostId","sx","display","flexDirection","gap","minHeight","placeholder","value","search","onChange","event","onSearch","target","onKeyDown","key","onSearchEnter","fullWidth","autoFocus","slotProps","htmlInput","enterKeyHint","input","scanAdornment","endAdornment","position","aria-label","onClick","width","height","undefined","toolbar","direction","spacing","overflowX","pb","flexShrink","role","color","categoryId","onCategory","aria-pressed","categories","category","name","$id","notices","refused","py","textAlign","gridTemplateColumns","xs","sm","alignContent","image","mediaUrls","imageUrl","stock","inBasket","basketCounts","get","choices","productModifierGroups","top","right","zIndex","minWidth","px","borderRadius","placeItems","bgcolor","typography","pointerEvents","onTap","alignItems","component","src","alt","loading","aspectRatio","objectFit","aria-hidden","String","slice","toUpperCase","p","fontWeight","WebkitLineClamp","WebkitBoxOrient","overflow","displayName"],"mappings":"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"}

package/src/lib/components/console/pos/pos-receipt-panel.component.d.ts

@@ -0,0 +1,27 @@
+import { posTender, type PosRegisterContext, type PosSaleSummary } from './pos-api';
+import type { PosDisplayControl } from './use-pos-display';
+type User = Parameters<typeof posTender>[0];
+export interface PosReceiptPanelProps {
+    user: User;
+    hostId: string;
+    sale: PosSaleSummary;
+    context: PosRegisterContext | null;
+    display: PosDisplayControl;
+    onNewSale: () => void;
+    /** The register the sale rang on, for its receipt printer and header. */
+    registerId?: string;
+    registerName?: string;
+    /** The cashier a PIN switched in (AGL-3609), as the receipt prints them. */
+    cashierName?: string;
+    notify: (message: string, variant: 'success' | 'error' | 'warning' | 'info') => void;
+}
+/**
+ * The sale is paid (AGL-3607, AGL-3608): change due, then the receipt — on
+ * the customer display when one is paired and the store asks, otherwise by
+ * the cashier — and a new sale.
+ */
+export declare function PosReceiptPanel(props: PosReceiptPanelProps): import("react").JSX.Element;
+export declare namespace PosReceiptPanel {
+    var displayName: string;
+}
+export {};

package/src/lib/components/console/pos/pos-receipt-panel.component.js

@@ -0,0 +1,282 @@
+/**
+ * @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 { Alert, Button, Stack, TextField, Typography } from "@mui/material";
+import { useCallback, useEffect, useRef, useState } from "react";
+import * as CommerceModel from "../../../model/index.js";
+import { usePosRegisterHasPrinter, usePosSaleReceipt } from "../pos-ops/register-ops.js";
+import { posTender, PosRequestError, usd } from "./pos-api.js";
+import { POS_TOUCH_PX } from "./pos-product-grid.component.js";
+/**
+ * The sale is paid (AGL-3607, AGL-3608): change due, then the receipt — on
+ * the customer display when one is paired and the store asks, otherwise by
+ * the cashier — and a new sale.
+ */ export function PosReceiptPanel(props) {
+    var _props_context, _props_context1;
+    const { user, hostId, sale, display, notify } = props;
+    const [email, setEmail] = useState('');
+    const [phone, setPhone] = useState('');
+    const [sent, setSent] = useState('');
+    const asked = useRef(false);
+    const settings = (_props_context = props.context) == null ? void 0 : _props_context.settings;
+    // The 80 mm receipt the register's operations print (AGL-3609), read back
+    // from the stored sale; on a register with a cloud printer the server
+    // prints it there instead of the browser.
+    const receipt = usePosSaleReceipt(_extends({
+        hostId,
+        orderId: sale.orderId
+    }, props.registerName ? {
+        registerName: props.registerName
+    } : {}, props.cashierName ? {
+        cashierName: props.cashierName
+    } : {}));
+    const hasPrinter = usePosRegisterHasPrinter(hostId, props.registerId);
+    const change = sale.payments.reduce((sum, payment)=>{
+        var _payment_changeCents;
+        return sum + ((_payment_changeCents = payment.changeCents) != null ? _payment_changeCents : 0);
+    }, 0);
+    // A text receipt is offered only when the store can send one (AGL-3610).
+    const smsReceipts = ((_props_context1 = props.context) == null ? void 0 : _props_context1.smsReceipts) === true;
+    /**
+   * Sends (email, text) or records (print, none) the receipt choice. The
+   * server also ends the customer's turn on the display: it says thank you
+   * and forgets the address or number they typed (AGL-3608).
+   */ const sendReceipt = useCallback(async (channel, to = '', marketingOptIn = false)=>{
+        try {
+            await posTender(user, hostId, sale.orderId, 'receipt', _extends({
+                channel
+            }, to ? {
+                to
+            } : {}, marketingOptIn ? {
+                marketingOptIn: true
+            } : {}));
+            if (channel === 'email' || channel === 'sms') {
+                setSent(channel === 'sms' ? `Receipt texted to ${to}` : `Receipt emailed to ${to}`);
+                if (channel === 'sms') setPhone('');
+                else setEmail('');
+                notify('Receipt sent', 'success');
+            }
+        } catch (error) {
+            if (channel === 'email' || channel === 'sms') {
+                notify(error instanceof PosRequestError ? error.message : 'The receipt was not sent', 'error');
+            }
+        }
+    }, [
+        user,
+        hostId,
+        sale.orderId,
+        notify
+    ]);
+    /** Prints on the register's cloud printer when it has one, else in the browser. */ const printReceipt = useCallback(async ()=>{
+        if (!hasPrinter) receipt.print();
+        await sendReceipt('print');
+    }, [
+        hasPrinter,
+        receipt,
+        sendReceipt
+    ]);
+    // Once per sale: print when the store always prints, or hand the choice to
+    // the customer's screen when it asks and a display is paired.
+    useEffect(()=>{
+        if (asked.current || !settings) return;
+        if (settings.receiptDefault === 'print') {
+            // The receipt prints from the stored sale, so it waits for that read.
+            if (!receipt.order) return;
+            asked.current = true;
+            void printReceipt();
+            return;
+        }
+        asked.current = true;
+        if (settings.receiptDefault === 'ask' && display.connected) {
+            void (async ()=>{
+                const answer = await display.ask({
+                    mode: 'receipt',
+                    receipt: {
+                        channels: [
+                            'email',
+                            ...smsReceipts ? [
+                                'sms'
+                            ] : [],
+                            'print',
+                            'none'
+                        ],
+                        offerMarketing: settings.displayMarketingOptIn
+                    }
+                });
+                if (!answer) {
+                    // The cashier took the receipt over, or the customer walked away:
+                    // the screen still ends on its thank-you, not a stale prompt.
+                    await display.show({
+                        mode: 'thanks'
+                    });
+                    return;
+                }
+                if (answer.receiptChannel === 'email' && answer.email) {
+                    await sendReceipt('email', answer.email, answer.marketingOptIn === true);
+                } else if (answer.receiptChannel === 'sms' && answer.phone) {
+                    await sendReceipt('sms', answer.phone);
+                } else if (answer.receiptChannel === 'print') {
+                    await printReceipt();
+                } else {
+                    await sendReceipt('none');
+                }
+            })();
+        }
+    }, [
+        settings,
+        display,
+        receipt.order,
+        printReceipt,
+        sendReceipt,
+        smsReceipts
+    ]);
+    return /*#__PURE__*/ _jsxs(Stack, {
+        spacing: 1.5,
+        children: [
+            /*#__PURE__*/ _jsx(Alert, {
+                severity: "success",
+                children: `Paid ${usd(sale.totalCents)}` + (sale.tipCents ? ` + ${usd(sale.tipCents)} tip` : '')
+            }),
+            change ? /*#__PURE__*/ _jsx(Typography, {
+                variant: "h5",
+                component: "p",
+                children: `Change due: ${usd(change)}`
+            }) : null,
+            display.asking === 'receipt' ? /*#__PURE__*/ _jsx(Typography, {
+                variant: "body2",
+                color: "text.secondary",
+                children: 'The customer is choosing a receipt on the display…'
+            }) : null,
+            sent ? /*#__PURE__*/ _jsx(Typography, {
+                variant: "body2",
+                color: "text.secondary",
+                children: sent
+            }) : null,
+            /*#__PURE__*/ _jsxs(Stack, {
+                direction: "row",
+                spacing: 1,
+                children: [
+                    /*#__PURE__*/ _jsx(TextField, {
+                        label: "Email receipt to",
+                        value: email,
+                        onChange: (event)=>setEmail(event.target.value),
+                        sx: {
+                            flex: 1
+                        },
+                        slotProps: {
+                            htmlInput: {
+                                inputMode: 'email',
+                                autoComplete: 'off'
+                            }
+                        }
+                    }),
+                    /*#__PURE__*/ _jsx(Button, {
+                        variant: "outlined",
+                        disabled: !CommerceModel.posDisplayEmail(email),
+                        onClick: ()=>{
+                            display.cancelAsk();
+                            void sendReceipt('email', email.trim());
+                        },
+                        sx: {
+                            minHeight: POS_TOUCH_PX
+                        },
+                        children: 'Send'
+                    })
+                ]
+            }),
+            smsReceipts ? /*#__PURE__*/ _jsxs(Stack, {
+                direction: "row",
+                spacing: 1,
+                children: [
+                    /*#__PURE__*/ _jsx(TextField, {
+                        label: "Text receipt to",
+                        value: phone,
+                        onChange: (event)=>setPhone(event.target.value),
+                        sx: {
+                            flex: 1
+                        },
+                        slotProps: {
+                            htmlInput: {
+                                inputMode: 'tel',
+                                autoComplete: 'off'
+                            }
+                        }
+                    }),
+                    /*#__PURE__*/ _jsx(Button, {
+                        variant: "outlined",
+                        disabled: !CommerceModel.posDisplayPhone(phone),
+                        onClick: ()=>{
+                            display.cancelAsk();
+                            void sendReceipt('sms', phone.trim());
+                        },
+                        sx: {
+                            minHeight: POS_TOUCH_PX
+                        },
+                        children: 'Text'
+                    })
+                ]
+            }) : null,
+            /*#__PURE__*/ _jsxs(Stack, {
+                direction: "row",
+                spacing: 1,
+                children: [
+                    /*#__PURE__*/ _jsx(Button, {
+                        variant: "outlined",
+                        disabled: !receipt.order,
+                        onClick: ()=>{
+                            // The cashier answers for the customer: the display's receipt
+                            // prompt ends with a thank-you rather than waiting it out.
+                            display.cancelAsk();
+                            void printReceipt();
+                        },
+                        sx: {
+                            minHeight: POS_TOUCH_PX,
+                            flex: 1
+                        },
+                        children: 'Print receipt'
+                    }),
+                    /*#__PURE__*/ _jsx(Button, {
+                        variant: "outlined",
+                        disabled: !receipt.order,
+                        onClick: ()=>receipt.print(true),
+                        sx: {
+                            minHeight: POS_TOUCH_PX,
+                            flex: 1
+                        },
+                        children: 'Gift receipt'
+                    }),
+                    /*#__PURE__*/ _jsx(Button, {
+                        variant: "contained",
+                        onClick: ()=>{
+                            display.cancelAsk();
+                            props.onNewSale();
+                        },
+                        sx: {
+                            minHeight: POS_TOUCH_PX,
+                            flex: 1
+                        },
+                        children: 'New sale'
+                    })
+                ]
+            })
+        ]
+    });
+}
+PosReceiptPanel.displayName = 'PosReceiptPanel';
+
+//# sourceMappingURL=pos-receipt-panel.component.js.map