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

package/src/lib/components/console/pos/pos-item-dialog.component.js

@@ -0,0 +1,352 @@
+/**
+ * @license
+ * Copyright 2026 Aglyn LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */ 'use client';
+import { _ as _extends } from "@swc/helpers/_/_extends";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Button, Chip, Dialog, DialogActions, DialogContent, DialogTitle, IconButton, Stack, TextField, ToggleButton, ToggleButtonGroup, Typography, useMediaQuery, useTheme } from "@mui/material";
+import { useEffect, useMemo, useState } from "react";
+import * as CommerceModel from "../../../model/index.js";
+import { usd } from "./pos-api.js";
+import { POS_TOUCH_PX } from "./pos-product-grid.component.js";
+/** Whether the register must ask before adding: a choice of variant or any modifier. */ export function posItemNeedsChoice(product) {
+    var _ref;
+    var _product_variants;
+    return ((_ref = (_product_variants = product.variants) == null ? void 0 : _product_variants.length) != null ? _ref : 0) > 1 || CommerceModel.productModifierGroups(product).length > 0;
+}
+/** The variant whose options match every picked value, or undefined. */ function variantFor(product, picked) {
+    return product.variants.find((variant)=>{
+        var _product_options;
+        return ((_product_options = product.options) != null ? _product_options : []).every((option)=>{
+            var _variant_options;
+            return ((_variant_options = variant.options) == null ? void 0 : _variant_options[option.name]) === picked[option.name];
+        });
+    });
+}
+function variantLabel(variant) {
+    var _variant_options;
+    return Object.values((_variant_options = variant.options) != null ? _variant_options : {}).join(' / ') || 'Default';
+}
+function soldOut(variant) {
+    return (variant == null ? void 0 : variant.inventory) != null && variant.inventory <= 0;
+}
+/**
+ * The register's item sheet (AGL-3607): the size, color or other variant,
+ * then each modifier group — required ones marked, "pick one" groups as a
+ * single toggle row and "pick up to N" groups as chips — and the quantity,
+ * with the line's price on the Add button as it changes. Full screen on a
+ * phone, a dialog on a tablet; every target is at least 44px.
+ *
+ * The price shown is the register's estimate. The server prices the line
+ * again from the product when the sale is charged.
+ */ export function PosItemDialog(props) {
+    var _ref;
+    const { product, initial } = props;
+    const theme = useTheme();
+    const phone = useMediaQuery(theme.breakpoints.down('sm'));
+    const groups = useMemo(()=>product ? CommerceModel.productModifierGroups(product) : [], [
+        product
+    ]);
+    const options = (_ref = product == null ? void 0 : product.options) != null ? _ref : [];
+    const [picked, setPicked] = useState({});
+    const [variantId, setVariantId] = useState('');
+    const [modifiers, setModifiers] = useState([]);
+    const [quantity, setQuantity] = useState(1);
+    useEffect(()=>{
+        var _ref, _product_variants_find, _ref1, _ref2, _ref3, _ref4;
+        if (!product) return;
+        const start = (_ref = (_product_variants_find = product.variants.find((variant)=>variant.id === (initial == null ? void 0 : initial.variantId))) != null ? _product_variants_find : product.variants.find((variant)=>!soldOut(variant))) != null ? _ref : product.variants[0];
+        setVariantId((_ref1 = start == null ? void 0 : start.id) != null ? _ref1 : '');
+        setPicked(_extends({}, (_ref2 = start == null ? void 0 : start.options) != null ? _ref2 : {}));
+        setModifiers((_ref3 = initial == null ? void 0 : initial.modifiers) != null ? _ref3 : []);
+        setQuantity((_ref4 = initial == null ? void 0 : initial.quantity) != null ? _ref4 : 1);
+    }, [
+        product,
+        initial
+    ]);
+    if (!product) return null;
+    const variant = options.length > 0 ? variantFor(product, picked) : product.variants.find((item)=>item.id === variantId);
+    const chosen = CommerceModel.resolveLineModifiers(product, modifiers);
+    const unitCents = variant ? Math.round(Number(variant.priceUsd) * 100) + (chosen.ok ? chosen.extraCents : 0) : 0;
+    const missing = groups.find((group)=>modifiers.filter((pick)=>pick.groupId === group.id).length < group.min);
+    const canAdd = Boolean(variant) && chosen.ok && quantity >= 1;
+    const toggle = (group, optionId)=>{
+        setModifiers((current)=>{
+            const inGroup = current.filter((pick)=>pick.groupId === group.id);
+            const has = inGroup.some((pick)=>pick.optionId === optionId);
+            if (has) return current.filter((pick)=>!(pick.groupId === group.id && pick.optionId === optionId));
+            // A pick-one group swaps its choice; a pick-many group stops at its max.
+            if (group.max === 1) {
+                return [
+                    ...current.filter((pick)=>pick.groupId !== group.id),
+                    {
+                        groupId: group.id,
+                        optionId
+                    }
+                ];
+            }
+            if (inGroup.length >= group.max) return current;
+            return [
+                ...current,
+                {
+                    groupId: group.id,
+                    optionId
+                }
+            ];
+        });
+    };
+    return /*#__PURE__*/ _jsxs(Dialog, {
+        open: true,
+        onClose: props.onClose,
+        fullScreen: phone,
+        fullWidth: true,
+        maxWidth: "sm",
+        children: [
+            /*#__PURE__*/ _jsx(DialogTitle, {
+                children: product.name
+            }),
+            /*#__PURE__*/ _jsx(DialogContent, {
+                dividers: true,
+                children: /*#__PURE__*/ _jsxs(Stack, {
+                    spacing: 3,
+                    children: [
+                        options.length > 0 ? options.map((option)=>{
+                            var _picked_option_name;
+                            return /*#__PURE__*/ _jsxs(Box, {
+                                role: "group",
+                                "aria-label": option.name,
+                                children: [
+                                    /*#__PURE__*/ _jsx(Typography, {
+                                        variant: "subtitle1",
+                                        component: "h3",
+                                        sx: {
+                                            mb: 1
+                                        },
+                                        children: option.name
+                                    }),
+                                    /*#__PURE__*/ _jsx(ToggleButtonGroup, {
+                                        exclusive: true,
+                                        value: (_picked_option_name = picked[option.name]) != null ? _picked_option_name : null,
+                                        onChange: (_event, value)=>{
+                                            if (value) setPicked((current)=>_extends({}, current, {
+                                                    [option.name]: value
+                                                }));
+                                        },
+                                        sx: {
+                                            flexWrap: 'wrap',
+                                            gap: 1
+                                        },
+                                        children: option.values.map((value)=>/*#__PURE__*/ _jsx(ToggleButton, {
+                                                value: value,
+                                                sx: {
+                                                    minHeight: POS_TOUCH_PX,
+                                                    minWidth: 88
+                                                },
+                                                children: value
+                                            }, value))
+                                    })
+                                ]
+                            }, option.name);
+                        }) : product.variants.length > 1 ? /*#__PURE__*/ _jsx(Box, {
+                            role: "group",
+                            "aria-label": "Variant",
+                            children: /*#__PURE__*/ _jsx(ToggleButtonGroup, {
+                                exclusive: true,
+                                value: variantId || null,
+                                onChange: (_event, value)=>value && setVariantId(value),
+                                sx: {
+                                    flexWrap: 'wrap',
+                                    gap: 1
+                                },
+                                children: product.variants.map((item)=>/*#__PURE__*/ _jsx(ToggleButton, {
+                                        value: item.id,
+                                        sx: {
+                                            minHeight: POS_TOUCH_PX,
+                                            minWidth: 88
+                                        },
+                                        children: `${variantLabel(item)} · ${usd(Math.round(Number(item.priceUsd) * 100))}`
+                                    }, item.id))
+                            })
+                        }) : null,
+                        options.length > 0 && !variant ? /*#__PURE__*/ _jsx(Typography, {
+                            variant: "body2",
+                            color: "warning.main",
+                            children: 'That combination is not sold. Pick another.'
+                        }) : null,
+                        variant && soldOut(variant) ? /*#__PURE__*/ _jsx(Typography, {
+                            variant: "body2",
+                            color: "warning.main",
+                            children: 'Out of stock: selling it takes the count below zero.'
+                        }) : null,
+                        groups.map((group)=>{
+                            const count = modifiers.filter((pick)=>pick.groupId === group.id).length;
+                            const rule = CommerceModel.modifierGroupRequired(group) ? group.max === 1 ? 'Required · pick 1' : `Required · pick ${group.min} to ${group.max}` : group.max === 1 ? 'Optional · pick 1' : `Optional · up to ${group.max}`;
+                            return /*#__PURE__*/ _jsxs(Box, {
+                                role: "group",
+                                "aria-label": group.name,
+                                children: [
+                                    /*#__PURE__*/ _jsxs(Stack, {
+                                        direction: "row",
+                                        spacing: 1,
+                                        sx: {
+                                            alignItems: 'baseline',
+                                            mb: 1
+                                        },
+                                        children: [
+                                            /*#__PURE__*/ _jsx(Typography, {
+                                                variant: "subtitle1",
+                                                component: "h3",
+                                                children: group.name
+                                            }),
+                                            /*#__PURE__*/ _jsx(Typography, {
+                                                variant: "caption",
+                                                color: count < group.min ? 'warning.main' : 'text.secondary',
+                                                children: rule
+                                            })
+                                        ]
+                                    }),
+                                    /*#__PURE__*/ _jsx(Box, {
+                                        sx: {
+                                            display: 'flex',
+                                            flexWrap: 'wrap',
+                                            gap: 1
+                                        },
+                                        children: group.options.map((option)=>{
+                                            const selected = modifiers.some((pick)=>pick.groupId === group.id && pick.optionId === option.id);
+                                            return /*#__PURE__*/ _jsx(Chip, {
+                                                label: option.priceCents ? `${option.name} +${usd(option.priceCents)}` : option.name,
+                                                color: selected ? 'primary' : 'default',
+                                                variant: selected ? 'filled' : 'outlined',
+                                                "aria-pressed": selected,
+                                                onClick: ()=>toggle(group, option.id),
+                                                disabled: !selected && group.max > 1 && count >= group.max,
+                                                sx: {
+                                                    minHeight: POS_TOUCH_PX,
+                                                    px: 1
+                                                }
+                                            }, option.id);
+                                        })
+                                    })
+                                ]
+                            }, group.id);
+                        }),
+                        /*#__PURE__*/ _jsxs(Stack, {
+                            direction: "row",
+                            spacing: 1,
+                            sx: {
+                                alignItems: 'center'
+                            },
+                            children: [
+                                /*#__PURE__*/ _jsx(Typography, {
+                                    variant: "subtitle1",
+                                    component: "h3",
+                                    sx: {
+                                        flex: 1
+                                    },
+                                    children: 'Quantity'
+                                }),
+                                /*#__PURE__*/ _jsx(IconButton, {
+                                    "aria-label": "One fewer",
+                                    onClick: ()=>setQuantity((value)=>Math.max(1, value - 1)),
+                                    sx: {
+                                        width: POS_TOUCH_PX,
+                                        height: POS_TOUCH_PX,
+                                        border: 1,
+                                        borderColor: 'divider'
+                                    },
+                                    children: '−'
+                                }),
+                                /*#__PURE__*/ _jsx(TextField, {
+                                    value: quantity,
+                                    onChange: (event)=>{
+                                        const next = Math.round(Number(event.target.value.replace(/\D/g, '')));
+                                        setQuantity(Math.max(1, Math.min(99, next || 1)));
+                                    },
+                                    sx: {
+                                        width: 72
+                                    },
+                                    slotProps: {
+                                        htmlInput: {
+                                            inputMode: 'numeric',
+                                            'aria-label': 'Quantity',
+                                            style: {
+                                                textAlign: 'center'
+                                            }
+                                        }
+                                    }
+                                }),
+                                /*#__PURE__*/ _jsx(IconButton, {
+                                    "aria-label": "One more",
+                                    onClick: ()=>setQuantity((value)=>Math.min(99, value + 1)),
+                                    sx: {
+                                        width: POS_TOUCH_PX,
+                                        height: POS_TOUCH_PX,
+                                        border: 1,
+                                        borderColor: 'divider'
+                                    },
+                                    children: '+'
+                                })
+                            ]
+                        })
+                    ]
+                })
+            }),
+            /*#__PURE__*/ _jsxs(DialogActions, {
+                sx: {
+                    p: 2,
+                    gap: 1
+                },
+                children: [
+                    props.onRemove ? /*#__PURE__*/ _jsx(Button, {
+                        color: "error",
+                        onClick: props.onRemove,
+                        sx: {
+                            minHeight: POS_TOUCH_PX,
+                            mr: 'auto'
+                        },
+                        children: 'Remove'
+                    }) : null,
+                    /*#__PURE__*/ _jsx(Button, {
+                        onClick: props.onClose,
+                        sx: {
+                            minHeight: POS_TOUCH_PX
+                        },
+                        children: 'Cancel'
+                    }),
+                    /*#__PURE__*/ _jsx(Button, {
+                        variant: "contained",
+                        disabled: !canAdd,
+                        onClick: ()=>{
+                            if (!variant || !chosen.ok) return;
+                            props.onConfirm({
+                                variant,
+                                modifiers,
+                                quantity
+                            });
+                        },
+                        sx: {
+                            minHeight: POS_TOUCH_PX,
+                            minWidth: 160
+                        },
+                        children: missing ? `Choose ${missing.name.toLowerCase()}` : `${props.onRemove ? 'Update' : 'Add'} · ${usd(unitCents * quantity)}`
+                    })
+                ]
+            })
+        ]
+    });
+}
+PosItemDialog.displayName = 'PosItemDialog';
+
+//# sourceMappingURL=pos-item-dialog.component.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../../../libs/plugins/commerce/src/lib/components/console/pos/pos-item-dialog.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  Box,\n  Button,\n  Chip,\n  Dialog,\n  DialogActions,\n  DialogContent,\n  DialogTitle,\n  IconButton,\n  Stack,\n  TextField,\n  ToggleButton,\n  ToggleButtonGroup,\n  Typography,\n  useMediaQuery,\n  useTheme,\n} from '@mui/material'\nimport { useEffect, useMemo, useState } from 'react'\nimport * as CommerceModel from '../../../model'\nimport { usd } from './pos-api'\nimport { POS_TOUCH_PX } from './pos-product-grid.component'\n\n/** What the dialog hands back: one basket line's worth of choices. */\nexport interface PosItemChoice {\n  variant: CommerceModel.ProductVariant\n  modifiers: CommerceModel.ModifierSelection[]\n  quantity: number\n}\n\nexport interface PosItemDialogProps {\n  /** The product being added or edited; `null` closes the dialog. */\n  product: (CommerceModel.HostProduct & { $id: string }) | null\n  /** An existing line's choices, when the cashier tapped a basket line. */\n  initial?: { variantId?: string; modifiers?: CommerceModel.ModifierSelection[]; quantity: number }\n  onClose: () => void\n  onConfirm: (choice: PosItemChoice) => void\n  /** Editing only: takes the line out of the basket. */\n  onRemove?: () => void\n}\n\n/** Whether the register must ask before adding: a choice of variant or any modifier. */\nexport function posItemNeedsChoice(product: CommerceModel.HostProduct): boolean {\n  return (\n    (product.variants?.length ?? 0) > 1 ||\n    CommerceModel.productModifierGroups(product).length > 0\n  )\n}\n\n/** The variant whose options match every picked value, or undefined. */\nfunction variantFor(\n  product: CommerceModel.HostProduct,\n  picked: Record<string, string>,\n): CommerceModel.ProductVariant | undefined {\n  return product.variants.find((variant) =>\n    (product.options ?? []).every((option) => variant.options?.[option.name] === picked[option.name]),\n  )\n}\n\nfunction variantLabel(variant: CommerceModel.ProductVariant): string {\n  return Object.values(variant.options ?? {}).join(' / ') || 'Default'\n}\n\nfunction soldOut(variant: CommerceModel.ProductVariant | undefined): boolean {\n  return variant?.inventory != null && variant.inventory <= 0\n}\n\n/**\n * The register's item sheet (AGL-3607): the size, color or other variant,\n * then each modifier group — required ones marked, \"pick one\" groups as a\n * single toggle row and \"pick up to N\" groups as chips — and the quantity,\n * with the line's price on the Add button as it changes. Full screen on a\n * phone, a dialog on a tablet; every target is at least 44px.\n *\n * The price shown is the register's estimate. The server prices the line\n * again from the product when the sale is charged.\n */\nexport function PosItemDialog(props: PosItemDialogProps) {\n  const { product, initial } = props\n  const theme = useTheme()\n  const phone = useMediaQuery(theme.breakpoints.down('sm'))\n  const groups = useMemo(\n    () => (product ? CommerceModel.productModifierGroups(product) : []),\n    [product],\n  )\n  const options = product?.options ?? []\n  const [picked, setPicked] = useState<Record<string, string>>({})\n  const [variantId, setVariantId] = useState('')\n  const [modifiers, setModifiers] = useState<CommerceModel.ModifierSelection[]>([])\n  const [quantity, setQuantity] = useState(1)\n\n  useEffect(() => {\n    if (!product) return\n    const start =\n      product.variants.find((variant) => variant.id === initial?.variantId) ??\n      product.variants.find((variant) => !soldOut(variant)) ??\n      product.variants[0]\n    setVariantId(start?.id ?? '')\n    setPicked({ ...(start?.options ?? {}) })\n    setModifiers(initial?.modifiers ?? [])\n    setQuantity(initial?.quantity ?? 1)\n  }, [product, initial])\n\n  if (!product) return null\n\n  const variant =\n    options.length > 0\n      ? variantFor(product, picked)\n      : product.variants.find((item) => item.id === variantId)\n  const chosen = CommerceModel.resolveLineModifiers(product, modifiers)\n  const unitCents = variant\n    ? Math.round(Number(variant.priceUsd) * 100) + (chosen.ok ? chosen.extraCents : 0)\n    : 0\n  const missing = groups.find(\n    (group) => modifiers.filter((pick) => pick.groupId === group.id).length < group.min,\n  )\n  const canAdd = Boolean(variant) && chosen.ok && quantity >= 1\n\n  const toggle = (group: CommerceModel.ProductModifierGroup, optionId: string) => {\n    setModifiers((current) => {\n      const inGroup = current.filter((pick) => pick.groupId === group.id)\n      const has = inGroup.some((pick) => pick.optionId === optionId)\n      if (has) return current.filter((pick) => !(pick.groupId === group.id && pick.optionId === optionId))\n      // A pick-one group swaps its choice; a pick-many group stops at its max.\n      if (group.max === 1) {\n        return [...current.filter((pick) => pick.groupId !== group.id), { groupId: group.id, optionId }]\n      }\n      if (inGroup.length >= group.max) return current\n      return [...current, { groupId: group.id, optionId }]\n    })\n  }\n\n  return (\n    <Dialog open onClose={props.onClose} fullScreen={phone} fullWidth maxWidth=\"sm\">\n      <DialogTitle>{product.name}</DialogTitle>\n      <DialogContent dividers>\n        <Stack spacing={3}>\n          {options.length > 0\n            ? options.map((option) => (\n                <Box key={option.name} role=\"group\" aria-label={option.name}>\n                  <Typography variant=\"subtitle1\" component=\"h3\" sx={{ mb: 1 }}>\n                    {option.name}\n                  </Typography>\n                  <ToggleButtonGroup\n                    exclusive\n                    value={picked[option.name] ?? null}\n                    onChange={(_event, value: string | null) => {\n                      if (value) setPicked((current) => ({ ...current, [option.name]: value }))\n                    }}\n                    sx={{ flexWrap: 'wrap', gap: 1 }}\n                  >\n                    {option.values.map((value) => (\n                      <ToggleButton key={value} value={value} sx={{ minHeight: POS_TOUCH_PX, minWidth: 88 }}>\n                        {value}\n                      </ToggleButton>\n                    ))}\n                  </ToggleButtonGroup>\n                </Box>\n              ))\n            : product.variants.length > 1 ? (\n                <Box role=\"group\" aria-label=\"Variant\">\n                  <ToggleButtonGroup\n                    exclusive\n                    value={variantId || null}\n                    onChange={(_event, value: string | null) => value && setVariantId(value)}\n                    sx={{ flexWrap: 'wrap', gap: 1 }}\n                  >\n                    {product.variants.map((item) => (\n                      <ToggleButton key={item.id} value={item.id} sx={{ minHeight: POS_TOUCH_PX, minWidth: 88 }}>\n                        {`${variantLabel(item)} · ${usd(Math.round(Number(item.priceUsd) * 100))}`}\n                      </ToggleButton>\n                    ))}\n                  </ToggleButtonGroup>\n                </Box>\n              ) : null}\n          {options.length > 0 && !variant ? (\n            <Typography variant=\"body2\" color=\"warning.main\">\n              {'That combination is not sold. Pick another.'}\n            </Typography>\n          ) : null}\n          {variant && soldOut(variant) ? (\n            <Typography variant=\"body2\" color=\"warning.main\">\n              {'Out of stock: selling it takes the count below zero.'}\n            </Typography>\n          ) : null}\n          {groups.map((group) => {\n            const count = modifiers.filter((pick) => pick.groupId === group.id).length\n            const rule = CommerceModel.modifierGroupRequired(group)\n              ? group.max === 1\n                ? 'Required · pick 1'\n                : `Required · pick ${group.min} to ${group.max}`\n              : group.max === 1\n                ? 'Optional · pick 1'\n                : `Optional · up to ${group.max}`\n            return (\n              <Box key={group.id} role=\"group\" aria-label={group.name}>\n                <Stack direction=\"row\" spacing={1} sx={{ alignItems: 'baseline', mb: 1 }}>\n                  <Typography variant=\"subtitle1\" component=\"h3\">\n                    {group.name}\n                  </Typography>\n                  <Typography\n                    variant=\"caption\"\n                    color={count < group.min ? 'warning.main' : 'text.secondary'}\n                  >\n                    {rule}\n                  </Typography>\n                </Stack>\n                <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 1 }}>\n                  {group.options.map((option) => {\n                    const selected = modifiers.some(\n                      (pick) => pick.groupId === group.id && pick.optionId === option.id,\n                    )\n                    return (\n                      <Chip\n                        key={option.id}\n                        label={option.priceCents ? `${option.name} +${usd(option.priceCents)}` : option.name}\n                        color={selected ? 'primary' : 'default'}\n                        variant={selected ? 'filled' : 'outlined'}\n                        aria-pressed={selected}\n                        onClick={() => toggle(group, option.id)}\n                        disabled={!selected && group.max > 1 && count >= group.max}\n                        sx={{ minHeight: POS_TOUCH_PX, px: 1 }}\n                      />\n                    )\n                  })}\n                </Box>\n              </Box>\n            )\n          })}\n          <Stack direction=\"row\" spacing={1} sx={{ alignItems: 'center' }}>\n            <Typography variant=\"subtitle1\" component=\"h3\" sx={{ flex: 1 }}>\n              {'Quantity'}\n            </Typography>\n            <IconButton\n              aria-label=\"One fewer\"\n              onClick={() => setQuantity((value) => Math.max(1, value - 1))}\n              sx={{ width: POS_TOUCH_PX, height: POS_TOUCH_PX, border: 1, borderColor: 'divider' }}\n            >\n              {'−'}\n            </IconButton>\n            <TextField\n              value={quantity}\n              onChange={(event) => {\n                const next = Math.round(Number(event.target.value.replace(/\\D/g, '')))\n                setQuantity(Math.max(1, Math.min(99, next || 1)))\n              }}\n              sx={{ width: 72 }}\n              slotProps={{\n                htmlInput: { inputMode: 'numeric', 'aria-label': 'Quantity', style: { textAlign: 'center' } },\n              }}\n            />\n            <IconButton\n              aria-label=\"One more\"\n              onClick={() => setQuantity((value) => Math.min(99, value + 1))}\n              sx={{ width: POS_TOUCH_PX, height: POS_TOUCH_PX, border: 1, borderColor: 'divider' }}\n            >\n              {'+'}\n            </IconButton>\n          </Stack>\n        </Stack>\n      </DialogContent>\n      <DialogActions sx={{ p: 2, gap: 1 }}>\n        {props.onRemove ? (\n          <Button color=\"error\" onClick={props.onRemove} sx={{ minHeight: POS_TOUCH_PX, mr: 'auto' }}>\n            {'Remove'}\n          </Button>\n        ) : null}\n        <Button onClick={props.onClose} sx={{ minHeight: POS_TOUCH_PX }}>\n          {'Cancel'}\n        </Button>\n        <Button\n          variant=\"contained\"\n          disabled={!canAdd}\n          onClick={() => {\n            if (!variant || !chosen.ok) return\n            props.onConfirm({ variant, modifiers, quantity })\n          }}\n          sx={{ minHeight: POS_TOUCH_PX, minWidth: 160 }}\n        >\n          {missing\n            ? `Choose ${missing.name.toLowerCase()}`\n            : `${props.onRemove ? 'Update' : 'Add'} · ${usd(unitCents * quantity)}`}\n        </Button>\n      </DialogActions>\n    </Dialog>\n  )\n}\nPosItemDialog.displayName = 'PosItemDialog'\n"],"names":["Box","Button","Chip","Dialog","DialogActions","DialogContent","DialogTitle","IconButton","Stack","TextField","ToggleButton","ToggleButtonGroup","Typography","useMediaQuery","useTheme","useEffect","useMemo","useState","CommerceModel","usd","POS_TOUCH_PX","posItemNeedsChoice","product","variants","length","productModifierGroups","variantFor","picked","find","variant","options","every","option","name","variantLabel","Object","values","join","soldOut","inventory","PosItemDialog","props","initial","theme","phone","breakpoints","down","groups","setPicked","variantId","setVariantId","modifiers","setModifiers","quantity","setQuantity","start","id","item","chosen","resolveLineModifiers","unitCents","Math","round","Number","priceUsd","ok","extraCents","missing","group","filter","pick","groupId","min","canAdd","Boolean","toggle","optionId","current","inGroup","has","some","max","open","onClose","fullScreen","fullWidth","maxWidth","dividers","spacing","map","role","aria-label","component","sx","mb","exclusive","value","onChange","_event","flexWrap","gap","minHeight","minWidth","color","count","rule","modifierGroupRequired","direction","alignItems","display","selected","label","priceCents","aria-pressed","onClick","disabled","px","flex","width","height","border","borderColor","event","next","target","replace","slotProps","htmlInput","inputMode","style","textAlign","p","onRemove","mr","onConfirm","toLowerCase","displayName"],"mappings":"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"}

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

@@ -0,0 +1,47 @@
+import { ListQueryNotices } from '@aglyn/shared-ui-jsx/components/list-query-notices.component';
+import type { ReactNode } from 'react';
+import * as CommerceModel from '../../../model';
+/** The smallest comfortable touch target, in px (WCAG 2.5.5). */
+export declare const POS_TOUCH_PX = 44;
+/** The category chip that shows the store's quick keys (AGL-3607). */
+export declare const POS_QUICK_KEYS = "__quick";
+export interface PosGridCategory {
+    $id: string;
+    name: string;
+}
+export interface PosProductGridProps {
+    hostId: string;
+    search: string;
+    onSearch: (value: string) => void;
+    /** Enter in the search box: a barcode wedge finishing a scan. */
+    onSearchEnter: () => void;
+    /** The camera scanner's button (AGL-3619), at the end of the search box. */
+    scanAdornment?: ReactNode;
+    categories: PosGridCategory[];
+    /** `''` for all, {@link POS_QUICK_KEYS}, or a category id. */
+    categoryId: string;
+    onCategory: (id: string) => void;
+    notices: Parameters<typeof ListQueryNotices>[0]['notices'];
+    products: any[];
+    /** How many of each product are in the basket, for the tile badge. */
+    basketCounts: ReadonlyMap<string, number>;
+    onTap: (product: any) => void;
+    /** A slot under the search, for the register's reader and display status. */
+    toolbar?: ReactNode;
+}
+/** `$4.50`, or `From $4.50` when the variants are not all one price. */
+export declare function posTilePrice(product: CommerceModel.HostProduct): string;
+/** What the tile says about the shelf: nothing when it is untracked or plenty. */
+export declare function posTileStock(product: CommerceModel.HostProduct): string | 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 declare function PosProductGrid(props: PosProductGridProps): import("react").JSX.Element;
+export declare namespace PosProductGrid {
+    var displayName: string;
+}